/* Shared styles for every page. Tokens and component specs: see DESIGN.md. */
:root{
  --bg:#080D17;--bg-deep:#04070D;--surface:#0D1626;--surface-raised:#131C2B;
  --text-strong:#F7FAFD;--text:#F1F5F9;--text-2:#C7D2DF;--muted:#A8B5C7;--subtle:#8FA1B8;--faint:#7C8DA3;
  --accent:#D97757;--accent-hover:#E08A6E;--accent-fill:#B85C3D;--accent-fill-hover:#A8502F;--accent-link:#E8A285;--accent-soft:#F0C3AE;--on-accent:#080D17;
  --border:rgba(148,163,184,0.14);--border-chip:rgba(148,163,184,0.2);--border-control:rgba(148,163,184,0.25);--fill-neutral:rgba(148,163,184,0.1);
  --wa:#25D366;--wa-hover:#1FBE5A;--on-wa:#04140A;
  --nav-h:68px;
}
html{scroll-padding-top:calc(var(--nav-h) + 16px)}
.btn,.nav-toggle,.mnav,.mnav a,.skip-link,.back-link{box-sizing:border-box}
h1,h2,h3{overflow-wrap:break-word}
img{color:var(--subtle);font-size:0.75rem}

/* Eyebrow (also defined in plain pages' own style blocks) */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);font-weight:500}

/* Skip link */
.skip-link{position:fixed;top:8px;left:8px;z-index:200;background:var(--accent-fill);color:#FFFFFF;font-weight:700;font-size:0.875rem;min-height:44px;display:inline-flex;align-items:center;padding:12px 18px;border-radius:8px;text-decoration:none;transform:translateY(-200%);transition:transform .15s ease}
.skip-link:focus{transform:none}

/* Focus and pressed feedback */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent-link);outline-offset:3px}
summary{border-radius:16px}
summary:hover{color:var(--accent-link)!important}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:13px 24px;border-radius:11px;border:1px solid transparent;font-family:'Instrument Sans',system-ui,sans-serif;font-size:0.906rem;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .1s ease,filter .15s ease;text-align:center}
.btn:active{transform:translateY(1px)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn-primary{background:var(--accent-fill);color:#FFFFFF}
.btn-primary:hover{background:var(--accent-fill-hover)}
.btn-secondary{background:var(--fill-neutral);border-color:var(--border-control);color:var(--text);font-weight:600}
.btn-secondary:hover{border-color:var(--accent);background:rgba(148,163,184,0.16)}
.btn-wa{background:var(--wa);color:var(--on-wa)}
.btn-wa:hover{background:var(--wa-hover)}
.btn-lg{font-size:0.938rem;padding:14px 30px}
.btn-nav{font-size:0.875rem;font-weight:600;padding:10px 18px;border-radius:8px;white-space:nowrap}
.btn:not(.btn-nav){max-width:100%;overflow-wrap:anywhere}

/* Hover utilities that replace style-hover on plain pages */
a.card,.hover-card{transition:border-color .15s ease,transform .15s ease}
a.card:hover,a.card:focus-visible,.hover-card:hover{border-color:var(--accent)!important}
.hover-lift:hover{transform:translateY(-1px)}
.hover-text:hover{color:var(--text)!important}
.hover-link:hover{color:var(--accent-soft)!important;border-color:var(--accent)!important}
.hover-soft:hover{color:var(--accent-soft)!important}
.hover-tint:hover{border-color:var(--accent)!important;background:rgba(217,119,87,0.22)!important}

/* Mobile menu: the toggle sits in the nav markup, the panel is built by site.js */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-left:8px;padding:0;background:transparent;border:1px solid var(--border-control);border-radius:8px;color:var(--text);cursor:pointer;flex:none}
.nav-toggle:hover{border-color:var(--accent)}
.nav-toggle svg{display:block}
.nav-toggle .i-close{display:none}
.nav-toggle[aria-expanded="true"] .i-open{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:block}
.mnav{position:fixed;left:0;right:0;top:var(--nav-h);z-index:59;background:rgba(8,13,23,0.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:8px 20px 20px;max-height:calc(100vh - var(--nav-h));overflow-y:auto;opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.mnav.open{opacity:1;transform:none;visibility:visible;transition:opacity .2s ease,transform .2s ease}
.mnav a{display:flex;align-items:center;min-height:48px;padding:0 4px;border-bottom:1px solid var(--border);color:var(--text);text-decoration:none;font-size:1rem;font-weight:500}
.mnav a:last-child{border-bottom:0}
.mnav a:hover{color:var(--accent-link)}
.mnav a.mnav-cta{color:var(--accent-link);font-weight:700}
/* Links never wrap in the bar; site.js adds .nav-collapsed when they don't fit */
.nav-links a{white-space:nowrap}
html.nav-collapsed .nav-links{display:none!important}
html.nav-collapsed .nav-toggle{display:inline-flex}
html.nav-collapsed .nav-cta{margin-left:auto}
@media (max-width:860px){
  .nav-links{display:none!important}
  .nav-toggle{display:inline-flex}
  .site-nav-row{padding-left:16px!important;padding-right:16px!important;gap:8px}
  .nav-cta{margin-left:auto}
  .site-nav-row>a:first-child{min-width:0;flex-shrink:1;min-height:44px}
  .site-nav-row>a:first-child img{max-width:100%}
}
@media (max-width:400px){
  .site-nav-row{padding-left:12px!important;padding-right:12px!important;gap:6px}
  .btn-nav{padding:10px 12px;font-size:0.8125rem}
}

/* Very large text (user font size about 2x): the nav CTA moves into the menu */
@media (max-width:19.9em){
  .nav-cta{display:none!important}
  .nav-toggle{margin-left:auto}
  .site-nav-row{height:auto!important;min-height:68px}
  body *:not(pre):not(pre *){white-space:normal!important}
  #ccaf-slider{height:auto!important;aspect-ratio:4/5}
  .grid2,.grid3,.grid4,.stat-grid,.talk{grid-template-columns:1fr!important}
  [style*="display:flex"]:not(.site-nav-row){flex-wrap:wrap}
}

/* Tap targets for footer and back links */
.site-footer{overflow-wrap:anywhere}
.site-footer a{display:inline-flex;align-items:center;min-height:44px}
.site-footer p a{display:inline;min-height:0}
.back-link{display:flex!important;width:fit-content;min-height:44px}
.tap-link{min-height:44px}
a.chip{min-height:44px}

/* Long strings never push the page sideways */
.mono,code,.kbd,a[href^="mailto"]{overflow-wrap:anywhere}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hover-lift:hover,.evt-gallery a:hover img{transform:none!important}
}

/* Nav and footer link hover */
.nav-links a:hover,.site-footer a:hover{color:var(--text)!important}