/* ==========================================================================
   Page components shared by the article, book, speaking, media kit and 404.
   Loads after brand.css and before any page file.
   ========================================================================== */
.btn svg{width:14px;height:14px;flex:none;transition:transform .15s}
.btn:hover svg{transform:translateX(3px)}

/* sections: numbered, because the read is a sequence */
/* anchor jumps use brand.css's 96px scroll-padding; an extra scroll-margin here
   would land sections below site.js's 150px reading line and highlight the previous entry */
.sec{padding:0 0 clamp(52px,7vw,84px)}
.sec__hd{display:flex;align-items:baseline;gap:16px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.sec__num{flex:none;font:600 18px var(--d);color:var(--teal);font-variant-numeric:lining-nums tabular-nums}
.sec__hd h2{font-size:clamp(28px,3.4vw,40px);line-height:1.08}
.prose{max-width:68ch}
.prose p{margin:0 0 18px;font-size:17.5px;line-height:1.7;color:color-mix(in srgb,var(--ink) 88%,var(--oat))}
.prose .lede{font-size:clamp(19px,2vw,21.5px);line-height:1.55;color:var(--ink)}
.prose strong{font-weight:600;color:var(--ink);box-shadow:inset 0 -.18em 0 color-mix(in srgb,var(--mustard) 55%,transparent)}
.prose a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:3px}

/* the work, in order (numbered), and what gets you in (parallel, arrowed) */
.specs{list-style:none;margin:26px 0;padding:0;max-width:68ch}
.specs li{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--rule)}
.specs li:last-child{border-bottom:1px solid var(--rule)}
.specs .k{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--esp);color:var(--oat);
  font:600 13px var(--d);font-variant-numeric:lining-nums}
ul.specs .k{background:color-mix(in srgb,var(--teal) 14%,rgba(251,248,242,.8));color:var(--teal);font:600 15px var(--t)}
.specs h3{font-size:19px;line-height:1.3;margin:4px 0 6px}
.specs p{margin:0;font-size:16.5px;line-height:1.6;color:var(--mid)}

/* the dark panel: three ways further, while you wait */
.field{position:relative;margin:8px 0 clamp(52px,7vw,84px);padding:clamp(28px,4vw,44px);border-radius:var(--r-lg);color:var(--on-dark);box-shadow:var(--sh-3);background:
  radial-gradient(55% 90% at 100% 0%,rgba(20,114,162,.34),transparent 62%),
  radial-gradient(45% 80% at 0% 100%,rgba(92,136,100,.22),transparent 62%),
  radial-gradient(rgba(251,248,242,.08) 1px,transparent 1.3px) 0 0/22px 22px,
  var(--grain-light) 0 0/200px 200px,var(--esp)}
.field .sec__hd{border-bottom-color:var(--on-dark-rule)}
.field .sec__num{color:var(--mustard)}
.field .prose p{color:var(--on-dark-mid)}
.spokes{display:grid;gap:12px;margin-top:18px}
.spoke{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:20px 22px;border-radius:var(--r-md);
  background:rgba(251,248,242,.05);border:1px solid rgba(251,248,242,.12);transition:background .25s,border-color .25s}
