/* Ponteo v2 — the grigoletti system, adapted: bone ground, inset dark plates,
   one condensed display face, index lists, one appear recipe. Principles only;
   no third-party assets. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url('/fonts/archivo-var.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/geist-var.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/geist-mono-var.woff2') format('woff2')}

:root{
  --bone:#ECE9E3;--ink:#121412;--body:#4E524D;--muted:#5F645E;   /* 4.99:1 on bone — passes at 12px */
  --on-dark:#E7E5DF;--on-dark-dim:#A9ADA6;
  --accent:#256F69;                 /* Ponteo's cold tone, deepened for a light ground */
  --line:rgba(18,20,18,.14);--line-dark:rgba(231,229,223,.16);
  --radius:10px;--pad:clamp(20px,3.2vw,40px);--inset:clamp(10px,1.6vw,20px);
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;--sans:'Geist','Helvetica Neue',Arial,sans-serif;--mono:'Geist Mono','SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.12,.23,.5,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
::selection{background:var(--ink);color:var(--bone)}
.skip{position:fixed;left:16px;top:-100px;background:var(--ink);color:var(--bone);padding:14px 18px;border-radius:999px;z-index:30}.skip:focus{top:12px}

/* type ------------------------------------------------------------------- */
.display{font-family:var(--display);font-weight:800;font-stretch:78%;line-height:.94;letter-spacing:-.028em;margin:0;text-wrap:balance}
h1.display{font-size:clamp(46px,8.6vw,132px)}
h2.display{font-size:clamp(38px,5.6vw,84px)}
h3.display{font-size:clamp(28px,3vw,40px);line-height:1.02}
.display.giant{font-size:clamp(64px,12vw,190px)}
.display.giant em{font-style:normal;color:var(--on-dark-dim)}
.display.mid{font-size:clamp(30px,4vw,58px);line-height:1}
.display.dim{color:var(--on-dark-dim)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.01em;color:var(--body)}
.body{font-size:17px;line-height:1.6;color:var(--body);margin:0;max-width:44ch}
.body.muted{color:var(--muted)}
.on-dark{color:var(--on-dark)}
.mono.on-dark.dim,.on-dark.dim{color:var(--on-dark-dim)}
.lede{font-size:clamp(18px,1.6vw,22px);line-height:1.45;max-width:30ch;margin:22px 0 0;color:var(--body)}
.center{text-align:center;margin-left:auto;margin-right:auto;max-width:18ch}

/* nav ------------------------------------------------------------------- */
.nav{display:flex;align-items:center;gap:22px;padding:14px var(--pad);min-height:72px}
.wordmark{font-family:var(--sans);font-weight:600;font-size:28px;letter-spacing:-1.7px;line-height:1;display:inline-flex;align-items:center;min-height:44px}
.wordmark.small{font-size:20px;letter-spacing:-1.1px;min-height:0}
.nav-meta{margin-right:auto;color:var(--muted)}
.sep::before{content:"·";margin:0 .6em}
.pill{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 20px;border:1px solid var(--ink);border-radius:999px;font-size:14px;line-height:1;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease)}
.pill:hover{background:var(--ink);color:var(--bone)}
.pill.big{padding:0 26px;min-height:54px;font-size:16px;margin-top:30px}
.pill.light{border-color:var(--on-dark);color:var(--on-dark)}
.pill.light:hover{background:var(--on-dark);color:var(--ink)}
.pill span{transition:transform .3s var(--ease)}.pill:hover span{transform:translateX(4px)}
.foot{border-top:1px solid var(--line);margin-top:var(--inset);flex-wrap:wrap;justify-content:space-between;padding-top:26px;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}

/* hero ------------------------------------------------------------------ */
.hero{padding:clamp(28px,5vw,72px) var(--pad) 0}
.index{display:flex;justify-content:space-between;gap:16px;margin:0 0 clamp(26px,4vw,56px);flex-wrap:wrap}
.frame{margin:clamp(40px,6vw,88px) 0 0;border-radius:var(--radius);overflow:hidden;position:relative;background:var(--ink)}
.frame picture,.frame img{display:block;width:100%;height:auto}
.frame img{aspect-ratio:3/2;object-fit:cover}
.frame figcaption{position:absolute;left:18px;bottom:16px;color:var(--on-dark);opacity:.85;max-width:60%;line-height:1.5}
figure.frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(18,20,18,.55),rgba(18,20,18,0) 40%)}

/* plates ----------------------------------------------------------------- */
.plate{margin:var(--inset);padding:clamp(56px,7vw,110px) var(--pad);border-radius:var(--radius);position:relative;overflow:clip}
.plate.dark{background:var(--ink);color:var(--on-dark)}
.plate.dark .mono{color:var(--on-dark-dim)}
/* our own grain — an SVG noise tile, not a texture file */
.plate.dark::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
.plate-head{display:grid;gap:22px;max-width:min(880px,68vw)}
.accent-line{color:var(--on-dark-dim);font-size:clamp(30px,4.2vw,64px);max-width:none}

