/* ==========================================================================
   CASTRO COGNITION // COMPONENTS
   Tokens only (see tokens.css). If you need a raw value, add a token first.
   Sections: base, effects, type, section header, buttons, links, cards,
   quotes, forms, terminal, sacred geometry, site chrome, layout, utilities.
   ========================================================================== */

/* =============================== BASE =============================== */
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--color-bg);scroll-behavior:smooth}
body{
  background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-mono);font-size:var(--text-body);line-height:var(--leading-body);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--color-selection-bg);color:var(--color-selection-text)}
a{color:inherit;text-decoration:none}
main{position:relative;z-index:var(--z-content)}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* =============================== EFFECTS ===============================
   Page overlays: drop these three divs right after <body>, aria-hidden.
     <div class="fx-scanlines" aria-hidden="true"></div>
     <div class="fx-vignette"  aria-hidden="true"></div>
     <div class="fx-grain"     aria-hidden="true"></div>
   Dial intensity by overriding the --fx-* tokens (limits in DESIGN.md). */
.fx-scanlines{
  position:fixed;inset:0;z-index:var(--z-fx-scanlines);pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    var(--fx-scanline-color) 0 var(--fx-scanline-line),
    transparent var(--fx-scanline-line) var(--fx-scanline-pitch));
  mix-blend-mode:overlay;
}
.fx-vignette{
  position:fixed;inset:0;z-index:var(--z-fx-vignette);pointer-events:none;
  background:radial-gradient(ellipse var(--fx-vignette-size) at 50% var(--fx-vignette-y),
    transparent var(--fx-vignette-clear), var(--fx-vignette-color) 100%);
}
.fx-grain{
  position:fixed;inset:-50%;width:200%;height:200%;z-index:var(--z-fx-grain);pointer-events:none;
  opacity:var(--fx-grain-opacity);
  background-image:var(--fx-grain-texture);
  animation:cc-grain var(--fx-grain-duration) steps(8) infinite;
}
@keyframes cc-grain{
  0%,100%{transform:translate(0,0)}12%{transform:translate(-2%,1%)}25%{transform:translate(1%,-2%)}
  38%{transform:translate(-1%,2%)}50%{transform:translate(2%,1%)}62%{transform:translate(-2%,-1%)}
  75%{transform:translate(1%,2%)}88%{transform:translate(2%,-2%)}
}
/* local scanlines, for a panel instead of the viewport */
.fx-scanlines--local{position:absolute;z-index:var(--z-raised)}

/* Chromatic aberration on display type.
   <h1 class="fx-chroma" data-text="404">404</h1>  (data-text must match the text) */
.fx-chroma{position:relative;isolation:isolate}
.fx-chroma::before,.fx-chroma::after{
  content:attr(data-text);content:attr(data-text) / "";
  position:absolute;inset:0;z-index:var(--z-below);pointer-events:none;
}
.fx-chroma::before{
  color:var(--red);opacity:var(--fx-chroma-red-opacity);
  transform:translateX(calc(var(--fx-chroma-offset) * -1));
  animation:cc-chroma-red var(--fx-chroma-duration) steps(2) infinite;
}
.fx-chroma::after{
  color:var(--gold);opacity:var(--fx-chroma-gold-opacity);
  transform:translateX(var(--fx-chroma-offset));
  animation:cc-chroma-gold calc(var(--fx-chroma-duration) * 1.3) steps(2) infinite;
}
@keyframes cc-chroma-red{
  0%,88%,100%{opacity:calc(var(--fx-chroma-red-opacity) * .82);transform:translateX(calc(var(--fx-chroma-offset) * -1))}
  90%{opacity:calc(var(--fx-chroma-red-opacity) * 2.27);transform:translateX(calc(var(--fx-chroma-offset) * -2)) skewX(-2deg)}
  94%{opacity:calc(var(--fx-chroma-red-opacity) * 1.36);transform:translateX(calc(var(--fx-chroma-offset) * 1.25))}
}
@keyframes cc-chroma-gold{
  0%,85%,100%{opacity:var(--fx-chroma-gold-opacity);transform:translateX(var(--fx-chroma-offset))}
  87%{opacity:calc(var(--fx-chroma-gold-opacity) * 2.2);transform:translateX(calc(var(--fx-chroma-offset) * 1.75)) skewX(1.5deg)}
  92%{opacity:calc(var(--fx-chroma-gold-opacity) * 1.4);transform:translateX(calc(var(--fx-chroma-offset) * -.75))}
}
/* static chroma split for small display type (hover states) */
.fx-chroma-shadow{text-shadow:var(--fx-chroma-text-shadow)}

