/* Kahunas site shell — tokens, fonts, canvas, nav, buttons, section head,
   footer, reveals. Extracted VERBATIM from kahunas-homepage-option-b.html
   (which stays self-contained for artifact publishing and remains canonical:
   if a rule here disagrees with it, the homepage wins — fix this file).
   Subpages link this + shell.js and add their own page CSS after it. */

/* ============ FONTS (files in this assets/ folder) ============ */
@font-face{
  font-family:'DM Sans';
  src:url(dmsans.woff2) format('woff2');
  font-weight:100 1000;font-style:normal;font-display:block;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url(jbmono.woff2) format('woff2');
  font-weight:100 800;font-style:normal;font-display:block;
}
@font-face{
  font-family:'Instrument Serif';
  src:url(instrument-serif-italic.woff2) format('woff2');
  font-weight:400;font-style:italic;font-display:block;
}

/* ============ TOKENS (k2p5 canvas.css values — canvas.css is canonical) ============ */
:root{
  --ink-c:19% 0.015 267;
  --ink:oklch(19% 0.015 267);
  --ink-2:oklch(40% 0.021 265);
  --muted:oklch(46% 0.022 265);
  --line:oklch(91.5% 0.0022 106);
  --line-soft:oklch(94.6% 0.0018 106);
  --bg:oklch(99.38% 0.0013 106);
  --bg-soft:oklch(95.4% 0.0016 106);
  --surface:oklch(100% 0 0);   /* cards + footer sit above the paper, not tinted into it */
  /* Elevation, verbatim from the coach app (globals.css --e1/--e2/--e-ink).
     Two soft layers rather than one hard drop: the surface language is paper
     on sand, so cards lift off the canvas without a visible edge. */
  --shade-c:19% 0.015 267;
  --e1:0 1px 2px oklch(var(--shade-c) / 0.05), 0 2px 5px oklch(var(--shade-c) / 0.035);
  --e2:0 1px 2px oklch(var(--shade-c) / 0.05), 0 5px 14px oklch(var(--shade-c) / 0.05);
  --e3:0 2px 5px oklch(var(--shade-c) / 0.06), 0 18px 40px oklch(var(--shade-c) / 0.105);
  --e-ink:0 2px 5px oklch(var(--shade-c) / 0.1), 0 16px 36px oklch(var(--shade-c) / 0.19);
  /* labels sitting on an inverted (ink) fill — k2p5 --on-ink / --on-fg-muted */
  --on-ink:oklch(97% 0.004 95);
  --on-ink-muted:oklch(79% 0.012 265);
  --sheen:oklch(100% 0 0 / 0.22);
  --dot:oklch(var(--ink-c) / 0.10);
  --blue:oklch(53.5% 0.259 263);
  --blue-deep:oklch(45% 0.235 263);
  --green:#0ea158;
  --cyan:#156cc2;
  --yellow:#ffc61c;
  --orange:#ff9e1f;
  --pink:#ff5cf4;
  --red:#ff1f53;
  --purple:#8e4ec6;
  --sans:'DM Sans',-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --editorial:'Instrument Serif','Iowan Old Style',Palatino,serif;
  --r:16px;
  --ease:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  /* ambient on-screen travel (carousel auto-advance): eases out of rest AND
     into rest, unlike the drawer curve which snaps to a detent */
  --ease-carousel:cubic-bezier(.77,0,.175,1);
  --col:min(1120px,calc(100vw - 48px));
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);color:var(--ink);
  font-optical-sizing:auto;
  /* k2p5 canvas: warm paper, overhead sheen, 22px dot grid (shell.css verbatim) */
  background-color:var(--bg);
  background-image:
    radial-gradient(125% 70% at 50% -12%, var(--sheen), transparent 62%),
    radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:100% 100%,22px 22px;
  background-attachment:fixed,scroll;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* editorial accent — k2p5 voice: Instrument Serif italic, surgical use only */
.ed{
  font-family:var(--editorial);font-style:italic;font-weight:400;
  letter-spacing:-.002em;
  font-size:1.05em; /* Instrument Serif runs small next to DM Sans at the same px */
}
::selection{background:var(--blue);color:#fff}
.col{width:var(--col);margin:0 auto;position:relative}

/* mono eyebrow */
.eyebrow{
  font-family:var(--mono);font-size:12.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}

/* ============ NAV ============ */
nav{
  position:sticky;top:0;z-index:60;
  padding:10px 24px;pointer-events:none;
}
.nav-in{
  pointer-events:auto;position:relative;
  width:100%;max-width:1120px;margin:0 auto;
  display:flex;align-items:center;gap:8px;
  padding:10px 0;border-radius:99px;
  transition:
    max-width .75s var(--ease-drawer),
    padding .75s var(--ease-drawer);
}
/* glass layer lives on its own composited plane and fades in — no property snapping */
.nav-in::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:99px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 12px 40px -14px rgba(26,22,21,.22),inset 0 1px 0 rgba(255,255,255,.8);
  opacity:0;
  transition:opacity .55s var(--ease-drawer);
}
/* liquid-glass pill on scroll: bar compresses horizontally and floats */
nav.scrolled .nav-in{
  max-width:780px;
  padding:7px 8px 7px 22px;
}
nav.scrolled .nav-in::before{opacity:1}
.logo{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--ink);font-weight:700;font-size:20px;letter-spacing:-.02em;
}
.kmark{width:26px;height:28px;flex:none}
/* the wordmark drops away as the bar compresses, leaving just the K mark.
   Width/opacity animate on the pill's own easing so it collapses rather than
   snaps; the <a> keeps its aria-label, so the accessible name is unchanged. */
