/* danieltstephens.com · one continuous scroll (filmic one-shot) on the scrollcraft floor.
   The page lives in the dark family and comes up into daylight at the close (Dan's ruling).
   Grounds travel by drift (data-sc-drift on each act); the paper colour is the type until the close. */

:root {
  --sc-canvas:     #1C130E;   /* library brown: the first drift stop, so nothing flashes */
  --sc-surface:    #26190F;
  --sc-ink:        #F0E6D8;   /* the paper, as the type */
  --sc-ink-soft:   #BBA58F;
  --sc-accent:     #3B8BFF;   /* the bright stop of the one blue, for dark grounds */
  --sc-accent-ink: #07101C;
  --sc-shadow-color: 28 30% 6%;
  --sc-edge: inset 0 1px 0 rgba(255,255,255,0.08);

  --sc-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono:    "Lato", system-ui, sans-serif;

  /* Playfair is a high-contrast serif: tracking a shade looser than the sans default,
     leading a shade taller so ascenders and ball terminals are not clipped. */
  --sc-track-tight: -0.018em;
  --sc-track-snug:  -0.01em;
  --sc-leading-none: 1.02;
  --sc-leading-tight: 1.1;
  --sc-leading-body: 1.7;          /* light type on dark: a touch more leading */
  --sc-measure: 60ch;
  --sc-r-sm: 3px; --sc-r-md: 4px; --sc-r-lg: 6px;

  --paper: #E3DACB;
  --blue-deep: #1D4ED8;            /* the deep stop, for the paper close and the peak's ground light */
}

html { background: #1C130E; }
body { background: var(--sc-canvas); letter-spacing: 0.004em; }
.sc-display { font-weight: 400; }
a { color: var(--sc-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 700; color: var(--sc-ink); }
cite { font-style: italic; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }

/* ---- the bar ---- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sc-5);
  padding: clamp(0.9rem, 2.2vh, 1.4rem) var(--sc-gutter);
  color: var(--sc-ink);
  transition: color 320ms var(--sc-ease-out);
}
.bar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.bar__mark { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); letter-spacing: -0.005em; }
.bar__cta { font-size: var(--sc-t-sm); letter-spacing: 0.04em; text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.bar__cta:hover { text-decoration-thickness: 2px; }
/* each item re-inks on its own once the paper of the close is under it (page.js); over the photograph it stays light */
.bar a { transition: color 320ms var(--sc-ease-out), text-decoration-color 320ms; }
.bar a.is-dark { color: #2A1F17; --sc-accent: var(--blue-deep); }
/* the close's copy scrolling under the bar (phones, short windows): the bar steps aside */
.bar { transition: color 320ms var(--sc-ease-out), opacity 240ms var(--sc-ease-out); }
.bar.is-gone { opacity: 0; pointer-events: none; }

/* ---- 1 · the shelf (hero) ---- */
/* The copy sits in the frame's empty upper-left third (the still was composed for it); the lamp is
   centre-lower, so the headline never crosses it. A corner scrim of its own, aimed top-left. */
.hero__copy { left: var(--sc-gutter); top: clamp(6.5rem, 17vh, 10rem); max-width: min(46rem, 70vw); }
.hero__scrim {
  background: linear-gradient(to bottom right,
    color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 82%, transparent) 26%,
    color-mix(in oklab, var(--sc-canvas) 48%, transparent) 50%,
    color-mix(in oklab, var(--sc-canvas) 14%, transparent) 66%,
    transparent 80%);
}
.hero__title { font-weight: 400; font-size: clamp(2.6rem, 1.6rem + 5.2vw, 6.4rem); line-height: 1.02; letter-spacing: -0.02em; max-width: 14ch; }
.hero__lede { margin: var(--sc-5) 0 0; font-size: var(--sc-t-lg); line-height: 1.45; max-width: 30ch; color: var(--sc-ink); }

/* ---- 2 · the shelf becomes names (pan) ---- */
.shelf { display: flex; align-items: flex-end; padding-bottom: clamp(3rem, 9vh, 6rem); }
.shelf__rail { align-items: flex-end; padding-inline: var(--sc-gutter); border-bottom: 1px solid var(--sc-hairline-strong); }
.spine {
  flex: 0 0 auto; width: clamp(10.5rem, 12vw, 12.5rem); min-height: min(62svh, 34rem);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: var(--sc-5) var(--sc-4) var(--sc-5) var(--sc-5);
  border-left: 1px solid var(--sc-hairline-strong);
  margin: 0;
}
.spine > * { margin: 0; }
.spine__name { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-lg); line-height: 1.15; letter-spacing: -0.005em; color: var(--sc-ink); }
.spine__title { margin-top: var(--sc-3); font-family: var(--sc-font-display); font-size: var(--sc-t-base); line-height: 1.3; color: var(--sc-ink); }
.spine__date { margin-top: var(--sc-3); font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); }
.spine__gloss { margin-top: auto; padding-top: var(--sc-5); font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink-soft); }
.spine--lead, .spine--close { width: clamp(20rem, 30vw, 28rem); justify-content: flex-end; border-left: 0; }
.spine--close { border-left: 1px solid var(--sc-hairline-strong); padding-left: var(--sc-7); }
.spine__lead { font-family: var(--sc-font-display); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); line-height: 1.4; color: var(--sc-ink); max-width: 30ch; }
.spine--caption { width: clamp(14rem, 18vw, 18rem); justify-content: flex-end; }
.spine__caption { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--sc-ink); }
/* the books settle in as the hand travels: driven from the act's --sc-p, first item exempt,
   floored at 0.55 so an unsettled spine reads as arriving, not as failing to load */
