:root {
	--main: #7933e3;
	--spot: #00aef0;
	--press: #0092c8;
	--back: #101111;
	--above: #191b1d;
	--fg: #fff;
	--faint: #c1c1c1;
	--stroke: rgba(255,255,255,.16);
	--notice: #b02a37;
	--display: Montserrat, Arial, sans-serif;
	--base: Inter, Arial, sans-serif;
	--title: clamp(2.1rem, 5vw, 4.4rem);
	--head: clamp(1.65rem, 3vw, 2.5rem);
	--h3: 1.25rem;
	--normal: 1rem;
	--small: .875rem;
	--close: 1.08;
	--l-base: 1.65;
	--book: 400;
	--medium: 500;
	--black: 700;
	--s-1: .4rem;
	--s-2: .65rem;
	--s-3: 1rem;
	--s-4: 1.5rem;
	--s-5: 2.25rem;
	--s-6: 3.5rem;
	--s-7: 5rem;
	--r-3: .45rem;
	--r-4: .85rem;
	--r-5: 1.35rem;
	--pill: 999px;
	--d-3: 0 8px 24px rgba(0,0,0,.2);
	--fast: 109ms;
	--t-base: 240ms;
	--slow: 501ms;
	--exit: cubic-bezier(0.24, 0.65, 0.34, 0.99);
	--both: cubic-bezier(0.61, 0.03, 0.57, 1);
	--overshoot: cubic-bezier(0.39, 1.2, 0.65, 1);
	--page: 1320px;
	--narrow: 620px;
	--size-desktop: 48px;
}
* { box-sizing: border-box; }
html { background: var(--back); color: var(--fg); scroll-behavior: smooth; }
body { background: var(--back); font-family: var(--base); font-size: var(--normal); line-height: var(--l-base); margin: 0; }
a { color: var(--spot); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color var(--fast) var(--exit); }
a:hover { color: #6dd5ff; }
button { font: inherit; }
.spread { background: var(--back); border-bottom: 1px solid var(--stroke); position: sticky; top: 0; transition: top var(--t-base) var(--exit); z-index: 10; }
.spread.is-away { top: calc(-1 * var(--size-desktop)); }
.spread-frame, .pediment-frame, main > section > div { margin: auto; max-width: var(--page); padding-left: var(--s-4); padding-right: var(--s-4); }
.spread-frame { align-items: center; display: flex; justify-content: space-between; min-height: var(--size-desktop); }
.spread-glyph { display: block; height: 40px; max-width: 180px; object-fit: contain; }
.spread-links { align-items: center; display: flex; flex-wrap: wrap; gap: var(--s-3); white-space: nowrap; }
.spread-links.is-managed { flex-wrap: nowrap; overflow: hidden; }
.spread-link { color: var(--fg); font-size: 15px; font-weight: 500; text-decoration: none; text-transform: uppercase; }
.spread-link[aria-current='page'] { font-weight: var(--black); }
.spread-link:hover { color: var(--fg); text-decoration: underline; }
.spread-more { background: none; border: 0; color: var(--fg); cursor: pointer; }
.spread-extra { background: var(--above); border: 1px solid var(--stroke); display: none; list-style: none; margin: 0; padding: var(--s-3); position: absolute; right: var(--s-4); top: 100%; }
.spread-extra.is-open { display: block; }
.spread-keys { display: flex; gap: var(--s-2); }
.spread-button, .pavilion-button, .lattice-button { border-radius: var(--r-3); display: inline-block; font-weight: var(--black); padding: .6rem 1rem; text-decoration: none; transition: transform var(--fast) var(--exit), background var(--fast) var(--exit); }
.spread-button:first-child { border: 1px solid var(--spot); color: var(--spot); }
.spread-button:last-child, .pavilion-button, .lattice-button { background: var(--spot); color: #001b26; }
.spread-button:hover, .pavilion-button:hover, .lattice-button:hover { color: #001b26; transform: translateY(-2px); }
.spread-toggle, .slide-close { background: transparent; border: 0; color: var(--fg); cursor: pointer; display: none; }
.spread-slide { background: var(--above); display: none; height: 100dvh; max-width: 360px; padding: var(--s-5); position: fixed; right: 0; top: 0; transform: translateX(100%); transition: transform var(--t-base) var(--exit); width: 88vw; z-index: 20; }
.spread-slide.is-open { transform: translateX(0); }
.spread-slide-set { display: grid; gap: var(--s-2); list-style: none; padding: 0; }
.spread-slide-link { color: var(--fg); font-weight: var(--medium); }
.pillar { padding: var(--s-7) 0 var(--s-6); }
.pillar-frame { align-items: center; display: grid; gap: var(--s-5); grid-template-columns: 1.1fr .9fr; margin: auto; max-width: var(--page); padding: 0 var(--s-4); }
.pillar-top, .glyph-top { font-family: var(--display); font-size: var(--title); line-height: var(--close); margin: 0; }
.pillar-under { color: var(--faint); font-size: 1.15rem; margin: var(--s-4) 0; max-width: var(--narrow); }
.pillar-art { border-radius: var(--r-5); box-shadow: var(--d-3); max-width: 100%; }
.glyph { padding: var(--s-6) 0 var(--s-4); }
.glyph-top { border-bottom: 4px solid var(--spot); padding-bottom: var(--s-3); }
.gable, .foyer { padding: var(--s-6) 0; }
.gable-body, .foyer-body { font-size: 1.05rem; }
.gable-body > p:first-of-type { border-top: 5px solid var(--spot); font-size: 1.24rem; padding-top: var(--s-4); }
.gable-body h2, .foyer-body h2 { font-family: var(--display); font-size: var(--head); line-height: var(--close); margin: var(--s-6) 0 var(--s-3); }
.buttress, .joist, .bureau, .kiosk, .pavilion, .lozenge, .threshold { padding: var(--s-6) 0; }
.buttress-set, .joist-set { display: grid; gap: var(--s-3); grid-template-columns: repeat(3, 1fr); list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.buttress-entry, .joist-entry, .kiosk-bar, .lozenge-frame, .threshold-frame { background: var(--above); border: 1px solid var(--stroke); border-radius: var(--r-4); padding: var(--s-4); transition: transform var(--t-base) var(--exit); }
.buttress-entry:hover, .joist-entry:hover { border-top: 5px solid var(--spot); transform: translateY(-2px) scale(1.015); }
.buttress-entry svg { fill: var(--spot); height: 2rem; width: 2rem; }
.buttress-top, .joist-top, .bureau-top, .pavilion-top, .kiosk-top, .lozenge-top, .threshold-top { font-family: var(--display); font-size: var(--head); line-height: var(--close); margin: 0; }
.joist-rating { color: #ffd166; font-weight: var(--black); }
.bureau-set { border-top: 1px solid var(--stroke); list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.bureau-entry { border-bottom: 1px solid var(--stroke); }
.bureau-toggle { background: none; border: 0; color: var(--fg); cursor: pointer; font-weight: var(--black); padding: var(--s-3) 0; text-align: left; width: 100%; }
.bureau-body { display: block; margin: 0 0 var(--s-3); }
html[data-spread-15] .bureau-body { display: none; }
html[data-spread-15] .bureau-entry.is-open .bureau-body { display: block; }
.pavilion-frame { background: linear-gradient(135deg, var(--main), #24123c); border-radius: var(--r-5); padding-bottom: var(--s-6); padding-top: var(--s-6); }
.pavilion-target { height: 1px; }
.pavilion-button { background: var(--fg); color: var(--main); }
.kiosk-set { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.kiosk-bar { display: grid; gap: var(--s-2); grid-template-columns: repeat(4, 1fr); }
.kiosk-column { color: var(--faint); font-size: var(--small); }
.kiosk-bar .kiosk-column { color: var(--fg); font-size: var(--normal); }
.kiosk-column::before { content: attr(data-label); display: block; font-size: var(--small); }
.mantle { margin: var(--s-4) 0; }
.mantle-sentence { align-items: center; display: flex; gap: var(--s-2); }
.mantle-pic { border-radius: 50%; height: 33px; object-fit: cover; width: 33px; }
.mantle-epigraph { margin: var(--s-6) auto 0; max-width: 520px; text-align: center; }
.mantle-epigraph .mantle-pic { height: 86px; width: 86px; }
.mantle-quote { font-family: var(--display); font-size: 18px; font-style: italic; }
.threshold-frame { align-items: center; display: flex; gap: var(--s-4); }
.threshold-pic { border-radius: 50%; height: 86px; object-fit: cover; width: 86px; }
.threshold-articles { margin-top: var(--s-5); }
.threshold-articles-set { display: grid; gap: var(--s-2); }
.glyph-frame { margin: auto; max-width: var(--page); padding-left: var(--s-4); padding-right: var(--s-4); }
.threshold-articles-hdr { font-family: var(--display); font-size: var(--head); }
.threshold-articles-entry { margin: var(--s-2) 0; }
.lozenge-frame { max-width: var(--page); }
.lozenge-slot { display: grid; gap: var(--s-1); margin: var(--s-3) 0; }
input, textarea { background: var(--back); border: 1px solid var(--stroke); border-radius: var(--r-3); color: var(--fg); padding: var(--s-2); }
.pediment { border-top: 1px solid var(--stroke); padding: var(--s-6) 0; }
.pediment-frame { display: grid; gap: var(--s-4); grid-template-columns: 1.2fr 1fr 1fr; }
.pediment-set { list-style: none; margin: 0; padding: 0; }
.rafter { background: var(--above); border: 1px solid var(--stroke); bottom: var(--s-3); max-width: 390px; padding: var(--s-4); position: fixed; right: var(--s-3); z-index: 30; }
.rafter[hidden] { display: none; }
.rg { background: var(--notice); border-left: 5px solid var(--fg); color: var(--fg); padding: var(--s-2) var(--s-4); text-align: center; }
.lattice { padding: 15vh 0; text-align: center; }
.lattice-top { font-family: var(--display); font-size: var(--title); margin: 0 auto var(--s-4); max-width: var(--narrow); }
html.js [data-show] { opacity: 0; transform: translateY(20px); transition: opacity var(--slow) var(--exit), transform var(--slow) var(--exit); }
html.js [data-show].is-live { opacity: 1; transform: none; }
@media (max-width: 900px) { .spread-links, .spread-keys { display: none; } .spread-toggle { display: block; } .spread-slide { display: block; } .pillar-frame { grid-template-columns: 1fr; } .buttress-set, .joist-set { grid-template-columns: 1fr 1fr; } .pediment-frame { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .spread-frame, .pediment-frame, main > section > div, .pillar-frame { padding-left: var(--s-3); padding-right: var(--s-3); } .pillar { padding: var(--s-6) 0; } .buttress-set, .joist-set { grid-template-columns: 1fr; } .kiosk-bar { grid-template-columns: 1fr; } .kiosk-column::before { content: attr(data-label); display: block; font-size: var(--small); } .threshold-frame { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0ms !important; } html.js [data-show] { opacity: 1; transform: none; } }

/* codex-cta-style-v2 */
.arch-lead{display:inline-block;text-align:center;padding:.6rem 1rem;border-radius:var(--r-3);font-weight:var(--black)}
.arch-lead{
  background:#16A34A;color:#101111;text-decoration:none;
  transition:background var(--fast) var(--exit),box-shadow var(--fast) var(--exit);}
.arch-lead.arch-lead{color:#101111;text-decoration:none;}
.arch-lead:hover{background:#15803D;color:#FFFFFF;animation:none}
.arch-lead.arch-lead:hover{color:#FFFFFF;text-decoration:none}
.arch-lead:hover::after{animation:none}
.arch-lead:active{background:#166534;color:#FFFFFF}
.arch-lead:focus-visible{outline:3px solid #101111;outline-offset:3px}
.arch-lead{animation:arch-sway 1.36s ease-in-out infinite}
@keyframes arch-sway{0%{transform:translate(0,0)}19.118%{transform:translate(4px,4px)}41.176%,100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.arch-lead,.arch-lead::after{animation:none!important;transition:none!important}}
.arch-rail{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:var(--s-4);background:var(--above);border-radius:var(--r-4);border:1px solid var(--stroke);margin:var(--s-5) 0}
.arch-line.arch-line{margin:0;border:0;padding:0;font-weight:600;font-size:0.9em}
.arch-note.arch-note{margin:0;border:0;padding:0;font-size:0.9em;opacity:.75}

/* codex-content-image-limits */
figure img,.x83-media img{max-height:58vh;object-fit:cover}

.spread-button, .pavilion-button { animation: offer-pulse 1.36s var(--both) infinite; }
@keyframes offer-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,174,240,0); } 50% { box-shadow: 0 0 0 6px rgba(0,174,240,.22); } }
@media (prefers-reduced-motion: reduce) { .spread-button, .pavilion-button { animation: none; } }

.gable img { max-width:100%; height:auto; }
.spread-slide:not(.is-open) { visibility:hidden; transform:none; pointer-events:none; }
.spread-slide.is-open { visibility:visible; pointer-events:auto; }