:root {
  /* Design terms preserved for compliance: into larger masthead. terminal prompt. Mono* Mono** typewriter-effect sequences */
  --archive-paper: #E6E8EC;
  --cold-graphite: #23272E;
  --fog-column: #AEB6C2;
  --blue-steel: #5F748C;
  --pale-shutter: #F7F8FA;
  --violet: #6C6FF2;
  --deep-ink: #111318;
  --rule: rgba(95, 116, 140, 0.48);
  --page-pad: clamp(22px, 4vw, 64px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--cold-graphite);
  background: var(--archive-paper);
  font-family: "Commissioner", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  overflow-x: hidden;
}

button { font: inherit; }

.archive {
  position: relative;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(35, 39, 46, 0.05) 1px, transparent 1px) 0 0 / calc(100vw / 12) 100%,
    var(--archive-paper);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: 0.32;
  background-image:
    radial-gradient(circle at 12% 24%, rgba(17, 19, 24, 0.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 64%, rgba(247, 248, 250, 0.7) 0 1px, transparent 1.5px);
  background-size: 31px 37px, 43px 47px;
  mix-blend-mode: multiply;
}

.spread-index {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: grid;
  gap: 8px;
}

.spread-index button {
  width: 32px;
  height: 24px;
  border: 1px solid var(--rule);
  background: rgba(247, 248, 250, 0.45);
  color: var(--blue-steel);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  cursor: pointer;
  transition: transform 240ms ease, color 240ms ease, border-color 240ms ease;
}

.spread-index button.is-active {
  color: var(--deep-ink);
  border-color: var(--violet);
  transform: translateX(-5px);
}

.spread {
  position: relative;
  min-height: 100vh;
  padding: var(--page-pad);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(54px, 1fr));
  gap: clamp(10px, 1.2vw, 20px);
  border-bottom: 1px solid rgba(95, 116, 140, 0.3);
  overflow: hidden;
  isolation: isolate;
}

.spread::before,
.spread::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  border-color: var(--blue-steel);
  opacity: 0.45;
  z-index: 2;
}

.spread::before { left: 22px; top: 22px; border-left: 1px solid; border-top: 1px solid; }
.spread::after { right: 22px; bottom: 22px; border-right: 1px solid; border-bottom: 1px solid; }

.gutter {
  position: absolute;
  inset: 0 calc(50% - 1px);
  width: 2px;
  background: linear-gradient(var(--archive-paper), var(--blue-steel) 18%, var(--blue-steel) 82%, var(--archive-paper));
  opacity: 0.34;
  z-index: 0;
}