@media (prefers-reduced-motion: no-preference) {
  .shelf__rail > .spine { opacity: calc(0.55 + 0.45 * clamp(0, (var(--sc-p, 0) - var(--i, 0) * 0.052 + 0.10) * 7, 1)); }
  .shelf__rail > .spine--lead { opacity: 1; }
}

/* ---- 3 · the soul (pin) ---- */
.soul { display: flex; align-items: center; }
.soul__lamp { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 34% at 50% 76%, rgba(228, 178, 96, 0.13), transparent 72%); }
.soul__grid { position: relative; display: grid; align-items: center; }
.soul__lines, .soul__copy { grid-area: 1 / 1; }
.soul__lines { max-width: 44rem; margin-inline: auto; }
.soul__line { margin: 0; font-family: var(--sc-font-display); font-weight: 400;
  font-size: clamp(1.3rem, 1rem + 1.35vw, 2.15rem); line-height: 1.25; letter-spacing: -0.005em; color: var(--sc-ink); }
.soul__line + .soul__line { margin-top: clamp(1rem, 2.6vh, 1.75rem); }
.soul__ref { display: inline-block; margin-left: var(--sc-3); font-family: var(--sc-font-text); font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); vertical-align: 0.25em; }
.soul__copy { display: grid; }
.soul__para { grid-area: 1 / 1; margin: 0; max-width: 58ch; margin-inline: auto; font-size: var(--sc-t-base); line-height: 1.7; color: var(--sc-ink); }
.soul__para em { color: var(--sc-ink); }

/* ---- 4 · the bench (flow) ---- */
.bench { position: relative; overflow-x: clip; }
.bench__figure { position: sticky; top: 0; height: 100vh; height: 100svh; margin: 0; overflow: clip;
  /* the photograph is masked away from the copy column: type sits on the ground, never on the picture */
  -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 60%);
  mask-image: linear-gradient(to right, transparent 30%, #000 60%);
}
.bench__figure img { position: absolute; inset: -4% 0; width: 100%; height: 108%; object-fit: cover; object-position: 60% 50%; }
.bench__wrap { position: relative; margin-top: -100vh; margin-top: -100svh; padding-block: clamp(6rem, 16vh, 10rem) clamp(5rem, 12vh, 9rem); min-height: 100svh; display: grid; align-items: center; }
.bench__copy { max-width: min(30rem, 42%); }
.bench__lede { margin: 0; font-family: var(--sc-font-display); font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2.1rem); line-height: 1.28; letter-spacing: -0.005em; color: var(--sc-ink); max-width: 26ch; }
.bench__copy .sc-body { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.7; }
.bench__copy > .sc-body { margin-top: var(--sc-5); }
.bench__last { margin: var(--sc-6) 0 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.35; color: var(--sc-ink); max-width: 28ch; }

