/* ============================================================================
   PROCESS-BILITY — SHARED DESIGN SYSTEM
   ============================================================================
   Linked by index.html, masterclass.html and book.html. Edit tokens or shared
   components HERE ONCE and every page follows.

   Apple's layout language (980px column, alternating bands, large tight-tracked
   display type, 18px-radius cards, pill buttons) in the book-cover palette:
   cream ground, near-black ink, warm grey, lemon-yellow highlight.

   CACHE: every page links this as  pb.css?v=N . BUMP THAT N IN ALL FOUR HTML
   FILES whenever you change this file, or returning visitors keep the old
   stylesheet and the page renders with stale rules. Currently v=2.

   COLOUR RULE — IMPORTANT
   Yellow NEVER sits on a light ground; it fails contrast badly. Yellow only
   ever fills a black lozenge (.mark / .pill) or acts as a rule/highlighter
   underline. Links are ink-coloured with a yellow underline.

   FONTS — no webfonts. The system stack serves SF Pro on Apple devices, Segoe
   on Windows, Roboto on Android. This keeps us clear of Apple's SF Pro licence,
   which does not permit self-hosting the font files.
   ========================================================================== */

/* ============================ TOKENS ============================ */
:root{
  --ground:#f4f2eb;        /* cover cream */
  --ground-2:#eae7dd;      /* deeper cream band */
  --card:#fcfbf7;
  --ink:#17171a;           /* cover black */
  --ink-2:#57574f;         /* body secondary */
  --ink-3:#686864;         /* small labels — 4.8:1 on cream */
  --dim-display:#8a8a84;   /* the cover's grey, display scale only */
  --line:#dcd8cd;          /* hairline, warm-biased toward the ground */
  --line-soft:#e5e1d6;

  --hi:#f2de4b;            /* the yellow — fills and rules only */
  --hi-soft:rgba(242,222,75,.5);
  --hi-bg:#17171a;         /* lozenge ground */
  --hi-ink:#f2de4b;        /* lozenge text */

  --band:#121214;          /* the one dark band */
  --band-ink:#f4f2eb;
  --band-ink-2:#9d9c94;
  --band-line:rgba(244,242,235,.15);

  /* an always-dark surface — never derive from --ink, which flips to
     cream in dark mode */
  --invert-bg:#17171a;
  --invert-ink:#f4f2eb;

  --shadow:0 4px 22px rgba(23,23,26,.07);
  --maxw:980px;
  --navw:1024px;

  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,
         "Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,
            "Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0f0f11;
    --ground-2:#17171a;
    --card:#1e1e21;
    --ink:#f4f2eb;         /* the cream becomes the ink */
    --ink-2:#a3a29b;
    --ink-3:#8e8d86;
    --dim-display:#75746d;
    --line:#2e2e31;
    --line-soft:#26262a;

    --hi:#f5e25c;
    --hi-soft:rgba(245,226,92,.22);
    --hi-bg:#f5e25c;       /* inverts: yellow lozenge, black text */
    --hi-ink:#121214;

    --band:#000000;
    --band-line:rgba(244,242,235,.13);

    --invert-bg:#1e1e21;

    --shadow:0 4px 22px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"]{
  --ground:#0f0f11;
  --ground-2:#17171a;
  --card:#1e1e21;
  --ink:#f4f2eb;
  --ink-2:#a3a29b;
  --ink-3:#8e8d86;
  --dim-display:#75746d;
  --line:#2e2e31;
  --line-soft:#26262a;
  --hi:#f5e25c;
  --hi-soft:rgba(245,226,92,.22);
  --hi-bg:#f5e25c;
  --hi-ink:#121214;
  --band:#000000;
  --band-line:rgba(244,242,235,.13);
  --invert-bg:#1e1e21;
  --shadow:0 4px 22px rgba(0,0,0,.5);
}

/* ============================ BASE ============================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.47;
  letter-spacing:-.022em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4{font-family:var(--display); font-weight:700; margin:0; text-wrap:balance;}
p{margin:0;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}

:focus-visible{outline:3px solid var(--ink); outline-offset:3px; border-radius:6px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}

/* ============================ TYPE SCALE ============================ */
/* 1.12, not the tighter leading you would normally want on display type: a
   .mark pill's background box is ~0.99em tall on its own, so anything below
   about 1.10 makes the pill overlap the line above it. Measured, not guessed. */
