:root {
  --copper: #486B5A;
  --amber: #F2A84A;
  --ink: #251711;
  --violet: #332331;
  --parchment: #F2DFC8;
  --terracotta: #B65A3C;
  --display: "Playfair Display", Playfair, Georgia, serif;
  --body: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--parchment);
  font-family: var(--body);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: .23;
  background-image:
    radial-gradient(circle at 14% 17%, rgba(37, 23, 17, .12) 0 1px, transparent 1px),
    radial-gradient(circle at 73% 54%, rgba(182, 90, 60, .14) 0 1px, transparent 1px),
    linear-gradient(115deg, rgba(242, 223, 200, .05), rgba(51, 35, 49, .06));
  background-size: 19px 23px, 31px 29px, 100% 100%;
  mix-blend-mode: multiply;
}

.cursor-flare {
  position: fixed;
  left: 0;
  top: 0;
  width: 34vw;
  height: 34vw;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  z-index: 60;
  opacity: .42;
  background: radial-gradient(circle, rgba(242, 168, 74, .44) 0%, rgba(242, 168, 74, .16) 32%, rgba(182, 90, 60, .08) 47%, transparent 70%);
  filter: blur(12px);
  mix-blend-mode: screen;
}

.title-band {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 2rem;
  align-items: start;
  padding: 1.1rem 3.1vw .9rem;
  color: var(--parchment);
  background: linear-gradient(180deg, rgba(37, 23, 17, .86), rgba(37, 23, 17, .24) 74%, transparent);
}

.wordmark {
  font-family: var(--display);
  font-size: clamp(2rem, 5.8vw, 6rem);
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: .76;
  text-shadow: 0 0 28px rgba(242, 168, 74, .2);
}

.wordmark span { color: var(--amber); font-size: .28em; letter-spacing: -.01em; }

.archive-nav {
  display: grid;
  grid-template-columns: repeat(5, max-content);
  gap: .65rem 1.2rem;
  padding-top: .12rem;
  font-family: var(--mono);
  font-size: .68rem;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(242, 223, 200, .82);
}

.archive-nav a { border-bottom: 1px solid rgba(242, 168, 74, .35); padding-bottom: .28rem; }
.archive-nav a:hover { color: var(--amber); }

.runaway-rule {
  grid-column: 1 / -1;
  height: 1px;
  width: 118vw;
  background: linear-gradient(90deg, var(--terracotta), var(--amber), transparent);
  transform: translateX(-3.1vw);
}

.chapter {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
}

.parallax {
  --parallax-y: 0px;
  transform: var(--base-transform, translate3d(0, 0, 0)) translate3d(0, var(--parallax-y), 0);
}

.hero {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  padding: 9rem 4vw 5rem;
  background:
    linear-gradient(100deg, rgba(37, 23, 17, .82) 0 18%, rgba(51, 35, 49, .77) 18% 48%, rgba(182, 90, 60, .38) 48% 100%),
    var(--violet);
  color: var(--parchment);
}

.hero-copy { grid-column: 1 / 8; z-index: 4; }

