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

:root {
  color-scheme: dark;
  --night: #0b1018;
  --night-soft: #101722;
  --night-raised: #151e29;
  --ink: #eee9df;
  --muted: #969da4;
  --muted-dark: #68737c;
  --gold: #d9b981;
  --rose: #c98673;
  --sage: #91a496;
  --line: rgba(232, 223, 208, .13);
  --display: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --page-width: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--night); color: var(--ink); font: 400 14px/1.6 var(--sans); overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse at 81% 12%, rgba(38, 53, 61, .38), transparent 44%), radial-gradient(ellipse at 4% 38%, rgba(71, 49, 43, .14), transparent 34%), var(--night); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { background: rgba(217, 185, 129, .34); color: #fff9eb; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.grain { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: .1; 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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E"); }
.scroll-progress { position: fixed; z-index: 20; top: 0; left: 0; height: 2px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left center; box-shadow: 0 0 14px rgba(217,185,129,.5); }
.site-header { height: 82px; max-width: 1440px; margin: auto; padding: 0 6.1%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 10; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; min-width: 190px; }
.wordmark-mark { width: 38px; height: 38px; border: 1px solid rgba(217,185,129,.5); border-radius: 50%; display: grid; place-items: center; color: var(--gold); }
.wordmark-mark svg { width: 27px; height: 27px; overflow: visible; }
.wordmark-mark path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.wordmark-mark circle { fill: var(--night); stroke: currentColor; stroke-width: 1.2; }
.wordmark-copy { display: flex; flex-direction: column; line-height: 1; }
.wordmark-copy strong { font: 500 29px/.88 var(--display); letter-spacing: -.4px; }
.wordmark-copy small { margin-top: 7px; color: var(--gold); font-size: 7px; letter-spacing: 2.9px; }
.primary-nav { display: flex; align-items: center; gap: clamp(24px, 4.3vw, 65px); margin-left: auto; margin-right: 52px; }
.primary-nav a { color: #b2b6ba; font-size: 11px; letter-spacing: .07em; transition: color .25s ease; }
.primary-nav a:hover { color: var(--gold); }
.preview-lock { color: #adb5b3; border: 1px solid rgba(217,185,129,.22); border-radius: 30px; padding: 8px 12px; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.preview-lock span { margin-right: 6px; color: var(--gold); }
.hero { min-height: min(790px, calc(100svh - 82px)); max-width: 1440px; margin: auto; padding: 72px 6.1% 74px; display: grid; grid-template-columns: minmax(380px, .92fr) minmax(440px, 1.08fr); align-items: center; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; width: 40vw; height: 40vw; max-width: 610px; max-height: 610px; right: 8%; top: 1%; border-radius: 50%; border: 1px solid rgba(217,185,129,.045); box-shadow: 0 0 0 46px rgba(217,185,129,.018), 0 0 0 95px rgba(217,185,129,.014); pointer-events: none; }
.hero-copy { padding: 0 0 38px 1.2%; position: relative; z-index: 2; animation: rise-in 1s .1s both; }
.eyebrow { margin: 0; color: var(--gold); font-size: 9px; line-height: 1.5; letter-spacing: .24em; font-weight: 500; }
.eyebrow-rule { width: 29px; height: 1px; display: inline-block; margin: 0 11px 3px 0; background: var(--gold); }
.hero h1 { margin: 28px 0 16px; font: 400 clamp(70px, 8.3vw, 119px)/.83 var(--display); letter-spacing: -.065em; }
.hero h1 em, h2 em, h3 em { color: var(--gold); font-weight: 400; }
.hero-lede { margin: 28px 0 0; color: #ddd8ce; font: 400 clamp(21px, 2.1vw, 27px)/1.38 var(--display); letter-spacing: .005em; }
.hero-note { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; letter-spacing: .02em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 13px 18px; min-height: 46px; border-radius: 2px; font-size: 10px; letter-spacing: .08em; transition: transform .25s, background .25s, border-color .25s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #121821; background: var(--gold); border: 1px solid var(--gold); }
.button-primary:hover { background: #ead3ab; border-color: #ead3ab; }
.button-primary span { font-size: 15px; line-height: 1; }
.text-link, .underlined-link { display: inline-flex; align-items: center; gap: 12px; color: #c8c8c1; font-size: 10px; letter-spacing: .05em; transition: color .2s; }
.text-link:hover, .underlined-link:hover { color: var(--gold); }
.text-link span { color: var(--gold); font-size: 16px; transition: transform .2s; }
.text-link:hover span { transform: translateX(4px); }
.hero-footnote { margin-top: 63px; color: #737d84; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.tiny-star { margin-right: 8px; color: var(--gold); font-size: 12px; }
.hero-art { min-height: 575px; position: relative; display: grid; place-items: center; animation: fade-in 1.3s .25s both; }
.art-glow { position: absolute; width: 61%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(217,185,129,.13) 0%, rgba(120,97,76,.08) 36%, rgba(13,20,29,0) 71%); filter: blur(9px); }
.orbit-lines { position: absolute; width: min(100%, 670px); height: auto; overflow: visible; }
.orbit { stroke: rgba(217,185,129,.15); stroke-width: .8; stroke-dasharray: 2 9; transform-origin: center; animation: orbit-turn 84s linear infinite; }
.orbit-two { stroke: rgba(145,164,150,.13); stroke-dasharray: 1 7; animation-direction: reverse; animation-duration: 110s; }
.orbit-three { stroke: rgba(217,185,129,.09); stroke-dasharray: 1 8; animation-duration: 135s; }
.orbit-path { stroke: rgba(217,185,129,.26); stroke-width: 1.1; stroke-dasharray: 2 6; animation: dash 24s linear infinite; }
.orbit-path-soft { stroke: rgba(201,134,115,.2); stroke-dasharray: 1 8; animation-direction: reverse; animation-duration: 29s; }
.orbit-dot { stroke: var(--night); stroke-width: 4; animation: pulse 4s ease-in-out infinite; }
.dot-gold { fill: var(--gold); }.dot-rose { fill: var(--rose); animation-delay: -1.7s; }.dot-sage { fill: var(--sage); animation-delay: -2.5s; }
.orbit-center { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 145px; height: 145px; border: 1px solid rgba(217,185,129,.34); border-radius: 50%; background: radial-gradient(circle at 45% 35%, rgba(217,185,129,.14), rgba(15,22,32,.9) 69%); box-shadow: 0 0 64px rgba(217,185,129,.11), inset 0 0 40px rgba(217,185,129,.06); }
.orbit-center::before, .orbit-center::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(217,185,129,.12); border-radius: 50%; }
.orbit-center::after { inset: -11px; border-color: rgba(217,185,129,.09); }
.orbit-center > span:not(.center-star) { font: 400 54px/.84 var(--display); color: #f1e9db; }
.orbit-center small { margin-top: 9px; color: #b5a58c; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.center-star { position: absolute; top: 21px; right: 28px; color: var(--gold); font-size: 12px; }
.orbit-label { position: absolute; padding: 8px 12px; color: #c5c4bc; border: 1px solid rgba(214,209,195,.15); background: rgba(14,20,29,.75); border-radius: 30px; font: 400 14px var(--display); letter-spacing: .02em; backdrop-filter: blur(8px); }
.label-people { top: 15%; left: 48%; }.label-moments { top: 34%; right: 2%; }.label-places { bottom: 20%; right: 15%; }.label-stories { bottom: 16%; left: 20%; }.label-time { top: 38%; left: 2%; }
.art-caption { position: absolute; bottom: 15px; right: 8%; display: flex; align-items: center; gap: 12px; color: #77828a; font-size: 8px; letter-spacing: .22em; }
.art-caption span { color: var(--gold); }
.scroll-cue { position: absolute; bottom: 31px; left: 7.3%; display: flex; align-items: center; gap: 12px; color: #758089; font-size: 8px; letter-spacing: .17em; text-transform: uppercase; }
.scroll-cue span { height: 34px; width: 1px; display: inline-block; background: linear-gradient(var(--gold), transparent); animation: cue 1.8s ease-in-out infinite; }

.section-pad { padding-left: max(7.4%, calc((100% - var(--page-width)) / 2)); padding-right: max(7.4%, calc((100% - var(--page-width)) / 2)); }
.intro-section { padding-top: 135px; padding-bottom: 145px; background: linear-gradient(180deg, #101722 0%, #111924 100%); border-block: 1px solid rgba(255,255,255,.035); }
.section-kicker { display: flex; align-items: center; gap: 14px; color: #89929a; font-size: 8px; letter-spacing: .21em; }
.section-kicker > span:first-child { color: var(--gold); font: 400 17px var(--display); letter-spacing: 0; }
.kicker-line { width: 42px; height: 1px; background: rgba(217,185,129,.5); }
.intro-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 9%; align-items: end; margin-top: 69px; }
.intro-heading .eyebrow { margin-bottom: 20px; }
.intro-heading h2, .connection-heading h2, .chapters-top h2, .today-copy h2, .closing-section h2 { margin: 0; font: 400 clamp(52px, 6.3vw, 86px)/.93 var(--display); letter-spacing: -.042em; }
.intro-heading h2 em, .connection-heading h2 em, .chapters-top h2 em, .today-copy h2 em, .closing-section h2 em { color: var(--gold); }
.intro-body { padding: 0 0 6px; max-width: 475px; }
.intro-body p { margin: 0 0 17px; color: #a4aeb5; font-size: 12px; line-height: 1.95; }
.intro-body .intro-lede { margin-bottom: 22px; color: #ded9cf; font: 400 24px/1.35 var(--display); }
.underlined-link { margin-top: 17px; padding-bottom: 8px; border-bottom: 1px solid rgba(217,185,129,.4); }
.underlined-link span { color: var(--gold); }

.connection-section { min-height: 690px; position: relative; overflow: hidden; background: #0a1017; }
.connection-backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse at 77% 50%, rgba(65,79,77,.16), transparent 44%), radial-gradient(ellipse at 15% 95%, rgba(137,86,67,.08), transparent 36%); pointer-events: none; }
.connection-section::before { content: ""; position: absolute; width: 580px; height: 580px; right: -200px; top: -260px; border: 1px solid rgba(217,185,129,.1); border-radius: 50%; box-shadow: 0 0 0 38px rgba(217,185,129,.02), 0 0 0 76px rgba(217,185,129,.015); }
.connection-inner { position: relative; z-index: 1; display: grid; grid-template-columns: .85fr 1.15fr; gap: 10%; align-items: center; padding-top: 112px; padding-bottom: 110px; }
.connection-heading h2 { margin-top: 54px; font-size: clamp(51px, 5.4vw, 74px); }
.connection-heading > p { margin: 23px 0 0; color: var(--muted); font-size: 12px; }
.connection-explorer { min-width: 0; }
.explorer-tabs { display: flex; gap: 29px; border-bottom: 1px solid var(--line); }
.explorer-tab { padding: 0 0 13px; position: relative; border: 0; background: transparent; color: #88939b; cursor: pointer; font: 400 19px var(--display); transition: color .2s ease; }
.explorer-tab::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: transparent; transition: background .2s; }
.explorer-tab:hover, .explorer-tab.is-active { color: var(--gold); }
.explorer-tab.is-active::after { background: var(--gold); }
.explorer-panel { min-height: 310px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 7%; align-items: center; padding: 39px 0 32px; transition: opacity .15s, transform .15s; }
.explorer-panel.is-changing { opacity: 0; transform: translateY(5px); }
.panel-ornament { width: 190px; height: 190px; justify-self: center; position: relative; display: grid; place-items: center; border: 1px solid rgba(217,185,129,.25); border-radius: 50%; background: radial-gradient(circle, rgba(217,185,129,.08), transparent 67%); }
.panel-ornament::before, .panel-ornament::after { content: ""; position: absolute; inset: 17px; border: 1px dashed rgba(145,164,150,.32); border-radius: 50%; animation: orbit-turn 55s linear infinite; }
.panel-ornament::after { inset: 43px; border-style: solid; border-color: rgba(201,134,115,.2); animation-duration: 34s; animation-direction: reverse; }
.ornament-ring { position: absolute; width: 57px; height: 57px; border: 1px solid rgba(217,185,129,.45); border-radius: 50%; box-shadow: 0 0 27px rgba(217,185,129,.12); }
.ornament-core { color: var(--gold); font-size: 18px; }
.ornament-node { position: absolute; width: 8px; height: 8px; border: 2px solid var(--night); border-radius: 50%; background: var(--gold); }
.node-a { top: 31px; left: 37px; }.node-b { right: 23px; top: 87px; background: var(--rose); }.node-c { left: 57px; bottom: 20px; background: var(--sage); }
.panel-copy .eyebrow { font-size: 8px; }
.panel-copy h3 { margin: 15px 0 12px; color: var(--ink); font: 400 35px/1.04 var(--display); }
.panel-copy h3 em { color: var(--gold); }
.panel-copy > p:not(.eyebrow) { max-width: 340px; margin: 0; color: #9ba5ad; font-size: 11px; line-height: 1.8; }
.panel-index { display: inline-block; margin-top: 21px; color: var(--gold); font-size: 10px; letter-spacing: .08em; }
.panel-index i { color: #59656e; font-style: normal; }
.explorer-caption { display: flex; align-items: center; gap: 11px; margin: 0; color: #68757d; font-size: 8px; letter-spacing: .08em; }
.caption-line { width: 24px; height: 1px; background: rgba(217,185,129,.55); }

.chapters-section { padding-top: 130px; padding-bottom: 139px; }
.chapters-top { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.chapters-top h2 { margin-top: 49px; }
.chapters-top > p { max-width: 292px; margin: 0 2% 7px 0; color: var(--muted); font: 400 20px/1.42 var(--display); }
.featured-chapters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 77px; background: rgba(232,223,208,.12); border: 1px solid rgba(232,223,208,.12); }
.chapter-feature { min-height: 336px; position: relative; padding: 26px 27px 28px; background: #0d141d; overflow: hidden; transition: background .35s; }
.chapter-feature:hover { background: #131e29; }
.chapter-number { color: #7e8990; font-size: 8px; letter-spacing: .15em; }
.chapter-glyph { position: absolute; top: 36px; right: 33px; width: 79px; height: 79px; border: 1px solid rgba(217,185,129,.2); border-radius: 50%; }
.chapter-glyph::before, .chapter-glyph::after { content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(217,185,129,.32); border-radius: 50%; }
.chapter-glyph::after { inset: 27px; border-style: solid; border-color: rgba(145,164,150,.28); }
.chapter-glyph span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.chapter-glyph span:nth-child(1) { top: 1px; left: 40px; }.chapter-glyph span:nth-child(2) { top: 46px; left: 8px; background: var(--sage); }.chapter-glyph span:nth-child(3) { top: 56px; right: 8px; background: var(--rose); }
.chapter-glyph i { position: absolute; top: 37px; left: 36px; width: 8px; height: 8px; border: 1px solid var(--gold); border-radius: 50%; background: #0d141d; }
.glyph-moments { border-color: rgba(201,134,115,.24); transform: rotate(34deg); }.glyph-moments::before { border-color: rgba(201,134,115,.37); }.glyph-moments span:nth-child(1) { background: var(--rose); }.glyph-history { transform: rotate(-24deg); border-color: rgba(145,164,150,.3); }.glyph-history::before { border-color: rgba(145,164,150,.35); }.glyph-history span:nth-child(1) { background: var(--sage); }
.chapter-feature h3 { margin: 69px 0 11px; font: 400 37px/.95 var(--display); letter-spacing: -.02em; }
.chapter-feature p { max-width: 275px; margin: 0; color: #909ba2; font-size: 10px; line-height: 1.8; }
.chapter-arrow { position: absolute; right: 26px; bottom: 26px; color: var(--gold); font-size: 17px; opacity: .75; transition: transform .25s; }.chapter-feature:hover .chapter-arrow { transform: translate(3px,-3px); }
.other-chapters { margin-top: 80px; }
.other-heading { display: flex; align-items: center; gap: 15px; color: #77838a; font-size: 8px; letter-spacing: .2em; }
.other-heading .kicker-line { flex: 1; background: var(--line); }
.other-heading span:last-child { color: #a0947f; }
.chapter-list { margin-top: 21px; border-top: 1px solid var(--line); }
.chapter-row { border-bottom: 1px solid var(--line); }
.chapter-row summary { min-height: 62px; display: grid; grid-template-columns: 53px 1fr 25px; align-items: center; list-style: none; cursor: pointer; }
.chapter-row summary::-webkit-details-marker { display: none; }
.row-number { color: var(--gold); font: 400 17px var(--display); }
.row-title { color: #d7d6cf; font: 400 20px var(--display); transition: color .2s; }
.chapter-row summary:hover .row-title { color: var(--gold); }
.row-mark { justify-self: end; color: var(--gold); font-size: 18px; transition: transform .25s; }
.chapter-row[open] .row-mark { transform: rotate(45deg); }
.chapter-row > p { max-width: 690px; margin: -2px 42px 20px 53px; color: #909ba2; font-size: 11px; line-height: 1.8; animation: fade-in .3s both; }

.today-section { min-height: 600px; position: relative; overflow: hidden; display: flex; align-items: center; background: #131c26; border-block: 1px solid rgba(255,255,255,.04); }
.today-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 45%, rgba(217,185,129,.08), transparent 44%), linear-gradient(100deg, rgba(8,14,21,.25), transparent 60%); }
.today-orbit { position: absolute; right: 4%; width: min(44vw, 580px); aspect-ratio: 1; display: grid; place-items: center; opacity: .76; }
.today-ring { position: absolute; border: 1px solid rgba(217,185,129,.16); border-radius: 50%; }
.ring-one { inset: 26%; border-style: dashed; animation: orbit-turn 50s linear infinite; }.ring-two { inset: 11%; border-color: rgba(145,164,150,.16); animation: orbit-turn 72s linear infinite reverse; }.ring-three { inset: 0; border-color: rgba(217,185,129,.08); }
.today-star { color: var(--gold); font-size: 33px; text-shadow: 0 0 42px rgba(217,185,129,.6); }
.today-copy { width: min(660px, 68%); position: relative; z-index: 1; padding: 101px 0 108px max(7.4%, calc((100% - var(--page-width)) / 2)); }
.today-copy .eyebrow { margin-top: 55px; color: #b49f7e; font-size: 8px; }
.today-copy h2 { margin-top: 13px; font-size: clamp(62px, 7.2vw, 96px); }
.today-copy > p:not(.eyebrow) { max-width: 415px; margin: 17px 0 0; color: #a1a9ae; font-size: 12px; line-height: 1.85; }
.today-empty { display: flex; align-items: flex-start; gap: 14px; max-width: 373px; margin-top: 29px; padding: 16px 19px; border: 1px solid rgba(217,185,129,.2); background: rgba(10,16,23,.36); color: #d2cdc1; font: 400 16px/1.2 var(--display); }
.empty-spark { color: var(--gold); font-size: 18px; }
.today-empty small { display: block; margin-top: 6px; color: #79848c; font: 400 9px/1.5 var(--sans); letter-spacing: .03em; }
.today-index { position: absolute; right: 6.2%; bottom: 47px; display: flex; align-items: center; gap: 12px; color: #75818a; font: 400 16px var(--display); }
.today-index span:first-child { color: var(--gold); }.today-index i { width: 67px; height: 1px; background: linear-gradient(90deg,var(--gold),rgba(217,185,129,.12)); }

.closing-section { min-height: 480px; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; padding-top: 94px; padding-bottom: 96px; }
.closing-section h2 { margin: 27px 0 27px; font-size: clamp(56px, 7vw, 88px); }
.closing-scribble { position: absolute; right: 12%; top: 9%; color: rgba(217,185,129,.08); font: 400 350px/.8 var(--display); transform: rotate(-14deg); pointer-events: none; }
.site-footer { min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 6.1%; border-top: 1px solid var(--line); color: #77828a; }
.footer-mark { color: var(--ink); font: 500 24px var(--display); }.footer-mark span { margin-left: 5px; color: var(--gold); font: 400 11px var(--sans); }
.site-footer p { margin: 0; font: 400 16px var(--display); color: #a3a7a7; }
.site-footer small { font-size: 7px; letter-spacing: .17em; }

@keyframes rise-in { from { opacity: 0; transform: translateY(19px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
@keyframes dash { to { stroke-dashoffset: -84; } }
@keyframes pulse { 0%,100% { opacity: .6; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes cue { 0%,100% { opacity: .5; transform: scaleY(.8); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } }

@media (max-width: 1020px) {
  .site-header { padding-inline: 4.5%; }
  .primary-nav { gap: 25px; margin-right: 26px; }
  .hero { grid-template-columns: minmax(320px,.9fr) minmax(360px,1.1fr); padding-inline: 4.5%; }
  .hero h1 { font-size: clamp(70px, 9vw, 102px); }
  .hero-art { min-height: 490px; }
  .orbit-label { font-size: 12px; }
  .section-pad { padding-inline: 6%; }
  .connection-inner { gap: 6%; }
  .panel-ornament { width: 155px; height: 155px; }
  .today-copy { padding-left: 6%; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  .site-header { height: 68px; padding-inline: 5%; }
  .wordmark { min-width: 0; gap: 8px; }
  .wordmark-mark { width: 34px; height: 34px; }
  .wordmark-copy strong { font-size: 25px; }
  .wordmark-copy small { font-size: 6px; letter-spacing: 2.2px; }
  .primary-nav { display: none; }
  .preview-lock { margin-left: auto; padding: 7px 9px; font-size: 8px; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding: 73px 6% 70px; }
  .hero-copy { padding: 0; }
  .hero h1 { margin-top: 25px; font-size: clamp(66px, 17vw, 102px); }
  .hero-lede { margin-top: 25px; font-size: 23px; }
  .hero-note { font-size: 11px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 21px; margin-top: 27px; }
  .hero-footnote { margin-top: 38px; font-size: 8px; }
  .hero-art { min-height: min(102vw, 460px); margin: -4px -9% 0; }
  .hero-art .orbit-lines { width: 112%; }
  .orbit-center { width: 112px; height: 112px; }
  .orbit-center > span:not(.center-star) { font-size: 43px; }
  .orbit-center small { font-size: 6px; }
  .orbit-label { padding: 6px 9px; font-size: 12px; }
  .label-people { top: 13%; left: 50%; }.label-moments { top: 34%; right: 1%; }.label-places { bottom: 18%; right: 12%; }.label-stories { bottom: 15%; left: 15%; }.label-time { top: 38%; left: 1%; }
  .art-caption { bottom: 4px; right: 11%; font-size: 7px; }
  .scroll-cue { bottom: 17px; left: 6%; font-size: 7px; }
  .scroll-cue span { height: 24px; }
  .section-pad { padding-inline: 7%; }
  .intro-section { padding-top: 85px; padding-bottom: 90px; }
  .intro-grid { grid-template-columns: 1fr; gap: 36px; margin-top: 47px; }
  .intro-heading h2 { font-size: clamp(53px, 14vw, 72px); }
  .intro-body .intro-lede { font-size: 22px; }
  .intro-body p { font-size: 11px; }
  .connection-section { min-height: auto; }
  .connection-inner { grid-template-columns: 1fr; gap: 47px; padding-top: 83px; padding-bottom: 81px; }
  .connection-heading h2 { margin-top: 40px; font-size: clamp(53px, 13vw, 71px); }
  .connection-heading > p { font-size: 11px; }
  .explorer-tabs { gap: 24px; }
  .explorer-tab { font-size: 18px; }
  .explorer-panel { grid-template-columns: .78fr 1.22fr; gap: 5%; min-height: 260px; padding-block: 28px; }
  .panel-ornament { width: min(26vw, 150px); height: min(26vw, 150px); }
  .panel-copy h3 { font-size: 29px; }
  .panel-copy > p:not(.eyebrow) { font-size: 10px; }
  .explorer-caption { align-items: flex-start; font-size: 7px; }
  .chapters-section { padding-top: 85px; padding-bottom: 88px; }
  .chapters-top { display: block; }
  .chapters-top h2 { margin-top: 38px; font-size: clamp(53px, 13vw, 71px); }
  .chapters-top > p { max-width: 280px; margin: 22px 0 0; font-size: 18px; }
  .featured-chapters { grid-template-columns: 1fr; margin-top: 44px; }
  .chapter-feature { min-height: 260px; padding: 22px; }
  .chapter-glyph { top: 25px; right: 26px; transform: scale(.85); }
  .glyph-moments { transform: scale(.85) rotate(34deg); }.glyph-history { transform: scale(.85) rotate(-24deg); }
  .chapter-feature h3 { margin-top: 55px; font-size: 34px; }
  .chapter-feature p { max-width: 250px; }
  .other-chapters { margin-top: 58px; }
  .chapter-row summary { min-height: 58px; grid-template-columns: 42px 1fr 23px; }
  .row-title { font-size: 18px; }
  .chapter-row > p { margin-left: 42px; margin-right: 25px; }
  .today-section { min-height: auto; }
  .today-copy { width: 100%; padding: 82px 7% 96px; }
  .today-copy .eyebrow { margin-top: 46px; }
  .today-copy h2 { font-size: clamp(65px, 17vw, 91px); }
  .today-copy > p:not(.eyebrow) { max-width: 330px; font-size: 11px; }
  .today-orbit { width: 62vw; right: -22vw; top: 12%; opacity: .42; }
  .today-empty { max-width: 100%; padding: 14px 15px; font-size: 15px; }
  .today-index { bottom: 27px; right: 7%; font-size: 14px; }
  .today-index i { width: 43px; }
  .closing-section { min-height: 400px; padding-top: 83px; padding-bottom: 83px; }
  .closing-section h2 { font-size: clamp(54px, 14vw, 76px); }
  .closing-scribble { right: -7%; top: 20%; font-size: 210px; }
  .site-footer { min-height: 116px; flex-wrap: wrap; justify-content: space-between; gap: 5px 20px; padding: 21px 7%; }
  .site-footer p { order: 3; width: 100%; font-size: 15px; }
  .site-footer small { text-align: right; font-size: 6px; }
}
@media (max-width: 410px) {
  .hero h1 { font-size: clamp(55px, 15.5vw, 63px); }
  .hero-art { min-height: 111vw; }
  .label-moments { right: 0; }.label-time { left: 0; }
  .explorer-tabs { gap: 18px; }
  .explorer-tab { font-size: 16px; }
  .explorer-panel { grid-template-columns: 1fr; gap: 12px; padding-top: 24px; }
  .panel-ornament { width: 104px; height: 104px; justify-self: start; margin-left: 12px; }
  .panel-copy h3 { margin-top: 10px; }
  .panel-copy > p:not(.eyebrow) { max-width: 300px; }
  .panel-index { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}