/* ============================================================
   ASTRAL SPACEWAYS INCORPORATED — style.css
   A celestial travel bureau, hand-built by mystics with taste
   and no budget, in the last year before Y2K.
   All tokens + components. No framework. No build step.
   ============================================================ */

/* ---- self-hosted fonts (OFL) — §8.2 / §14 ---- */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('../fonts/cormorant-garamond-var.woff2') format('woff2');
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Spectral';
  src:url('../fonts/spectral-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Spectral';
  src:url('../fonts/spectral-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Mono';
  src:url('../fonts/space-mono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Mono';
  src:url('../fonts/space-mono-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---- design tokens — §14 ---- */
:root{
  --void:#0B0E1A; --deep:#141B33; --astral:#3B2F6B;
  --calf-gold:#C9A24B; --gold-lit:#E7C766; --bone:#EDE6D3; --veil-red:#8B2A2A;

  --display:"Cormorant Garamond", Georgia, serif;
  --body:"Spectral","EB Garamond", Georgia, serif;
  --mono:"Space Mono","IBM Plex Mono", Courier, monospace;

  --t-hero:3.25rem; --t-h1:2.25rem; --t-h2:1.6rem;
  --t-lg:1.15rem; --t-base:1rem; --t-cap:0.85rem;
  --measure:66ch; --column:720px; --lh-body:1.65;

  --rule:1px solid color-mix(in srgb, var(--calf-gold) 40%, transparent);
  --hair:color-mix(in srgb, var(--calf-gold) 40%, transparent);
  --radius:0;
  --space:1.25rem;
}

/* ---- reset-ish ---- */
*,*::before,*::after{ box-sizing:border-box; }
/* [hidden] must win over any explicit display (e.g. .nav ul{display:flex})
   so the small-screen nav toggle can actually collapse the menu — §8.7 */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  -webkit-tap-highlight-color:color-mix(in srgb, var(--gold-lit) 20%, transparent); }
body{
  margin:0; background:var(--void); color:var(--bone);
  font-family:var(--body); font-size:var(--t-base); line-height:var(--lh-body);
  min-height:100vh; min-height:100dvh; position:relative;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--gold-lit); text-decoration:none; }
a:hover,a:focus{ color:var(--gold-lit); text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--gold-lit); outline-offset:2px; }
hr{ border:none; border-top:var(--rule); margin:2.5rem 0; }
::selection{ background:var(--astral); color:var(--gold-lit); }

/* ---- starfield (decorative, behind everything) — §8.5 / F5 ---- */
.starfield{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb, var(--astral) 45%, transparent), transparent 70%),
    radial-gradient(900px 600px at 90% 110%, color-mix(in srgb, var(--astral) 30%, transparent), transparent 70%),
    var(--void);
}
.starfield canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* CSS fallback stars if JS/canvas is off */
.starfield::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, var(--bone) 50%, transparent),
    radial-gradient(1px 1px at 80% 20%, var(--gold-lit) 50%, transparent),
    radial-gradient(1px 1px at 60% 70%, var(--bone) 50%, transparent),
    radial-gradient(1px 1px at 35% 85%, var(--gold-lit) 50%, transparent),
    radial-gradient(1px 1px at 10% 60%, var(--bone) 50%, transparent),
    radial-gradient(1px 1px at 90% 75%, var(--bone) 50%, transparent),
    radial-gradient(1px 1px at 50% 15%, var(--gold-lit) 50%, transparent);
  opacity:.5;
}

/* ---- layout — §8.3 ---- */
.wrap{ width:100%; max-width:var(--column); margin:0 auto; padding:0 1.25rem; }
main{ padding:1rem 0 3rem; }
section{ margin:2.75rem 0; }
.center{ text-align:center; }
.measure{ max-width:var(--measure); margin-inline:auto; }

/* skip link */
.skip{ position:absolute; left:-999px; top:0; background:var(--gold-lit); color:var(--void);
  padding:.5rem .9rem; font-family:var(--mono); z-index:100; }