/* sticky stacking cards ----------------------------------------------------- */
.stack{display:grid;gap:14px;margin:clamp(48px,6vw,84px) 0 0}
.card{position:sticky;top:calc(var(--inset) + 84px);background:#1B1E1B;border:1px solid var(--line-dark);border-radius:var(--radius);padding:26px 24px 30px;display:grid;grid-template-columns:auto 1fr;column-gap:22px;align-items:baseline;min-height:150px}
.card:nth-child(2){top:calc(var(--inset) + 104px)}.card:nth-child(3){top:calc(var(--inset) + 124px)}
.card h3{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:clamp(28px,3.4vw,46px);line-height:1;margin:0;letter-spacing:-.02em}
.card p{grid-column:2;margin:8px 0 0;color:var(--on-dark-dim);font-size:16px}
.aside{margin:clamp(40px,6vw,80px) 0 0;max-width:38ch;font-size:19px;line-height:1.5;color:var(--on-dark-dim)}
.aside strong{color:var(--on-dark);font-weight:500;display:block;margin-top:10px}

/* quiet / study ------------------------------------------------------------ */
.quiet,.around{padding:clamp(64px,8vw,120px) var(--pad)}
.split{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.split + .split{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line);padding-top:clamp(24px,3vw,40px);align-items:start}
.study{margin:clamp(44px,6vw,84px) 0 0;background:var(--ink);color:var(--on-dark);padding:clamp(20px,2.6vw,34px)}
.study .mono{color:var(--on-dark-dim)}
.study-top{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line-dark);padding-bottom:18px}
.study-body{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(24px,4vw,56px);padding-top:30px}
.study-body h3{margin:16px 0 12px}
.study .body.muted{color:var(--on-dark-dim)}
.row{display:flex;justify-content:space-between;gap:12px;padding:0 0 16px}
.row + .days + .row{padding:18px 0 0}
.days{display:grid;grid-template-columns:repeat(5,1fr);height:150px;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.days>div{display:flex;flex-direction:column;justify-content:space-between;padding:14px 10px;border-right:1px solid var(--line-dark)}
.days>div:last-child{border-right:0}
.days b{font-family:var(--mono);font-size:12px;font-weight:400}
.days span{font-size:12px;writing-mode:vertical-rl;color:var(--on-dark-dim)}
.days .protected{background:var(--bone);color:var(--ink)}
.days .protected span{writing-mode:initial;font-family:var(--display);font-weight:800;font-stretch:78%;font-size:22px;color:var(--ink)}

/* index lists ---------------------------------------------------------------- */
.index-list{list-style:none;margin:clamp(44px,6vw,84px) 0 0;padding:0;border-top:1px solid var(--line)}
.index-list li{display:grid;grid-template-columns:56px 1fr 1fr;gap:20px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line)}
.index-list .name{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:clamp(24px,2.8vw,40px);line-height:1;letter-spacing:-.02em}
.index-list .desc{font-size:16px;line-height:1.55;color:var(--body);max-width:42ch}
.index-list.questions li{grid-template-columns:56px 1fr auto}
.index-list .arrow{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.8vw,40px);line-height:1;color:var(--muted);transition:transform .3s var(--ease),color .3s var(--ease)}
.index-list li:hover .arrow{transform:translateX(6px);color:var(--ink)}
.note{margin-top:28px}

/* twist / invitation / closing --------------------------------------------- */
.twist .display.dim{max-width:16ch}
.twist .giant{margin:clamp(28px,4vw,56px) 0 0 clamp(0px,8vw,18%)}
.reason{margin:clamp(40px,6vw,80px) 0 0 auto;max-width:34ch;border-top:1px solid var(--line-dark);padding-top:22px;display:grid;gap:12px}
.reason p{margin:0;font-size:clamp(20px,2vw,26px);line-height:1.35}
.invitation .split{align-items:start}
.invitation .body + .body{margin-top:18px}
.mono.on-dark.dim{display:block;margin-top:18px;max-width:38ch;line-height:1.6}
.around .display.mid{margin-top:clamp(56px,8vw,110px)}
.closing{padding:clamp(64px,8vw,110px) var(--pad);text-align:center;display:grid;gap:22px;justify-items:center}

