:root,
.dark {
  --background: #061117;
  --foreground: #f3ead8;
  --card: #0b171b;
  --card-foreground: #f3ead8;
  --primary: #b97436;
  --primary-foreground: #071217;
  --secondary: #17383a;
  --secondary-foreground: #e7d8bc;
  --muted: #13272a;
  --muted-foreground: #b9b09f;
  --accent: #2f8f87;
  --accent-foreground: #f5efe2;
  --border: rgb(190 126 61 / 30%);
  --ring: #50a79b;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; background: var(--background); }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--background); color: var(--foreground); font-family: var(--font-body); }
a { color: inherit; }
::selection { background: #2f8f87; color: #fff7e8; }

.material-heading { position: relative; z-index: 0; display: grid; min-width: 0; max-width: 100%; isolation: isolate; font-family: var(--font-display); font-weight: 700; letter-spacing: .035em; line-height: .9; text-transform: uppercase; }
.material-heading::before { content: ''; position: absolute; z-index: 0; inset: -.34em -.52em -.42em; pointer-events: none; background: radial-gradient(ellipse at 50% 48%, rgb(2 8 11 / 86%) 0 54%, rgb(3 11 14 / 72%) 68%, rgb(7 17 18 / 42%) 82%, rgb(25 22 17 / 18%) 91%, transparent 100%); }
.material-heading > span { grid-area: 1 / 1; min-width: 0; overflow-wrap: normal; }
.material-heading .matte { z-index: 1; color: #c99055; -webkit-text-stroke: clamp(9px,.7vw,14px) #010405; paint-order: stroke fill; filter: drop-shadow(0 3px 0 #010405) drop-shadow(0 9px 5px rgb(0 0 0 / 62%)); }
.material-heading .texture { z-index: 2; color: transparent; -webkit-text-stroke: clamp(1px,.12vw,2px) rgb(1 4 5 / 98%); paint-order: stroke fill; background-color: #6f431e; background-image: linear-gradient(rgb(171 104 46 / 58%),rgb(128 74 31 / 58%)),url('./talos-bronze-texture.png'); background-blend-mode: screen; background-size: 100% 100%,140% auto; background-position: center,40% 35%; background-clip: text; -webkit-background-clip: text; filter: saturate(1.3) contrast(1.12) brightness(1.14); }

.story-world { position: relative; isolation: isolate; background-image: linear-gradient(90deg, rgb(3 10 14 / 62%), rgb(3 10 14 / 24%) 55%, rgb(3 10 14 / 54%)), url('./talos-crete.png'); background-size: cover; background-position: center; }
.story-world::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgb(6 17 23 / 76%) 100%); }
.eyebrow { color: #d99a5b; font: 700 .78rem/1.2 var(--font-body); letter-spacing: .24em; text-transform: uppercase; }
.evidence-tag { display: inline-flex; border: 1px solid rgb(83 174 161 / 55%); background: rgb(5 20 22 / 75%); color: #8fd3ca; padding: .45rem .7rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

@media (prefers-reduced-motion: no-preference) {
  .slow-breathe { animation: breathe 16s ease-in-out infinite alternate; }
  @keyframes breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
}

.site-nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 1.5rem; border-bottom: 1px solid rgb(255 255 255 / 10%); background: rgb(6 17 23 / 82%); padding: 0 3vw; backdrop-filter: blur(14px); }
.site-nav a { text-decoration: none; }
.site-nav .brand { color: #e4c9a0; font: 700 .86rem/1 var(--font-display); letter-spacing: .2em; }
.site-nav div { display: flex; gap: 1.4rem; }
.site-nav div a { color: #a9c9c4; font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

.hero { display: grid; height: 100svh; min-height: 100svh; grid-template-columns: 1.08fr .92fr; overflow: hidden; padding-top: 68px; background: #061117; }
.hero-copy { display: flex; align-items: center; padding: 5rem clamp(2rem,4vw,5rem) 3rem; }
.hero-copy > div { position: relative; z-index: 2; max-width: 870px; }
.hero .material-heading { margin: 1.2rem 0 0; font-size: clamp(3.25rem,7vw,7rem); }
.hero-deck { max-width: 760px; margin: 2rem 0 0; color: #f0e3cf; font: 1.14rem/1.75 var(--font-body); }
.search-question { max-width: 680px; margin: 1.8rem 0 0; border-left: 2px solid #bb7637; padding-left: 1.25rem; color: #d8c5a8; font: italic 1.25rem/1.55 var(--font-display); }
.enter-link { display: inline-block; margin-top: 2.2rem; color: #89cfc6; font-size: .79rem; font-weight: 800; letter-spacing: .18em; text-decoration: none; text-transform: uppercase; }
.hero-poster { position: relative; display: grid; min-height: calc(100svh - 68px); place-items: center; margin: 0; overflow: hidden; border-left: 1px solid rgb(185 116 54 / 32%); background: #02090d; }
.hero-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform .8s ease; }
.hero-poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(6 17 23 / 12%), transparent 55%, rgb(6 17 23 / 90%)); pointer-events: none; }
.hero-poster figcaption { position: absolute; z-index: 2; right: 1.25rem; bottom: 1.25rem; left: 1.25rem; padding: .75rem 1rem; background: rgb(4 14 18 / 78%); color: #d7b787; font-size: .71rem; letter-spacing: .15em; text-align: center; text-transform: uppercase; backdrop-filter: blur(8px); }

.prologue { display: flex; min-height: 78svh; align-items: center; justify-content: center; padding: 8rem 6vw; background-position: 20% 55%; }
.prologue-inner { position: relative; z-index: 1; max-width: 1050px; padding: clamp(2rem,5vw,5rem); border: 1px solid rgb(185 116 54 / 38%); background: radial-gradient(ellipse at center, rgb(5 17 21 / 58%) 0 42%, rgb(5 17 21 / 42%) 72%, rgb(5 17 21 / 20%) 100%); text-align: center; backdrop-filter: blur(2px); box-shadow: 0 35px 90px rgb(0 0 0 / 24%); }
.prologue-inner .material-heading { margin: 1.8rem auto; font-size: clamp(3rem,8vw,7.5rem); }
.prologue-inner > p:not(.eyebrow) { max-width: 700px; margin: 0 auto; color: #fff0d8; font: 600 1.2rem/1.7 var(--font-display); text-shadow: 0 2px 3px rgb(0 0 0 / 92%); }
.evidence-chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem 1.1rem; margin-top: 2.5rem; color: #8bcfc6; font-size: .76rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.evidence-chain b { color: #b9793f; }

.sequence { display: grid; min-height: 92svh; grid-template-columns: minmax(300px,.82fr) minmax(0,1.18fr); align-items: stretch; gap: 0; border-top: 1px solid rgb(191 129 66 / 20%); }
.sequence-reverse { grid-template-columns: minmax(0,1.18fr) minmax(300px,.82fr); }
.sequence-reverse .sequence-visual { order: 2; }
.sequence-reverse .investigation-plate { order: 2; }
.sequence-visual { position: relative; min-height: 68svh; margin: 0; overflow: hidden; background: #071318; box-shadow: inset 0 0 0 1px rgb(215 147 78 / 28%); }
.sequence-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) contrast(1.04); }
.sequence-visual::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 55%, rgb(4 13 17 / 82%)); pointer-events: none; }
.sequence-visual::after { content: 'CINEMATIC RECONSTRUCTION'; position: absolute; z-index: 2; right: 1rem; bottom: 1rem; padding: .55rem .7rem; background: rgb(4 14 18 / 82%); color: #d8bd94; font-size: .66rem; font-weight: 800; letter-spacing: .14em; }
.sequence-visual.interpretive-visual::after { content: 'CINEMATIC · INTERPRETIVE RECONSTRUCTION'; }
.sequence-visual > span { position: absolute; z-index: 2; top: 1rem; left: 1rem; width: 3.4rem; border: 1px solid #bc773c; background: rgb(5 14 18 / 78%); color: #e2ad70; font: 2rem/3.4rem var(--font-display); text-align: center; }
.investigation-plate { position: relative; min-height: 68svh; margin: 0; overflow: hidden; border: 1px solid rgb(204 137 69 / 34%); background: linear-gradient(145deg,rgb(4 14 18 / 90%),rgb(9 32 34 / 72%)); box-shadow: inset 0 0 80px rgb(0 0 0 / 42%); }
.investigation-plate::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg,transparent 0 44%,rgb(95 187 174 / 7%) 58%,transparent 75%),repeating-linear-gradient(0deg,rgb(223 163 92 / 4%) 0 1px,transparent 1px 34px); }
.investigation-plate::after { content: ''; position: absolute; inset: 1.2rem; border: 1px solid rgb(206 139 71 / 22%); pointer-events: none; }
.investigation-plate figcaption { position: absolute; z-index: 4; right: 1.8rem; bottom: 1.5rem; color: #d8bd94; font-size: .63rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.plate-index { position: absolute; z-index: 5; top: 1.8rem; left: 1.8rem; width: 3.4rem; border: 1px solid #bc773c; background: rgb(5 14 18 / 86%); color: #e2ad70; font: 2rem/3.4rem var(--font-display); text-align: center; }
.source-fragment { position: absolute; z-index: 2; inset: 13% 10% 15%; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgb(204 136 67 / 42%); padding: clamp(2rem,5vw,5rem); background: linear-gradient(135deg,rgb(28 22 16 / 94%),rgb(7 24 27 / 88%)),url('./talos-bronze-texture.png'); background-blend-mode: hard-light; box-shadow: 0 30px 80px rgb(0 0 0 / 36%); transform: rotate(-1deg); }
.source-fragment::before { content: ''; position: absolute; inset: 1rem; border: 1px solid rgb(224 165 95 / 23%); }
.source-fragment small { position: relative; color: #7fc3bb; font-weight: 800; letter-spacing: .18em; }
.source-fragment p { position: relative; margin: 1.5rem 0 0; color: #e8bd84; font: clamp(2.2rem,4.2vw,5rem)/.92 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.coast-trace { position: relative; height: 105px; margin: 2rem 0 .5rem; border-bottom: 1px solid rgb(228 166 96 / 54%); }
.coast-trace::before { content: ''; position: absolute; right: 8%; bottom: -1px; width: 76%; height: 75px; border-top: 3px solid #b9793f; border-radius: 47% 58% 0 0; transform: rotate(-4deg); box-shadow: 0 -9px 0 rgb(76 165 155 / 42%),0 -18px 0 rgb(76 165 155 / 18%); }
.coast-trace i { position: absolute; z-index: 1; bottom: 10px; width: clamp(18px,4vw,46px); aspect-ratio: 1; border: 1px solid #ca8243; background: radial-gradient(circle at 34% 31%,#c4874d,#281a12 66%); border-radius: 44% 56% 48% 52%; box-shadow: 0 8px 18px rgb(0 0 0 / 48%); }
.coast-trace i:nth-child(1) { left: 15%; bottom: 14px; }.coast-trace i:nth-child(2) { left: 37%; bottom: 35px; transform: scale(.72); }.coast-trace i:nth-child(3) { right: 27%; bottom: 18px; transform: scale(1.2); }.coast-trace i:nth-child(4) { right: 8%; bottom: 34px; transform: scale(.65); }
.evidence-line { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 2.2rem; color: #8fd3ca; font-size: .68rem; font-weight: 800; letter-spacing: .13em; }
.evidence-line b { color: #d08a48; }
.map-plate { display: grid; place-items: center; background: radial-gradient(circle at 50% 48%,rgb(16 58 59 / 86%),rgb(3 14 18 / 96%) 68%),url('./talos-bronze-texture.png'); background-blend-mode: multiply; }
.crete-map { position: relative; z-index: 2; width: min(88%,760px); filter: drop-shadow(0 18px 24px rgb(0 0 0 / 48%)); }
.map-grid { fill: none; stroke: rgb(221 158 88 / 10%); stroke-width: 1; }
.route { fill: none; stroke: #58a99f; stroke-width: 2; stroke-dasharray: 9 12; }
.route-two { stroke: #c18043; stroke-dasharray: 4 10; }.route-three { stroke: #78bfb6; stroke-dasharray: 2 8; }
.island { fill: rgb(45 104 97 / 34%); stroke: #e2ad70; stroke-width: 4; filter: drop-shadow(0 0 8px rgb(218 145 71 / 44%)); }
.route-node { fill: #d18a49; stroke: #071318; stroke-width: 3; }
.map-key { position: absolute; z-index: 3; right: 9%; bottom: 15%; display: flex; align-items: center; gap: .75rem; color: #8ccfc7; font: 700 .65rem/1 var(--font-body); letter-spacing: .13em; }
.map-key span { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgb(109 193 182 / 60%); border-radius: 50%; }
.map-key b { color: #dbac71; }
.material-plate { display: grid; place-items: center; background: radial-gradient(circle at 50% 42%,rgb(25 47 43 / 64%),rgb(3 12 15 / 96%) 70%); }
.fragment-field { position: relative; z-index: 2; width: min(76%,620px); aspect-ratio: 1.25; }
.fragment-field i { position: absolute; display: block; background: linear-gradient(rgb(164 103 49 / 22%),rgb(25 106 99 / 20%)),url('./talos-bronze-texture.png') center / 620px auto; border: 1px solid rgb(232 167 95 / 52%); box-shadow: 0 22px 38px rgb(0 0 0 / 56%),inset 0 0 18px rgb(4 12 13 / 45%); }
.fragment-field i:nth-child(1) { inset: 8% 45% 48% 6%; clip-path: polygon(7% 10%,88% 0,100% 68%,61% 100%,0 74%); transform: rotate(-7deg); }
.fragment-field i:nth-child(2) { inset: 4% 8% 52% 55%; clip-path: polygon(17% 0,100% 23%,87% 100%,0 78%); transform: rotate(9deg); }
.fragment-field i:nth-child(3) { inset: 50% 49% 3% 2%; clip-path: polygon(10% 0,100% 14%,83% 89%,24% 100%,0 50%); transform: rotate(4deg); }
.fragment-field i:nth-child(4) { inset: 48% 4% 7% 53%; clip-path: polygon(27% 4%,100% 0,87% 78%,53% 100%,0 76%); transform: rotate(-6deg); }
.fragment-field i:nth-child(5) { inset: 29% 31% 28% 33%; clip-path: polygon(16% 0,91% 8%,100% 80%,52% 100%,0 70%); transform: rotate(2deg); }
.archive-stamp { position: absolute; z-index: 3; right: 10%; bottom: 11%; border: 1px solid #69b6ac; padding: .9rem 1.1rem; background: rgb(4 15 18 / 88%); color: #83c9c0; font-size: .59rem; font-weight: 800; letter-spacing: .16em; text-align: center; transform: rotate(-2deg); }
.archive-stamp span,.archive-stamp strong { display: block; }.archive-stamp strong { margin-top: .4rem; color: #dfa66b; font-size: .72rem; }
.sequence-copy { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; justify-content: center; max-width: 850px; padding: clamp(3rem,7vw,8rem); background: linear-gradient(90deg, rgb(5 16 20 / 78%), rgb(5 16 20 / 52%)); backdrop-filter: blur(2px); }
.sequence-copy .eyebrow { margin: 2rem 0 .7rem; }
.sequence-copy .material-heading { font-size: clamp(2.75rem,5.2vw,5.4rem); }
.sequence-body { max-width: 680px; margin: 1.8rem 0 0; color: #eee2cf; font-size: 1.06rem; line-height: 1.8; }
.finding { max-width: 690px; margin: 1.8rem 0 0; border-left: 2px solid #358f87; padding: .9rem 0 .9rem 1rem; color: #8fd3ca; font: 700 .77rem/1.6 var(--font-body); letter-spacing: .13em; text-transform: uppercase; }
.source-link { display: inline-block; align-self: flex-start; margin-top: 1.8rem; color: #d6aa72; font-size: .79rem; line-height: 1.5; text-decoration-thickness: 1px; text-underline-offset: 5px; }

.evidence-only { display: flex; min-height: 78svh; align-items: center; padding: 7rem 7vw; }
.evidence-only .sequence-copy { width: min(850px,100%); border: 1px solid rgb(194 126 63 / 32%); background: linear-gradient(110deg,rgb(4 15 19 / 76%),rgb(4 15 19 / 42%)); box-shadow: 0 30px 80px rgb(0 0 0 / 24%); }
.evidence-right { justify-content: flex-end; }
.evidence-left { justify-content: flex-start; }

.witness { display: grid; min-height: 92svh; grid-template-columns: .75fr 1.25fr; align-items: center; gap: clamp(2rem,6vw,7rem); padding: 8rem 8vw; background-position: 70% 35%; }
.artifact-mark { position: relative; z-index: 1; display: grid; aspect-ratio: 1; place-content: center; border: 1px solid rgb(210 134 63 / 55%); border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgb(171 70 21 / 88%), rgb(28 13 9 / 92%) 63%), url('./talos-bronze-texture.png'); box-shadow: 0 0 0 20px rgb(5 15 18 / 42%), 0 40px 80px rgb(0 0 0 / 42%); text-align: center; }
.artifact-mark::before { content: 'REAL ARTIFACT'; position: absolute; inset: 7%; display: grid; place-items: end center; border: 1px solid rgb(227 165 96 / 45%); border-radius: 50%; padding-bottom: 11%; color: #efbe80; font-size: .68rem; letter-spacing: .2em; }
.artifact-mark span { color: #f0c58c; font: 4.5rem/.9 var(--font-display); }
.artifact-mark small { margin-top: .5rem; color: #efdabc; font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; }
.artifact-photo { position: relative; z-index: 1; width: min(100%,520px); margin: 0 auto; overflow: hidden; border: 1px solid rgb(210 134 63 / 52%); background: #070f12; box-shadow: 0 28px 75px rgb(0 0 0 / 40%); }
.artifact-photo img { display: block; width: 100%; height: auto; }
.artifact-photo figcaption { padding: .8rem 1rem; background: rgb(4 14 18 / 94%); color: #e4c190; font-size: .68rem; font-weight: 700; line-height: 1.55; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.artifact-photo figcaption a { color: #83c9c0; text-underline-offset: 3px; }
.witness-copy { position: relative; z-index: 1; min-width: 0; max-width: 880px; padding: clamp(2rem,4vw,4rem); background: linear-gradient(135deg, rgb(4 14 18 / 68%), rgb(4 14 18 / 44%)); backdrop-filter: blur(2px); }
.witness-copy .eyebrow { margin: 1.8rem 0 .7rem; }
.witness-copy .material-heading { font-size: clamp(3rem,4.8vw,5.5rem); }
.witness-copy > p:not(.eyebrow) { max-width: 720px; margin: 1.8rem 0 0; color: #eee2cf; font-size: 1.07rem; line-height: 1.8; }
.distinction { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 2rem; background: rgb(197 126 58 / 35%); }
.distinction div { padding: 1.25rem; background: rgb(7 23 27 / 93%); }
.distinction b, .distinction span { display: block; }
.distinction b { margin-bottom: .6rem; color: #83c9c0; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; }
.distinction span { color: #ded3c0; font-size: .92rem; line-height: 1.6; }

.origins { min-height: 94svh; padding: 9rem 8vw; background-position: 25% 42%; }
.origins-intro { position: relative; z-index: 1; max-width: 1050px; }
.origins-intro .material-heading { margin-top: 1rem; font-size: clamp(3rem,7vw,7rem); }
.origins-intro > p:last-child { margin: 2rem 0 0; color: #f0dfc6; font: 1.35rem/1.6 var(--font-display); }
.origin-columns { position: relative; z-index: 1; display: grid; max-width: 1200px; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 4rem; background: rgb(206 135 67 / 40%); }
.origin-columns article { min-height: 300px; padding: clamp(2rem,4vw,4rem); background: rgb(5 18 22 / 72%); backdrop-filter: blur(2px); }
.origin-columns article > span { color: #5caea4; font: 3rem/1 var(--font-display); }
.origin-columns h3 { margin: 2rem 0 1rem; color: #e8bb83; font: 2rem/1.1 var(--font-display); text-transform: uppercase; }
.origin-columns p { color: #ddd1bd; font-size: 1rem; line-height: 1.8; }
.origin-foot { position: relative; z-index: 1; margin: 2rem 0 0; color: #8fd3ca; font-size: .8rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

.trial { min-height: 100svh; padding: 9rem 7vw; background-position: 80% 62%; }
.trial-intro { position: relative; z-index: 1; max-width: 1100px; text-align: center; margin: 0 auto; }
.trial-intro .material-heading { margin-top: 1rem; font-size: clamp(3.25rem,8vw,8rem); }
.trial-intro > p:last-child { max-width: 700px; margin: 2rem auto 0; color: #e4d5c0; font: 1.15rem/1.7 var(--font-display); }
.trial-grid { position: relative; z-index: 1; display: grid; max-width: 1200px; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 4rem auto 0; }
.trial-grid article { padding: clamp(2rem,4vw,4rem); border: 1px solid rgb(194 126 63 / 35%); background: rgb(4 16 20 / 72%); backdrop-filter: blur(2px); }
.trial-grid .against .evidence-tag { border-color: rgb(216 133 68 / 55%); color: #e1a468; }
.trial-grid ul { display: grid; gap: .8rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.trial-grid li { position: relative; padding: 0 0 .8rem 1.25rem; border-bottom: 1px solid rgb(255 255 255 / 8%); color: #e8ddca; font-size: .98rem; }
.trial-grid li::before { content: '◆'; position: absolute; left: 0; color: #4ca197; font-size: .55rem; top: .35rem; }
.trial-grid .against li::before { color: #bf7438; }

.verdict { min-height: 100svh; padding: 10rem 8vw; background-position: 53% 36%; text-align: center; }
.verdict > * { position: relative; z-index: 1; }
.verdict .material-heading { max-width: 1300px; margin: 1.2rem auto 0; }
.verdict .material-heading { font-size: clamp(3.5rem,7vw,7.5rem); }
.verdict-grid { display: grid; max-width: 1050px; grid-template-columns: 1.15fr .85fr; gap: 1.5rem; margin: 4rem auto 0; text-align: left; }
.verdict-grid p { margin: 0; padding: 2rem; background: rgb(5 18 22 / 72%); color: #e6dac5; font-size: 1.05rem; line-height: 1.8; backdrop-filter: blur(2px); }
.verdict-grid .verdict-warning { border: 1px solid #b27035; color: #f1c991; font: 700 1.25rem/1.55 var(--font-display); text-transform: uppercase; }
.compare { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 3rem auto 0; color: #8bcfc6; font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.compare b { color: #cf8745; }

.companion { display: grid; min-height: 88svh; place-items: center; padding: 7rem 6vw; background-position: 15% 68%; }
.film-frame { position: relative; z-index: 1; width: min(1100px,100%); min-width: 0; max-width: 100%; min-height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgb(205 137 70 / 46%); background: linear-gradient(135deg, rgb(5 16 19 / 70%), rgb(10 34 35 / 46%)); padding: 4rem; text-align: center; backdrop-filter: blur(2px); box-shadow: 0 35px 100px rgb(0 0 0 / 34%); }
.film-frame::before, .film-frame::after { content: ''; position: absolute; left: 3%; right: 3%; height: 1px; background: linear-gradient(90deg, transparent, #bb773d, transparent); pointer-events: none; }
.film-frame::before { top: 8%; } .film-frame::after { bottom: 8%; }
.play-mark { width: 4.5rem; height: 4.5rem; margin-bottom: 2rem; border: 1px solid #5baea4; border-radius: 50%; color: #d9a86d; font-size: 2rem; line-height: 4.35rem; text-align: center; }
.film-frame .material-heading { max-width: 900px; margin-top: 1.7rem; font-size: clamp(2.8rem,6vw,6rem); }
.film-frame p { color: #ddd0ba; font: 1.15rem/1.7 var(--font-display); }
.film-frame strong { margin-top: 1.6rem; color: #8ccfc7; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; }
.film-cta { display: inline-flex; align-items: center; gap: 1.15rem; margin-top: 1.6rem; color: #8ccfc7; text-decoration: none; }
.film-cta .play-mark { flex: 0 0 4.5rem; margin: 0; }
.film-cta-label { font-size: .78rem; font-weight: 800; letter-spacing: .18em; line-height: 1.5; text-transform: uppercase; }
.film-cta:hover .film-cta-label, .film-cta:focus-visible .film-cta-label { color: #b8eee7; }
.companion-entry { min-height: auto; padding-block: clamp(3rem,6vw,5rem); }
.companion-entry .film-frame { min-height: 0; padding-block: clamp(3rem,6vw,5rem); }
.companion-entry .film-frame .material-heading { font-size: clamp(2.35rem,5vw,4.75rem); }
.talos-watch-story-cta { position: relative; z-index: 2; display: inline-flex; flex-direction: column; align-items: center; gap: 1rem; padding: .25rem .5rem; color: inherit; cursor: pointer; text-decoration: none; }
.talos-watch-story-cta .play-mark { margin-bottom: 0; pointer-events: none; }
.talos-watch-story-cta .evidence-tag { pointer-events: none; }

.door { display: grid; min-height: 100svh; place-items: center; padding: 9rem 7vw; background-image: linear-gradient(180deg,rgb(3 12 16 / 16%),rgb(3 12 16 / 80%) 84%),url('./talos-crete.png'); background-position: center; background-repeat: no-repeat; background-size: cover; text-align: center; }
.door::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 48%,rgb(3 13 17 / 22%) 0 34%,rgb(3 13 17 / 54%) 68%,rgb(3 13 17 / 80%) 100%),linear-gradient(90deg,rgb(16 64 62 / 16%),transparent 36% 64%,rgb(126 76 35 / 14%)); pointer-events: none; }
.door > div { position: relative; z-index: 1; max-width: 1450px; }
.door-lead { margin: 2rem 0 .7rem; color: #ecd7b6; font: 1.5rem/1.3 var(--font-display); }
.door .material-heading { margin: 0 auto; font-size: clamp(3.5rem,9vw,10rem); }
.door-lead, .door-close { position: relative; z-index: 2; text-shadow: 0 2px 2px rgb(0 0 0 / 96%),0 5px 8px rgb(0 0 0 / 78%); }
.door-close { max-width: 780px; margin: 3rem auto 0; color: #efe5d4; font: 1.12rem/1.8 var(--font-display); }

.faq { padding: 8rem 7vw; background-position: 28% 62%; }
.faq-wrap { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: clamp(2rem,5vw,5rem); background: linear-gradient(135deg, rgb(5 18 22 / 68%), rgb(5 18 22 / 44%)); backdrop-filter: blur(2px); }
.faq-wrap .material-heading { margin: 1rem 0 3rem; font-size: clamp(3rem,7vw,6.5rem); }
.faq-list details { border-top: 1px solid rgb(193 130 68 / 30%); }
.faq-list details:last-child { border-bottom: 1px solid rgb(193 130 68 / 30%); }
.faq-list summary { cursor: pointer; padding: 1.25rem 2.2rem 1.25rem 0; color: #e9c18c; font: 1.15rem/1.4 var(--font-display); }
.faq-list details p { margin: 0; padding: 0 2rem 1.5rem 0; color: #ddd2c0; line-height: 1.75; }

.sources { padding: 8rem 7vw; background-image: linear-gradient(135deg, rgb(6 17 23 / 76%), rgb(11 38 40 / 54%)), url('./talos-crete.png'); background-position: 62% 58%; background-size: cover; }
.sources > h2 { margin: .8rem 0 3rem; color: #e3c49a; font: clamp(2.5rem,6vw,5.5rem)/.95 var(--font-display); text-transform: uppercase; }
.source-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgb(202 132 66 / 30%); }
.source-grid article { padding: 2rem; background: #08191d; }
.source-grid b, .source-grid a { display: block; }
.source-grid b { margin-bottom: 1rem; color: #7cc5bc; font-size: .71rem; letter-spacing: .14em; text-transform: uppercase; }
.source-grid a { color: #e1ad70; font: 1.08rem/1.45 var(--font-display); text-underline-offset: 4px; }
.source-grid p { color: #cfc5b5; font-size: .88rem; line-height: 1.65; }
.method-note { margin: 2.5rem 0 0; color: #90c8c1; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2.5rem 4vw; border-top: 1px solid rgb(194 126 62 / 30%); background: #040d10; color: #b9ad9a; }
footer a { color: #e0ad72; font-size: .8rem; text-decoration: none; }
footer span { color: #e5cfac; font: .8rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
footer small { font-size: .7rem; }

.chronicle-home { background: #061117; }
.home-hero { display: flex; min-height: 82svh; flex-direction: column; justify-content: space-between; padding: 0 7vw 8rem; background-position: 55% 50%; }
.home-hero nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 0; border-bottom: 1px solid rgb(255 255 255 / 14%); color: #e7cfaa; font: .82rem/1 var(--font-display); letter-spacing: .22em; }
.home-hero nav a { color: #99cec8; font: 700 .72rem/1 var(--font-body); letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.home-hero > div { position: relative; z-index: 1; max-width: 850px; }
.home-hero h1 { margin: 1.2rem 0; color: #efdec2; font: clamp(4rem,11vw,10rem)/.78 var(--font-display); letter-spacing: -.04em; text-transform: uppercase; }
.home-hero h1 i { color: #bd783c; font-size: .45em; font-weight: 400; letter-spacing: .06em; }
.home-hero > div > p:last-child { max-width: 680px; color: #e8ddca; font-size: 1.12rem; line-height: 1.75; }
.home-section { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: clamp(1rem,4vw,5rem); padding: 8rem 7vw; border-top: 1px solid rgb(191 128 62 / 27%); background: linear-gradient(135deg,#061117,#0a2225); }
.home-section .section-number { color: #5caea5; font: 3.5rem/1 var(--font-display); }
.home-section h2 { margin: .8rem 0 3rem; color: #e6c18e; font: clamp(3rem,7vw,7rem)/.9 var(--font-display); text-transform: uppercase; }
.reel-list { display: grid; max-width: 1100px; gap: 1px; background: rgb(198 129 63 / 27%); }
.reel-list article { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 1.2rem; padding: 1.5rem; background: #08191d; }
.reel-list span { color: #60aaa2; font: 1.2rem/1 var(--font-display); }
.reel-list h3 { margin: 0; color: #e5d9c6; font: 1.15rem/1.4 var(--font-display); }
.reel-list small { color: #b98754; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.investigation-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 1rem; }
.talos-card, .existing-card { border: 1px solid rgb(192 125 59 / 34%); background: #08191d; }
.talos-card { display: grid; grid-template-columns: .75fr 1.25fr; color: inherit; text-decoration: none; }
.talos-card img { width: 100%; height: 100%; min-height: 450px; object-fit: cover; }
.talos-card > div, .existing-card { padding: clamp(1.5rem,3vw,3rem); }
.talos-card span, .existing-card span { color: #69b7ad; font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.talos-card h3, .existing-card h3 { color: #eac28a; font: 2rem/1.05 var(--font-display); text-transform: uppercase; }
.talos-card p, .existing-card p { color: #d2c8b8; line-height: 1.7; }
.talos-card b { display: block; margin-top: 3rem; color: #8ed1c8; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.existing-card h3 { font-size: 1.45rem; }

@media (max-width: 900px) {
  .site-nav { padding: 0 1rem; }
  .site-nav .brand span, .site-nav div a:last-child { display: none; }
  .site-nav div { gap: 1rem; }
  .hero { grid-template-columns: 1fr; }
  .hero { height: auto; overflow: visible; }
  .hero-copy { min-height: calc(100svh - 68px); padding: 6rem 1.35rem 4rem; }
  .hero-poster { min-height: 100svh; border-top: 1px solid rgb(185 116 54 / 32%); border-left: 0; }
  .hero-poster img { object-position: center; }
  .sequence, .sequence-reverse { grid-template-columns: 1fr; min-height: auto; }
  .sequence-reverse .sequence-visual { order: 0; }
  .sequence-reverse .investigation-plate { order: 0; }
  .sequence-visual { min-height: 74svh; }
  .investigation-plate { min-height: 70svh; }
  .sequence-copy { padding: 4rem 1.35rem 5rem; }
  .evidence-only { min-height: auto; padding: 5rem 1.35rem; }
  .evidence-only .sequence-copy { padding: 3rem 1.35rem 4rem; }
  .witness { grid-template-columns: 1fr; padding: 6rem 1.35rem; }
  .artifact-mark { width: min(80vw,380px); margin: 0 auto; }
  .distinction, .origin-columns, .trial-grid, .verdict-grid { grid-template-columns: 1fr; }
  .origins, .trial, .verdict { padding: 7rem 1.35rem; }
  .film-frame { min-height: 560px; padding: 3rem 1.2rem; }
  .door { padding: 7rem 1.35rem; }
  .faq { padding: 6rem 1rem; }
  .faq-wrap { padding: 3rem 1.2rem; }
  .sources { padding: 6rem 1.35rem; }
  .source-grid { grid-template-columns: 1fr; }
  footer { flex-direction: column; text-align: center; }
  .home-hero { padding: 0 1.35rem 6rem; }
  .home-section { grid-template-columns: 1fr; padding: 6rem 1.35rem; }
  .investigation-grid { grid-template-columns: 1fr; }
  .talos-card { grid-template-columns: .75fr 1.25fr; }
}

@media (max-width: 520px) {
  .material-heading::before { inset: -.34em -.34em -.42em; }
  .material-heading .matte { -webkit-text-stroke-width: 4px; filter: drop-shadow(0 2px 0 #010405) drop-shadow(0 6px 4px rgb(0 0 0 / 58%)); }
  .material-heading .texture { -webkit-text-stroke-width: 1px; background-size: 100% 100%,120% auto; }
  .site-nav div a { font-size: .67rem; }
  .hero-deck { font-size: 1rem; line-height: 1.65; }
  .search-question { font-size: 1.08rem; }
  .hero-poster { min-height: 0; aspect-ratio: 2 / 3; }
  .sequence-visual { min-height: 58svh; }
  .sequence-visual::after { font-size: .58rem; }
  .source-fragment { inset: 11% 6% 14%; padding: 2rem 1.25rem; }
  .source-fragment p { font-size: 2rem; }
  .evidence-line { gap: .38rem; letter-spacing: .08em; }
  .map-key { right: 7%; bottom: 12%; flex-wrap: wrap; max-width: 76%; }
  .map-key b { flex-basis: 100%; text-align: right; }
  .archive-stamp { right: 7%; bottom: 9%; }
  .verdict .material-heading { font-size: 2rem; }
  .film-frame .material-heading { font-size: 1.9rem; }
  .film-cta { flex-direction: column; gap: .85rem; }
  .prologue-inner .material-heading, .witness-copy .material-heading { font-size: 2.5rem; }
  .verdict .material-heading > span, .film-frame .material-heading > span { overflow-wrap: normal; }
  .evidence-chain { flex-direction: column; }
  .evidence-chain b { transform: rotate(90deg); }
  .reel-list article { grid-template-columns: 35px 1fr; }
  .reel-list small { grid-column: 2; }
  .talos-card { grid-template-columns: 1fr; }
  .talos-card img { min-height: 560px; }
}