/* Mythogenix — shared site-wide styles.
   Linked from every page under the domain; edit here to change them all at once. */

:root{
  --ink:#0E0B14;
  --ink-2:#151020;
  --vellum:#EDE4D3;
  --smoke:#8B8299;
  --gold:#C98827;
  --oxblood:#6E1F2A;
  --rule:rgba(201,136,39,.28);
  --display:"Bodoni Moda",Georgia,serif;
  --body:"Spectral",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(1.25rem,5vw,4.5rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  background-image:
    radial-gradient(120% 90% at 12% -10%, #241a33 0%, rgba(36,26,51,0) 55%),
    radial-gradient(90% 70% at 95% 0%, rgba(110,31,42,.35) 0%, rgba(110,31,42,0) 60%);
  background-attachment:fixed;
  color:var(--vellum);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .35vw,1.125rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--oxblood);color:var(--vellum)}
a{color:var(--vellum);text-decoration-color:var(--rule);text-underline-offset:.28em}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:70rem;margin:0 auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── masthead ─────────────────────────────── */
header{padding-block:clamp(2rem,6vw,3.5rem) 0}
.rule{height:1px;background:linear-gradient(90deg,var(--rule),rgba(201,136,39,0))}
.eyebrow{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--smoke);
}
.masthead{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-bottom:1rem}

/* ── footer ───────────────────────────────── */
footer{padding-block:clamp(2.5rem,7vw,4rem);border-top:1px solid var(--rule);margin-top:clamp(2rem,5vw,3rem)}
.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline}
.mailto{font-family:var(--mono);font-size:.95rem;letter-spacing:.01em}
.colophon{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke)}

/* ── load sequence ────────────────────────── */
.rise{opacity:0;transform:translateY(12px);animation:rise .9s cubic-bezier(.22,.61,.36,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.25s}.d3{animation-delay:.45s}.d4{animation-delay:.6s}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
  .cursor{animation:none}
  *{scroll-behavior:auto}
}