:root {
  --ink: #0d0d0c;
  --ink-soft: #141512;
  --panel: #191a17;
  --panel-2: #20211d;
  --paper: #e9e0cf;
  --muted: #b9af9d;
  --gold: #c9a85f;
  --gold-2: #e1c77f;
  --stone: #b7a583;
  --stone-dark: #6f614b;
  --brick: #9b5f4b;
  --green: #7f9a78;
  --blue: #6f8d9a;
  --red: #a5665c;
  --purple: #8e789f;
  --line: rgba(201, 168, 95, 0.25);
  --max: 1180px;
  --serif: Georgia, "Times New Roman", serif;
  --display: Cinzel, Georgia, serif;
  --sans: Inter, Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  line-height: 1.7;
}
a { color: var(--gold-2); }
a:hover, a:focus { color: #f5dfa2; }
button, input { font: inherit; }
button { color: inherit; }

.skip-link {
  position: fixed;
  top: -60px;
  left: 18px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--gold);
  color: #111;
  font-family: var(--sans);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 14px; }

.site-header {
  position: relative;
  z-index: 20;
  height: 72px;
  padding: 0 max(4vw, 24px);
  border-bottom: 1px solid var(--line);
  background: rgba(11, 12, 10, 0.96);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  color: var(--gold-2);
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
}
.site-header nav { display: flex; gap: 28px; }
.site-header nav a {
  color: #c5bcab;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.site-header nav a.active, .site-header nav a:hover { color: var(--gold-2); }

.hero {
  position: relative;
  min-height: 780px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(390px, .9fr);
  align-items: center;
  gap: 32px;
  padding: 84px max(5vw, 32px) 74px;
  background:
    radial-gradient(circle at 72% 30%, rgba(201,168,95,.15), transparent 32%),
    linear-gradient(120deg, #171712 0%, #0d0d0c 62%);
  border-bottom: 1px solid var(--line);
}
.hero-grid {
  position: absolute;
  inset: 0;
  opacity: .25;
  background-image:
    linear-gradient(rgba(201,168,95,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,95,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to right, black, transparent 82%);
}
.hero-copy, .hero-stone { position: relative; z-index: 1; }
.hero-copy { max-width: 820px; }
.eyebrow, .section-kicker, .phase-label {
  margin: 0 0 10px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero h1 {
  margin: 0;
  max-width: 920px;
  color: #f2eadb;
  font-family: var(--display);
  font-size: clamp(3.4rem, 7vw, 6.8rem);
  line-height: .98;
  letter-spacing: -.035em;
}
.hero h1 span { color: var(--gold-2); font-size: .68em; }
.dek {
  max-width: 760px;
  margin: 28px 0 14px;
  color: #e3d4b8;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.25;
}
.intro { max-width: 760px; color: #c6bdad; font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 19px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.button:hover, .button:focus { transform: translateY(-2px); }
.button.primary { background: var(--gold); color: #14120d; }
.button.ghost { background: transparent; color: var(--gold-2); }
.button.ghost:hover { background: rgba(201,168,95,.1); }
.hero-meta {
  display: flex;
  gap: 34px;
  padding: 0;
  margin: 42px 0 0;
  list-style: none;
}
.hero-meta li { display: grid; }
.hero-meta strong { color: var(--gold-2); font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.hero-meta span { color: #978f82; font-family: var(--sans); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; }
.hero-stone svg { width: 100%; max-height: 650px; display: block; }
.hero-stone .church-form { transition: opacity .6s ease; }
.hero-stone:hover .church-form { opacity: .72; }
.svg-caption { fill: #bcae91; font-family: var(--sans); font-size: 18px; letter-spacing: .15em; }

.section-nav {
  position: sticky;
  top: 0;
  z-index: 15;
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(13,13,12,.96);
  backdrop-filter: blur(10px);
}
.section-nav a {
  padding: 14px 18px 12px;
  border-bottom: 2px solid transparent;
  color: #a9a092;
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}
.section-nav a[aria-current="location"] { color: var(--gold-2); border-bottom-color: var(--gold); }

.section { max-width: var(--max); margin: 0 auto; padding: 94px 32px; }
.section.narrow { max-width: 980px; }
.section h2, .part-banner h2, .research-download h2, .hinge-section h2 {
  margin: 0 0 22px;
  color: #efe5d4;
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.section h3 { margin: 0 0 8px; font-family: var(--display); color: #eadbbf; line-height: 1.25; }
.lead { color: #d8cebc; font-size: 1.23rem; line-height: 1.6; }

.thesis-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; margin: 38px 0; }
.thesis-grid article { padding: 30px; border: 1px solid var(--line); background: var(--panel); }
.thesis-grid h3 { font-size: 1.8rem; }
.thesis-arrow { align-self: center; color: var(--gold); font-size: 2.6rem; }
.roman-number { display: block; margin-bottom: 12px; color: var(--gold); font-family: var(--display); font-size: 2.4rem; }
.source-note, .evidence-strip {
  margin-top: 28px;
  padding: 17px 20px;
  border-left: 3px solid var(--gold);
  background: linear-gradient(90deg, rgba(201,168,95,.09), transparent);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}
.source-note strong { color: var(--gold); font-family: var(--sans); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.source-note span { color: #c9bfad; }

.part-banner {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: 72px max(7vw, 38px);
  border-block: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(180px, .3fr) minmax(0, 1fr);
  align-items: center;
  gap: 50px;
}
.part-one-banner { background: linear-gradient(120deg, #1b1812, #11120f); }
.part-two-banner { background: linear-gradient(120deg, #171b18, #0f1110); }
.part-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: repeating-linear-gradient(0deg, transparent 0 58px, rgba(201,168,95,.22) 59px 61px);
  pointer-events: none;
}
.part-banner > * { position: relative; z-index: 1; }
.part-number { color: rgba(201,168,95,.2); font-family: var(--display); font-size: clamp(5rem, 13vw, 11rem); line-height: .8; }
.part-banner p { max-width: 780px; color: #c4baaa; font-size: 1.12rem; }

.split { display: grid; grid-template-columns: 1fr .9fr; gap: 70px; align-items: center; }
.open-town { border: 1px solid var(--line); background: #10110f; padding: 14px; }
.open-town svg { width: 100%; display: block; }
.map-road { fill: none; stroke: #a98855; stroke-width: 18; stroke-linecap: round; opacity: .72; }
.map-road.minor { stroke-width: 10; opacity: .5; }
.town-building rect { fill: #827459; stroke: #dcc898; stroke-width: 3; }
.town-building path { fill: #9a604e; stroke: #dcc898; stroke-width: 3; }
.town-building.small { opacity: .82; }
.market-dots { fill: #d3b96e; }
.open-town text { fill: #bfb292; font-family: var(--sans); font-size: 18px; letter-spacing: .12em; }

.dark-panel { max-width: none; padding: 0; background: #11120f; border-block: 1px solid var(--line); display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, var(--max)) minmax(40px, 1fr); }
.panel-number { align-self: start; padding: 80px 28px 0 0; color: rgba(201,168,95,.1); font-family: var(--display); font-size: clamp(7rem, 14vw, 13rem); line-height: 1; text-align: right; }
.panel-content { grid-column: 2; padding: 96px 32px; }
.phase-controls, .function-controls, .wroxeter-controls, .town-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 22px; }
.phase-button, .function-button, .network-button, .interpretation-button, .wroxeter-button, .town-tab, .stone-button, .judgement-button {
  border: 1px solid var(--line);
  background: #181915;
  color: #bfb5a4;
  padding: 11px 15px;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
}
.phase-button.active, .function-button.active, .network-button.active, .interpretation-button.active, .wroxeter-button.active, .town-tab.active, .stone-button.active, .judgement-button.active {
  border-color: var(--gold);
  background: rgba(201,168,95,.12);
  color: var(--gold-2);
}
.phase-display { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; margin-top: 35px; }
.phase-visual { position: relative; min-height: 400px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 45%, #23231d, #0c0d0b 70%); overflow: hidden; }
.phase-town { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.phase-town.active { opacity: 1; }
.phase-town span { position: absolute; width: 72px; height: 48px; background: #75674f; border: 2px solid #cdbb91; transform: rotate(2deg); }
.phase-town span:nth-child(1) { left: 24%; top: 29%; }
.phase-town span:nth-child(2) { left: 50%; top: 43%; width: 92px; height: 63px; }
.phase-town span:nth-child(3) { left: 36%; top: 64%; width: 65px; }
.open-gap { position: absolute; left: 0; right: 0; top: 54%; height: 18px; background: #aa8956; transform: rotate(-12deg); opacity: .72; }
.circuit, .inner-circuit { position: absolute; border: 10px solid var(--stone); border-radius: 47% 44% 46% 42%; }
.circuit { inset: 12%; }
.inner-circuit { inset: 20%; border-color: #b79667; border-width: 14px; }
.gate { position: absolute; bottom: 9%; left: calc(50% - 30px); width: 60px; height: 42px; background: #0c0d0b; border: 7px solid var(--stone); border-bottom: 0; }
.bastion { position: absolute; width: 32px; height: 32px; border-radius: 50%; background: var(--stone); border: 4px solid #e2d2ae; }
.b1 { left: 17%; top: 16%; }.b2 { right: 17%; top: 18%; }.b3 { right: 18%; bottom: 16%; }.b4 { left: 18%; bottom: 18%; }
.phase-copy { padding: 8px 0; }
.phase-copy h3 { font-size: 2rem; }
.phase-question { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--gold-2); font-style: italic; }

.function-controls { justify-content: center; }
.gate-investigation { display: grid; grid-template-columns: 1fr .85fr; gap: 50px; align-items: center; margin: 36px 0; }
.gate-scene { position: relative; min-height: 430px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(#1c201e 0 57%, #111 57%); }
.gate-wall { position: absolute; bottom: 23%; width: 34%; height: 45%; background: repeating-linear-gradient(0deg, #6f624c 0 31px, #988667 32px 35px); border: 2px solid #b9a782; }
.gate-wall.left { left: 0; }.gate-wall.right { right: 0; }
.gate-tower { position: absolute; bottom: 23%; width: 18%; height: 62%; background: repeating-linear-gradient(0deg, #776a52 0 32px, #9b896a 33px 36px); border: 2px solid #c4b187; }
.tower-left { left: 29%; }.tower-right { right: 29%; }
.gate-arch { position: absolute; left: 43%; bottom: 23%; width: 14%; height: 34%; border: 12px solid #a18e6d; border-bottom: 0; border-radius: 80px 80px 0 0; }
.gate-door { position: absolute; left: 45%; bottom: 23%; width: 10%; height: 26%; background: repeating-linear-gradient(90deg, #3e2a1c 0 15px, #5d3c25 16px 18px); transition: transform .3s ease, opacity .3s ease; }
.gate-road { position: absolute; left: 37%; bottom: 0; width: 26%; height: 23%; background: #8f7650; clip-path: polygon(30% 0,70% 0,100% 100%,0 100%); }
.actor { position: absolute; z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid var(--gold); border-radius: 50%; background: #151510; color: var(--gold-2); font-family: var(--display); font-size: 1.1rem; transition: all .35s ease; }
.attacker { left: 12%; bottom: 7%; }.merchant { left: 46%; bottom: 6%; }.official { right: 12%; bottom: 9%; }.family { left: 47%; top: 12%; }
.gate-scene[data-state="defence"] .merchant, .gate-scene[data-state="defence"] .official, .gate-scene[data-state="defence"] .family { opacity: .2; }
.gate-scene[data-state="prestige"] .attacker, .gate-scene[data-state="prestige"] .merchant, .gate-scene[data-state="prestige"] .family { opacity: .18; }
.gate-scene[data-state="prestige"] .official { right: 46%; bottom: 8%; transform: scale(1.15); }
.gate-scene[data-state="control"] .attacker, .gate-scene[data-state="control"] .family { opacity: .18; }
.gate-scene[data-state="control"] .merchant { left: 43%; bottom: 7%; }
.gate-scene[data-state="control"] .official { right: 37%; bottom: 20%; }
.gate-scene[data-state="refuge"] .attacker, .gate-scene[data-state="refuge"] .merchant, .gate-scene[data-state="refuge"] .official { opacity: .18; }
.gate-scene[data-state="refuge"] .family { left: 47%; top: 51%; }
.gate-copy ul { color: #beb4a3; }
.verdict { margin-top: 30px; padding: 20px 24px; border-left: 3px solid var(--gold); background: rgba(201,168,95,.07); display: grid; }
.verdict strong { color: var(--gold); font-family: var(--sans); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.verdict span { color: #e7dac0; font-family: var(--display); font-size: 1.24rem; }

.network-section { max-width: none; background: #11120f; border-block: 1px solid var(--line); }
.network-section > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; }
.section-heading > p { max-width: 470px; color: var(--muted); }
.network-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; margin-top: 36px; }
.road-network { width: 100%; border: 1px solid var(--line); background: #0b0c0a; }
.roads path { fill: none; stroke: #9d8051; stroke-width: 10; opacity: .62; }
.river { fill: none; stroke: #647f88; stroke-width: 18; opacity: .45; }
.network-node circle { fill: #171713; stroke: var(--gold-2); stroke-width: 4; }
.network-node .wall-ring { fill: none; stroke: var(--stone); stroke-width: 8; stroke-dasharray: 8 4; }
.network-node text { fill: var(--gold-2); text-anchor: middle; font-family: var(--display); font-size: 18px; }
.network-labels text { fill: #aaa08f; font-family: var(--sans); font-size: 13px; letter-spacing: .08em; }
.network-choices { display: grid; align-content: start; gap: 10px; }
.network-answer { margin-top: 16px; padding: 24px; border: 1px solid var(--line); background: var(--panel); }
.network-answer h3 { font-size: 1.55rem; }
.case-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.case-band article { padding: 35px 28px; background: #151612; }
.case-band span { color: var(--gold); font-family: var(--sans); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.case-band h3 { margin: 8px 0; font-family: var(--display); color: #eadfc8; }
.case-band p { margin: 0; color: #aaa08f; font-size: .93rem; }

.cunetio-section { max-width: 1280px; }
.cunetio-workbench { display: grid; grid-template-columns: 1.15fr .85fr; gap: 42px; align-items: start; margin-top: 38px; }
.cunetio-map { border: 1px solid var(--line); background: #0c0d0b; padding: 10px; }
.cunetio-map svg { width: 100%; display: block; }
.c-road { fill: none; stroke: #9c7b4d; stroke-width: 14; opacity: .65; transition: opacity .3s ease; }
.c-river { fill: none; stroke: #5f7e88; stroke-width: 24; opacity: .45; }
.c-buildings rect, .late-buildings rect { fill: #796b53; stroke: #c8b78f; stroke-width: 3; transition: opacity .3s ease; }
.earthwork { fill: none; stroke: #897353; stroke-width: 18; stroke-dasharray: 16 8; opacity: 0; transition: opacity .3s ease; }
.stone-circuit { fill: rgba(182,158,112,.08); stroke: var(--stone); stroke-width: 17; opacity: 0; transition: opacity .3s ease; }
.bastions circle { fill: var(--stone); stroke: #e0cea5; stroke-width: 4; opacity: 0; transition: opacity .3s ease; }
.blocked line { stroke: var(--red); stroke-width: 12; stroke-linecap: round; opacity: 0; }
.late-buildings { opacity: 0; transition: opacity .3s ease; }
.map-caption { fill: #c1b498; font-family: var(--sans); font-size: 18px; letter-spacing: .08em; opacity: 0; }
.cunetio-map[data-stage="0"] .c0 { opacity: 1; }
.cunetio-map[data-stage="1"] .earthwork, .cunetio-map[data-stage="1"] .c1 { opacity: 1; }
.cunetio-map[data-stage="2"] .stone-circuit, .cunetio-map[data-stage="2"] .bastions circle, .cunetio-map[data-stage="2"] .blocked line, .cunetio-map[data-stage="2"] .late-buildings, .cunetio-map[data-stage="2"] .c2 { opacity: 1; }
.cunetio-map[data-stage="2"] .old { opacity: .22; }
.cunetio-map[data-stage="2"] .c-road { opacity: .25; }
.cunetio-controls { padding: 26px; border: 1px solid var(--line); background: var(--panel); }
.cunetio-controls label { display: block; margin-bottom: 10px; color: var(--gold-2); font-family: var(--display); font-size: 1.15rem; }
.cunetio-controls input[type="range"] { width: 100%; accent-color: var(--gold); }
.range-labels { display: flex; justify-content: space-between; color: #8f8779; font-family: var(--sans); font-size: .62rem; text-transform: uppercase; }
.cunetio-copy { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.interpretation-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 25px; }
.interpretation-answer { min-height: 90px; margin: 12px 0 0; padding: 16px; background: #11120f; color: #c7bdac; }
.caution-box { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; margin-top: 30px; padding: 20px; border: 1px solid rgba(165,102,92,.45); background: rgba(165,102,92,.07); }
.caution-box p { margin: 0; }
.documented, .probable, .possible, .disputed {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.documented { background: #355843; color: #e0f1e4; }
.probable { background: #68572c; color: #f2e2a9; }
.possible { background: #3e5d69; color: #dbeaf0; }
.disputed { background: #713e39; color: #f5d9d4; }
blockquote { margin: 38px 0 0; padding: 20px 0 20px 26px; border-left: 3px solid var(--gold); color: #ecddc2; font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.35; }

.hinge-section { position: relative; min-height: 560px; overflow: hidden; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 60px; padding: 80px max(7vw, 38px); background: linear-gradient(120deg, #0c0d0b, #171713); border-block: 1px solid var(--line); }
.hinge-wall { min-height: 390px; display: grid; grid-template-columns: repeat(5,1fr); align-items: end; gap: 9px; transform: rotate(-3deg); }
.hinge-wall span { display: block; background: linear-gradient(135deg, #b8a47f, #625643); border: 1px solid #d2bf96; box-shadow: 0 18px 30px rgba(0,0,0,.28); }
.hinge-wall span:nth-child(1) { height: 74%; }.hinge-wall span:nth-child(2) { height: 90%; }.hinge-wall span:nth-child(3) { height: 66%; transform: translateY(35px) rotate(8deg); }.hinge-wall span:nth-child(4) { height: 48%; transform: translateY(70px) rotate(15deg); }.hinge-wall span:nth-child(5) { height: 30%; transform: translateY(105px) rotate(24deg); }
.hinge-copy { max-width: 720px; }
.hinge-question { color: var(--gold-2); font-family: var(--display); font-size: 1.35rem; }

.quarry-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 38px 0 22px; }
.quarry-button { min-height: 150px; padding: 24px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: center; }
.quarry-button.active { border-color: var(--gold); background: rgba(201,168,95,.09); }
.quarry-button .choice-icon { grid-row: 1/3; color: var(--gold); font-size: 3rem; }
.quarry-button strong { color: #eadfc8; font-family: var(--display); font-size: 1.35rem; }
.quarry-button small { color: #9d9588; font-family: var(--sans); text-transform: uppercase; letter-spacing: .07em; }
.labour-meter { display: grid; grid-template-columns: 1fr 1.6fr; gap: 28px; align-items: center; padding: 24px; border: 1px solid var(--line); background: #10110f; }
.meter-track { height: 22px; background: #2c2b25; overflow: hidden; }
.meter-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--brick)); transition: width .45s ease; }
.labour-meter strong { color: var(--gold-2); font-family: var(--display); font-size: 1.25rem; }
.labour-meter p { margin: 5px 0 0; color: #afa696; }

.wroxeter-section { max-width: 1280px; }
.wroxeter-scene { margin-top: 34px; border: 1px solid var(--line); background: #0d0e0c; }
.wroxeter-visual svg { width: 100%; display: block; }
.sky { fill: #171b1a; }.ground { fill: #343426; }
.roman-basilica { fill: rgba(190,171,130,.08); stroke: #c7b58c; stroke-width: 5; transition: opacity .45s ease; }
.roman-basilica .columns line { stroke: #c7b58c; stroke-width: 10; }
.old-work rect { fill: #8d7959; stroke: #e0c99a; stroke-width: 5; }
.old-work path { stroke: #9a5e48; stroke-width: 10; }
.ruin-stones rect { fill: #9b8969; stroke: #d7c398; stroke-width: 3; opacity: 0; transition: opacity .45s ease; }
.timber-halls { fill: rgba(87,57,35,.22); stroke: #aa8051; stroke-width: 7; opacity: 0; transition: opacity .45s ease; }
.timbers line { stroke: #b88b56; stroke-width: 7; }
.church-silhouette { fill: rgba(196,181,145,.08); stroke: #c9b481; stroke-width: 5; opacity: 0; transition: opacity .45s ease; }
.w-label { fill: #d0c09f; font-family: var(--sans); font-size: 18px; letter-spacing: .1em; opacity: 0; }
.wroxeter-visual[data-wroxeter="roman"] .roman-label { opacity: 1; }
.wroxeter-visual[data-wroxeter="timber"] .roman-basilica { opacity: .18; }
.wroxeter-visual[data-wroxeter="timber"] .timber-halls, .wroxeter-visual[data-wroxeter="timber"] .ruin-stones, .wroxeter-visual[data-wroxeter="timber"] .timber-label { opacity: 1; }
.wroxeter-visual[data-wroxeter="sacred"] .roman-basilica { opacity: .1; }
.wroxeter-visual[data-wroxeter="sacred"] .timber-halls { opacity: .18; }
.wroxeter-visual[data-wroxeter="sacred"] .ruin-stones, .wroxeter-visual[data-wroxeter="sacred"] .church-silhouette, .wroxeter-visual[data-wroxeter="sacred"] .sacred-label { opacity: 1; }
.wroxeter-controls { justify-content: center; padding: 0 18px 20px; }
.wroxeter-copy-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 24px; }
.wroxeter-copy-grid article { padding: 23px; border: 1px solid var(--line); background: var(--panel); }
.wroxeter-copy-grid h3 { margin-top: 13px; }

.compare-towns { max-width: 1100px; }
.town-tabs { justify-content: center; }
.town-comparison { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; margin: 30px 0; }
.town-comparison article { padding: 30px; border: 1px solid var(--line); background: var(--panel); }
.cunetio-card { border-top: 4px solid var(--brick) !important; }
.wroxeter-card { border-top: 4px solid var(--green) !important; }
.versus { align-self: center; color: var(--gold); font-family: var(--display); font-size: 1.4rem; }

.stone-journey-section { max-width: 1220px; }
.stone-journey { margin: 36px 0 44px; }
.journey-stage { min-height: 330px; padding: 42px; border: 1px solid var(--line); background: radial-gradient(circle at 23% 45%, rgba(201,168,95,.14), transparent 28%), #11120f; display: grid; grid-template-columns: .65fr 1.35fr; gap: 55px; align-items: center; }
.stone-block { position: relative; width: 210px; height: 160px; margin: auto; background: linear-gradient(135deg, #d0bea0, #78684f); border: 3px solid #e0d0ad; box-shadow: 22px 20px 0 #574b3a, 0 30px 50px rgba(0,0,0,.35); transition: transform .45s ease, border-radius .45s ease; }
.stone-block::before { content: ""; position: absolute; left: 15px; right: 15px; top: 50%; border-top: 2px solid rgba(76,62,45,.45); }
.stone-block[data-stone-stage="1"] { transform: rotate(16deg) translateY(25px); }
.stone-block[data-stone-stage="2"] { transform: translateX(45px) rotate(-8deg); }
.stone-block[data-stone-stage="3"] { width: 185px; height: 185px; border-radius: 50%; box-shadow: 16px 15px 0 #574b3a, inset 0 0 0 32px rgba(40,33,25,.5), 0 30px 50px rgba(0,0,0,.35); }
.stone-mark { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(56,45,33,.65); font-family: var(--display); font-size: 3rem; }
.journey-copy h3 { font-size: 2rem; }
.journey-controls { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); }
.stone-button { min-height: 84px; border: 0; background: #171814; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; text-align: left; }
.stone-button b { color: var(--gold); font-family: var(--display); font-size: 1.6rem; }
.stone-button span { font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; }
.reuse-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.reuse-cards article { padding: 28px; border: 1px solid var(--line); background: var(--panel); }
.reuse-symbol { width: 76px; height: 76px; margin-bottom: 22px; display: grid; place-items: center; border: 2px solid var(--gold); color: var(--gold-2); font-family: var(--display); font-size: 2rem; }
.font-symbol { border-radius: 50%; box-shadow: inset 0 0 0 15px rgba(201,168,95,.12); }
.wall-symbol { background: repeating-linear-gradient(0deg, transparent 0 20px, rgba(201,168,95,.2) 21px 23px); }

.final-question { text-align: center; }
.judgement-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 35px 0 20px; }
.judgement-button { min-height: 70px; }
.judgement-answer { min-height: 120px; padding: 24px; border: 1px solid var(--line); background: var(--panel); text-align: left; }
.judgement-answer h3 { font-size: 1.45rem; }

.evidence-section { max-width: 1040px; }
.evidence-grid { display: grid; gap: 12px; }
.evidence-grid details { border: 1px solid var(--line); background: var(--panel); padding: 0 20px; }
.evidence-grid summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 14px; padding: 18px 0; font-family: var(--display); }
.evidence-grid summary::-webkit-details-marker { display: none; }
.evidence-grid ul { margin-top: 0; color: #beb4a4; }

.research-download { max-width: var(--max); margin: 20px auto 90px; padding: 42px; border: 1px solid var(--gold); background: linear-gradient(120deg, rgba(201,168,95,.12), rgba(127,154,120,.06)); display: grid; grid-template-columns: 1fr auto; gap: 25px; align-items: center; }
.research-download h2 { font-size: clamp(2rem, 4vw, 3.3rem); }
.research-download p { max-width: 760px; color: #bbb19f; }
.conclusion { text-align: center; }
.conclusion p { font-size: 1.12rem; }
.sources { border-top: 1px solid var(--line); background: #11120f; }
.sources ol { columns: 2; column-gap: 55px; padding-left: 24px; }
.sources li { break-inside: avoid; margin: 0 0 15px; color: #b9af9e; font-size: .92rem; }
.return-section { padding: 10px 30px 80px; text-align: center; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 25px max(5vw, 30px); border-top: 1px solid var(--line); color: #8f877a; font-family: var(--sans); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 1000px) {
  .site-header nav { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; }
  .hero-stone { max-width: 640px; margin: -40px auto 0; opacity: .7; }
  .split, .phase-display, .gate-investigation, .network-grid, .cunetio-workbench, .hinge-section { grid-template-columns: 1fr; }
  .part-banner { grid-template-columns: 1fr; gap: 15px; }
  .part-number { font-size: 6rem; }
  .dark-panel { grid-template-columns: 1fr; }
  .panel-number { display: none; }
  .panel-content { grid-column: 1; }
  .case-band { grid-template-columns: 1fr 1fr; }
  .section-heading { display: block; }
  .section-heading > p { max-width: none; }
  .wroxeter-copy-grid, .reuse-cards { grid-template-columns: 1fr; }
  .research-download { margin-inline: 24px; grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .site-header { height: 60px; }
  .section-nav { top: 0; justify-content: flex-start; }
  .hero { padding: 58px 20px 44px; }
  .hero h1 { font-size: 3.2rem; }
  .hero h1 span { font-size: .64em; }
  .hero-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
  .section { padding: 70px 20px; }
  .part-banner { padding: 54px 20px; }
  .thesis-grid, .town-comparison { grid-template-columns: 1fr; }
  .thesis-arrow { transform: rotate(90deg); justify-self: center; }
  .versus { justify-self: center; }
  .case-band { grid-template-columns: 1fr; }
  .phase-controls, .function-controls, .wroxeter-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .phase-visual { min-height: 320px; }
  .interpretation-list { grid-template-columns: 1fr; }
  .quarry-choice, .labour-meter, .judgement-options { grid-template-columns: 1fr; }
  .journey-stage { grid-template-columns: 1fr; padding: 30px 20px; }
  .journey-controls { grid-template-columns: 1fr 1fr; }
  .stone-block { transform: scale(.82); }
  .stone-block[data-stone-stage="1"] { transform: scale(.82) rotate(16deg) translateY(25px); }
  .stone-block[data-stone-stage="2"] { transform: scale(.82) translateX(25px) rotate(-8deg); }
  .stone-block[data-stone-stage="3"] { transform: scale(.82); }
  .sources ol { columns: 1; }
  .site-footer { display: grid; }
  .source-note, .evidence-strip, .caution-box { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}