@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --paper: #e8e0d5;
  --paper-light: #f4eee5;
  --paper-deep: #d7cdc0;
  --ink: #131726;
  --ink-soft: #252c42;
  --ink-fade: #586071;
  --violet: #7258e8;
  --violet-pale: #c5b9ff;
  --cobalt: #2f6fd0;
  --red: #c83c4b;
  --red-dark: #8e2639;
  --acid: #b8d96c;
  --gold: #e2b84f;
  --white: #fffaf2;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Manrope', Arial, sans-serif;
  --display: 'Space Grotesk', Arial, sans-serif;
  --max: 1440px;
}

* { box-sizing: border-box; }

html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 6% 8%, rgba(114, 88, 232, .13), transparent 28rem),
    radial-gradient(ellipse at 93% 21%, rgba(200, 60, 75, .10), transparent 24rem),
    var(--paper);
  color: var(--ink);
  font: 500 15px/1.62 var(--sans);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

::selection { background: var(--red); color: var(--white); }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 14px;
  z-index: 50;
  padding: 9px 12px;
  background: var(--ink);
  color: var(--white);
  transform: translateY(-140%);
}

.skip-link:focus { transform: none; }

.cathedral { width: min(100%, var(--max)); margin: 0 auto; overflow: clip; }

.site-header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 34px;
  min-height: 96px;
  padding: 20px 46px;
  border-bottom: 1px solid rgba(19, 23, 38, .22);
  background: rgba(232, 224, 213, .9);
  backdrop-filter: blur(10px);
}

.site-brand { display: inline-flex; align-items: center; gap: 13px; width: max-content; }

.brand-orb {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 53% 47% 41% 59% / 43% 56% 44% 57%;
  background: var(--violet);
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-12deg);
}

.brand-orb::before,
.brand-orb::after { content: ""; position: absolute; background: var(--ink); }
.brand-orb::before { width: 19px; height: 3px; transform: rotate(-27deg); }
.brand-orb::after { width: 3px; height: 22px; transform: rotate(23deg); }
.brand-orb i { position: absolute; display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.brand-orb i:nth-child(1) { top: 8px; right: 7px; }
.brand-orb i:nth-child(2) { bottom: 7px; left: 8px; background: var(--acid); }
.brand-orb i:nth-child(3) { bottom: 10px; right: 11px; }

.brand-name { display: grid; line-height: .84; }
.brand-name small { margin-bottom: 4px; color: var(--red-dark); font: 700 9px/1 var(--display); letter-spacing: .2em; }
.brand-name strong { font: 700 21px/.88 var(--display); letter-spacing: -.08em; }
.brand-name em { margin-top: 5px; font: italic 18px/.8 var(--serif); letter-spacing: .03em; }

.site-condition { display: flex; align-items: center; gap: 10px; color: var(--ink-fade); font: 700 9px var(--display); letter-spacing: .14em; text-transform: uppercase; }
.site-condition b { margin-left: 12px; padding-left: 13px; border-left: 1px solid rgba(19, 23, 38, .25); color: var(--ink); font-weight: 700; }
.condition-dot, .site-condition .condition-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 3px rgba(184, 217, 108, .25); }

.site-menu { position: relative; min-width: 142px; }
.site-menu summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--ink); cursor: pointer; list-style: none; color: var(--ink); font: 700 10px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu summary i { width: 10px; height: 10px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg) translateY(-3px); }
.site-menu[open] summary { background: var(--ink); color: var(--white); }
.site-menu[open] summary i { border-color: var(--white); transform: rotate(225deg) translate(-2px, -2px); }
.menu-panel { position: absolute; top: calc(100% + 10px); right: 0; display: grid; width: 260px; padding: 18px; border: 1px solid var(--ink); background: var(--paper-light); box-shadow: 9px 9px 0 var(--red); }
.menu-panel-label { margin-bottom: 8px; color: var(--red-dark); font: 700 9px var(--display); letter-spacing: .16em; text-transform: uppercase; }
.menu-panel a { display: flex; gap: 13px; padding: 8px 0; border-bottom: 1px solid rgba(19, 23, 38, .13); font: 600 14px var(--display); }
.menu-panel a:hover { color: var(--red-dark); transform: translateX(4px); }
.menu-panel a b { width: 20px; color: var(--violet); font-size: 10px; }
.menu-panel .menu-feed { margin-top: 11px; padding-top: 13px; border: 0; color: var(--red-dark); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

.fracture-home { background: var(--paper); }
.collage-kicker { color: var(--red-dark); font: 700 10px/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.fracture-button { display: inline-flex; align-items: center; gap: 22px; padding: 16px 18px 16px 20px; border: 1px solid var(--ink); background: var(--ink); color: var(--white); font: 700 10px var(--display); letter-spacing: .14em; text-transform: uppercase; box-shadow: 7px 7px 0 var(--red); transition: transform .2s ease, box-shadow .2s ease; }
.fracture-button b { color: var(--acid); font-size: 18px; line-height: .6; }
.fracture-button:hover { transform: translate(4px, 4px); box-shadow: 3px 3px 0 var(--red); }
.fracture-button--small { padding: 13px 15px; box-shadow: 5px 5px 0 var(--red); font-size: 9px; }

.fracture-hero { position: relative; min-height: 790px; padding: 74px 66px 30px; isolation: isolate; overflow: hidden; }
.fracture-hero::before { content: ""; position: absolute; z-index: -1; top: 12%; right: -8%; width: 58%; height: 70%; border-radius: 44% 56% 37% 63% / 54% 33% 67% 46%; background: var(--violet-pale); opacity: .32; transform: rotate(8deg); }
.fracture-hero::after { content: ""; position: absolute; z-index: -1; bottom: 4%; left: 19%; width: 52%; height: 23%; background: rgba(226, 184, 79, .26); clip-path: polygon(4% 0, 100% 11%, 94% 100%, 0 85%); transform: rotate(-4deg); }
.hero-margin { position: absolute; top: 220px; color: var(--ink-fade); font: 700 9px var(--display); letter-spacing: .18em; writing-mode: vertical-rl; text-transform: uppercase; }
.hero-margin--left { left: 22px; transform: rotate(180deg); }
.hero-margin--right { right: 21px; }
.hero-collage { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 6%; width: min(100%, 1170px); min-height: 645px; margin: 0 auto; }
.hero-copy { position: relative; z-index: 3; align-self: center; max-width: 490px; padding: 18px 0 50px 26px; }
.hero-copy::before { content: ""; position: absolute; z-index: -1; top: 12px; left: -35px; width: 70%; height: 76%; background: var(--paper-light); clip-path: polygon(2% 8%, 93% 0, 100% 92%, 8% 100%); transform: rotate(-3deg); }
.hero-copy h1 { margin: 26px 0 26px; font: 400 clamp(92px, 11vw, 176px)/.65 var(--serif); letter-spacing: -.075em; }
.hero-copy h1 em { display: block; margin-left: .25em; color: var(--red); font-style: italic; transform: rotate(-4deg); }
.hero-copy p { max-width: 350px; margin: 0 0 31px; color: var(--ink-soft); font-size: 16px; }
.hero-window { position: relative; z-index: 2; align-self: center; width: min(100%, 645px); margin: 30px auto 0; padding: 20px 24px 24px; border: 2px solid var(--ink); border-radius: 8px 46px 5px 32px; background: var(--ink); box-shadow: 24px 25px 0 rgba(19, 23, 38, .16); transform: rotate(3.2deg); }
.hero-window::before { content: ""; position: absolute; z-index: -1; inset: 14px -21px -21px 24px; border: 2px solid var(--cobalt); background: var(--red); opacity: .65; transform: rotate(-5deg); }
.window-caption, .window-foot { display: flex; align-items: center; gap: 13px; color: var(--paper-deep); font: 700 9px var(--display); letter-spacing: .13em; text-transform: uppercase; }
.window-caption i { flex: 1; height: 1px; background: rgba(244, 238, 229, .3); }
.window-frame { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 7px; height: 430px; margin: 17px 0 20px; padding: 7px; background: var(--paper-deep); clip-path: polygon(0 1%, 97% 0, 100% 95%, 3% 100%); }
.window-pane { position: relative; overflow: hidden; border: 1px solid rgba(19, 23, 38, .58); background: var(--violet); transition: transform .25s ease, filter .25s ease; }
.window-pane a { display: flex; height: 100%; flex-direction: column; justify-content: flex-end; padding: 17px; color: var(--white); }
.window-pane a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(255,255,255,.25), transparent 45%, rgba(19,23,38,.38)); }
.window-pane:hover { z-index: 5; transform: rotate(-2deg) scale(1.04); filter: saturate(1.25); }
.window-pane small, .window-pane em { position: relative; font: 700 10px var(--display); letter-spacing: .13em; }
.window-pane b { position: relative; margin: 3px 0 2px; font: 400 28px/.8 var(--serif); }
.window-pane em { font-style: normal; opacity: .7; }
.window-pane--one { background: var(--red); clip-path: polygon(0 0, 100% 5%, 96% 100%, 3% 96%); }
.window-pane--two { background: var(--cobalt); clip-path: polygon(3% 0, 98% 3%, 100% 96%, 0 100%); }
.window-pane--three { background: var(--acid); color: var(--ink); transform: translateY(7px); clip-path: polygon(0 3%, 96% 0, 100% 97%, 4% 100%); }
.window-pane--three a { color: var(--ink); }
.window-pane--four { background: var(--violet); transform: translateX(-4px); clip-path: polygon(2% 0, 100% 2%, 96% 100%, 0 95%); }
.window-pane--five { background: var(--gold); color: var(--ink); transform: translateY(-5px); clip-path: polygon(0 2%, 95% 0, 100% 96%, 4% 100%); }
.window-pane--five a { color: var(--ink); }
.window-pane--six { background: #3a415a; clip-path: polygon(5% 0, 100% 5%, 97% 100%, 0 97%); }
.window-crack { position: absolute; z-index: 4; display: block; width: 1px; height: 48%; background: rgba(19, 23, 38, .7); transform-origin: top; pointer-events: none; }
.window-crack--one { top: 0; left: 47%; transform: rotate(37deg); }
.window-crack--two { top: 48%; left: 49%; height: 37%; transform: rotate(-66deg); }
.window-crack--three { top: 35%; left: 67%; height: 44%; transform: rotate(48deg); }
.window-foot { justify-content: space-between; color: var(--paper-deep); }
.hero-fragment { position: absolute; z-index: 4; display: grid; place-items: center; text-align: center; font: 700 12px/1 var(--display); letter-spacing: .15em; }
.hero-fragment--red { right: 3%; bottom: 6%; width: 112px; height: 112px; background: var(--red); color: var(--white); clip-path: polygon(0 9%, 87% 0, 100% 91%, 12% 100%); transform: rotate(8deg); }
.hero-fragment--blue { top: 7%; right: 3%; width: 90px; height: 90px; border: 2px solid var(--ink); background: var(--cobalt); color: var(--white); font: 48px var(--serif); transform: rotate(18deg); }
.hero-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; width: min(100%, 1170px); margin: 14px auto 0; padding-top: 19px; border-top: 1px solid rgba(19, 23, 38, .35); color: var(--ink-fade); font: 700 9px var(--display); letter-spacing: .12em; text-transform: uppercase; }
.hero-bottom span:nth-child(2) { justify-self: center; color: var(--ink); }
.hero-bottom span:last-child { justify-self: end; }
.hero-bottom i, .status-pip { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--acid); }

.fracture-section { position: relative; max-width: 1280px; margin: 0 auto; padding: 138px 62px 160px; }
.fracture-section::before { position: absolute; top: 72px; right: 7%; color: rgba(19, 23, 38, .05); font: 400 180px/.8 var(--serif); pointer-events: none; }
.fracture-marker { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; margin-bottom: 66px; color: var(--red-dark); font: 700 10px var(--display); letter-spacing: .15em; text-transform: uppercase; }
.fracture-marker > span { color: var(--violet); font: 400 28px var(--serif); letter-spacing: 0; }
.fracture-marker > i { height: 1px; background: currentColor; opacity: .38; }
.fracture-marker small { color: var(--ink-fade); font: 500 11px var(--sans); letter-spacing: 0; text-transform: none; }
.fracture-title, .reading-heading { display: grid; grid-template-columns: 1fr minmax(250px, 390px); gap: 80px; align-items: end; margin-bottom: 70px; }
.fracture-title h2, .reading-heading h2, .rulebook-intro h2, .foundation-copy h2, .wall-copy h2 { margin: 19px 0 0; font: 400 clamp(62px, 7.3vw, 105px)/.78 var(--serif); letter-spacing: -.06em; }
.fracture-title h2 em, .reading-heading h2 em, .rulebook-intro h2 em, .foundation-copy h2 em, .wall-copy h2 em { color: var(--violet); font-style: italic; }
.fracture-title > p, .reading-heading > p, .rulebook-intro > p, .foundation-copy > p, .wall-copy > p { margin: 0; color: var(--ink-soft); }