.skip:focus{ left:1rem; top:1rem; }

/* ---- header / wordmark / nav — §8.3 ---- */
.masthead{ padding-top:2rem; text-align:center; }
.sigil{ width:56px; height:56px; margin:0 auto .5rem; color:var(--calf-gold); }
.sigil svg,.sigil img{ width:100%; height:100%; }
.wordmark{
  font-family:var(--display); font-weight:600; color:var(--calf-gold);
  font-size:clamp(1.4rem, 4.5vw, 2.1rem); letter-spacing:.22em; text-transform:uppercase;
  margin:.2rem 0 .1rem; line-height:1.1;
}
.wordmark a{ color:inherit; }
.wordmark a:hover{ text-decoration:none; color:var(--gold-lit); }
.tagline{
  font-family:var(--display); font-style:italic; color:var(--bone);
  font-size:var(--t-lg); opacity:.9; margin:.2rem 0 1rem;
}
.nav{ font-family:var(--mono); font-size:var(--t-cap); text-transform:uppercase;
  letter-spacing:.1em; padding:.4rem 0; }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  justify-content:center; gap:.35rem 1.1rem; }
.nav a{ color:var(--bone); padding:.25rem 0; border-bottom:1px solid transparent; }
.nav a:hover{ color:var(--gold-lit); text-decoration:none; border-bottom-color:var(--calf-gold); }
.nav a[aria-current="page"]{ color:var(--calf-gold); border-bottom-color:var(--calf-gold); }

/* gold hairline rule — §8.3 */
.hairline{ border:none; border-top:1px solid var(--hair); margin:1.25rem 0; }
.hairline--wide{ margin:2rem 0; }

/* ---- headings / eyebrows / type — §8.2 ---- */
.eyebrow{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.2em;
  font-size:var(--t-cap); color:var(--calf-gold); margin:0 0 .6rem; }
h1,.h1{ font-family:var(--display); font-weight:600; color:var(--bone);
  font-size:clamp(2rem, 6vw, var(--t-h1)); line-height:1.12; margin:.2rem 0 1rem; letter-spacing:.01em; }
.hero-title{ font-size:clamp(2.4rem, 9vw, var(--t-hero)); }
h2,.h2{ font-family:var(--display); font-weight:600; color:var(--gold-lit);
  font-size:var(--t-h2); line-height:1.2; margin:2rem 0 .8rem; }
h3,.h3{ font-family:var(--display); font-weight:600; color:var(--bone);
  font-size:var(--t-lg); margin:1.4rem 0 .5rem; letter-spacing:.01em; }
p{ margin:0 0 1.1rem; }
.lede{ font-size:var(--t-lg); color:var(--bone); }
strong{ color:var(--gold-lit); font-weight:600; }
em{ color:inherit; }
.dropcap::first-letter{ font-family:var(--display); font-size:3.2em; line-height:.8;
  float:left; color:var(--calf-gold); padding:.05em .12em 0 0; font-weight:600; }

/* in-world copy block (blockquote voice) */
.inworld{ border-left:2px solid var(--hair); padding-left:1.2rem; margin:1.4rem 0;
  color:var(--bone); }
.inworld p:last-child{ margin-bottom:0; }
.epigraph{ font-family:var(--display); font-style:italic; font-size:var(--t-lg);
  color:var(--bone); opacity:.85; text-align:center; margin:1.5rem auto; }
.epigraph cite{ display:block; font-family:var(--mono); font-style:normal;
  font-size:.75rem; letter-spacing:.1em; opacity:.7; margin-top:.4rem; text-transform:uppercase; }

/* mono utility text — §8.2 (data/captions only) */
.mono{ font-family:var(--mono); font-size:var(--t-cap); letter-spacing:.02em; }
.trust{ font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; color:var(--calf-gold);
  text-align:center; text-transform:uppercase; opacity:.85; }