@keyframes cc-blink{50%{opacity:0}}
@keyframes cc-pulse-dot{50%{opacity:.25}}
@keyframes cc-ring{0%,100%{box-shadow:0 0 0 0 var(--red-35)}50%{box-shadow:0 0 0 var(--space-4) var(--red-00)}}
@keyframes cc-spin{to{transform:rotate(360deg)}}
@keyframes cc-enter{from{opacity:0;transform:translateY(var(--space-4))}to{opacity:1;transform:none}}

/* =============================== TYPE =============================== */
h1,.h1{
  font-family:var(--font-display);font-weight:var(--weight-regular);
  font-size:var(--text-h1);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);
  color:var(--color-text-strong);
}
h2,.h2{
  font-family:var(--font-display);font-weight:var(--weight-regular);
  font-size:var(--text-h2);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);
  color:var(--color-text-strong);margin-bottom:var(--space-6);
}
.h3{
  font-family:var(--font-display);font-weight:var(--weight-regular);
  font-size:var(--step-0);letter-spacing:var(--tracking-snug);color:var(--color-text);
}
.lab{
  font-size:var(--text-xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--color-highlight);margin-bottom:var(--space-5);
}
.lead{
  font-family:var(--font-serif);font-style:italic;font-size:var(--text-lead);
  color:var(--color-text-soft);max-width:var(--measure-lead);
}
.lead--bright{color:var(--color-text)}
.body{color:var(--color-text-soft);max-width:var(--measure-body)}
.body strong{color:var(--color-text)}
.hl{color:var(--color-accent)}
.gd{color:var(--color-highlight)}
.emph{font-family:var(--font-serif);font-style:italic}
.rule{width:var(--space-16);height:var(--border-width);background:var(--color-rule);margin:var(--space-7) 0}
.micro{font-size:var(--text-xs);letter-spacing:var(--tracking-wider);color:var(--color-muted)}

/* =============================== SECTION HEADER ===============================
   <header class="section-head"><p class="lab">// eyebrow</p><h2>Title.</h2><p class="lead">Line.</p></header> */
.section-head{margin-bottom:var(--space-8)}
.section-head h2,.section-head .h2{margin-bottom:0}
.section-head .lead{margin-top:var(--space-4)}

/* =============================== BUTTONS =============================== */
.btn{
  display:inline-block;font-family:var(--font-display);font-weight:var(--weight-regular);
  font-size:var(--step-0);letter-spacing:var(--tracking-wider);
  padding:var(--space-4) var(--space-11);
  background:var(--color-accent);color:var(--color-text-strong);
  border:var(--border-width) solid var(--color-accent);border-radius:var(--radius-0);
  cursor:pointer;
  transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);
}
.btn:hover{background:transparent;color:var(--color-accent);box-shadow:var(--glow-red)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* secondary: the gold-framed alternative */
.btn--secondary{background:transparent;color:var(--color-text);border-color:var(--color-border-strong)}
.btn--secondary:hover{border-color:var(--color-highlight);color:var(--color-highlight);box-shadow:var(--shadow-none)}
/* ghost: no frame until you touch it */
.btn--ghost{background:transparent;color:var(--color-text);border-color:transparent}
.btn--ghost:hover{border-color:var(--color-border);color:var(--color-highlight);box-shadow:var(--shadow-none)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:var(--opacity-disabled);cursor:not-allowed}
.btn:disabled:hover{background:var(--color-accent);color:var(--color-text-strong);box-shadow:var(--shadow-none)}
.btn--secondary:disabled:hover{background:transparent;color:var(--color-text);border-color:var(--color-border-strong)}
.btn--ghost:disabled:hover{background:transparent;color:var(--color-text);border-color:transparent}

/* =============================== LINKS =============================== */
/* underline link: inherits type, gains a gold hairline */
.link{border-bottom:var(--border-width) solid var(--gold-40);transition:color var(--dur-fast) var(--ease-standard)}
.link:hover,.link:focus-visible{color:var(--color-highlight)}
/* meta variant: small caps mono */
.link--meta{font-size:var(--text-xs);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-muted);padding-bottom:var(--space-1)}
/* inline link inside running text */
.link-inline{color:var(--color-highlight);transition:color var(--dur-fast) var(--ease-standard)}
.link-inline:hover,.link-inline:focus-visible{color:var(--color-accent)}