/* ---- 5 · silence ---- */
.silence { height: 50vh; height: 50svh; }

/* ---- 6 · the bridge (pin, the peak) ---- */
#a-bridge { --sc-ink-soft: #A9B4C6; }
.bridge { display: flex; align-items: center; }
.bridge__glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 46% at 50% 88%, color-mix(in oklab, var(--blue-deep) 34%, transparent), transparent 72%); }
.bridge__grid { position: relative; display: grid; align-items: center; }
.bridge__statement, .bridge__crossing { grid-area: 1 / 1; }
.bridge__statement { max-width: 46rem; margin-inline: auto; }
.bridge__title { font-weight: 400; font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.012em; max-width: 24ch; }
.bridge__para { margin: var(--sc-6) 0 0; max-width: 58ch; font-size: var(--sc-t-base); line-height: 1.7; color: var(--sc-ink); }
.bridge__crossing { max-width: 58rem; margin-inline: auto; width: 100%; }
.bridge__label { margin: 0 0 var(--sc-2); font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.2; letter-spacing: -0.005em; color: var(--sc-ink); }
.bridge__hint { margin: 0 0 var(--sc-4); font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.bridge__row { display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); border-top: 1px solid var(--sc-hairline-strong); padding-top: var(--sc-4); }
.thing {
  appearance: none; background: none; border: 0; border-bottom: 1px solid transparent; padding: var(--sc-2) 0; margin: 0;
  display: grid; text-align: left; min-height: 44px; cursor: pointer; color: var(--sc-ink);
  font-family: var(--sc-font-display); font-size: clamp(1.15rem, 1rem + 0.9vw, 1.7rem); line-height: 1.2; letter-spacing: -0.005em;
  transition: transform 380ms var(--sc-ease-out), border-color 380ms, opacity 380ms;
}
.thing > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity 460ms var(--sc-ease-out), transform 460ms var(--sc-ease-out), color 460ms; }
.thing__person { opacity: 0; transform: translateY(0.4em); color: var(--sc-accent); }
.thing.is-held { transform: translateY(0.45rem); border-bottom-color: var(--sc-ink); }
.thing.is-answered { transform: translateY(0.45rem); border-bottom-color: var(--sc-accent); }
.thing.is-answered .thing__text { opacity: 0; transform: translateY(-0.4em); }
.thing.is-answered .thing__person { opacity: 1; transform: none; }
.thing.is-dim { opacity: 0.5; }
.thing:hover { border-bottom-color: var(--sc-ink-soft); }
.thing:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 2px; }
.thing:active { transform: translateY(0.5rem); }
.bridge__text { margin-top: var(--sc-7); min-height: 9.5em; }
.bridge__verses { display: grid; }
.verse { grid-area: 1 / 1; margin: 0; font-family: var(--sc-font-display); font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); line-height: 1.25; color: var(--sc-accent); max-width: 34ch;
  opacity: 0; visibility: hidden; transform: translateY(0.3em);
  transition: opacity 720ms var(--sc-ease-out), transform 720ms var(--sc-ease-out), visibility 0s linear 720ms; }
.verse.is-lit { opacity: 1; visibility: visible; transform: none; transition: opacity 720ms var(--sc-ease-out), transform 720ms var(--sc-ease-out), visibility 0s; }
.verse__ref { display: inline-block; margin-left: var(--sc-3); font-family: var(--sc-font-text); font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); vertical-align: 0.25em; }
/* the last crossing lights all four: the same lines, now as a list */
.bridge__verses.is-all { grid-auto-rows: auto; row-gap: var(--sc-3); }
.bridge__verses.is-all .verse { grid-area: auto; font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem); }
.bridge__caption { margin: var(--sc-5) 0 0; font-style: italic; font-size: var(--sc-t-base); color: var(--sc-ink); min-height: 1.7em; opacity: 0; transition: opacity 600ms var(--sc-ease-out); }
.bridge__caption.is-on { opacity: 1; }