.t-hero{font-size:clamp(44px,7.6vw,82px); line-height:1.18; letter-spacing:-.026em; font-weight:800;}
.t-h2{font-size:clamp(32px,4.6vw,54px); line-height:1.04; letter-spacing:-.02em;}
.t-h3{font-size:clamp(23px,2.8vw,32px); line-height:1.1; letter-spacing:-.018em;}
.t-sub{font-size:clamp(19px,2.1vw,21px); line-height:1.42; letter-spacing:.004em; font-weight:400;}

.dim{color:var(--dim-display);}
.muted{color:var(--ink-2);}

/* the brand device: yellow on a black lozenge.
   box-decoration-break:clone gives EACH wrapped line its own rounded pill.
   Without it a phrase that wraps renders as one enormous blob around both
   lines, which is what a multi-word mark in a hero will always do. */
/* inline-block + line-height:1 is what makes the pill height CONTROLLABLE.
   As display:inline the background is locked to the font's content area
   (~1.17em) no matter what padding says, which is why it overflowed the line
   and collided with the text above. As inline-block the background is the
   content box, so line-height sets it exactly: 1em tall, no vertical padding.
   Keep .t-hero's line-height at 1.12 or more, or this collides again.
   Trade-off: an inline-block cannot wrap, so keep marked text to ONE word. */
.mark{
  background:var(--hi-bg); color:var(--hi-ink);
  border-radius:980px;
  display:inline-block;
  line-height:1;
  padding:0 .28em;
}

.mono{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500;
}

/* links: ink text, highlighter underline — accessible and on-brand */
.link{
  color:var(--ink); font-size:17px; letter-spacing:-.022em;
  display:inline-flex; align-items:baseline; gap:.3em;
  border-bottom:2px solid var(--hi); padding-bottom:1px;
  transition:background .18s ease;
}
.link::after{content:"\203A"; font-size:1.12em; line-height:1;}
.link:hover{background:var(--hi-soft);}

/* Apple pill == the cover's lozenge */
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--hi-bg); color:var(--hi-ink);
  border-radius:980px; padding:13px 26px;
  font-size:17px; font-weight:600; letter-spacing:-.02em;
  border:none; cursor:pointer; font-family:var(--sans);
  transition:transform .2s ease, opacity .2s ease;
}
.pill:hover{transform:translateY(-1px); opacity:.9;}
.pill--block{width:100%;}

.dot{
  width:10px; height:10px; border-radius:50%; flex:none; display:inline-block;
  background:var(--hi); border:2px solid var(--ink);
}

/* ============================ PROMO + NAV ============================ */
.promo{
  background:var(--invert-bg); color:var(--invert-ink);
  font-size:14px; text-align:center; padding:11px 22px; letter-spacing:-.016em;
}
.promo a{color:var(--hi); border-bottom:1px solid transparent;}
.promo a:hover{border-color:var(--hi);}

nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--ground) 84%, transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{
  max-width:var(--navw); margin:0 auto; padding:0 22px;
  height:50px; display:flex; align-items:center; gap:30px;
}
.nav-brand{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:700; letter-spacing:-.02em; font-family:var(--display);
}
.nav-links{display:flex; gap:28px; align-items:center; margin-left:auto;}
.nav-links a{font-size:12px; color:var(--ink-2); letter-spacing:-.01em; font-weight:500;}
.nav-links a:hover{color:var(--ink);}
.nav-links a.is-cta{
  background:var(--hi-bg); color:var(--hi-ink);
  padding:6px 14px; border-radius:980px; font-weight:600;
}

/* ============================ BANDS ============================ */
.band{padding:clamp(72px,9vw,124px) 0; background:var(--ground);}
.band--alt{background:var(--ground-2);}
.band--dark{background:var(--band); color:var(--band-ink);}
.band--dark .dim{color:var(--band-ink-2);}
.band--dark .mono{color:var(--band-ink-2);}
.band--dark .muted{color:var(--band-ink-2);}
.band--tight{padding:clamp(50px,6vw,78px) 0;}

.stack{display:flex; flex-direction:column;}
.center{text-align:center; align-items:center;}
.lede{margin-top:18px; max-width:58ch;}

/* ============================ STATS ============================ */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px 20px;
  border-top:1px solid var(--line); padding-top:clamp(32px,4vw,46px);
}
.stat{display:flex; flex-direction:column; gap:6px;}
.stat .n{
  font-family:var(--display);
  font-size:clamp(32px,3.8vw,46px); font-weight:800;
  letter-spacing:-.028em; line-height:1; font-variant-numeric:tabular-nums;
}
.stat .n em{font-style:normal; background:var(--hi-soft); padding:0 .08em;}
.stat .l{font-size:14px; color:var(--ink-2); letter-spacing:-.016em;}