/* =============================== CARDS ===============================
   .tick  = the frame: hairline border + gold corner ticks. No padding.
   .card  = frame + padding + surface wash. Pair them: class="tick card". */
.tick{position:relative;border:var(--border-width) solid var(--color-border)}
.tick::before,.tick::after{
  content:"";position:absolute;width:var(--tick-size);height:var(--tick-size);
  border-color:var(--color-highlight);border-style:solid;opacity:var(--tick-opacity);z-index:var(--z-raised);
}
.tick::before{top:calc(var(--border-width) * -1);left:calc(var(--border-width) * -1);border-width:var(--border-width) 0 0 var(--border-width)}
.tick::after{bottom:calc(var(--border-width) * -1);right:calc(var(--border-width) * -1);border-width:0 var(--border-width) var(--border-width) 0}
.card{padding:var(--space-7);background:var(--color-surface)}
.card--accent{border-left:var(--border-width-accent) solid var(--color-accent)}
.card--link{display:block;transition:border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.card--link:hover,.card--link:focus-visible{border-color:var(--color-border-strong);background:var(--color-surface-hover);outline:none}
.card--link:hover::before,.card--link:hover::after,
.card--link:focus-visible::before,.card--link:focus-visible::after{border-color:var(--color-accent);opacity:1}
.card-title{font-family:var(--font-display);font-size:var(--step-0);letter-spacing:var(--tracking-snug);color:var(--color-highlight);margin-bottom:var(--space-2)}
.card-copy{font-size:var(--text-base);color:var(--color-text-soft)}

/* =============================== QUOTES =============================== */
/* testimonial card: <figure class="quote tick"><p>...</p><cite>...</cite></figure> */
.quote{padding:var(--space-7) var(--space-6);margin-top:var(--space-7)}
.quote p{font-family:var(--font-serif);font-style:italic;font-size:var(--step--1);line-height:var(--leading-serif);color:var(--color-text)}
.quote cite{display:block;margin-top:var(--space-4);font-style:normal;font-size:var(--text-xs);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-highlight)}
.quote--feature p{font-size:var(--text-xl)}
.quote--accent{border-left:var(--border-width-accent) solid var(--color-accent)}
.quote-kicker{font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-4)}
/* editorial pull quote: one line that carries the page */
.pull-quote{
  font-family:var(--font-serif);font-style:italic;font-size:var(--text-2xl);line-height:var(--leading-snug);
  color:var(--color-text);max-width:var(--measure-quote);
  border-left:var(--border-width-accent) solid var(--color-accent);padding-left:var(--space-7);margin-top:var(--space-7);
}

/* =============================== FORMS =============================== */
form{display:grid;gap:var(--space-5);max-width:var(--container-form)}
label{display:block;font-size:var(--text-xs);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-highlight);margin-bottom:var(--space-2)}
label .opt{color:var(--color-muted);letter-spacing:var(--tracking-wide)}
label.req::after{content:" *";color:var(--color-accent)}
.req-note{font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--color-muted)}
.req-note b{color:var(--color-accent);font-weight:var(--weight-regular)}
input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea{
  width:100%;background:var(--color-surface-hover);border:var(--border-width) solid var(--color-border);color:var(--color-text);
  font-family:var(--font-mono);font-size:var(--text-base);padding:var(--space-3) var(--space-4);outline:none;
  transition:border-color var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard);
  border-radius:var(--radius-0);-webkit-appearance:none;appearance:none;
}
select{
  background-image:linear-gradient(45deg,transparent 49%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 51%);
  background-position:calc(100% - var(--space-5)) 50%,calc(100% - var(--space-5) + var(--select-arrow)) 50%;
  background-size:var(--select-arrow) var(--select-arrow);background-repeat:no-repeat;
}
select option{background:var(--color-bg);color:var(--color-text)}
input:focus,select:focus,textarea:focus{border-color:var(--color-highlight);background:var(--color-surface-focus)}
textarea{min-height:var(--space-30);resize:vertical}
.chk-group{display:grid;gap:var(--space-2);margin-top:var(--space-1)}
.chk{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-md);color:var(--color-text-soft);text-transform:none;letter-spacing:var(--tracking-none)}
.chk input{width:var(--space-4);height:var(--space-4);margin-top:var(--space-1);accent-color:var(--red)}
.fnote{font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--color-muted)}