/* motion — one recipe, once, honoured -------------------------------------- */
@media(prefers-reduced-motion:no-preference){
  .js .appear{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .js .appear.in{opacity:1;transform:none}
  .js .hero .display,.js .hero .lede,.js .hero .index{animation:rise .6s var(--ease) both}
  .js .hero .lede{animation-delay:.08s}.js .hero .frame{transition-delay:.12s}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* phones ---------------------------------------------------------------------- */
@media(max-width:760px){
  .nav{min-height:64px;gap:12px}
  .nav-meta{display:none}
  .index{flex-direction:column;gap:6px}
  .frame img{aspect-ratio:9/16;max-height:72svh}
  .frame figcaption{max-width:80%;left:14px;bottom:14px}
  .split,.study-body{grid-template-columns:1fr;gap:22px}
  .study-body{padding-top:22px}
  .index-list li{grid-template-columns:40px 1fr;row-gap:8px}
  .index-list .desc{grid-column:2}
  .index-list.questions li{grid-template-columns:40px 1fr auto}
  .card{grid-template-columns:1fr;row-gap:10px;min-height:0}.card p{grid-column:1}
  .card,.card:nth-child(2),.card:nth-child(3){position:static}
  .days{height:132px}.days>div{padding:12px 8px}
  .twist .giant{margin-left:0}
  .reason{margin-left:0}
  .center{max-width:none}
  .pill.big{display:flex;justify-content:center}
  .foot{gap:14px}
}

/* motion, part two — the things that make theirs feel the way it does ---------- */
@media(prefers-reduced-motion:no-preference){
  /* staggered appears inside lists and stacks */
  .js .index-list li,.js .card{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .js .in li,.js .in.card,.js .index-list.in li{opacity:1;transform:none}
  .js .index-list.in li:nth-child(2){transition-delay:.06s}.js .index-list.in li:nth-child(3){transition-delay:.12s}
  .js .index-list.in li:nth-child(4){transition-delay:.18s}.js .index-list.in li:nth-child(5){transition-delay:.24s}
  /* the hero frame drifts as you leave it — native, no library */
  @supports(animation-timeline:view()){
    .frame img{animation:drift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes drift{from{transform:translateY(0) scale(1)}to{transform:translateY(-6%) scale(1.04)}}
  }
  /* pill fill sweeps in rather than snapping */
  .pill{position:relative;isolation:isolate;overflow:hidden}
  .pill::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);z-index:-1;border-radius:inherit}
  .pill.light::before{background:var(--on-dark)}
  .pill:hover{background:transparent}.pill:hover::before{transform:scaleX(1)}
}
/* blend-mode cursor: pointer devices only, never on touch, never when reduced */
@media(pointer:fine) and (prefers-reduced-motion:no-preference){
  .cursor{position:fixed;left:0;top:0;width:18px;height:18px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:40;
    transform:translate(-50%,-50%) scale(var(--s,1));transition:transform .18s var(--ease),opacity .2s;opacity:0}
  .js.has-cursor .cursor{opacity:1}
  .js.has-cursor a:hover~.cursor,.js.has-cursor.over-link .cursor{--s:2.6}
}
@media(pointer:coarse){.cursor{display:none}}

/* content v3 hooks ------------------------------------------------------------ */
.support{display:block;margin:18px 0 0;color:var(--muted)}
a.continue{display:inline-flex;align-items:center;min-height:44px;margin-top:18px;color:var(--body);border-bottom:1px solid var(--line)}
.plate .index,.quiet .index,.around .index{margin-bottom:clamp(28px,4vw,48px)}
.plate.dark .index span,.plate.dark .body.on-dark.dim{color:var(--on-dark-dim)}
.plate-head .body{max-width:44ch}
.fragments.display{font-size:clamp(22px,2.2vw,32px);line-height:1.15;margin:22px 0 0;color:var(--muted);font-stretch:78%}
.closing .dimline{color:var(--muted)}

@media(max-width:760px){.plate.dark::before{opacity:.4}}

/* v3 hooks — longer problem cards, a labelled reason, a labelled closing --------- */
.card.long{grid-template-columns:auto 1fr;row-gap:12px;align-items:start;padding:30px 28px 32px}
.card.long h3{font-size:clamp(24px,2.6vw,36px);line-height:1.04}
.card.long p{grid-column:2;margin:0;font-size:16px;line-height:1.55;color:var(--on-dark-dim);max-width:52ch}
.reason .mono{display:block}
.closing .mono{color:var(--muted)}
.closing .display.mid{max-width:24ch}
@media(max-width:760px){.card.long{grid-template-columns:1fr}.card.long p{grid-column:1}}
/* v3 content revision: card labels beside the number; a four-item footer ------ */
.card.long .label{grid-column:2;color:var(--on-dark-dim)}
.card.long h3,.card.long p{grid-column:2}
.card.long .label+h3{margin-top:6px}
.plate.dark .index{margin-bottom:clamp(28px,4vw,48px)}
.foot .mono:nth-child(3){margin-left:auto}
@media(max-width:760px){.card.long .label,.card.long h3,.card.long p{grid-column:1}.foot .mono:nth-child(3){margin-left:0}}
/* the longer button label must wrap on small phones instead of widening the plate */
@media(max-width:760px){
  .pill.big{white-space:normal;text-align:center;line-height:1.25;padding:14px 22px;min-height:54px}
  .split>div{min-width:0}
}

/* founding states — a plain list, spaced rather than punctuated */
.around .states{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 36px;font-family:var(--display);font-weight:800;font-stretch:78%;font-size:clamp(22px,2.4vw,32px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.around .split>div>.body+.body{margin-top:14px}