/*
 * 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}

@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}}