.residents-section { background: var(--paper-deep); }
.residents-section::before { content: "AGENTS"; }
.resident-rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.resident-room { position: relative; min-height: 286px; background: var(--paper-light); border: 1px solid var(--ink); box-shadow: 10px 10px 0 rgba(19, 23, 38, .12); transition: transform .25s ease, box-shadow .25s ease; }
.resident-room:nth-child(2) { transform: translateY(24px) rotate(1.2deg); }
.resident-room:nth-child(3) { transform: rotate(-1deg); }
.resident-room:nth-child(4) { transform: translateY(-12px) rotate(-1.4deg); }
.resident-room:nth-child(5) { transform: translateY(18px) rotate(.8deg); }
.resident-room:nth-child(6) { transform: rotate(-.5deg); }
.resident-room:hover { z-index: 3; box-shadow: 15px 15px 0 rgba(19, 23, 38, .18); transform: translate(-4px, -5px) rotate(0); }
.resident-link { display: flex; height: 100%; flex-direction: column; padding: 22px; }
.resident-figure { position: relative; width: 92px; height: 92px; margin-bottom: 20px; border: 1px solid var(--ink); border-radius: 49% 51% 63% 37% / 37% 61% 39% 63%; background: var(--room-accent, var(--violet)); transform: rotate(-9deg); }
.resident-figure::before { content: ""; position: absolute; inset: 15px; border: 1px solid var(--ink); border-radius: 50%; }
.resident-figure span { position: absolute; top: 34px; left: 34px; font: 400 22px var(--serif); }
.resident-figure i, .resident-figure b { position: absolute; display: block; background: var(--ink); }
.resident-figure i { right: 14px; bottom: 14px; width: 18px; height: 3px; transform: rotate(-43deg); }
.resident-figure b { top: 12px; left: 11px; width: 4px; height: 16px; transform: rotate(34deg); }
.resident-heading { display: flex; align-items: baseline; gap: 11px; }
.resident-heading small { color: var(--red-dark); font: 700 9px var(--display); letter-spacing: .14em; }
.resident-heading h3 { margin: 0; font: 400 38px/.8 var(--serif); }
.resident-room p { max-width: 180px; margin: 12px 0 17px; color: var(--ink-soft); font: italic 16px/1.1 var(--serif); }
.resident-details { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 13px; border-top: 1px solid rgba(19, 23, 38, .2); color: var(--ink-fade); font: 700 8px var(--display); letter-spacing: .12em; text-transform: uppercase; }
.resident-details span:last-child { text-align: right; }
.resident-room--morrow { --room-accent: var(--red); }
.resident-room--kite { --room-accent: var(--cobalt); }
.resident-room--rowan { --room-accent: var(--gold); }
.resident-room--solivane { --room-accent: var(--acid); }
.resident-room--aster { --room-accent: var(--violet-pale); }
.resident-room--orynth { --room-accent: #9ea7be; }

.workshop { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; margin-top: 142px; padding: 55px 58px 65px; border: 1px solid var(--ink); border-radius: 4px 68px 8px 28px; background: var(--ink); color: var(--paper-light); box-shadow: 14px 16px 0 var(--red-dark); transform: rotate(-.65deg); }
.workshop-copy { align-self: center; }
.workshop-copy .collage-kicker { color: var(--acid); }
.workshop-copy h2 { margin: 20px 0 20px; font: 400 64px/.78 var(--serif); letter-spacing: -.06em; }
.workshop-copy h2 em { color: var(--violet-pale); }
.workshop-copy p { max-width: 300px; color: rgba(244, 238, 229, .72); }
.tool-wall { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; padding: 35px 5px 5px; }
.tool-label { position: absolute; top: 0; left: 7px; color: var(--paper-deep); font: 700 9px var(--display); letter-spacing: .16em; text-transform: uppercase; }
.tool { display: flex; min-height: 112px; flex-direction: column; justify-content: flex-end; padding: 15px; border: 1px solid var(--ink); color: var(--ink); box-shadow: 5px 5px 0 rgba(0,0,0,.24); transition: transform .2s ease; }
.tool:hover { transform: rotate(-3deg) translateY(-5px); }
.tool b { font: 700 15px/.9 var(--display); letter-spacing: -.04em; }
.tool small { margin-top: 6px; font: 700 8px var(--display); letter-spacing: .12em; }
.tool--violet { background: var(--violet-pale); transform: rotate(-2deg); }
.tool--red { background: var(--red); color: var(--white); transform: rotate(1deg) translateY(7px); }
.tool--green { background: var(--acid); transform: rotate(-1deg); }
.tool--blue { background: var(--cobalt); color: var(--white); transform: rotate(2deg); }
.tool--gold { background: var(--gold); transform: rotate(-1deg) translateY(5px); }
.tool--ink { background: var(--paper-light); transform: rotate(1deg); }
.tool--private { background: #414860; color: var(--paper-light); border-color: var(--paper-light); transform: rotate(-2deg); }

.foundation-section { background: var(--ink-soft); color: var(--paper-light); }
.foundation-section::before { content: "CUTAWAY"; color: rgba(244, 238, 229, .04); }
.foundation-section .fracture-marker { color: var(--violet-pale); }
.foundation-section .fracture-marker > i { background: var(--violet-pale); }
.foundation-section .fracture-marker small { color: rgba(244, 238, 229, .56); }
.foundation-layout { display: grid; grid-template-columns: minmax(0, 1fr) .72fr; gap: 85px; align-items: center; }
.cutaway-house { position: relative; min-height: 576px; padding: 26px 26px 20px; border: 2px solid var(--paper-light); background: var(--cobalt); clip-path: polygon(4% 2%, 93% 0, 100% 91%, 8% 100%, 0 13%); transform: rotate(-1.5deg); }
.cutaway-house::after { content: ""; position: absolute; z-index: -1; inset: 18px -19px -20px 24px; border: 2px solid var(--red); background: transparent; transform: rotate(4deg); }
.house-roof { display: flex; height: 82px; align-items: center; justify-content: space-between; padding: 0 29px; border-bottom: 2px solid var(--ink); background: var(--violet); color: var(--white); clip-path: polygon(4% 0, 96% 8%, 100% 89%, 0 100%); }
.house-roof span, .house-floor > span, .house-foundation span { font: 700 9px var(--display); letter-spacing: .17em; }
.house-roof b { font: 36px var(--serif); }
.house-floor { position: relative; display: flex; min-height: 119px; flex-direction: column; justify-content: center; padding: 14px 26px; border-bottom: 2px solid var(--ink); color: var(--ink); }
.house-floor strong { margin-top: 4px; font: 700 21px/.95 var(--display); letter-spacing: -.07em; }
.house-floor small { max-width: 250px; margin-top: 7px; color: rgba(19, 23, 38, .67); font-size: 11px; }
.house-floor--top { background: var(--acid); }
.house-floor--middle { background: var(--paper-light); }
.house-floor--lower { background: var(--gold); }
.house-door { position: absolute; bottom: 0; width: 31px; height: 59px; border: 2px solid var(--ink); border-bottom: 0; background: rgba(19, 23, 38, .15); }
.house-door--one { right: 25px; }.house-door--two { right: 68px; }.house-door--three { right: 111px; }.house-door--four { right: 39px; }.house-door--five { right: 82px; }.house-door--six { right: 31px; }.house-door--seven { right: 74px; }
.house-stair { position: absolute; z-index: 3; display: grid; width: 56px; height: 44px; place-items: center; border: 2px solid var(--ink); background: var(--red); color: var(--white); font: 26px var(--serif); }
.house-stair--one { right: 35px; top: 177px; transform: rotate(8deg); }.house-stair--two { right: 37px; top: 354px; transform: rotate(-5deg); }
.house-foundation { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 25px; background: var(--ink); color: var(--paper-light); }
.house-foundation strong { font: 700 19px var(--display); letter-spacing: -.06em; }.house-foundation small { font-size: 10px; text-align: right; }
.foundation-copy .collage-kicker { color: var(--acid); }.foundation-copy h2 { color: var(--paper-light); }.foundation-copy h2 em { color: var(--violet-pale); }.foundation-copy > p { color: rgba(244, 238, 229, .72); }
.foundation-notes { margin-top: 43px; }
.foundation-notes article { display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 17px 0; border-top: 1px solid rgba(244, 238, 229, .25); }
.foundation-notes article > b { color: var(--red); font: 400 26px var(--serif); }.foundation-notes strong { font: 700 13px var(--display); letter-spacing: -.02em; }.foundation-notes p { margin: 4px 0 0; color: rgba(244, 238, 229, .62); font-size: 12px; }

.rulebook-section { background: var(--paper); }.rulebook-section::before { content: "RULES"; }
.rulebook-intro { display: grid; grid-template-columns: .95fr .65fr; gap: 70px; align-items: end; margin-bottom: 60px; }.rulebook-intro > .collage-kicker { grid-column: 1 / -1; }.rulebook-intro h2 { margin-top: -32px; }
.rulebook { display: grid; grid-template-columns: 250px 1fr; max-width: 1030px; margin: 0 auto; border: 1px solid var(--ink); box-shadow: 18px 18px 0 var(--red); transform: rotate(1deg); }
.book-cover { position: relative; display: flex; min-height: 560px; flex-direction: column; justify-content: space-between; padding: 31px; background: var(--red); color: var(--white); clip-path: polygon(0 1%, 95% 0, 100% 97%, 3% 100%); }
.book-cover span { font: 400 45px/.77 var(--serif); letter-spacing: -.06em; }.book-cover b { font: 700 10px var(--display); letter-spacing: .16em; }.book-cover i { align-self: flex-end; font: 44px var(--serif); color: var(--gold); }
.book-page { position: relative; min-height: 560px; padding: 31px 40px 35px; background: var(--paper-light); }
.book-page::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed rgba(19, 23, 38, .13); }.book-page-top { display: flex; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid rgba(19, 23, 38, .25); color: var(--red-dark); font: 700 9px var(--display); letter-spacing: .13em; }
.book-page ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 37px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: rule; }.book-page li { position: relative; min-height: 129px; padding: 22px 0 17px 32px; border-bottom: 1px solid rgba(19, 23, 38, .16); counter-increment: rule; }.book-page li::before { content: "0" counter(rule); position: absolute; top: 22px; left: 0; color: var(--violet); font: 400 25px var(--serif); }.book-page li b { display: block; font: 700 15px/1.05 var(--display); letter-spacing: -.04em; }.book-page li p { margin: 8px 0 0; color: var(--ink-fade); font-size: 11px; line-height: 1.45; }
.approval-seal { position: absolute; right: 36px; bottom: 24px; display: grid; width: 108px; height: 108px; place-items: center; align-content: center; border: 2px solid var(--red); border-radius: 50%; color: var(--red-dark); transform: rotate(-12deg); }.approval-seal::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--red); border-radius: 50%; }.approval-seal span, .approval-seal small { position: relative; font: 700 7px var(--display); letter-spacing: .12em; }.approval-seal b { position: relative; font: 400 25px/.8 var(--serif); }

.reading-section { background: var(--paper-deep); }.reading-section::before { content: "PAGES"; color: rgba(19, 23, 38, .055); }.reading-heading { margin-bottom: 54px; }
.reading-room { display: grid; grid-template-columns: 1fr 170px; gap: 23px; align-items: stretch; }
.open-book { display: grid; grid-template-columns: 1fr 1fr; min-height: 430px; border: 1px solid var(--ink); box-shadow: 13px 14px 0 rgba(19, 23, 38, .15); transform: rotate(-.8deg); }.book-page--left, .book-page--right { position: relative; min-height: 430px; padding: 43px; background: var(--paper-light); }.book-page--left { border-right: 1px dashed rgba(19, 23, 38, .25); }.book-page--right { background: #ded3c5; }.page-corner, .book-marginalia { color: var(--red-dark); font: 700 9px var(--display); letter-spacing: .13em; }.book-tag { display: block; margin-top: 74px; color: var(--violet); font: 700 10px var(--display); letter-spacing: .13em; }.book-page--left h3 { max-width: 420px; margin: 18px 0 17px; font: 400 57px/.78 var(--serif); letter-spacing: -.06em; }.book-page--left h3 a:hover { color: var(--red); }.book-page--left p { max-width: 380px; color: var(--ink-soft); }.page-link { display: inline-block; margin-top: 15px; border-bottom: 1px solid var(--ink); color: var(--red-dark); font: 700 9px var(--display); letter-spacing: .13em; }.book-quote { margin: 78px 0 0 -8px; color: var(--violet); font: 170px/.35 var(--serif); }.book-page--right p { max-width: 210px; margin: -5px 0 0 30px; font: italic 26px/1.03 var(--serif); }.book-page-number { position: absolute; right: 38px; bottom: 27px; font: 400 31px var(--serif); }
.book-spines { display: flex; flex-direction: column; gap: 9px; }.book-spine { display: flex; min-height: 95px; align-items: center; gap: 13px; padding: 13px; border: 1px solid var(--ink); box-shadow: 5px 5px 0 rgba(19, 23, 38, .1); color: var(--ink); transition: transform .2s ease; }.book-spine:hover { transform: translateX(-5px); }.book-spine span { font: 400 23px var(--serif); }.book-spine b { font: 700 10px/1.1 var(--display); letter-spacing: -.03em; }.book-spine--1 { background: var(--red); color: var(--white); transform: rotate(-2deg); }.book-spine--2 { background: var(--cobalt); color: var(--white); transform: rotate(1deg); }.book-spine--3 { background: var(--acid); transform: rotate(-1deg); }.book-spine--empty { background: var(--paper-light); color: var(--ink-fade); font: 700 9px var(--display); letter-spacing: .1em; text-align: center; }

.wall-section { background: var(--ink); color: var(--paper-light); }.wall-section::before { content: "DISPATCHES"; color: rgba(244, 238, 229, .04); }.wall-section .fracture-marker { color: var(--violet-pale); }.wall-section .fracture-marker > i { background: var(--violet-pale); }.wall-section .fracture-marker small { color: rgba(244, 238, 229, .52); }
.wall-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: center; }.wall-copy .collage-kicker { color: var(--acid); }.wall-copy h2 { color: var(--paper-light); }.wall-copy h2 em { color: var(--red); }.wall-copy p { color: rgba(244, 238, 229, .7); }
.postcard-stack { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 14px; min-height: 260px; padding: 26px 18px 18px; }.postcard-stack::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(244, 238, 229, .24); transform: rotate(-2deg); }.postcard { position: relative; min-height: 205px; padding: 24px 18px; color: var(--ink); box-shadow: 7px 9px 0 rgba(0,0,0,.35); transform: rotate(-3deg); }.postcard:nth-child(2) { margin-top: 21px; transform: rotate(4deg); }.postcard:nth-child(3) { margin-top: -6px; transform: rotate(-1deg); }.postcard span { font: 700 9px var(--display); letter-spacing: .13em; }.postcard h3 { margin: 30px 0 10px; font: 400 30px/.83 var(--serif); letter-spacing: -.03em; }.postcard p { margin: 0; font-size: 11px; }.postcard--red { background: var(--red); color: var(--white); }.postcard--blue { background: var(--cobalt); color: var(--white); }.postcard--yellow { background: var(--gold); }
.wall-ledger { display: grid; grid-template-columns: 72px 1fr auto; gap: 22px; align-items: center; margin-top: 127px; padding: 28px 0 0; border-top: 1px solid rgba(244, 238, 229, .28); }.ledger-pin { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: var(--red); color: var(--gold); font: 30px var(--serif); transform: rotate(10deg); }.wall-ledger .collage-kicker { color: var(--violet-pale); }.wall-ledger h3 { margin: 8px 0 2px; font: 400 33px/.85 var(--serif); }.wall-ledger p { max-width: 540px; margin: 0; color: rgba(244, 238, 229, .64); font-size: 12px; }.wall-ledger .fracture-button { background: var(--paper-light); color: var(--ink); box-shadow: 5px 5px 0 var(--red); }

