/* MYELIN · theme + page-specific layers on top of the scrollcraft floor */

:root {
  --sc-canvas: #070A12;
  --sc-surface: #0E1522;
  --sc-ink: #EDF1F6;
  --sc-ink-soft: #93A1B4;
  --sc-accent: #F0A860;
  --sc-accent-ink: #1A1206;
  --sc-font-display: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --sc-font-text: "Archivo", system-ui, sans-serif;
  --my-loop: #FF6A4D;          /* state colour of the craving loop, not a page accent */
}

html { background: var(--sc-canvas); }
body { color: var(--sc-ink); }

/* ---- world layers ------------------------------------------------------- */

.my-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 130;              /* above the poster legs (100-120), below copy */
  display: block;
}

.sc-world .sc-grain { z-index: 135; }

.sc-world__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* live canvas world: posters only carry reduced motion and the first paint */
@media (prefers-reduced-motion: reduce) {
  .my-canvas { display: none; }
}

/* ---- wordmark ----------------------------------------------------------- */

.my-mark {
  position: fixed;
  top: clamp(1rem, 2.4vh, 1.6rem);
  left: var(--sc-gutter);
  z-index: var(--sc-z-chrome);
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.34em;
  color: var(--sc-ink);
  user-select: none;
}

/* ---- copy over the world ------------------------------------------------ */

.sc-world__copy .sc-copy { max-width: min(34rem, 86vw); }
.sc-world__copy .sc-lede { max-width: 30rem; }
.sc-world__copy .sc-body { max-width: 28rem; color: var(--sc-ink-soft); }

.my-hero h1 { text-wrap: balance; }

/* window-driven scrims: opacity set by the page, so the harness measures them */
.my-scrim { opacity: 0; --sc-scrim-a: 82%; }

/* dwell line: bespoke, driven by main.js, not by the engine */
.my-dwell {
  position: absolute;
  left: 50%;
  top: 14vh;
  transform: translateX(-50%);
  text-align: center;
  color: var(--sc-accent);
  letter-spacing: 0.14em;
  line-height: 1.75;
  opacity: 0;
  transition: opacity 900ms var(--sc-ease-out);
  pointer-events: none;
}
.my-dwell.is-on { opacity: 1; }

/* ---- finale ------------------------------------------------------------- */

.my-program {
  list-style: none;
  margin: var(--sc-6) 0 0;
  padding: 0;
  max-width: 30rem;
}
.my-program li {
  padding: var(--sc-3) 0;
  border-top: 1px solid var(--sc-hairline);
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-sm);
  line-height: 1.6;
}
.my-program li:first-child { border-top: 0; }
.my-program strong { color: var(--sc-ink); font-weight: 600; }

.my-begin-row {
  display: flex;
  align-items: center;
  gap: var(--sc-4);
  margin-top: var(--sc-7);
}

.my-cta {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--sc-accent-ink);
  background: var(--sc-accent);
  border: 0;
  border-radius: var(--sc-r-md);
  padding: 0.9rem 1.6rem;
  cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(240, 168, 96, 0.45);
  transition: transform 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
}
.my-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -12px rgba(240, 168, 96, 0.55); }
.my-cta:active { transform: translateY(1px) scale(0.98); }
.my-cta:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

.my-begun {
  color: var(--sc-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 700ms var(--sc-ease-out), transform 700ms var(--sc-ease-out);
}
.my-begun.is-on { opacity: 1; transform: none; }

.my-colophon {
  margin-top: var(--sc-8);
  font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft);
  opacity: 0.75;
  max-width: 30rem;
}

/* ---- the map (nav) ------------------------------------------------------ */

.my-map {
  position: fixed;
  right: var(--sc-gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--sc-z-chrome);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sc-3);
}

.my-map__svg { display: block; opacity: 0.9; }
.my-map__outline {
  fill: none;
  stroke: var(--sc-ink-soft);
  stroke-opacity: 0.5;
  stroke-width: 1.4;
}
.my-map__pos {
  fill: var(--sc-accent);
  filter: drop-shadow(0 0 4px rgba(240, 168, 96, 0.8));
}

.my-map__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}
.my-map__list button {
  font-family: var(--sc-font-text);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--sc-ink-soft);
  background: none;
  border: 0;
  padding: 0.28rem 0.2rem;
  cursor: pointer;
  transition: color 140ms var(--sc-ease-out);
}
.my-map__list button:hover { color: var(--sc-ink); }
.my-map__list button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-radius: 2px; }
.my-map__list button[aria-current="true"] { color: var(--sc-accent); }

@media (max-width: 860px) {
  .my-map__svg { display: none; }
  .my-map { top: auto; bottom: 1.1rem; right: 1rem; }
  .my-map__list { flex-direction: row; gap: 0.6rem; }
  .my-map__list button { font-size: 0.62rem; letter-spacing: 0.05em; }
  .sc-world__copy .sc-copy { max-width: 88vw; }
  .my-dwell { top: 12vh; width: 88vw; }
  .my-begin-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 700px) {
  .my-hero h1 { font-size: var(--sc-t-2xl); }
}

/* ---- shot modes --------------------------------------------------------- */

body.is-poster .sc-world__copy,
body.is-poster .my-map,
body.is-poster .my-mark { display: none; }