:root {
  /* Interaction Pattern (Hover-Lift Only Interaction Pattern:** typography notes: (Google Fonts) */
  --marble-cream: #f5f0e8;
  --warm-parchment: #e8dfd3;
  --charcoal-earth: #3c3a36;
  --raw-sienna: #a0522d;
  --warm-bronze: #8b7355;
  --sandstone: #c9b99a;
  --burnt-umber: #6b3a2a;
  --travertine: #d4c4a8;
  --deep-warm: #4a4640;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html { background: var(--marble-cream); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--deep-warm);
  background: var(--marble-cream);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.72;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.831 0 0 0 0 0 0.769 0 0 0 0 0 0.659 0 0 0 0 0 .88 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

.site-shell { overflow: hidden; }

.spread {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  padding: clamp(28px, 4vw, 64px);
  position: relative;
}

.opening-spread {
  min-height: 100vh;
  grid-template-rows: 0.45fr auto auto 1fr;
  background:
    linear-gradient(90deg, transparent calc(33.333% - 1px), rgba(60,58,54,0.2) calc(33.333% - 1px), rgba(60,58,54,0.2) calc(33.333% + 1px), transparent calc(33.333% + 1px)),
    var(--marble-cream);
}

.register-label, .section-kicker, .footer-domain, .footer-meta, .marble-caption, .thread span, .event-marker em {
  font-family: "Space Grotesk", "DM Sans", Arial, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-bronze);
}

.register-label { grid-column: 1 / 6; align-self: end; }

.display-title {
  grid-column: 1 / 8;
  grid-row: 2 / 3;
  margin: 0;
  align-self: end;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(4rem, 8vw, 9rem);
  line-height: 0.82;
  letter-spacing: 0.08em;
  color: var(--charcoal-earth);
  text-transform: uppercase;
}

.display-title span { display: block; }

.thesis-line {
  grid-column: 2 / 7;
  grid-row: 3 / 4;
  margin: 32px 0 0;
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.35;
  color: var(--raw-sienna);
}

.marble-panel {
  grid-column: 7 / 13;
  grid-row: 1 / 4;
  min-height: 72vh;
  position: relative;
  background:
    radial-gradient(ellipse at 22% 18%, rgba(201,185,154,0.42) 0 2%, transparent 18%),
    radial-gradient(ellipse at 72% 38%, rgba(160,82,45,0.14) 0 1%, transparent 22%),
    radial-gradient(ellipse at 44% 72%, rgba(201,185,154,0.33) 0 1.5%, transparent 20%),
    linear-gradient(135deg, transparent 0 46%, rgba(201,185,154,0.28) 47% 48%, transparent 49% 100%),
    var(--warm-parchment);
  border: 2px solid var(--sandstone);
  overflow: hidden;
}

.marble-panel::before {
  content: attr(data-panel);
  position: absolute;
  top: 24px;
  right: 22px;
  writing-mode: vertical-rl;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-bronze);
}

.column-fragment {
  position: absolute;
  width: 112px;
  height: 58%;
  bottom: 0;
  left: 9%;
  background: repeating-linear-gradient(90deg, var(--sandstone) 0 1px, var(--warm-parchment) 1px 10px);
  border-left: 2px solid var(--charcoal-earth);
  border-right: 2px solid var(--charcoal-earth);
}

.block { position: absolute; width: 17%; height: 14%; }
.block.umber { background: var(--burnt-umber); right: 21%; top: 28%; }
.block.sandstone { background: var(--sandstone); right: 8%; bottom: 18%; }
.marble-caption { position: absolute; left: 24px; bottom: 24px; }
.bauhaus-point { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--raw-sienna); left: calc(58.33% - 8px); top: 54%; }
.vertical-axis { position: absolute; width: 2px; background: var(--charcoal-earth); top: 18%; bottom: 12%; left: calc(58.33% - 1px); }