/* ============================ CREDENTIAL WALL ============================
   Apple's tech-specs pattern: label left, value right, hairline between.
   One yellow rule at the top is the only ornament. */
.creds{
  margin:clamp(20px,3vw,34px) 0 0; width:100%; max-width:560px;
  border-top:2px solid var(--hi);
}
.cred{
  display:grid; grid-template-columns:1fr auto; gap:24px;
  align-items:baseline; padding:15px 2px;
  border-bottom:1px solid var(--line);
}
.cred:last-child{border-bottom:none;}
.cred dt{font-size:15px; color:var(--ink-2); letter-spacing:-.016em;}
.cred dd{
  margin:0; font-size:17px; font-weight:600; letter-spacing:-.02em;
  text-align:right; font-family:var(--display);
}

/* ============================ CARDS ============================ */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(38px,5vw,54px);}
.cards--2{grid-template-columns:repeat(2,1fr);}
.card{
  background:var(--card); border:1px solid var(--line-soft);
  border-radius:18px; padding:27px 24px 25px;
  display:flex; flex-direction:column; gap:9px;
  box-shadow:var(--shadow);
  transition:transform .25s ease, border-color .25s ease;
}
.card:hover{transform:translateY(-4px); border-color:var(--hi);}
.card .cap{height:4px; width:30px; border-radius:99px; margin-bottom:8px; background:var(--hi);}
.card h3{font-size:21px; letter-spacing:-.02em;}
.card p{font-size:15px; color:var(--ink-2); letter-spacing:-.014em; flex:1;}
.card .fmt{padding-top:4px;}
.card .link{font-size:15px; margin-top:6px; align-self:flex-start;}
.card--lead{
  grid-column:1 / -1;
  display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center;
  padding:34px 32px;
}
.card--lead .body{display:flex; flex-direction:column; gap:9px;}
.card--lead h3{font-size:clamp(24px,2.8vw,32px);}
.card--lead p{max-width:52ch; font-size:17px;}

/* cards on the dark band */
.band--dark .card{
  background:rgba(244,242,235,.04); border-color:var(--band-line);
  box-shadow:none;
}
.band--dark .card p{color:var(--band-ink-2);}

/* ============================ NUMBERED ROWS ============================
   Use ONLY where the content genuinely is a sequence or a stack. */
.rows{display:grid; grid-template-columns:repeat(2,1fr); gap:0 48px; margin-top:clamp(34px,4vw,50px);}
.row{
  display:grid; grid-template-columns:30px 1fr; gap:18px; align-items:start;
  padding:19px 0; border-top:1px solid var(--line);
}
.row .n{
  font-family:var(--mono); font-size:13px; color:var(--ink); font-weight:600;
  font-variant-numeric:tabular-nums; padding-top:3px;
  border-bottom:2px solid var(--hi); justify-self:start;
}
.row h4{font-size:17px; letter-spacing:-.02em; margin-bottom:3px;}
.row p{font-size:15px; color:var(--ink-2); letter-spacing:-.014em;}

/* ============================ QUOTES ============================ */
blockquote{
  margin:0; padding-left:20px; border-left:3px solid var(--hi);
  display:flex; flex-direction:column; gap:9px;
}
blockquote p{font-size:21px; letter-spacing:-.02em; line-height:1.34;}
blockquote .by{font-size:14px; color:var(--ink-3); letter-spacing:-.014em;}

/* ============================ FOOTER ============================ */
footer{
  background:var(--ground-2); border-top:1px solid var(--line);
  padding:34px 0 44px; font-size:12px; color:var(--ink-3); line-height:1.5;
}
footer .wrap{max-width:var(--navw);}
.foot-cols{
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px 20px;
  padding-bottom:26px; border-bottom:1px solid var(--line);
}
.foot-col{display:flex; flex-direction:column; gap:9px;}
.foot-col strong{color:var(--ink); font-size:12px; font-weight:700;}
.foot-col a{color:var(--ink-3); display:block;}
.foot-col a:hover{color:var(--ink);}
.foot-legal{padding-top:18px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;}

/* ============================ MOTION ============================ */
.rise{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease;}
.rise.in{opacity:1; transform:none;}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important;}
  .rise{opacity:1; transform:none;}
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:900px){
  .cards,.cards--2{grid-template-columns:repeat(2,1fr);}
  .card--lead{grid-template-columns:1fr; align-items:start;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .rows{grid-template-columns:1fr; gap:0;}
  .foot-cols{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .cards,.cards--2{grid-template-columns:1fr;}
  .nav-links{gap:16px;}
  .nav-links a.is-hideable{display:none;}
}