/* Keiko · base (foundation): reset, type scale, app shell, layout primitives. */
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--field);scroll-padding-top:calc(var(--top-h) + 16px);-webkit-text-size-adjust:100%}
body{background:var(--field);color:var(--ink);font-family:var(--ui);font-size:17px;line-height:1.5;font-weight:420;-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100svh;display:flex;flex-direction:column}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-ctl)}
::selection{background:var(--a100);color:#15170f}
.tnum{font-variant-numeric:tabular-nums lining-nums}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* icons: own 1.75 px stroke set (Keiko.icon) */
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic.s{width:15px;height:15px}
.ic.l{width:22px;height:22px}

/* ------------------------------------------------ type scale
   One product-wide scale. Display (Archivo italic): 108 · 72 · 64 · 56 · 44 · 38 · 28 · 22 (+ .h4 24 for quotes/rows).
   Numerals (.num, .fx .t): 96 · 40 · 26 · 20 · 15. Don't add sizes outside these steps. */
.d-hero{font-family:var(--display);font-style:italic;font-stretch:68%;font-weight:860;font-size:108px;line-height:.84;letter-spacing:-.035em;word-spacing:.08em}
.h1{font-family:var(--display);font-style:italic;font-stretch:68%;font-weight:860;font-size:72px;line-height:.88;letter-spacing:-.032em}
.h2{font-family:var(--display);font-style:italic;font-stretch:68%;font-weight:860;font-size:56px;line-height:.9;letter-spacing:-.03em}
.h2 b{color:var(--ink-3);font-weight:inherit}
.h3{font-family:var(--display);font-style:italic;font-stretch:72%;font-weight:840;font-size:38px;line-height:1;letter-spacing:-.025em}
.h4{font-family:var(--display);font-style:italic;font-stretch:72%;font-weight:820;font-size:24px;line-height:1.05;letter-spacing:-.02em}
.num{font-family:var(--display);font-stretch:80%;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.num.n96{font-size:96px;letter-spacing:-.035em}.num.n40{font-size:40px}.num.n26{font-size:26px}.num.n20{font-size:20px}.num.n15{font-size:15px;letter-spacing:0}
.lede-p{font-size:17px;color:var(--ink-2);max-width:56ch}
.body-s{font-size:15px;color:var(--ink-2)}
.label{display:block;font-size:12px;font-weight:650;letter-spacing:.01em;color:var(--ink-2)}
.meta{font-size:14px;color:var(--ink-2)}
.small{font-size:13px;color:var(--ink-3)}
.prose{font-size:17px;line-height:1.6;max-width:62ch}
.prose p+p{margin-top:14px}
.link{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-2);text-decoration-thickness:1.5px}
@media (hover:hover){.link:hover{text-decoration-color:var(--ink)}}

/* ------------------------------------------------ app shell */
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--field);padding:10px 16px;border-radius:var(--r-ctl);font-size:14px;font-weight:650;text-decoration:none}
.skip:focus{top:10px}
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--field) 92%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled,.top.ruled{border-bottom-color:var(--line)}
.top-in{height:var(--top-h);display:flex;align-items:center;gap:20px;padding:0 var(--gutter);max-width:var(--max);margin:0 auto}
.mark{font-family:var(--display);font-style:italic;font-stretch:80%;font-weight:860;font-size:27px;letter-spacing:-.035em;line-height:1;text-decoration:none;color:var(--ink);padding:2px 2px 4px;flex:none}
.mark b{color:var(--accent);font-weight:inherit}
.orgctx{display:flex;flex-direction:column;line-height:1.2;padding-left:18px;border-left:1px solid var(--line-2);font-size:13px;min-width:0}
.orgctx b{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orgctx span{color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;gap:2px;margin:0 auto}
.nav a{position:relative;font-size:15px;font-weight:560;text-decoration:none;color:var(--ink-2);padding:8px 13px;border-radius:var(--r-ctl);white-space:nowrap}
.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:1px;background:var(--ink)}
@media (hover:hover){.nav a:hover{background:var(--inset);color:var(--ink)}}
.tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.nav + .tools{margin-left:0}
.iconbtn{width:40px;height:40px;border-radius:var(--r-ctl);display:grid;place-items:center;color:var(--ink-2)}
@media (hover:hover){.iconbtn:hover{background:var(--inset);color:var(--ink)}}
.me{display:flex;align-items:center;gap:10px;padding:3px 10px 3px 3px;border-radius:99px;font-size:14px;font-weight:560}
@media (hover:hover){.me:hover{background:var(--inset)}}
.me[aria-expanded="true"]{background:var(--inset)}
.me .ic{color:var(--ink-3)}
/* Leave quickly: young person only. Neutral, always visible, never the accent. */
.leave{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:var(--r-ctl);font-size:14px;font-weight:650;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);background:var(--card);white-space:nowrap}
@media (hover:hover){.leave:hover{background:var(--hover)}}
.leave .short{display:none}