.section-rule {
  height: 56px;
  margin: 0 clamp(28px, 4vw, 64px);
  position: relative;
  border-top: 2px solid var(--charcoal-earth);
}

.section-rule span {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--raw-sienna);
  left: 33.33%;
  top: -7px;
}

.triangle-rule span {
  width: 64px;
  height: 48px;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
  background: var(--sandstone);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.thesis-section { min-height: 92vh; background: var(--marble-cream); }
.section-kicker { grid-column: 1 / 4; align-self: start; color: var(--raw-sienna); }
.body-block { background: var(--warm-parchment); padding: clamp(22px, 3vw, 42px); border: 2px solid var(--sandstone); }
.body-block h2, .diagram-title {
  margin: 0 0 24px;
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--raw-sienna);
}
.body-block p { margin: 0 0 24px; }
.body-block p:last-child { margin-bottom: 0; }
.left-copy { grid-column: 1 / 6; grid-row: 2 / 5; margin-top: 56px; }
.right-copy { grid-column: 8 / 13; grid-row: 3 / 6; }
.charcoal-rule { grid-column: 6 / 7; grid-row: 2 / 6; width: 2px; background: var(--charcoal-earth); justify-self: center; }
.pull-quote {
  grid-column: 3 / 9;
  grid-row: 5 / 7;
  margin: 36px 0 0;
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  line-height: 1.35;
  color: var(--raw-sienna);
  background: var(--marble-cream);
  border-left: 2px solid var(--charcoal-earth);
  padding: 24px 0 24px 32px;
}
.rect-accent { min-height: 88px; }
.accent-one { grid-column: 11 / 12; grid-row: 1 / 2; background: var(--burnt-umber); }
.accent-two { grid-column: 7 / 8; grid-row: 6 / 7; background: var(--sandstone); }

.diagram-section { min-height: 100vh; background: var(--warm-parchment); }
.diagram-title { grid-column: 4 / 11; grid-row: 1; align-self: end; color: var(--charcoal-earth); font-family: "Archivo Black", Impact, sans-serif; font-size: clamp(2.8rem, 5.5vw, 5.2rem); line-height: 0.94; }
.diagram-board {
  grid-column: 2 / 12;
  grid-row: 2;
  height: clamp(420px, 52vw, 620px);
  margin-top: 42px;
  position: relative;
  background: var(--marble-cream);
  border: 2px solid var(--charcoal-earth);
  overflow: hidden;
}
.diagram-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(60,58,54,0.12) 1px, transparent 1px), linear-gradient(0deg, rgba(60,58,54,0.1) 1px, transparent 1px);
  background-size: 8.333% 100%, 100% 25%;
}
.thread { position: absolute; left: 8%; right: 8%; height: 22px; }
.thread span { position: absolute; top: -30px; left: 0; }
.thread-a { top: 22%; }
.thread-b { top: 42%; }
.thread-c { top: 62%; }
.thread-d { top: 82%; }
.active { background: var(--raw-sienna); }
.dormant { background: var(--sandstone); }
.event-marker { position: absolute; top: 12%; bottom: 9%; width: 2px; background: var(--charcoal-earth); }
.event-marker b { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--charcoal-earth); left: -6px; top: 50%; }
.event-marker em { position: absolute; bottom: -34px; left: -22px; font-style: normal; color: var(--warm-bronze); }
.event-one { left: 18%; }
.event-two { left: 44%; }
.event-three { left: 67%; }
.event-four { left: 86%; }
.diagram-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.diagram-lines line { stroke: var(--burnt-umber); stroke-width: 0.55; vector-effect: non-scaling-stroke; }
.diagram-note { grid-column: 3 / 8; grid-row: 3; margin: 32px 0 0; font-style: italic; color: var(--deep-warm); }
.entablature {
  grid-column: 9 / 13;
  grid-row: 3;
  height: 24px;
  margin-top: 42px;
  background:
    radial-gradient(circle at 12px 12px, var(--raw-sienna) 0 4px, transparent 5px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--charcoal-earth) 24px 26px, transparent 27px 48px),
    var(--sandstone);
  background-size: 48px 24px, 48px 24px, auto;
}