.spoke:hover{background:rgba(251,248,242,.09);border-color:rgba(251,248,242,.24)}
.spoke__k{font:600 13px var(--t);letter-spacing:.03em;color:var(--mustard);margin-bottom:8px}
.spoke h3{font-size:22px;line-height:1.15;margin-bottom:8px;color:var(--on-dark)}
.spoke p{margin:0;font-size:15.5px;line-height:1.55;color:var(--on-dark-mid);max-width:60ch}
.spoke__go{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font:600 14px var(--t);
  text-decoration:none;color:var(--esp);background:var(--mustard);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.spoke__go svg{width:13px;height:13px;transition:transform .15s}
.spoke__go:hover svg{transform:translateX(3px)}

.foot .mono{font:inherit}

/* page hero, shared by book, speaking, media kit and 404: the hook, dark, and
   every title ends on the mustard full stop */
.phero{position:relative;margin-top:calc(-1 * var(--masthead-space));padding:calc(clamp(52px,8vw,92px) + var(--masthead-space)) 0 clamp(44px,6vw,72px);
  border-radius:0 0 var(--r-lg) var(--r-lg);color:var(--on-dark);background:
  radial-gradient(50% 70% at 92% 6%,rgba(225,167,77,.24),transparent 62%),
  radial-gradient(42% 60% at 0% 100%,rgba(199,86,53,.20),transparent 62%),
  radial-gradient(36% 50% at 70% 110%,rgba(20,114,162,.22),transparent 65%),
  var(--grain-light) 0 0/200px 200px,var(--esp)}
.phero::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(225,167,77,.6),transparent)}
.eyebrow{display:inline-block;margin-bottom:18px;font:600 13px var(--t);letter-spacing:.04em;color:var(--mustard)}
.phero h1{font-size:clamp(44px,7vw,84px);line-height:.96;letter-spacing:-.035em;max-width:15ch}
.phero h1::after{content:".";color:var(--mustard)}
.deck{font-size:clamp(18px,1.9vw,21px);line-height:1.5;color:var(--on-dark-mid);max-width:56ch;margin:22px 0 0}
.byline{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:22px;font:500 14px var(--t);color:var(--on-dark-mid)}
.byline b{color:var(--on-dark);font-weight:600}
.herocta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.phero + .wrap{padding-top:clamp(40px,6vw,72px)}

/* book: the text beside the cover, which sits in glass and straightens on hover */
.bookhero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:clamp(36px,6vw,80px);align-items:center}
.bookcover{margin:0;justify-self:center;max-width:320px;padding:14px;border-radius:var(--r-md);
  background:rgba(251,248,242,.06);border:1px solid rgba(251,248,242,.14);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 90px -40px rgba(0,0,0,.8);
  transform:rotate(-2deg);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.bookcover:hover{transform:rotate(0) translateY(-4px)}
.bookcover img{display:block;width:100%;height:auto;border-radius:6px}

/* 404 destinations are links in the headings */
.specs h3 a{color:inherit;text-decoration:none}
.specs h3 a:hover{color:var(--teal)}

/* contact cards: speaking and the media kit */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:24px 0 0;max-width:720px}
.contact a{display:grid;gap:4px;padding:20px 22px;border-radius:var(--r-md);text-decoration:none;color:inherit;
  background:var(--glass);border:1px solid var(--glass-edge);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sh-1);transition:transform .25s,box-shadow .25s}
.contact a:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sh-2)}
.contact .k{font:600 13px var(--t);letter-spacing:.03em;color:var(--teal)}
.contact .v{font:600 20px/1.2 var(--d);color:var(--ink)}

/* media kit components, scoped to main.mk: it reuses class names (.metric,
   .total) that mean something different on other pages */
.mk .tl{position:relative;display:grid;grid-template-columns:repeat(6,minmax(84px,1fr));gap:4px;margin:26px 0 16px;overflow-x:auto;padding:4px 2px 10px}
.mk .tl::before{content:"";position:absolute;left:8%;right:8%;top:47px;height:2px;background:linear-gradient(90deg,var(--rule-2),var(--teal))}
.mk .tl__n{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;cursor:pointer;padding:0;font:inherit;color:var(--mid)}
.mk .tl__y{font:600 13px var(--d);font-variant-numeric:lining-nums}
.mk .tl__dot{width:46px;height:46px;border-radius:50%;background:var(--paper);border:1.5px solid var(--rule-2);display:grid;place-items:center;
  box-shadow:var(--sh-1);transition:transform .25s,border-color .25s,box-shadow .25s}
.mk .tl__dot img{width:24px;height:24px;object-fit:contain}
.mk .tl__t{font:600 14px var(--d);color:var(--ink)}
.mk .tl__n:hover .tl__dot{transform:translateY(-3px)}
.mk .tl__n[aria-selected=true] .tl__dot{border-color:var(--teal);transform:scale(1.14);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--teal) 16%,transparent),var(--sh-1)}
.mk .tl__n[aria-selected=true] .tl__y,.mk .tl__n[aria-selected=true] .tl__t{color:var(--teal)}
.mk .tl__n:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:8px}
.mk .tl__card{padding:20px 24px;min-height:110px;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--glass-edge);
  backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sh-1)}
