/* THE PLAYGROUND — kb13.com/playground
   KB 2026-10-05: "i want more white, less bone... i want more colorful."
   Ground is near-white; the colour comes from the four pillars, each owning a hue, the same way
   each image genre owns one. Colour here says WHICH pillar, never decoration. */

.pg-hero{background:var(--ink);color:var(--bone);padding:52px 0 0;overflow:hidden}
.pg-hero-in{display:grid;grid-template-columns:1fr;gap:0;align-items:end;max-width:1080px;margin:0 auto}
.pg-hero-txt{padding-bottom:40px}
.pg-hero .lbl{color:var(--goldlt);letter-spacing:.18em;text-transform:uppercase;
  font-size:12px;font-weight:700;margin-bottom:10px}
.pg-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,8vw,62px);
  line-height:1.02;margin:0 0 20px;text-wrap:balance}
.pg-ppp{font-size:17px;line-height:1.62;color:#cfc9bd;max-width:54ch;margin:0 0 18px}
.pg-pos{font-size:17px;line-height:1.6;color:var(--goldlt);font-weight:600;max-width:52ch;margin:0 0 18px}
.pg-free{font-size:14.5px;line-height:1.55;color:#8f8a80;max-width:50ch;margin:0}
/* THE PHOTO SHOWS ON THE PHONE TOO. It was hidden below 960px, which meant Kevin's own face
   never appeared on the device most of the traffic arrives on — the opposite of "i need more
   photos of me". On a phone it sits under the words; on a wide screen it sits beside them. */
.pg-hero-img{display:block;margin-top:4px}
.pg-hero-img img{display:block;width:100%;height:auto;max-width:300px;margin:0 auto -4px}

.pg-door{background:var(--paper);padding:54px 0;border-bottom:1px solid var(--line)}
.pg-door-lbl{letter-spacing:.18em;text-transform:uppercase;font-size:12px;font-weight:700;
  color:var(--fitness);margin-bottom:8px}
.pg-door h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,5vw,40px);
  line-height:1.08;margin:0 0 14px}
