/*
 * Ctrl + Cmd AI — shared site foundation (subpages)
 * Linked by absolute path (/cca-site.css) so it resolves from any route depth.
 * Tokens mirror design-system/tokens.css. Dark: body.dark (JS adds on prefers-dark), matching homepage.
 */

@font-face{font-family:'Sligoil';src:url('/fonts/sligoil-medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Sligoil';src:url('/fonts/sligoil-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Karrik';src:url('/fonts/karrik-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Karrik';src:url('/fonts/karrik-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Lineal';src:url('/fonts/lineal-medium.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  /* --muted/--faint darkened 2026-07-07 for WCAG AA text contrast (were 5.3:1 / 1.9:1 on --paper). */
  --paper:#FAF8F4;--ink:#15140F;--muted:#5F5B52;--faint:#736D5C;--line:#E7E2D8;
  --rubric:#A12B22;--rubric-soft:#F3E4E1;--surface:#fff;--sage:#4A6645;
  --ml:0.125em;--ms:1.05;--grid:rgba(21,20,15,.05);
}
body.dark{--paper:#0D0D0B;--ink:#EFECE3;--muted:#93907F;--faint:#847E6E;--line:#252420;
  --rubric:#E45A4D;--rubric-soft:#3D1A18;--surface:#161614;--sage:#7FB879;--grid:rgba(239,236,227,.06)}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Lineal',system-ui,sans-serif;transition:background .35s,color .35s;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.mono{font-family:'Sligoil',monospace;letter-spacing:var(--ml);text-transform:uppercase}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding-left:40px;padding-right:40px}

/* subliminal grid (the root system) */
.gridlines{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s;max-width:1100px;margin:0 auto;left:0;right:0;
  background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(8.333% - 1px),var(--grid) calc(8.333% - 1px),var(--grid) 8.333%);
  border-left:1px solid var(--grid);border-right:1px solid var(--grid)}
body.showgrid .gridlines{opacity:1}
.content{position:relative;z-index:2}

/* nav — matches homepage, links are real routes */
.nav{position:relative;max-width:1100px;margin:0 auto;padding:28px 40px;display:flex;justify-content:space-between;align-items:center}
.nav .logo{font-family:'Sligoil',monospace;font-size:calc(15px*var(--ms));letter-spacing:.02em;font-weight:700;text-decoration:none}
.nav .logo .p{color:var(--rubric)}
.nav .links{display:flex;gap:34px}
.nav .links a{position:relative;text-decoration:none;cursor:pointer;padding-bottom:16px;overflow:hidden;display:block}
.nav .links .la{font-family:'Karrik',sans-serif;font-size:18px;color:var(--ink);display:block;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.nav .links .en{position:absolute;left:0;bottom:16px;font-family:'Sligoil',monospace;font-size:calc(9.5px*var(--ms));letter-spacing:var(--ml);text-transform:uppercase;color:var(--rubric);opacity:0;transform:translateY(12px);transition:.32s cubic-bezier(.2,.7,.2,1)}
.nav .links a::after{content:"";position:absolute;left:0;bottom:8px;height:1.5px;width:0;background:var(--rubric);transition:width .32s cubic-bezier(.2,.7,.2,1)}
.nav .links a:hover .la{transform:translateY(-13px)}
.nav .links a:hover .en{opacity:1;transform:translateY(0)}
.nav .links a:hover::after{width:100%}
/* active territory — non-color: a persistent neutral underline (not the red accent) */
.nav .links a.on::after{width:100%;background:var(--muted);height:1.5px}
.nav .links a.on .la{color:var(--ink)}

/* mobile menu — hamburger toggles .nav.open, revealing .links as a dropdown panel */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;padding:0;border:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s}
.nav.open .hamburger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.open .hamburger span:nth-child(2){opacity:0}
.nav.open .hamburger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease}
.reveal.in{opacity:1;transform:none;filter:none}

/* the etymology stamp — opens every territory page */
.stamp{max-width:1100px;margin:0 auto;padding:26px 40px 40px;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;border-bottom:1px solid var(--line)}
.stamp .word{font-family:'Karrik',sans-serif;font-weight:400;font-size:clamp(48px,8vw,96px);line-height:.96;letter-spacing:-.02em}
.stamp .phon{font-family:'Sligoil',monospace;font-size:calc(11px*var(--ms));letter-spacing:.06em;color:var(--muted);margin-top:16px;text-transform:none}
.stamp .gram{font-family:'Sligoil',monospace;font-size:calc(10px*var(--ms));letter-spacing:var(--ml);text-transform:uppercase;color:var(--faint);margin-top:8px}
.stamp .right{padding-top:10px}
.stamp .lit{font-family:'Karrik',sans-serif;font-style:italic;font-size:clamp(19px,2.4vw,25px);line-height:1.3;color:var(--ink);max-width:30ch}
.stamp .branch{margin-top:22px;display:flex;flex-direction:column;gap:9px}
.stamp .branch .row{display:flex;gap:12px;align-items:baseline}
.stamp .branch .lng{font-family:'Sligoil',monospace;font-size:calc(9.5px*var(--ms));letter-spacing:var(--ml);text-transform:uppercase;color:var(--faint);width:34px;flex:none}
.stamp .branch .w{font-family:'Lineal',sans-serif;font-weight:500;letter-spacing:.02em;font-size:15.5px;color:var(--ink)}
.stamp .branch .w .arrow{color:var(--faint);margin-right:8px}
.stamp .terr{margin-top:24px;font-family:'Sligoil',monospace;font-size:calc(10px*var(--ms));letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.stamp .terr b{color:var(--ink);font-weight:700}

/* page intro / eyebrow / headings */
.eyebrow{font-family:'Sligoil',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.eyebrow .tick{color:var(--rubric)}
h1.page{font-family:'Karrik',sans-serif;font-weight:400;font-size:clamp(34px,5vw,58px);line-height:1.04;letter-spacing:-.02em;max-width:16ch}
h2.page{font-family:'Karrik',sans-serif;font-weight:400;font-size:clamp(26px,3.4vw,40px);line-height:1.1;letter-spacing:-.015em;max-width:22ch}
.lede{font-family:'Lineal',sans-serif;font-weight:500;letter-spacing:.028em;line-height:1.65;font-size:clamp(17px,1.8vw,20px);color:var(--muted);max-width:52ch}
.section{max-width:1100px;margin:0 auto;padding:56px 40px}
.klabel{font-family:'Sligoil',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.klabel b{color:var(--rubric);font-weight:500}

/* CTA buttons */
.cta{display:inline-flex;align-items:center;gap:10px;font-family:'Sligoil',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:15px 26px;border-radius:999px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);text-decoration:none;transition:background .3s,border-color .3s,transform .3s}
.cta:hover{background:var(--rubric);border-color:var(--rubric);transform:translateY(-2px)}
.cta .ar{color:var(--paper)}
.cta.ghost{background:none;color:var(--ink)}
.cta.ghost .ar{color:var(--rubric)}
.cta.ghost:hover{border-color:var(--rubric);color:var(--rubric);background:none}
.cta-sub{font-family:'Sligoil',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:12px}

/* cross-link + footer */
.crosslink{max-width:1100px;margin:0 auto;padding:30px 40px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);gap:16px;flex-wrap:wrap}
.crosslink a{font-family:'Sligoil',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.crosslink a:hover{color:var(--rubric)}
.crosslink a .ar{color:var(--rubric)}
footer.site{max-width:1100px;margin:0 auto;padding:34px 40px 80px;font-family:'Sligoil',monospace;font-size:10px;letter-spacing:var(--ml);text-transform:uppercase;color:var(--faint);border-top:1px solid var(--line)}
footer.site a{color:var(--muted);text-decoration:none}

/* ==========================================================================
   THE LAB — homepage only (rendered by functions/index.js)
   One page: the method, a row of experiment cards, one ask.
   ========================================================================== */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* intro — leads with the method */
.lab-intro{max-width:1100px;margin:0 auto;padding:56px 40px 34px}
.lab-intro .eyebrow{margin-bottom:28px}
/* Type is unchanged from the original intro: Karrik display for the lead, Lineal for the body,
   same families, same sizes. .lab-refrain ("Rinse, repeat.") is new and reuses the lead's type.
   The ONE change is the lead's measure: 19ch (712px) fits only ~19 characters at 58px, and
   justifying that few words per line tears craters between them. The lead runs the full column
   so each line carries enough words to absorb the slack. */
/* Max size is 52px, not the original 58px. At 58px the first lead sentence measures 1103px and the
   column is 1020px, so "really." dropped to a line of its own with the rest of the row empty. The
   vw term is unchanged, so everything below ~1100px viewport scales exactly as before. */
.lab-lead,.lab-refrain{font-family:'Karrik',sans-serif;font-weight:400;font-size:clamp(32px,4.6vw,52px);line-height:1.06;letter-spacing:-.022em;max-width:100%;text-wrap:pretty}
.lab-refrain{margin-top:.62em}
.lab-sub{font-family:'Lineal',sans-serif;font-weight:500;letter-spacing:.024em;line-height:1.62;font-size:clamp(17px,1.7vw,20px);color:var(--muted);max-width:56ch;margin-top:26px}
.lab-lead,.lab-refrain,.lab-sub{text-align:justify;text-justify:inter-word}
/* Same reason, at the other end: once the column narrows the lead drops back to a few words per
   line and the gaps return, so justification is off below 900px rather than only on phones. */
@media(max-width:900px){
  .lab-lead,.lab-refrain,.lab-sub{text-align:left}
}

/* the runs */
.lab-runs{max-width:1100px;margin:0 auto;padding:26px 40px 20px;border-top:1px solid var(--line)}
.lab-runs .klabel{font-family:'Sligoil',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:20px}
.exps{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start}
.lab-empty{font-family:'Lineal',sans-serif;color:var(--muted);font-size:16px}

.exp{position:relative;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--paper) 60%,transparent);overflow:hidden;transition:border-color .4s,box-shadow .4s,transform .4s cubic-bezier(.2,.7,.2,1)}
.exp::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--rubric);transition:width .4s cubic-bezier(.2,.7,.2,1);z-index:1}
.exp:hover{border-color:color-mix(in srgb,var(--ink) 22%,transparent);box-shadow:0 18px 40px -24px rgba(0,0,0,.4)}
.exp:hover::before,.exp.open::before{width:3px}
/* an open experiment takes the whole row so long prose is never read in a narrow column */
.exp.open{grid-column:1/-1}
html.js .exp:hover{transform:translateY(-4px)}
html.js .exp.open:hover{transform:none}

.exp-head{display:block;width:100%;text-align:left;background:none;border:0;padding:26px 26px 22px;font:inherit;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
html:not(.js) .exp-head{cursor:default}
html:not(.js) .exp-plus{display:none}
.exp-head:focus-visible{outline:2px solid var(--rubric);outline-offset:-4px;border-radius:14px}
.exp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:'Sligoil',monospace;font-size:9.5px;letter-spacing:var(--ml);text-transform:uppercase}
.exp-date{color:var(--faint)}
.exp-who{color:var(--muted)}
.exp-who::before{content:"· "}
.exp-tag{color:var(--rubric);border:1px solid var(--rubric);border-radius:999px;padding:3px 9px;line-height:1}
/* 26ch measured 520px against a 1017px card, so titles wrapped with half the row still empty.
   Karrik's zero is wide, which makes ch a poor proxy for characters here. 38ch clears the current
   title on one line and still caps a runaway one. It stays fluid: ch scales with the font, which
   scales with the viewport, and a card in a multi-card row still binds first and wraps normally. */
.exp-title{display:block;font-family:'Karrik',sans-serif;font-size:clamp(23px,2.7vw,31px);line-height:1.08;letter-spacing:-.018em;margin:14px 0 0;max-width:38ch;text-wrap:pretty}
.exp-dek{display:block;font-family:'Karrik',sans-serif;font-style:italic;font-size:16px;line-height:1.4;color:var(--muted);margin-top:12px;max-width:44ch}
.exp-plus{position:absolute;right:24px;top:24px;width:14px;height:14px;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.exp-plus::before,.exp-plus::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:var(--muted)}
.exp-plus::after{transform:rotate(90deg)}
.exp.open .exp-plus{transform:rotate(135deg)}
.exp.open .exp-plus::before,.exp.open .exp-plus::after{background:var(--rubric)}

/* the augeo expand — grows downward out of the title row (components.css §12) */
.exp-wrap{display:grid;grid-template-rows:1fr;overflow:hidden}
html.js .exp-wrap{grid-template-rows:0fr}
html.js .exp-wrap.open{grid-template-rows:1fr}
@media(prefers-reduced-motion:no-preference){
  html.js .exp-wrap{transition:grid-template-rows 260ms cubic-bezier(.22,0,0,1)}
}
/* .exp-inner carries NO padding: padding is part of a grid item's min-content contribution, so
   it survives the 0fr collapse and leaks a sliver of the body. The padding lives one level in. */
.exp-inner{min-height:0}
.exp-pad{padding:0 26px 26px}

.exp-body{font-family:'Lineal',sans-serif;font-weight:500;font-size:16.5px;line-height:1.72;color:var(--ink);max-width:64ch}
.exp-body p{margin:0 0 18px}
.exp-body p:last-child{margin-bottom:0}
.exp-body ul{margin:0 0 18px 22px}
.exp-body blockquote{border-left:2px solid var(--rubric);padding-left:18px;color:var(--muted);font-style:italic;margin:0 0 18px}
.exp-body a{color:var(--rubric)}

.exp-result{position:relative;border-radius:12px;background:var(--rubric-soft);padding:20px 22px;margin-top:26px;overflow:hidden;max-width:64ch}
.exp-result::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rubric)}
.exp-result .k{display:block;font-family:'Sligoil',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rubric);margin-bottom:9px}
.exp-result p{font-family:'Lineal',sans-serif;font-weight:500;font-size:16.5px;line-height:1.6;color:var(--ink);margin:0}