/* ---- 7 · three roads (flow) ---- */
.roads { padding-block: clamp(3rem, 7vh, 5rem) clamp(4rem, 10vh, 7rem); }
.roads__wrap { max-width: 46rem; margin-inline: auto; }
.roads__lede { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.25; letter-spacing: -0.005em; color: var(--sc-ink); max-width: 28ch; }
.roads__list { margin: var(--sc-7) 0 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.roads__list > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sc-4); padding: var(--sc-4) 0; border-bottom: 1px solid var(--sc-hairline); }
.roads__list dt { font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-lg); color: var(--sc-ink); margin: 0; }
.roads__list dd { margin: 0; color: var(--sc-ink-soft); }
.roads__series { display: block; margin-top: var(--sc-2); font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.roads__wall { margin: var(--sc-6) 0 0; font-size: var(--sc-t-sm); line-height: 1.7; color: var(--sc-ink-soft); max-width: 58ch; }

/* ---- 8 · the trail (close, on paper) ---- */
.close {
  --sc-canvas: var(--paper); --sc-surface: #EDE5D8; --sc-ink: #2A1F17; --sc-ink-soft: #6A5947;
  --sc-accent: var(--blue-deep); --sc-accent-ink: #F5F0E8; --sc-leading-body: 1.62;
  --sc-edge: inset 0 1px 0 rgba(255,255,255,0.55); --sc-shadow-color: 28 30% 10%;
  color: var(--sc-ink); letter-spacing: 0;
  /* the stage paints its own paper, soft at the very top so it rises out of the dusty brown
     rather than cutting into it; the page ground beneath drifts to paper as the close pins */
  background: linear-gradient(to bottom, color-mix(in oklab, var(--paper) 62%, transparent) 0, var(--paper) 16%);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center;
}
.close[data-sc-spotlight]::after {
  background: radial-gradient(30rem 30rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    color-mix(in oklab, var(--blue-deep) 9%, transparent), transparent 70%);
}
.close__figure { margin: 0; height: 100%; min-height: 0; overflow: clip; grid-column: 1; grid-row: 1; align-self: stretch; }
.close__figure img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 50%; }
.close__inner { grid-column: 2; grid-row: 1; padding: clamp(4.5rem, 10vh, 6rem) var(--sc-gutter) clamp(1.25rem, 3vh, 2rem) clamp(2rem, 4vw, 3.5rem); max-width: 56rem; }
.close__lede { margin: 0; font-family: var(--sc-font-display); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); line-height: 1.32; letter-spacing: -0.005em; color: var(--sc-ink); max-width: 36ch; }
.close__body { margin: var(--sc-3) 0 0; font-size: var(--sc-t-sm); line-height: 1.58; color: var(--sc-ink-soft); max-width: 64ch; }
.close__ask { margin: var(--sc-5) 0 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.35; color: var(--sc-ink); max-width: 40ch; }
.close__go { margin: var(--sc-3) 0 0; }
.close__cta { display: inline-block; padding: 0.55em 1.1em; background: var(--blue-deep); color: var(--sc-accent-ink); text-decoration: none;
  font-family: var(--sc-font-text); font-size: var(--sc-t-sm); letter-spacing: 0.04em; border-radius: var(--sc-r-md); box-shadow: var(--sc-e1), var(--sc-edge);
  transition: box-shadow 160ms var(--sc-ease-out), filter 160ms; }
