/* ==========================================================================
   ZettaFort — "Isometric Fortification"
   The implementation of design/design-system.md. Shared foundation.
   Rules enforced here so section CSS cannot break them.
   ========================================================================== */

:root{
  /* --- Colour ----------------------------------------------------------- */
  --void:        #000000;
  --wall:        #0A0910;
  --hairline:    #2A2833;
  --muted:       #6B6878;
  --secondary:   #A09DAE;
  --primary:     #E8E6EF;
  --violet:      #673AB7;
  --violet-lit:  #8B5CF6;
  --violet-deep: #4A2A85;
  --positive:    #A0CA92;

  /* --- Type: 80 / 40 / 20 / 14 ------------------------------------------ */
  --font-sans:"Geist","Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-mono:"Geist Mono","JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --t-statement: clamp(40px, 5.6vw, 80px);
  --t-sub:       clamp(28px, 2.8vw, 40px);
  --t-lead:      20px;
  --t-meta:      14px;

  /* --- Rhythm ----------------------------------------------------------- */
  --gutter:24px;
  --gap-section:400px;
  --nav-h:64px;

  /* --- Motion: coprime loops, 600ms floor ------------------------------- */
  --loop-a:8s;
  --loop-b:13s;
  --loop-c:21s;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:600ms;
}

@media (max-width:980px){ :root{ --gap-section:200px; } }
@media (max-width:640px){ :root{ --gap-section:128px; --gutter:20px; } }

/* ==========================================================================
   Reset — zero radius is a system rule, enforced globally
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  margin:0;
  background:var(--void);
  color:var(--primary);
  font-family:var(--font-sans);
  font-size:var(--t-lead);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
::selection{background:var(--violet);color:#fff}
:focus-visible{outline:2px solid var(--violet-lit);outline-offset:3px}

/* The three sanctioned curves — the only exceptions to zero radius */
.pill{border-radius:9999px}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;flex:none;background:var(--violet)}
.hex{clip-path:polygon(50% 0%,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--primary);color:var(--void);padding:12px 18px;font-size:14px}
.skip:focus{left:16px;top:16px}

/* ==========================================================================
   Type — four sizes, nothing between
   ========================================================================== */
.t-statement{
  font-size:var(--t-statement);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:.95;
  color:var(--primary);
}
.t-sub{
  font-size:var(--t-sub);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.05;
  color:var(--primary);
}
.t-lead{
  font-size:var(--t-lead);
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.5;
  color:var(--secondary);
}
.t-meta{
  font-family:var(--font-mono);
  font-size:var(--t-meta);
  font-weight:500;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
  color:var(--muted);
}
.c-primary{color:var(--primary)}
.c-secondary{color:var(--secondary)}
.c-muted{color:var(--muted)}
.c-violet{color:var(--violet-lit)}

/* Meta label with the crenellation tick — the logo's battlement, miniaturised */
.t-meta--tick{display:inline-flex;align-items:center;gap:10px}
.t-meta--tick::before{
  content:"";width:14px;height:8px;flex:none;background:var(--violet);
  clip-path:polygon(0 100%,0 40%,25% 40%,25% 0,50% 0,50% 40%,75% 40%,75% 0,100% 0,100% 100%);
}

/* ==========================================================================
   Layout — full bleed, no centred column
   ========================================================================== */
.bleed{width:100%;padding-inline:var(--gutter)}
.section{padding-block:calc(var(--gap-section) / 2)}
.section:first-of-type{padding-top:0}
.rule{height:1px;background:var(--hairline);width:100%}

/* Full-width 12-column grid. Artwork may break it; text may not. */
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
@media (max-width:980px){.g12{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:640px){.g12{grid-template-columns:repeat(2,minmax(0,1fr))}}

.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}
.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}
.span-12{grid-column:1/-1}
@media (max-width:980px){
  .span-3,.span-4{grid-column:span 3}
  .span-5,.span-6,.span-7,.span-8{grid-column:1/-1}
}
@media (max-width:640px){
  .span-3,.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:1/-1}
}

/* Hairline cell — the only container form in the system */
.cell{position:relative;border:1px solid var(--hairline);padding:24px;background:transparent}
.cell--wall{background:var(--wall)}

/* --------------------------------------------------------------------------
   Boundary — the floor under every void.
   Round 1's craft verdict: "its voids have no floor". Generous section gaps
   measured fine and composed badly, because nothing terminated the black.
   This is a dimension line borrowed from a technical drawing: it closes the
   space above it, indexes the section below it, and gives the eye an edge.
   -------------------------------------------------------------------------- */
.boundary{
  display:flex;align-items:center;gap:20px;
  width:100%;padding-inline:var(--gutter);
  height:60px;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background:var(--wall);
}
.boundary .b-idx{color:var(--violet);flex:none}
.boundary .b-name{color:var(--secondary);flex:none}
.boundary .b-line{flex:1;height:1px;background:var(--hairline);min-width:20px}
.boundary .b-tail{color:var(--muted);flex:none}
/* The crenellation tick, repeated as a measure scale along the line */
.boundary .b-scale{
  flex:none;width:96px;height:8px;
  background-image:repeating-linear-gradient(90deg,var(--hairline) 0 1px,transparent 1px 12px);
}
@media (max-width:640px){
  .boundary{height:52px;gap:12px}
  .boundary .b-tail,.boundary .b-scale{display:none}
}