/* =============================== TERMINAL ===============================
   Inline line: <p class="term-line"><span class="term-prompt">&gt;</span> text<span class="term-cursor">_</span></p>
   Panel: see design-system.html for the full markup. */
.term-line{font-size:var(--text-sm);letter-spacing:var(--tracking-wide);color:var(--color-muted)}
.term-prompt{color:var(--color-accent)}
.term-live{color:var(--color-text)}
.term-cursor{color:var(--color-highlight);animation:cc-blink var(--dur-blink) steps(1) infinite}

.terminal{
  position:relative;overflow:hidden;
  border:var(--border-width) solid var(--color-border);background:var(--color-surface);
  box-shadow:var(--shadow-crt-inset);
  font-family:var(--font-mono);
}
.terminal::after{ /* CRT raster + edge falloff, confined to the panel */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:var(--z-raised);
  background:
    repeating-linear-gradient(to bottom,var(--fx-scanline-color) 0 var(--fx-scanline-line),transparent var(--fx-scanline-line) var(--fx-scanline-pitch)),
    radial-gradient(ellipse var(--fx-vignette-size) at 50% 50%,transparent var(--fx-vignette-clear),var(--fx-vignette-color) 100%);
}
.terminal-bar{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
  padding:var(--space-2) var(--space-4);border-bottom:var(--border-width) solid var(--color-border);
  font-size:var(--text-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-muted);
}
.terminal-title{color:var(--color-highlight)}
.terminal-status{color:var(--color-accent)}
.terminal-status::before{content:"\25CF ";animation:cc-pulse-dot var(--dur-pulse) var(--ease-wave) infinite}
.terminal-body{padding:var(--space-5) var(--space-4) var(--space-6);display:grid;gap:var(--space-2);font-size:var(--text-md);line-height:var(--leading-body)}
.terminal-body .term-line{font-size:inherit;color:var(--color-text)}
.term-out{color:var(--color-text-soft)}
.term-ok{color:var(--color-highlight)}
.term-err{color:var(--color-accent)}

/* =============================== SACRED GEOMETRY ===============================
   Divider (inline SVG, strokes inherit currentColor):
     <div class="geo-divider" role="separator"><svg viewBox="-50 -50 100 100">...</svg></div>
   Background motif: add .geo-bg to any positioned block. */
.geo-divider{
  display:flex;align-items:center;gap:var(--space-4);
  color:var(--color-highlight);margin:var(--space-12) auto;max-width:var(--container-form);
}
.geo-divider::before,.geo-divider::after{content:"";flex:1;height:var(--border-width)}
.geo-divider::before{background:linear-gradient(to right,transparent,var(--gold-40))}
.geo-divider::after{background:linear-gradient(to left,transparent,var(--gold-40))}
.geo-divider svg{
  width:var(--space-12);height:var(--space-12);flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:var(--geo-stroke);opacity:var(--geo-opacity);
  animation:cc-spin var(--geo-spin) linear infinite;
}
.geo-divider svg .geo-core{fill:var(--color-accent);stroke:none}
.geo-bg{position:relative;isolation:isolate}
.geo-bg::before{
  content:"";position:absolute;inset:0;z-index:var(--z-below);pointer-events:none;
  background:var(--color-highlight);opacity:var(--geo-bg-opacity);
  -webkit-mask-image:var(--geo-motif);mask-image:var(--geo-motif);
  -webkit-mask-size:var(--geo-tile);mask-size:var(--geo-tile);
  -webkit-mask-position:center;mask-position:center;
}