.close__cta:hover { box-shadow: var(--sc-e2), var(--sc-edge); filter: brightness(1.06); }
.close__cta:active { filter: brightness(0.96); }
.close__support { margin: var(--sc-5) 0 0; font-size: var(--sc-t-sm); line-height: 1.58; color: var(--sc-ink-soft); max-width: 64ch; }
.close__support a { color: var(--sc-accent); font-weight: 700; text-decoration-thickness: 1px; }
.close__who { display: flex; gap: var(--sc-4); align-items: center; margin-top: var(--sc-5); }
.close__portrait { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--sc-r-sm); box-shadow: var(--sc-e1); flex: 0 0 auto; }
.close__bio { margin: 0; font-size: var(--sc-t-xs); line-height: 1.55; color: var(--sc-ink-soft); max-width: 40ch; }
.close__bio strong { color: var(--sc-ink); }
.close__notes { margin-top: var(--sc-4); padding-top: var(--sc-3); border-top: 1px solid var(--sc-hairline); }
.close__notes p { margin: 0; font-size: var(--sc-t-xs); line-height: 1.5; color: var(--sc-ink-soft); max-width: 72ch; }
.close__notes p + p { margin-top: var(--sc-1); }
.close__foot { display: flex; gap: var(--sc-5); margin-top: var(--sc-4); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: 0.04em; }
.close__foot a { color: var(--sc-ink-soft); }
/* when the copy is taller than the viewport (phones, short windows) page.js lets the stage grow and the
   act hold for a beat before the whole close scrolls; the pin becomes a threshold instead of a frame */
.close.close--tall { height: auto; min-height: 100svh; overflow: visible; }

/* ---- states ---- */
a:active { transform: translateY(1px); }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .thing, .thing > span, .verse, .bridge__caption { transition: none; }
  .thing.is-held, .thing.is-answered, .thing:active { transform: none; }
  .bar { transition: none; }
}

/* ---- short desktop windows ---- */
@media (min-width: 861px) and (max-height: 820px) {
  .close__inner { padding-top: clamp(4rem, 9vh, 5.5rem); }
  .close__lede { font-size: var(--sc-t-lg); }
  .close__body, .close__support { font-size: var(--sc-t-xs); line-height: 1.55; }
  .close__who { margin-top: var(--sc-5); }
  .soul__line { font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); }
}

/* ---- phones and narrow screens ---- */
@media (max-width: 860px) {
  .bar__mark { font-size: var(--sc-t-base); }
  .hero__copy { top: clamp(5.5rem, 14svh, 8rem); }
  .hero__scrim { background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 66%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 24%, transparent) 50%,
    transparent 64%); }
  .hero__title { font-size: clamp(2.1rem, 1.4rem + 5.6vw, 3rem); max-width: 12ch; }
  .hero__lede { font-size: var(--sc-t-base); max-width: 34ch; }
  .shelf { padding-bottom: clamp(2.5rem, 7svh, 4rem); }
  .spine { width: clamp(11rem, 58vw, 14rem); min-height: min(58svh, 30rem); padding: var(--sc-4) var(--sc-3) var(--sc-4) var(--sc-4); }
  .spine--lead, .spine--close { width: min(80vw, 22rem); }
  .spine--caption { width: min(60vw, 16rem); }
  .soul__line { font-size: clamp(1.05rem, 0.95rem + 1.2vw, 1.35rem); }
  .soul__line + .soul__line { margin-top: var(--sc-4); }
  .soul__para { font-size: var(--sc-t-sm); }
  .soul__grid { padding-top: 3.5rem; }
  .bench__figure { position: relative; height: 54svh;
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 68%, transparent 100%); }
  .bench__wrap { margin-top: -6svh; padding-block: 0 clamp(4rem, 10vh, 6rem); min-height: 0; }
  .bench__copy { max-width: none; }
  .bridge { align-items: flex-start; }
  .bridge__grid { padding-top: clamp(4rem, 10svh, 6rem); }
  .bridge__title { font-size: clamp(1.6rem, 1.2rem + 2.4vw, 2.2rem); }
  .bridge__para { font-size: var(--sc-t-sm); }
  .bridge__row { gap: var(--sc-2) var(--sc-5); }
  .thing { font-size: var(--sc-t-lg); }
  .bridge__text { margin-top: var(--sc-6); min-height: 8em; }
  .verse { font-size: var(--sc-t-lg); }
  .roads__list > div { grid-template-columns: minmax(0, 1fr); gap: var(--sc-1); }
  .close { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; }
  .close__figure { grid-column: 1; grid-row: 1; height: 38svh; }
  .close__inner { grid-column: 1; grid-row: 2; padding: var(--sc-6) var(--sc-gutter) var(--sc-6); max-width: none; }
  .close__lede { font-size: var(--sc-t-lg); }
}