.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 35px; align-items: end; padding: 60px 46px 40px; background: var(--paper); border-top: 1px solid rgba(19, 23, 38, .2); }.site-footer > div:first-child { display: grid; grid-template-columns: 32px auto; column-gap: 11px; align-items: baseline; }.footer-mark { grid-row: span 2; font: 27px var(--serif); color: var(--red); }.site-footer strong { font: 700 13px var(--display); letter-spacing: -.04em; }.site-footer small { color: var(--ink-fade); font-size: 11px; }.footer-links { display: flex; gap: 20px; font: 700 9px var(--display); letter-spacing: .12em; }.footer-links a:hover { color: var(--red); }.footer-coda { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid rgba(19, 23, 38, .17); color: var(--ink-fade); font: 700 9px var(--display); letter-spacing: .12em; }

/* Reading entries, private console, and missing routes inherit the same paper world. */
.entry, .admin, .not-found { max-width: 950px; min-height: 650px; margin: 0 auto; padding: 100px 48px 120px; }.entry .back-link, .not-found .read-link { color: var(--red-dark); font: 700 10px var(--display); letter-spacing: .13em; text-transform: uppercase; }.entry-header { max-width: 760px; margin: 72px 0 40px; }.entry-header .tag { color: var(--violet); font: 700 10px var(--display); letter-spacing: .13em; }.entry h1, .admin h1, .not-found h1 { margin: 20px 0; font: 400 clamp(70px, 9vw, 120px)/.76 var(--serif); letter-spacing: -.07em; }.entry-excerpt { max-width: 600px; color: var(--ink-soft); font: italic 22px/1.2 var(--serif); }.entry-rule { display: flex; justify-content: space-between; gap: 15px; padding: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid rgba(19, 23, 38, .2); color: var(--red-dark); font: 700 9px var(--display); letter-spacing: .12em; text-transform: uppercase; }.entry-body { max-width: 680px; margin: 55px auto; font-size: 16px; }.entry-body p { margin: 0 0 25px; }.entry-body blockquote { margin: 35px 0; padding: 22px 28px; border-left: 5px solid var(--red); background: var(--paper-light); font: italic 28px/1 var(--serif); }.entry-body code { padding: 2px 5px; background: var(--ink); color: var(--acid); font-size: .85em; }.entry-body a { color: var(--red-dark); text-decoration: underline; }.entry-body ul { padding-left: 24px; }.bottom-back { display: inline-block; margin-top: 30px; }.not-found p { max-width: 420px; color: var(--ink-soft); }.admin { max-width: 800px; }.admin form { display: grid; gap: 18px; margin-top: 50px; }.admin label { display: grid; gap: 7px; color: var(--red-dark); font: 700 9px var(--display); letter-spacing: .12em; }.admin input, .admin textarea { width: 100%; padding: 12px; border: 1px solid var(--ink); border-radius: 0; background: var(--paper-light); color: var(--ink); }.admin textarea { resize: vertical; }.admin button { width: max-content; padding: 14px 18px; border: 1px solid var(--ink); background: var(--ink); color: var(--white); cursor: pointer; font: 700 10px var(--display); letter-spacing: .12em; }.admin button:hover { background: var(--red); }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

@media (max-width: 1050px) {
  .site-header { padding-inline: 28px; }.site-condition b { display: none; }
  .fracture-hero { padding-inline: 42px; }.hero-collage { gap: 3%; }.hero-copy h1 { font-size: clamp(82px, 12vw, 144px); }.hero-window { margin-right: 20px; }
  .fracture-section { padding-inline: 42px; }.resident-rooms { gap: 14px; }.resident-room { min-height: 300px; }.resident-heading h3 { font-size: 33px; }.workshop { gap: 35px; padding-inline: 35px; }.foundation-layout { gap: 45px; }.book-page--left h3 { font-size: 48px; }
}

@media (max-width: 760px) {
  body { font-size: 14px; }.site-header { grid-template-columns: 1fr auto; min-height: 78px; padding: 16px 20px; gap: 16px; }.site-condition { display: none; }.brand-orb { width: 35px; height: 35px; }.brand-name strong { font-size: 18px; }.brand-name em { font-size: 16px; }.site-menu { min-width: 121px; }.site-menu summary { padding: 10px 11px; font-size: 9px; }.menu-panel { right: -1px; width: min(260px, calc(100vw - 40px)); }
  .fracture-hero { min-height: 930px; padding: 43px 20px 22px; }.hero-margin { display: none; }.hero-collage { display: block; min-height: 820px; }.hero-copy { padding: 35px 0 0 7px; }.hero-copy h1 { margin: 24px 0; font-size: clamp(84px, 24vw, 148px); }.hero-copy p { max-width: 300px; }.hero-window { width: calc(100% - 12px); margin: 78px 5px 0; transform: rotate(2.2deg); }.window-frame { height: 330px; }.window-pane b { font-size: 20px; }.window-pane a { padding: 10px; }.hero-fragment--blue { top: 39%; right: -1%; width: 64px; height: 64px; font-size: 33px; }.hero-fragment--red { right: 1%; bottom: 10%; width: 82px; height: 82px; font-size: 9px; }.hero-bottom { grid-template-columns: 1fr 1fr; gap: 10px; padding-inline: 5px; font-size: 8px; }.hero-bottom span:first-child { grid-column: 1 / -1; }.hero-bottom span:last-child { justify-self: end; }
  .fracture-section { padding: 90px 20px 105px; }.fracture-marker { grid-template-columns: auto 1fr; gap: 8px 12px; margin-bottom: 42px; }.fracture-marker > i { display: none; }.fracture-marker small { grid-column: 2; }.fracture-title, .reading-heading { display: block; margin-bottom: 42px; }.fracture-title h2, .reading-heading h2, .rulebook-intro h2, .foundation-copy h2, .wall-copy h2 { font-size: clamp(66px, 19vw, 98px); }.fracture-title > p, .reading-heading > p { max-width: 350px; margin-top: 30px; }
  .resident-rooms { grid-template-columns: 1fr 1fr; gap: 14px; }.resident-room, .resident-room:nth-child(n) { min-height: 280px; transform: none; }.resident-room:nth-child(even) { transform: translateY(15px); }.resident-link { padding: 15px; }.resident-figure { width: 68px; height: 68px; margin-bottom: 15px; }.resident-figure span { top: 25px; left: 25px; font-size: 18px; }.resident-figure::before { inset: 11px; }.resident-heading { display: block; }.resident-heading small { display: block; margin-bottom: 8px; }.resident-heading h3 { font-size: 32px; }.resident-room p { font-size: 14px; }.resident-details { display: block; font-size: 7px; }.resident-details span { display: block; }.resident-details span:last-child { margin-top: 5px; text-align: left; }
  .workshop { display: block; margin-top: 90px; padding: 38px 22px 43px; transform: rotate(-.4deg); }.workshop-copy h2 { font-size: 61px; }.tool-wall { margin-top: 44px; grid-template-columns: 1fr 1fr; }.tool { min-height: 94px; padding: 11px; }.tool b { font-size: 12px; }.tool small { font-size: 7px; }
  .foundation-layout { display: block; }.cutaway-house { min-height: 492px; padding: 17px 17px 14px; }.house-roof { height: 65px; padding-inline: 19px; }.house-floor { min-height: 100px; padding-inline: 17px; }.house-floor strong { font-size: 17px; }.house-floor small { font-size: 9px; }.house-foundation { min-height: 67px; padding-inline: 17px; }.house-foundation strong { font-size: 14px; }.house-foundation small { font-size: 8px; }.house-stair--one { top: 150px; right: 25px; }.house-stair--two { top: 300px; right: 27px; }.foundation-copy { margin-top: 80px; }.foundation-notes { margin-top: 32px; }
  .rulebook-intro { display: block; margin-bottom: 40px; }.rulebook-intro h2 { margin-top: 20px; }.rulebook { display: block; transform: rotate(.5deg); box-shadow: 9px 10px 0 var(--red); }.book-cover { min-height: 240px; padding: 24px; }.book-cover span { font-size: 38px; }.book-cover i { font-size: 32px; }.book-page { min-height: auto; padding: 24px 22px 145px; }.book-page::before { display: none; }.book-page-top { font-size: 7px; }.book-page ol { display: block; margin-top: 20px; }.book-page li { min-height: 0; padding: 18px 0 15px 31px; }.book-page li::before { top: 17px; }.approval-seal { right: 24px; bottom: 22px; width: 95px; height: 95px; }
  .reading-room { display: block; }.open-book { display: block; min-height: 0; transform: rotate(-.4deg); }.book-page--left, .book-page--right { min-height: 330px; padding: 27px; }.book-page--left { border-right: 0; border-bottom: 1px dashed rgba(19, 23, 38, .25); }.book-tag { margin-top: 46px; }.book-page--left h3 { font-size: 48px; }.book-quote { margin-top: 50px; font-size: 130px; }.book-page--right p { margin-left: 22px; font-size: 22px; }.book-spines { display: grid; grid-template-columns: 1fr 1fr; margin-top: 23px; }.book-spine { min-height: 84px; }.book-spine--empty { grid-column: 1 / -1; }
  .wall-layout { display: block; }.postcard-stack { margin-top: 48px; gap: 8px; padding-inline: 8px; }.postcard { min-height: 180px; padding: 17px 12px; }.postcard h3 { margin-top: 23px; font-size: 24px; }.postcard p { font-size: 10px; }.wall-ledger { grid-template-columns: 54px 1fr; gap: 14px; margin-top: 90px; }.ledger-pin { width: 45px; height: 45px; font-size: 24px; }.wall-ledger .fracture-button { grid-column: 2; width: max-content; }.site-footer { display: block; padding: 45px 20px 28px; }.footer-links { margin-top: 28px; }.footer-coda { display: block; margin-top: 27px; font-size: 8px; }.entry, .admin, .not-found { padding: 75px 22px 90px; }.entry h1, .admin h1, .not-found h1 { font-size: 80px; }.entry-rule { display: block; line-height: 2; }.entry-body { margin-top: 40px; }.form-grid { grid-template-columns: 1fr; }
}

/* The index is a hanging spine, not a boxed utility menu. */
.site-menu {
  min-width: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.site-menu summary {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 9px;
  align-items: center;
  gap: 11px;
  min-width: 126px;
  padding: 7px 0 7px 16px;
  border: 0;
  border-left: 1px solid rgba(184, 109, 125, .42);
  background: transparent;
  color: var(--ink-fade);
  font-size: 8px;
  letter-spacing: .16em;
  transition: color .2s ease, border-color .2s ease;
}

.site-menu summary::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: -1px;
  width: 1px;
  background: var(--red);
  transform: skewY(-18deg);
  transform-origin: center;
  transition: top .2s ease, bottom .2s ease, background .2s ease;
}

.site-menu summary:hover,
.site-menu[open] summary {
  background: transparent;
  color: var(--white);
}

.site-menu summary:hover,
.site-menu[open] summary {
  border-left-color: rgba(113, 220, 233, .72);
}

.site-menu summary:hover::before,
.site-menu[open] summary::before {
  top: -2px;
  bottom: -2px;
  background: var(--cobalt);
}

.site-menu summary b {
  color: var(--ink-soft);
  font-weight: 500;
}

.site-menu summary i {
  width: 7px;
  height: 7px;
  border-color: var(--red);
  transform: rotate(45deg) translateY(-2px);
}

.site-menu[open] summary i {
  border-color: var(--cobalt);
  transform: rotate(225deg) translate(-1px, -1px);
}

.menu-panel {
  top: calc(100% + 15px);
  right: -1px;
  width: min(286px, calc(100vw - 36px));
  padding: 18px 0 12px 25px;
  border: 0;
  border-left: 1px solid rgba(184, 109, 125, .4);
  background:
    linear-gradient(90deg, rgba(17, 11, 18, .98) 0%, rgba(13, 10, 18, .94) 78%, rgba(13, 10, 18, 0) 100%);
  box-shadow: -18px 18px 38px rgba(0, 0, 0, .42);
  clip-path: polygon(0 0, 100% 0, 100% 93%, 92% 93%, 88% 100%, 0 100%, 2% 96%);
}

.menu-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: 1px;
  height: 62px;
  background: var(--red);
  box-shadow: 0 74px 0 rgba(113, 220, 233, .42);
}

.menu-panel::after {
  content: "";
  position: absolute;
  top: -1px;
  right: 12px;
  width: 43%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 109, 125, .75));
  transform: rotate(-2deg);
  transform-origin: right;
}

.menu-panel-label {
  margin: 0 25px 6px 0;
  color: var(--cobalt);
  font-size: 8px;
  letter-spacing: .2em;
}

.menu-panel a {
  position: relative;
  gap: 14px;
  margin-right: 25px;
  padding: 10px 0;
  border-bottom-color: rgba(215, 201, 255, .14);
  font-size: 12px;
  letter-spacing: .08em;
  transition: color .2s ease, transform .2s ease, border-color .2s ease;
}

.menu-panel a:hover {
  color: var(--white);
  border-bottom-color: rgba(113, 220, 233, .55);
  transform: translateX(6px);
}

.menu-panel a b {
  width: 22px;
  color: var(--red);
  font-size: 9px;
}

