:root {
  color-scheme: dark;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #10131b;
  color: #e8e6df;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; }
main { overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: #add8ed; text-underline-offset: .22em; }
a:hover { color: #fff1c9; }
:focus-visible { outline: 3px solid #f5c46b; outline-offset: 4px; }
::selection { color: #10131b; background: #f5c46b; }

.wrap { width: min(100% - 3rem, 1200px); margin-inline: auto; }
.skip-link { position: absolute; z-index: 10; top: -5rem; left: 1rem; padding: .7rem 1rem; color: #10131b; background: #f5c46b; }
.skip-link:focus { top: 1rem; }
.masthead { position: relative; z-index: 2; border-bottom: 1px solid #303340; background: #10131b; }
.header-inner { min-height: 83px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { color: #fff1d7; font-size: 1.15rem; font-weight: 900; letter-spacing: .13em; text-decoration: none; white-space: nowrap; }
.brand:hover { color: #fff1d7; }
.brand-mark { display: inline-block; margin-right: .2rem; color: #f5c46b; font-size: 1.2em; transform: rotate(-8deg); }
.brand-dot { color: #f5c46b; }
nav { display: flex; flex-wrap: wrap; gap: .55rem 1.4rem; }
nav a { color: #bcc1ca; font-size: .82rem; font-weight: 700; text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { color: #f5c46b; }
nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .5em; }

.eyebrow { margin: 0 0 1.05rem; color: #f5c46b; font-size: .72rem; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
h1, h2, h3 { color: #fff4e1; font-weight: 800; line-height: 1.08; letter-spacing: -.045em; }
h1 { margin: 0; font-size: clamp(3rem, 7.5vw, 6.8rem); }
h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.7rem); }
h3 { margin: 0; font-size: 1.35rem; }
p, li { line-height: 1.65; }
p { margin: .65rem 0 1rem; }
.lead { max-width: 61ch; color: #c3c7ce; font-size: clamp(1.08rem, 1.6vw, 1.28rem); line-height: 1.65; }
.address { overflow-wrap: anywhere; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 3rem; padding: .83rem 1.2rem; border: 1px solid #f5c46b; border-radius: 3px; color: #15161b; background: #f5c46b; font-size: .88rem; font-weight: 800; text-decoration: none; }
.button:hover { color: #15161b; background: #ffe0a2; border-color: #ffe0a2; }
.text-link { color: #e8e6df; font-size: .88rem; font-weight: 700; text-decoration: none; }
.text-link:hover { color: #f5c46b; }

.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr); align-items: center; gap: 2rem; min-height: 640px; padding-block: 5.5rem 6rem; }
.hero-copy { position: relative; z-index: 1; }
.hero h1 { max-width: 11ch; }
.hero h1 em { color: #f5c46b; font-style: normal; }
.hero .lead { max-width: 51ch; margin: 1.7rem 0 1.8rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.7rem; }
.hero-note { margin-top: 2rem; color: #aeb5be; font-size: .79rem; letter-spacing: .04em; }
.status-light { display: inline-block; width: .55rem; height: .55rem; margin-right: .45rem; border-radius: 50%; background: #ed9a6c; box-shadow: 0 0 0 .28rem #ed9a6c20; }
.hero-art { position: relative; width: min(100%, 490px); height: 420px; margin-inline: auto; isolation: isolate; }
.hero-art::before { content: ""; position: absolute; z-index: -1; inset: 8% 2%; border: 1px solid #454451; border-radius: 50%; transform: rotate(-22deg); }
.hero-art::after { content: ""; position: absolute; z-index: -2; inset: 13%; border-radius: 50%; background: #a84d4423; filter: blur(35px); }
.stack-card { position: absolute; width: 73%; padding: .55rem; border: 1px solid #585663; border-radius: 5px; background: #252532; box-shadow: 0 20px 30px #0008; }
.stack-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; image-rendering: pixelated; }
.stack-card-back { top: 1%; left: 22%; transform: rotate(13deg); }
.stack-card-mid { top: 9%; left: 6%; transform: rotate(-10deg); }
.stack-card-front { top: 23%; left: 13%; transform: rotate(2deg); background: #f5c46b; border-color: #fff2c7; }
.stack-card-front span { display: flex; justify-content: space-between; padding: .7rem .3rem .15rem; color: #181822; font-size: .88rem; font-weight: 900; letter-spacing: .12em; }
.stack-card-front small { font-size: .72rem; }
.orbit-label { position: absolute; z-index: 1; color: #f5c46b; font-size: .62rem; font-weight: 900; letter-spacing: .2em; }
.orbit-label-one { top: 7%; left: -2%; transform: rotate(-14deg); }
.orbit-label-two { right: -2%; bottom: 12%; transform: rotate(18deg); }
.signal-band { border-block: 1px solid #453b38; background: #221e23; }
.signal-band .wrap { min-height: 60px; display: flex; align-items: center; justify-content: space-around; gap: 1rem; color: #eac990; font-size: .69rem; font-weight: 800; letter-spacing: .22em; text-align: center; }

.section-block { padding-block: 6rem 7rem; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.4rem; }
.section-head h2 { max-width: 15ch; }
.section-head > p { max-width: 36ch; margin-bottom: .25rem; color: #bec2ca; }
.tape-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem; }
.tape-card { overflow: hidden; border: 1px solid #363844; background: #1b202a; transition: border-color .2s ease, transform .2s ease; }
.tape-card:hover { border-color: #8d8285; transform: translateY(-3px); }
.cover { padding: .65rem .65rem 0; background: var(--cover-bg, #29323b); }
.cover img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; image-rendering: pixelated; }
.cover img.detailed, .stack-card img.detailed { image-rendering: auto; }
.tape-info { padding: 1.1rem 1.05rem 1.4rem; }
.tape-info h3 { font-size: 1.15rem; }
.tape-info p { margin-bottom: 0; color: #c0c5cd; font-size: .9rem; }
.tape-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin: 0 0 .8rem !important; color: #f0c681 !important; font-size: .7rem !important; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.channel { --cover-bg: #583a3a; }
.homeroom { --cover-bg: #31463d; }
.silt { --cover-bg: #594a35; }
.marigold { --cover-bg: #4f3c45; }
.think-tank { --cover-bg: #294754; }
.low-places { --cover-bg: #3d4448; }
.driftless { --cover-bg: #26304a; }
.porchlight { --cover-bg: #5a4030; }
.bellwether { --cover-bg: #4a3c52; }
.kermis { --cover-bg: #5b4426; }

.feature-section { padding-block: 5rem 5.4rem; border-block: 1px solid #303340; background: #191d27; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.feature-grid h2 { max-width: 15ch; }
.feature-list > div { display: grid; grid-template-columns: 2.5rem 1fr; gap: .8rem; padding: 1.1rem 0; border-top: 1px solid #43434c; }
.feature-list > div:last-child { border-bottom: 1px solid #43434c; }
.feature-list p { margin: 0; color: #d3d3d4; }
.feature-number { color: #f5c46b; font-size: .75rem; font-weight: 800; letter-spacing: .1em; }
.closing { max-width: 760px; padding-block: 6.5rem 7rem; text-align: center; }
.closing h2 { max-width: 18ch; margin-inline: auto; }
.closing p:not(.eyebrow) { max-width: 53ch; margin: 1.2rem auto 1.5rem; color: #c3c7ce; }

.content-page { width: min(100% - 3rem, 820px); padding-block: 5rem 7rem; }
.content-page h1 { max-width: 14ch; font-size: clamp(2.8rem, 7vw, 4.9rem); }
.content-page .lead { margin: 1.4rem 0 1.8rem; }
.panel { margin-top: 2.3rem; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid #4b4b52; border-left: 4px solid #f5c46b; background: #20242e; }
.panel h2 { font-size: 1.55rem; }
.panel p:last-child { margin-bottom: 0; }
.content-page section { margin-top: 3rem; }
.content-page section > h2 { margin-bottom: .9rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.faq article { padding: 1.3rem; border: 1px solid #383b46; background: #1a1e27; }
.faq h3 { font-size: 1rem; }
.faq p { margin-bottom: 0; color: #c3c7ce; }
.policy section { padding-top: 1.8rem; border-top: 1px solid #3a3c47; }
.policy ul { padding-left: 1.4rem; }
.policy li + li { margin-top: .5rem; }
.updated { margin-top: 2rem; color: #afb5bf; font-size: .8rem; }

footer { padding-block: 2.4rem 3rem; border-top: 1px solid #303340; background: #0d1017; }
.footer-inner { display: flex; justify-content: space-between; gap: 1.5rem; }
footer .brand { font-size: 1rem; }
footer p { margin: .45rem 0 0; color: #aeb4be; font-size: .82rem; }
footer nav { align-content: start; }

@media (max-width: 1100px) {
  .tape-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr 340px; }
  .hero-art { height: 340px; }
  .tape-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .header-inner { align-items: flex-start; flex-direction: column; justify-content: center; gap: .8rem; padding-block: 1.2rem; }
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 1rem; padding-block: 4.5rem 3rem; }
  .hero-art { width: min(100% - 2rem, 430px); height: 355px; }
  .section-head, .footer-inner { flex-direction: column; align-items: flex-start; }
  .feature-grid { grid-template-columns: 1fr; gap: 2rem; }
  .signal-band .wrap { flex-wrap: wrap; justify-content: center; padding-block: 1rem; }
}
@media (max-width: 500px) {
  .wrap, .content-page { width: min(100% - 2rem, 1200px); }
  .hero h1 { font-size: clamp(2.8rem, 12vw, 4rem); }
  .hero-art { height: 305px; }
  .tape-grid, .faq { grid-template-columns: 1fr; }
  .section-block { padding-block: 4.5rem 5rem; }
  .closing { padding-block: 5rem; }
  nav { gap: .65rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tape-card { transition: none; }
}

/* Rewind Hollow identity: readable cassette-label lettering across screen sizes. */
.brand { font-family: ui-monospace, "Courier New", monospace; letter-spacing: .055em; }
.rename-note { max-width: 42ch; margin-top: 1.5rem; color: #b7bec8; font-size: .85rem; }
.hero-note { margin-top: .8rem; }
@media (min-width: 701px) and (max-width: 900px) { .header-inner { flex-wrap: wrap; padding-block: 1rem; } }