/* ============================================================
   KEITH BROOKS — DESIGN SYSTEM
   Shared foundation. Extracted from the portfolio homepage.
   Load order: Google Fonts <link>  →  ds.css  →  page <style>
   Fonts required: Bebas Neue, Epilogue (300–700 + italic), DM Mono
   ============================================================ */

:root{
  /* Motion */
  --ease-expo:  cubic-bezier(0.16,1,0.3,1);
  --ease-inout: cubic-bezier(0.4,0,0.2,1);

  /* Type families */
  --f-display: 'Bebas Neue', sans-serif;
  --f-body:    'Epilogue', sans-serif;
  --f-mono:    'DM Mono', monospace;

  /* Layout rhythm */
  --pad-x: 48px;
  --maxw: 1180px;
  --col:  860px;   /* reading column */
  --nav-h: 64px;
}

/* ---- THEME: LIGHT (default) ---- */
[data-theme="light"]{
  --bg:#F4F4F4; --bg2:#EBEBEB; --card:#F8F8F8;
  --ink:#0E0E0E; --body:#383838; --muted:#5C5C5C; --dim:#888888;
  --accent:#C02010; --accent-d:#E63020;
  --border:rgba(17,17,17,.09);
  --strip-bg:#EBEBEB; --strip-fg:#5C5C5C;
  --nav-bg0:rgba(244,244,244,0); --nav-bgs:rgba(244,244,244,.95);
  --cta-bg:#0E0E0E; --cta-fg:#F4F4F4;
  --dark-bg:#0E0E0E; --tt-track:#D0D0D0; --tt-knob:#F8F8F8; --tt-icon:#5C5C5C;
  --accent-sect-bg:#E63020;
}

/* ---- THEME: DARK ---- */
[data-theme="dark"]{
  --bg:#0E0E0E; --bg2:#1A1A1A; --card:#1A1A1A;
  --ink:#F0F0F0; --body:#ADADAD; --muted:#888888; --dim:#666666;
  --accent:#E63020; --accent-d:#E63020;
  --border:rgba(220,220,220,.1);
  --strip-bg:#1A1A1A; --strip-fg:#888888;
  --nav-bg0:rgba(14,14,14,0); --nav-bgs:rgba(14,14,14,.95);
  --cta-bg:#F0F0F0; --cta-fg:#0E0E0E;
  --dark-bg:#1A1A1A; --tt-track:#333333; --tt-knob:#0E0E0E; --tt-icon:#F0F0F0;
  --accent-sect-bg:#E63020;
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:auto;}
body{
  background:var(--bg);color:var(--ink);font-family:var(--f-body);
  overflow-x:hidden;cursor:none;
  transition:background .4s var(--ease-inout),color .4s var(--ease-inout);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
::selection{background:var(--accent-d);color:#fff;}

/* GRAIN overlay */
body::before{
  content:'';position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}

/* CUSTOM CURSOR */
#_cur,#_ring{position:fixed;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);will-change:transform;}
#_cur{width:8px;height:8px;background:var(--accent-d);transition:width .2s,height .2s,background .3s;}
#_ring{width:30px;height:30px;border:1.5px solid rgba(217,71,32,.4);z-index:9998;transition:width .3s var(--ease-expo),height .3s var(--ease-expo),border-color .3s;}
body.ch #_cur{width:14px;height:14px;}
body.ch #_ring{width:46px;height:46px;}
body.cta-zone #_cur{background:#fff;}
body.cta-zone #_ring{border-color:rgba(255,255,255,.5);}
@media (hover:none){#_cur,#_ring{display:none;} body{cursor:auto;}}

/* SCROLL PROGRESS */
#scroll-prog{position:fixed;top:0;left:0;height:2px;width:0%;background:var(--accent-d);z-index:9990;transition:width .1s linear;pointer-events:none;}

/* BACK TO TOP */
#back-top{position:fixed;bottom:32px;right:32px;z-index:700;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--bg);border:none;cursor:none;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;opacity:0;transform:translateY(12px);transition:opacity .35s var(--ease-expo),transform .35s var(--ease-expo),background .2s;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.18);}
#back-top.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
#back-top:hover{background:var(--accent-d);}
:focus-visible{outline:2px solid var(--accent-d);outline-offset:3px;border-radius:4px;}

/* ============================================================
   NAV
   ============================================================ */
#nav{position:fixed;top:0;left:0;right:0;z-index:600;height:var(--nav-h);padding:0 var(--pad-x);display:flex;align-items:center;justify-content:space-between;background:var(--nav-bg0);border-bottom:1px solid transparent;transition:background .35s,border-color .35s;}
#nav.sc{background:var(--nav-bgs);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-color:var(--border);}
.nav-logo{font-family:var(--f-display);font-size:22px;letter-spacing:.06em;color:var(--ink);cursor:none;transition:color .3s;}
.nav-logo span{color:var(--accent-d);}
.nav-links{display:flex;gap:28px;list-style:none;}
.nav-links a{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .2s,border-color .2s;cursor:none;padding:6px 2px;border-bottom:1px solid transparent;}
.nav-links a:hover,.nav-links a.active{color:var(--ink);border-color:var(--accent-d);}

.tt-wrap{display:flex;align-items:center;gap:18px;}
.tt-switch{position:relative;width:52px;height:28px;cursor:none;display:inline-flex;}
.tt-switch input{position:absolute;opacity:0;width:100%;height:100%;cursor:none;margin:0;}
.tt-track{position:absolute;inset:0;background:var(--tt-track);border-radius:100px;transition:background .3s;}
.tt-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--tt-knob);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease-expo),background .3s;box-shadow:0 1px 4px rgba(0,0,0,.2);}
.tt-switch input:checked~.tt-knob{transform:translateX(24px);}
.tt-icon{position:absolute;width:13px;height:13px;transition:opacity .3s,transform .3s;}
.tt-sun{opacity:1;} .tt-moon{opacity:0;}
.tt-switch input:checked~.tt-knob .tt-sun{opacity:0;transform:rotate(90deg);}
.tt-switch input:checked~.tt-knob .tt-moon{opacity:1;transform:rotate(0deg);}
#nav-cta{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cta-fg);background:var(--cta-bg);padding:11px 24px;border-radius:100px;cursor:none;transition:background .25s,color .25s,transform .25s;white-space:nowrap;}
#nav-cta:hover{background:var(--accent-d);color:#fff;transform:translateY(-1px);}

