/* ───────────────────────────────────────────────────────────────
   STOLEN GENESIS — stolengenesis.com
   Aesthetic: the evidence dossier. Night sky, engraved gold,
   archival serif, mono coordinates. Built to feel like the
   pattern file Michael and Evelyn assembled.
   ─────────────────────────────────────────────────────────────── */

:root {
  --night:      #070a13;
  --night-2:    #0b0f1d;
  --night-3:    #111729;
  --bone:       #e9e2d4;
  --bone-dim:   #b7b0a0;
  --gold:       #e3b863;
  --gold-hi:    #f6d995;
  --gold-deep:  #9a6f25;
  --teal:       #4cc8d9;
  --hairline:   rgba(227, 184, 99, .16);
  --mono:       'IBM Plex Mono', ui-monospace, monospace;
  --serif:      'EB Garamond', Georgia, serif;
  --display:    'Cinzel', 'Times New Roman', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--night);
  color: var(--bone);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--gold-deep); color: var(--night); }

/* starfield + grain atmosphere on the whole document */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(233,226,212,.5), transparent 60%),
    radial-gradient(1px 1px at 78% 8%,  rgba(233,226,212,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 33% 64%, rgba(233,226,212,.28), transparent 60%),
    radial-gradient(1px 1px at 61% 41%, rgba(233,226,212,.4), transparent 60%),
    radial-gradient(1px 1px at 89% 73%, rgba(233,226,212,.3), transparent 60%),
    radial-gradient(1.5px 1.5px at 7% 87%, rgba(233,226,212,.25), transparent 60%),
    radial-gradient(1px 1px at 47% 12%, rgba(76,200,217,.35), transparent 60%),
    radial-gradient(ellipse 120% 70% at 50% -10%, #101730 0%, var(--night) 60%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; transition: color .25s; }
a:hover { color: var(--gold-hi); }

/* ── nav ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 34px;
  background: linear-gradient(to bottom, rgba(7,10,19,.92), rgba(7,10,19,0));
}
.nav .mark { display: flex; align-items: center; gap: 12px; }
.nav .mark img { width: 30px; height: 30px; opacity: .9; }
.nav .mark span {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: 4px; color: var(--bone);
}
.nav .links { display: flex; gap: 30px; }
.nav .links a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--bone-dim);
}
.nav .links a:hover, .nav .links a.active { color: var(--gold-hi); }

/* ── hero ── */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 120px 24px 90px; isolation: isolate;
}
.hero .bg {
  position: absolute; inset: 0; z-index: -1;
  background: url('assets/hero.jpg') center 28% / cover no-repeat;
}
.hero .bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(7,10,19,.78) 0%, rgba(7,10,19,.35) 42%, rgba(7,10,19,.55) 72%, var(--night) 100%);
}
.kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: 5px;
  text-transform: uppercase; color: var(--teal);
  animation: rise .9s .1s cubic-bezier(.2,.7,.2,1) both;
}
.hero h1 {
  margin: 26px 0 6px;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(54px, 11vw, 124px); line-height: 1.0; letter-spacing: .02em;
  background: linear-gradient(180deg, #fbe9bd 0%, #f0c468 40%, #b9821f 58%, #eec168 74%, #8a5c14 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.75));
  animation: rise .9s .25s cubic-bezier(.2,.7,.2,1) both;
}
.hero .sub {
  font-family: var(--display); font-weight: 700; font-size: clamp(17px, 2.6vw, 26px);
  letter-spacing: 11px; text-indent: 11px; color: var(--gold);
  animation: rise .9s .4s cubic-bezier(.2,.7,.2,1) both;
}
.hero .hook {
  max-width: 620px; margin: 38px auto 0;
  font-size: clamp(19px, 2.3vw, 23px); font-style: italic; color: var(--bone);
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
  animation: rise .9s .55s cubic-bezier(.2,.7,.2,1) both;
}
.hero .cta-row {
  display: flex; gap: 18px; margin-top: 44px; flex-wrap: wrap; justify-content: center;
  animation: rise .9s .7s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.btn {
  display: inline-block; padding: 15px 34px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
  border: 1px solid var(--gold); color: var(--gold-hi);
  background: rgba(7,10,19,.45); backdrop-filter: blur(3px);
  transition: all .3s;
}
.btn:hover { background: var(--gold); color: var(--night); box-shadow: 0 0 34px rgba(227,184,99,.35); }
.btn.solid { background: var(--gold); color: var(--night); }
.btn.solid:hover { background: var(--gold-hi); }

.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; letter-spacing: 3px; color: var(--bone-dim);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: .9; } }

