:root {
  --dw-bg: #0d1420; --dw-fg: #eef0f4; --dw-accent: #ffb648; --dw-panel: rgba(13, 20, 32, .95);
  --dw-font-body: 'Work Sans', system-ui, sans-serif; --display: 'Archivo Black', Impact, sans-serif; --type: 'Courier Prime', 'Courier New', monospace;
  --manila: #ecdcae; --ink: #2a2214; --punch: #c8321e; --line: rgba(238, 240, 244, .15);
}
body { overflow-x: hidden; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1; margin: 0 0 .45em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); }
section { padding: clamp(56px, 8vw, 110px) clamp(16px, 5vw, 64px); }
button { font: inherit; }

.topbar { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 14px clamp(16px, 4vw, 40px); background: #0d1420c4; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #ffffff12; }
.brand { font-family: var(--display); font-size: 1.35rem; color: var(--dw-fg); text-decoration: none; letter-spacing: .02em; }
.brand span { background: var(--manila); color: var(--ink); padding: 0 .25em; margin-left: .15em; }
.topbar nav { display: flex; align-items: center; gap: 18px; font-size: .9rem; }
.topbar nav a { color: var(--dw-fg); text-decoration: none; opacity: .8; }
.topbar nav a:hover { opacity: 1; color: var(--dw-accent); }
@media (max-width: 640px) { .topbar nav a { display: none; } }

.hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 0; overflow: hidden; }
.hero-art { position: absolute; inset: 0; margin: 0; }
.hero-art img { width: 100%; height: 108%; object-fit: cover; object-position: 50% 40%; }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #0d1420ee 0%, #0d142099 45%, transparent 75%), linear-gradient(transparent 55%, #0d1420 100%); }
.hero-copy { position: relative; z-index: 3; max-width: 720px; padding: 110px clamp(16px, 5vw, 64px) clamp(48px, 10vh, 110px); }
.kicker { font-family: var(--type); color: var(--dw-accent); letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; margin: 0 0 1rem; }
.hero h1 { font-size: clamp(3rem, 7vw, 5.6rem); text-shadow: 0 6px 40px #000; }
.lede { font-size: clamp(1.05rem, 2vw, 1.22rem); max-width: 56ch; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4rem; }
.btn { text-decoration: none; color: var(--dw-fg); border: 2px solid var(--dw-fg); padding: .8em 1.3em; font-weight: 700; border-radius: 2px; }
.btn:hover { background: var(--dw-fg); color: var(--dw-bg); }
.btn-hot { background: var(--dw-accent); color: #1d1200; border-color: var(--dw-accent); }
.btn-hot:hover { background: #ffd08a; border-color: #ffd08a; }
.hs { position: absolute; z-index: 2; width: 8%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed transparent; background: transparent; padding: 0; transition: border-color .3s, background .3s; }
.hs:hover, .hs:focus-visible { border-color: var(--dw-accent); background: #ffb64822; }
.hs.is-found { border-color: #9be7a588; }
.hs-cup { left: 63%; top: 60%; } .hs-light { left: 58%; top: 8%; width: 10%; } .hs-cable { left: 38%; top: 70%; } .hs-street { left: 82%; top: 30%; }
@media (max-width: 700px) { .hero::after { background: linear-gradient(#0d142055 0%, #0d1420dd 55%, #0d1420 100%); } .hs { width: 14%; } .hs-light { display: none; } }

.punch { max-width: 1120px; margin: 0 auto; }
.punch-head { max-width: 760px; }
.word { background: none; border: 0; padding: 0; color: var(--dw-accent); border-bottom: 1px dotted var(--dw-accent); cursor: pointer; }
.punch-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(20px, 4vw, 48px); align-items: start; margin-top: 1.6rem; }
@media (max-width: 820px) { .punch-grid { grid-template-columns: 1fr; } }
.times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: #142033; border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.times label { display: grid; gap: 4px; font-size: .85rem; letter-spacing: .04em; }
.times em { opacity: .6; font-style: normal; }
.times input { font: inherit; font-family: var(--type); font-size: 1.1rem; padding: .5em .6em; border-radius: 6px; border: 1px solid #ffffff30; background: #0d1420; color: var(--dw-fg); color-scheme: dark; min-width: 0; }
.punch-btn { grid-column: 1 / -1; margin-top: 4px; padding: .9em; border: 0; border-radius: 6px; background: var(--punch); color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: .03em; cursor: pointer; }
.punch-btn:hover { background: #e2432d; }
.card { background: var(--manila); color: var(--ink); font-family: var(--type); border-radius: 4px; padding: 18px 20px 16px; box-shadow: 0 30px 80px #000c; transform: rotate(1deg);
  background-image: linear-gradient(transparent 0 calc(100% - 1px), #2a221418 calc(100% - 1px)); background-size: 100% 28px; }
.card.is-punched { animation: thunk .28s ease-out; }
@keyframes thunk { 0% { transform: rotate(1deg) translateY(0); } 40% { transform: rotate(1deg) translateY(6px) scale(.99); } 100% { transform: rotate(1deg); } }
.card-top { display: flex; justify-content: space-between; border-bottom: 3px double var(--ink); padding-bottom: 6px; font-size: 1.1rem; }
.card-name { font-size: .85rem; margin: 8px 0; opacity: .75; }
.card-rows { width: 100%; border-collapse: collapse; }
.card-rows th { text-align: left; font-weight: 700; font-size: .85rem; width: 42%; padding: 5px 0; border-bottom: 1px solid #2a221430; }
.card-rows td { color: var(--punch); font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; border-bottom: 1px solid #2a221430; }
.card-rows td.stamped { animation: stamp .3s ease-out both; }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.6); } 100% { opacity: .92; transform: scale(1); } }
.bars { display: flex; height: 16px; margin: 14px 0 8px; border: 1px solid var(--ink); background: #fff6; }
.bars span { display: block; height: 100%; width: 0; transition: width .6s ease; }
.b1 { background: #4b6b3a; } .b2 { background: #d98a1c; } .b3 { background: #c8321e; }
.sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.sum div { border-left: 3px solid var(--ink); padding-left: 6px; }
.sum div:nth-child(2) { border-color: #4b6b3a; } .sum div:nth-child(3) { border-color: #d98a1c; } .sum div:nth-child(4) { border-color: #c8321e; }
.sum dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.sum dd { margin: 0; font-size: 1.15rem; font-weight: 700; }
@media (max-width: 460px) { .sum { grid-template-columns: 1fr 1fr; } }
.flag { min-height: 1.4em; margin: 10px 0 0; font-size: .9rem; }
.flag b { color: var(--punch); }
.fine { font-size: .85rem; opacity: .7; max-width: 80ch; margin-top: 1.6rem; }

.poll { text-align: center; background: linear-gradient(#0d1420, #101b2c); }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; max-width: 1040px; margin: 1.4rem auto 0; }
.offers.three { max-width: 760px; }
.offer { font-size: 1.05rem; font-weight: 700; color: var(--dw-fg); background: #16233a; border: 1px solid var(--line); border-radius: 8px; padding: 1.1em; cursor: pointer; transition: border-color .2s, transform .2s; }
.offer small { font-weight: 400; font-size: .85rem; opacity: .75; }
.offer:hover, .offer:focus-visible { border-color: var(--dw-accent); transform: translateY(-2px); }
.sub { font-size: 1.3rem; margin-top: 2.4rem; }
.found { font-family: var(--type); font-size: .9rem; margin-top: 2.4rem; opacity: .8; }
.reward { max-width: 640px; margin: 1rem auto; padding: 1rem 1.2rem; border: 1px solid var(--dw-accent); border-radius: 8px; background: #ffb64814; }
.journal { max-width: 720px; margin: 1rem auto 0; text-align: left; }
.journal li { margin: .5em 0; }

.signup { display: grid; justify-items: center; text-align: center; }
.signup .dw-optin { text-align: left; width: 100%; }
.offer-note { margin: 0; color: var(--dw-accent); font-family: var(--type); }
.foot { padding: 30px 16px 10px; text-align: center; border-top: 1px solid var(--line); }
.more { font-size: .92rem; }