/* ═══ THE INTERSTELLAR ARK — the future blueprint pages ═══
   Three blueprint decks behind swapping bars: navy paper, gold ink,
   corner registration marks, a living sacred-geometry field. */

/* ── the field behind everything ─────────────────────────────────── */
#ark-hero-canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .8;
}

/* the reading progress — a live readout, styled here (this page does
   not load legal-doc.css where the generic rule lives) */
.doc-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000;
  background: rgba(255, 255, 255, 0.06);
}
.doc-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #d4a843, #fff8e8);
  box-shadow: 0 0 10px #d4a843;
  transition: width .2s ease-out;
}

/* the shared footer sits ABOVE the fixed field, with its own ground */
.site-footer { position: relative; z-index: 2; background: #06060f; }
.ark-grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(212,168,67,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,168,67,.05) 1px, transparent 1px),
    linear-gradient(rgba(212,168,67,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,168,67,.02) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  mask-image: radial-gradient(ellipse at 50% 18%, rgba(0,0,0,.9), transparent 75%);
}

/* ── hero ─────────────────────────────────────────────────────────── */
.ark-hero {
  position: relative; z-index: 2;
  padding: calc(var(--phi-space-xl) * 1.2) var(--phi-space-lg) var(--phi-space-lg);
  text-align: center;
}
.ark-back {
  position: absolute; top: var(--phi-space-md); left: var(--phi-space-lg);
  font-family: var(--font-mono); font-size: var(--phi-caption);
  color: var(--phi-text-dim); text-decoration: none; letter-spacing: .06em;
  padding: .5em 1.1em; border: 1px solid var(--phi-stroke); border-radius: 999px;
  transition: color .3s var(--phi-ease), border-color .3s var(--phi-ease);
  z-index: 5;
}
.ark-back:hover { color: var(--phi-gold); border-color: var(--phi-gold-dim); }
.ark-hero-kicker { font-size: var(--phi-caption); color: var(--phi-text-dim); letter-spacing: .28em; }
.ark-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 5.2rem); margin: .2em 0 .1em; color: #e8d5a3;
}
.ark-sub {
  max-width: 46em; margin: 0 auto; color: var(--phi-text-dim);
  font-size: 1.02rem; line-height: 1.8;
}
.ark-sub b { color: var(--phi-gold); font-weight: 600; }
.ark-hero-badge {
  display: inline-block; margin-top: var(--phi-space-md);
  font-size: var(--phi-caption); color: var(--phi-gold-dim);
  letter-spacing: .3em; padding: .6em 1.6em;
  border-top: 1px solid var(--phi-stroke); border-bottom: 1px solid var(--phi-stroke);
}

/* ── THE SWAPPING BARS ────────────────────────────────────────────── */
.ark-tabs {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: stretch; justify-content: center;
  gap: var(--phi-space-sm);
  padding: var(--phi-space-sm) var(--phi-space-md);
  background: rgba(6,6,15,.88); backdrop-filter: blur(14px);
  border-top: 1px solid var(--phi-stroke);
  border-bottom: 1px solid var(--phi-stroke);
}
.ark-tab {
  appearance: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; gap: .25em; align-items: center;
  padding: .7em 1.8em; border: 1px solid transparent; border-radius: 12px;
  transition: border-color .35s var(--phi-ease), background .35s var(--phi-ease),
              transform .35s var(--phi-ease);
}
.ark-tab:hover { border-color: var(--phi-stroke); transform: translateY(-2px); }
.ark-tab-no {
  font-family: var(--font-mono); font-size: var(--phi-caption);
  color: var(--phi-text-dim); letter-spacing: .3em;
  transition: color .35s var(--phi-ease);
}
.ark-tab-label {
  font-family: 'Space Grotesk', sans-serif; font-size: .92rem;
  color: var(--phi-text-dim); letter-spacing: .02em;
  transition: color .35s var(--phi-ease);
}
.ark-tab[aria-selected="true"] {
  border-color: var(--phi-gold-dim);
  background: rgba(212,168,67,.07);
}
.ark-tab[aria-selected="true"] .ark-tab-no,
.ark-tab[aria-selected="true"] .ark-tab-label { color: var(--phi-gold); }
.ark-tab-glyph {
  align-self: center; color: var(--phi-gold-dim); font-size: 1.1rem;
  opacity: .7; user-select: none;
}