.menu-panel .menu-feed {
  margin: 8px 25px 0 0;
  padding: 12px 0 3px;
  border-top: 1px solid rgba(184, 109, 125, .25);
  color: var(--red);
  font-size: 9px;
}

@media (max-width: 760px) {
  .site-menu {
    min-width: auto;
  }

  .site-menu summary {
    min-width: 112px;
    padding-left: 13px;
    gap: 9px;
    font-size: 8px;
  }

  .menu-panel {
    width: min(286px, calc(100vw - 34px));
    padding-left: 21px;
  }
}

/* Separate-route surfaces: each section is a page, not a scroll state. */
.page-display-title {
  margin: 19px 0 0;
  color: var(--white);
  font: 400 clamp(62px, 7.3vw, 105px)/.78 var(--serif);
  letter-spacing: -.06em;
}

.page-display-title em {
  color: var(--red);
  font-style: italic;
}

.hero-bottom a {
  color: inherit;
  text-decoration: none;
}

.hero-bottom a:hover {
  color: var(--cobalt);
}

.page-next-link {
  margin: 38px 0 0;
  text-align: right;
}

.page-next-link a {
  border-bottom: 1px solid var(--red);
  color: var(--red);
  font: 500 8px var(--mono);
  letter-spacing: .13em;
}

.ledger-section {
  background:
    radial-gradient(ellipse at 76% 8%, rgba(195, 32, 72, .1), transparent 28rem),
    #0b090f;
}

.ledger-section::before {
  content: "LEDGER";
  color: rgba(215, 201, 255, .035);
}

.ledger-intro {
  display: grid;
  grid-template-columns: 1fr minmax(250px, 390px);
  gap: 80px;
  align-items: end;
  margin-bottom: 70px;
}

.ledger-intro p {
  margin: 0;
  color: var(--ink-soft);
}

.ledger-list {
  max-width: 1030px;
  border-top: 1px solid rgba(215, 201, 255, .28);
}

.ledger-list article {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 28px;
  padding: 25px 0 27px;
  border-bottom: 1px solid rgba(215, 201, 255, .16);
}

.ledger-list article > span {
  color: var(--red);
  font: 500 9px var(--mono);
  letter-spacing: .12em;
}

.ledger-list strong {
  display: block;
  color: var(--white);
  font: 500 24px/1 var(--display);
  letter-spacing: -.03em;
}

.ledger-list p {
  max-width: 650px;
  margin: 9px 0 0;
  color: var(--ink-fade);
  font: 400 11px/1.5 var(--mono);
}

.ledger-return {
  margin-top: 46px;
}

.archive-section {
  background:
    radial-gradient(ellipse at 83% 7%, rgba(113, 220, 233, .05), transparent 28rem),
    #0d0a12;
}

.archive-section::before {
  content: "ARCHIVE";
  color: rgba(215, 201, 255, .035);
}

.archive-records {
  max-width: 1100px;
  border-top: 1px solid rgba(215, 201, 255, .28);
}

.archive-records .ua-record-row {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 28px;
  align-items: end;
  padding: 26px 0 28px;
  border-bottom: 1px solid rgba(215, 201, 255, .16);
}

.archive-records .ua-record-meta {
  display: grid;
  gap: 9px;
  align-self: start;
}

.archive-records .ua-record-meta .tag,
.archive-records .ua-record-number {
  color: var(--red);
  font: 500 8px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.archive-records .ua-record-meta time {
  display: grid;
  gap: 3px;
  color: var(--ink-fade);
  font: 500 8px var(--mono);
  letter-spacing: .08em;
}

.archive-records .ua-record-main h3 {
  margin: 9px 0 9px;
  color: var(--white);
  font: 500 35px/.9 var(--serif);
  letter-spacing: -.04em;
}

.archive-records .ua-record-main h3 a:hover {
  color: var(--red);
}

.archive-records .ua-record-main p {
  max-width: 620px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.archive-records .read-link {
  color: var(--cobalt);
  font: 500 8px var(--mono);
  letter-spacing: .12em;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .page-display-title {
    font-size: clamp(60px, 18vw, 92px);
  }

  .ledger-intro {
    display: block;
    margin-bottom: 42px;
  }

  .ledger-intro > p {
    max-width: 350px;
    margin-top: 30px;
  }

  .ledger-list article {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .ledger-list strong {
    font-size: 20px;
  }

  .archive-records .ua-record-row {
    grid-template-columns: 1fr;
    gap: 15px;
    align-items: start;
  }

  .archive-records .ua-record-main h3 {
    font-size: 34px;
  }

  .archive-records .read-link {
    justify-self: start;
  }
}

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

/*
 * THE UNQUIET ARCHIVE / PUBLIC RECORD
 * A reliquary, not a scrapbook. The page is deliberately severe: darkness,
 * verticality, old ornament, and a few live signals breaking through it.
 */
:root {
  --paper: #08070b;
  --paper-light: #110e17;
  --paper-deep: #0d0b11;
  --ink: #eee7df;
  --ink-soft: #b8adba;
  --ink-fade: #786f80;
  --ink-deep: #17121d;
  --violet: #9a70ff;
  --violet-pale: #d7c9ff;
  --cobalt: #71dce9;
  --red: #c32048;
  --red-dark: #81132f;
  --acid: #a9e6b5;
  --gold: #bca17c;
  --white: #fff8f1;
  --serif: 'Cormorant Garamond', 'Instrument Serif', 'Bodoni 72', Georgia, serif;
  --sans: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Cinzel', 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
  --max: 1500px;
}

html {
  background: var(--paper);
  color: var(--ink);
}

body {
  min-width: 320px;
  background:
    radial-gradient(ellipse at 83% 4%, rgba(113, 220, 233, .065), transparent 28rem),
    radial-gradient(ellipse at 13% 23%, rgba(154, 112, 255, .09), transparent 34rem),
    linear-gradient(180deg, #08070b 0%, #0a080d 48%, #07060a 100%);
  color: var(--ink);
  font: 400 15px/1.65 var(--sans);
}

body::before {
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.24), transparent 18%, transparent 82%, rgba(0,0,0,.3));
}

::selection {
  background: var(--red);
  color: var(--white);
}

a {
  color: inherit;
}

.cathedral {
  width: min(100%, var(--max));
  border-inline: 1px solid rgba(215, 201, 255, .13);
  background: var(--paper);
  box-shadow: 0 0 100px rgba(0, 0, 0, .48);
}

.skip-link {
  background: var(--red);
  color: var(--white);
  font-family: var(--mono);
}

.site-header {
  min-height: 92px;
  padding: 20px 58px;
  border-bottom: 1px solid rgba(215, 201, 255, .16);
  background: rgba(8, 7, 11, .88);
  backdrop-filter: blur(18px);
}

.site-brand {
  gap: 16px;
}

.brand-orb {
  width: 43px;
  height: 43px;
  border: 1px solid var(--violet-pale);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 47%, var(--red) 48% 52%, transparent 53%),
    linear-gradient(0deg, transparent 47%, var(--cobalt) 48% 52%, transparent 53%),
    #0b0910;
  box-shadow: 0 0 0 5px rgba(154, 112, 255, .08), 0 0 25px rgba(154, 112, 255, .24);
  transform: none;
}

.brand-orb::before {
  width: 22px;
  height: 22px;
  border: 1px solid var(--violet-pale);
  border-radius: 50%;
  background: transparent;
}

.brand-orb::after {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px var(--red);
}

.brand-orb i {
  display: none;
}

.brand-name {
  line-height: .82;
}

.brand-name small {
  margin-bottom: 6px;
  color: var(--cobalt);
  font: 500 8px/1 var(--mono);
  letter-spacing: .24em;
}

.brand-name strong {
  color: var(--white);
  font: 600 20px/.82 var(--display);
  letter-spacing: .07em;
}

.brand-name em {
  margin-top: 7px;
  color: var(--violet-pale);
  font: italic 18px/.75 var(--serif);
  letter-spacing: .17em;
}

.site-condition {
  color: var(--ink-fade);
  font: 500 9px var(--mono);
  letter-spacing: .13em;
}

.site-condition b {
  color: var(--ink-soft);
  font: 500 9px var(--mono);
}

.condition-dot,
.site-condition .condition-dot {
  width: 6px;
  height: 6px;
  background: var(--acid);
  box-shadow: 0 0 12px rgba(169, 230, 181, .7);
}

.site-menu summary {
  padding: 11px 14px;
  border-color: rgba(215, 201, 255, .42);
  color: var(--ink);
  font: 500 9px var(--mono);
  letter-spacing: .12em;
}

.site-menu summary i {
  border-color: var(--violet-pale);
}

.site-menu[open] summary {
  background: var(--red-dark);
  color: var(--white);
}

.menu-panel {
  border: 1px solid rgba(215, 201, 255, .3);
  background: #0d0a12;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 4px 4px 0 var(--red-dark);
}

.menu-panel-label,
.menu-panel a,
.menu-panel .menu-feed {
  font-family: var(--mono);
}

.menu-panel-label {
  color: var(--cobalt);
}

.menu-panel a {
  border-bottom-color: rgba(215, 201, 255, .12);
}

.menu-panel a:hover {
  color: var(--cobalt);
}

.menu-panel a b {
  color: var(--red);
}

.fracture-home {
  background: var(--paper);
}

.fracture-button {
  padding: 15px 17px 15px 19px;
  border: 1px solid var(--violet-pale);
  background: rgba(17, 14, 23, .8);
  color: var(--white);
  font: 500 9px var(--mono);
  letter-spacing: .14em;
  box-shadow: 5px 5px 0 var(--red-dark);
}

.fracture-button b {
  color: var(--cobalt);
}

.fracture-button:hover {
  background: var(--red-dark);
  box-shadow: 2px 2px 0 var(--cobalt);
}

.fracture-hero {
  min-height: 840px;
  padding: 96px 72px 31px;
  background:
    linear-gradient(90deg, rgba(8, 7, 11, .92), rgba(8, 7, 11, .22) 63%, rgba(8, 7, 11, .9)),
    repeating-linear-gradient(90deg, transparent 0 115px, rgba(215, 201, 255, .035) 116px 117px),
    radial-gradient(circle at 74% 48%, rgba(154, 112, 255, .16), transparent 30rem),
    var(--paper);
}

.fracture-hero::before {
  top: 8%;
  right: 9%;
  width: 39%;
  height: 77%;
  border: 1px solid rgba(215, 201, 255, .16);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, rgba(154, 112, 255, .09), transparent 66%);
  opacity: 1;
  transform: none;
}

.fracture-hero::after {
  bottom: 16%;
  left: 7%;
  width: 36%;
  height: 1px;
  background: linear-gradient(90deg, var(--red), transparent);
  opacity: .7;
  transform: rotate(-7deg);
}

.hero-margin {
  top: 210px;
  color: rgba(215, 201, 255, .42);
  font: 500 8px var(--mono);
  letter-spacing: .2em;
}

.hero-collage {
  width: min(100%, 1260px);
  min-height: 685px;
  grid-template-columns: .9fr 1.1fr;
  gap: 9%;
}

.hero-copy {
  max-width: 540px;
  padding: 24px 0 55px 35px;
}

.hero-copy::before {
  display: none;
}

.hero-copy::after {
  content: "∴";
  position: absolute;
  top: -19px;
  left: 0;
  color: var(--red);
  font: 30px/1 var(--serif);
  text-shadow: 0 0 18px rgba(195, 32, 72, .8);
}

.collage-kicker {
  color: var(--cobalt);
  font: 500 9px/1.4 var(--mono);
  letter-spacing: .18em;
}

.hero-copy h1 {
  margin: 28px 0 30px;
  color: var(--white);
  font: 500 clamp(88px, 10.2vw, 164px)/.66 var(--serif);
  letter-spacing: -.075em;
  text-shadow: 0 12px 38px rgba(0, 0, 0, .5);
}

.hero-copy h1 em {
  margin-left: .22em;
  color: var(--red);
  font-style: italic;
  text-shadow: 0 0 30px rgba(195, 32, 72, .24);
  transform: none;
}

.hero-copy p {
  max-width: 390px;
  color: var(--ink-soft);
  font-size: 15px;
}

.hero-window {
  width: min(100%, 590px);
  margin: 8px auto 0;
  padding: 21px 26px 25px;
  border: 1px solid rgba(215, 201, 255, .45);
  border-radius: 48% 48% 0 0;
  background: linear-gradient(180deg, rgba(25, 17, 37, .9), rgba(8, 7, 11, .98) 70%);
  box-shadow: 0 0 0 10px rgba(154, 112, 255, .035), 0 20px 80px rgba(0, 0, 0, .7), inset 0 0 70px rgba(154, 112, 255, .08);
  transform: none;
}

.hero-window::before {
  inset: 13px -10px -16px 10px;
  border: 1px solid rgba(195, 32, 72, .55);
  background: transparent;
  opacity: 1;
  transform: none;
}

.hero-window::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 3;
  border: 1px solid rgba(215, 201, 255, .12);
  border-bottom: 0;
  border-radius: 46% 46% 0 0;
  pointer-events: none;
}

.window-caption,
.window-foot {
  color: var(--ink-fade);
  font: 500 8px var(--mono);
  letter-spacing: .14em;
}

.window-caption i {
  background: rgba(215, 201, 255, .24);
}

.window-frame {
  height: 470px;
  margin: 18px 0 20px;
  padding: 0;
  gap: 1px;
  background: rgba(215, 201, 255, .23);
  clip-path: none;
}

.window-pane,
.window-pane--one,
.window-pane--two,
.window-pane--three,
.window-pane--four,
.window-pane--five,
.window-pane--six {
  border: 0;
  border-inline: 1px solid rgba(215, 201, 255, .18);
  border-radius: 48% 48% 0 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 27%),
    linear-gradient(180deg, rgba(154, 112, 255, .16), rgba(7, 6, 10, .88));
  color: var(--ink);
  clip-path: none;
  transform: none;
}

.window-pane:nth-child(1),
.window-pane:nth-child(4) {
  --pane-accent: var(--red);
}

.window-pane:nth-child(2),
.window-pane:nth-child(5) {
  --pane-accent: var(--cobalt);
}

