@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Libre+Caslon+Display&display=swap');

:root { --ink:#17140f; --sand:#e9dfcb; --cream:#f4eddf; --clay:#a44828; --gold:#d69b40; --lapis:#123c5a; --line:rgba(23,20,15,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; overflow-x:hidden; }
body.menu-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
.noise { position:fixed; inset:0; opacity:.04; pointer-events:none; z-index:30; 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
.site-header { position:absolute; top:0; left:0; width:100%; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:28px 5vw; color:#fff; border-bottom:1px solid rgba(255,255,255,.16); }
.brand { display:flex; align-items:center; gap:12px; font-family:"Libre Caslon Display",Georgia,serif; font-size:19px; line-height:.85; }
.brand small { display:block; font:500 8px/1.8 "DM Sans"; letter-spacing:.28em; text-transform:uppercase; }
.brand svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.2; }
.desktop-nav { display:flex; gap:42px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.desktop-nav a { opacity:.75; transition:.25s; }
.desktop-nav a:hover { opacity:1; }
.menu-toggle { display:none; color:inherit; background:none; border:0; padding:10px; }
.menu-toggle span { display:block; width:24px; height:1px; background:currentColor; margin:6px; transition:.3s; }
.hero { min-height:100svh; height:850px; position:relative; display:flex; align-items:center; color:#fff; overflow:hidden; }
.hero-image { position:absolute; inset:0; background:url('../images/mesopotamia-hero.png') center/cover no-repeat; animation:heroIn 1.5s cubic-bezier(.2,.7,.2,1) both; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(12,9,5,.88) 0%,rgba(12,9,5,.55) 39%,rgba(12,9,5,.09) 72%),linear-gradient(0deg,rgba(9,7,4,.58),transparent 42%); }
.hero-copy { position:relative; z-index:1; margin-left:10vw; max-width:780px; padding-top:80px; }
.eyebrow { margin:0 0 25px; color:#e9b75d; font-size:10px; font-weight:600; letter-spacing:.32em; text-transform:uppercase; }
.eyebrow.dark { color:var(--clay); }
h1,h2,h3,blockquote { font-family:"Libre Caslon Display",Georgia,serif; font-weight:400; }
h1 { margin:0; font-size:clamp(64px,8.5vw,132px); line-height:.83; letter-spacing:-.055em; }
h1 em { color:#efc273; font-weight:400; }
.hero-intro { max-width:480px; margin:38px 0; color:rgba(255,255,255,.73); font:300 16px/1.8 "DM Sans"; }
.explore-link { display:inline-flex; align-items:center; gap:35px; font-size:11px; text-transform:uppercase; letter-spacing:.18em; }
.explore-link span { border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:8px; }
.explore-link b { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.35); border-radius:50%; transition:.3s; }
.explore-link:hover b { background:#fff; color:#111; transform:translateY(4px); }
.hero-marker { position:absolute; z-index:2; right:5vw; bottom:11%; display:flex; align-items:center; gap:15px; }
.hero-marker p { margin:0; font:300 11px/1.5 "DM Sans"; }
.hero-marker small { display:block; color:#e9b75d; font-size:8px; letter-spacing:.2em; }
.pulse { width:8px; height:8px; background:#e9b75d; border-radius:50%; box-shadow:0 0 0 8px rgba(233,183,93,.2); }
.scroll-cue { position:absolute; left:5vw; bottom:9%; display:flex; align-items:center; gap:14px; font-size:8px; letter-spacing:.2em; text-transform:uppercase; opacity:.6; transform:rotate(-90deg); transform-origin:left center; }
.scroll-cue span { width:55px; height:1px; background:#fff; }
.section-pad { padding:150px 10vw; }
.intro { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:10vw; background:var(--cream); }
.section-number { position:absolute; top:60px; left:5vw; color:var(--clay); font-family:Georgia,serif; font-size:12px; }
.section-number:after { content:""; display:block; height:70px; width:1px; background:var(--clay); margin:15px auto; }
.intro h2,.legacy h2,.civilizations h2 { margin:0; font-size:clamp(52px,6vw,90px); line-height:.92; letter-spacing:-.045em; }
.intro-copy { padding-top:75px; max-width:580px; }
.intro-copy .lead { font:400 24px/1.45 "Libre Caslon Display",Georgia,serif; }
.intro-copy>p:not(.lead) { color:#645d52; font-size:14px; line-height:1.8; }
.overview-summary { max-height:180px; padding-right:12px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--clay) rgba(23,20,15,.1); }
.overview-summary::-webkit-scrollbar { width:6px; }
.overview-summary::-webkit-scrollbar-track { background:rgba(23,20,15,.1); }
.overview-summary::-webkit-scrollbar-thumb { background:var(--clay); border-radius:6px; }
.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:60px; padding-top:32px; border-top:1px solid var(--line); }
.stat-row strong { display:block; font:400 34px "Libre Caslon Display",serif; color:var(--clay); }
.stat-row span { font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#766d60; }
.civilizations { background:var(--ink); color:#eee5d4; padding:140px 0 0; }
.civilizations-top { padding-top:0; padding-bottom:80px; display:flex; align-items:end; justify-content:space-between; }
.civilizations-note { color:#756f64; font-size:10px; text-transform:uppercase; letter-spacing:.2em; }
.era-layout { display:grid; grid-template-columns:38% 62%; min-height:620px; border-top:1px solid rgba(255,255,255,.12); }
.era-tabs { display:flex; flex-direction:column; }
.era-tab { flex:1; display:grid; grid-template-columns:50px 1fr; align-content:center; gap:3px; padding:25px 5vw; color:#777167; border:0; border-bottom:1px solid rgba(255,255,255,.1); border-right:1px solid rgba(255,255,255,.1); background:transparent; text-align:left; font:400 24px "Libre Caslon Display",serif; cursor:pointer; transition:.35s; }
.era-tab span { grid-row:span 2; font:500 9px "DM Sans"; color:#5e5a53; padding-top:9px; }
.era-tab small { font:400 9px "DM Sans"; letter-spacing:.14em; text-transform:uppercase; }
.era-tab:hover,.era-tab.active { color:#f4eddf; background:rgba(255,255,255,.035); }
.era-tab.active { border-left:3px solid var(--gold); }
.era-card { position:relative; overflow:hidden; display:grid; place-items:center; padding:80px 12vw; background:radial-gradient(circle at 80% 20%,rgba(167,78,40,.32),transparent 30%),linear-gradient(135deg,#332318,#191713); }
.era-card>div:last-child { position:relative; z-index:1; max-width:620px; }
.era-symbol { position:absolute; right:-3%; top:-12%; font-size:440px; line-height:1; color:rgba(215,157,68,.08); }
.era-date { color:var(--gold); font-size:9px; letter-spacing:.25em; text-transform:uppercase; }
.era-card h3 { margin:12px 0 25px; font-size:clamp(48px,6vw,84px); }
.era-card p:not(.era-date) { color:#aaa294; font-size:15px; line-height:1.9; }
.era-facts { display:flex; flex-wrap:wrap; gap:8px; margin-top:38px; }
.era-facts span { padding:9px 14px; border:1px solid rgba(255,255,255,.18); border-radius:30px; color:#cfc6b8; font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.era-detail-link { display:inline-flex; align-items:center; gap:28px; margin-top:34px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.35); color:#d69b40; font-size:9px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.era-detail-link b { font-size:16px; transition:transform .25s; }.era-detail-link:hover b { transform:translateX(6px); }
.database-timeline { padding-bottom:140px; }
.db-timeline-list { border-top:1px solid rgba(255,255,255,.13); }
.db-era { border-bottom:1px solid rgba(255,255,255,.13); }
.db-era summary { min-height:124px; display:grid; grid-template-columns:90px minmax(0,1fr) 130px; align-items:center; padding:24px 10vw; cursor:pointer; list-style:none; transition:background .3s,color .3s; }
.db-era summary::-webkit-details-marker { display:none; }
.db-era summary:hover,.db-era[open] summary { background:#211d17; }
.db-era-number { color:#716b61; font-size:9px; letter-spacing:.18em; }
.db-era-name { font:400 clamp(25px,3vw,42px) "Libre Caslon Display",Georgia,serif; }
.db-era-action { display:flex; align-items:center; justify-content:flex-end; gap:17px; color:#777168; }
.db-era-action b { font-size:8px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; }
.db-era-action i { position:relative; width:37px; height:37px; border:1px solid rgba(255,255,255,.2); border-radius:50%; }
.db-era-action i:before,.db-era-action i:after { content:""; position:absolute; left:50%; top:50%; width:10px; height:1px; background:#d69b40; transform:translate(-50%,-50%); }
.db-era-action i:after { transform:translate(-50%,-50%) rotate(90deg); transition:transform .3s; }
.db-era[open] .db-era-action i:after { transform:translate(-50%,-50%) rotate(0); }
.db-era[open] .db-era-action b { color:#d69b40; }
.db-era-content { position:relative; overflow:hidden; padding:80px 20vw 95px; background:radial-gradient(circle at 80% 30%,rgba(164,72,40,.25),transparent 32%),#211d17; }
.db-era-content>.eyebrow { margin-bottom:20px; }
.db-era-content>h3,.db-era-copy>h3 { max-width:800px; margin:0 0 28px; color:#f1e8d8; font:400 clamp(38px,5vw,68px)/1 "Libre Caslon Display",Georgia,serif; }
.db-era-copy { position:relative; z-index:1; max-width:820px; }
.db-era-copy p { margin:0 0 18px; color:#aaa295; font-size:14px; line-height:1.85; }
.db-era-copy p:first-of-type { color:#d2c8b8; font:400 20px/1.6 "Libre Caslon Display",Georgia,serif; }
.db-era-copy ul,.db-era-copy ol { color:#aaa295; font-size:14px; line-height:1.8; }
.db-era-symbol { position:absolute; right:4vw; bottom:-90px; color:rgba(214,155,64,.07); font-size:360px; line-height:1; }
.timeline-empty { padding:100px 10vw; text-align:center; }.timeline-empty>span { color:#d69b40; font-size:90px; }.timeline-empty h3 { margin:15px 0 8px; font-size:42px; }.timeline-empty p { color:#817a70; }
.legacy { position:relative; }
.legacy-title { display:flex; justify-content:space-between; align-items:start; margin-bottom:85px; }
.legacy-title .eyebrow { padding-top:15px; }
.artifact-grid { display:grid; grid-template-columns:1.2fr .8fr; grid-template-rows:repeat(2,420px); gap:18px; }
.artifact { position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; background:#dfd0b7; }
.artifact.large { grid-row:span 2; display:flex; flex-direction:column; }
.artifact.blue { background:var(--lapis); color:#fff; }
.artifact-visual { min-height:220px; display:grid; place-items:center; }
.clay-tablet { flex:1; background:linear-gradient(150deg,#b56742,#6c301e); }
.clay-tablet span { padding:80px 50px; border-radius:44% 49% 42% 40%; background:linear-gradient(145deg,#b77a55,#70402b); box-shadow:20px 24px 40px rgba(30,12,5,.5),inset 8px 9px 15px rgba(255,215,170,.18); color:#5e2e20; text-shadow:1px 1px #d29a73; font-size:62px; line-height:1.1; transform:rotate(-6deg); }
.artifact-copy { padding:38px; }
.artifact-copy>span { color:var(--clay); font-size:8px; letter-spacing:.2em; text-transform:uppercase; }
.blue .artifact-copy>span { color:#ddaa54; }
.artifact-copy h3 { margin:12px 0; font-size:clamp(30px,3vw,48px); line-height:1; }
.artifact-copy p { margin:0; color:#665f54; font-size:12px; line-height:1.7; }
.blue .artifact-copy p { color:#a9bdca; }
.artifact-detail-link { display:inline-flex; align-items:center; gap:20px; margin-top:20px; padding-bottom:6px; border-bottom:1px solid rgba(23,20,15,.3); color:var(--clay); font-size:7px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.blue .artifact-detail-link { color:#e0ae59; border-bottom-color:rgba(255,255,255,.3); }
.artifact-detail-link b { font-size:13px; transition:transform .25s; }.artifact-detail-link:hover b { transform:translateX(5px); }
.stars { position:relative; color:#bd7a35; font-size:70px; background:#cbb895; }
.orbit { position:absolute; width:150px; height:150px; border:1px solid rgba(84,53,28,.35); border-radius:50%; }
.orbit:after,.orbit:before { content:"✦"; position:absolute; font-size:15px; }
.orbit:after { right:-5px; top:35px; }.orbit:before { left:15px; bottom:5px; }
.law { background:#194b6d; font-size:110px; color:#d5a94e; }
.quote-section { position:relative; overflow:hidden; padding:180px 20px; text-align:center; background:#a34828; color:#f6ead9; }
.quote-section blockquote { position:relative; margin:0 auto 35px; font-size:clamp(42px,6vw,78px); line-height:1.05; letter-spacing:-.03em; }
.quote-section blockquote em { color:#edc277; }
.quote-section p { position:relative; font-size:9px; letter-spacing:.2em; text-transform:uppercase; }
.sun-disc { position:absolute; width:540px; height:540px; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.12); border-radius:50%; }
.sun-disc:after { content:""; position:absolute; inset:50px; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
footer { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:30px; padding:65px 5vw; background:#11100d; color:#f4eddf; }
footer>p { color:#706d66; font-size:11px; text-align:center; }
.back-top { color:#9a948a; font-size:9px; text-transform:uppercase; letter-spacing:.17em; text-align:right; }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }
@keyframes heroIn { from { transform:scale(1.07); filter:brightness(.65); } to { transform:scale(1); filter:brightness(1); } }

@media (max-width:900px) {
  .desktop-nav { display:none; position:fixed; inset:0; background:#15120e; flex-direction:column; align-items:center; justify-content:center; gap:35px; font:400 28px "Libre Caslon Display"; }
  .menu-open .desktop-nav { display:flex; }
  .menu-toggle { display:block; z-index:1; }
  .menu-open .menu-toggle span:first-child { transform:translateY(3.5px) rotate(45deg); }.menu-open .menu-toggle span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  .hero { height:760px; }.hero-copy { margin:0 7vw; }.hero-marker { display:none; }.scroll-cue { left:auto; right:-25px; }
  .section-pad { padding:100px 7vw; }.intro { grid-template-columns:1fr; gap:20px; }.intro-copy { padding-top:0; }
  .civilizations-top { align-items:start; }.era-layout { grid-template-columns:1fr; }.era-tabs { display:grid; grid-template-columns:1fr 1fr; }.era-tab { min-height:110px; padding:20px; }.era-card { padding:90px 8vw; }
  .db-era summary { padding-left:7vw; padding-right:7vw; }.db-era-content { padding-left:15vw; padding-right:15vw; }
  .legacy-title { display:block; }.artifact-grid { grid-template-columns:1fr; grid-template-rows:auto; }.artifact { min-height:420px; }.artifact.large { grid-row:auto; }.clay-tablet { min-height:450px; }
}
@media (max-width:600px) {
  .site-header { padding:20px; }.hero-copy { margin:0 22px; }.hero-intro { font-size:14px; }.hero-image { background-position:62% center; }
  h1 { font-size:58px; }.intro h2,.legacy h2,.civilizations h2 { font-size:48px; }.section-number { display:none; }
  .section-pad { padding:85px 22px; }.stat-row { gap:8px; }.stat-row strong { font-size:27px; }.stat-row span { font-size:7px; }
  .civilizations { padding-top:85px; }.civilizations-top { padding-bottom:55px; }.civilizations-note { display:none; }.era-tabs { grid-template-columns:1fr; }.era-tab { min-height:90px; }.era-card { min-height:520px; padding:65px 22px; }
  .database-timeline { padding-bottom:85px; }.db-era summary { min-height:96px; grid-template-columns:34px 1fr 38px; padding:18px 22px; }.db-era-name { font-size:23px; }.db-era-action b { display:none; }.db-era-action i { width:32px; height:32px; }.db-era-content { padding:55px 22px 65px 56px; }.db-era-copy p:first-of-type { font-size:18px; }.db-era-symbol { right:-20px; font-size:250px; }
  .legacy-title { margin-bottom:50px; }.artifact { display:flex; flex-direction:column; }.artifact-grid { grid-template-rows:auto; }.artifact-visual { min-height:300px; }.clay-tablet span { font-size:45px; padding:55px 36px; }
  .quote-section { padding:125px 20px; }footer { grid-template-columns:1fr; text-align:center; }.footer-brand { justify-content:center; }.back-top { text-align:center; }
}

/* The Mesopotamians */
.mesopotamians-page .desktop-nav a[href="mesopotamiams.php"] { color:#efc273; opacity:1; }
.mesopotamians-hero { position:relative; height:88svh; min-height:700px; display:flex; align-items:end; overflow:hidden; color:#fff; }
.mesopotamians-hero-image { background-position:center 40%; filter:saturate(.7) sepia(.15); }
.mesopotamians-hero-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,8,5,.96),transparent 72%),linear-gradient(90deg,rgba(10,8,5,.8),transparent 68%); }
.mesopotamians-hero-copy { position:relative; z-index:1; max-width:1100px; padding:0 10vw 10vh; }
.mesopotamians-hero-copy h1 { margin:0; font-size:clamp(68px,9vw,138px); }
.mesopotamians-hero-copy>p:last-child { max-width:590px; margin:36px 0 0; color:rgba(255,255,255,.7); font-size:15px; line-height:1.85; }
.mesopotamians-scroll { position:absolute; z-index:2; right:7vw; bottom:10vh; display:flex; align-items:center; gap:24px; font-size:9px; letter-spacing:.2em; text-transform:uppercase; }
.mesopotamians-scroll b { display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(255,255,255,.35); border-radius:50%; }
.mesopotamians-intro { display:grid; grid-template-columns:1fr 1fr; gap:10vw; align-items:end; }
.mesopotamians-intro h2 { margin:0; font:400 clamp(54px,7vw,98px)/.92 "Libre Caslon Display",Georgia,serif; letter-spacing:-.05em; }
.mesopotamians-intro>p { max-width:580px; margin:0 0 8px; color:#655e53; font-size:15px; line-height:1.9; }
.mesopotamians-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); background:#17140f; }
.mesopotamian-card { min-height:570px; display:flex; flex-direction:column; padding:80px 7vw; border-right:1px solid rgba(255,255,255,.11); border-bottom:1px solid rgba(255,255,255,.11); color:#f2e8d8; }
.mesopotamian-card:nth-child(4n+2),.mesopotamian-card:nth-child(4n+3) { background:#211d17; }
.mesopotamian-card-top { display:flex; justify-content:space-between; align-items:start; margin-bottom:auto; color:#d69b40; }
.mesopotamian-card-top>span { font-size:8px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.mesopotamian-card-top>b { color:rgba(214,155,64,.35); font:400 72px/1 Georgia,serif; }
.mesopotamian-card h2 { max-width:650px; margin:70px 0 25px; font:400 clamp(45px,5vw,72px)/.95 "Libre Caslon Display",Georgia,serif; letter-spacing:-.04em; }
.mesopotamian-card>p { max-width:650px; margin:0; color:#9e968a; font-size:14px; line-height:1.85; }
.mesopotamian-card-meta { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-top:45px; padding-top:25px; border-top:1px solid rgba(255,255,255,.13); }
.mesopotamian-card-meta>span { color:#736e66; font-size:8px; letter-spacing:.15em; text-transform:uppercase; }
.mesopotamian-card-meta a { display:inline-flex; align-items:center; gap:25px; padding-bottom:7px; border-bottom:1px solid rgba(214,155,64,.55); color:#d69b40; font-size:8px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.mesopotamian-card-meta a b { font-size:14px; transition:transform .25s; }
.mesopotamian-card-meta a:hover b { transform:translateX(6px); }
.mesopotamians-empty { min-height:500px; padding:120px 10vw; text-align:center; background:#17140f; color:#f2e8d8; }
.mesopotamians-empty>span { color:rgba(214,155,64,.25); font-size:110px; }
.mesopotamians-empty h2 { margin:20px 0; font-size:55px; }
.mesopotamians-empty>p:last-child { color:#928a7f; }
.mesopotamians-finale { position:relative; overflow:hidden; padding:170px 10vw; background:#a34828; color:#f5e9d8; text-align:center; }
.mesopotamians-finale>span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:rgba(255,255,255,.06); font-size:570px; line-height:1; }
.mesopotamians-finale h2,.mesopotamians-finale p,.mesopotamians-finale a { position:relative; }
.mesopotamians-finale h2 { margin:0 0 48px; font:400 clamp(52px,7vw,96px)/.95 "Libre Caslon Display",Georgia,serif; letter-spacing:-.045em; }
.mesopotamians-finale h2 em { color:#efc273; font-weight:400; }

@media (max-width:900px) {
  .mesopotamians-intro { grid-template-columns:1fr; align-items:start; }
  .mesopotamian-card { min-height:520px; padding:65px 7vw; }
}
@media (max-width:600px) {
  .mesopotamians-hero { min-height:650px; }
  .mesopotamians-hero-copy { padding:0 22px 16vh; }
  .mesopotamians-hero-copy h1 { font-size:57px; }
  .mesopotamians-hero-copy>p:last-child { font-size:14px; }
  .mesopotamians-scroll { left:22px; right:auto; bottom:5vh; }
  .mesopotamians-intro { padding-left:22px; padding-right:22px; }
  .mesopotamians-intro h2 { font-size:50px; }
  .mesopotamians-grid { grid-template-columns:1fr; }
  .mesopotamian-card,.mesopotamian-card:nth-child(4n+2),.mesopotamian-card:nth-child(4n+3) { min-height:500px; padding:55px 22px; background:#17140f; }
  .mesopotamian-card:nth-child(even) { background:#211d17; }
  .mesopotamian-card h2 { margin-top:55px; font-size:45px; }
  .mesopotamian-card-meta { align-items:start; flex-direction:column; }
  .mesopotamians-finale { padding:120px 22px; }
}

/* Legacy page */
.legacy-page .desktop-nav a[href="legacy.php"] { color:#efc273; opacity:1; }
.legacy-hero { position:relative; height:92svh; min-height:700px; display:flex; align-items:end; overflow:hidden; color:#fff; }
.legacy-hero-image { background-position:center 45%; filter:saturate(.75) sepia(.12); }
.legacy-hero-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,8,5,.96),transparent 70%),linear-gradient(90deg,rgba(10,8,5,.78),transparent 67%); }
.legacy-hero-copy { position:relative; z-index:1; max-width:1050px; padding:0 10vw 11vh; }
.legacy-hero-copy h1 { font-size:clamp(70px,9.5vw,145px); }
.legacy-hero-copy>p:last-child { width:min(510px,85vw); margin:34px 0 0; color:rgba(255,255,255,.7); font-size:15px; line-height:1.8; }
.legacy-scroll { position:absolute; z-index:2; right:7vw; bottom:12vh; display:flex; align-items:center; gap:24px; font-size:9px; letter-spacing:.2em; text-transform:uppercase; }
.legacy-scroll b { display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(255,255,255,.35); border-radius:50%; }
.legacy-hero-count { position:absolute; z-index:2; right:5vw; top:24%; display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.55); font-size:8px; letter-spacing:.16em; text-transform:uppercase; transform:rotate(90deg); }
.legacy-hero-count span { width:58px; height:1px; background:rgba(255,255,255,.35); }
.legacy-intro { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:10vw; }
.legacy-intro h2,.legacy-chapter h2,.legacy-finale h2 { margin:0; font:400 clamp(56px,7vw,100px)/.92 "Libre Caslon Display",Georgia,serif; letter-spacing:-.05em; }
.legacy-intro-copy { max-width:570px; padding-top:70px; }
.legacy-intro-copy p:first-child { color:var(--ink); font:400 25px/1.5 "Libre Caslon Display",Georgia,serif; }
.legacy-intro-copy p:last-child { color:#655e53; font-size:14px; line-height:1.9; }
.legacy-index { position:sticky; z-index:8; top:0; display:grid; grid-template-columns:repeat(5,1fr); background:#17140f; color:#968f84; border-bottom:1px solid rgba(255,255,255,.12); }
.legacy-index a { display:flex; align-items:center; gap:13px; min-height:66px; padding:15px 2.5vw; border-right:1px solid rgba(255,255,255,.1); font-size:9px; letter-spacing:.15em; text-transform:uppercase; transition:.25s; }
.legacy-index a:hover { color:#f1e7d7; background:#211d17; }
.legacy-index span { color:var(--gold); font-size:7px; }
.legacy-chapter { min-height:760px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8vw; padding:145px 10vw; scroll-margin-top:66px; overflow:hidden; }
.legacy-chapter-copy { position:relative; z-index:1; max-width:650px; }
.legacy-number { margin:0 0 28px!important; color:var(--clay)!important; font:600 9px/1.4 "DM Sans",sans-serif!important; letter-spacing:.22em; text-transform:uppercase; }
.legacy-chapter-copy .legacy-lead { margin:42px 0 20px; color:var(--ink); font:400 23px/1.55 "Libre Caslon Display",Georgia,serif; }
.legacy-chapter-copy>p:not(.legacy-number):not(.legacy-lead):not(.legacy-now) { color:#665e53; font-size:14px; line-height:1.9; }
.legacy-now { margin:38px 0 0; padding:22px 0 0; border-top:1px solid var(--line); color:#655e53; font-size:11px; line-height:1.7; }
.legacy-now span { display:block; margin-bottom:6px; color:var(--clay); font-size:7px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.legacy-detail-link { display:inline-flex; align-items:center; gap:28px; margin-top:30px; padding-bottom:8px; border-bottom:1px solid currentColor; color:var(--clay); font-size:8px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.legacy-detail-link b { font-size:14px; transition:transform .25s; }
.legacy-detail-link:hover b { transform:translateX(6px); }
.legacy-math .legacy-detail-link { color:#efbd67; }
.legacy-tablet-scene { min-height:570px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle,#bb7854,#70321f 68%,#4e2116); }
.legacy-tablet-scene>p { margin:35px 0 0; color:rgba(255,255,255,.55); font-size:8px; letter-spacing:.2em; text-transform:uppercase; }
.legacy-tablet { padding:80px 60px; border-radius:45% 48% 40% 44%; background:linear-gradient(145deg,#bd805a,#71402b); box-shadow:24px 30px 55px rgba(32,11,5,.55),inset 10px 12px 18px rgba(255,220,180,.18); transform:rotate(-5deg); }
.legacy-tablet span { color:#5d2f21; text-shadow:1px 1px rgba(231,172,126,.65); font:400 58px/1.15 Georgia,serif; }
.legacy-math { position:relative; background:#123f5c; color:#f4eadb; }
.legacy-math .legacy-chapter-copy { grid-column:2; }
.legacy-math .legacy-number { color:#e2ad52!important; }
.legacy-math .legacy-chapter-copy .legacy-lead { color:#f4eadb; }
.legacy-math .legacy-chapter-copy>p:not(.legacy-number):not(.legacy-lead) { color:#a9bdc9; }
.legacy-sixty { grid-column:1; grid-row:1; position:relative; width:min(40vw,520px); aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:50%; }
.legacy-sixty:before,.legacy-sixty:after,.legacy-sixty i { content:""; position:absolute; inset:10%; border:1px solid rgba(214,155,64,.28); border-radius:50%; }
.legacy-sixty:after { inset:23%; }
.legacy-sixty i:first-child { inset:0 49.9%; border:0; border-left:1px solid rgba(255,255,255,.12); border-radius:0; transform:rotate(30deg); }
.legacy-sixty i:nth-child(2) { inset:0 49.9%; border:0; border-left:1px solid rgba(255,255,255,.12); border-radius:0; transform:rotate(120deg); }
.legacy-sixty strong { font:400 clamp(90px,13vw,190px)/1 "Libre Caslon Display",Georgia,serif; color:#efbd67; }
.legacy-sixty span { position:absolute; bottom:21%; color:#8ca9ba; font-size:7px; letter-spacing:.2em; text-transform:uppercase; }
.legacy-fact-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:42px; padding-top:27px; border-top:1px solid rgba(255,255,255,.18); }
.legacy-fact-row strong { display:block; color:#efbd67; font:400 34px "Libre Caslon Display",Georgia,serif; }
.legacy-fact-row span { color:#8fa8b6; font-size:8px; letter-spacing:.13em; text-transform:uppercase; }
.legacy-law { background:#e2d4bd; }
.legacy-stele { display:grid; place-items:center; }
.legacy-stele>div { width:min(330px,75vw); min-height:550px; display:flex; flex-direction:column; align-items:center; padding:65px 45px; border-radius:48% 48% 5px 5px; background:linear-gradient(130deg,#252725,#070807 70%); box-shadow:30px 38px 60px rgba(54,38,25,.35); color:#a08d6b; }
.legacy-stele b { color:#cf9f4c; font:400 115px/1 serif; }
.legacy-stele span { margin-top:25px; font:400 31px/1.65 Georgia,serif; text-align:center; }
.legacy-cities { background:#f4eddf; }
.legacy-cities .legacy-chapter-copy { grid-column:2; }
.legacy-city-plan { grid-column:1; grid-row:1; position:relative; min-height:560px; background:#c9b58c; overflow:hidden; }
.legacy-city-plan:after { content:""; position:absolute; inset:0; opacity:.2; background-image:radial-gradient(#553d25 1px,transparent 1px); background-size:9px 9px; }
.city-wall { position:absolute; z-index:1; inset:11% 19% 10% 10%; display:grid; place-items:center; border:9px double #765537; border-radius:47% 52% 44% 49%; transform:rotate(-7deg); }
.city-wall:before,.city-wall:after,.city-wall i { content:""; position:absolute; border:1px solid rgba(91,62,32,.5); border-radius:50%; }
.city-wall:before { inset:12% 38% 45% 12%; }.city-wall:after { inset:48% 12% 10% 43%; }.city-wall i:first-child { width:90px; height:130px; left:18%; bottom:15%; }.city-wall i:nth-child(2) { width:130px; height:80px; right:12%; top:16%; }
.city-wall i:nth-child(3) { width:44px; height:44px; border:7px double #694a2d; border-radius:0; transform:rotate(45deg); }
.city-wall b { color:#65492e; font:600 8px/1.5 "DM Sans",sans-serif; letter-spacing:.14em; text-align:center; text-transform:uppercase; }
.legacy-city-plan>span { position:absolute; z-index:2; right:7%; top:0; height:100%; padding:25px 0 0 14px; border-left:20px double rgba(25,73,96,.57); color:#19465d; font-size:8px; letter-spacing:.14em; text-transform:uppercase; writing-mode:vertical-rl; }
.legacy-literature { position:relative; grid-template-columns:1fr 1fr; background:#a34828; color:#f5e9d8; }
.legacy-literature .legacy-number { color:#efbe6a!important; }
.legacy-literature .legacy-chapter-copy .legacy-lead { color:#f5e9d8; }
.legacy-literature .legacy-chapter-copy>p:not(.legacy-number):not(.legacy-lead) { color:#e1bdab; }
.legacy-literature blockquote { position:relative; z-index:1; margin:0; font-size:clamp(42px,5vw,72px); line-height:1.08; letter-spacing:-.04em; }
.legacy-literature blockquote em { color:#efc173; }
.legacy-literature-link { display:inline-block; padding:30px 0 8px; border-bottom:1px solid currentColor; color:#efc173; text-decoration:none; }
.legacy-story-symbol { position:absolute; right:3vw; bottom:-100px; color:rgba(255,255,255,.055); font:400 600px/1 serif; }
.legacy-finale { position:relative; overflow:hidden; padding:170px 10vw; background:#17140f; color:#f3e9da; text-align:center; }
.legacy-finale>div { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:rgba(214,155,64,.045); font:400 620px/1 serif; }
.legacy-finale h2,.legacy-finale>p,.legacy-finale>a { position:relative; }
.legacy-finale h2 em { color:#efbd67; font-weight:400; }
.legacy-finale>p:not(.eyebrow) { max-width:590px; margin:35px auto 45px; color:#8e887e; font-size:14px; line-height:1.9; }
.legacy-finale .outline-link { display:inline-flex; }

@media (max-width:900px) {
  .legacy-intro { grid-template-columns:1fr; gap:30px; }.legacy-intro-copy { padding-top:0; }
  .legacy-chapter { grid-template-columns:1fr; min-height:0; padding:105px 7vw; }
  .legacy-math .legacy-chapter-copy,.legacy-cities .legacy-chapter-copy { grid-column:1; }
  .legacy-sixty,.legacy-city-plan { grid-column:1; grid-row:auto; justify-self:center; width:min(75vw,520px); }
  .legacy-tablet-scene { min-height:500px; }
}
@media (max-width:600px) {
  .legacy-hero-copy { padding:0 22px 10vh; }.legacy-hero-copy h1 { font-size:58px; }.legacy-hero-copy>p:last-child { font-size:14px; }
  .legacy-scroll,.legacy-hero-count { display:none; }.legacy-index { grid-template-columns:repeat(5,1fr); overflow-x:auto; }.legacy-index a { min-width:90px; justify-content:center; padding:15px 10px; }.legacy-index a span { display:none; }
  .legacy-intro h2,.legacy-chapter h2,.legacy-finale h2 { font-size:49px; }
  .legacy-chapter { gap:60px; padding:85px 22px; }.legacy-chapter-copy .legacy-lead { margin-top:32px; font-size:21px; }
  .legacy-tablet-scene { min-height:400px; }.legacy-tablet { padding:58px 38px; }.legacy-tablet span { font-size:42px; }
  .legacy-sixty { width:82vw; }.legacy-stele>div { min-height:470px; padding:55px 35px; }.legacy-stele b { font-size:90px; }.legacy-stele span { font-size:25px; }
  .legacy-city-plan { width:100%; min-height:410px; }.legacy-literature blockquote { font-size:42px; }.legacy-story-symbol { font-size:370px; }
  .legacy-finale { padding:120px 22px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation:none!important; transition:none!important; } .reveal { opacity:1; transform:none; } }

/* Story page */
.active-link { color:#efc273; opacity:1!important; }
.story-hero { position:relative; height:92svh; min-height:700px; overflow:hidden; color:#fff; display:flex; align-items:end; }
.story-hero-image { background-position:center 46%; }
.story-hero-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(12,9,5,.94) 0%,rgba(12,9,5,.2) 60%),linear-gradient(90deg,rgba(12,9,5,.64),transparent 60%); }
.story-hero-copy { position:relative; z-index:1; padding:0 10vw 11vh; }
.story-hero h1 { font-size:clamp(70px,9.5vw,145px); }
.story-hero-copy>p:last-child { width:min(490px,85vw); color:rgba(255,255,255,.72); line-height:1.8; font-size:15px; margin:32px 0 0; }
.story-scroll { position:absolute; z-index:2; right:7vw; bottom:12vh; display:flex; align-items:center; gap:25px; font-size:9px; letter-spacing:.2em; text-transform:uppercase; }
.story-scroll b { display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(255,255,255,.35); border-radius:50%; }
.story-index { position:absolute; z-index:2; right:5vw; top:24%; display:flex; align-items:center; gap:12px; font-size:8px; letter-spacing:.15em; color:rgba(255,255,255,.58); transform:rotate(90deg); }
.story-index span { width:60px; height:1px; background:rgba(255,255,255,.4); }
.prologue { position:relative; display:grid; grid-template-columns:180px 1fr; gap:5vw; padding-top:170px; padding-bottom:170px; }
.chapter-label { color:var(--clay); padding-top:13px; border-top:1px solid var(--clay); }
.chapter-label span { display:block; font:400 20px "Libre Caslon Display",serif; }
.chapter-label small { display:block; margin-top:5px; color:#8b8173; font-size:8px; letter-spacing:.17em; text-transform:uppercase; }
.prologue h2 { margin:0; font:400 clamp(54px,7vw,100px)/.94 "Libre Caslon Display",serif; letter-spacing:-.05em; }
.prologue h2 em { color:var(--clay); }
.story-columns { display:grid; grid-template-columns:1fr 1fr; gap:60px; margin:70px 0 0 23%; max-width:850px; }
.story-columns p { margin:0; color:#625a4f; font-size:14px; line-height:1.9; }
.story-columns .dropcap { color:var(--ink); font:400 18px/1.7 "Libre Caslon Display",serif; }
.dropcap:first-letter { float:left; margin:7px 10px 0 0; color:var(--clay); font:400 74px/.7 "Libre Caslon Display",serif; }
.river-break { height:780px; position:relative; overflow:hidden; display:grid; place-items:center; background:#123e59; color:#fff; }
.river-break:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,transparent,rgba(3,21,31,.55)); }
.river-lines { position:absolute; inset:0; opacity:.32; transform:rotate(-9deg) scale(1.2); }
.river-lines i { display:block; height:18%; margin:5% 0; border-top:1px solid #8dc1d5; border-radius:50%; transform:skewX(-20deg); }
.river-lines i:nth-child(2),.river-lines i:nth-child(4) { transform:skewX(24deg); margin-left:-10%; }
.river-break blockquote { position:relative; z-index:2; text-align:center; font-size:clamp(42px,5.7vw,78px); line-height:1.08; letter-spacing:-.04em; }
.river-break blockquote em { color:#e8b35c; }
.river-label { position:absolute; z-index:3; font:400 28px "Libre Caslon Display",serif; }
.river-label small { display:block; color:#e4ad4f; font:500 8px "DM Sans"; letter-spacing:.18em; text-transform:uppercase; }
.river-tigris { left:7vw; top:10%; }.river-euphrates { right:7vw; bottom:10%; text-align:right; }
.timeline-story { position:relative; padding:140px 10vw 170px; background:#17140f; color:#efe5d4; }
.timeline-head { padding:0 0 130px; display:grid; grid-template-columns:1fr 1fr; align-items:end; }
.timeline-head .eyebrow { grid-column:1/-1; }
.timeline-head h2 { margin:0; font:400 clamp(58px,7vw,96px)/1 "Libre Caslon Display",serif; letter-spacing:-.045em; }
.timeline-head>p:last-child { justify-self:end; max-width:320px; margin:0 0 8px; color:#827b70; font-size:13px; line-height:1.8; }
.story-event { display:grid; grid-template-columns:140px 70px minmax(0,1fr); min-height:510px; }
.event-date { padding-top:8px; text-align:right; }
.event-date strong { display:block; font:400 38px "Libre Caslon Display",serif; }
.event-date span { color:#786f62; font-size:8px; letter-spacing:.18em; }
.event-marker { position:relative; display:flex; justify-content:center; }
.event-marker:after { content:""; position:absolute; top:17px; bottom:0; width:1px; background:rgba(235,224,205,.18); }
.event-marker i { position:relative; z-index:1; width:11px; height:11px; margin-top:12px; border:2px solid #d79e44; border-radius:50%; background:#17140f; box-shadow:0 0 0 7px #17140f; }
.story-event article { position:relative; max-width:880px; padding:0 300px 100px 6vw; border-top:1px solid rgba(255,255,255,.12); }
.story-event article>span { display:block; margin:22px 0; color:#b6773e; font-size:8px; letter-spacing:.2em; text-transform:uppercase; }
.story-event h3 { margin:0 0 25px; font-size:clamp(42px,4.5vw,68px); line-height:1; letter-spacing:-.035em; }
.story-event article>p { color:#989185; font-size:13px; line-height:1.85; }
.event-glyph { position:absolute; right:25px; top:55px; width:200px; height:250px; display:grid; place-items:center; background:#9a4429; color:#eab45f; font-size:110px; overflow:hidden; }
.tablet-glyph { border-radius:44% 46% 18% 15%; background:#9b6545; color:#633822; text-shadow:1px 1px rgba(255,220,180,.22); font-size:55px; line-height:1.2; transform:rotate(3deg); }
.sun-glyph { background:#d2b77f; color:#813e25; font-size:130px; }
.stele-glyph { border-radius:50% 50% 0 0; background:#25221e; color:#c39348; }
.wing-glyph { background:#703522; color:#d59b49; }.gate-glyph { background:#164867; color:#dab05d; }
.final-event { min-height:400px; }.final-event .event-marker:after { display:none; }
.story-epilogue { position:relative; overflow:hidden; min-height:760px; padding:150px 12vw; display:flex; align-items:center; background:#a44728; color:#f6ead8; }
.story-epilogue>div:last-child { position:relative; z-index:1; margin-left:auto; width:min(790px,80%); }
.story-epilogue h2 { margin:0; font:400 clamp(64px,8vw,116px)/.9 "Libre Caslon Display",serif; letter-spacing:-.05em; }
.story-epilogue h2 em { color:#efc273; }
.story-epilogue p:not(.eyebrow) { max-width:560px; margin:35px 0; color:#e2c6b3; font-size:14px; line-height:1.85; }
.epilogue-symbol { position:absolute!important; left:-5%; top:4%; color:rgba(255,220,180,.08); font-size:600px; line-height:1; }
.outline-link { display:inline-flex; gap:45px; align-items:center; padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.5); font-size:9px; letter-spacing:.18em; text-transform:uppercase; }

@media (max-width:900px) {
  .story-hero { min-height:680px; }.story-hero-copy { padding-left:7vw; }.story-scroll { bottom:5vh; }
  .prologue { grid-template-columns:1fr; }.chapter-label { width:160px; }.story-columns { margin-left:0; }
  .timeline-story { padding-left:6vw; padding-right:6vw; }.timeline-head { grid-template-columns:1fr; gap:25px; }.timeline-head>p:last-child { justify-self:start; }
  .story-event { grid-template-columns:90px 50px 1fr; }.story-event article { padding-right:0; }.event-glyph { position:relative; right:auto; top:auto; width:100%; height:230px; margin-top:35px; }
}
@media (max-width:600px) {
  .story-hero { height:90svh; min-height:620px; }.story-hero-copy { padding:0 22px 18vh; }.story-hero h1 { font-size:58px; }.story-scroll { left:22px; right:auto; bottom:5vh; }.story-index { display:none; }
  .prologue { padding:95px 22px; }.prologue h2 { font-size:50px; }.story-columns { grid-template-columns:1fr; gap:26px; margin-top:50px; }
  .river-break { height:650px; padding:20px; }.river-break blockquote { font-size:39px; }.river-tigris { left:22px; }.river-euphrates { right:22px; }
  .timeline-story { padding:95px 18px; }.timeline-head { padding-bottom:80px; }.timeline-head h2 { font-size:50px; }
  .story-event { grid-template-columns:62px 28px 1fr; min-height:0; }.event-date strong { font-size:23px; }.event-marker i { width:9px; height:9px; }.story-event article { padding-left:18px; padding-bottom:100px; }.story-event h3 { font-size:38px; }.event-glyph { height:190px; font-size:80px; }
  .story-epilogue { min-height:700px; padding:100px 22px; }.story-epilogue>div:last-child { width:100%; }.story-epilogue h2 { font-size:58px; }.epilogue-symbol { font-size:400px; }
}

/* Story detail */
.event-read { display:inline-flex; align-items:center; gap:35px; margin-top:12px; padding-bottom:7px; border-bottom:1px solid rgba(255,255,255,.3); color:#d69b40; font-size:8px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.event-read b { font-size:14px; transition:transform .25s; }.event-read:hover b { transform:translateX(6px); }
.detail-hero { position:relative; height:88svh; min-height:720px; display:flex; align-items:end; overflow:hidden; color:#fff; }
.detail-hero-image { background-position:center 52%; }
.detail-hero-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,8,5,.95),transparent 70%),linear-gradient(90deg,rgba(10,8,5,.68),transparent 65%); }
.detail-back { position:absolute; z-index:2; left:5vw; top:125px; display:flex; gap:12px; align-items:center; font-size:9px; letter-spacing:.18em; text-transform:uppercase; opacity:.75; }
.detail-back span { font-size:18px; }.detail-back:hover { opacity:1; }
.detail-title { position:relative; z-index:1; width:100%; padding:0 10vw 8vh; }
.detail-title h1 { font-size:clamp(76px,10vw,150px); }
.detail-meta { display:flex; gap:40px; margin-top:42px; color:rgba(255,255,255,.62); font-size:8px; letter-spacing:.18em; text-transform:uppercase; }
.detail-meta span+span { padding-left:40px; border-left:1px solid rgba(255,255,255,.3); }
.detail-chapter-mark { position:absolute; right:5vw; bottom:4vh; font:400 160px/1 "Libre Caslon Display",serif; color:rgba(255,255,255,.06); }
.article-intro { padding:125px 10vw 100px; display:grid; grid-template-columns:1fr 220px; gap:10vw; }
.article-deck { max-width:920px; margin:0; font:400 clamp(30px,4vw,52px)/1.25 "Libre Caslon Display",serif; letter-spacing:-.025em; }
.article-share { align-self:end; display:grid; grid-template-columns:1fr; gap:5px; padding-top:18px; border-top:1px solid var(--clay); }
.article-share span { color:#93897a; font-size:7px; letter-spacing:.18em; text-transform:uppercase; }.article-share b { font:400 14px "Libre Caslon Display",serif; }.article-share i { height:15px; }
.article-body { display:grid; grid-template-columns:240px minmax(0,760px); gap:8vw; padding:40px 10vw 130px; justify-content:center; }
.article-rail { position:sticky; top:30px; align-self:start; display:flex; flex-direction:column; padding-top:18px; border-top:1px solid var(--ink); }
.article-rail span { margin-bottom:22px; color:var(--clay); font-size:8px; letter-spacing:.18em; text-transform:uppercase; }
.article-rail a { padding:10px 0; color:#867d70; font-size:11px; transition:.2s; }.article-rail a:hover { color:var(--clay); padding-left:5px; }
.article-copy section { scroll-margin-top:60px; margin-bottom:100px; }
.section-kicker { margin:0 0 28px!important; color:var(--clay)!important; font:600 8px "DM Sans"!important; letter-spacing:.2em; text-transform:uppercase; }
.article-copy .opening { margin-top:0; font:400 28px/1.5 "Libre Caslon Display",serif; color:var(--ink); }
.article-copy p { color:#5d574e; font-size:15px; line-height:1.9; }
.article-copy h2 { margin:0 0 30px; font:400 clamp(48px,5.5vw,75px)/.98 "Libre Caslon Display",serif; letter-spacing:-.04em; }
.article-figure { margin:30px 0 130px; }
.uruk-map { position:relative; height:520px; overflow:hidden; background:#c8b589; }
.uruk-map:after { content:""; position:absolute; inset:0; opacity:.16; background-image:radial-gradient(#553d25 1px,transparent 1px); background-size:8px 8px; }
.map-city { position:absolute; z-index:1; left:12%; top:9%; width:64%; height:80%; display:grid; grid-template-columns:1fr 1fr; place-items:center; border:8px double #745635; border-radius:47% 53% 43% 51%; transform:rotate(-8deg); }
.map-city:before,.map-city:after { content:""; position:absolute; width:50%; height:45%; border:1px solid rgba(86,60,31,.46); border-radius:50%; }.map-city:after { right:7%; bottom:8%; }
.map-city b { color:#674d31; font:600 8px/1.5 "DM Sans"; letter-spacing:.14em; text-align:center; }
.map-temple { position:absolute; width:25px; height:25px; border:6px double #6b4b29; transform:rotate(45deg); }.map-temple.one { left:30%; top:24%; }.map-temple.two { right:22%; bottom:23%; }
.map-river { position:absolute; right:7%; top:0; width:70px; height:100%; padding-top:25px; border-left:18px double rgba(24,77,102,.58); color:#19465d; font:500 8px "DM Sans"; letter-spacing:.14em; text-transform:uppercase; writing-mode:vertical-rl; }
.map-north { position:absolute; z-index:2; left:25px; bottom:20px; color:#634a31; font-size:9px; letter-spacing:.12em; }
.article-figure figcaption { display:grid; grid-template-columns:70px 1fr; gap:20px; margin-top:18px; color:#787064; font-size:10px; line-height:1.65; }.article-figure figcaption span { color:var(--clay); font-size:8px; letter-spacing:.15em; text-transform:uppercase; }
.detail-quote { position:relative; overflow:hidden; padding:145px 15vw; background:#123f5c; color:#f5ecde; text-align:center; }
.detail-quote>span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:rgba(255,255,255,.05); font-size:520px; }
.detail-quote blockquote { position:relative; max-width:1000px; margin:0 auto 30px; font-size:clamp(40px,5.5vw,74px); line-height:1.08; letter-spacing:-.03em; }
.detail-quote p { position:relative; color:#dcab59; font-size:8px; letter-spacing:.2em; text-transform:uppercase; }
.second-body { padding-top:150px; }
.fact-card { position:sticky; top:30px; align-self:start; padding:34px; background:#dfd1b8; }
.fact-card>p { margin:0 0 30px; color:var(--clay); font-size:8px; letter-spacing:.18em; text-transform:uppercase; }
.fact-card div { padding:23px 0; border-top:1px solid rgba(65,45,28,.18); }.fact-card strong { display:block; color:var(--clay); font:400 40px "Libre Caslon Display",serif; }.fact-card span { color:#6e665a; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.tablet-study { display:grid; grid-template-columns:.8fr 1fr; margin:30px 0 130px; background:#d8c8ad; }
.study-tablet { min-height:390px; display:grid; place-items:center; padding:45px; background:linear-gradient(145deg,#ac704f,#71402b); color:#623622; text-shadow:1px 1px rgba(255,214,170,.3); font-size:55px; line-height:1.2; }
.tablet-study>div:last-child { padding:45px 35px; align-self:center; }.tablet-study span { color:var(--clay); font-size:7px; letter-spacing:.18em; text-transform:uppercase; }.tablet-study h3 { margin:15px 0; font-size:38px; line-height:1; }.tablet-study p { font-size:11px; line-height:1.8; }
.next-story { overflow:hidden; background:#a34828; color:#f4e8d7; }
.next-story a { position:relative; min-height:360px; display:grid; grid-template-columns:1fr auto; align-items:center; padding:80px 12vw; }
.next-story a>span { position:relative; z-index:1; font:400 clamp(45px,6vw,82px) "Libre Caslon Display",serif; }.next-story small { display:block; margin-bottom:17px; color:#efbe6a; font:600 8px "DM Sans"; letter-spacing:.2em; text-transform:uppercase; }.next-story b { position:relative; z-index:1; display:grid; place-items:center; width:70px; height:70px; border:1px solid rgba(255,255,255,.35); border-radius:50%; font-size:25px; transition:.3s; }.next-story a:hover b { transform:translateX(8px); background:#f4e8d7; color:#a34828; }.next-story i { position:absolute; right:10%; color:rgba(255,255,255,.05); font:normal 380px/1 serif; }
.database-detail-hero .detail-title { max-width:1250px; }
.database-detail-hero .detail-title h1 { max-width:1150px; font-size:clamp(62px,8.2vw,126px); line-height:.88; }
.database-article-intro .article-deck { font-size:clamp(27px,3.3vw,45px); }
.database-detail-body { grid-template-columns:250px minmax(0,820px); padding-top:130px; }
.database-article-content { opacity:1; transform:none; }
.database-article-content h2,.database-article-content h3,.database-article-content h4 { scroll-margin-top:45px; }
.database-article-content h3 { margin:90px 0 25px; color:var(--ink); font:400 clamp(36px,4vw,56px)/1.05 "Libre Caslon Display",Georgia,serif; letter-spacing:-.035em; }
.database-article-content h4 { margin:55px 0 20px; color:var(--clay); font:400 27px/1.2 "Libre Caslon Display",Georgia,serif; }
.database-article-content p { margin:0 0 22px; color:#5d574e; font-size:15px; line-height:1.9; }
.database-article-content>p:first-of-type { color:var(--ink); font:400 25px/1.6 "Libre Caslon Display",Georgia,serif; }
.database-article-content ul,.database-article-content ol { margin:25px 0 35px; padding-left:25px; color:#5d574e; font-size:14px; line-height:1.9; }
.database-article-content blockquote { margin:65px 0; padding:15px 0 15px 35px; border-left:2px solid var(--clay); color:var(--clay); font-size:35px; line-height:1.25; }
.legacy-detail-hero .detail-hero-shade { background:linear-gradient(0deg,rgba(10,8,5,.97),rgba(10,8,5,.18) 72%),linear-gradient(90deg,rgba(81,34,20,.68),transparent 70%); }
.legacy-detail-hero .detail-chapter-mark { color:rgba(239,194,115,.1); font-size:220px; }
.legacy-article-content { padding-bottom:20px; }
.timeline-detail-content .timeline-period-label { margin:0 0 55px; color:var(--clay); font:600 8px/1.4 "DM Sans",sans-serif; letter-spacing:.2em; text-transform:uppercase; }
.timeline-detail-event { scroll-margin-top:45px; display:grid; grid-template-columns:190px minmax(0,1fr); gap:45px; margin:0; padding:42px 0 48px; border-top:1px solid rgba(65,45,28,.2); }
.timeline-detail-event:last-child { border-bottom:1px solid rgba(65,45,28,.2); }
.timeline-detail-event .timeline-detail-date { display:flex; flex-direction:column; gap:12px; }
.timeline-detail-date span { color:#958978; font:600 7px/1 "DM Sans",sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.timeline-detail-date strong { color:var(--clay); font:400 28px/1.05 "Libre Caslon Display",Georgia,serif; }
.timeline-detail-content .timeline-detail-event p { margin:0; color:var(--ink); font:400 22px/1.55 "Libre Caslon Display",Georgia,serif; }
.detail-not-found { min-height:90svh; padding:180px 10vw 100px; display:flex; flex-direction:column; justify-content:center; background:var(--cream); }
.detail-not-found>span { position:absolute; right:8vw; color:rgba(164,72,40,.08); font-size:380px; }
.detail-not-found h1 { position:relative; margin:0 0 45px; font-size:clamp(60px,8vw,110px); color:var(--ink); }
.detail-not-found .outline-link { position:relative; align-self:flex-start; border-color:rgba(23,20,15,.4); }

@media (max-width:900px) {
  .article-intro { grid-template-columns:1fr; }.article-share { width:220px; }
  .article-body { grid-template-columns:1fr; }.article-rail { position:relative; flex-direction:row; flex-wrap:wrap; gap:8px 24px; }.article-rail span { width:100%; }.article-rail a { padding:4px 0; }
  .fact-card { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.fact-card>p { grid-column:1/-1; }
  .database-detail-body { grid-template-columns:1fr; padding-top:100px; }
}
@media (max-width:600px) {
  .detail-hero { height:90svh; min-height:650px; }.detail-back { top:105px; left:22px; }.detail-title { padding:0 22px 9vh; }.detail-title h1 { font-size:60px; }.detail-meta { gap:12px; flex-wrap:wrap; }.detail-meta span+span { padding-left:12px; }.detail-chapter-mark { font-size:100px; }
  .article-intro { padding:80px 22px; }.article-deck { font-size:30px; }.article-body { padding:20px 22px 90px; }.article-copy .opening { font-size:23px; }.article-copy p { font-size:14px; }.article-copy h2 { font-size:46px; }
  .uruk-map { height:390px; }.map-city { width:70%; }.article-figure figcaption { grid-template-columns:1fr; gap:5px; }
  .detail-quote { padding:110px 22px; }.detail-quote blockquote { font-size:39px; }
  .second-body { padding-top:90px; }.fact-card { grid-template-columns:1fr; }.fact-card>p { grid-column:auto; }.tablet-study { grid-template-columns:1fr; }.study-tablet { min-height:300px; }.tablet-study>div:last-child { padding:35px 25px; }
  .next-story a { min-height:300px; padding:60px 22px; }.next-story a>span { font-size:45px; }.next-story b { width:52px; height:52px; }
  .database-detail-hero .detail-title h1 { font-size:49px; line-height:.93; }.database-detail-body { padding-top:75px; }.database-article-content h3 { margin-top:70px; font-size:38px; }.database-article-content>p:first-of-type { font-size:21px; }.database-article-content p { font-size:14px; }.timeline-detail-event { grid-template-columns:1fr; gap:18px; padding:32px 0 38px; }.timeline-detail-date strong { font-size:25px; }.timeline-detail-content .timeline-detail-event p { font-size:19px; }.detail-not-found { padding-left:22px; padding-right:22px; }.detail-not-found>span { font-size:240px; }
}