/* ── the deck stage ───────────────────────────────────────────────── */
.ark-stage { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.ark-deck { padding: var(--phi-space-lg) var(--phi-space-md) 0; }
.ark-deck-head { text-align: center; margin: var(--phi-space-lg) 0; }
.ark-deck-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: #e8d5a3; }
.ark-deck-sub { color: var(--phi-text-dim); max-width: 40em; margin: .4em auto 0; line-height: 1.75; }

/* ── THE BLUEPRINT SHEETS ─────────────────────────────────────────── */
.ark-sheets { display: flex; flex-direction: column; gap: var(--phi-space-xl); }
.ark-sheet {
  position: relative;
  background:
    linear-gradient(160deg, rgba(12,16,28,.92), rgba(8,10,18,.96));
  border: 1px solid rgba(212,168,67,.28);
  border-radius: 4px;
  padding: clamp(1.2rem, 3vw, 2.4rem) clamp(1.2rem, 4vw, 3rem) 2rem;
  /* corner registration marks — real drafting paper */
  background-image:
    linear-gradient(rgba(212,168,67,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,168,67,.045) 1px, transparent 1px);
  background-size: 32px 32px;
  box-shadow: 0 24px 70px -30px rgba(0,0,0,.8);
  overflow: hidden;
}
.ark-sheet::before, .ark-sheet::after,
.ark-sheet .ark-corner-b::before, .ark-sheet .ark-corner-b::after {
  content: ''; position: absolute; width: 22px; height: 22px;
  border-color: var(--phi-gold-dim); border-style: solid; opacity: .85;
}
.ark-sheet::before { top: 10px; left: 10px; border-width: 2px 0 0 2px; }
.ark-sheet::after { top: 10px; right: 10px; border-width: 2px 2px 0 0; }
.ark-sheet .ark-corner-b::before { bottom: 10px; left: 10px; border-width: 0 0 2px 2px; }
.ark-sheet .ark-corner-b::after { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; }

.ark-sheet-head {
  display: flex; align-items: baseline; gap: var(--phi-space-md);
  padding-bottom: .7em; margin-bottom: 1em;
  border-bottom: 1px solid rgba(212,168,67,.35);
}
.ark-sheet-no {
  font-family: var(--font-mono); font-size: .85rem; color: #0a0c10;
  background: var(--phi-gold); padding: .35em .7em; border-radius: 4px;
  letter-spacing: .08em; flex: none;
}
.ark-sheet-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.55rem); color: #e8d5a3; line-height: 1.3;
}
.ark-sheet-listen {
  margin-left: auto; flex: none; appearance: none; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--phi-caption);
  color: var(--phi-text-dim); background: none;
  border: 1px solid var(--phi-stroke); border-radius: 999px;
  padding: .45em 1em; letter-spacing: .05em;
  transition: color .3s var(--phi-ease), border-color .3s var(--phi-ease);
}
.ark-sheet-listen:hover { color: var(--phi-gold); border-color: var(--phi-gold-dim); }
.ark-sheet-listen[aria-pressed="true"] { color: #0a0c10; background: var(--phi-gold); border-color: var(--phi-gold); }

/* the sheet's body — the blueprint drawing itself */
.ark-sheet-body { font-size: .98rem; line-height: 1.75; color: rgba(232,225,205,.88); }
.ark-sheet-body h1, .ark-sheet-body h2, .ark-sheet-body h3 {
  font-family: 'Cormorant Garamond', serif; color: var(--phi-gold);
  margin: 1.4em 0 .5em; line-height: 1.3;
}
.ark-sheet-body h1:first-child { margin-top: 0; }
.ark-sheet-body table { border-collapse: collapse; width: 100%; margin: 1.1em 0; font-size: .88em; }
.ark-sheet-body th, .ark-sheet-body td { border: 1px solid rgba(255,255,255,.12); padding: 5px 9px; text-align: left; }
.ark-sheet-body th { color: var(--phi-gold); }
.ark-sheet-body blockquote {
  border-left: 2px solid var(--phi-gold-dim); padding-left: 1em;
  color: var(--phi-text-dim); font-style: italic;
}
.ark-sheet-body pre {
  overflow-x: auto; background: rgba(0,0,0,.4); padding: 14px; border-radius: 8px;
  /* the ASCII diagrams: monospace, no wrap, aligned box art */
  font-family: 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
  font-size: .78rem; line-height: 1.3; white-space: pre;
  border: 1px solid rgba(212,168,67,.2);
}
.ark-sheet-body pre code { background: none; padding: 0; }
.ark-sheet-body code {
  background: rgba(255,255,255,.06); padding: 1px 5px; border-radius: 4px;
  font-family: 'Cascadia Mono', 'Consolas', monospace; font-size: .88em;
}
.ark-sheet-body a { color: var(--phi-gold); }
.ark-sheet-body ul, .ark-sheet-body ol { padding-left: 1.4em; }
.ark-sheet-body li { margin: .25em 0; }

/* phi divider between sheets */
.ark-divider {
  display: flex; align-items: center; justify-content: center; gap: var(--phi-space-md);
  color: var(--phi-gold-dim); user-select: none;
}
.ark-divider-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,.4), transparent);
}