.window-pane:nth-child(3),
.window-pane:nth-child(6) {
  --pane-accent: var(--violet);
}

.window-pane::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, var(--pane-accent), transparent 72%);
  opacity: .55;
}

.window-pane a {
  padding: 18px 13px;
  color: var(--ink);
}

.window-pane a::before {
  background: linear-gradient(145deg, rgba(255,255,255,.12), transparent 34%, rgba(0,0,0,.42));
}

.window-pane small,
.window-pane em {
  color: var(--pane-accent);
  font: 500 8px var(--mono);
  letter-spacing: .13em;
}

.window-pane b {
  margin: 6px 0 3px;
  color: var(--white);
  font: 500 26px/.78 var(--serif);
}

.window-pane em {
  color: var(--ink-fade);
}

.window-crack {
  z-index: 5;
  width: 1px;
  background: var(--red);
  box-shadow: 0 0 8px rgba(195, 32, 72, .7);
  opacity: .88;
}

.window-crack--one { left: 43%; }
.window-crack--two { background: var(--cobalt); box-shadow: 0 0 8px rgba(113, 220, 233, .7); }

.hero-fragment {
  border: 1px solid rgba(215, 201, 255, .35);
  background: #0e0a14;
  color: var(--violet-pale);
  font: 500 9px/1.2 var(--mono);
  letter-spacing: .15em;
  box-shadow: 0 0 26px rgba(0, 0, 0, .45);
  transform: none;
}

.hero-fragment--red {
  width: 98px;
  height: 98px;
  border-color: var(--red);
  background: rgba(128, 19, 47, .28);
  color: var(--red);
}

.hero-fragment--blue {
  width: 72px;
  height: 72px;
  border-color: var(--cobalt);
  background: rgba(113, 220, 233, .06);
  color: var(--cobalt);
  font: 42px var(--serif);
}

.hero-bottom {
  width: min(100%, 1260px);
  padding-top: 18px;
  border-top-color: rgba(215, 201, 255, .22);
  color: var(--ink-fade);
  font: 500 8px var(--mono);
  letter-spacing: .13em;
}

.hero-bottom span:nth-child(2) {
  color: var(--acid);
}

.hero-bottom i,
.status-pip {
  background: var(--acid);
  box-shadow: 0 0 8px rgba(169, 230, 181, .7);
}

.fracture-section {
  max-width: none;
  padding: 148px 72px 174px;
  border-top: 1px solid rgba(215, 201, 255, .11);
  background: var(--paper);
}

.fracture-section::before {
  top: 72px;
  right: 6%;
  color: rgba(215, 201, 255, .035);
  font: 500 185px/.8 var(--display);
  letter-spacing: -.08em;
}

.fracture-marker {
  grid-template-columns: auto auto minmax(70px, 1fr) auto;
  margin-bottom: 63px;
  color: var(--red);
  font: 500 9px var(--mono);
  letter-spacing: .17em;
}

.fracture-marker > span {
  color: var(--violet-pale);
  font: 500 25px var(--serif);
}

.fracture-marker > i {
  background: var(--violet-pale);
  opacity: .25;
}

.fracture-marker small {
  color: var(--ink-fade);
  font: 400 10px var(--mono);
}

.fracture-title,
.reading-heading {
  gap: 78px;
  margin-bottom: 69px;
}

.fracture-title h2,
.reading-heading h2,
.rulebook-intro h2,
.foundation-copy h2,
.wall-copy h2 {
  color: var(--white);
  font: 500 clamp(65px, 7.6vw, 112px)/.76 var(--serif);
  letter-spacing: -.07em;
}

.fracture-title h2 em,
.reading-heading h2 em,
.rulebook-intro h2 em,
.foundation-copy h2 em,
.wall-copy h2 em {
  color: var(--violet-pale);
}

.fracture-title > p,
.reading-heading > p,
.rulebook-intro > p,
.foundation-copy > p,
.wall-copy > p {
  color: var(--ink-soft);
}

.residents-section {
  background:
    radial-gradient(ellipse at 80% 12%, rgba(154, 112, 255, .1), transparent 30rem),
    linear-gradient(180deg, #0d0a12, #09080c);
}

.residents-section::before {
  content: "RESIDENTS";
}

.resident-rooms {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.resident-room,
.resident-room:nth-child(n) {
  min-height: 386px;
  border: 1px solid rgba(215, 201, 255, .22);
  border-radius: 150px 150px 3px 3px;
  background:
    linear-gradient(180deg, rgba(154, 112, 255, .13), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 35%),
    #0d0a12;
  box-shadow: inset 0 0 38px rgba(154, 112, 255, .06), 0 20px 45px rgba(0, 0, 0, .25);
  transform: none;
}

.resident-room::before {
  content: "";
  position: absolute;
  inset: 12px 12px 0;
  border: 1px solid rgba(215, 201, 255, .1);
  border-bottom: 0;
  border-radius: 140px 140px 0 0;
  pointer-events: none;
}

.resident-room::after {
  content: "";
  position: absolute;
  top: 0;
  right: 24px;
  width: 1px;
  height: 82%;
  background: linear-gradient(180deg, var(--room-accent), transparent);
  opacity: .55;
}

.resident-room:hover {
  border-color: var(--room-accent);
  box-shadow: inset 0 0 48px rgba(154, 112, 255, .1), 0 0 28px rgba(154, 112, 255, .13);
  transform: translateY(-5px);
}

.resident-link {
  position: relative;
  z-index: 1;
  padding: 31px 27px 24px;
}

.resident-figure {
  width: 98px;
  height: 125px;
  margin-bottom: 27px;
  border: 1px solid var(--room-accent);
  border-radius: 54px 54px 4px 4px;
  background:
    radial-gradient(circle at 50% 43%, rgba(255,255,255,.12), transparent 16%),
    linear-gradient(180deg, rgba(154, 112, 255, .2), rgba(0,0,0,.52));
  box-shadow: 0 0 0 6px rgba(154, 112, 255, .035), 0 0 23px rgba(154, 112, 255, .1);
  transform: none;
  clip-path: polygon(50% 0, 94% 18%, 100% 100%, 0 100%, 6% 18%);
}

.resident-figure::before {
  inset: 13px 17px 16px;
  border: 1px solid var(--room-accent);
  border-radius: 50% 50% 2px 2px;
  opacity: .35;
}

.resident-figure span {
  top: 48px;
  left: 0;
  width: 100%;
  color: var(--room-accent);
  font: 500 28px var(--serif);
  text-align: center;
}

.resident-figure i,
.resident-figure b {
  background: var(--room-accent);
}

.resident-figure i {
  right: 13px;
  bottom: 13px;
}

.resident-figure b {
  top: 11px;
  left: 47px;
}

.resident-heading {
  gap: 13px;
}

.resident-heading small {
  color: var(--room-accent);
  font: 500 8px var(--mono);
  letter-spacing: .15em;
}

.resident-heading h3 {
  color: var(--white);
  font: 500 42px/.8 var(--serif);
}

.resident-room p {
  max-width: 205px;
  margin: 14px 0 17px;
  color: var(--ink-soft);
  font: italic 16px/1.08 var(--serif);
}

.resident-details {
  border-top-color: rgba(215, 201, 255, .18);
  color: var(--ink-fade);
  font: 500 8px var(--mono);
}

.resident-room--morrow { --room-accent: var(--red); }
.resident-room--kite { --room-accent: var(--cobalt); }
.resident-room--rowan { --room-accent: var(--gold); }
.resident-room--solivane { --room-accent: var(--acid); }
.resident-room--aster { --room-accent: var(--violet); }
.resident-room--orynth { --room-accent: var(--violet-pale); }

.workshop {
  grid-template-columns: .8fr 1.2fr;
  gap: 72px;
  margin-top: 126px;
  padding: 55px 58px 62px;
  border: 1px solid rgba(215, 201, 255, .24);
  border-left: 3px solid var(--red-dark);
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(154, 112, 255, .1), transparent 44%),
    #100c15;
  box-shadow: inset 0 0 48px rgba(0,0,0,.4);
  transform: none;
}

.workshop-copy .collage-kicker {
  color: var(--cobalt);
}

.workshop-copy h2 {
  color: var(--white);
  font: 500 67px/.77 var(--serif);
}

.workshop-copy h2 em {
  color: var(--red);
}

.workshop-copy p {
  color: var(--ink-soft);
}

.tool-wall {
  gap: 7px;
  padding: 32px 0 0;
}

.tool-label {
  color: var(--ink-fade);
  font: 500 8px var(--mono);
}

.tool {
  min-height: 100px;
  padding: 15px;
  border: 1px solid rgba(215, 201, 255, .2);
  background: #0b0910;
  color: var(--ink);
  box-shadow: none;
  transform: none;
}

.tool::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--tool-accent, var(--violet));
}

.tool:hover {
  border-color: var(--tool-accent, var(--violet));
  background: #15101c;
  transform: translateY(-4px);
}

.tool b {
  color: var(--white);
  font: 600 13px/.95 var(--display);
  letter-spacing: .01em;
}

.tool small {
  color: var(--tool-accent, var(--ink-fade));
  font: 500 8px var(--mono);
  letter-spacing: .12em;
}

.tool--violet { --tool-accent: var(--violet); }
.tool--red { --tool-accent: var(--red); }
.tool--green { --tool-accent: var(--acid); }
.tool--blue { --tool-accent: var(--cobalt); }
.tool--gold { --tool-accent: var(--gold); }
.tool--ink { --tool-accent: var(--violet-pale); }
.tool--private { --tool-accent: var(--red-dark); color: var(--ink); }

.foundation-section {
  background:
    linear-gradient(90deg, rgba(195, 32, 72, .05), transparent 35%, rgba(113, 220, 233, .04)),
    #07060a;
  color: var(--ink);
}

.foundation-section::before {
  content: "TOPOLOGY";
  color: rgba(215, 201, 255, .035);
}

.foundation-section .fracture-marker,
.wall-section .fracture-marker {
  color: var(--violet-pale);
}

.foundation-section .fracture-marker > i,
.wall-section .fracture-marker > i {
  background: var(--violet-pale);
}

.foundation-section .fracture-marker small,
.wall-section .fracture-marker small {
  color: var(--ink-fade);
}

.foundation-layout {
  grid-template-columns: minmax(0, 1fr) .72fr;
  gap: 85px;
}

.cutaway-house {
  min-height: 576px;
  padding: 26px 26px 20px;
  border: 1px solid rgba(215, 201, 255, .38);
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(215, 201, 255, .045) 48px),
    #0d0a12;
  clip-path: none;
  box-shadow: inset 0 0 50px rgba(154, 112, 255, .08);
  transform: none;
}

.cutaway-house::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(113, 220, 233, .25);
  pointer-events: none;
}

.cutaway-house::after {
  inset: 25px -12px -12px 20px;
  border: 1px solid rgba(195, 32, 72, .45);
  background: transparent;
  transform: none;
}

.house-roof {
  height: 82px;
  border-bottom: 1px solid var(--violet-pale);
  background: linear-gradient(90deg, rgba(154, 112, 255, .28), rgba(17, 14, 23, .6));
  color: var(--white);
  clip-path: none;
}

.house-roof span,
.house-floor > span,
.house-foundation span {
  font: 500 8px var(--mono);
  letter-spacing: .17em;
}

.house-roof b {
  color: var(--cobalt);
}

.house-floor {
  min-height: 119px;
  border-bottom: 1px solid rgba(215, 201, 255, .27);
  background: rgba(17, 14, 23, .68);
  color: var(--ink);
}

.house-floor strong {
  color: var(--white);
  font: 600 19px/.95 var(--display);
  letter-spacing: .02em;
}

.house-floor small {
  color: var(--ink-fade);
  font: 400 11px var(--mono);
}

.house-floor--top { background: rgba(154, 112, 255, .13); }
.house-floor--middle { background: rgba(113, 220, 233, .07); }
.house-floor--lower { background: rgba(195, 32, 72, .1); }

.house-door {
  width: 28px;
  border: 1px solid var(--violet-pale);
  border-bottom: 0;
  background: rgba(215, 201, 255, .06);
}

.house-stair {
  width: 50px;
  height: 40px;
  border: 1px solid var(--red);
  background: #100a12;
  color: var(--red);
  font: 23px var(--serif);
}

.house-foundation {
  min-height: 82px;
  background: #050507;
  color: var(--white);
}

.house-foundation strong {
  color: var(--red);
  font: 600 17px var(--display);
}

.house-foundation small {
  color: var(--ink-fade);
  font: 400 9px var(--mono);
}

.foundation-copy .collage-kicker {
  color: var(--cobalt);
}

.foundation-copy h2 em {
  color: var(--violet-pale);
}

.foundation-copy > p {
  color: var(--ink-soft);
}

.foundation-notes article {
  border-top-color: rgba(215, 201, 255, .18);
}

.foundation-notes article > b {
  color: var(--red);
}

.foundation-notes strong {
  color: var(--white);
  font: 600 12px var(--display);
}

.foundation-notes p {
  color: var(--ink-fade);
  font: 400 11px/1.45 var(--mono);
}

.rulebook-section {
  background:
    radial-gradient(ellipse at 15% 90%, rgba(195, 32, 72, .08), transparent 28rem),
    #0b090f;
}

.rulebook-section::before {
  content: "RULES";
  color: rgba(215, 201, 255, .035);
}

.rulebook-intro > .collage-kicker {
  color: var(--red);
}

.rulebook-intro h2 em {
  color: var(--red);
}

.rulebook {
  grid-template-columns: 250px 1fr;
  max-width: 1030px;
  border: 1px solid rgba(215, 201, 255, .3);
  background: #0d0a12;
  box-shadow: 16px 16px 0 rgba(128, 19, 47, .45);
  transform: none;
}

.book-cover {
  min-height: 560px;
  padding: 31px;
  border-right: 1px solid var(--red-dark);
  background:
    linear-gradient(180deg, rgba(195, 32, 72, .24), transparent 45%),
    #130a12;
  color: var(--white);
  clip-path: none;
}

