:root {
  --bg: #07070a;
  --bg2: #0d0d12;
  --surface: #121218;
  --hair: #24242c;
  --text: #f2ece1;
  --muted: #9a958c;
  --ember: #e09e5a;
  --ember-soft: rgba(224, 158, 90, 0.14);
  --maxw: 720px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background:
    radial-gradient(120% 90% at 78% -10%, #1a130c 0%, transparent 42%),
    var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
header.site {
  padding: 30px 0 18px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 34px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand .mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(135deg, #f0b978, #e09e5a);
  transform: rotate(45deg);
  box-shadow: 0 0 22px rgba(224, 158, 90, 0.4);
}
.brand .name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px; color: var(--text); letter-spacing: 0.3px;
}
nav.top { margin-top: 14px; display: flex; gap: 20px; flex-wrap: wrap; }
nav.top a { color: var(--muted); text-decoration: none; font-size: 14px; }
nav.top a:hover, nav.top a.active { color: var(--ember); }

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400; font-size: clamp(30px, 6vw, 44px);
  line-height: 1.1; margin-bottom: 8px; text-wrap: balance;
}
.eyebrow {
  text-transform: uppercase; letter-spacing: 2px; font-size: 12px;
  color: var(--ember); margin-bottom: 16px;
}
.updated { color: var(--muted); font-size: 13px; margin-bottom: 34px; }
h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400; font-size: 22px; margin: 38px 0 12px;
  color: var(--text);
}
p, li { color: #d9d3c8; font-size: 16px; margin-bottom: 14px; }
ul { padding-left: 22px; margin-bottom: 14px; }
li { margin-bottom: 8px; }
a { color: var(--ember); }
strong { color: var(--text); font-weight: 600; }
.lead { font-size: 18px; color: var(--text); }
.card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: 16px; padding: 22px 24px; margin: 22px 0;
}
.hero { padding: 26px 0 8px; }
.hero .tag { color: var(--muted); font-size: 17px; max-width: 34ch; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.btn {
  display: inline-block; text-decoration: none; font-size: 15px; font-weight: 600;
  padding: 12px 20px; border-radius: 999px;
}
.btn.primary { background: var(--ember); color: #201203; }
.btn.ghost { border: 1px solid var(--hair); color: var(--text); }
h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400; font-size: 18px; margin: 26px 0 8px; color: var(--text);
}
.card h3 { margin-top: 0; }
.fineprint { color: var(--muted); font-size: 14px; margin-top: 14px; }
/* Screenshot strip: scrolls sideways inside itself, never the page. */
.shots {
  display: flex; gap: 14px; margin: 34px 0 10px;
  overflow-x: auto; padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.shots img {
  width: 208px; flex: none; height: auto; scroll-snap-align: start;
  border-radius: 18px; border: 1px solid var(--hair);
  background: var(--surface);
}
.disclaimer {
  background: var(--ember-soft); border: 1px solid rgba(224,158,90,0.3);
  border-radius: 14px; padding: 16px 18px; margin: 24px 0;
}
.disclaimer p { color: var(--text); margin: 0; font-size: 15px; }
footer.site {
  margin-top: 56px; padding: 28px 0 44px;
  border-top: 1px solid var(--hair);
  color: var(--muted); font-size: 13px;
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
}
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--ember); }
footer.site .sp { flex: 1; }