/* ============================================================
   LAYOUT — the drawing set: rail, sheet frame, sheet rhythm.

   Sheet spacing comes only from the --sheet-pad-* variables on
   the .sheet class. Nothing else sets section padding, so there
   is no specificity war between .sheet and element selectors.
   ============================================================ */

/* ---- Ambient layer ----------------------------------------- */

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: var(--z-atmosphere);
  pointer-events: none;
  /* This gradient is the WebGL fallback. If the shader runs it
     paints over the top; if it cannot, the page still has depth. */
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(76, 125, 255, 0.13), transparent 58%),
    radial-gradient(90% 70% at 12% 88%, rgba(76, 125, 255, 0.07), transparent 62%),
    var(--graphite-900);
}

.atmosphere__canvas {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
}

.atmosphere__canvas.is-live { opacity: 1; }

/* Pulls the eye toward the centre and keeps the rail legible
   over whatever the shader is doing behind it. */
.atmosphere__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 100% at 50% 45%, transparent 42%, rgba(9, 10, 14, 0.72) 100%),
    linear-gradient(90deg, rgba(9, 10, 14, 0.85) 0%, transparent 14%);
}

/* ---- Title-block rail -------------------------------------- */

.rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--rail-w);
  z-index: var(--z-rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5) 0;
  border-right: var(--hair) solid var(--vellum-line);
  background: linear-gradient(180deg,
    rgba(18, 20, 26, 0.82),
    rgba(18, 20, 26, 0.62));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.rail__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--hair) solid var(--vellum-line-strong);
  border-radius: var(--radius-sm);
}

.rail__initials {
  color: var(--cyanotype);
  font-size: var(--t-caption);
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* Sheet ticks. Numbers only — the label appears on hover, which
   keeps the rail as quiet as a real title block. */
.rail__nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.rail__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  color: var(--slate-600);
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease-out);
}

.rail__link::before {
  content: "";
  width: 10px;
  height: var(--hair);
  background: currentColor;
  transition: width var(--dur) var(--ease-out);
}

.rail__link:hover { color: var(--chalk); }
.rail__link:hover::before { width: 16px; }

.rail__link.is-active {
  color: var(--cyanotype);
}

.rail__link.is-active::before {
  width: 20px;
  background: var(--cyanotype);
}

.rail__num {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Hover label, drawn as a leader callout pointing back at the
   tick it belongs to. */
.rail__label {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translate(-6px, -50%);
  padding: var(--s-2) var(--s-3);
  white-space: nowrap;
  background: var(--graphite-800);
  border: var(--hair) solid var(--vellum-line);
  border-radius: var(--radius-sm);
  color: var(--chalk);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--lift-2);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}

.rail__link:hover .rail__label,
.rail__link:focus-visible .rail__label {
  opacity: 1;
  transform: translate(0, -50%);
}

.rail__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}

/* Scroll position as a dimension: witness marks at both ends,
   a line between them, and a fill that grows. Reads as a
   measurement rather than a loading bar. */
.rail__dim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.rail__dim-tick {
  width: 9px;
  height: var(--hair);
  background: var(--slate-700);
}

.rail__dim-line {
  position: relative;
  width: var(--hair);
  height: 88px;
  background: var(--graphite-600);
  overflow: hidden;
}

.rail__dim-fill {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0%;
  background: var(--cyanotype);
  box-shadow: 0 0 8px var(--cyanotype-glow);
}

.rail__meta {
  color: var(--slate-600);
  writing-mode: vertical-rl;
  letter-spacing: 0.12em;
}

.rail__meta--rev { color: var(--slate-700); }

/* ---- Mobile navigation ------------------------------------- */

.menu-toggle {
  position: fixed;
  top: var(--s-4);
  right: var(--s-4);
  z-index: var(--z-nav);
  display: none;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  color: var(--chalk);
  background: rgba(22, 25, 32, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: var(--hair) solid var(--vellum-line);
  border-radius: var(--radius);
}

.menu-toggle__bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 16px;
}