/* loading state of a sheet */
.ark-sheet-loading {
  padding: 2.4rem; text-align: center; color: var(--phi-text-dim);
  font-family: var(--font-mono); font-size: var(--phi-caption); letter-spacing: .1em;
}

/* ── the index page: walkthroughs & tutorials ─────────────────────── */
.ark-index-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--phi-space-md); margin-bottom: var(--phi-space-xl);
}
.ark-walk {
  position: relative;
  background: linear-gradient(160deg, rgba(12,16,28,.9), rgba(8,10,18,.95));
  border: 1px solid rgba(212,168,67,.25); border-radius: 4px;
  padding: 1.4rem 1.5rem;
}
.ark-walk-kicker {
  font-family: var(--font-mono); font-size: var(--phi-caption);
  color: var(--phi-gold-dim); letter-spacing: .2em; margin-bottom: .5em;
}
.ark-walk h3 { font-family: 'Cormorant Garamond', serif; color: #e8d5a3; font-size: 1.25rem; margin: 0 0 .4em; }
.ark-walk p { color: var(--phi-text-dim); font-size: .92rem; line-height: 1.7; margin: 0 0 .8em; }
.ark-walk ol { margin: 0; padding-left: 1.3em; color: rgba(232,225,205,.85); font-size: .92rem; line-height: 1.9; }
.ark-walk ol a { color: var(--phi-gold); text-decoration: none; border-bottom: 1px dotted rgba(212,168,67,.4); }
.ark-walk ol a:hover { color: #e8d5a3; border-bottom-color: var(--phi-gold); }

/* ── the voice dock ───────────────────────────────────────────────── */
.ark-tts-dock {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 24px; z-index: 60;
  display: flex; align-items: center; gap: var(--phi-space-sm);
  padding: .6em .9em;
  background: rgba(10,10,15,.94); backdrop-filter: blur(12px);
  border: 1px solid rgba(212,168,67,.4); border-radius: 999px;
  box-shadow: 0 14px 50px -12px rgba(0,0,0,.85);
}
.ark-tts-btn {
  appearance: none; cursor: pointer;
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em;
  color: var(--phi-gold); background: none;
  border: 1px solid rgba(212,168,67,.5); border-radius: 999px;
  padding: .55em 1.2em; white-space: nowrap;
  transition: background .3s var(--phi-ease), color .3s var(--phi-ease);
}
.ark-tts-btn:hover { background: rgba(212,168,67,.12); }
.ark-tts-btn[aria-pressed="true"] { background: var(--phi-gold); color: #0a0c10; }
.ark-tts-hd { color: var(--phi-text-dim); border-color: var(--phi-stroke); }
/* the dock is HIDDEN until a sheet is selected — author styles would
   otherwise defeat the [hidden] attribute (display:flex beats it) */
.ark-tts-dock[hidden] { display: none; }
.ark-tts-note {
  font-family: var(--font-mono); font-size: var(--phi-caption);
  color: var(--phi-text-dim); letter-spacing: .04em;
  max-width: 13em; line-height: 1.4;
}
@media (max-width: 720px) {
  .ark-tts-note { display: none; }
  .ark-tab-label { font-size: .78rem; }
}

/* ── end bloom ────────────────────────────────────────────────────── */
.ark-end {
  text-align: center; padding: var(--phi-space-xl) 0 var(--phi-space-xl);
}
.ark-end-bloom {
  width: 10px; height: 10px; margin: 0 auto var(--phi-space-md);
  background: var(--phi-gold); border-radius: 50%;
  box-shadow: 0 0 30px 8px rgba(212,168,67,.45);
}
.ark-end p.sacred-text { color: var(--phi-gold); letter-spacing: .2em; }