/* =============================== CANVAS ART ===============================
   ASCII canvases drawn by page JS. Colors come from --*-rgb tokens. */
.art-acc{display:block;pointer-events:none}

/* =============================== SITE CHROME =============================== */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-4) var(--nav-pad-x);
  background:var(--color-surface-nav);backdrop-filter:blur(var(--blur-nav));-webkit-backdrop-filter:blur(var(--blur-nav));
  border-bottom:var(--border-width) solid var(--color-border-faint);
}
.brand{font-family:var(--font-display);font-size:var(--step-0);letter-spacing:var(--tracking-wide);color:var(--color-text-strong)}
.brand:hover{color:var(--color-highlight)}
.nav-cta{
  font-size:var(--text-xs);letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--color-accent);border:var(--border-width) solid var(--color-border-accent);
  padding:var(--space-2) var(--space-5);
  transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);
}
.nav-cta:hover{background:var(--color-accent);color:var(--color-text-strong)}
.nav-cta:focus-visible,.brand:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.site-footer{position:relative;z-index:var(--z-content);border-top:var(--border-width) solid var(--color-border);margin-top:var(--space-10)}
.foot-in{
  max-width:var(--container-footer);margin:0 auto;padding:var(--space-6);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3);
  font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-muted);
}
.foot-in a{transition:color var(--dur-fast) var(--ease-standard)}
.foot-in a:hover{color:var(--color-highlight)}

.sticky-cta{display:none}

/* =============================== LAYOUT =============================== */
.sec{max-width:var(--container-narrow);margin:0 auto;padding:var(--section-pad-y) var(--gutter)}
.sec--wide{max-width:var(--container-wide);padding:var(--section-pad-y-wide) var(--gutter)}
.js .fade{opacity:0;transform:translateY(var(--reveal-shift));transition:opacity var(--dur-reveal) var(--ease-standard),transform var(--dur-reveal) var(--ease-standard)}
.js .fade.in{opacity:1;transform:none}

/* =============================== UTILITIES (spacing scale only; they win, like inline styles) =============================== */
.mt-0{margin-top:var(--space-0) !important}.mt-1{margin-top:var(--space-1) !important}.mt-2{margin-top:var(--space-2) !important}.mt-3{margin-top:var(--space-3) !important}
.mt-4{margin-top:var(--space-4) !important}.mt-5{margin-top:var(--space-5) !important}.mt-6{margin-top:var(--space-6) !important}.mt-7{margin-top:var(--space-7) !important}
.mt-8{margin-top:var(--space-8) !important}.mt-9{margin-top:var(--space-9) !important}.mt-10{margin-top:var(--space-10) !important}.mt-12{margin-top:var(--space-12) !important}
.mb-0{margin-bottom:var(--space-0) !important}.mb-2{margin-bottom:var(--space-2) !important}.mb-4{margin-bottom:var(--space-4) !important}.mb-6{margin-bottom:var(--space-6) !important}
.mb-7{margin-bottom:var(--space-7) !important}.mb-8{margin-bottom:var(--space-8) !important}

/* =============================== RESPONSIVE (one breakpoint: 760px) =============================== */
@media (max-width:760px){
  .sec,.sec--wide{padding:var(--section-pad-y-mobile) var(--gutter-mobile)}
  .site-nav{padding:var(--space-3) var(--space-4)}
  .foot-in{justify-content:center;text-align:center}
  .sticky-cta{
    display:block;position:fixed;bottom:0;left:0;right:0;z-index:var(--z-sticky);text-align:center;
    padding:var(--space-3);background:var(--color-accent);color:var(--color-text-strong);
    font-family:var(--font-display);font-size:var(--step--1);letter-spacing:var(--tracking-wide);
  }
}

/* =============================== ACCESSIBILITY =============================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;
    transition-duration:.01ms !important;
  }
  .fx-grain,.fx-chroma::before,.fx-chroma::after,.term-cursor,.terminal-status::before,.geo-divider svg{animation:none !important}
  .js .fade{opacity:1;transform:none}
}
/* users who ask for more contrast get the clean signal: no raster, no grain, no falloff */
@media (prefers-contrast:more){
  .fx-scanlines,.fx-grain,.fx-vignette,.terminal::after{display:none}
}