/* ── shared section chrome ── */
section { position: relative; padding: 110px 24px; }
.wrap { max-width: 980px; margin: 0 auto; }
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 4px;
  text-transform: uppercase; color: var(--teal); margin-bottom: 18px;
}
h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 4.6vw, 44px); letter-spacing: .04em;
  color: var(--gold-hi); margin-bottom: 28px;
}
.rule { width: 64px; height: 1px; background: var(--gold); opacity: .5; margin: 30px 0; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ── the dossier (blurb) ── */
.dossier { background: linear-gradient(to bottom, var(--night), var(--night-2)); }
.dossier .lead {
  font-size: clamp(22px, 3vw, 28px); line-height: 1.5; color: var(--bone);
  max-width: 780px;
}
.dossier .lead em { color: var(--gold-hi); font-style: italic; }
.dossier p + p { margin-top: 22px; }
.dossier .body { max-width: 700px; color: var(--bone-dim); }
.dossier .body strong { color: var(--bone); font-weight: 500; }

/* ── glyph interlude ── */
.glyph-band {
  text-align: center; padding: 130px 24px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(76,200,217,.06), transparent 70%),
    var(--night-2);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.glyph-band svg { width: min(300px, 60vw); height: auto; margin: 0 auto 36px; display: block; }
.glyph-band svg path {
  stroke: var(--gold); stroke-width: 0.13; stroke-linecap: round; fill: none;
  stroke-dasharray: 12; stroke-dashoffset: 12;
}
.glyph-band.in svg path { animation: draw 1.1s cubic-bezier(.4,0,.3,1) forwards; }
.glyph-band.in svg path:nth-child(1)  { animation-delay: .10s; }
.glyph-band.in svg path:nth-child(2)  { animation-delay: .25s; }
.glyph-band.in svg path:nth-child(3)  { animation-delay: .40s; }
.glyph-band.in svg path:nth-child(4)  { animation-delay: .55s; }
.glyph-band.in svg path:nth-child(5)  { animation-delay: .70s; }
.glyph-band.in svg path:nth-child(6)  { animation-delay: .85s; }
.glyph-band.in svg path:nth-child(7)  { animation-delay: 1.0s; }
.glyph-band.in svg path:nth-child(8)  { animation-delay: 1.15s; }
.glyph-band.in svg path:nth-child(9)  { animation-delay: 1.3s; }
.glyph-band.in svg path:nth-child(10) { animation-delay: 1.45s; }
.glyph-band.in svg path:nth-child(11) { animation-delay: 1.6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.glyph-band .legend {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 3vw, 30px); letter-spacing: 6px; color: var(--gold-hi);
}
.glyph-band .gloss { margin-top: 14px; font-style: italic; color: var(--bone-dim); }

/* ── fact strip ── */
.facts { background: var(--night-2); }
.fact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline);
  margin-top: 44px;
}
.fact {
  background: var(--night-2); padding: 30px 26px;
  transition: background .35s;
}
.fact:hover { background: var(--night-3); }
.fact .coord { font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.5px; color: var(--teal); }
.fact h3 { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--gold); margin: 12px 0 10px; letter-spacing: .04em; }
.fact p { font-size: 16.5px; color: var(--bone-dim); line-height: 1.6; }
.facts .more { margin-top: 36px; text-align: center; }