main#view{flex:1;display:block;min-width:0}
main#view:focus,main#view:focus-visible{outline:none;box-shadow:none}
.foot{border-top:1px solid var(--line);padding:28px var(--gutter) 40px;margin-top:40px}
.foot-in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}
.foot-in .mark{font-size:20px}
.foot-in nav{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.foot-in nav a{color:var(--ink-2);text-decoration:none;padding:4px 0}
@media (hover:hover){.foot-in nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}}
body.bare .top,body.bare .tabbar,body.bare .foot{display:none}

/* bottom tab bar (phone) */
.tabbar{display:none}
@media (max-width:720px){
  .top-in{gap:12px}
  .mark{font-size:24px}
  .orgctx{padding-left:12px;font-size:12px}
  .orgctx b{display:none}
  .orgctx span{color:var(--ink);font-weight:600}
  .nav{display:none}
  .me{padding:2px}
  .me .nmx,.me .ic{display:none}
  .leave{padding:0 10px}
  .leave .long{display:none}.leave .short{display:inline}
  .foot{padding-bottom:110px}
  .foot-in nav{margin-left:0;width:100%}
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:52px;font-size:12px;font-weight:600;color:var(--ink-3);text-decoration:none;border-radius:var(--r-ctl);min-width:0}
  .tabbar a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tabbar a .ic{width:20px;height:20px}
  .tabbar a[aria-current]{color:var(--ink)}
  .tabbar a[aria-current]::after{content:"";position:absolute;left:32%;right:32%;top:0;height:2px;border-radius:1px;background:var(--ink)}
}
@media (min-width:721px) and (max-width:1099px){
  .nav a{padding:8px 9px;font-size:14px}
  .nav a[aria-current]::after{left:9px;right:9px}
  .me .nmx{display:none}
  .orgctx b{display:none}
  .orgctx span{color:var(--ink);font-weight:600}
}

/* ------------------------------------------------ layout primitives */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
/* editorial column (≤760) + sticky right rail (340) at ≥1100 */
.page{max-width:calc(var(--col) + var(--rail) + 120px + var(--gutter)*2);margin:0 auto;padding:96px var(--gutter) 40px;display:grid;grid-template-columns:minmax(0,var(--col)) var(--rail);justify-content:space-between;gap:120px}
.page.tight{padding-top:56px}
.page.single{grid-template-columns:minmax(0,var(--col));justify-content:start}
.page.wide{grid-template-columns:minmax(0,1fr);max-width:calc(var(--wide) + var(--gutter)*2)}
.col{min-width:0}
.rail{position:relative;min-width:0}
.rail > .sticky{position:sticky;top:calc(var(--top-h) + 24px)}
.sec{padding-bottom:112px}
.sec:last-child{padding-bottom:40px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:32px}
.stack > * + *{margin-top:var(--gap,16px)}
.row{display:flex;align-items:center;gap:12px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:1240px){ .page{gap:64px;--rail:310px} }
@media (max-width:1099px){
  .page{grid-template-columns:minmax(0,1fr);max-width:calc(var(--col) + var(--gutter)*2);gap:0}
  .page.wide{max-width:calc(var(--wide) + var(--gutter)*2)}
  .rail > .sticky{position:static}
  .rail{padding-bottom:64px}
}
@media (max-width:720px){
  .d-hero{font-size:64px}
  .h1{font-size:56px}
  .h2{font-size:44px}
  .h3{font-size:28px}
  .page{padding:56px var(--gutter) 24px}
  .page.tight{padding-top:32px}
  .sec{padding-bottom:72px}
  .sec-h{margin-bottom:22px}
  .grid-2{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------ staff scale (mentor, admin, school, safeguarding, studio)
   Calmer and denser than the young person's views. Applied automatically: app.js puts .staff on main#view for every
   non-young account (route opt scale:'display' opts out). Areas may also write .page.staff / .phead.staff explicitly.
   :where() keeps specificity at one class, so area rules loaded later still win. */
:where(.staff) .h1{font-size:64px;line-height:.9;letter-spacing:-.032em}
:where(.staff) .h2{font-size:44px;line-height:.92;letter-spacing:-.03em}
:where(.staff) .sec{padding-bottom:72px}
:where(.staff) .sec:last-child{padding-bottom:40px}
:where(.staff) .sec-h{margin-bottom:24px}
@media (max-width:720px){
  :where(.staff) .h1{font-size:44px}
  :where(.staff) .h2{font-size:36px}
  :where(.staff) .sec{padding-bottom:56px}
  :where(.staff) .sec-h{margin-bottom:18px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-property:opacity!important;scroll-behavior:auto!important}
  .btn:active,.hc.now:active,.press:active{transform:none!important}
}

/* Archivo italic at narrow widths draws a very narrow space: open word spacing on every display-italic style */
.h1,.h2,.h3,.h4,.quiz-q,.grounded .when,.person .nm,.home-goal .quote,.mnote .src .q,.admin-cand-h .nm,.young-dh,.young-quote,.young-pr-q,.young-who-n,.young-hr-n,.mentor-goal .quote{word-spacing:.14em}
.d-hero{word-spacing:.1em}