.logo-word{
  display:inline-block;white-space:nowrap;
  transition:opacity .45s var(--ease-drawer),max-width .6s var(--ease-drawer);
  max-width:8ch;opacity:1;overflow:hidden;
}
nav.scrolled .logo-word{max-width:0;opacity:0}
/* the flex gap would otherwise linger as dead space after the mark */
.logo{transition:gap .6s var(--ease-drawer)}
nav.scrolled .logo{gap:0}
.nav-links{display:flex;gap:2px;margin:0 auto}
.nav-links a{
  color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500;
  padding:8px 14px;border-radius:99px;transition:background .2s,color .2s;
}
.nav-links a:hover{background:var(--bg-soft);color:var(--ink)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-family:var(--sans);font-weight:600;font-size:15.5px;
  padding:14px 26px;border-radius:99px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;
  transition:transform .3s var(--ease),box-shadow .3s,background .2s,border-color .2s;
}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 1px 2px rgba(26,22,21,.24)}
.btn-dark .arr{transition:transform .3s var(--ease)}
.btn-ghost{color:var(--ink);border-color:var(--line);background:rgba(255,255,255,.6)}
/* hover motion only on hover-capable pointers — taps must not stick */
@media (hover:hover) and (pointer:fine){
  .btn-dark:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(26,22,21,.45)}
  .btn-dark:hover .arr{transform:translateX(4px)}
  .btn-ghost:hover{border-color:var(--ink-2);transform:translateY(-2px)}
}
/* press: cancel the hover lift so the click reads as "pushed down"; fast in, existing .3s release */
.btn:active{transform:translateY(0) scale(.97);transition-duration:.1s}
.btn-sm{padding:10px 20px;font-size:14.5px}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ============ SECTION HEAD ============ */
.sec-head{text-align:center;max-width:60ch;margin:0 auto}
.sec-head .eyebrow{display:block;margin-bottom:20px}
.h2{
  font-size:clamp(32px,4.2vw,52px);line-height:1.12;
  letter-spacing:-.03em;font-weight:600;text-wrap:balance;
}
.sec-sub{margin:22px auto 0;max-width:58ch;color:var(--muted);font-size:18px}
/* set in Instrument Serif the line runs optically smaller and lighter than the
   sans at the same px, so the serif subhead takes its own larger step */
.sec-sub.ed{font-size:clamp(21px,2vw,26px);line-height:1.4;max-width:52ch;color:var(--ink-2)}

/* ============ FOOTER ============ */
footer{
  border-top:1px solid var(--line-soft);
  /* a white surface above the paper canvas, like the cards */
  background:var(--surface);
  padding:72px 24px 32px;
}
.foot-in{width:var(--col);margin:0 auto}
/* top: brand block + social, split left/right */
.foot-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:40px;flex-wrap:wrap;padding-bottom:48px;
}
.foot-brand{max-width:300px}
.foot-brand .logo{font-size:19px;gap:9px}
.foot-brand .kmark{width:22px;height:24px}
.foot-tagline{
  margin-top:16px;font-size:14px;line-height:1.55;color:var(--muted);
}
/* social: hairline circles that fill brand-blue on hover */
.foot-social{display:flex;gap:10px;flex:none}
.soc{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);text-decoration:none;
  transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s;
}
.soc svg{width:18px;height:18px;display:block}
@media (hover:hover) and (pointer:fine){
  .soc:hover{
    background:var(--blue);border-color:var(--blue);color:#fff;
    transform:translateY(-3px);
  }
}
.soc:active{transform:translateY(-1px) scale(.94);transition-duration:.12s}
.soc:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* link columns */
.foot-cols{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;padding:48px 0;
  border-top:1px solid var(--line-soft);
}
.foot-col h4{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-bottom:16px;
}
.foot-col a{
  display:block;color:var(--ink-2);text-decoration:none;font-size:14.5px;
  padding:6px 0;width:fit-content;transition:color .2s,transform .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .foot-col a:hover{color:var(--blue);transform:translateX(3px)}
}
/* bottom bar */
.foot-bar{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;
  padding-top:28px;border-top:1px solid var(--line-soft);
}
.foot-copy{font-size:13px;color:var(--muted)}
.foot-note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (max-width:640px){
  footer{padding-top:56px}
  .foot-cols{grid-template-columns:1fr 1fr;gap:28px 20px}
  .foot-top{padding-bottom:36px}
}

/* ============ REVEALS ============ */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in-view{opacity:1;transform:none}
/* exit runs quicker than entry so the un-reveal reads before scrolling away */
.rv:not(.in-view){transition-duration:.5s;transition-delay:0s}
.f-media:not(.in-view) .pic img,.f-media:not(.in-view) .aura{transition-duration:.6s}
.rv-2{transition-delay:.1s}.rv-3{transition-delay:.2s}.rv-4{transition-delay:.3s}
.rv-5{transition-delay:.4s}.rv-6{transition-delay:.5s}

/* ============ SUBPAGE PRIMITIVES (shell-only; not in homepage) ============ */
.page-hero{padding:88px 24px 0;text-align:center}

/* ============ SHELL RESPONSIVE ============ */
@media (max-width:640px){
  .nav-links a:not(.keep){display:none}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .rise,.rv,.shot{opacity:1;transform:none}
}