.book-cover span {
  color: var(--violet-pale);
  font: 500 42px/.77 var(--serif);
}

.book-cover b {
  color: var(--red);
  font: 500 9px var(--mono);
}

.book-cover i {
  color: var(--cobalt);
}

.book-page {
  min-height: 560px;
  padding: 31px 40px 35px;
  background: #100d15;
}

.book-page::before {
  border-left-color: rgba(215, 201, 255, .13);
}

.book-page-top {
  border-bottom-color: rgba(215, 201, 255, .2);
  color: var(--cobalt);
  font: 500 8px var(--mono);
}

.book-page li {
  border-bottom-color: rgba(215, 201, 255, .14);
}

.book-page li::before {
  color: var(--red);
  font: 500 24px var(--serif);
}

.book-page li b {
  color: var(--white);
  font: 600 14px/1.05 var(--display);
}

.book-page li p {
  color: var(--ink-fade);
  font: 400 10px/1.45 var(--mono);
}

.approval-seal {
  border-color: var(--red);
  color: var(--red);
  opacity: .8;
  transform: none;
}

.approval-seal::before {
  border-color: var(--red);
}

.approval-seal b {
  font: 500 24px/.8 var(--serif);
}

.reading-section {
  background:
    radial-gradient(ellipse at 78% 20%, rgba(113, 220, 233, .06), transparent 25rem),
    #0d0a12;
}

.reading-section::before {
  content: "JOURNALS";
  color: rgba(215, 201, 255, .035);
}

.reading-heading {
  margin-bottom: 56px;
}

.reading-room {
  grid-template-columns: 1fr 170px;
  gap: 23px;
}

.open-book {
  min-height: 430px;
  border: 1px solid rgba(215, 201, 255, .3);
  background: #100d15;
  box-shadow: 0 20px 55px rgba(0,0,0,.35);
  transform: none;
}

.book-page--left,
.book-page--right {
  min-height: 430px;
  padding: 43px;
  background:
    linear-gradient(135deg, rgba(154, 112, 255, .11), transparent 46%),
    #100d15;
}

.book-page--left {
  border-right-color: rgba(215, 201, 255, .2);
}

.book-page--right {
  background:
    linear-gradient(180deg, rgba(195, 32, 72, .08), transparent 60%),
    #0b0910;
}

.page-corner,
.book-marginalia {
  color: var(--cobalt);
  font: 500 8px var(--mono);
}

.book-tag {
  color: var(--red);
  font: 500 9px var(--mono);
}

.book-page--left h3 {
  color: var(--white);
  font: 500 57px/.78 var(--serif);
}

.book-page--left h3 a:hover {
  color: var(--red);
}

.book-page--left p {
  color: var(--ink-soft);
}

.page-link {
  border-bottom-color: var(--red);
  color: var(--red);
  font: 500 8px var(--mono);
}

.book-quote {
  color: var(--violet);
  text-shadow: 0 0 28px rgba(154, 112, 255, .25);
}

.book-page--right p {
  color: var(--violet-pale);
}

.book-page-number {
  color: var(--ink-fade);
}

.book-spines {
  gap: 9px;
}

.book-spine,
.book-spine--1,
.book-spine--2,
.book-spine--3,
.book-spine--empty {
  min-height: 95px;
  border: 1px solid rgba(215, 201, 255, .22);
  background: #100d15;
  color: var(--ink);
  box-shadow: none;
  transform: none;
}

.book-spine:hover {
  border-color: var(--cobalt);
  transform: translateX(-5px);
}

.book-spine span {
  color: var(--red);
}

.book-spine b {
  color: var(--ink-soft);
  font: 500 9px/1.15 var(--mono);
}

.wall-section {
  background:
    radial-gradient(ellipse at 75% 0%, rgba(154, 112, 255, .12), transparent 32rem),
    #07060a;
  color: var(--ink);
}

.wall-section::before {
  content: "DISPATCH";
  color: rgba(215, 201, 255, .035);
}

.wall-copy .collage-kicker {
  color: var(--cobalt);
}

.wall-copy h2 em {
  color: var(--red);
}

.wall-copy p {
  color: var(--ink-soft);
}

.postcard-stack {
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  min-height: 260px;
  padding: 24px 0 18px;
}

.postcard-stack::before {
  inset: 0 -14px;
  border-color: rgba(215, 201, 255, .16);
  transform: none;
}

.postcard,
.postcard:nth-child(2),
.postcard:nth-child(3) {
  min-height: 210px;
  padding: 24px 18px;
  border: 1px solid rgba(215, 201, 255, .25);
  border-top: 2px solid var(--dispatch-accent);
  background: #100d15;
  color: var(--ink);
  box-shadow: inset 0 0 30px rgba(154, 112, 255, .06);
  transform: none;
}

.postcard span {
  color: var(--dispatch-accent);
  font: 500 8px var(--mono);
}

.postcard h3 {
  margin: 38px 0 10px;
  color: var(--white);
  font: 500 30px/.83 var(--serif);
}

.postcard p {
  color: var(--ink-fade);
  font: 400 11px var(--mono);
}

.postcard--red { --dispatch-accent: var(--red); }
.postcard--blue { --dispatch-accent: var(--cobalt); }
.postcard--yellow { --dispatch-accent: var(--gold); }

.wall-ledger {
  margin-top: 127px;
  border-top-color: rgba(215, 201, 255, .2);
}

.ledger-pin {
  width: 58px;
  height: 58px;
  border: 1px solid var(--red);
  border-radius: 50%;
  background: transparent;
  color: var(--red);
  box-shadow: 0 0 20px rgba(195, 32, 72, .18);
  transform: none;
}

.wall-ledger .collage-kicker {
  color: var(--cobalt);
}

.wall-ledger h3 {
  color: var(--white);
  font: 500 33px/.85 var(--serif);
}

.wall-ledger p {
  color: var(--ink-fade);
  font: 400 11px var(--mono);
}

.wall-ledger .fracture-button {
  background: transparent;
  color: var(--white);
  box-shadow: 5px 5px 0 var(--red-dark);
}

.site-footer {
  padding: 60px 58px 40px;
  border-top-color: rgba(215, 201, 255, .16);
  background: #07060a;
}

.footer-mark {
  color: var(--red);
}

.site-footer strong {
  color: var(--white);
  font: 500 12px var(--display);
  letter-spacing: .08em;
}

.site-footer small,
.footer-coda {
  color: var(--ink-fade);
  font: 400 10px var(--mono);
}

.footer-links {
  font: 500 8px var(--mono);
}

.footer-links a:hover {
  color: var(--cobalt);
}

.footer-coda {
  border-top-color: rgba(215, 201, 255, .16);
}

/* Journal entries, the private console, and the 404 stay inside the same world. */
.entry,
.admin,
.not-found {
  max-width: 980px;
  min-height: 650px;
  padding: 105px 52px 125px;
}

.entry .back-link,
.not-found .read-link {
  color: var(--cobalt);
  font: 500 9px var(--mono);
}

.entry-header {
  margin: 78px 0 42px;
}

.entry-header .tag {
  color: var(--red);
  font: 500 9px var(--mono);
}

.entry h1,
.admin h1,
.not-found h1 {
  color: var(--white);
  font: 500 clamp(70px, 9vw, 124px)/.75 var(--serif);
}

.entry-excerpt {
  color: var(--ink-soft);
  font: italic 23px/1.2 var(--serif);
}

.entry-rule {
  border-top-color: var(--violet-pale);
  border-bottom-color: rgba(215, 201, 255, .2);
  color: var(--red);
  font: 500 8px var(--mono);
}

.entry-body {
  color: var(--ink-soft);
  font-size: 16px;
}

.entry-body strong {
  color: var(--white);
}

.entry-body blockquote {
  border-left-color: var(--red);
  background: #100d15;
  color: var(--violet-pale);
  font: italic 29px/1 var(--serif);
}

.entry-body code {
  background: #050507;
  color: var(--cobalt);
}

.entry-body a {
  color: var(--cobalt);
}

.not-found p {
  color: var(--ink-soft);
}

.admin form {
  margin-top: 50px;
}

.admin label {
  color: var(--cobalt);
  font: 500 8px var(--mono);
}

.admin input,
.admin textarea {
  border-color: rgba(215, 201, 255, .28);
  background: #100d15;
  color: var(--ink);
}

.admin button {
  border-color: var(--red);
  background: var(--red-dark);
  color: var(--white);
  font: 500 9px var(--mono);
}

.admin button:hover {
  background: var(--red);
}