/* ── signup ── */
.signup {
  background:
    radial-gradient(ellipse 70% 100% at 50% 100%, rgba(227,184,99,.07), transparent 65%),
    var(--night);
  text-align: center;
}
.signup .wrap { max-width: 640px; }
.signup p.pitch { color: var(--bone-dim); max-width: 520px; margin: 0 auto 38px; }
.signup form { display: flex; gap: 12px; max-width: 520px; margin: 0 auto; }
.signup input[type=email] {
  flex: 1; padding: 16px 20px;
  background: var(--night-3); border: 1px solid var(--hairline);
  color: var(--bone); font-family: var(--mono); font-size: 14px;
  outline: none; transition: border-color .3s;
}
.signup input[type=email]:focus { border-color: var(--gold); }
.signup .hp { position: absolute; left: -9999px; opacity: 0; }
.signup .note { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--bone-dim); opacity: .8; }
.signup .msg { margin-top: 22px; font-family: var(--mono); font-size: 13px; letter-spacing: 1px; min-height: 20px; }
.signup .msg.ok { color: var(--teal); }
.signup .msg.err { color: #e08585; }

/* ── author ── */
.author { border-top: 1px solid var(--hairline); background: var(--night-2); }
.author .row { display: flex; gap: 50px; align-items: center; flex-wrap: wrap; }
.author .cover-thumb { width: 240px; flex-shrink: 0; box-shadow: 0 18px 60px rgba(0,0,0,.6); border: 1px solid var(--hairline); }
.author .bio { flex: 1; min-width: 280px; }
.author .bio p { color: var(--bone-dim); }
.author .bio p + p { margin-top: 16px; }
.author .name { font-family: var(--display); font-size: 22px; letter-spacing: 2px; color: var(--gold-hi); margin-bottom: 14px; }

/* ── footer ── */
footer {
  padding: 50px 24px 40px; text-align: center;
  border-top: 1px solid var(--hairline); background: var(--night);
}
footer img { width: 34px; margin: 0 auto 16px; opacity: .6; }
footer .fnav { display: flex; gap: 26px; justify-content: center; margin-bottom: 16px; }
footer .fnav a { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--bone-dim); }
footer small { font-family: var(--mono); font-size: 11px; color: var(--bone-dim); opacity: .65; letter-spacing: .5px; }

/* ── real places page ── */
.page-head { padding: 170px 24px 70px; text-align: center; }
.page-head h1 {
  font-family: var(--display); font-weight: 900; letter-spacing: .04em;
  font-size: clamp(36px, 6vw, 62px);
  background: linear-gradient(180deg, #fbe9bd, #b9821f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-head .intro { max-width: 660px; margin: 28px auto 0; color: var(--bone-dim); font-size: 20px; }
.page-head .intro strong { color: var(--bone); font-weight: 500; }

.site-entry {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: 56px; align-items: center;
  max-width: 1060px; margin: 0 auto; padding: 72px 24px;
}
.site-entry:nth-child(even) .photo { order: 2; }
.site-entry + .site-entry { border-top: 1px solid var(--hairline); }
.site-entry .photo { position: relative; }
.site-entry .photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--hairline);
  filter: saturate(.92) contrast(1.04);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.site-entry .credit {
  position: absolute; bottom: 10px; right: 12px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .5px;
  color: rgba(233,226,212,.75); background: rgba(7,10,19,.65);
  padding: 3px 8px; backdrop-filter: blur(2px);
}
.site-entry .credit a { color: rgba(246,217,149,.9); }
.site-entry .coord { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: var(--teal); }
.site-entry h2 { margin: 14px 0 20px; font-size: clamp(26px, 3.4vw, 36px); }
.site-entry .label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--gold); margin: 22px 0 8px;
}
.site-entry .label:first-of-type { margin-top: 0; }
.site-entry p { font-size: 17px; color: var(--bone-dim); }
.site-entry .novel p { color: var(--bone); font-style: italic; }

.places-cta { text-align: center; padding: 90px 24px 120px; }

/* ── privacy ── */
.prose { max-width: 680px; margin: 0 auto; padding: 170px 24px 110px; }
.prose h1 { font-family: var(--display); color: var(--gold-hi); font-size: 34px; margin-bottom: 30px; }
.prose h2 { font-size: 22px; margin-top: 36px; }
.prose p { color: var(--bone-dim); margin-top: 16px; }

/* ── persons of interest: the recovered case files ──────────────
   Physical dossiers on a dark, lamp-lit desk. Aged paper, typed
   in Courier, redacted in black marker, stamped in oxblood. */
:root {
  --paper:     #ece1c8;
  --paper-2:   #dccfad;
  --ink:       #2a241c;
  --ink-soft:  #6f6450;
  --ink-faint: #8c8068;
  --marker:    #14110c;
  --stamp:     #a23d31;
  --type:      'Courier Prime', var(--mono);
}

/* ── the lodge scene ──
   Mobile-first = a simple stacked fallback on a dark wood table.
   Desktop (>=980px) builds the full angled, stormy lodge further down. */
.poi-head { padding-bottom: 30px; }