/* ==========================================================================
   Buttons — hard edges, violet reserved
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding:0 24px;
  font-size:14px;font-weight:500;letter-spacing:-.01em;
  border:1px solid var(--hairline);
  color:var(--primary);
  background:transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn:hover{border-color:var(--violet);background:rgba(103,58,183,.10)}
.btn--solid{background:var(--primary);color:var(--void);border-color:var(--primary)}
.btn--solid:hover{background:#fff;border-color:#fff;color:var(--void)}
.btn--violet{background:var(--violet);border-color:var(--violet);color:#fff}
.btn--violet:hover{background:var(--violet-lit);border-color:var(--violet-lit)}
.btn svg{width:15px;height:15px;flex:none;transition:transform var(--dur) var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ==========================================================================
   Ambient motion — nothing plays once
   ========================================================================== */
@keyframes iso-spin      {from{transform:rotate(0)}      to{transform:rotate(360deg)}}
@keyframes iso-spin-rev  {from{transform:rotate(0)}      to{transform:rotate(-360deg)}}
@keyframes trace-run     {from{stroke-dashoffset:0}      to{stroke-dashoffset:-200}}
@keyframes breathe       {0%,100%{opacity:.35}50%{opacity:1}}
@keyframes drift-y       {0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.spin-a{animation:iso-spin var(--loop-a) linear infinite;transform-origin:50% 50%}
.spin-b{animation:iso-spin-rev var(--loop-b) linear infinite;transform-origin:50% 50%}
.spin-c{animation:iso-spin var(--loop-c) linear infinite;transform-origin:50% 50%}
.trace{animation:trace-run var(--loop-b) linear infinite}
.breathe{animation:breathe var(--loop-a) var(--ease) infinite}
.drift{animation:drift-y var(--loop-c) var(--ease) infinite}

/* ==========================================================================
   The persistent instrument — pinned at every scroll position
   Signature, and a real control: it governs all ambient motion on the page.
   ========================================================================== */
.instrument{
  /* Bottom-centre put it directly on top of headline text at three of six
     scroll positions — flagged in both rounds. Content runs full-bleed here,
     so the only reliably empty corner is the trailing one. */
  position:fixed;right:var(--gutter);bottom:20px;
  z-index:90;
  display:inline-flex;align-items:stretch;
  border:1px solid var(--hairline);
  /* Opaque, not translucent: it must read as an instrument sitting on the page,
     never as a smear with body copy bleeding through it. */
  background:var(--void);
  font-family:var(--font-mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  overflow:hidden;
}
.instrument button{
  padding:5px 10px;color:var(--muted);
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.instrument button + button{border-left:1px solid var(--hairline)}
.instrument button[aria-pressed="true"]{color:var(--primary);background:var(--violet)}
.instrument button:hover{color:var(--primary)}
.instrument button[aria-pressed="true"]:hover{color:var(--primary)}
.instrument .readout{
  display:flex;align-items:center;gap:8px;
  padding:7px 11px;border-left:1px solid var(--hairline);color:var(--muted);
}
@media (max-width:900px){ .instrument .readout{display:none} }

/* Motion off — ambient freezes to a composed still frame, never blank */
.motion-off .spin-a,.motion-off .spin-b,.motion-off .spin-c,
.motion-off .trace,.motion-off .breathe,.motion-off .drift{
  animation-play-state:paused !important;
}
.motion-off .marquee-track{animation-play-state:paused !important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .spin-a,.spin-b,.spin-c,.trace,.breathe,.drift{animation:none !important}
  /* Composed still frame: rings hold at an off-axis angle, not at zero */
  .spin-b{transform:rotate(-18deg)}
  .spin-c{transform:rotate(12deg)}
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.nav.is-stuck{
  background:rgba(0,0,0,.80);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--hairline);
}
.nav-inner{width:100%;padding-inline:var(--gutter);display:flex;align-items:center;gap:32px}
.brand{display:inline-flex;align-items:center;gap:11px;flex:none}
.brand-mark{width:28px;height:28px;flex:none}
.brand-text{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--primary)}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-links a{
  padding:8px 14px;font-size:14px;color:var(--secondary);letter-spacing:-.01em;
  transition:color var(--dur) var(--ease);
}
.nav-links a:hover,.nav-links a.is-active{color:var(--primary)}
.nav-cta{display:flex;align-items:center;gap:10px;flex:none}
.nav .btn{height:40px;padding:0 18px}
@media (max-width:940px){.nav-links,.nav-cta .btn--ghost{display:none}}

.nav-toggle{
  display:none;width:40px;height:40px;align-items:center;justify-content:center;
  border:1px solid var(--hairline);margin-left:auto;
}
.nav-toggle span{display:block;width:16px;height:1px;background:var(--primary);position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:16px;height:1px;background:var(--primary);
  transition:transform var(--dur) var(--ease);
}
.nav-toggle span::before{top:-5px}
.nav-toggle span::after{top:5px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}
@media (max-width:940px){.nav-toggle{display:inline-flex}}

.drawer{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:99;display:none;
  background:var(--void);border-bottom:1px solid var(--hairline);
  padding:16px var(--gutter) 32px;
}
.drawer.is-open{display:block}
.drawer a{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;border-bottom:1px solid var(--hairline);
  font-size:var(--t-sub);font-weight:600;letter-spacing:-.03em;color:var(--primary);
}
.drawer .btn{margin-top:24px;width:100%}
@media (min-width:941px){.drawer{display:none !important}}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{border-top:1px solid var(--hairline);padding-block:80px 32px}
.footer h4{font-family:var(--font-mono);font-size:14px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.footer nav a{display:block;padding:7px 0;font-size:14px;color:var(--secondary);transition:color var(--dur) var(--ease)}
.footer nav a:hover{color:var(--primary)}
.footer-bottom{
  margin-top:64px;padding-top:24px;border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
}
.footer-bottom p,.footer-bottom a{font-size:14px;color:var(--muted)}
.footer-bottom a:hover{color:var(--secondary)}
.footer-legal{display:flex;gap:24px;flex-wrap:wrap}