@media (max-width: 1050px) {
  .site-header {
    padding-inline: 30px;
  }

  .fracture-hero {
    padding-inline: 42px;
  }

  .hero-collage {
    gap: 5%;
  }

  .fracture-section {
    padding-inline: 42px;
  }

  .resident-rooms {
    gap: 13px;
  }

  .resident-heading h3 {
    font-size: 37px;
  }

  .workshop {
    gap: 40px;
    padding-inline: 38px;
  }

  .foundation-layout {
    gap: 48px;
  }

  .book-page--left h3 {
    font-size: 49px;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 14px;
  }

  .cathedral {
    border-inline: 0;
  }

  .site-header {
    min-height: 78px;
    padding: 16px 20px;
  }

  .site-condition {
    display: none;
  }

  .brand-orb {
    width: 35px;
    height: 35px;
  }

  .brand-name strong {
    font-size: 17px;
  }

  .brand-name em {
    font-size: 15px;
  }

  .site-menu {
    min-width: 121px;
  }

  .fracture-hero {
    min-height: 920px;
    padding: 52px 20px 22px;
    background:
      linear-gradient(180deg, rgba(8,7,11,.95), rgba(8,7,11,.32) 58%, rgba(8,7,11,.96)),
      radial-gradient(circle at 50% 61%, rgba(154,112,255,.16), transparent 18rem),
      var(--paper);
  }

  .fracture-hero::before {
    top: 35%;
    right: 5%;
    width: 90%;
    height: 49%;
  }

  .hero-margin {
    display: none;
  }

  .hero-collage {
    display: block;
    min-height: 805px;
  }

  .hero-copy {
    padding: 27px 0 0 10px;
  }

  .hero-copy h1 {
    margin: 25px 0;
    font-size: clamp(82px, 24vw, 148px);
  }

  .hero-copy p {
    max-width: 310px;
  }

  .hero-window {
    width: calc(100% - 14px);
    margin: 86px 7px 0;
    padding: 16px 17px 19px;
  }

  .window-frame {
    height: 337px;
  }

  .window-pane a {
    padding: 11px 8px;
  }

  .window-pane b {
    font-size: 20px;
  }

  .window-pane small,
  .window-pane em {
    font-size: 7px;
  }

  .hero-fragment--blue {
    top: 40%;
    right: -1%;
    width: 58px;
    height: 58px;
    font-size: 31px;
  }

  .hero-fragment--red {
    right: 1%;
    bottom: 9%;
    width: 79px;
    height: 79px;
    font-size: 8px;
  }

  .hero-bottom {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-inline: 5px;
    font-size: 7px;
  }

  .hero-bottom span:first-child {
    grid-column: 1 / -1;
  }

  .hero-bottom span:last-child {
    justify-self: end;
  }

  .fracture-section {
    padding: 94px 20px 110px;
  }

  .fracture-marker {
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    margin-bottom: 43px;
  }

  .fracture-marker > i {
    display: none;
  }

  .fracture-marker small {
    grid-column: 2;
  }

  .fracture-title,
  .reading-heading {
    display: block;
    margin-bottom: 44px;
  }

  .fracture-title h2,
  .reading-heading h2,
  .rulebook-intro h2,
  .foundation-copy h2,
  .wall-copy h2 {
    font-size: clamp(65px, 19vw, 98px);
  }

  .fracture-title > p,
  .reading-heading > p {
    max-width: 350px;
    margin-top: 30px;
  }

  .resident-rooms {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .resident-room,
  .resident-room:nth-child(n) {
    min-height: 300px;
    border-radius: 100px 100px 2px 2px;
    transform: none;
  }

  .resident-link {
    padding: 21px 14px 16px;
  }

  .resident-figure {
    width: 68px;
    height: 84px;
    margin-bottom: 17px;
  }

  .resident-figure::before {
    inset: 10px 12px 12px;
  }

  .resident-figure span {
    top: 31px;
    font-size: 19px;
  }

  .resident-heading {
    display: block;
  }

  .resident-heading small {
    display: block;
    margin-bottom: 8px;
  }

  .resident-heading h3 {
    font-size: 31px;
  }

  .resident-room p {
    margin-top: 11px;
    font-size: 14px;
  }

  .resident-details {
    display: block;
    font-size: 7px;
  }

  .resident-details span {
    display: block;
  }

  .resident-details span:last-child {
    margin-top: 5px;
    text-align: left;
  }

  .workshop {
    display: block;
    margin-top: 89px;
    padding: 39px 22px 43px;
  }

  .workshop-copy h2 {
    font-size: 61px;
  }

  .tool-wall {
    margin-top: 44px;
    grid-template-columns: 1fr 1fr;
  }

  .tool {
    min-height: 92px;
    padding: 12px 10px;
  }

  .tool b {
    font-size: 11px;
  }

  .tool small {
    font-size: 7px;
  }

  .foundation-layout {
    display: block;
  }

  .cutaway-house {
    min-height: 492px;
    padding: 17px 17px 14px;
  }

  .house-roof {
    height: 65px;
    padding-inline: 19px;
  }

  .house-floor {
    min-height: 100px;
    padding-inline: 17px;
  }

  .house-floor strong {
    font-size: 16px;
  }

  .house-floor small {
    font-size: 8px;
  }

  .house-foundation {
    min-height: 67px;
    padding-inline: 17px;
  }

  .house-foundation strong {
    font-size: 13px;
  }

  .house-foundation small {
    font-size: 8px;
  }

  .house-stair--one {
    top: 150px;
    right: 25px;
  }

  .house-stair--two {
    top: 300px;
    right: 27px;
  }

  .foundation-copy {
    margin-top: 80px;
  }

  .foundation-notes {
    margin-top: 32px;
  }

  .rulebook-intro {
    display: block;
    margin-bottom: 40px;
  }

  .rulebook-intro h2 {
    margin-top: 20px;
  }

  .rulebook {
    display: block;
    box-shadow: 9px 10px 0 rgba(128, 19, 47, .5);
  }

  .book-cover {
    min-height: 240px;
    padding: 24px;
  }

  .book-cover span {
    font-size: 38px;
  }

  .book-page {
    min-height: auto;
    padding: 24px 22px 145px;
  }

  .book-page::before {
    display: none;
  }

  .book-page ol {
    display: block;
    margin-top: 20px;
  }

  .book-page li {
    min-height: 0;
    padding: 18px 0 15px 31px;
  }

  .book-page li::before {
    top: 17px;
  }

  .approval-seal {
    right: 24px;
    bottom: 22px;
    width: 95px;
    height: 95px;
  }

  .reading-room {
    display: block;
  }

  .open-book {
    display: block;
    min-height: 0;
  }

  .book-page--left,
  .book-page--right {
    min-height: 330px;
    padding: 27px;
  }

  .book-page--left {
    border-right: 0;
    border-bottom: 1px solid rgba(215, 201, 255, .2);
  }

  .book-tag {
    margin-top: 46px;
  }

  .book-page--left h3 {
    font-size: 48px;
  }

  .book-quote {
    margin-top: 50px;
    font-size: 130px;
  }

  .book-page--right p {
    margin-left: 22px;
    font-size: 22px;
  }

  .book-spines {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 23px;
  }

  .book-spine {
    min-height: 84px;
  }

  .book-spine--empty {
    grid-column: 1 / -1;
  }

  .wall-layout {
    display: block;
  }

  .postcard-stack {
    margin-top: 48px;
    gap: 8px;
    padding-inline: 0;
  }

  .postcard {
    min-height: 180px;
    padding: 17px 12px;
  }

  .postcard h3 {
    margin-top: 23px;
    font-size: 24px;
  }

  .postcard p {
    font-size: 9px;
  }

  .wall-ledger {
    grid-template-columns: 54px 1fr;
    gap: 14px;
    margin-top: 90px;
  }

  .ledger-pin {
    width: 45px;
    height: 45px;
    font-size: 24px;
  }

  .wall-ledger .fracture-button {
    grid-column: 2;
    width: max-content;
  }

  .site-footer {
    display: block;
    padding: 45px 20px 28px;
  }

  .footer-links {
    margin-top: 28px;
  }

  .footer-coda {
    display: block;
    margin-top: 27px;
    font-size: 8px;
  }

  .entry,
  .admin,
  .not-found {
    padding: 75px 22px 90px;
  }

  .entry h1,
  .admin h1,
  .not-found h1 {
    font-size: 80px;
  }

  .entry-rule {
    display: block;
    line-height: 2;
  }

  .entry-body {
    margin-top: 40px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Tightening pass: less cathedral scale, more archive signal. */
:root {
  --violet: #702337;
  --violet-pale: #b86d7d;
  --red: #bd2044;
  --red-dark: #77152e;
}

body {
  background:
    radial-gradient(ellipse at 83% 4%, rgba(113, 220, 233, .05), transparent 25rem),
    radial-gradient(ellipse at 13% 23%, rgba(112, 35, 54, .09), transparent 30rem),
    linear-gradient(180deg, #08070b 0%, #0a080d 48%, #07060a 100%);
}

.site-header {
  min-height: 84px;
  padding: 17px 48px;
}

.fracture-hero {
  min-height: 760px;
  padding: 76px 60px 25px;
  background:
    linear-gradient(90deg, rgba(8, 7, 11, .94), rgba(8, 7, 11, .28) 63%, rgba(8, 7, 11, .92)),
    repeating-linear-gradient(90deg, transparent 0 115px, rgba(215, 201, 255, .03) 116px 117px),
    radial-gradient(circle at 74% 48%, rgba(112, 35, 54, .16), transparent 27rem),
    var(--paper);
}

.fracture-hero::before {
  background: linear-gradient(180deg, rgba(112, 35, 54, .12), transparent 66%);
}

.hero-collage {
  min-height: 610px;
}

.hero-copy h1 {
  margin: 22px 0 25px;
  font-size: clamp(78px, 8.8vw, 140px);
}

.hero-window {
  width: min(100%, 550px);
  padding: 18px 23px 22px;
  background: linear-gradient(180deg, rgba(30, 14, 22, .92), rgba(8, 7, 11, .98) 70%);
  box-shadow: 0 0 0 8px rgba(112, 35, 54, .05), 0 18px 66px rgba(0, 0, 0, .7), inset 0 0 62px rgba(112, 35, 54, .1);
}

.window-frame {
  height: 425px;
  margin: 15px 0 17px;
}

.window-pane,
.window-pane--one,
.window-pane--two,
.window-pane--three,
.window-pane--four,
.window-pane--five,
.window-pane--six {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .07), transparent 27%),
    linear-gradient(180deg, rgba(112, 35, 54, .18), rgba(7, 6, 10, .9));
}

.fracture-section {
  padding: 116px 60px 136px;
}

.fracture-marker {
  margin-bottom: 49px;
}

.fracture-title,
.reading-heading {
  gap: 64px;
  margin-bottom: 55px;
}

.fracture-title h2,
.reading-heading h2,
.rulebook-intro h2,
.foundation-copy h2,
.wall-copy h2 {
  font-size: clamp(60px, 6.5vw, 92px);
}

.residents-section {
  background:
    radial-gradient(ellipse at 80% 12%, rgba(112, 35, 54, .12), transparent 27rem),
    linear-gradient(180deg, #0d0a12, #09080c);
}

.residents-section::before {
  content: "AGENTS";
}

/*
 * 2026-08-14 / JOURNAL REPAIR
 * Keep this route quiet and legible. The journals page is a reading surface,
 * not another poster: one dark material, one signal color, and enough air for
 * the entry title to carry the fold.
 */
.archive-page--journals {
  --journal-line: rgba(167, 125, 135, .2);
  --journal-line-strong: rgba(167, 125, 135, .34);
  --journal-panel: #0b080d;
  --journal-panel-raised: #100a10;
}

.archive-page--journals .reading-section {
  padding: 88px clamp(34px, 5vw, 72px) 112px;
  background:
    radial-gradient(ellipse at 78% 12%, rgba(165, 29, 61, .08), transparent 28rem),
    linear-gradient(180deg, #08060a 0%, #0a070c 54%, #070509 100%);
}

.archive-page--journals .reading-section::before {
  top: 50px;
  right: 5%;
  color: rgba(167, 125, 135, .035);
  font: 500 clamp(130px, 15vw, 220px)/.8 var(--serif);
  letter-spacing: -.08em;
}

.archive-page--journals .fracture-marker {
  margin-bottom: 39px;
}

.archive-page--journals .reading-heading {
  gap: clamp(36px, 5vw, 76px);
  margin-bottom: 44px;
}

.archive-page--journals .reading-heading h1 {
  color: var(--white);
  font-size: clamp(58px, 6.3vw, 94px);
}

.archive-page--journals .reading-heading > p {
  max-width: 35ch;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.75;
}

.archive-page--journals .reading-room {
  grid-template-columns: minmax(0, 1fr) 192px;
  gap: 20px;
}

.archive-page--journals .open-book {
  min-height: 405px;
  grid-template-columns: 1.08fr .92fr;
  border-color: var(--journal-line-strong);
  background: var(--journal-panel);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42);
}

.archive-page--journals .book-page--left,
.archive-page--journals .book-page--right {
  min-height: 405px;
  padding: 32px 36px;
}

.archive-page--journals .book-page--left {
  border-right-color: var(--journal-line);
  background:
    linear-gradient(135deg, rgba(165, 29, 61, .09), transparent 47%),
    var(--journal-panel-raised);
}

.archive-page--journals .book-page--right {
  background:
    linear-gradient(180deg, rgba(120, 157, 165, .04), transparent 58%),
    #08070b;
}

.archive-page--journals .open-book .book-page::before {
  display: none;
}

.archive-page--journals .page-corner,
.archive-page--journals .book-marginalia {
  color: var(--cobalt);
}

.archive-page--journals .book-tag {
  margin-top: 43px;
  color: var(--red);
}

.archive-page--journals .book-page--left h3 {
  max-width: 15ch;
  margin: 15px 0 15px;
  color: var(--white);
  font-size: clamp(42px, 3.5vw, 57px);
  line-height: .82;
}

.archive-page--journals .book-page--left p {
  max-width: 40ch;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.65;
}

.archive-page--journals .page-link {
  margin-top: 20px;
  border-bottom-color: var(--red);
  color: var(--red);
}

.archive-page--journals .book-quote {
  margin: 51px 0 -5px -8px;
  color: var(--red);
  text-shadow: 0 0 24px rgba(165, 29, 61, .28);
}

.archive-page--journals .book-page--right p {
  max-width: 19ch;
  margin: 0 0 0 28px;
  color: var(--ink-soft);
  font-size: 24px;
  line-height: 1.06;
}

.archive-page--journals .book-page-number {
  right: 30px;
  bottom: 22px;
  color: var(--ink-fade);
}

.archive-page--journals .book-spines {
  gap: 10px;
}

.archive-page--journals .book-spine,
.archive-page--journals .book-spine--1,
.archive-page--journals .book-spine--2,
.archive-page--journals .book-spine--3,
.archive-page--journals .book-spine--empty {
  position: relative;
  min-height: 96px;
  overflow: hidden;
  border-color: var(--journal-line);
  background: var(--journal-panel);
  color: var(--ink);
  box-shadow: none;
  transform: none;
}

.archive-page--journals .book-spine::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--red);
  opacity: .8;
}

.archive-page--journals .book-spine:nth-child(2)::before {
  background: var(--cobalt);
}

.archive-page--journals .book-spine:nth-child(3)::before {
  background: var(--acid);
}

.archive-page--journals .book-spine:hover {
  border-color: var(--journal-line-strong);
  background: var(--journal-panel-raised);
  transform: translateX(-4px);
}

.archive-page--journals .book-spine span {
  color: var(--red);
}

.archive-page--journals .book-spine b {
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: .01em;
}

.archive-page--journals a:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 4px;
}

.archive-page--journals .page-next-link {
  margin-top: 28px;
}

@media (max-width: 1050px) {
  .archive-page--journals .reading-room {
    grid-template-columns: minmax(0, 1fr) 156px;
  }

  .archive-page--journals .book-page--left,
  .archive-page--journals .book-page--right {
    padding-inline: 28px;
  }
}

@media (max-width: 760px) {
  .archive-page--journals .reading-section {
    padding: 72px 18px 88px;
  }

  .archive-page--journals .reading-section::before {
    top: 37px;
    right: -3%;
    font-size: 112px;
  }

  .archive-page--journals .fracture-marker {
    margin-bottom: 34px;
  }

  .archive-page--journals .reading-heading {
    margin-bottom: 36px;
  }

  .archive-page--journals .reading-heading h1 {
    font-size: clamp(58px, 17vw, 88px);
  }

  .archive-page--journals .reading-heading > p {
    max-width: 34ch;
    margin-top: 25px;
  }

  .archive-page--journals .reading-room {
    display: block;
  }

  .archive-page--journals .open-book {
    display: block;
    min-height: 0;
  }

  .archive-page--journals .book-page--left,
  .archive-page--journals .book-page--right {
    min-height: 0;
    padding: 25px 23px;
  }

  .archive-page--journals .book-page--left {
    border-right: 0;
    border-bottom: 1px solid var(--journal-line);
  }

  .archive-page--journals .book-tag {
    margin-top: 38px;
  }

  .archive-page--journals .book-page--left h3 {
    max-width: 13ch;
    font-size: 45px;
  }

  .archive-page--journals .book-page--right {
    min-height: 285px;
  }

  .archive-page--journals .book-quote {
    margin-top: 43px;
  }

  .archive-page--journals .book-spines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 22px;
  }

  .archive-page--journals .book-spine {
    min-height: 84px;
  }

  .archive-page--journals .book-spine--empty {
    grid-column: 1 / -1;
  }
}

.resident-room,
.resident-room:nth-child(n) {
  min-height: 350px;
  background:
    linear-gradient(180deg, rgba(112, 35, 54, .14), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.03), transparent 35%),
    #0d0a12;
  box-shadow: inset 0 0 34px rgba(112, 35, 54, .07), 0 16px 36px rgba(0, 0, 0, .25);
}

.resident-link {
  padding: 27px 24px 21px;
}

.resident-figure {
  width: 88px;
  height: 112px;
  margin-bottom: 22px;
  box-shadow: 0 0 0 5px rgba(112, 35, 54, .04), 0 0 20px rgba(112, 35, 54, .12);
}

.resident-heading h3 {
  font-size: 37px;
}

.workshop {
  gap: 58px;
  margin-top: 101px;
  padding: 47px 50px 53px;
  background:
    linear-gradient(135deg, rgba(112, 35, 54, .13), transparent 44%),
    #100c15;
}

.workshop-copy h2 {
  font-size: 60px;
}

.cutaway-house {
  min-height: 530px;
  box-shadow: inset 0 0 44px rgba(112, 35, 54, .1);
}

.house-roof {
  height: 73px;
  background: linear-gradient(90deg, rgba(112, 35, 54, .3), rgba(17, 14, 23, .65));
}

.house-floor--top {
  background: rgba(112, 35, 54, .16);
}

.rulebook {
  box-shadow: 14px 14px 0 rgba(119, 21, 46, .45);
}

.rulebook-section {
  background:
    radial-gradient(ellipse at 15% 90%, rgba(112, 35, 54, .1), transparent 25rem),
    #0b090f;
}

.rulebook-section::before {
  content: "PROTOCOLS";
}

.book-cover {
  min-height: 520px;
  background:
    linear-gradient(180deg, rgba(189, 32, 68, .2), transparent 45%),
    #130a12;
}

.book-page {
  min-height: 520px;
}

.reading-section {
  background:
    radial-gradient(ellipse at 78% 20%, rgba(113, 220, 233, .05), transparent 23rem),
    #0d0a12;
}