.lodge {
  position: relative; max-width: 1200px; margin: 0 auto; padding: 28px 14px 54px;
  overflow: hidden; border-radius: 5px;
  background:
    radial-gradient(150% 75% at 50% -12%, rgba(214,170,96,.12), transparent 52%),
    radial-gradient(140% 130% at 50% 50%, #1f160f 0%, #0d0907 88%);
  border: 1px solid rgba(90,64,32,.3);
  box-shadow: inset 0 0 120px rgba(0,0,0,.65), 0 30px 80px -30px rgba(0,0,0,.8);
}
.lodge::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: .3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16 0.012' numOctaves='4' seed='11'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23w)'/%3E%3C/svg%3E");
}
/* atmospheric layers + the scene plate are a desktop-only enhancement */
.plate, .room, .flash, .firelight, .scene-light, .cup, .vignette { display: none; }
.table-wrap, .table { position: relative; }
.lodge .file-card.reveal { transform: rotate(var(--rot, 0deg)); }

/* each recovered file */
.file-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 356px; margin: 0 auto;
  padding: 30px 26px 28px;
  color: var(--ink); font-family: var(--type);
  background: url('/assets/paper-2-cut.png') center / 100% 100% no-repeat;
  border: 0; border-radius: 0;
  transform: rotate(var(--rot, 0deg));
  /* tight contact shadow so the sheet sits ON the table, slightly dimmed into the gloom */
  filter: brightness(.9) drop-shadow(2px 5px 4px rgba(0,0,0,.6));
  transition: transform .4s cubic-bezier(.2,.7,.2,1), filter .4s;
}
.file-card:nth-of-type(even) { background-image: url('/assets/paper-3-cut.png'); }
.file-card:nth-of-type(3n)   { background-position: 30% 70%; background-size: 116% 116%; }
.file-card:nth-of-type(4n)   { background-position: 70% 30%; background-size: 112% 108%; }
.file-card + .file-card { margin-top: -18px; }
.file-card::before { display: none; }
/* typed ink sinks into the paper rather than sitting on top */
.file-name, .file-role, .file-alias, .file-hook, .file-fields { mix-blend-mode: multiply; }
/* steel paperclip on the top edge */
.file-card::after {
  content: ''; position: absolute; top: -13px; right: 30px; width: 24px; height: 52px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 52'%3E%3Cpath d='M7 8 v30 a5 5 0 0 0 10 0 V11 a8 8 0 0 0 -15 0 v28 a11 11 0 0 0 21 0 V15' fill='none' stroke='%23aab0ba' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)); pointer-events: none;
}
.file-card:nth-of-type(odd)  { --rot: -2.5deg; }
.file-card:nth-of-type(even) { --rot:  2.5deg; }
.file-card:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.03); z-index: 30;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 3px 5px rgba(0,0,0,.4),
    0 46px 64px -20px rgba(0,0,0,.92);
}

/* manila folder tab carrying the file number */
.file-no {
  position: absolute; top: -15px; left: 24px; z-index: 2;
  font-family: var(--type); font-weight: 700; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; color: #2a241c;
  padding: 5px 15px 7px; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #d9c089, #c6a558);
  box-shadow: 0 -1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4);
}

/* glued-in blank mugshot, like a clipped Polaroid */
.file-photo {
  position: relative; height: 116px; margin: 8px 0 18px;
  background:
    radial-gradient(ellipse at 50% 36%, rgba(76,200,217,.06), transparent 70%),
    linear-gradient(160deg, #1a1f2b, #05070c);
  border: 6px solid #f3ecda; border-bottom-width: 20px;
  box-shadow: 0 3px 7px rgba(0,0,0,.45); transform: rotate(-1.6deg); overflow: hidden;
}
.file-photo::before {
  content: ''; position: absolute; inset: 0;
  background: url('/assets/glyph-gold.png') center / 92px no-repeat; opacity: .07;
}
.file-photo .stamp {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%) rotate(-11deg);
  font-family: var(--type); font-weight: 700; font-size: clamp(13px, 3vw, 17px);
  letter-spacing: 4px; text-transform: uppercase; color: rgba(176,58,46,.6);
  border: 2.5px solid rgba(176,58,46,.4); border-radius: 3px; padding: 4px 13px;
  filter: url(#rough); opacity: .92;
}
.file-photo .no-img {
  position: absolute; bottom: 7px; left: 0; right: 0; text-align: center;
  font-family: var(--type); font-size: 9px; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(233,226,212,.5);
}

.file-name {
  font-family: var(--type); font-weight: 700; letter-spacing: 1px;
  font-size: 19px; text-transform: uppercase; color: var(--ink); margin: 4px 0 2px;
}
.file-name-redacted { min-height: 26px; display: flex; align-items: center; }
.file-name-redacted .redact { height: 20px; }
.file-role, .file-alias {
  font-family: var(--type); font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink-soft);
}
.file-hook {
  font-family: var(--type); font-style: italic; font-size: 14.5px; line-height: 1.5;
  color: #383127; margin: 16px 0 4px;
  padding-left: 13px; border-left: 2px solid rgba(0,0,0,.22);
}