.data-list{ list-style:none; margin:1rem 0; padding:0; font-family:var(--mono); font-size:.9rem; }
.data-list li{ padding:.5rem 0; border-bottom:1px dotted var(--hair); }
.data-list li:last-child{ border-bottom:none; }

/* ---- boarding-pass card — §8.6 ---- */
.pass{
  background:var(--deep); border:var(--rule); border-left:4px solid var(--calf-gold);
  padding:var(--space); font-family:var(--mono); position:relative; margin:1.25rem 0;
  overflow:hidden;
}
/* perforated right edge */
.pass::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:14px;
  background:
    radial-gradient(circle 4px at right 7px top 10px, var(--void) 55%, transparent 56%),
    linear-gradient(var(--void),var(--void));
  background-repeat:repeat-y; background-size:100% 20px;
  border-left:1px dashed var(--hair);
}
.pass .ticket-no{ position:absolute; top:.7rem; right:1.5rem; font-size:.7rem;
  letter-spacing:.1em; color:var(--calf-gold); opacity:.8; }
.pass .fare{ font-family:var(--display); font-size:var(--t-h2); color:var(--gold-lit);
  letter-spacing:.02em; margin:0 0 .1rem; }
.pass .fare-sub{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.16em; color:var(--calf-gold); margin:0 0 .8rem; }
.pass .fare-body{ font-family:var(--body); font-size:.98rem; color:var(--bone); }
.pass .fare-price{ font-family:var(--mono); color:var(--gold-lit); font-size:.95rem;
  letter-spacing:.05em; margin-top:.6rem; }
.pass .flight-data{ font-family:var(--mono); font-size:.72rem; color:var(--bone); opacity:.7;
  letter-spacing:.03em; margin-top:.8rem; border-top:1px dotted var(--hair); padding-top:.6rem; }

/* boarding-pass grid (feature tiles) */
.pass-grid{ display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media (min-width:560px){ .pass-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
  .pass-grid.cols-2{ grid-template-columns:repeat(2,1fr); } }
.tile{ display:flex; flex-direction:column; }
.tile .fare{ font-size:var(--t-lg); }
.tile-cta{ margin-top:auto; padding-top:.8rem; }

/* ---- CTA button — gold ---- */
.btn{ display:inline-block; font-family:var(--mono); text-transform:uppercase;
  letter-spacing:.12em; font-size:.82rem; padding:.7rem 1.4rem; cursor:pointer;
  background:transparent; color:var(--calf-gold); border:1px solid var(--calf-gold);
  transition:background .15s ease, color .15s ease; }
.btn:hover,.btn:focus{ background:var(--calf-gold); color:var(--void); text-decoration:none; }
/* touch feedback (hover doesn't fire reliably on touch) */
.btn:active{ background:var(--calf-gold); color:var(--void); transform:translateY(1px); }
.btn--solid{ background:var(--calf-gold); color:var(--void); }
.btn--solid:hover,.btn--solid:focus{ background:var(--gold-lit); border-color:var(--gold-lit); }
.btn--block{ display:block; width:100%; text-align:center; }
.cta-row{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin:1.5rem 0; }

/* ---- departures board (signature) — §8.4 / F4 ---- */
.board{ background:#080a13; border:1px solid var(--hair); padding:1rem .8rem;
  font-family:var(--mono); overflow-x:auto; overscroll-behavior-x:contain;
  box-shadow:inset 0 0 40px rgba(0,0,0,.6); }
.board table{ width:100%; border-collapse:collapse; font-size:.8rem; min-width:460px; }
.board caption{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--calf-gold); padding-bottom:.7rem; text-align:left; }
.board th{ text-align:left; color:var(--calf-gold); font-weight:400; font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; padding:.3rem .5rem; opacity:.75;
  border-bottom:1px solid var(--hair); }