.kicker, .folio, .panel-label, .edge-note, .reveal-note, .citation-row, .library-card span, .ledger-list span {
  font-family: var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.kicker { color: var(--amber); font-size: .76rem; margin: 0 0 1rem; }

h1, h2 { font-family: var(--display); margin: 0; font-weight: 900; letter-spacing: -.06em; }

h1 {
  font-size: clamp(5.7rem, 19vw, 18rem);
  line-height: .72;
  max-width: 8ch;
  text-shadow: 0 15px 46px rgba(37, 23, 17, .42);
}

h1 span { display: block; color: var(--amber); font-size: .18em; letter-spacing: -.01em; margin-left: .24em; }

.opening-line {
  max-width: 46rem;
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.38;
  margin: 2rem 0 0;
}

.edge-note {
  position: absolute;
  z-index: 5;
  font-size: .67rem;
  color: rgba(242, 223, 200, .72);
}
.note-nw { top: 9rem; left: 4vw; transform: translateY(-2.6rem); }
.note-ne { top: 8.2rem; right: 3vw; writing-mode: vertical-rl; }
.note-sw { bottom: 3rem; left: 4vw; }
.note-se { bottom: 3rem; right: 4vw; transform: rotate(-3deg); }

.light-leak, .wide-flare, .lens-orb {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(10px);
}

.light-leak {
  z-index: 3;
  width: 62vw;
  height: 88vh;
  right: 5vw;
  top: 5vh;
  background: radial-gradient(ellipse at 43% 46%, rgba(242, 168, 74, .9), rgba(182, 90, 60, .42) 28%, rgba(242, 168, 74, .08) 56%, transparent 72%);
  --base-transform: rotate(-15deg);
}

.city-slab {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(242, 223, 200, .2);
  background: linear-gradient(145deg, rgba(182, 90, 60, .75), rgba(51, 35, 49, .85));
  box-shadow: 0 30px 80px rgba(37, 23, 17, .42);
}

.hero-slab {
  right: -5vw;
  top: 15vh;
  width: 38vw;
  min-width: 340px;
  height: 76vh;
  --base-transform: skewY(-5deg);
}

.brick-grid, .subway-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(242, 223, 200, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 223, 200, .16) 1px, transparent 1px);
  background-size: 80px 38px;
}

.bottle-outline {
  position: absolute;
  left: 23%;
  bottom: 8%;
  width: 39%;
  height: 72%;
  border: 2px solid rgba(242, 223, 200, .58);
  border-radius: 45% 45% 13% 13% / 11% 11% 7% 7%;
  clip-path: polygon(35% 0, 65% 0, 65% 21%, 89% 34%, 89% 100%, 11% 100%, 11% 34%, 35% 21%);
}

.aperture-rings {
  position: absolute;
  right: 9%;
  top: 13%;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  border: 1px solid rgba(242, 168, 74, .65);
  box-shadow: inset 0 0 0 28px rgba(242, 168, 74, .06), 0 0 0 42px rgba(242, 223, 200, .08);
}

.essay-panel, .index-panel {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.8rem;
  padding: 10rem 4vw 7rem;
  background: var(--parchment);
}

.essay-panel::before, .index-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 62%;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(72, 107, 90, .14) 1px, transparent 1px), linear-gradient(rgba(37, 23, 17, .08) 1px, transparent 1px);
  background-size: 7.6vw 100%, 100% 4.8rem;
  z-index: -1;
}

.night { background: var(--violet); color: var(--parchment); }
.amber { background: linear-gradient(115deg, var(--violet) 0 47%, var(--terracotta) 47% 100%); }

.sticky-title {
  grid-column: 1 / 5;
  position: sticky;
  top: 9rem;
  align-self: start;
  z-index: 4;
  padding-right: 1rem;
}

.folio { display: block; color: var(--terracotta); font-size: .72rem; margin-bottom: 1rem; }
.night .folio { color: var(--amber); }

h2 {
  font-size: clamp(3.2rem, 7.8vw, 8.5rem);
  line-height: .82;
  max-width: 7ch;
}

.reading-lane {
  grid-column: 1 / 7;
  align-self: start;
  z-index: 5;
  margin-top: 34vh;
  max-width: 48rem;
  padding: 2rem 2rem 2.3rem 0;
}

.reading-lane p {
  font-size: clamp(1.1rem, 1.45vw, 1.45rem);
  line-height: 1.62;
  margin: 0 0 1.25rem;
}

.drop::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 6.2rem;
  line-height: .72;
  margin: .11em .13em 0 0;
  color: var(--terracotta);
}

.night .drop::first-letter { color: var(--amber); }

