*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
  transition: background-color 1.2s var(--ease), color 1.2s var(--ease);
}
img, svg, picture { display: block; max-width: 100%; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* --- editorial primitives ---------------------------------------------- */
.serif { font-family: var(--serif); font-weight: 300; line-height: .93; letter-spacing: -.012em; }
.d1 { font-family: var(--serif); font-weight: 300; font-size: var(--d1); line-height: .88; letter-spacing: -.018em; }
.d2 { font-family: var(--serif); font-weight: 300; font-size: var(--d2); line-height: .92; letter-spacing: -.014em; }
.d3 { font-family: var(--serif); font-weight: 300; font-size: var(--d3); line-height: 1.0;  letter-spacing: -.01em; }

/* the annotation voice of an architectural drawing */
.label {
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.label--ink { color: var(--ink); }
.copy { max-width: 34ch; color: var(--ink-2); line-height: 1.65; }
.copy p + p { margin-top: .8em; }

/* a rule is a wall seen from above: one hairline, never a border-box */
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.vrule { width: 1px; background: var(--rule); }

/* --- the quiet button: a line that extends, an arrow that steps ---------- */
.line-cta {
  display: inline-flex;
  align-items: baseline;
  gap: .9em;
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding-bottom: .7em;
  position: relative;
  color: var(--ink);
}
.line-cta::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--rule-2);
  transform: scaleX(.34);
  transform-origin: 0 50%;
  transition: transform .7s var(--slow);
}
.line-cta .arrow { transition: transform .5s var(--slow); }
.line-cta:hover::before, .line-cta:focus-visible::before { transform: scaleX(1); }
.line-cta:hover .arrow, .line-cta:focus-visible .arrow { transform: translateX(.42em); }

/* a finger needs more than a baseline to hit; a mouse does not */
@media (max-width: 900px) {
  .line-cta { padding-block: .55em .95em; }
}
.line-cta--solid { padding: 1.05em 1.6em; border: 1px solid var(--rule-2); }
.line-cta--solid::before { display: none; }
.line-cta--solid { transition: background-color .5s var(--ease), color .5s var(--ease), letter-spacing .5s var(--ease); }
.line-cta--solid:hover, .line-cta--solid:focus-visible { background: var(--ink); color: var(--page); letter-spacing: .26em; }

/* --- focus: a drawn frame, visible on every ground ---------------------- */
:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}
.skip {
  position: fixed; top: -100px; left: var(--gut); z-index: 200;
  background: var(--ink); color: var(--page); padding: .9em 1.4em;
  font-size: var(--label); letter-spacing: .22em; text-transform: uppercase;
  transition: top .3s var(--ease);
}
.skip:focus { top: 1rem; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- scenes: a tall scroller with one sticky stage inside --------------- */
.scene { position: relative; }
.stage {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--page);
  transition: background-color 1.2s var(--ease);
}
.frame { position: absolute; inset: 0; overflow: hidden; }
/* <picture> is a block box that shrinks to its image, so a percentage height on
   the <img> inside it would resolve against nothing. Every full-bleed frame
   stretches the picture itself and lets the image cover it. */
.frame picture, .hero__photo picture, .night__frame picture { position: absolute; inset: 0; }
.frame img, .hero__photo img, .night__frame img { width: 100%; height: 100%; object-fit: cover; }

/* the plan-line overlay every stage can carry */
.plan-lines { position: absolute; inset: 0; pointer-events: none; }
.plan-lines line, .plan-lines rect, .plan-lines path {
  fill: none; stroke: rgba(251, 249, 244, .78); stroke-width: 1; vector-effect: non-scaling-stroke;
}

/* section shells for the non-scene chapters */
.band { padding: clamp(5rem, 12vh, 9rem) var(--gut); position: relative; }
.band--tight { padding-block: clamp(3.4rem, 7vh, 5.5rem); }