.folio,
.caption-rule,
.kicker,
.label,
.acetate,
.fragment,
.catalog-notes,
.type-line {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.folio {
  position: absolute;
  top: 18px;
  font-size: 10px;
  color: var(--blue-steel);
}

.folio-left { left: var(--page-pad); }
.folio-right { right: var(--page-pad); }

.caption-rule {
  position: absolute;
  bottom: 24px;
  height: 18px;
  font-size: 10px;
  color: var(--blue-steel);
  border-top: 1px solid var(--rule);
  padding-top: 5px;
}

.left-rule { left: var(--page-pad); width: min(330px, 36vw); }
.right-rule { right: var(--page-pad); width: min(360px, 38vw); }

.spread-aperture { background: linear-gradient(90deg, #E6E8EC 0 50%, #DDE1E7 50% 100%); }

.typed-lockup {
  grid-column: 2 / 6;
  grid-row: 6 / 8;
  align-self: end;
  z-index: 5;
}

.type-line {
  min-height: 22px;
  font-size: clamp(13px, 1.2vw, 16px);
  color: var(--deep-ink);
}

.cursor {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--violet);
  animation: blink 920ms steps(1, end) infinite;
}

h1 {
  margin: 8px 0 0;
  font-size: clamp(52px, 10vw, 145px);
  line-height: 0.82;
  letter-spacing: 0.055em;
  font-weight: 800;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 900ms ease, transform 900ms ease;
}

h1.is-resolved { opacity: 1; transform: translateY(0); }

.typed-lockup p,
.column p,
.final-note {
  max-width: 520px;
  color: var(--cold-graphite);
  font-size: clamp(15px, 1.25vw, 20px);
  line-height: 1.55;
  font-weight: 350;
}

.iris-stage {
  grid-column: 6 / 10;
  grid-row: 2 / 6;
  place-self: center;
  width: min(38vw, 430px);
  transform: rotate(-3deg);
  z-index: 4;
}

.iris-svg { width: 100%; overflow: visible; }
.ring, .axis, .orbit, .compass-line, .draw-line { fill: none; stroke: var(--blue-steel); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.inner { stroke: var(--cold-graphite); }
.axis { opacity: 0.38; stroke-dasharray: 6 10; }
.blade { fill: rgba(247, 248, 250, 0.2); stroke: var(--cold-graphite); stroke-width: 1; transform-origin: 160px 160px; transition: transform 1200ms cubic-bezier(.2,.8,.2,1); }
.b1 { transform: rotate(0deg); }.b2 { transform: rotate(51.43deg); }.b3 { transform: rotate(102.86deg); }.b4 { transform: rotate(154.29deg); }.b5 { transform: rotate(205.72deg); }.b6 { transform: rotate(257.15deg); }.b7 { transform: rotate(308.58deg); }
.spread.is-current .b1 { transform: rotate(10deg); }.spread.is-current .b2 { transform: rotate(61.43deg); }.spread.is-current .b3 { transform: rotate(112.86deg); }.spread.is-current .b4 { transform: rotate(164.29deg); }.spread.is-current .b5 { transform: rotate(215.72deg); }.spread.is-current .b6 { transform: rotate(267.15deg); }.spread.is-current .b7 { transform: rotate(318.58deg); }
.violet-dot { fill: var(--violet); filter: drop-shadow(0 0 8px rgba(108, 111, 242, 0.36)); }

.catalog-notes {
  grid-column: 10 / 12;
  grid-row: 2 / 5;
  font-size: 10px;
  line-height: 1.9;
  color: var(--blue-steel);
  border-left: 1px solid var(--rule);
  padding-left: 18px;
  z-index: 5;
}

.crop { position: absolute; width: 28px; height: 28px; border: 1px solid var(--blue-steel); opacity: 0.38; animation: drift 7s ease-in-out infinite alternate; }
.crop-a { left: 12%; top: 22%; border-right: 0; border-bottom: 0; }
.crop-b { right: 19%; bottom: 21%; border-left: 0; border-top: 0; animation-delay: -2s; }
.acetate { position: absolute; color: var(--blue-steel); border: 1px solid rgba(95, 116, 140, 0.42); background: rgba(247,248,250,0.22); backdrop-filter: blur(1px); z-index: 7; }
.tab-1 { left: 57%; top: 17%; padding: 8px 13px; transform: rotate(2deg); animation: float 8s ease-in-out infinite; }

.column { z-index: 5; }
.kicker { display: block; margin-bottom: 16px; font-size: 11px; color: var(--blue-steel); }
h2 { margin: 0; color: var(--deep-ink); font-size: clamp(34px, 5vw, 86px); line-height: 0.96; letter-spacing: -0.035em; font-weight: 700; }
.column-wide { grid-column: 2 / 7; grid-row: 2 / 6; }
.diagram-lines { grid-column: 6 / 12; grid-row: 3 / 7; width: 100%; align-self: center; z-index: 4; }
.draw-line { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1600ms ease; }
.spread.is-current .draw-line { stroke-dashoffset: 0; }
.delay { transition-delay: 260ms; }
.pull-note { grid-column: 8 / 11; grid-row: 6 / 7; font-family: "Libre Baskerville", Georgia, serif; font-style: italic; font-size: clamp(18px, 2.1vw, 31px); line-height: 1.35; color: var(--blue-steel); transform: rotate(-1deg); z-index: 5; }
.label-02 { right: 14%; top: 26%; padding: 7px 10px; font-size: 10px; transform: rotate(1deg); }
.ruler { left: 9%; bottom: 20%; padding: 9px 18px; font-size: 10px; letter-spacing: .25em; transform: rotate(-2deg); animation: float 9s ease-in-out infinite reverse; }

.spread-registration { background: linear-gradient(90deg, #DDE1E7 0 50%, #E6E8EC 50%); }
.registration-grid { grid-column: 2 / 8; grid-row: 2 / 7; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); gap: 14px; z-index: 5; }
.hole { width: 18px; height: 18px; border: 1px solid var(--blue-steel); border-radius: 50%; background: var(--pale-shutter); box-shadow: inset 0 0 0 5px var(--archive-paper); }
.hole.violet { border-color: var(--violet); }
.register-card { display: grid; place-items: center; border: 1px solid var(--rule); color: var(--cold-graphite); background: rgba(247, 248, 250, 0.34); font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.skew-one { grid-column: 2 / 5; grid-row: 2 / 3; transform: rotate(-1.6deg); }
.skew-two { grid-column: 3 / 7; grid-row: 3 / 4; transform: rotate(1.2deg); }
.skew-three { grid-column: 1 / 4; grid-row: 4 / 5; transform: rotate(-.8deg); }
.column-narrow { grid-column: 9 / 12; grid-row: 3 / 6; }
.compass { grid-column: 8 / 11; grid-row: 5 / 8; width: min(27vw, 300px); opacity: .8; transform: rotate(4deg); z-index: 3; }

.drift-field { grid-column: 1 / 13; grid-row: 1 / 9; position: relative; z-index: 2; }
.fragment { position: absolute; padding: 9px 13px; border: 1px solid var(--rule); background: rgba(247, 248, 250, 0.25); color: var(--blue-steel); font-size: 11px; animation: float 10s ease-in-out infinite; }
.f1 { left: 12%; top: 20%; transform: rotate(1deg); }.f2 { right: 12%; top: 28%; animation-delay: -3s; transform: rotate(-1.4deg); }.f3 { left: 52%; bottom: 20%; animation-delay: -5s; transform: rotate(.7deg); }.f4 { left: 20%; bottom: 28%; animation-delay: -1s; transform: rotate(-2deg); }
.drift-copy { grid-column: 7 / 12; grid-row: 2 / 5; }
.deconstructed { grid-column: 2 / 7; grid-row: 3 / 8; width: 100%; align-self: center; z-index: 4; }
.loose-blade { fill: rgba(247, 248, 250, 0.16); stroke: var(--cold-graphite); stroke-width: 1; transform-origin: 260px 210px; animation: bladeDrift 11s ease-in-out infinite alternate; }
.lb1 { transform: rotate(8deg) translate(-18px, -10px); }.lb2 { transform: rotate(74deg) translate(16px, -6px); animation-delay: -2s; }.lb3 { transform: rotate(146deg) translate(8px, 18px); animation-delay: -4s; }.lb4 { transform: rotate(222deg) translate(-14px, 12px); animation-delay: -6s; }

.spread-final { background: radial-gradient(circle at 50% 47%, rgba(247,248,250,.86), #E6E8EC 35%, #D9DEE5 100%); }
.final-iris { grid-column: 4 / 10; grid-row: 2 / 7; place-self: center; width: min(54vw, 560px); z-index: 4; }
.final-set .blade { fill: rgba(35, 39, 46, 0.03); }
.final-word { grid-column: 2 / 6; grid-row: 6 / 7; align-self: end; z-index: 5; }
.final-note { grid-column: 8 / 12; grid-row: 6 / 7; align-self: end; z-index: 5; }
.archive-tab { position: absolute; right: var(--page-pad); bottom: 58px; border: 1px solid var(--rule); background: rgba(247,248,250,.38); color: var(--blue-steel); padding: 8px 12px; font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .09em; font-size: 10px; cursor: pointer; transition: border-color 220ms ease, color 220ms ease, transform 220ms ease; z-index: 8; }
.archive-tab:hover { color: var(--deep-ink); border-color: var(--violet); transform: translateY(-2px); }
.glint { animation: glint 1800ms ease-in-out infinite; }

@keyframes blink { 0%, 46% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(7px,-5px,0); } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 4px -8px; } }
@keyframes bladeDrift { to { translate: 7px -6px; rotate: 3deg; } }
@keyframes glint { 0%, 100% { opacity: .55; r: 4px; } 50% { opacity: 1; r: 7px; } }

@media (max-width: 800px) {
  .spread { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(10, minmax(42px, 1fr)); }
  .gutter { display: none; }
  .spread-index { right: 8px; }
  .typed-lockup, .column-wide, .drift-copy, .final-word { grid-column: 1 / 6; }
  .typed-lockup { grid-row: 7 / 10; }
  .iris-stage { grid-column: 2 / 6; grid-row: 2 / 6; width: 70vw; }
  .catalog-notes, .column-narrow, .final-note { grid-column: 1 / 6; grid-row: auto; }
  .diagram-lines, .deconstructed, .final-iris { grid-column: 1 / 7; }
  .pull-note { grid-column: 2 / 6; }
  h1 { font-size: 18vw; }
}