.mk .tl__card.in{animation:tlin .3s ease}
@keyframes tlin{from{opacity:0;transform:translateY(6px)}}
.mk .tl__cy{font:600 13px var(--d);color:var(--teal);font-variant-numeric:lining-nums}
.mk .tl__ch{font-size:22px;margin:4px 0 6px}
.mk .tl__cp{margin:0;color:var(--mid);max-width:70ch}
.mk .bio{position:relative;margin:0 0 16px;padding:18px 22px 14px;max-width:78ch;border-radius:var(--r-md);background:var(--glass);
  border:1px solid var(--glass-edge);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sh-1)}
.mk .bio__k{font:600 13px var(--t);letter-spacing:.03em;color:var(--teal)}
.mk .bio p{margin:.6em 0;line-height:1.65;color:color-mix(in srgb,var(--ink) 86%,var(--oat))}
.mk .copy{position:absolute;top:14px;right:14px;padding:5px 12px;border-radius:999px;cursor:pointer;
  font:600 13px var(--t);color:var(--ink);background:rgba(251,248,242,.85);border:1px solid var(--rule-2)}
.mk .copy:hover{border-color:var(--teal);color:var(--teal)}
.mk .total{margin:0 0 18px;font:600 13px var(--t);letter-spacing:.03em;color:color-mix(in srgb,var(--sage) 70%,var(--ink))}
.mk .total b{display:block;margin:6px 0;font:600 clamp(40px,5vw,56px)/1 var(--d);letter-spacing:-.025em;color:var(--sage);font-variant-numeric:lining-nums tabular-nums}
.mk .metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 14px}
.mk .metric{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:18px 20px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--glass-edge);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sh-1)}
.mk .metric__ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(251,248,242,.96);
  border:1px solid color-mix(in srgb,var(--teal) 24%,transparent);color:color-mix(in srgb,var(--teal) 75%,var(--ink))}
.mk .metric__ic--draw{background:color-mix(in srgb,var(--teal) 16%,rgba(251,248,242,.85))}
.mk .metric__ic img,.mk .metric__ic svg{width:20px;height:20px;display:block}
.mk .metric__n{font:600 clamp(24px,2.6vw,32px)/1 var(--d);letter-spacing:-.025em;font-variant-numeric:lining-nums tabular-nums}
.mk .metric__l{margin-top:6px;font:600 13.5px/1.35 var(--t);color:var(--mid)}
.mk .ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px}
.mk .way{position:relative;display:flex;flex-direction:column;gap:4px;padding:20px 20px 18px;border-radius:var(--r-md);text-decoration:none;color:inherit;
  background:var(--glass);border:1px solid var(--glass-edge);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sh-1);
  transition:transform .25s,box-shadow .25s,border-color .25s}
.mk .way:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sh-2);border-color:color-mix(in srgb,var(--teal) 40%,rgba(255,255,255,.7))}
.mk .way__ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;margin-bottom:8px;
  background:color-mix(in srgb,var(--teal) 14%,rgba(251,248,242,.8));color:var(--teal);transition:background .25s,color .25s}