.file-fields { margin-top: 16px; }
.file-fields > div {
  display: grid; grid-template-columns: 8.5em 1fr; gap: 10px; align-items: baseline;
  padding: 8px 0; border-top: 1px dashed rgba(0,0,0,.2);
}
.file-fields dt {
  font-family: var(--type); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink-faint);
}
.file-fields dd { font-family: var(--type); font-size: 13px; color: var(--ink); line-height: 1.45; }

/* black marker redaction on paper */
.redact {
  display: inline-block; height: .95em; vertical-align: middle; border-radius: 1px;
  background: var(--marker); transform: rotate(-.4deg);
  box-shadow: 0 0 1px 1px rgba(0,0,0,.3); filter: url(#rough);
}
.redact.r1 { width: 2.8ch; }
.redact.r2 { width: 6ch; }
.redact.r3 { width: 10ch; }
.redact.r4 { width: 13ch; }
.tag {
  font-family: var(--type); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--stamp); border: 1px solid rgba(162,61,49,.5); border-radius: 2px;
  padding: 1px 7px; background: rgba(162,61,49,.07); white-space: nowrap;
}

@media (max-width: 760px) {
  .nav { padding: 14px 18px; }
  .nav .links { gap: 16px; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  .lodge { padding: 26px 12px 44px; }
  .file-card { max-width: 320px; }
  .nav .links a { font-size: 10.5px; letter-spacing: 1.5px; }
  .nav .mark span { display: none; }
  .hero .bg { background-image: url('assets/hero-mobile.jpg'); }
  .signup form { flex-direction: column; }
  .site-entry { grid-template-columns: 1fr; gap: 28px; padding: 56px 20px; }
  .site-entry:nth-child(even) .photo { order: 0; }
  section { padding: 80px 20px; }
}

/* props are a desktop-only flourish (the marks of someone reviewing) */
.prop { display: none; }

/* ── desktop: the full angled lodge, storm outside ── */
@media (min-width: 980px) {
  .poi-head { padding-bottom: 6px; position: relative; z-index: 2; }
  .lodge {
    max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0;
    width: 100%; box-shadow: none; background: #060509; overflow: visible;
  }
  .lodge::before { display: none; }
  .room { display: none; }
  /* the render is a real <img>: the box is exactly the image, so file
     coordinates map to the same pixels on every screen (no cover-crop) */
  .plate { display: block; width: 100%; height: auto; }
  .flash, .firelight, .scene-light, .cup, .vignette { display: block; }

  /* ROOM — placeholder. To drop in the render: set
     .wall { background-image: var(--plate); background-size: cover; }
     and hide .window/.hearth/.mullion if the plate already shows them. */
  .room { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
  .wall {
    position: absolute; inset: 0;
    background:
      radial-gradient(70% 60% at 82% 92%, rgba(210,120,40,.22), transparent 62%),
      linear-gradient(180deg, #15110d 0%, #0c0a08 58%, #070605 100%);
  }
  .wall::after {
    content: ''; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='st'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' seed='6'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23st)'/%3E%3C/svg%3E");
  }

  .window {
    position: absolute; top: 8%; left: 8%; width: 25%; height: 50%;
    background: #05070e; overflow: hidden;
    border: 12px solid #0c0a08; border-radius: 2px;
    box-shadow: 0 0 0 3px rgba(0,0,0,.7), inset 0 0 70px rgba(0,0,0,.85),
                0 0 90px rgba(120,150,210,.07);
  }
  .sky {
    position: absolute; inset: 0;
    background:
      radial-gradient(120% 90% at 50% 130%, rgba(70,90,130,.3), transparent 60%),
      linear-gradient(180deg, #090d18 0%, #121a2e 55%, #0a1020 100%);
  }
  .sky::after {
    content: ''; position: absolute; inset: -30%;
    background:
      radial-gradient(50% 38% at 30% 35%, rgba(16,22,40,.95), transparent 70%),
      radial-gradient(46% 34% at 72% 55%, rgba(12,18,34,.95), transparent 70%);
    animation: cloud-drift 30s linear infinite alternate;
  }
  .bolt { position: absolute; inset: 0; opacity: 0; z-index: 2; }
  .bolt svg { width: 70%; height: 100%; margin: 0 auto; display: block; }
  .bolt path { fill: #e6efff; }
  .bolt.strike { animation: bolt .7s ease-out; }
  .rain {
    position: absolute; inset: 0; z-index: 1; opacity: .4;
    background-image: repeating-linear-gradient(74deg, transparent 0 7px, rgba(190,205,235,.16) 7px 8px);
    animation: rain-fall .55s linear infinite;
  }
  .mullion { background: #0c0a08; position: absolute; }
  .mullion.v { left: 50%; top: 0; bottom: 0; width: 8px; transform: translateX(-50%); }
  .mullion.h { top: 46%; left: 0; right: 0; height: 8px; }

  .hearth {
    position: absolute; right: 5%; bottom: 10%; width: 200px; height: 150px; z-index: 1;
    background: radial-gradient(closest-side, rgba(255,160,60,.5), rgba(255,90,20,.14), transparent 76%);
    filter: blur(10px); animation: fire-flicker 3.2s ease-in-out infinite;
  }

  .firelight {
    position: absolute; inset: 0; pointer-events: none; z-index: 5; mix-blend-mode: screen;
    background:
      radial-gradient(15% 24% at 82% 44%, rgba(255,150,60,.5), transparent 60%),
      radial-gradient(46% 44% at 80% 66%, rgba(255,128,44,.2), transparent 66%);
    animation: fire-flicker 2.3s ease-in-out infinite;
  }
  .flash {
    position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: 0; mix-blend-mode: screen;
    background: radial-gradient(32% 40% at 15% 24%, rgba(200,218,255,.9), rgba(150,180,255,.22) 50%, transparent 74%);
  }

  /* the render shows the table, paper, clips and shadows. These layers
     just hold each file's TEXT, laid onto a real sheet in screen space. */
  .table-wrap, .table {
    position: absolute; inset: 0; z-index: 4; transform: none; background: none;
  }
  .table::before, .table::after { display: none; }

  /* the files stay as the real sealed props in the render. Each is an
     invisible hover hotspot marked with a small seal; hovering opens a
     clean, legible dossier panel — a UI overlay, never fake paper. */
  .table .file-card {
    position: absolute; box-sizing: border-box;
    width: 130px; height: 76px; padding: 0; margin: 0; cursor: pointer;
    color: var(--bone); background: none; filter: none;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
    transform-origin: 50% 50%;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
  }
  .table .file-card.reveal { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); }
  .table .file-card + .file-card { margin-top: 0; }
  .table .file-photo, .table .file-no, .table .file-card::before { display: none; }
  /* the wax-gold seal marking each sealed file at rest */
  .table .file-card::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
    margin: -6px 0 0 -6px; border-radius: 50%;
    background: radial-gradient(circle, rgba(246,217,149,.95), rgba(227,184,99,.25) 55%, transparent 72%);
    box-shadow: 0 0 12px rgba(246,217,149,.6); animation: seal-pulse 2.8s ease-in-out infinite;
  }
  /* content hidden until hover */
  .table .file-name, .table .file-role, .table .file-alias,
  .table .file-hook, .table .file-fields { display: none; mix-blend-mode: normal; }

  /* hotspot positions, centred on the real files */
  .table .file-card:nth-of-type(1) { left: 28%; top: 82%; --rot: -6deg; --ty: -84%; z-index: 8; }
  .table .file-card:nth-of-type(2) { left: 30%; top: 64%; --rot: -3deg; --ty: -44%; z-index: 5; }
  .table .file-card:nth-of-type(3) { left: 48%; top: 71%; --rot: -2deg; --ty: -56%; z-index: 7; }
  .table .file-card:nth-of-type(4) { left: 79%; top: 72%; --rot: 5deg;  --ty: -56%; z-index: 6; }
  .table .file-card:nth-of-type(5) { left: 47%; top: 58%; --rot: 2deg;  --ty: -36%; z-index: 4; }
  .table .file-card:nth-of-type(6) { left: 49%; top: 87%; --rot: 3deg;  --ty: -88%; z-index: 9; }
  .table .file-card:nth-of-type(7) { left: 64%; top: 67%; --rot: -5deg; --ty: -50%; z-index: 7; }

  /* hover: the file opens as an A4-portrait aged-paper page anchored to
     OVERLAP the file under the cursor (so it can't flicker), small enough to
     leave the rest of the scene visible. A 100vmax shadow dims around it. */
  .table .file-card:hover {
    width: 410px; max-width: none; height: auto; z-index: 100; cursor: default;
    transform: translate(-50%, var(--ty, -70%)) rotate(0deg);
    display: block; padding: 30px 34px 34px; text-align: left;
    color: #2b241a; font-family: 'Courier Prime', var(--mono);
    background-color: #e7dbc1;
    background-image:
      radial-gradient(200px 150px at 16% 10%, rgba(120,92,52,.10), transparent 72%),
      radial-gradient(240px 180px at 86% 88%, rgba(96,70,40,.13), transparent 72%),
      linear-gradient(155deg, #efe6ce 0%, #ddcdac 72%, #d2c19f 100%);
    border: 1px solid rgba(54,40,20,.5); border-radius: 2px;
    box-shadow: 0 0 0 100vmax rgba(4,5,9,.66), 0 30px 70px rgba(0,0,0,.8);
  }
  .table .file-card:hover::before, .table .file-card:hover::after { display: none; }
  /* clipped mugshot photo at the top */
  .table .file-card:hover .file-photo {
    display: block; position: relative; width: 150px; height: 116px; margin: 0 auto 18px;
    transform: rotate(-2deg); overflow: hidden;
    background: linear-gradient(160deg, #1b212e, #04060b);
    border: 7px solid #f4ecd8; border-bottom-width: 20px;
    box-shadow: 0 5px 13px rgba(0,0,0,.45);
  }
  .table .file-card:hover .file-photo::before {
    content: ''; position: absolute; inset: 0;
    background: url('/assets/glyph-gold.png') center 42% / 76px no-repeat; opacity: .08;
  }
  .table .file-card:hover .file-photo .stamp {
    position: absolute; top: 44%; left: 50%; transform: translate(-50%,-50%) rotate(-10deg);
    font-family: 'Courier Prime', var(--mono); font-weight: 700; font-size: 14px; letter-spacing: 3px;
    text-transform: uppercase; color: rgba(176,58,46,.7); border: 2px solid rgba(176,58,46,.48);
    border-radius: 2px; padding: 3px 11px; filter: url(#rough);
  }
  .table .file-card:hover .file-photo .no-img {
    position: absolute; bottom: 5px; left: 0; right: 0; text-align: center;
    font-family: 'Courier Prime', var(--mono); font-size: 7.5px; letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(233,226,212,.55);
  }
  .table .file-card:hover .file-no {
    display: block; position: static; background: none; box-shadow: none; border-radius: 0;
    font-family: 'Courier Prime', var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    color: #7a2e23; margin: 0; padding: 0; text-align: center;
  }
  .table .file-card:hover .file-name {
    display: block; font-family: 'Courier Prime', var(--mono); font-weight: 700; font-size: 21px;
    letter-spacing: 1px; text-transform: uppercase; color: #241c12; -webkit-text-fill-color: #241c12;
    margin: 5px 0 3px; padding: 0; text-align: center;
  }
  .table .file-card:hover .file-name-redacted { min-height: 26px; justify-content: center; }
  .table .file-card:hover .file-name-redacted .redact { height: 22px; }
  .table .file-card:hover .file-role,
  .table .file-card:hover .file-alias {
    display: block; font-family: 'Courier Prime', var(--mono); font-size: 10px; letter-spacing: 1px;
    text-transform: uppercase; color: #6e6250; margin: 0 0 16px; padding: 0; text-align: center;
  }
  .table .file-card:hover .file-hook {
    display: block; font-family: 'Courier Prime', var(--mono); font-style: italic; font-size: 13.5px;
    line-height: 1.55; color: #383127; margin: 0 0 16px; padding: 15px 0 0;
    border: 0; border-top: 1px solid rgba(54,40,20,.25); text-align: left;
  }
  .table .file-card:hover .file-fields { display: block; margin: 0; padding: 0; }
  .table .file-card:hover .file-fields > div {
    display: grid; grid-template-columns: 112px 1fr; column-gap: 14px; align-items: baseline;
    margin: 0; padding: 9px 0; border-top: 1px solid rgba(54,40,20,.22);
  }
  .table .file-card:hover .file-fields dt {
    grid-column: 1; margin: 0; font-family: 'Courier Prime', var(--mono); font-size: 9px;
    letter-spacing: 1px; text-transform: uppercase; color: #8a5a2a;
  }
  .table .file-card:hover .file-fields dd {
    grid-column: 2; margin: 0; font-family: 'Courier Prime', var(--mono); font-size: 11px; color: #36302a; line-height: 1.5;
  }
  .table .file-card:hover .redact {
    background: #15110c; box-shadow: none; height: .9em; filter: url(#rough);
  }
  .table .file-card:hover .tag {
    color: #7a2e23; border-color: rgba(122,46,35,.5); background: rgba(122,46,35,.08);
  }

  /* coffee ring soaked into one file */
  .prop { display: block; }
  .prop.coffee {
    position: absolute; left: 49%; top: 71%; width: 118px; height: 80px; z-index: 6;
    transform: translate(-50%,-50%) rotate(8deg) scaleY(.66); mix-blend-mode: multiply; opacity: .8;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='200'%3E%3Cdefs%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.025' numOctaves='2' seed='4' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='20'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23c)'%3E%3Cellipse cx='110' cy='100' rx='74' ry='66' fill='none' stroke='%235e3a1e' stroke-width='9' opacity='0.55'/%3E%3Cellipse cx='110' cy='100' rx='66' ry='58' fill='%236b4423' opacity='0.13'/%3E%3Cellipse cx='110' cy='100' rx='81' ry='73' fill='none' stroke='%237a4a26' stroke-width='2' opacity='0.32'/%3E%3Cellipse cx='178' cy='150' rx='7' ry='6' fill='%235e3a1e' opacity='0.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* steam rising off the mug already in the render (front-left) */
  .cup {
    position: absolute; left: 5%; bottom: 9%; width: 92px; height: 120px; z-index: 8;
    background: none;
  }
  .cup::before, .cup::after { display: none; }
  .steam {
    position: absolute; left: 40px; bottom: 86px; width: 11px; height: 38px; border-radius: 50%;
    background: linear-gradient(180deg, rgba(250,245,235,0), rgba(250,240,225,.45));
    filter: blur(6px); opacity: 0;
  }
  .steam.s1 { animation: steam 4.2s ease-in-out infinite; }
  .steam.s2 { left: 50px; animation: steam 5s ease-in-out .9s infinite; }
  .steam.s3 { left: 30px; animation: steam 5.6s ease-in-out 1.7s infinite; }

  /* scene light seats the files: cool shadow from the window side,
     warm wash from the fire side, plus the edge vignette */
  .scene-light {
    position: absolute; inset: 0; pointer-events: none; z-index: 7; mix-blend-mode: soft-light;
    background: linear-gradient(102deg, rgba(40,70,130,.7) 0%, transparent 38%, transparent 58%, rgba(255,150,60,.65) 100%);
    animation: fire-flicker 2.3s ease-in-out infinite;
  }
  .vignette {
    position: absolute; inset: 0; pointer-events: none; z-index: 9;
    background: radial-gradient(125% 95% at 50% 42%, transparent 50%, rgba(0,0,0,.62) 100%);
  }
}

@keyframes cloud-drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes rain-fall { from { background-position: 0 0; } to { background-position: -34px 120px; } }
@keyframes fire-flicker { 0% { opacity: .62; } 18% { opacity: 1; } 36% { opacity: .5; } 54% { opacity: .92; } 72% { opacity: .58; } 88% { opacity: .86; } 100% { opacity: .66; } }
@keyframes seal-pulse { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes bolt { 0% { opacity: 0; } 8% { opacity: 1; } 16% { opacity: .2; } 26% { opacity: .9; } 42% { opacity: 0; } 100% { opacity: 0; } }
@keyframes steam {
  0% { opacity: 0; transform: translateY(0) scaleX(1); }
  25% { opacity: .5; }
  100% { opacity: 0; transform: translateY(-66px) scaleX(2.6); }
}
@media (prefers-reduced-motion: reduce) {
  .sky::after, .rain, .hearth, .firelight, .bolt, .steam { animation: none !important; }
}