/* =====================================================================
   HUSH PC CLUB — the softest computer club in town.
   Layout schema: A — boxed-1200  |  Spacing scale: airy (128 / 72, 64 mobile)
   Soft minimalism: warm greys, sage accent, no borders, no shadows,
   depth built from three tone steps only.
   ===================================================================== */

:root {
  /* colour */
  --c-bg:      #f3f1ee;   /* warm grey, main light */
  --c-bg-dark: #2a2723;   /* dark, used once */
  --c-ink:     #2a2723;   /* text on light */
  --c-ink-inv: #f3f1ee;   /* text on dark */
  --c-a1:      #94a389;   /* sage accent, muted */
  --c-a1-soft: #b6c0ad;

  /* three tone steps of grey (depth without borders) */
  --tone-1: #f3f1ee;
  --tone-2: #eae7e2;
  --tone-3: #ded9d1;
  --tone-ink-2: #35322d;  /* tone step within the dark section */

  /* type */
  --f-display: "Onest", system-ui, sans-serif;
  --f-body: "Assistant", system-ui, sans-serif;

  /* radius */
  --r-card: 24px;

  /* spacing — 8px step */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 64px;

  /* airy vertical rhythm */
  --sec-y: 128px;
  --blk-y: 72px;

  /* container */
  --w-container: 1200px;
}

@media (max-width: 768px) {
  :root { --sec-y: 64px; --blk-y: 40px; }
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.12; margin: 0; }

/* ---- container ---- */
.container {
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: 32px;
}
@media (max-width: 480px) { .container { padding-inline: 16px; } }

/* ---- utilities ---- */
.u-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-ink); color: var(--c-ink-inv);
  padding: var(--s-2) var(--s-3); border-radius: 0 0 var(--r-card) 0; z-index: 100;
}
.u-skip:focus { left: 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tone-2 { background: var(--tone-2); }
.tone-3 { background: var(--tone-3); }

/* ---- type scale ---- */
h1 { font-size: clamp(36px, 5.5vw, 74px); letter-spacing: -0.01em; }
h2 { font-size: clamp(26px, 4vw, 46px); letter-spacing: -0.01em; }
h3 { font-size: 20px; font-weight: 600; }
.eyebrow {
  font-family: var(--f-body); font-weight: 600; font-size: 14px;
  letter-spacing: 0.04em; color: var(--c-a1); margin: 0 0 var(--s-2);
}
.lead { font-size: 19px; line-height: 1.65; max-width: 46ch; }
p { margin: 0 0 var(--s-2); }

/* =====================================================================
   LOGO LOCKUP
   ===================================================================== */
.logo { display: inline-flex; flex-direction: column; line-height: 1; }
.logo__mark {
  font-family: var(--f-display); font-weight: 600; font-size: 22px;
  letter-spacing: 0.02em; position: relative;
}
.logo__dot {
  position: absolute; top: -3px; left: 0.72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-a1);
}
.logo__sub {
  font-family: var(--f-body); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.22em; color: var(--c-a1); margin-top: 3px;
}

/* =====================================================================
   NAV — pill
   ===================================================================== */
.nav {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 50;
}
.nav__inner {
  display: flex; align-items: center; gap: var(--s-4);
  background: rgba(243,241,238,0.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: 10px 12px 10px 22px;
  max-width: 1080px;
}
.nav.is-scrolled .nav__inner { background: rgba(234,231,226,0.9); }
.nav__logo { display: flex; align-items: center; gap: var(--s-3); }
.nav__badge {
  font-size: 12px; font-weight: 600; color: var(--c-ink);
  background: var(--tone-3); padding: 5px 12px; border-radius: 999px;
  white-space: nowrap;
}
.nav__links { display: flex; gap: var(--s-3); margin-left: auto; }
.nav__links a {
  font-weight: 500; font-size: 15px; color: var(--c-ink);
  padding: 6px 4px; transition: color 240ms ease;
}
.nav__links a:hover, .nav__links a.is-active { color: var(--c-a1); }
.nav__cta { margin-left: var(--s-2); }

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__inner { gap: var(--s-2); padding-left: 16px; }
}

/* =====================================================================
   BUTTONS — soft pills
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-body); font-weight: 600; font-size: 15px;
  padding: 12px 24px; border-radius: 999px; border: none; cursor: pointer;
  transition: background-color 260ms ease, color 260ms ease;
}
.btn--primary { background: var(--c-a1); color: #23261f; }
.btn--primary:hover { background: #7e8d73; }         /* tone deeper, no motion */
.btn--ghost { background: var(--tone-3); color: var(--c-ink); }
.btn--ghost:hover { background: var(--tone-2); }

/* =====================================================================
   HERO
   ===================================================================== */