.exp-links{margin-top:20px;display:flex;flex-wrap:wrap;gap:20px}
.exp-links a{font-family:'Sligoil',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.exp-links a:hover{color:var(--rubric)}
.exp-links a .ar{color:var(--rubric)}

/* the ask — one newsletter, nothing else */
.lab-sub-block{max-width:1100px;margin:0 auto;padding:56px 40px 20px;border-top:1px solid var(--line)}
/* Same early-wrap as .exp-title: 22ch was 483px and 52ch was 688px, both well inside a 1100px
   column, so "finish." and "to keep." each dropped alone onto a line with the row still open.
   Raised to clear their text, and text-wrap:pretty keeps a lone word off the last line when the
   screen does get narrow enough to wrap. */
.lab-sub-h{font-family:'Karrik',sans-serif;font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.1;letter-spacing:-.015em;max-width:30ch;text-wrap:pretty}
.lab-sub-p{font-family:'Lineal',sans-serif;font-weight:500;letter-spacing:.024em;line-height:1.62;font-size:16.5px;color:var(--muted);max-width:58ch;margin-top:14px;text-wrap:pretty}
form.sub{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;max-width:520px}
form.sub input[type=email]{flex:1 1 240px;min-width:0;font-family:'Lineal',sans-serif;font-weight:500;font-size:15px;letter-spacing:.02em;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:14px 20px}
form.sub input[type=email]:focus{outline:none;border-color:var(--rubric)}
form.sub input[type=email]::placeholder{color:var(--faint)}
form.sub button{flex:0 0 auto;font-family:'Sligoil',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:14px 26px;border-radius:999px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);cursor:pointer;transition:background .3s,border-color .3s}
form.sub button:hover:not(:disabled){background:var(--rubric);border-color:var(--rubric)}
form.sub button:disabled{opacity:.5;cursor:default}
/* honeypot — off-screen rather than display:none, so bots that skip hidden fields still fill it */
.sub-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sub-msg{font-family:'Lineal',sans-serif;font-weight:500;font-size:15px;line-height:1.55;margin-top:16px;max-width:52ch;min-height:1px}
.sub-msg.good{color:var(--sage)}
.sub-msg.bad{color:var(--rubric)}

@media(max-width:760px){
  .lab-intro,.lab-runs,.lab-sub-block{padding-left:24px;padding-right:24px}
  .exps{grid-template-columns:1fr}
  .exp-head{padding:22px 22px 20px}
  .exp-pad{padding:0 22px 22px}
  .exp-plus{right:20px;top:20px}
}

@media(max-width:760px){
  .nav .links{display:none}
  .hamburger{display:flex}
  .nav.open .links{
    display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:6px 24px 14px;box-shadow:0 18px 40px -20px rgba(0,0,0,.35);z-index:60
  }
  .nav.open .links a{padding:14px 0}
  .nav.open .links .la{transform:none}
  .nav.open .links .en{position:static;opacity:1;transform:none;display:block;margin-top:4px}
  .nav.open .links a::after{display:none}
  .nav.open .links a.on .la{color:var(--rubric)}
  .wrap,.section,.stamp,.crosslink,footer.site{padding-left:24px;padding-right:24px}
  .stamp{grid-template-columns:1fr;gap:18px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.reveal{opacity:1;transform:none;filter:none}}