.board td{ padding:.55rem .5rem; border-bottom:1px dotted color-mix(in srgb,var(--calf-gold) 22%, transparent);
  color:var(--gold-lit); white-space:nowrap; vertical-align:middle; }
.board tr:last-child td{ border-bottom:none; }
.board .dest{ color:var(--bone); }
.board a.dest{ color:var(--bone); }
.board a.dest:hover{ color:var(--gold-lit); }
.board .status{ color:var(--calf-gold); font-size:.7rem; letter-spacing:.08em; }
.board .status[data-s="boarding"]{ color:var(--gold-lit); }
.board .status[data-s="delayed"]{ color:var(--veil-red); }
.board .status[data-s="notyet"]{ color:var(--bone); opacity:.55; }
/* split-flap cell: each char box */
.flap{ display:inline-block; }
.flap b{ display:inline-block; min-width:.62em; text-align:center; font-weight:400;
  background:#11131f; margin:0 .5px; padding:0 1px; border-radius:1px; }

/* ---- testimonial slab (parchment) — §8.6 ---- */
.slab{ background:var(--bone); color:var(--void); padding:1.6rem 1.5rem; margin:1.25rem 0;
  border:1px solid var(--calf-gold); position:relative; }
.slab blockquote{ margin:0; font-family:var(--display); font-size:var(--t-lg); font-style:italic;
  line-height:1.4; color:#20232f; }
.slab .attrib{ font-family:var(--mono); font-style:normal; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.1em; color:#5a4a1e; margin-top:.9rem; display:block; }

/* ---- parchment / covenant panel — §8.6 ---- */
.parchment{ background:var(--bone); color:#191c26; padding:2rem 1.75rem; margin:1.5rem 0;
  border:1px solid var(--calf-gold); box-shadow:0 2px 20px rgba(0,0,0,.35); }
.parchment h2,.parchment h3{ color:#3a2c0a; }
.parchment strong{ color:#5a4a1e; }
.parchment a{ color:#6b4a12; }
.parchment .eyebrow{ color:#7a5a10; }
.parchment .inworld{ border-left-color:#b89a52; }
.parchment .veil{ color:var(--veil-red); font-weight:600; }

/* ---- crew card — §8.6 ---- */
.crew{ margin:1.5rem 0; padding:1.4rem 0; border-top:1px solid var(--hair); }
.crew:first-of-type{ border-top:none; }
.crew-head{ display:flex; gap:1.1rem; align-items:flex-start; }
.crew-portrait{ flex:0 0 76px; width:76px; height:76px; border:1px solid var(--calf-gold);
  background:var(--deep); color:var(--calf-gold); display:grid; place-items:center; }
.crew-portrait svg,.crew-portrait img{ width:60%; height:60%; }
.crew-name{ font-family:var(--display); font-weight:600; color:var(--gold-lit);
  font-size:var(--t-lg); margin:0; text-transform:uppercase; letter-spacing:.04em; }
.crew-role{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--calf-gold); margin:.2rem 0; }
.tag{ display:inline-block; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; border:1px solid var(--hair); padding:.15rem .5rem; margin:.2rem .3rem .2rem 0;
  color:var(--bone); }

/* ---- inquiry form — §8.6 / §10.9 ---- */
.form{ margin:1.5rem 0; }
.field{ margin-bottom:1.2rem; }
.field label{ display:block; font-family:var(--mono); font-size:.75rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--calf-gold); margin-bottom:.35rem; }
.field .hint{ display:block; font-family:var(--display); font-style:italic; font-size:.9rem;
  color:var(--bone); opacity:.7; margin-bottom:.4rem; text-transform:none; letter-spacing:0; }
.field input,.field select,.field textarea{
  width:100%; background:var(--bone); color:var(--void); border:1px solid var(--calf-gold);
  font-family:var(--body); font-size:1rem; padding:.65rem .8rem; border-radius:0;
}
.field textarea{ min-height:8rem; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--gold-lit); outline-offset:1px; }
.hp{ position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; }
.form-note{ font-family:var(--mono); font-size:.72rem; opacity:.75; margin-top:1rem; }
.form-status{ font-family:var(--mono); padding:1rem 1.2rem; margin:1.2rem 0; display:none; }
.form-status.show{ display:block; }
.form-status.ok{ border:1px solid var(--calf-gold); color:var(--gold-lit); background:var(--deep); }
.form-status.err{ border:1px solid var(--veil-red); color:var(--bone); background:color-mix(in srgb,var(--veil-red) 22%, var(--deep)); }

/* guestbook flourish */
.guestbook{ font-family:var(--mono); font-size:.78rem; color:var(--bone); opacity:.8;
  border-top:1px dotted var(--hair); margin-top:2rem; padding-top:1rem; }
.guestbook li{ padding:.3rem 0; }

/* ---- under-construction easter egg — §8.5 ---- */
.construction{ text-align:center; font-family:var(--mono); border:1px dashed var(--calf-gold);
  padding:2rem 1.2rem; margin:1.5rem 0; background:repeating-linear-gradient(45deg,
    transparent, transparent 12px, color-mix(in srgb,var(--calf-gold) 6%, transparent) 12px,
    color-mix(in srgb,var(--calf-gold) 6%, transparent) 24px); }
.construction .big{ font-family:var(--display); font-size:var(--t-h2); color:var(--gold-lit);
  text-transform:uppercase; letter-spacing:.1em; }

/* ---- marquee / ticker (used once) — §8.5 ---- */
.ticker{ overflow:hidden; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  padding:.5rem 0; font-family:var(--mono); font-size:.78rem; color:var(--calf-gold);
  letter-spacing:.06em; white-space:nowrap; }
.ticker > span{ display:inline-block; padding-left:100%; animation:crawl 34s linear infinite; }
@keyframes crawl{ from{ transform:translateX(0);} to{ transform:translateX(-100%);} }

/* ---- footer — §10.12 ---- */
.site-footer{ border-top:1px solid var(--hair); margin-top:3rem; padding:2rem 0 3rem;
  font-family:var(--mono); font-size:.76rem; color:var(--bone); text-align:center; letter-spacing:.03em; }
.site-footer a{ color:var(--calf-gold); }
.counter{ color:var(--gold-lit); letter-spacing:.08em; }
.webring{ margin:.9rem 0; color:var(--calf-gold); }
.webring a{ padding:0 .4rem; }
.badge3i{ display:inline-block; border:1px solid var(--hair); padding:.2rem .6rem; margin:.6rem 0;
  color:var(--calf-gold); }
.footer-links{ margin:.8rem 0; }
.footer-links a{ padding:0 .5rem; color:var(--bone); }
.seam{ max-width:56ch; margin:1.2rem auto 0; font-family:var(--body); font-style:italic;
  font-size:.86rem; color:var(--bone); opacity:.72; line-height:1.5; letter-spacing:0; }
.attribution{ margin-top:1rem; opacity:.55; font-size:.68rem; }

/* ---- reduced motion — §8.7 / F5 ---- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .starfield canvas{ display:none; }
  .ticker > span{ animation:none; padding-left:0; }
  .flap b{ transition:none !important; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* ---- small screens — §8.7 (to 320px) ---- */
@media (max-width:480px){
  :root{ --t-h2:1.4rem; }
  .wrap{ padding:0 1rem; }
  .wordmark{ letter-spacing:.14em; }
  .nav ul{ gap:.15rem .8rem; }
  .crew-head{ flex-direction:column; align-items:center; text-align:center; }
  .board table{ font-size:.72rem; }
  /* ≥44px tap targets on touch (WCAG 2.5.5) — pad without changing the look */
  .nav a{ padding:.72rem .3rem; }
  .webring a,.footer-links a{ display:inline-block; padding:.78rem .55rem; }
  .board a.dest{ display:inline-block; padding:.5rem 0; }
}