.inverted-section { position: relative; background: var(--charcoal-earth); color: var(--marble-cream); overflow: hidden; }
.inverted-inner { min-height: 72vh; align-items: center; }
.inverted-section .section-kicker { grid-column: 2 / 5; color: var(--sandstone); }
.dense-paragraph {
  grid-column: 4 / 11;
  margin: 0;
  font-size: clamp(1.35rem, 2.3vw, 2.2rem);
  line-height: 1.48;
  color: var(--marble-cream);
}
.dark-column {
  position: absolute;
  top: 18%;
  bottom: 16%;
  width: 104px;
  background: repeating-linear-gradient(90deg, rgba(201,185,154,0.22) 0 1px, rgba(245,240,232,0.04) 1px 10px);
  border-inline: 2px solid var(--sandstone);
}
.left-dark { left: clamp(28px, 4vw, 64px); }
.right-dark { right: clamp(28px, 4vw, 64px); }
.dark-point { grid-column: 11 / 12; width: 16px; height: 16px; border-radius: 50%; background: var(--sandstone); }

.footer-spread { min-height: 46vh; align-content: center; background: var(--marble-cream); }
.footer-band { grid-column: 1 / 13; grid-row: 1; margin: 0 0 48px; }
.footer-domain { grid-column: 1 / 6; grid-row: 2; color: var(--charcoal-earth); font-size: clamp(1rem, 1.6vw, 1.4rem); }
.footer-meta { grid-column: 8 / 13; grid-row: 2; text-align: left; }
.pediment { grid-column: 6 / 8; grid-row: 3; width: 96px; height: 72px; margin: 56px auto 0; background: var(--sandstone); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }

.lift-target { transition: transform 350ms ease-out, box-shadow 350ms ease-out; will-change: transform; }
.lift-target.is-lifted { transform: translateY(-6px); box-shadow: 0 8px 24px rgba(60,58,54,0.12); transition: transform 280ms var(--spring), box-shadow 280ms var(--spring); }

@media (max-width: 780px) {
  .spread { grid-template-columns: repeat(4, 1fr); padding: 24px; }
  .opening-spread { min-height: auto; padding-bottom: 64px; }
  .register-label, .display-title, .thesis-line, .marble-panel, .section-kicker, .left-copy, .right-copy, .pull-quote, .diagram-title, .diagram-board, .diagram-note, .entablature, .footer-band, .footer-domain, .footer-meta, .dense-paragraph { grid-column: 1 / 5; }
  .display-title { font-size: clamp(3.2rem, 17vw, 5.5rem); margin-top: 64px; }
  .marble-panel { grid-row: auto; min-height: 52vh; margin-top: 32px; }
  .bauhaus-point, .vertical-axis, .charcoal-rule, .dark-column { display: none; }
  .thesis-line { margin-top: 24px; }
  .left-copy, .right-copy, .pull-quote { grid-row: auto; margin-top: 28px; }
  .pull-quote { padding-left: 24px; }
  .accent-one { grid-column: 4 / 5; grid-row: auto; }
  .accent-two { grid-column: 2 / 3; grid-row: auto; }
  .diagram-title { grid-row: auto; font-size: clamp(2.4rem, 12vw, 4rem); }
  .diagram-board { grid-row: auto; height: 460px; }
  .diagram-note, .entablature { grid-row: auto; }
  .inverted-inner { min-height: auto; padding-block: 72px; }
  .dark-point { grid-column: 4 / 5; }
  .footer-domain, .footer-meta, .pediment { grid-row: auto; }
  .footer-meta { margin-top: 24px; }
  .pediment { grid-column: 2 / 4; }
}