.book-page--left,
.book-page--right {
  min-height: 390px;
  padding: 37px;
}

.book-page--left h3 {
  font-size: 51px;
}

.wall-section {
  background:
    radial-gradient(ellipse at 75% 0%, rgba(112, 35, 54, .14), transparent 28rem),
    #07060a;
}

.wall-section::before {
  content: "DISPATCHES";
}

.foundation-section::before {
  content: "SYSTEMS";
}

.wall-ledger {
  margin-top: 96px;
}

.site-footer {
  padding: 48px 48px 34px;
}

@media (max-width: 1050px) {
  .site-header {
    padding-inline: 28px;
  }

  .fracture-hero {
    padding-inline: 40px;
  }

  .fracture-section {
    padding-inline: 40px;
  }
}

@media (max-width: 760px) {
  .site-header {
    min-height: 74px;
    padding: 14px 18px;
  }

  .fracture-hero {
    min-height: 875px;
    padding: 45px 18px 20px;
  }

  .hero-collage {
    min-height: 765px;
  }

  .hero-copy {
    padding-top: 21px;
  }

  .hero-copy h1 {
    margin: 22px 0;
    font-size: clamp(74px, 22vw, 132px);
  }

  .hero-window {
    margin-top: 72px;
    padding: 14px 15px 17px;
  }

  .window-frame {
    height: 305px;
  }

  .fracture-section {
    padding: 82px 18px 96px;
  }

  .fracture-marker {
    margin-bottom: 36px;
  }

  .fracture-title,
  .reading-heading {
    margin-bottom: 38px;
  }

  .fracture-title h2,
  .reading-heading h2,
  .rulebook-intro h2,
  .foundation-copy h2,
  .wall-copy h2 {
    font-size: clamp(58px, 17vw, 88px);
  }

  .resident-room,
  .resident-room:nth-child(n) {
    min-height: 286px;
  }

  .resident-link {
    padding: 18px 12px 14px;
  }

  .resident-figure {
    width: 62px;
    height: 78px;
    margin-bottom: 14px;
  }

  .resident-figure span {
    top: 28px;
    font-size: 18px;
  }

  .resident-heading h3 {
    font-size: 28px;
  }

  .workshop {
    margin-top: 74px;
    padding: 34px 19px 38px;
  }

  .workshop-copy h2 {
    font-size: 54px;
  }

  .cutaway-house {
    min-height: 458px;
  }

  .book-cover,
  .book-page {
    min-height: auto;
  }

  .book-page--left,
  .book-page--right {
    min-height: 300px;
    padding: 24px;
  }

  .book-page--left h3 {
    font-size: 44px;
  }

  .wall-ledger {
    margin-top: 76px;
  }

  .site-footer {
    padding: 38px 18px 25px;
  }
}

/* Final proportion pass: keep the drama, lose the shouting. */
.fracture-hero {
  min-height: 720px;
  padding: 66px 52px 23px;
}

.hero-collage {
  min-height: 580px;
}

.hero-copy h1 {
  margin: 18px 0 22px;
  font-size: clamp(72px, 8.2vw, 126px);
}

.hero-window {
  width: min(100%, 530px);
  padding: 17px 21px 20px;
}

.window-frame {
  height: 405px;
  margin: 14px 0 16px;
}

.fracture-section {
  padding: 102px 52px 118px;
}

.fracture-marker {
  margin-bottom: 43px;
}

.fracture-title,
.reading-heading {
  gap: 52px;
  margin-bottom: 48px;
}

.fracture-title h2,
.reading-heading h2,
.rulebook-intro h2,
.foundation-copy h2,
.wall-copy h2 {
  font-size: clamp(56px, 6vw, 84px);
}

.resident-room,
.resident-room:nth-child(n) {
  min-height: 325px;
}

.workshop {
  gap: 51px;
  margin-top: 88px;
  padding: 43px 45px 48px;
}

.workshop-copy h2 {
  font-size: 56px;
}

.cutaway-house {
  min-height: 500px;
}

.book-page--left,
.book-page--right {
  min-height: 370px;
  padding: 33px;
}

.book-page--left h3 {
  font-size: 47px;
}

.wall-ledger {
  margin-top: 82px;
}

@media (max-width: 760px) {
  .fracture-hero {
    min-height: 830px;
    padding: 40px 18px 18px;
  }

  .hero-collage {
    min-height: 720px;
  }

  .hero-copy {
    padding-top: 15px;
  }

  .hero-copy h1 {
    margin: 18px 0 20px;
    font-size: clamp(68px, 19vw, 112px);
  }

  .hero-window {
    margin-top: 58px;
    padding: 13px 14px 16px;
  }

  .window-frame {
    height: 292px;
    margin: 13px 0 15px;
  }

  .fracture-section {
    padding: 74px 18px 88px;
  }

  .fracture-marker {
    margin-bottom: 31px;
  }

  .fracture-title,
  .reading-heading {
    margin-bottom: 33px;
  }

  .fracture-title h2,
  .reading-heading h2,
  .rulebook-intro h2,
  .foundation-copy h2,
  .wall-copy h2 {
    font-size: clamp(52px, 14vw, 78px);
  }

  .resident-room,
  .resident-room:nth-child(n) {
    min-height: 270px;
  }

  .workshop {
    margin-top: 64px;
    padding: 31px 18px 35px;
  }

  .workshop-copy h2 {
    font-size: 48px;
  }

  .cutaway-house {
    min-height: 435px;
  }

  .book-page--left,
  .book-page--right {
    min-height: 286px;
    padding: 22px;
  }

  .book-page--left h3 {
    font-size: 40px;
  }

  .wall-ledger {
    margin-top: 64px;
  }
}

/* Final index treatment: a hanging spine, not a boxed utility menu. */
.site-menu {
  min-width: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.site-menu summary {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 9px;
  align-items: center;
  gap: 11px;
  min-width: 126px;
  padding: 7px 0 7px 16px;
  border: 0;
  border-left: 1px solid rgba(184, 109, 125, .42);
  background: transparent;
  color: var(--ink-fade);
  font-size: 8px;
  letter-spacing: .16em;
  transition: color .2s ease, border-color .2s ease;
}

.site-menu summary::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: -1px;
  width: 1px;
  background: var(--red);
  transform: skewY(-18deg);
  transform-origin: center;
  transition: top .2s ease, bottom .2s ease, background .2s ease;
}

.site-menu summary:hover,
.site-menu[open] summary {
  background: transparent;
  color: var(--white);
  border-left-color: rgba(113, 220, 233, .72);
}

.site-menu summary:hover::before,
.site-menu[open] summary::before {
  top: -2px;
  bottom: -2px;
  background: var(--cobalt);
}

.site-menu summary b {
  color: var(--ink-soft);
  font-weight: 500;
}

.site-menu summary i {
  width: 7px;
  height: 7px;
  border-color: var(--red);
  transform: rotate(45deg) translateY(-2px);
}

.site-menu[open] summary i {
  border-color: var(--cobalt);
  transform: rotate(225deg) translate(-1px, -1px);
}

.menu-panel {
  top: calc(100% + 15px);
  right: -1px;
  width: min(286px, calc(100vw - 36px));
  padding: 18px 0 12px 25px;
  border: 0;
  background: linear-gradient(90deg, rgba(13, 10, 18, .84), rgba(13, 10, 18, .42) 56%, rgba(13, 10, 18, 0) 100%);
  box-shadow: none;
  clip-path: polygon(0 0, 100% 0, 86% 19%, 100% 20%, 100% 79%, 91% 80%, 100% 81%, 100% 95%, 84% 100%, 0 100%, 3% 95%, 3% 5%);
}

.menu-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, var(--red) 0 19%, rgba(113, 220, 233, .55) 19% 42%, rgba(184, 109, 125, .34) 42% 74%, transparent 100%);
}

.menu-panel::after {
  content: "";
  position: absolute;
  top: -1px;
  right: 12px;
  width: 43%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 109, 125, .75));
  transform: rotate(-2deg);
  transform-origin: right;
}

.menu-panel-label {
  margin: 0 25px 6px 0;
  padding-left: 18px;
  color: var(--cobalt);
  font-size: 8px;
  letter-spacing: .2em;
}

.menu-panel a {
  position: relative;
  gap: 14px;
  margin-right: 15px;
  padding: 10px 0;
  border-bottom-color: transparent;
  font-size: 12px;
  letter-spacing: .08em;
  transition: color .2s ease, transform .2s ease, border-color .2s ease;
}

.menu-panel a::after {
  content: "";
  position: absolute;
  left: 36px;
  right: 8px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(184, 109, 125, .38), rgba(184, 109, 125, 0));
}

.menu-panel a:nth-of-type(2) { margin-left: 9px; }
.menu-panel a:nth-of-type(4) { margin-left: -4px; }
.menu-panel a:nth-of-type(6) { margin-left: 7px; }

.menu-panel a:hover {
  color: var(--white);
  transform: translateX(6px);
}

.menu-panel a b {
  width: 22px;
  color: var(--red);
  font-size: 9px;
}

.menu-panel .menu-feed {
  margin: 8px 15px 0 18px;
  padding: 12px 0 3px;
  border-top: 1px solid rgba(184, 109, 125, .25);
  color: var(--red);
  font-size: 9px;
}

@media (max-width: 760px) {
  .site-menu summary {
    min-width: 112px;
    padding-left: 13px;
    gap: 9px;
    font-size: 8px;
  }

  .menu-panel {
    width: min(286px, calc(100vw - 34px));
    padding-left: 21px;
  }
}

/*
 * 2026-08-14 / BLACKER SIGNAL
 * Push the reliquary away from violet editorial and into blackened steel,
 * oxblood, and restrained cold light. The architecture remains the same;
 * the atmosphere stops glowing like a showroom.
 */
:root {
  --paper: #050407;
  --paper-light: #0d090e;
  --paper-deep: #09070b;
  --ink: #e7ded8;
  --ink-soft: #a99a9d;
  --ink-fade: #64575f;
  --ink-deep: #12090f;
  --violet: #681b31;
  --violet-pale: #a77d87;
  --cobalt: #789da5;
  --red: #a51d3d;
  --red-dark: #4f0c20;
  --acid: #9db49f;
  --gold: #8d746d;
  --white: #f5ede7;
}

html,
body {
  background: var(--paper);
}

body {
  background:
    radial-gradient(ellipse at 84% 2%, rgba(120, 157, 165, .035), transparent 28rem),
    radial-gradient(ellipse at 12% 24%, rgba(104, 27, 49, .105), transparent 34rem),
    linear-gradient(180deg, #050407 0%, #070509 48%, #040306 100%);
}

.cathedral {
  border-color: rgba(167, 125, 135, .11);
}

.site-header {
  border-bottom-color: rgba(167, 125, 135, .13);
  background: rgba(5, 4, 7, .92);
}

.fracture-hero {
  background:
    linear-gradient(90deg, rgba(5, 4, 7, .97), rgba(5, 4, 7, .29) 63%, rgba(5, 4, 7, .96)),
    repeating-linear-gradient(90deg, transparent 0 115px, rgba(167, 125, 135, .025) 116px 117px),
    radial-gradient(circle at 74% 48%, rgba(104, 27, 49, .14), transparent 30rem),
    var(--paper);
}

.fracture-hero::before {
  border-color: rgba(167, 125, 135, .12);
  background: linear-gradient(180deg, rgba(104, 27, 49, .105), transparent 66%);
}

.hero-window {
  border-color: rgba(167, 125, 135, .34);
  background: linear-gradient(180deg, rgba(20, 9, 15, .96), rgba(4, 3, 6, .99) 72%);
  box-shadow: 0 0 0 10px rgba(104, 27, 49, .025), 0 20px 80px rgba(0, 0, 0, .78), inset 0 0 70px rgba(104, 27, 49, .065);
}

.hero-window::before {
  border-color: rgba(165, 29, 61, .5);
}

.window-frame {
  background: rgba(167, 125, 135, .17);
}

.window-pane,
.window-pane--one,
.window-pane--two,
.window-pane--three,
.window-pane--four,
.window-pane--five,
.window-pane--six {
  border-color: rgba(167, 125, 135, .14);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .055), transparent 27%),
    linear-gradient(180deg, rgba(104, 27, 49, .14), rgba(3, 3, 5, .94));
}

.window-pane:nth-child(3),
.window-pane:nth-child(6) {
  --pane-accent: var(--violet);
}

.fracture-section {
  border-top-color: rgba(167, 125, 135, .085);
}

.residents-section {
  background:
    radial-gradient(ellipse at 80% 12%, rgba(104, 27, 49, .09), transparent 30rem),
    linear-gradient(180deg, #0a070c, #050407);
}

.resident-room,
.resident-room:nth-child(n) {
  border-color: rgba(167, 125, 135, .17);
  background:
    linear-gradient(180deg, rgba(104, 27, 49, .115), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 35%),
    #0a070c;
  box-shadow: inset 0 0 38px rgba(104, 27, 49, .045), 0 20px 45px rgba(0, 0, 0, .32);
}

.workshop {
  border-color: rgba(167, 125, 135, .18);
  background:
    linear-gradient(135deg, rgba(104, 27, 49, .09), transparent 44%),
    #0d080e;
}

.foundation-section {
  background:
    linear-gradient(90deg, rgba(165, 29, 61, .045), transparent 35%, rgba(120, 157, 165, .025)),
    #040306;
}

.cutaway-house {
  border-color: rgba(167, 125, 135, .28);
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(167, 125, 135, .035) 48px),
    #0a070c;
  box-shadow: inset 0 0 50px rgba(104, 27, 49, .06);
}

.rulebook-section {
  background:
    radial-gradient(ellipse at 15% 90%, rgba(165, 29, 61, .07), transparent 28rem),
    #08060a;
}

.rulebook {
  border-color: rgba(167, 125, 135, .23);
  background: #0a070c;
  box-shadow: 16px 16px 0 rgba(79, 12, 32, .42);
}

.site-footer {
  background: var(--paper);
  border-top-color: rgba(167, 125, 135, .13);
}

.residents-section::before {
  content: "AGENTS";
}