:root {
  --dw-bg: #0b1f19; --dw-fg: #efe3c8; --dw-accent: #e3a857; --dw-panel: rgba(11, 31, 25, .96);
  --dw-font-body: 'Spectral', Georgia, serif; --display: 'DM Serif Display', Georgia, serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --amber: #e3a857; --parch: #efe3c8; --emerald: #0e2a22; --line: #efe3c822;
}
body { overflow-x: hidden; font-size: 1.06rem; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.05; margin: 0 0 .5em; }
h2 { font-size: clamp(2rem, 4.4vw, 3rem); color: var(--amber); }
.sub { opacity: .85; max-width: 62ch; }
.top { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 14px clamp(16px, 4vw, 40px); background: linear-gradient(#0b1f19f0, #0b1f1900); }
.brand { font-family: var(--display); font-size: 1.45rem; color: var(--parch); text-decoration: none; }
.brand span { color: var(--amber); }
.top nav { display: flex; gap: 18px; align-items: center; font-family: var(--mono); font-size: .8rem; }
.top nav a { color: var(--parch); text-decoration: none; opacity: .85; }
@media (max-width: 640px) { .top nav a { display: none; } }

.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.hero-fig { position: absolute; inset: 0; margin: 0; }
.hero-fig img { width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 35%, #0b1f19e6 80%, var(--dw-bg)); }
.hero-copy { position: relative; z-index: 2; max-width: 760px; padding: 0 clamp(16px, 5vw, 64px) clamp(40px, 8vh, 90px); }
.kicker { font-family: var(--mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin: 0 0 .8rem; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); text-shadow: 0 4px 30px #000; }
.lede { max-width: 56ch; text-shadow: 0 2px 10px #000; }
.btn { display: inline-block; font-family: var(--mono); font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--parch); background: transparent; border: 1px solid var(--parch); padding: .8em 1.3em; border-radius: 3px; cursor: pointer; }
.btn:hover { background: var(--parch); color: var(--dw-bg); }
.btn-hot { background: var(--amber); border-color: var(--amber); color: #21160a; }
.hs { position: absolute; z-index: 1; transform: translate(-50%, -50%); width: 7%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed transparent; background: transparent; transition: border-color .3s, background .3s; }
.hs:hover, .hs:focus-visible { border-color: var(--amber); background: #e3a8572a; }
.hs.is-found { border-color: #e3a85766; }
.hs-octo { left: 37.5%; top: 38%; width: 9%; } .hs-orrery { left: 55%; top: 24%; width: 9%; } .hs-nautilus { left: 14%; top: 27%; width: 9%; } .hs-fly { left: 8.3%; top: 72%; }
.hs-tusk { left: 40.5%; top: 76.5%; } .hs-skull { left: 68.5%; top: 77%; width: 6%; } .hs-glass { left: 93%; top: 69%; width: 6%; }
@media (max-width: 760px) { .hs-fly, .hs-glass, .hs-tusk, .hs-skull, .hs-nautilus { display: none; } .hero-fig img { object-position: 46% 50%; } .hs-octo { left: 13%; width: 18%; } .hs-orrery { left: 81%; width: 18%; } }

.today { padding: clamp(56px, 8vw, 100px) clamp(16px, 5vw, 64px); max-width: 980px; margin: 0 auto; }
.label { position: relative; background: var(--parch); color: #2b2215; padding: clamp(22px, 4vw, 40px); margin-top: 1.4rem; border-radius: 2px;
  box-shadow: 0 30px 60px #0008, inset 0 0 0 1px #6b5532, inset 0 0 0 6px var(--parch), inset 0 0 0 7px #6b553299; }
.label.pop { animation: pop .45s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) rotate(-.5deg); } }
.cat { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #8a3b1e; margin: 0 0 .7rem; }
.label h3 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.15; }
.deeper { font-size: 1.1rem; line-height: 1.6; border-top: 1px dashed #6b5532; padding-top: .9rem; }
.label-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1rem; }
.label .btn { color: #2b2215; border-color: #2b2215; }
.label .btn:hover { background: #2b2215; color: var(--parch); }
.label .btn-hot { background: #8a3b1e; border-color: #8a3b1e; color: #fff4e2; }
.depth { display: flex; align-items: center; gap: 12px; margin-top: 1.4rem; font-family: var(--mono); font-size: .82rem; flex-wrap: wrap; }
.meter { flex: 1 1 160px; height: 10px; border: 1px solid var(--amber); border-radius: 999px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 4%; background: linear-gradient(90deg, var(--amber), #c0532e); transition: width .5s ease; }
.depth b { color: var(--amber); }
.ghost-secret { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

.shelf { padding: clamp(40px, 6vw, 80px) clamp(16px, 5vw, 64px); max-width: 980px; margin: 0 auto; }
.topics { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.topics li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); background: var(--emerald); border-radius: 4px; }
.topics .t { font-family: var(--display); font-size: 1.15rem; }
.vote { flex: none; font-family: var(--mono); font-size: .78rem; padding: .5em .9em; border-radius: 999px; border: 1px solid var(--amber); background: transparent; color: var(--parch); cursor: pointer; }
.vote[aria-pressed="true"] { background: var(--amber); color: #21160a; }
.your-votes { font-family: var(--mono); font-size: .85rem; color: var(--amber); min-height: 1.4em; }

.list { padding: clamp(48px, 7vw, 90px) clamp(16px, 5vw, 64px); background: #071511; border-top: 1px solid var(--line); }
.list-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) { .list-grid { grid-template-columns: 1fr; } }
.card { border: 1px solid var(--line); padding: clamp(18px, 3vw, 28px); background: var(--emerald); border-radius: 4px; }
.card h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.dw-optin button[type=submit] { background: var(--amber); color: #21160a; font-family: var(--mono); }
.offer-note { margin: 0; color: var(--amber); font-family: var(--mono); font-size: .85rem; }
.offers { display: grid; gap: 10px; }
.offer { display: grid; gap: .2rem; text-align: left; font: inherit; color: var(--parch); background: #071511; border: 1px solid var(--line); border-radius: 4px; padding: .9em 1em; cursor: pointer; }
.offer:hover, .offer:focus-visible { border-color: var(--amber); }
.offer small { opacity: .75; }
.found { margin-top: 1.6rem; font-family: var(--mono); font-size: .85rem; color: var(--amber); }
.reward { padding: .8rem 1rem; border: 1px dashed var(--amber); }
.journal li { margin: .5em 0; font-size: .95rem; }
.foot { padding: 30px 16px 10px; text-align: center; border-top: 1px solid var(--line); }
.more { font-family: var(--mono); font-size: .82rem; }
.tittle { cursor: pointer; font-family: var(--display); font-size: 1.1rem; padding: 0 .3em; }