/* ============================================================
   Critias — Aegean aesthetic, centered layout
   Self-contained site stylesheet (tokens + styles).
   Mirrors critias-design-system/tokens/critias-aegean.css
   ============================================================ */

:root {
  /* surfaces & lines */
  --color-bg:#EAEEEE; --color-surface:#F2F5F5; --color-surface-raised:#F4F6F6;
  --color-border:#D2D9DA; --color-border-strong:#BAC3C4; --color-rule:#B8893C;
  /* text */
  --color-heading:#14282D; --color-text:#2E3F43; --color-muted:#5C6A6E; --color-faint:#97A2A4;
  /* primary (teal) */
  --color-primary:#2C6E7C; --color-primary-hover:#245C68; --color-primary-contrast:#F2F5F5;
  --color-link:#2C6E7C; --color-link-hover:#1D4A54;
  /* accents */
  --color-accent-warm:#B8893C; --color-accent-secondary:#C56A4F; --color-accent-secondary-text:#9A4A33;
  --color-focus:#4F97A3; --focus-ring:0 0 0 3px color-mix(in srgb, #2C6E7C 35%, transparent);

  /* fonts */
  --font-display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body:"Spectral", Georgia, serif;
  --font-mono:"Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* space / radius / motion */
  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:32px; --space-9:48px;
  --radius-md:8px; --radius-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-rule:cubic-bezier(.7,0,.3,1);

  --grain:.02;
}

[data-theme="dark"] {
  --color-bg:#0D1A1F; --color-surface:#14252B; --color-surface-raised:#1A2F36;
  --color-border:#233A41; --color-border-strong:#33505A; --color-rule:#C9A24E;
  --color-heading:#DCE7E7; --color-text:#BBCBCC; --color-muted:#869A9C; --color-faint:#566668;
  --color-primary:#5FB0BC; --color-primary-hover:#6FBCC7; --color-primary-contrast:#0D1A1F;
  --color-link:#5FB0BC; --color-link-hover:#86B8BE;
  --color-accent-warm:#C9A24E; --color-accent-secondary:#D98A6F; --color-accent-secondary-text:#D98A6F;
  --color-focus:#5FB0BC; --focus-ring:0 0 0 3px color-mix(in srgb, #5FB0BC 40%, transparent);
  --grain:.035;
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh; display:flex; flex-direction:column; position:relative; overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
}
/* aegean background wash: teal glow above, faint brass below */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 55% at 50% -8%, color-mix(in srgb, var(--color-primary) 15%, transparent), transparent 64%),
    radial-gradient(55% 45% at 88% 108%, color-mix(in srgb, var(--color-accent-warm) 9%, transparent), transparent 60%);
  transition:opacity .4s var(--ease);
}
/* faint marble grain */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- frame ---- */
.frame{
  position:relative; z-index:1; flex:1; display:flex; flex-direction:column;
  width:100%; max-width:760px; margin:0 auto;
  padding:clamp(26px,5vh,56px) clamp(24px,6vw,48px);
}
.top{display:flex; align-items:center; justify-content:space-between; gap:16px}
.wordmark{
  font-family:var(--font-display); font-style:normal; font-size:22px;
  letter-spacing:.02em; color:var(--color-heading); text-decoration:none;
}
.toggle{
  font:500 10px/1 var(--font-mono); letter-spacing:.12em;
  color:var(--color-primary); background:transparent;
  border:1px solid var(--color-border-strong); border-radius:var(--radius-pill);
  padding:8px 13px; cursor:pointer; transition:border-color .15s, color .15s;
}
.toggle:hover{border-color:var(--color-primary)}
.toggle:focus-visible{outline:none; box-shadow:var(--focus-ring)}

/* ---- centered hero ---- */
main{
  flex:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  text-align:left; padding:6vh 0;
}
.eyebrow{
  font:500 11px/1 var(--font-mono); letter-spacing:.34em; text-transform:uppercase;
  color:var(--color-muted); margin-bottom:var(--space-6);
}
.rule{height:2px; width:0; background:var(--color-accent-warm); margin:0 0 var(--space-7); opacity:.85}
h1{
  font-family:var(--font-display); font-style:italic; font-weight:600; text-transform:uppercase;
  font-size:clamp(2.3rem, 6.2vw, 3.9rem); line-height:1.04; letter-spacing:.012em;
  color:var(--color-heading); max-width:17ch; margin:0;
}
h1 .em{color:var(--color-primary)}
.lede{
  margin:var(--space-7) 0 0; max-width:48ch;
  font-size:clamp(15px,1.7vw,17px); line-height:1.7; color:var(--color-muted);
  font-style:normal;
}
.lede strong{color:var(--color-text); font-weight:500}