/* ============================================================
   SHARED TYPE PRIMITIVES
   ============================================================ */
.s-tag{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:14px;}
.s-tag::before{content:'';width:16px;height:1px;background:var(--accent-d);flex-shrink:0;}
.s-title{font-family:var(--f-display);font-size:clamp(52px,7vw,96px);letter-spacing:.03em;line-height:.92;color:var(--ink);transition:color .4s;}
.s-title .dim{color:var(--dim);}
.s-title .hl{color:var(--accent-d);}

.eyebrow{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:13px 26px;border-radius:100px;cursor:none;transition:background .25s,color .25s,transform .25s,box-shadow .25s;white-space:nowrap;}
.btn-dark{background:var(--cta-bg);color:var(--cta-fg);}
.btn-dark:hover{background:var(--accent-d);color:#fff;transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--accent-d);color:var(--accent-d);transform:translateY(-2px);}
.btn-w{background:#0E0E0E;color:#F4F4F4;}
.btn-w:hover{background:#fff;color:#E63020;transform:translateY(-2px);}

/* ============================================================
   REVEAL
   ============================================================ */
.rv,.section-fade{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo);}
.rv.vi,.rv.vis,.rv.in,.section-fade.vi,.section-fade.vis,.section-fade.in{opacity:1;transform:translateY(0);}
.rv.d1,.section-fade.d1{transition-delay:.08s;}
.rv.d2,.section-fade.d2{transition-delay:.16s;}
.rv.d3,.section-fade.d3{transition-delay:.24s;}
.rv.d4{transition-delay:.32s;}

@keyframes fup{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}

/* ============================================================
   FOOTER
   ============================================================ */
footer{padding:22px var(--pad-x);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.f-copy{font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.04em;}
.f-tag{font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  .rv,.section-fade{opacity:1!important;transform:none!important;}
}

@media(max-width:640px){
  :root{--pad-x:20px;}
  #nav{padding:0 20px;}
  .nav-links{display:none;}
  footer{flex-direction:column;gap:8px;text-align:center;}
}