blockquote {
  position: relative;
  margin: 2.2rem 0 0 6vw;
  padding: 1.1rem 0 1.1rem 1.4rem;
  border-left: 2px solid var(--terracotta);
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 3.6rem);
  line-height: .98;
  letter-spacing: -.04em;
}

.thin-quote { font-size: clamp(1.4rem, 2.2vw, 2.6rem); border-color: var(--copper); }

.urban-panel {
  position: absolute;
  right: 4vw;
  top: 19vh;
  width: 40vw;
  min-width: 330px;
  height: 66vh;
  z-index: 2;
  background: linear-gradient(135deg, rgba(182, 90, 60, .72), rgba(72, 107, 90, .42)), var(--terracotta);
  border: 1px solid rgba(37, 23, 17, .24);
  box-shadow: 0 40px 90px rgba(37, 23, 17, .22);
  overflow: hidden;
}

.night .urban-panel { border-color: rgba(242, 223, 200, .2); box-shadow: 0 40px 100px rgba(0, 0, 0, .34); }
.panel-two { top: 24vh; --base-transform: rotate(2deg); background: linear-gradient(135deg, rgba(242, 223, 200, .16), rgba(72, 107, 90, .55)), var(--violet); }
.panel-three { --base-transform: skewY(-3deg); background: linear-gradient(135deg, rgba(242, 168, 74, .26), rgba(51, 35, 49, .62)), var(--terracotta); }

.panel-label {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 3;
  font-size: .66rem;
  color: rgba(242, 223, 200, .78);
}

.fire-escape {
  position: absolute;
  right: 13%;
  top: 13%;
  width: 42%;
  height: 78%;
  background-image: repeating-linear-gradient(0deg, transparent 0 42px, rgba(37, 23, 17, .42) 42px 45px), repeating-linear-gradient(90deg, transparent 0 38px, rgba(37, 23, 17, .36) 38px 41px);
  border-left: 5px solid rgba(37, 23, 17, .42);
  border-right: 5px solid rgba(37, 23, 17, .42);
}

.skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(37, 23, 17, .78), rgba(37, 23, 17, .22));
  clip-path: polygon(0 100%, 0 46%, 7% 46%, 7% 20%, 14% 20%, 14% 56%, 22% 56%, 22% 32%, 32% 32%, 32% 8%, 41% 8%, 41% 51%, 52% 51%, 52% 26%, 61% 26%, 61% 60%, 71% 60%, 71% 34%, 82% 34%, 82% 16%, 90% 16%, 90% 48%, 100% 48%, 100% 100%);
}

.map-fragment, .route-stamp {
  position: absolute;
  left: 6vw;
  bottom: 9vh;
  z-index: 6;
  max-width: 23rem;
  padding: .75rem .9rem;
  border: 1px solid rgba(182, 90, 60, .65);
  color: var(--terracotta);
  font-size: .68rem;
  transform: rotate(-2deg);
}

.night .map-fragment, .night .route-stamp { color: var(--amber); border-color: rgba(242, 168, 74, .55); }

.citation-row {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.7rem;
  font-size: .67rem;
}
.citation-row span { padding: .45rem .6rem; border: 1px solid rgba(242, 223, 200, .24); }

.lens-orb.orb-left {
  left: -12vw;
  bottom: 9vh;
  width: 38vw;
  height: 38vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 168, 74, .64), rgba(242, 168, 74, .12) 42%, transparent 70%);
}

.vessel-diagram {
  position: absolute;
  right: 12vw;
  top: 16vh;
  z-index: 3;
  width: 28vw;
  min-width: 260px;
  height: 68vh;
  border: 1px solid rgba(72, 107, 90, .55);
  background: rgba(242, 223, 200, .36);
}

.diagram-neck, .diagram-body {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid var(--copper);
}
.diagram-neck { top: 8%; width: 24%; height: 22%; }
.diagram-body { bottom: 9%; width: 64%; height: 65%; border-radius: 45% 45% 9% 9% / 14% 14% 5% 5%; }
.vessel-diagram span { position: absolute; bottom: 1rem; left: 1rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; color: var(--copper); text-transform: uppercase; }