/* three independence claims, left-aligned */
.claims{
  display:flex; flex-wrap:wrap; justify-content:flex-start; gap:10px 22px; margin-top:var(--space-7);
  font:500 11px/1 var(--font-mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--color-accent-secondary-text);
}
.claims span{position:relative}
.claims span:not(:last-child)::after{content:"·"; position:absolute; right:-13px; color:var(--color-faint)}

/* ---- access / form ---- */
.access{margin:var(--space-9) 0 0; max-width:460px; width:100%}
.access-label{
  font:500 10px/1 var(--font-mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--color-muted); margin-bottom:var(--space-3);
}
form{display:flex; gap:8px; align-items:stretch; justify-content:flex-start}
input[type=email],input[type=text],textarea{
  flex:1; min-width:0; font-family:var(--font-body); font-size:15px; color:var(--color-text);
  background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:var(--radius-md);
  padding:13px 15px; transition:border-color .2s, box-shadow .2s, background .4s;
}
input::placeholder,textarea::placeholder{color:var(--color-faint)}
input:focus,textarea:focus{outline:none; border-color:var(--color-primary); box-shadow:var(--focus-ring)}
button[type=submit]{
  font-family:var(--font-body); font-size:15px; font-weight:600; white-space:nowrap;
  color:var(--color-primary-contrast); background:var(--color-primary);
  border:1px solid var(--color-primary); border-radius:var(--radius-md);
  padding:13px 22px; cursor:pointer; transition:background .2s var(--ease), transform .2s var(--ease);
}
button[type=submit]:hover{background:var(--color-primary-hover); transform:translateY(-1px)}
button[type=submit]:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.form-note{margin-top:var(--space-3); font-size:12.5px; color:var(--color-faint); line-height:1.6}
.ok{color:var(--color-primary)}

/* ---- footer ---- */
footer{
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline; justify-content:space-between;
  padding-top:var(--space-6); border-top:1px solid var(--color-border);
  font:400 11px/1.6 var(--font-mono); letter-spacing:.04em; color:var(--color-faint);
}
footer a{color:var(--color-muted); text-decoration:none}
footer a:hover{color:var(--color-primary)}
.accent{color:var(--color-accent-secondary-text)}
.footer-links{display:inline-flex; align-items:center; gap:16px}
.footer-links .social{display:inline-flex; align-items:center; color:var(--color-muted); transition:color .15s}
.footer-links .social svg{width:15px; height:15px; display:block}
.footer-links .social:hover{color:var(--color-primary)}

/* ---- contact page specifics ---- */
.contact main{text-align:left; align-items:stretch; max-width:520px; margin:0 auto}
.contact .rule{margin-left:0}
.contact h1{font-size:clamp(2rem,5vw,3rem); max-width:none; margin:0}
.contact .lede{margin-left:0; margin-right:0; max-width:46ch}
.contact form{flex-direction:column; gap:12px; margin-top:var(--space-7); justify-content:flex-start}
.contact label{
  font:500 10px/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-muted); margin-bottom:-4px;
}
.contact textarea{resize:vertical; min-height:130px; line-height:1.6}
.contact button[type=submit]{align-self:flex-start; margin-top:var(--space-2)}

/* ---- entrance ---- */
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes drawrule{from{width:0} to{width:64px}}
.reveal{opacity:0; animation:rise .9s var(--ease) forwards}
.rule.reveal,.rule{animation:drawrule 1s var(--ease-rule) .35s forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.4s}.d3{animation-delay:.55s}
.d4{animation-delay:.7s}.d5{animation-delay:.85s}.d6{animation-delay:1s}.d7{animation-delay:1.15s}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; animation:none}
  .rule{width:64px; animation:none}
}
@media (max-width:520px){
  form{flex-direction:column}
  .contact button[type=submit]{align-self:stretch}
}