.menu-toggle__bars i {
  height: var(--hair);
  background: currentColor;
  transition: transform var(--dur) var(--ease-out);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:first-child {
  transform: translateY(2.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:last-child {
  transform: translateY(-2.5px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-1);
  padding: var(--s-8) var(--s-5);
  background: rgba(14, 16, 21, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}

.mobile-nav.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-2);
  border-bottom: var(--hair) solid var(--vellum-line);
  color: var(--chalk);
}

.mobile-nav__link .rail__num { color: var(--cyanotype); }

.mobile-nav__title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 112, "wght" 700;
  font-size: var(--t-h4);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
}

/* ---- The set ----------------------------------------------- */

.set {
  position: relative;
  z-index: var(--z-content);
  margin-left: var(--rail-w);
}

/* Crop marks at opposing corners. Two corners is enough to read
   as a drawing border without boxing the content in. */
.set::before,
.set::after {
  content: "";
  position: fixed;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: var(--z-content);
  opacity: 0.5;
}

.set::before {
  top: 16px;
  left: calc(var(--rail-w) + 16px);
  border-top: var(--hair) solid var(--vellum-line-strong);
  border-left: var(--hair) solid var(--vellum-line-strong);
}

.set::after {
  bottom: 16px;
  right: 16px;
  border-bottom: var(--hair) solid var(--vellum-line-strong);
  border-right: var(--hair) solid var(--vellum-line-strong);
}

/* ---- Sheet ------------------------------------------------- */

.sheet {
  position: relative;
  padding: var(--sheet-pad-y) var(--sheet-pad-x);
  max-width: calc(var(--sheet-max) + var(--sheet-pad-x) * 2);
  margin: 0 auto;
}

/* A hairline between sheets, inset to the content column so it
   reads as a sheet edge rather than a full-bleed divider. */
.sheet + .sheet::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--sheet-pad-x);
  right: var(--sheet-pad-x);
  height: var(--hair);
  background: linear-gradient(90deg,
    var(--vellum-line) 0%,
    var(--vellum-line) 22%,
    transparent 100%);
}

.sheet--hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--s-9);
  padding-bottom: var(--s-8);
}

.sheet__head {
  margin-bottom: var(--s-7);
}

/* Eyebrow: sheet number, a rule, and a right-hand annotation.
   Numbering is justified here because a drawing set genuinely is
   an ordered sequence — the number tells you where you are. */
.sheet__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  color: var(--slate-600);
}

.sheet__no { color: var(--cyanotype); }

.sheet__rule {
  flex: 1;
  height: var(--hair);
  background: linear-gradient(90deg, var(--vellum-line), transparent);
  max-width: 320px;
}

.sheet__count { color: var(--slate-700); }

.sheet__title {
  font-size: var(--t-h2);
  color: var(--chalk);
  margin-bottom: var(--s-4);
}

.sheet__lede {
  max-width: 58ch;
  color: var(--slate-500);
}

.noscript {
  padding: var(--s-9) var(--sheet-pad-x);
  max-width: 60ch;
  color: var(--chalk-dim);
}

.noscript a { color: var(--cyanotype); }

/* ---- Footer ------------------------------------------------ */

.set-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-6) var(--sheet-pad-x) var(--s-7);
  max-width: calc(var(--sheet-max) + var(--sheet-pad-x) * 2);
  margin: 0 auto;
  border-top: var(--hair) solid var(--vellum-line);
  color: var(--slate-700);
}

/* ============================================================
   RESPONSIVE
   The rail is the first thing to go: below 900px it becomes a
   top-right toggle and a full-screen sheet index.
   ============================================================ */

@media (max-width: 900px) {
  :root { --rail-w: 0px; }

  .rail { display: none; }
  .menu-toggle { display: flex; }
  .mobile-nav { display: flex; }

  .set { margin-left: 0; }
  .set::before { left: 16px; }

  .atmosphere__vignette {
    background: radial-gradient(130% 100% at 50% 45%,
      transparent 42%, rgba(9, 10, 14, 0.72) 100%);
  }
}

@media (max-width: 560px) {
  .set::before,
  .set::after { display: none; }

  .sheet__eyebrow { gap: var(--s-3); }
  .sheet__rule { display: none; }
}