.s-hero {
  padding-top: 148px;
  padding-bottom: var(--sec-y);
}
.s-hero__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6);
  align-items: center;
}
.s-hero__actions { display: flex; gap: var(--s-2); margin-top: var(--s-4); flex-wrap: wrap; }
.s-hero__media img {
  border-radius: var(--r-card);
  filter: saturate(0.92) contrast(0.98);
  width: 100%;
}
@media (max-width: 768px) {
  .s-hero { padding-top: 110px; }
  .s-hero__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .s-hero__media { order: -1; }
}

/* =====================================================================
   SECTION SHELL
   ===================================================================== */
.s-block { padding-block: var(--sec-y); }
.s-head { max-width: 62ch; margin-bottom: var(--blk-y); }
.s-head h2 { margin-bottom: var(--s-3); }
.s-intro { font-size: 18px; color: #4a463f; margin: 0; }
.s-note { color: #4a463f; margin-bottom: var(--s-5); max-width: 60ch; }

/* tone-stepped section separation, no lines */
.s-stations { background: var(--tone-1); }
.s-hush { background: var(--tone-2); }
.s-pods { background: var(--tone-1); }
.s-games { background: var(--tone-2); }
.s-log { background: var(--tone-1); }
.s-gallery { background: var(--tone-2); }
.s-faq { background: var(--tone-1); }
.s-book { background: var(--tone-2); }

/* =====================================================================
   GRIDS + CARDS
   ===================================================================== */
.grid { display: grid; gap: var(--s-4); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.card {
  border-radius: var(--r-card);
  padding: var(--s-4);
}
.card h3 { margin-bottom: var(--s-2); }
.card p { color: #4a463f; margin-bottom: var(--s-3); }
.card__media { margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-4); }
.card__media img {
  border-radius: var(--r-card) var(--r-card) 0 0;
  filter: saturate(0.92) contrast(0.98); width: 100%;
}
.card__glyph {
  width: 56px; height: 56px; border-radius: 18px;
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 600; font-size: 24px;
  color: var(--c-ink); margin-bottom: var(--s-3);
}
.spec { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.spec li {
  font-size: 13px; font-weight: 500; color: #4a463f;
  background: var(--tone-3); padding: 4px 12px; border-radius: 999px;
}

/* =====================================================================
   HUSH INDEX
   ===================================================================== */
.s-hush__grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-6);
  align-items: start;
}
.s-hush p { color: #4a463f; }
.hush-board {
  border-radius: var(--r-card); padding: var(--s-5); text-align: center;
  background: var(--tone-3);
}
.hush-board__label { font-size: 13px; letter-spacing: 0.06em; color: #6b665d; margin: 0 0 var(--s-2); text-transform: lowercase; }
.hush-board__num {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(72px, 12vw, 120px); line-height: 1; color: var(--c-ink);
  margin: 0; display: inline-flex; align-items: baseline; gap: 8px;
}
#dbValue { display: inline-block; transition: opacity 500ms ease; }
#dbValue.is-fading { opacity: 0; }
.hush-board__unit { font-size: 0.28em; color: var(--c-a1); font-weight: 600; }
.hush-board__now { font-size: 14px; color: var(--c-a1); letter-spacing: 0.14em; margin: var(--s-1) 0 var(--s-4); }
.hush-board__media img { border-radius: 18px; filter: saturate(0.92); width: 100%; }

@media (max-width: 768px) { .s-hush__grid { grid-template-columns: 1fr; gap: var(--s-5); } }

/* =====================================================================
   HARDWARE — the single dark section
   ===================================================================== */
.s-hardware.is-dark {
  background: var(--c-bg-dark); color: var(--c-ink-inv);
}
.s-hardware .s-intro { color: #cfc9bf; }
.chip {
  background: var(--tone-ink-2); border-radius: var(--r-card); padding: var(--s-4);
}
.chip h3 { margin-bottom: var(--s-2); color: var(--c-ink-inv); }
.chip p { color: #cfc9bf; margin: 0; }

/* =====================================================================
   GAMES
   ===================================================================== */
#games-h .accent { color: var(--c-a1); }
.s-copy { max-width: 62ch; margin: 0 auto var(--s-5); }
.s-copy p { color: #4a463f; margin: 0 0 var(--s-2); }
.s-copy p:last-child { margin-bottom: 0; }
.genres {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3);
}
.genres li { border-radius: var(--r-card); padding: var(--s-3) var(--s-4); }
.genres__head {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-1);
}
.genres__icon {
  flex: 0 0 auto; width: 24px; height: 24px; color: var(--c-a1);
  transition: color .25s ease;
}
.genres li:hover .genres__icon { color: var(--c-ink); }
.genres__tag {
  display: inline-block; font-family: var(--f-display); font-weight: 600;
  font-size: 16px;
}
.genres p { font-size: 14.5px; color: #4a463f; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .genres__icon { transition: none; }
}
@media (max-width: 1024px) { .genres { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .genres { grid-template-columns: 1fr; } }

/* =====================================================================
   SOFT LOG
   ===================================================================== */
.note { border-radius: var(--r-card); padding: var(--s-4); }
.note h3 { margin-bottom: var(--s-2); }
.note p { color: #4a463f; margin: 0; font-size: 15.5px; }

/* =====================================================================
   GALLERY
   ===================================================================== */
.shot { margin: 0; position: relative; }
.shot img { border-radius: var(--r-card); filter: saturate(0.9) contrast(0.98); width: 100%; }
.shot figcaption {
  margin-top: var(--s-2); font-size: 14px; font-weight: 500; color: #6b665d;
}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq { display: flex; flex-direction: column; gap: var(--s-2); max-width: 820px; }
.faq__item { border-radius: var(--r-card); padding: var(--s-3) var(--s-4); }
.faq__item summary {
  font-family: var(--f-display); font-weight: 600; font-size: 18px;
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; width: 12px; height: 12px; flex: none;
  border-right: 2px solid var(--c-a1); border-bottom: 2px solid var(--c-a1);
  transform: rotate(45deg); transition: transform 300ms ease;
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__item p { color: #4a463f; margin: var(--s-3) 0 0; }

/* =====================================================================
   BOOK FORM
   ===================================================================== */
.s-book__grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s-6); align-items: start;
}
.s-book p { color: #4a463f; }
.s-book__hours { font-size: 14.5px; color: #6b665d; }
.form {
  border-radius: var(--r-card); padding: var(--s-5);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3);
  background: var(--tone-3);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field:nth-child(1), .field:nth-child(2) { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: #4a463f; }
.form input, .form select {
  font-family: var(--f-body); font-size: 15.5px; color: var(--c-ink);
  background: var(--c-bg); border: none; border-radius: 14px;
  padding: 12px 14px; width: 100%;
  transition: background-color 260ms ease, box-shadow 260ms ease;
}
.form input::placeholder { color: #9a958b; }
.form input:focus, .form select:focus {
  outline: none; background: #fbfaf8;
  box-shadow: 0 0 0 3px rgba(148,163,137,0.28);   /* sage glow-tone, no ring */
}
.form__submit { grid-column: 1 / -1; margin-top: var(--s-1); }
.form__submit.is-booked { background: var(--c-a1-soft); }
.form__status { grid-column: 1 / -1; margin: 0; font-size: 14.5px; min-height: 1.2em; }
.form__status.success { color: #5f7355; }
.form__status.error { color: #a5624f; }

@media (max-width: 768px) {
  .s-book__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .form { grid-template-columns: 1fr; }
  .field:nth-child(1), .field:nth-child(2) { grid-column: auto; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { background: var(--c-bg-dark); color: var(--c-ink-inv); padding-block: var(--sec-y); }
.footer .logo__mark { color: var(--c-ink-inv); }
.footer__top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-5);
  padding-bottom: var(--s-5);
}
.footer__slogan { color: #cfc9bf; margin: var(--s-3) 0 0; font-size: 15px; }
.footer__links { display: flex; flex-direction: column; gap: var(--s-1); }
.footer__links a { color: #d6d1c7; font-size: 15px; transition: color 240ms ease; }
.footer__links a:hover { color: var(--c-a1-soft); }
.footer__hours h3 { color: var(--c-ink-inv); margin-bottom: var(--s-2); font-size: 15px; }
.footer__hours p { color: #cfc9bf; font-size: 14.5px; margin: 0 0 4px; }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-2);
  border-top: 1px solid var(--tone-ink-2); padding-top: var(--s-4);
}
.footer__disclaimer { color: var(--c-a1-soft); font-weight: 600; margin: 0; }
.footer__copy { color: #9a958b; margin: 0; font-size: 14px; }
.logo--footer { margin-bottom: 0; }
@media (max-width: 768px) { .footer__top { grid-template-columns: 1fr; gap: var(--s-4); } }

/* =====================================================================
   LEGAL PAGES (narrow column, same tokens)
   ===================================================================== */
.legal { padding: 140px 0 var(--sec-y); }
.legal .container { max-width: 720px; }
.legal h1 { font-size: clamp(30px, 4.5vw, 48px); margin-bottom: var(--s-2); }
.legal .eyebrow { margin-bottom: var(--s-4); }
.legal h2 { font-size: 24px; margin: var(--s-6) 0 var(--s-2); }
.legal p { color: #4a463f; margin-bottom: var(--s-3); }
.legal__back { display: inline-block; margin-bottom: var(--s-5); color: var(--c-a1); font-weight: 600; }

/* =====================================================================
   MOTION — Soft Rise + scroll reveal
   ===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* signature hero "Soft Rise": longer, softest in the set */
.s-hero .reveal { transition-duration: 900ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  #dbValue { transition: none !important; }
}

/* pages added */
.footer__address{font-style:normal;text-align:center;max-width:64ch;margin:1.75rem auto 0;
  padding-top:1.25rem;border-top:1px solid currentColor;line-height:1.6;font-size:.82rem;opacity:.75}
.footer__address strong{display:block;margin-bottom:.35rem;letter-spacing:.02em;opacity:.95}
.footer__address a{color:inherit;text-decoration:underline}
.legal__nav{display:flex;flex-wrap:wrap;gap:.6rem 1.15rem;margin:2.75rem 0 0;padding-top:1.4rem;
  border-top:1px solid currentColor;font-size:.9rem;line-height:1.4}
.legal__nav a{color:inherit;text-decoration:underline;opacity:.85}
.legal__nav a:hover{opacity:1}

/* prices added */
.s-book__price{margin-top:.75rem;font-size:.95rem;line-height:1.6}.s-book__price strong{font-weight:600}

/* two-up station cards (added) */
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) { .grid--2 { grid-template-columns: 1fr; } }

/* legal2 */
.lg__kicker{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin:0 0 .4rem}
.lg__lead{font-size:1.18rem;line-height:1.6;max-width:60ch;margin:0 0 2.4rem}
.lg h2,.lg h3{line-height:1.25}
.lg p{line-height:1.65;max-width:66ch}
/* list */
.lg--list .lg-list__sec{margin:0 0 2rem}
.lg--list h2{display:flex;align-items:baseline;gap:.6rem;font-size:1.25rem;margin:0 0 .8rem}
.lg-list__n{font-size:.8rem;opacity:.5;font-variant-numeric:tabular-nums}
.lg-list__ul{list-style:none;padding:0;margin:0;border-top:1px solid currentColor}
.lg-list__ul li{padding:.7rem 0 .7rem 1.4rem;border-bottom:1px solid;border-color:color-mix(in srgb,currentColor 18%,transparent);position:relative;line-height:1.6}
.lg-list__ul li::before{content:"";position:absolute;left:0;top:1.05rem;width:.5rem;height:.5rem;border:1px solid currentColor}
/* tiles */
.lg-tiles__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.lg-tile{border:1px solid currentColor;padding:1.25rem 1.35rem}
.lg-tile h3{margin:0 0 .6rem;font-size:1.08rem}
.lg-tile p{margin:.5rem 0;font-size:.95rem}
@media(max-width:640px){.lg-tiles__grid{grid-template-columns:1fr}}
/* cards */
.lg--cards{display:flex;flex-direction:column;gap:1rem}
.lg-card{display:flex;gap:1.1rem;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-left:3px solid currentColor;padding:1.1rem 1.25rem}
.lg-card__badge{flex:0 0 auto;font-weight:700;font-size:.85rem;opacity:.6;padding-top:.15rem;white-space:nowrap}
.lg-card__body h3{margin:0 0 .5rem;font-size:1.1rem}
.lg-card__body p{margin:.4rem 0}
/* rules */
.lg--rules .lg-rule{padding:1.4rem 0;border-top:1px solid currentColor}
.lg--rules .lg-rule:first-child{border-top:2px solid currentColor}
.lg--rules h2{font-size:1.2rem;margin:0 0 .7rem;padding-left:1rem;border-left:4px solid currentColor}
.lg--rules p{margin:.5rem 0 .5rem 1rem}
/* panels */
.lg--panels{display:flex;flex-direction:column;gap:.6rem}
.lg-panel{display:flex;gap:1.4rem;align-items:flex-start;padding:1.5rem;background:color-mix(in srgb,currentColor 5%,transparent)}
.lg-panel__num{font-size:2.4rem;font-weight:800;line-height:1;opacity:.28;font-variant-numeric:tabular-nums}
.lg-panel__body h2{margin:0 0 .6rem;font-size:1.2rem}
.lg-panel__body p{margin:.45rem 0}
@media(max-width:560px){.lg-panel{flex-direction:column;gap:.5rem}}
/* def */
.lg--def .lg-def__row{display:grid;grid-template-columns:1fr 2fr;gap:1.5rem;padding:1.5rem 0;border-top:1px solid currentColor}
.lg--def h2{position:sticky;top:1rem;font-size:1.15rem;margin:0}
.lg--def .lg-def__desc p{margin:.4rem 0}
@media(max-width:640px){.lg--def .lg-def__row{grid-template-columns:1fr;gap:.5rem}.lg--def h2{position:static}}