.pg-door p{font-size:17px;line-height:1.62;color:#44433f;max-width:60ch;margin:0 0 20px}
.pg-door-slot{border:2px dashed var(--line);border-radius:12px;padding:26px 22px;background:var(--bone)}
.pg-slot-tag{font-weight:800;letter-spacing:.1em;font-size:12px;text-transform:uppercase;
  color:var(--dim);margin:0 0 8px !important}
.pg-slot-note{font-size:15px;color:var(--dim);margin:0 !important}

.pg-shelves{background:var(--bone);padding:54px 0 60px}
.pg-h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,5vw,40px);margin:0 0 10px}
.pg-sub{font-size:16.5px;line-height:1.6;color:#55534e;max-width:62ch;margin:0 0 26px}

.pg-filters{display:flex;flex-direction:column;gap:14px;margin:0 0 26px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 16px 18px}
.pg-fgroup{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.pg-flabel{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);width:100%;margin-bottom:2px}
.pg-f{appearance:none;border:1px solid var(--line);background:var(--paper);color:#3b3a37;
  font:600 13.5px/1 var(--sans);padding:8px 13px;border-radius:999px;cursor:pointer;
  transition:background .14s,border-color .14s,color .14s}
.pg-f:hover{border-color:#cfc8ba}
.pg-f.is-on{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.pg-f.pg-faith.is-on{background:var(--faith);border-color:var(--faith)}
.pg-f.pg-finance.is-on{background:var(--finance);border-color:var(--finance);color:var(--ink)}
.pg-f.pg-fitness.is-on{background:var(--fitness);border-color:var(--fitness);color:#fff}
.pg-f.pg-family.is-on{background:var(--family);border-color:var(--family);color:#fff}
.pg-f:focus-visible{outline:3px solid var(--goldlt);outline-offset:2px}

.pg-grid{display:grid;grid-template-columns:1fr;gap:14px}
.pg-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:20px 20px 18px;border-left:5px solid var(--line)}
.pg-card[hidden]{display:none}
.pg-faith{border-left-color:var(--faith)}
.pg-finance{border-left-color:var(--finance)}
.pg-fitness{border-left-color:var(--fitness)}
.pg-family{border-left-color:var(--family)}
.pg-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:7px}
.pg-card h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.1;margin:0}
.pg-card p{font-size:15.5px;line-height:1.56;color:#55534e;margin:0}
.pg-status{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);background:var(--bone);border:1px solid var(--line);
  border-radius:999px;padding:4px 10px;white-space:nowrap}
.pg-status.is-live{color:#14532d;background:#e9f5ee;border-color:#bfe0cc}
.pg-empty-note{margin-top:18px;font-size:15px;color:var(--dim)}

.pg-attrib{margin-top:22px;font-size:13.5px;color:var(--dim);line-height:1.55}

.pg-join{background:var(--paper);padding:52px 0 58px;border-top:1px solid var(--line)}
.pg-join h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,4.6vw,36px);margin:0 0 10px}
.pg-join p{font-size:16.5px;line-height:1.6;color:#44433f;max-width:56ch;margin:0 0 18px}
.pg-join .fine{font-size:13.5px;color:var(--dim);margin-top:12px}

@media (min-width:760px){
  .pg-grid{grid-template-columns:1fr 1fr}
  .pg-filters{padding:18px 20px 20px}
}
@media (min-width:960px){
  .pg-hero{padding-top:64px}
  .pg-hero-in{grid-template-columns:1.25fr .75fr;gap:30px}
  .pg-hero-img{align-self:end;margin-top:0}
  .pg-hero-img img{max-width:380px;margin-bottom:-4px}
  .pg-hero-txt{padding-bottom:56px}
}
@media (prefers-reduced-motion:reduce){.pg-f{transition:none}}

/* "Where you are" is not a filter yet — it is a promise with a date on it.
   KB, 2026-10-06: "just make the 'where you are' say 'Coming soon'. we need to build a quiz or
   onboarding plan for where they are in their journey." Three dead buttons that filter on an
   attribute nothing carries would be a control that lies; this says what is coming instead. */
.pg-fgroup-soon{display:block}
.pg-fgroup-soon .pg-flabel em{font-style:normal;color:var(--dim);letter-spacing:.1em}
.pg-soon{font-size:14px;line-height:1.5;color:var(--dim);margin:2px 0 0;max-width:52ch}

/* THE MODEL IS THE POSITIONING. KB, 2026-10-06: "everything is built on a foundation. the
   foundation has 4 pillars. within those pillars there are layers. my goal is to help you
   secure a strong foundation in all 4 pillars and get to the top layer of each. i am doing it
   myself out loud... learn from my mistakes, not your own."
   The last line is the whole brand in six words, so it is set like a line and not like a
   paragraph. The shelf count is a fact, so it is set like a fact. */
.pg-sub-hard{font-family:var(--serif);font-size:clamp(21px,4.4vw,29px);line-height:1.22;
  color:var(--ink);margin-top:6px;max-width:22ch}
.pg-sub-small{font-size:14.5px;color:var(--dim);margin-top:14px}

/* A SHELF THAT CLAIMS CONTENT HAS TO OPEN IT. The two open shelves are links; the six that say
   "Coming soon" deliberately are not, because there is nowhere honest to send anyone yet — a
   link to an empty page is the same broken promise one level down. So the two look different:
   they lift, they carry an arrow, and they take keyboard focus. */
a.pg-card{display:block;text-decoration:none;color:inherit;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
a.pg-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(11,11,12,.10)}
a.pg-card:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
a.pg-card h3::after{content:" \2192";color:var(--gold);font-weight:700}
.pg-card:not(a) .pg-status{opacity:.85}