/* Odyssey: The Long Return — page theme over the scrub engine
   Palette: Parian limestone, fired terracotta, oxidized bronze, Aegean shadow. */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root, .sw-root {
  --sw-bg: #f3ecdf;   /* Parian marble, warm */
  --sw-ink: #2b2118;   /* fired clay, near-black brown */
  --sw-ink-soft: #7a6a5b;    /* weathered terracotta grey */
  --sw-accent: #9c4f33;   /* red-figure iron oxide */
  --sw-font-display: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  --sw-font-body: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
}

html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--sw-bg); color: var(--sw-ink); }

/* Display type — small caps in the manner of an inscription, not shouted. */
.sw-root .sw-copy__title,
.sw-root .sw-brand__name,
.sw-root .sw-copy__eyebrow,
.sw-root .sw-route__label,
.sw-root .sw-nav__item {
  font-family: var(--sw-font-display);
}

.sw-root .sw-copy__title {
  font-weight: 500;
  font-variant-caps: small-caps;
  letter-spacing: .04em;
  line-height: 1.06;
  text-shadow: none;
}

.sw-root .sw-copy__eyebrow {
  font-weight: 500;
  letter-spacing: .18em;
}

.sw-root .sw-copy__body {
  font-family: var(--sw-font-body);
  font-size: clamp(1.12rem, 1.5vw, 1.3rem);
  line-height: 1.48;
  letter-spacing: .005em;
  color: color-mix(in srgb, var(--sw-ink) 82%, var(--sw-ink-soft));
text-shadow: none;
}

.sw-root .sw-brand__name {
  font-weight: 500;
  font-variant-caps: small-caps;
  letter-spacing: .12em;
}

/* Tags, buttons, route rail — quiet, matte, terracotta on stone */
.sw-root .sw-copy__tags li {
  font-family: var(--sw-font-body);
  font-weight: 500;
  font-size: .9rem;
  color: var(--sw-accent);
  background: color-mix(in srgb, var(--sw-accent) 8%, var(--sw-bg));
  border: 1px solid color-mix(in srgb, var(--sw-accent) 30%, transparent);
}
.sw-root .sw-btn--primary {
  font-family: var(--sw-font-display);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--sw-bg);
  background: var(--sw-accent);
}
.sw-root .sw-brand__mark {
  border-radius: 2px;
  background: var(--sw-accent);
  box-shadow: none;
}
.sw-root .sw-nav {
  background: color-mix(in srgb, var(--sw-bg) 70%, transparent);
  border-color: color-mix(in srgb, var(--sw-ink) 12%, transparent);
}
.sw-root .sw-route__label {
  background: color-mix(in srgb, var(--sw-bg) 92%, transparent);
  border-color: color-mix(in srgb, var(--sw-ink) 12%, transparent);
}

/* Scrim: narrower, faster falloff, and tied to the copy — it fades out with the
   chapter text, so connector clips run full-frame with no wash. */
.sw-root .sw-copylayer::before {
  width: min(40vw, 520px);
  background: linear-gradient(90deg,
    var(--sw-bg) 0%,
    color-mix(in srgb, var(--sw-bg) 88%, transparent) 28%,
 color-mix(in srgb, var(--sw-bg) 50%, transparent) 52%,
    transparent 100%);
  opacity: var(--sw-scrim, 0);
}

/* Preload gate */
.sw-load {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; gap: 12px;
  background: radial-gradient(ellipse at center, #f8f3e9 0%, var(--sw-bg) 70%);
  color: var(--sw-ink);
  font-family: var(--sw-font-body);
  text-align: center; padding: 24px;
  opacity: 0; transition: opacity .45s ease;
}
.sw-load.is-ready { opacity: 1; }
.sw-load.is-done  { opacity: 0; pointer-events: none; }
.sw-load__title {
  margin: 0; font-family: var(--sw-font-display);
  font-weight: 500; font-variant-caps: small-caps;
  font-size: 2.6rem; letter-spacing: .3em;
}
.sw-load__sub {
  margin: -4px 0 14px; font-size: .82rem; letter-spacing: .24em;
  font-style: italic; color: var(--sw-ink-soft);
}
.sw-load__bar {
  width: min(64vw, 320px); height: 1px; margin: 0 auto; overflow: hidden;
  background: color-mix(in srgb, var(--sw-ink) 14%, transparent);
}
.sw-load__fill { display: block; height: 100%; width: 0; background: var(--sw-accent); transition: width .2s linear; }
.sw-load__pct  { margin: 0; font-family: var(--sw-font-body); font-size: .82rem; letter-spacing: .1em; color: var(--sw-ink-soft); }
.sw-load__note { margin: 0; font-size: .8rem; font-style: italic; color: var(--sw-ink-soft); opacity: 0; transition: opacity .3s; }
.sw-load__note.is-shown { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sw-load, .sw-load__fill { transition: none; }
}

/* Score toggle — sits with the topbar, terracotta on limestone, quiet until tapped. */
.sw-music {
  position: fixed; right: clamp(18px, 3vw, 42px); top: clamp(14px, 2.4vw, 22px); z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 14px 0 11px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sw-ink) 14%, transparent);
  background: color-mix(in srgb, var(--sw-bg) 88%, transparent);
  color: var(--sw-ink-soft); cursor: pointer;
  font-family: var(--sw-font-display); font-weight: 500; font-variant-caps: small-caps;
  font-size: .86rem; letter-spacing: .08em;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .45s ease, transform .45s ease, color .2s, border-color .2s, background .2s;
}
.sw-music.is-ready { opacity: 1; transform: none; }
.sw-music:hover { color: var(--sw-ink); border-color: color-mix(in srgb, var(--sw-accent) 40%, transparent); }
.sw-music.is-playing { color: var(--sw-accent); border-color: color-mix(in srgb, var(--sw-accent) 45%, transparent); }
.sw-music.is-playing .sw-music__note { animation: sw-note 1.6s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes sw-note { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.sw-music svg { flex: none; }
@media (max-width: 860px) { .sw-music__label { display: none; } .sw-music { padding: 0 10px; right: 12px; top: 12px; } }
@media (prefers-reduced-motion: reduce) { .sw-music.is-playing .sw-music__note { animation: none; } }