:root {
  color-scheme: dark;
  --bg:#151817; --panel:#1d211f; --ink:#f5efe3; --muted:#bbbdb2;
  --amber:#edb46a; --line:#3b423c; --mono:ui-monospace, Consolas, monospace;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--bg); color:var(--ink); line-height:1.55 }
img { max-width:100%; display:block }
a { color:inherit; text-underline-offset:.28em }
button { font:inherit }
[hidden] { display:none!important }
:focus-visible { outline:2px solid var(--amber); outline-offset:5px }
.skip { position:absolute; top:.75rem; left:.75rem; padding:.55rem 1rem; background:var(--ink); color:var(--bg); transform:translateY(-200%); z-index:2 }
.skip:focus { transform:none }
.wrap { width:min(100% - 5rem, 76rem); margin-inline:auto }
.top { height:5.15rem; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:1rem }
.wordmark { display:inline-flex; align-items:center; gap:.55rem; font:700 .89rem var(--mono); letter-spacing:.12em; text-decoration:none; white-space:nowrap }
.wordmark span { color:var(--muted); font-size:.66rem; letter-spacing:.09em }
nav { display:flex; align-items:center; gap:clamp(.75rem,3vw,2.15rem); font-size:.9rem }
nav a { text-decoration:none }
nav a:hover,.footer a:hover { color:var(--amber) }
.nav-cta { border:1px solid var(--line); padding:.45rem .8rem; border-radius:4px }
.hero { padding-block:clamp(3.5rem,7vw,6rem) clamp(4.5rem,8vw,7rem); display:grid; grid-template-columns:1fr 1.15fr; align-items:center; gap:clamp(1.75rem,5vw,4.5rem) }
.tag,.mono { font-family:var(--mono); letter-spacing:.09em; font-size:.72rem }
.tag { display:flex; align-items:center; gap:.65rem; color:var(--amber); margin:0 0 1.25rem }
.tag span { width:1.55rem; height:1px; background:currentColor }
.tag b { font-weight:500; border:1px solid var(--line); padding:.12rem .36rem; color:var(--muted) }
h1,h2,h3,p,figure { margin:0 }
h1 { font-size:clamp(2.65rem,5.5vw,5.35rem); line-height:.98; letter-spacing:-.072em; font-weight:730 }
h1 em { color:var(--amber); font:italic 500 1.04em Georgia,serif; letter-spacing:-.076em; white-space:nowrap }
.period { color:var(--amber) }
h2 { font-size:clamp(2.2rem,4.5vw,3.7rem); line-height:1.04; letter-spacing:-.06em }
h3 { font-size:1.5rem; letter-spacing:-.035em }
.intro { color:var(--muted); max-width:29rem; margin-top:1.45rem; font-size:clamp(1rem,1.45vw,1.12rem) }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.05rem }
.text-link { color:var(--muted); font-size:.9rem }
.text-link:hover { color:var(--ink) }
.disclosure { font-size:.83rem; color:var(--muted); max-width:30rem; margin-block:1.15rem }
.link-note { color:var(--muted); font-size:.8rem; margin-top:.6rem }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:1.2rem; max-width:100%; min-height:3rem; padding:.68rem .95rem; border-radius:4px; border:1px solid transparent; background:var(--amber); color:#201a13; font-size:.91rem; font-weight:740; text-align:left; text-decoration:none; cursor:pointer }
.button:hover { background:#ffd091 }
button:disabled { opacity:.65; cursor:wait }
.monitor { border:1px solid #4c554b; background:#202622; padding:.65rem; border-radius:.55rem; box-shadow:0 20px 48px #090b0a72 }
.monitor-top,.monitor-bottom { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.25rem .25rem .65rem; color:#d0d3c6; font-size:clamp(.54rem,1.05vw,.7rem) }
.monitor-top i { display:inline-block; width:.45rem; height:.45rem; border-radius:50%; background:var(--amber); margin-right:.4rem }
.screen { position:relative; overflow:hidden; background:#596356; border-radius:3px }
.screen img { width:100%; height:auto }
.reticle { position:absolute; width:1rem; height:1rem; left:50%; top:50%; transform:translate(-50%,-50%); opacity:.58; background:linear-gradient(#fff,#fff) center/1px 100% no-repeat,linear-gradient(#fff,#fff) center/100% 1px no-repeat }
.monitor-bottom { padding:.7rem .25rem .25rem }
.frame-bars { width:35%; height:.62rem; background:repeating-linear-gradient(90deg,#7f8b79 0 1px,transparent 1px 6px); border-bottom:1px solid #616e60 }
figcaption,.note { color:var(--muted); font-size:.82rem; margin-top:.85rem }
.inventory { padding-block:2.15rem 5rem; border-top:1px solid var(--line) }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.8rem }
article { border:1px solid var(--line); border-radius:6px; background:var(--panel); overflow:hidden }
.sample { height:8.4rem; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line) }
.sample span { position:absolute; font:600 .72rem var(--mono); color:#f8e6c9 }
.movement { background:#333b34; gap:.65rem }
.movement i { flex:0 0 22%; height:62%; border:1px solid #e2aa6c; transform:skewX(-16deg); background:#3d463a url(desert-look.jpg) 60% 50%/cover }
.movement i:first-child { opacity:.35 }
.movement i:nth-child(2) { opacity:.65 }
.movement span { right:13%; font-size:1.45rem }
.overlay { background:#1d2925 url(analog-roadside.jpg) center/cover no-repeat }
.overlay span { top:13%; right:6%; background:#151817; padding:.12rem .35rem }
.grade { background:#333934; padding:1rem; gap:.35rem }
.grade i { width:29%; height:78%; border-radius:2px; background:#c09a75 url(desert-look.jpg) 84% 45%/cover no-repeat }
.grade i:first-child { filter:grayscale(1) contrast(1.22) }
.grade i:last-child { filter:sepia(.75) saturate(1.45) }
.card-copy { padding:1.18rem 1.25rem 1.4rem }
.index { color:var(--amber); margin-bottom:.45rem }
.card-copy > p:last-child { color:var(--muted); font-size:.92rem; margin-top:.33rem }
.access { border-block:1px solid var(--line); background:radial-gradient(ellipse at 80% 0%,#28332c,#1b211e 68%); padding-block:clamp(3rem,7vw,5rem) }
.access-intro { margin-top:.95rem; color:var(--muted); max-width:29rem }
.access-grid,.faq { display:grid; grid-template-columns:.95fr 1.05fr; align-items:start; gap:clamp(1.8rem,6vw,5rem) }
.steps { margin:1.3rem 0 0; padding-left:1.4rem; color:var(--muted) }
.steps li { padding-left:.35rem; margin-bottom:.72rem }
.steps li::marker { font-family:var(--mono); color:var(--amber) }
.steps strong { color:var(--ink) }
.access-panel { border:1px solid #596255; border-radius:6px; background:var(--bg); padding:clamp(1.1rem,3vw,1.85rem) }
.status { font-size:1.27rem; font-weight:660; margin-top:.55rem }
#offer p { color:var(--muted); margin-bottom:.85rem; overflow-wrap:anywhere }
#offer strong { color:var(--ink) }
.destination { color:var(--muted); font-size:.9rem; margin-bottom:.8rem; overflow-wrap:anywhere }
.quiet { border:0; padding:.45rem 0; display:block; background:transparent; color:var(--ink); text-decoration:underline; text-underline-offset:.24em; cursor:pointer }
.faq { padding-block:clamp(3.3rem,7vw,5.5rem) }
details { border-bottom:1px solid var(--line) }
details:first-child { border-top:1px solid var(--line) }
summary { cursor:pointer; display:flex; justify-content:space-between; gap:1rem; padding:.95rem 0; font-weight:650; list-style:none }
summary::-webkit-details-marker { display:none }
summary::after { content:"+"; color:var(--amber); font-family:var(--mono) }
details[open] summary::after { content:"−" }
details p { padding:0 .5rem .95rem 0; color:var(--muted) }
.footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; align-items:center; padding-block:1.3rem; color:var(--muted); font-size:.8rem }
@media (max-width: 820px) {
  .wrap { width:min(100% - 2.75rem, 43rem) }
  .hero,.access-grid,.faq { grid-template-columns:1fr }
  h1 { font-size:clamp(2.7rem,9vw,5.35rem) }
}
@media (max-width: 540px) {
  .wrap { width:calc(100% - 2rem) }
  .top { height:4.3rem }
  .wordmark span,nav a:first-child { display:none }
  .hero { padding-block:2.85rem 3.5rem }
  .cards { grid-template-columns:1fr }
  .inventory { padding-bottom:3.25rem }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation:arrive .7s ease-out both }
  .hero-figure { animation:arrive .85s .08s ease-out both }
  .screen img { animation:look-study 6s ease-out both; transform-origin:70% 42% }
  .button,.text-link { transition:background-color .22s ease,color .22s ease }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cards article { transition:translate .26s ease,border-color .26s ease }
  .cards article:hover { translate:0 -.2rem; border-color:#80715d }
}
@keyframes arrive {
  from { opacity:0; translate:0 .65rem }
  to { opacity:1; translate:0 0 }
}
@keyframes look-study {
  from { scale:1 }
  to { scale:1.035 }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto } }