/* =========================================================================
   MONO PC CLUB — styles.css
   Layout container : C — full-bleed-grid (no max-width, 12-col, 24px edge)
   Spacing scale    : regular (96px / 56px sections; 48px mobile)
   Palette          : #f7f7f5 light bg, #111111 ink + dark section, #e0301e accent
   Fonts            : Archivo 800 (display), Inter (body/ui)
   Radius 0 · borders 1px solid #111 · no shadows
   ========================================================================= */

:root {
  /* colour */
  --c-bg: #f7f7f5;
  --c-bg-dark: #111111;
  --c-ink: #111111;
  --c-ink-inv: #f7f7f5;
  --c-a1: #e0301e;          /* the only accent — the red dot */
  --c-line: #111111;
  --c-grid-line: rgba(17,17,17,0.06);

  /* type */
  --f-display: "Archivo", system-ui, Arial, sans-serif;
  --f-body: "Inter", system-ui, Arial, sans-serif;

  /* radius / border */
  --r-card: 0px;
  --bd: 1px solid var(--c-line);

  /* spacing — regular scale */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 56px;    /* inner block rhythm */
  --s-sec: 96px;  /* section vertical rhythm */

  /* layout */
  --edge: 24px;   /* full-bleed grid edge padding */
  --cols: 12;
  --gutter: 24px;
}

@media (max-width: 768px) {
  :root { --s-sec: 48px; --edge: 16px; --gutter: 16px; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; line-height: 1.02; margin: 0; }
p { margin: 0; }
ol, ul { margin: 0; }
button { font-family: inherit; }

/* ---------- utilities ---------- */
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-visually-hidden:focus {
  position: fixed; top: 8px; left: 8px; width: auto; height: auto;
  clip: auto; background: var(--c-ink); color: var(--c-ink-inv);
  padding: 8px 12px; z-index: 1000;
}

/* ---------- 12-col grid with visible lines ---------- */
.grid12 {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 0 var(--gutter);
  padding-inline: var(--edge);
  position: relative;
}
/* visible grid lines drawn once on load */
.grid12::before {
  content: "";
  position: absolute;
  inset: 0 var(--edge);
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--c-grid-line) 0,
    var(--c-grid-line) 1px,
    transparent 1px,
    transparent calc((100% - 11 * var(--gutter)) / 12 + var(--gutter))
  );
  background-size: 100% 100%;
  transform: scaleY(0);
  transform-origin: top;
  animation: gridDraw 600ms ease forwards;
}
@keyframes gridDraw { to { transform: scaleY(1); } }

.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-12 { grid-column: 1 / -1; }

@media (max-width: 768px) {
  .col-span-4, .col-span-5, .col-span-7, .col-span-8 { grid-column: 1 / -1; }
  .grid12::before { display: none; }
}

/* ---------- travelling red dot ---------- */
.reddot {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--c-a1);
  z-index: 900;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: transform 600ms cubic-bezier(.22,.61,.36,1), opacity 400ms ease;
  animation: dotPulse 4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,48,30,0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(224,48,30,0); }
}
.reddot.is-live { opacity: 1; }

/* ---------- sections ---------- */
main > section { padding-block: var(--s-sec); }
.rule { border: 0; border-top: var(--bd); margin: 0; }

.eyebrow {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
  color: var(--c-ink);
}
h1 {
  font-size: clamp(40px, 7vw, 96px);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
}
h2 {
  font-size: clamp(28px, 4.5vw, 52px);
  letter-spacing: -0.01em;
  margin-bottom: var(--s-3);
}
h3 { font-size: 20px; letter-spacing: -0.01em; }

.sec-head { margin-bottom: var(--s-5); }
.sec-head__note { max-width: 42ch; margin-top: var(--s-2); }

/* dot markers on h1 / book title */
.dot-anchor {
  display: inline-block;
  width: 0.16em; height: 0.16em;
  min-width: 10px; min-height: 10px;
  margin-left: 0.12em;
  border-radius: 50%;
  background: var(--c-a1);
  vertical-align: baseline;
}

/* ---------- logo lock-up ---------- */
.logo { display: inline-flex; flex-direction: column; line-height: 1; }
.logo__word {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.logo__dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin-left: 3px;
  border-radius: 50%;
  background: var(--c-a1);
}
.logo__sub {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.3em;
  margin-top: 4px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border: var(--bd);
  border-radius: 0;
  cursor: pointer;
  transition: none; /* swiss snap — instant invert */
}
.btn--primary { background: var(--c-ink); color: var(--c-ink-inv); }
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--c-bg); color: var(--c-ink);
}
.btn--secondary { background: transparent; color: var(--c-ink); }
.btn--secondary:hover, .btn--secondary:focus-visible {
  background: var(--c-ink); color: var(--c-ink-inv);
}
.section--dark .btn--primary { background: var(--c-ink-inv); color: var(--c-ink); }

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 800;
  background: var(--c-bg);
  border-bottom: var(--bd);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 14px var(--edge);
}
.nav__badge {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  border: var(--bd);
  padding: 4px 10px;
  white-space: nowrap;
}
.nav__links {
  display: flex;
  gap: var(--s-4);
  margin-left: auto;
}
.nav__links a {
  font-weight: 500;
  font-size: 15px;
  position: relative;
  padding-bottom: 2px;
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--c-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after { transform: scaleX(1); }
.nav__links a.is-active { padding-left: 14px; }
.nav__links a.is-active::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 7px; height: 7px; margin-top: -3px;
  border-radius: 50%;
  background: var(--c-a1);
}
.nav__cta { margin-left: 0; }

@media (max-width: 900px) {
  .nav__badge { display: none; }
}
@media (max-width: 768px) {
  .nav__inner { flex-wrap: wrap; gap: var(--s-2); }
  .nav__links { width: 100%; margin-left: 0; gap: var(--s-3); flex-wrap: wrap; order: 3; }
  .nav__cta { margin-left: auto; }
}

/* ---------- HERO ---------- */
.s-hero__inner { align-items: center; }
.hero__text { grid-column: span 6; }
.hero__media { grid-column: span 6; margin: 0; }
.hero__lead { max-width: 46ch; margin-bottom: var(--s-4); }
.hero__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.hero__media img {
  filter: grayscale(1) contrast(1.1);
  border: var(--bd);
  width: 100%;
}
figure figcaption {
  font-size: 12px;
  letter-spacing: 0.02em;
  margin-top: var(--s-1);
  color: var(--c-ink);
}
@media (max-width: 768px) {
  .hero__text, .hero__media { grid-column: 1 / -1; }
  .hero__media { order: -1; margin-bottom: var(--s-4); }
}

/* ---------- STATIONS ---------- */
.stations__list { display: flex; flex-direction: column; }
.row-card {
  border-top: var(--bd);
  padding: var(--s-4) 0;
}
.row-card h3 { margin-bottom: var(--s-2); }
.row-card__spec { max-width: 52ch; }
.row-card__meta {
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-top: var(--s-2);
  color: var(--c-ink);
}

/* ---------- ONE SHEET ---------- */
.onesheet__price { padding-right: var(--s-5); }
.price__label { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--s-2); }
.price {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(88px, 16vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: flex-end;
}
.price__dot {
  display: inline-block;
  width: 0.14em; height: 0.14em;
  min-width: 16px; min-height: 16px;
  margin-left: 0.06em; margin-bottom: 0.14em;
  border-radius: 50%;
  background: var(--c-a1);
}
.price.is-pulsed .price__dot { animation: pricePulse 700ms ease 1; }
@keyframes pricePulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.5); }
  100% { transform: scale(1); }
}
.price__unit { font-size: 14px; letter-spacing: 0.04em; margin-top: var(--s-2); }
.price__night { max-width: 40ch; margin-top: var(--s-4); border-top: var(--bd); padding-top: var(--s-3); }

.onesheet__rules { border-left: var(--bd); padding-left: var(--s-5); }
.rules { list-style: none; padding: 0; counter-reset: r; margin-top: var(--s-3); }
.rules li {
  counter-increment: r;
  padding: var(--s-2) 0;
  border-bottom: var(--bd);
  position: relative;
  padding-left: 44px;
}
.rules li::before {
  content: counter(r,decimal-leading-zero);
  position: absolute; left: 0; top: var(--s-2);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 14px;
}
.rules li:last-child { border-bottom: 0; }
.hours-head { margin-top: var(--s-5); }
.hours { margin-top: var(--s-2); }

@media (max-width: 768px) {
  .onesheet__price { padding-right: 0; margin-bottom: var(--s-5); }
  .onesheet__rules { border-left: 0; padding-left: 0; }
}

/* ---------- HARDWARE (dark) ---------- */
.section--dark {
  background: var(--c-bg-dark);
  color: var(--c-ink-inv);
  --c-line: #f7f7f5;
  --c-grid-line: rgba(247,247,245,0.08);
  --bd: 1px solid #f7f7f5;
}
.section--dark .eyebrow,
.section--dark figcaption,
.section--dark .row-card__meta { color: var(--c-ink-inv); }
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.spec-table tr { border-top: var(--bd); }
.spec-table tr:last-child { border-bottom: var(--bd); }
.spec-table th, .spec-table td { text-align: left; padding: var(--s-3) var(--s-3) var(--s-3) 0; vertical-align: top; }
.spec-table th { font-weight: 600; font-family: var(--f-body); width: 28%; }
.spec-table td:last-child { color: #cfcfcc; }

/* ---------- WHAT YOU CAN PLAY ---------- */
.play__intro { max-width: 62ch; margin-bottom: var(--s-3); }
.play__intro:last-of-type { margin-bottom: var(--s-5); }
.play__accent { color: var(--c-a1); }
.play__list { list-style: none; padding: 0; margin: 0; }
.play__list li {
  display: grid;
  grid-template-columns: 24px 12rem 1fr;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  border-top: var(--bd);
  padding: var(--s-3) 0;
}
.play__icon {
  width: 24px;
  height: 24px;
  color: var(--c-a1);
  flex: none;
}
.play__genre { font-family: var(--f-display); font-weight: 800; font-size: 18px; }
.play__desc { align-self: center; }
@media (max-width: 560px) {
  .play__list li {
    grid-template-columns: 24px 1fr;
    gap: var(--s-1) var(--s-2);
    align-items: start;
  }
  .play__genre { align-self: center; }
  .play__desc { grid-column: 2; }
}

/* ---------- BOOKING TERMS ---------- */
.terms__body > p + p { margin-top: var(--s-3); }
.terms__body p { max-width: 66ch; }

/* ---------- CHANGELOG ---------- */
.changelog__list { display: flex; flex-direction: column; }
.log-item { border-top: var(--bd); padding: var(--s-4) 0; }
.log-item h3 { margin-bottom: var(--s-2); }
.log-item p { max-width: 62ch; }

/* ---------- PLATES ---------- */
.plate { margin: 0; margin-bottom: var(--s-3); }
.plate img {
  filter: grayscale(1) contrast(1.1);
  border: var(--bd);
  width: 100%;
}
.plate__no { font-family: var(--f-display); font-weight: 800; margin-right: 8px; }
.plate--wide { margin-top: var(--s-3); }

/* ---------- FAQ ---------- */
.faq__list { display: flex; flex-direction: column; }
.faq__item { border-top: var(--bd); padding: var(--s-4) 0; }
.faq__item:last-child { border-bottom: var(--bd); }
.faq__item h3 { margin-bottom: var(--s-2); }
.faq__item p { max-width: 64ch; }

/* ---------- BOOK FORM ---------- */
.book-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-4); }
.field { display: flex; flex-direction: column; }
.field label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  margin-bottom: var(--s-1);
  position: relative; padding-left: 0;
  transition: padding-left 150ms ease;
}
.field label::before {
  content: "";
  position: absolute; left: 0; top: 50%; margin-top: -4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-a1);
  opacity: 0;
  transition: opacity 150ms ease;
}
.field.is-focus label { padding-left: 14px; }
.field.is-focus label::before { opacity: 1; }
.field input, .field select {
  font-family: var(--f-body); font-size: 16px;
  padding: 8px 0;
  border: 0; border-bottom: var(--bd);
  border-radius: 0;
  background: transparent;
  color: var(--c-ink);
  width: 100%;
}
.field input:focus, .field select:focus { outline: none; border-bottom-width: 2px; }
.field select { appearance: none; -webkit-appearance: none; }
.field--submit { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
#formStatus { font-size: 14px; }
#formStatus.success { color: var(--c-a1); font-weight: 600; }
#formStatus.error { color: var(--c-ink); font-weight: 600; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 560px) {
  .book-form { grid-template-columns: 1fr; }
}

/* ---------- FOOTER ---------- */
.footer { border-top: var(--bd); }
.footer__inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-3);
  padding: var(--s-sec) var(--edge);
}
.footer__logo .logo { align-items: center; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
.footer__links a { font-weight: 500; font-size: 15px; position: relative; }
.footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__hours { font-size: 13px; letter-spacing: 0.03em; }
.footer__disclaimer {
  font-family: var(--f-display); font-weight: 800; font-size: 18px;
  letter-spacing: -0.01em;
}
.footer__copy { font-size: 12px; letter-spacing: 0.04em; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 550ms ease, transform 550ms ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================================
   LEGAL PAGES — narrow column, flag-set left, red dot on clause numbers
   ========================================================================= */
.legal { max-width: 760px; margin-inline: auto; padding: var(--s-sec) var(--edge); }
.legal__back { display: inline-block; margin-bottom: var(--s-5); }
.legal h1 { font-size: clamp(36px, 6vw, 72px); margin-bottom: var(--s-3); }
.legal h2 { font-size: clamp(22px, 3.5vw, 32px); margin-top: var(--s-6); margin-bottom: var(--s-3); }
.legal p { max-width: 66ch; margin-bottom: var(--s-3); }
.legal .updated { font-size: 13px; letter-spacing: 0.04em; margin-bottom: var(--s-5); }
.legal ol { list-style: none; counter-reset: c; padding: 0; }
.legal ol li {
  counter-increment: c;
  position: relative;
  padding-left: 44px;
  margin-bottom: var(--s-3);
  max-width: 66ch;
}
.legal ol li::before {
  content: counter(c);
  position: absolute; left: 0; top: 0;
  font-family: var(--f-display); font-weight: 800; font-size: 15px;
}
.legal ol li::after {
  content: "";
  position: absolute; left: 22px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-a1);
}

/* =========================================================================
   REDUCED MOTION — kill all motion, keep everything functional
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .reddot { transition: none !important; animation: none !important; }
  .grid12::before { transform: scaleY(1) !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}

/* 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}}