.wide-flare {
  right: -28vw;
  top: 16vh;
  width: 80vw;
  height: 52vh;
  background: radial-gradient(ellipse, rgba(242, 168, 74, .8), rgba(242, 168, 74, .16) 36%, transparent 69%);
  animation: flareSweep 8s ease-in-out infinite alternate;
}

@keyframes flareSweep {
  from { opacity: .44; filter: blur(18px); }
  to { opacity: .82; filter: blur(7px); }
}

.index-panel { background: linear-gradient(90deg, var(--parchment) 0 63%, rgba(72, 107, 90, .24) 63% 100%); min-height: 112vh; }

.ledger-list {
  list-style: none;
  margin: 2.4rem 0;
  padding: 0;
  border-top: 1px solid rgba(37, 23, 17, .28);
}
.ledger-list li {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(37, 23, 17, .22);
}
.ledger-list span { font-size: .68rem; color: var(--terracotta); }
.ledger-list strong { font-weight: 500; font-size: 1.2rem; }

.archive-link {
  display: inline-block;
  padding: .82rem 1.1rem;
  border: 2px solid var(--terracotta);
  color: var(--terracotta);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

.library-card {
  position: absolute;
  right: 6vw;
  top: 25vh;
  width: min(32rem, 34vw);
  min-height: 23rem;
  padding: 2rem;
  background: rgba(242, 223, 200, .72);
  border: 1px solid rgba(37, 23, 17, .3);
  box-shadow: 16px 19px 0 rgba(182, 90, 60, .5);
  --base-transform: rotate(3deg);
}
.library-card p { font-family: var(--display); font-size: clamp(3rem, 6vw, 6rem); line-height: .8; margin: 0 0 2rem; letter-spacing: -.06em; }
.library-card span { display: block; margin-top: 1rem; font-size: .72rem; color: var(--copper); }

.section-number {
  position: absolute;
  right: 2vw;
  bottom: -3vw;
  z-index: 1;
  font-family: var(--display);
  font-size: clamp(9rem, 22vw, 23rem);
  font-weight: 900;
  line-height: .7;
  letter-spacing: -.1em;
  color: rgba(182, 90, 60, .16);
  pointer-events: none;
}
.night .section-number { color: rgba(242, 168, 74, .16); }

.reveal-block, .reveal-note {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 900ms ease, transform 900ms ease, clip-path 900ms ease;
  clip-path: inset(18% 0 0 0);
}
.reveal-block.is-visible, .reveal-note.is-visible { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); }

@media (max-width: 900px) {
  .title-band { grid-template-columns: 1fr; gap: .85rem; }
  .archive-nav { grid-template-columns: repeat(3, max-content); }
  .hero-copy, .reading-lane, .sticky-title { grid-column: 1 / -1; }
  .sticky-title { position: relative; top: auto; }
  .reading-lane { margin-top: 2rem; padding-right: 0; }
  .urban-panel, .vessel-diagram, .library-card { position: relative; grid-column: 1 / -1; right: auto; top: auto; width: 100%; min-width: 0; margin-top: 2rem; }
  .hero-slab { opacity: .5; }
  .map-fragment, .route-stamp { position: relative; left: auto; bottom: auto; grid-column: 1 / -1; margin-top: 2rem; }
  .ledger-list li { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  .archive-nav { display: none; }
  .hero, .essay-panel, .index-panel { padding-left: 1.2rem; padding-right: 1.2rem; }
  h1 { font-size: 5rem; }
  .cursor-flare { display: none; }
}

/* Compliance vocabulary: elegance warmth field-note precision. partially obscured by Display* Display** from numerals imagery. headings break unusual ways Playfair-style typography against surfaces Source Serif 4* 4** long-form editorial warmth. Supporting typography: Mono* Mono** */