.mk .way:hover .way__ic{background:var(--teal);color:#fff}
.mk .way__ic svg{width:18px;height:18px}
.mk .way__k{display:none}
.mk .way h3{font-size:20px;line-height:1.2}
.mk .way p{margin:2px 0 10px;flex:1;font-size:15px;line-height:1.5;color:var(--mid)}
.mk .way__go{font:600 14px var(--t);color:var(--teal)}

@media (prefers-reduced-motion:no-preference){
  .phero .wrap > *{animation:enter .8s cubic-bezier(.2,.7,.2,1) both}
  @keyframes enter{from{opacity:0;transform:translateY(12px)}}
}
@media (prefers-reduced-motion:reduce){
  .btn svg,.spoke__go svg,.bookcover,.contact a,.mk .way,.mk .way__ic,.mk .tl__dot{transition:none}
  .bookcover:hover,.contact a:hover,.mk .way:hover{transform:none}
  .mk .tl__card.in{animation:none}
}
@media (max-width:860px){ .bookhero{grid-template-columns:1fr} .bookcover{max-width:240px;transform:none} }
@media (max-width:760px){ .mk .metrics,.mk .ways{grid-template-columns:1fr} }
@media (max-width:640px){ .mk .tl{grid-template-columns:repeat(6,84px)} }

/* ══ side hue ══════════════════════════════════════════════════════════════
   Ambient light down the left and right edges of the page, the same idea the
   homepage gets from .sec::after.

   It hangs off main, not .sec. On the homepage a section spans the viewport
   and constrains its own content with .wrap, so a glow inset into it lands at
   the page edges. Here .sec is the text column itself (.doc > .body > .sec),
   so the same rule would paint a tinted rectangle beside the paragraphs.

   Sizes are px, not percentages: these pages run long, and a percentage of
   page height would stretch each glow into a band. */
main{position:relative;isolation:isolate}
main::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(520px 420px at 0%   16%,color-mix(in srgb,var(--sage)    20%,transparent),transparent 70%),
    radial-gradient(480px 400px at 100% 31%,color-mix(in srgb,var(--teal)    18%,transparent),transparent 70%),
    radial-gradient(520px 420px at 0%   49%,color-mix(in srgb,var(--mustard) 20%,transparent),transparent 70%),
    radial-gradient(480px 400px at 100% 66%,color-mix(in srgb,var(--rust)    14%,transparent),transparent 70%),
    radial-gradient(520px 420px at 0%   84%,color-mix(in srgb,var(--teal)    16%,transparent),transparent 70%)}

/* Brand mark on a spoke. A light tile so a logo reads on the espresso card
   whatever its own colours are: Skool ships on white, O'Reilly on transparent
   red, and the speaking mark is an icon because speaking is not a brand. */
.spoke__brand{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.spoke__brand .spoke__k{margin-bottom:0}
.spoke__logo{flex:none;display:grid;place-items:center;width:26px;height:26px;
  border-radius:7px;background:var(--paper);overflow:hidden}
.spoke__logo img{width:18px;height:18px;object-fit:contain;display:block}
.spoke__logo svg{width:15px;height:15px;color:var(--esp)}

/* Community spoke: the offer, spelled out. Same chips the job board's join
   card uses, from the same source, so the two surfaces cannot drift. */
.spoke__offers{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.spoke__offers span{font:600 12.5px var(--t);color:var(--on-dark-mid);
  padding:5px 11px;border-radius:999px;background:rgba(251,248,242,.07);
  border:1px solid rgba(251,248,242,.14)}
/* the one CTA of the three that is actually being sold */
.spoke__go--fill{background:var(--mustard);color:var(--esp);border-color:transparent}

/* Chip dots, same cycle the job board's join card uses. Written as 4n so the
   list can grow without a chip losing its dot, which is exactly what happened
   when the fifth offer was added. */
.spoke__offers span{display:inline-flex;align-items:center;gap:7px}
.spoke__offers span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.spoke__offers span:nth-child(4n+1){--c:var(--rust)}
.spoke__offers span:nth-child(4n+2){--c:var(--mustard)}
.spoke__offers span:nth-child(4n+3){--c:var(--teal)}
.spoke__offers span:nth-child(4n){--c:var(--sage)}

/* The lit spoke. Same conic ring as the join card on the board, so the one
   thing being sold looks the same wherever a reader meets it. The border goes
   transparent underneath so the ring is the only edge. */
@property --ring{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spokeRing{to{--ring:360deg}}
.spoke--lit{position:relative;isolation:isolate;border-color:transparent}
.spoke--lit::after{content:"";position:absolute;inset:0;border-radius:inherit;
  padding:2px;pointer-events:none;
  background:conic-gradient(from var(--ring),var(--rust),var(--mustard),
    var(--teal),var(--sage),var(--rust));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);mask-composite:exclude;
  animation:spokeRing 9s linear infinite}
@media (prefers-reduced-motion:reduce){.spoke--lit::after{animation:none}}