/* ==========================================================================
   about-shop.css · About, Shop, Terms, Privacy and the 404.
   Only what the kit in app.css doesn't have. Same tokens, same light.
   ========================================================================== */

/* ---------- About: hero ---------- */
.phero--about .phero__media .media{background:var(--studio)}
.phero--about .phero__media .media img{object-position:50% 20%}
/* the glass tiles sit on the empty backdrop and the T-shirt, never on his face */
@media (min-width:900px){
  .phero--about .phero__media .float--b{left:-12%;right:auto;top:16%}
  .phero--about .phero__media .float--a{left:auto;right:-6%;bottom:9%}
}

/* ---------- About: the opening, said big, lit word by word as you scroll ---------- */
.say{position:relative;max-width:30ch;margin-inline:auto;text-align:center;font-size:var(--fs-2)}
.say p{font-size:inherit;font-weight:700;line-height:1.16;letter-spacing:-.035em;text-wrap:balance;color:var(--ink)}
.say p+p{margin-top:.6em}
.say .sbar{display:none}

/* ---------- About: chapters ---------- */
.chap__k{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:var(--fs-ui);font-weight:600;color:var(--ink-3)}
.chap__k b{display:grid;place-items:center;min-width:30px;height:26px;padding:0 9px;border-radius:999px;background:var(--violet-soft);color:var(--violet);font-size:var(--fs-4);font-variant-numeric:tabular-nums}
.sec--grey .chap__k b{background:#fff}
.h2.chap__h{font-size:var(--fs-2);line-height:1.08;letter-spacing:-.036em}
.chap .split{align-items:start}
.chap .media{position:sticky;top:calc(var(--nav-h) + 40px)}
.prose .prose__lead{font-size:var(--fs-lead);line-height:1.45;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.prose .prose__em{font-weight:600;color:var(--ink)}
@media (min-width:900px){
  .split--rev{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
  .split--rev>.media{order:-1}
}
/* on a phone: label, heading, photo, then the story */
@media (max-width:899px){
  .chap .split{gap:0}
  .chap .split__copy{display:contents}
  .chap .chap__k{order:1;margin-bottom:12px}
  .chap .chap__h{order:2}
  .chap .media{order:3;position:relative;top:0;margin:4px 0 28px}
  .chap .prose{order:4}
}

/* a wordmark where a photo would be */
.mark{display:grid;place-items:center;background:radial-gradient(90% 110% at 100% 0%,rgba(226,109,240,.26),transparent 60%),linear-gradient(140deg,#F6F1FC,#ECE3F7)}
.mark span{font-size:clamp(44px,5.6vw,84px);font-weight:700;letter-spacing:-.05em;padding-right:.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* the quote, in the light */
.quote--say blockquote{font-size:var(--fs-2);line-height:1.1}
.qbody{max-width:60ch;margin:clamp(28px,3vw,40px) auto 0;text-align:center}
.qbody p{color:var(--ink-2);font-size:var(--fs-lead);line-height:1.6}
.qbody p+p{margin-top:1em}
.qbody .qbody__end{font-size:var(--fs-2b);line-height:1.35;font-weight:700;letter-spacing:-.025em;color:var(--ink)}

/* the six places */
.six6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(28px,3.4vw,48px)}
.six6>li{display:flex}
.six6__c{position:relative;flex:1;display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:var(--r-l);background:var(--grey);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.sec--grey .six6__c{background:#fff}
a.six6__c:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.six6__n{font-size:var(--fs-ui);font-weight:600;color:var(--ink-4);font-variant-numeric:tabular-nums}
.six6__name{font-size:var(--fs-2b);font-weight:700;letter-spacing:-.035em;line-height:1.1}
.six6__c p{font-size:var(--fs-3);line-height:1.5;color:var(--ink-2)}
.six6__co{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;line-height:1.25}
.six6__co .sym{--s:30px}
.six6__co b{display:block;font-size:var(--fs-3);letter-spacing:-.015em}
.six6__co small{display:block;font-size:var(--fs-ui);color:var(--ink-3)}
.six6__co>.ic{margin-left:auto;width:13px;height:13px;color:var(--ink-4);transition:transform .25s var(--ease)}
a.six6__c:hover .six6__co>.ic{transform:translateX(3px);color:var(--ink)}
.six6__more{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:20px;font-size:var(--fs-3);color:var(--ink-3)}
.six6__more .link{font-size:var(--fs-3)}
.chap__after{margin-top:clamp(56px,7vw,96px)}
.chap .split.chap__after{align-items:center}
.six6__c--you{background:var(--violet-soft)!important}
.six6__c--you .six6__n{color:var(--violet)}
@media (max-width:899px){ .six6{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .six6{grid-template-columns:1fr} }

/* a few of them: the cards from the home page, in a grid; a row you swipe on a phone */
.res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.res .case{min-height:0;gap:16px}
.res .case__q{font-size:var(--fs-2b)}
.res .case__p--big{font-size:var(--fs-lead)}
.res cite{display:block;margin-top:-6px;font-style:normal;font-size:var(--fs-ui);color:var(--ink-3)}
@media (max-width:1023px){ .res{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:767px){
  .res{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 22px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .res::-webkit-scrollbar{display:none}
  .res .case{flex:0 0 84%;scroll-snap-align:start;padding:24px}
  .res .case:hover{transform:none;box-shadow:none}
}

/* the closing band: the four symbols above the line */
.band__syms{display:flex;justify-content:center;margin-bottom:22px;--syms-ring:#fff}

/* ---------- Shop ---------- */
.phero--shop{padding-bottom:clamp(44px,5vw,80px)}
.phero--shop .phero__k .syms{--syms-ring:var(--studio)}
.prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.prod{--mx:50%;--my:50%;position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.sec--white .prod{background:var(--grey);box-shadow:none}
.prod:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
/* the cover: a page from the cohort, on its colour */
.prod__cover{position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;background:radial-gradient(90% 100% at 50% 0%,color-mix(in srgb,var(--cl) 42%,#fff) 0%,color-mix(in srgb,var(--c) 9%,#fff) 72%)}
.doc{position:relative;width:46%;aspect-ratio:3/4;margin-top:16%;display:flex;flex-direction:column;gap:9px;padding:16px 15px;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06),0 22px 40px -18px color-mix(in srgb,var(--c) 70%,transparent);transform:rotate(-3deg);transition:transform .7s var(--ease)}
.doc::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 24px -16px rgba(0,0,0,.3);transform:rotate(7deg) translate(9%,-3%);opacity:.9}
.prod:hover .doc{transform:rotate(-1deg) translateY(-6px)}
.doc .sym{--s:26px}
.doc__name{font-size:var(--fs-ui);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.doc__lines{display:grid;gap:6px;margin-top:2px}
.doc__lines i{display:block;height:5px;border-radius:3px;background:var(--grey-2)}
.doc__lines i:nth-child(2){width:84%}
.doc__lines i:nth-child(3){width:92%}
.doc__lines i:nth-child(4){width:62%}
.prod__b{display:flex;flex-direction:column;gap:10px;flex:1;padding:22px 24px 24px}
.prod__part{display:flex;align-items:center;gap:9px;font-size:var(--fs-ui);font-weight:600;color:var(--ink-3)}
.prod__part a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.prod__part a:hover{color:var(--ink);text-decoration-color:currentColor}
.prod__name{font-size:var(--fs-2b);font-weight:700;letter-spacing:-.035em;line-height:1.12}
.prod__d{font-size:var(--fs-3);line-height:1.5;color:var(--ink-3)}
.prod .pill{align-self:flex-start;background:var(--grey);box-shadow:none}
.prod__buy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.prod__price{font-size:var(--fs-2b);font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.shop-foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.shop-foot .promise{margin-top:0}
.shop-foot .note{align-items:flex-start;padding:20px 24px;background:#fff}
.shop-foot .note p{font-size:var(--fs-3);line-height:1.5}
.shop-foot .note b{color:var(--ink)}
.note__i{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet)}
.note .note__i .ic{margin:0;width:18px;height:18px}
@media (max-width:1023px){ .prods{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .prods{grid-template-columns:1fr}
  .prod__cover{aspect-ratio:2/1}
  .doc{width:36%;margin-top:12%}
  .shop-foot{grid-template-columns:1fr}
}

/* ---------- Terms and Privacy ---------- */
.phero--slim{padding:clamp(36px,5vw,80px) 0 clamp(40px,5vw,80px)}
.phero__k .ic{width:15px;height:15px;color:var(--ink-3)}
.lgl{display:grid;grid-template-columns:minmax(180px,230px) minmax(0,72ch);justify-content:center;align-items:start;gap:clamp(32px,6vw,96px)}
.toc__k{padding:0 12px 8px;font-size:var(--fs-ui);font-weight:600;color:var(--ink-4)}
.legal .lsec h2{display:flex;align-items:baseline;gap:14px}
.legal>.lsec:first-child h2{margin-top:0}
.lsec__n{flex:none;min-width:22px;font-size:var(--fs-ui);font-weight:700;letter-spacing:0;color:var(--violet);font-variant-numeric:tabular-nums}
.lsec p{padding-left:36px}
.legal .note{margin-top:48px}
.legal .note p,.legal .note span{font-size:var(--fs-ui);line-height:1.55}
@media (max-width:899px){
  .lgl{grid-template-columns:minmax(0,1fr);gap:36px}
  .lgl .toc{position:static;display:flex;flex-wrap:wrap;gap:8px;padding:16px;border-radius:var(--r-m);background:var(--grey)}
  .lgl .toc__k{width:100%;padding:0 4px}
  .lgl .toc a{padding:6px 12px;border-radius:999px;background:#fff;color:var(--ink-2);font-size:var(--fs-ui);box-shadow:inset 0 0 0 1px var(--line)}
  .lsec p{padding-left:0}
}

/* ---------- 404 ---------- */
.nf__code{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.72);box-shadow:0 1px 2px rgba(0,0,0,.05),inset 0 0 0 1px rgba(0,0,0,.04);font-size:var(--fs-ui);font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.nf .phero__in{gap:clamp(32px,4vw,52px)}
.routes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%;max-width:1040px;text-align:left}
.route{display:flex;flex-direction:column;gap:4px;padding:22px 22px 24px;border-radius:var(--r-l);background:rgba(255,255,255,.74);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);box-shadow:var(--sh-1),inset 0 0 0 1px rgba(255,255,255,.6);transition:transform .45s var(--ease),box-shadow .45s var(--ease),background-color .2s}
.route:hover{transform:translateY(-4px);background:#fff;box-shadow:var(--sh-2)}
.route__i{display:flex;align-items:center;height:48px;margin-bottom:14px}
.route__i .syms{--syms-ring:#fff}
.route__av{width:44px;height:44px;border-radius:13px;object-fit:cover;object-position:50% 14%;background:var(--studio);box-shadow:0 8px 18px -9px rgba(0,0,0,.4)}
.route b{display:flex;align-items:center;gap:6px;font-size:var(--fs-lead);letter-spacing:-.025em}
.route b .ic{width:13px;height:13px;color:var(--ink-4);transition:transform .25s var(--ease)}
.route:hover b .ic{transform:translateX(3px);color:var(--ink)}
.route small{font-size:var(--fs-ui);line-height:1.4;color:var(--ink-3)}
.nf__fine{font-size:var(--fs-ui);color:var(--ink-3)}
.nf__fine a{color:var(--violet);font-weight:600}
@media (max-width:899px){ .routes{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:360px){ .routes{grid-template-columns:1fr} }
@media (max-width:480px){ .route{padding:18px} .route__i{margin-bottom:10px} .route b{font-size:var(--fs-3)} .route small{font-size:var(--fs-ui)} }