/* =============================================================
   ONEBIT — a computer club in exactly two colors.
   Layout system: Container B (narrow-880) + spacing scale "regular"
   (96px / 56px section rhythm; 48px on mobile).
   STRICTLY TWO COLORS: paper #f4f2ec + ink #151412.
   No third hue anywhere. All states = invert / opacity / dither pattern.
   Depth = dither density, never shadow. Radius = 0. Accent = inversion.
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  /* colors — the only two (deepened ink + lifted paper for max legibility) */
  --c-bg: #f6f4ee;          /* paper */
  --c-bg-dark: #100f0d;     /* ink  */
  --c-ink: #100f0d;         /* text on paper */
  --c-ink-inv: #f6f4ee;     /* text on ink  */

  /* fonts */
  --f-display: "Space Grotesk", system-ui, sans-serif;
  --f-body: "Fragment Mono", "Courier New", monospace;

  /* radius / borders */
  --r-card: 0px;
  --bd: 1px solid currentColor;
  --bd-2: 3px double currentColor;   /* "important" = double line, not colour */

  /* spacing scale (8px step) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px; --s-6: 56px;

  /* section rhythm — "regular" */
  --sec-y: 96px;
  --block-y: 56px;

  /* container — schema B narrow-880 */
  --w-container: 960px;
  --w-bleed: 1080px;

  /* dither tile (bayer-ish) built from the two colours only */
  --dither: radial-gradient(var(--c-ink) 22%, transparent 23%);
}

/* current colour pair on paper by default */
html {
  --fg: var(--c-ink);
  --bg: var(--c-bg);
  --dither-dot: var(--c-ink);
}

/* page-wide inversion via the 0/1 toggle */
html[data-bit="1"] {
  --fg: var(--c-ink-inv);
  --bg: var(--c-bg-dark);
  --dither-dot: var(--c-ink-inv);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s steps(6), color .4s steps(6);
}
p { font-weight: 500; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.05; margin: 0 0 var(--s-3); }
h1 { font-size: clamp(38px, 6vw, 78px); letter-spacing: 1px; }
h2 { font-size: clamp(28px, 4.5vw, 48px); }
h3 { font-size: clamp(19px, 2.4vw, 24px); }
p { margin: 0 0 var(--s-3); }
ul { margin: 0 0 var(--s-3); padding-left: 1.2em; }

/* ---------- 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;
}
.container { max-width: var(--w-container); margin-inline: auto; padding-inline: var(--s-4); }
.bleed-media { max-width: var(--w-bleed); margin-inline: auto; }

/* inverse "plate" = the only accent */
.plate {
  display: inline-block;
  background: var(--fg);
  color: var(--bg);
  padding: 2px 10px;
}
.mark { background: var(--fg); color: var(--bg); padding: 0 .28em; }
.uu { text-decoration: underline; text-decoration-style: double; text-underline-offset: 3px; }

/* dither divider — variable density strip, two colours only */
.dither-strip {
  height: 26px;
  background-image:
    var(--dither),
    var(--dither);
  background-size: 8px 8px, 8px 8px;
  background-position: 0 0, 4px 4px;
  opacity: .9;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  --dither: radial-gradient(var(--dither-dot) 30%, transparent 32%);
  margin: 0 auto;
  max-width: var(--w-bleed);
}
.dither-strip--dense { background-size: 6px 6px, 6px 6px; background-position: 0 0, 3px 3px; }

/* ---------- Sections ---------- */
section { padding-block: var(--sec-y); }
.s-lead { max-width: 62ch; }
.eyebrow {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: var(--s-2);
}
.binum { font-family: var(--f-body); letter-spacing: 2px; }

/* INVERSE (ink) sections — inversion, not a new colour */
.s-ink {
  background: var(--c-bg-dark);
  color: var(--c-ink-inv);
  --fg: var(--c-ink-inv);
  --bg: var(--c-bg-dark);
  --dither-dot: var(--c-ink-inv);
}
html[data-bit="1"] .s-ink {
  background: var(--c-bg);
  color: var(--c-ink);
  --fg: var(--c-ink);
  --bg: var(--c-bg);
  --dither-dot: var(--c-ink);
}

/* ---------- Photo treatment: two-colour dither ---------- */
.photo { position: relative; overflow: hidden; border: var(--bd); }
.photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.45) brightness(1.02);
}
.photo::after {                 /* dither overlay in the two tones */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--c-bg-dark) 34%, transparent 36%);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
  opacity: .35;
}
html[data-bit="1"] .photo::after {
  background-image: radial-gradient(var(--c-bg) 34%, transparent 36%);
  mix-blend-mode: screen;
}
.photo.is-revealing img { filter: grayscale(1) contrast(2.6) brightness(.9); }
.photo.is-revealing::after { opacity: .8; }
.photo img { transition: filter .8s ease; }
.photo::after { transition: opacity .8s ease; }

.photo__cap {
  position: absolute; left: var(--s-2); bottom: var(--s-2);
  background: var(--c-bg-dark); color: var(--c-bg);
  font-size: 12px; font-weight: 700; letter-spacing: 2px; padding: 3px 8px;
}
html[data-bit="1"] .photo__cap { background: var(--c-bg); color: var(--c-bg-dark); }

/* ---------- Buttons ---------- */
.btn {
  /* --fg/--bg inherit from html (ink/paper pair) so solid buttons keep readable contrast */
  font-family: var(--f-body);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border: var(--bd);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .25s steps(4);
}
.btn > span { position: relative; z-index: 1; }
.btn::before {                 /* dither sweep on hover — halftone, no new colour */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(var(--fg) 45%, transparent 47%);
  background-size: 6px 6px;
  transform: translateX(-101%);
  transition: transform .35s ease;
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn:hover, .btn:focus-visible { color: var(--bg); }
.btn:focus-visible { outline: none; border: var(--bd-2); }
.btn--primary { border: var(--bd-2); }   /* primary differs by border WEIGHT, not colour */
.btn--solid { background: var(--fg); color: var(--bg); }
.btn--solid::before { background-image: radial-gradient(var(--bg) 45%, transparent 47%); }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--fg); }

/* ============================================================
   NAV — nav-underline-bar + 0/1 toggle
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: var(--bd);
}
.nav__inner {
  max-width: var(--w-bleed); margin-inline: auto;
  padding: 12px var(--s-4);
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.nav__logo {
  font-family: var(--f-display); font-weight: 700; font-size: 22px;
  letter-spacing: 2px; text-decoration: none; color: inherit;
}
.nav__badge {
  font-family: var(--f-body); font-size: 11px; font-weight: 700; letter-spacing: 2px;
  border: var(--bd); padding: 3px 7px; text-transform: uppercase;
  white-space: nowrap;
}
.nav__links { display: flex; gap: var(--s-3); margin-left: auto; flex-wrap: wrap; }
.nav__links a {
  position: relative; text-decoration: none; color: inherit;
  font-size: 14px; font-weight: 500; letter-spacing: 1px; padding: 4px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after,
.nav__links a.is-active::after { transform: scaleX(1); }
.nav__links a:focus-visible { outline: none; }

.nav__actions { display: flex; align-items: center; gap: var(--s-2); }
.nav__cta { font-size: 12px; padding: 9px 16px; }

/* 0/1 toggle */
.bit-toggle {
  font-family: var(--f-body); font-size: 13px; letter-spacing: 1px;
  display: inline-flex; align-items: stretch;
  border: var(--bd); background: var(--bg); color: var(--fg);
  cursor: pointer; padding: 0;
}
.bit-toggle span {
  padding: 8px 11px; display: grid; place-items: center; min-width: 30px;
}
.bit-toggle .bit-0 { border-right: var(--bd); }
.bit-toggle[aria-pressed="false"] .bit-0,
.bit-toggle[aria-pressed="true"]  .bit-1 { background: var(--fg); color: var(--bg); }
.bit-toggle:focus-visible { outline: none; border: var(--bd-2); }

/* ============================================================
   HERO — hero-centered-fullbleed + Dither Wave animation
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  min-height: clamp(560px, 86vh, 820px);
  display: grid; align-content: center;
  text-align: center;
  padding-block: var(--sec-y);
  border-bottom: var(--bd);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.6) brightness(1.05);
  opacity: .16;
}
/* Dither Wave — bayer dot field, diagonal density wave, two colours only */
.hero__wave {
  position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background-image: radial-gradient(var(--dither-dot) 30%, transparent 32%);
  background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(135deg,
      #000 0%, transparent 22%, #000 44%, transparent 66%, #000 88%, transparent 100%);
          mask-image: linear-gradient(135deg,
      #000 0%, transparent 22%, #000 44%, transparent 66%, #000 88%, transparent 100%);
  -webkit-mask-size: 260% 260%;
          mask-size: 260% 260%;
  opacity: .32;
  animation: ditherWave 14s linear infinite;
  will-change: mask-position;
}
@keyframes ditherWave {
  from { -webkit-mask-position: 0% 0%;     mask-position: 0% 0%; }
  to   { -webkit-mask-position: 260% 260%; mask-position: 260% 260%; }
}
.hero__inner { position: relative; z-index: 2; max-width: var(--w-container); margin-inline: auto; padding-inline: var(--s-4); }
.hero__badge {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  border: var(--bd); padding: 5px 12px; display: inline-block; margin-bottom: var(--s-4);
}
.hero h1 { margin-bottom: var(--s-3); }
.hero__sub { max-width: 54ch; margin: 0 auto var(--s-5); }
.hero__actions { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }

/* ============================================================
   Generic blocks
   ============================================================ */
.grid-2 { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; }
.card {
  border: var(--bd); background: var(--bg); color: var(--fg);
}
.card__head {
  background: var(--fg); color: var(--bg);
  font-family: var(--f-display); font-weight: 700; font-size: 20px;
  padding: 10px var(--s-3);
  /* "print" reveal handled by JS class .is-printed */
}
.card__body { padding: var(--s-3); }
.card__body p:last-child { margin-bottom: 0; }
.card .photo { border: none; border-bottom: var(--bd); aspect-ratio: 1 / 1; }

/* spec table */
.spec { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec td { font-weight: 500; }
.spec caption { text-align: left; margin-bottom: var(--s-2); font-family: var(--f-body); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.spec th, .spec td { border: var(--bd); padding: 10px var(--s-2); text-align: left; vertical-align: top; }
.spec th { font-family: var(--f-display); font-weight: 700; width: 34%; }
.spec tbody tr:nth-child(odd) td { background: transparent; }

/* rates */
.rates { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
.rate { border: var(--bd); padding: var(--s-3); }
.rate__no { font-family: var(--f-body); font-size: 12px; letter-spacing: 3px; }
.rate__name { font-family: var(--f-display); font-weight: 700; font-size: 21px; margin: var(--s-1) 0; }
.rate__price { font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 5vw, 46px); }
.rate__unit { font-size: 13px; letter-spacing: 1px; opacity: 1; }
.rate--feature { border: var(--bd-2); }

/* band (Why 1-bit) */
.band { position: relative; }
.band__media.photo { border: var(--bd); aspect-ratio: 1 / 1; }
.band__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-5); align-items: center; }
.lumens { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-3); }
.lumens div { border: var(--bd); padding: var(--s-2) var(--s-3); }
.lumens b { font-family: var(--f-display); font-size: 26px; display: block; }

/* changelog */
.log { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.log li { border-left: var(--bd-2); padding: var(--s-1) 0 var(--s-1) var(--s-3); }
.log h3 { margin-bottom: var(--s-1); }
.log .tag { font-family: var(--f-body); font-size: 11px; letter-spacing: 2px; border: var(--bd); padding: 1px 7px; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.gallery .photo { aspect-ratio: 1 / 1; }

/* FAQ */
.faq { display: grid; gap: 0; border: var(--bd); }
.faq details { border-bottom: var(--bd); }
.faq details:last-child { border-bottom: none; }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-3);
  display: flex; gap: var(--s-2); align-items: baseline;
  font-family: var(--f-display); font-weight: 700; font-size: 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { font-family: var(--f-body); font-size: 12px; letter-spacing: 2px; }
.faq summary:focus-visible { outline: none; background: var(--fg); color: var(--bg); }
.faq details[open] summary { border-bottom: var(--bd); }
.faq__a { padding: var(--s-3); }
.faq__a p:last-child { margin: 0; }
.faq .plus { margin-left: auto; font-family: var(--f-body); }
.faq details[open] .plus { }

/* ============================================================
   FORM — Book in binary
   ============================================================ */
.form { display: grid; gap: var(--s-3); max-width: 620px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.field input, .field select {
  font-family: var(--f-body); font-size: 15px;
  background: var(--bg); color: var(--fg);
  border: var(--bd); border-radius: 0; padding: 11px var(--s-2);
  width: 100%;
}
.field input:focus, .field select:focus { outline: none; border: var(--bd-2); }
.field input.is-invalid, .field select.is-invalid {
  border: 2px dashed currentColor;           /* error without red */
}
.field__err { font-size: 12px; letter-spacing: 1px; min-height: 1em; }
.field__err::before { content: ""; }
.field.has-error .field__err::before { content: "!! "; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#formStatus { font-size: 14px; letter-spacing: 1px; margin: 0; min-height: 1.4em; }
#formStatus.success { }
#formStatus.success::before { content: ""; }
#formStatus.error { }
#formStatus.error::before { content: "!! "; }
#formStatus.success { border-left: var(--bd-2); padding-left: var(--s-2); }
#formStatus.error { border-left: 3px dashed currentColor; padding-left: var(--s-2); }

/* ============================================================
   FOOTER — footer-minimal-centered
   ============================================================ */
.footer {
  text-align: center;
  border-top: var(--bd);
  padding-block: var(--block-y);
}
.footer__logo { font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: 2px; text-decoration: none; display: inline-block; margin-bottom: var(--s-2); }
.footer__tag { font-size: 13px; margin-bottom: var(--s-4); }
.footer__links { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--s-3); font-size: 13px; }
.footer__links a { text-decoration: none; }
.footer__links a:hover, .footer__links a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.footer__contact {
  display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap;
  font-style: normal; font-size: 13px; text-align: left;
  margin-bottom: var(--s-4);
}
.footer__contact div { border: var(--bd); padding: var(--s-2) var(--s-3); min-width: 200px; }
.footer__contact b {
  display: block; font-family: var(--f-body); font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px;
}
.footer__contact a { text-decoration: none; }
.footer__contact a:hover, .footer__contact a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.footer__hours { font-size: 13px; margin-bottom: var(--s-4); }
.footer__disclaimer {
  display: inline-block;
  border: var(--bd-2);
  padding: 10px var(--s-3);
  font-size: 13px; letter-spacing: 1px;
  margin-bottom: var(--s-3);
}
.footer__meta { font-size: 13px; opacity: 1; }

/* ============================================================
   COOKIE BANNER — fixed bottom, two colours only
   ============================================================ */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--c-bg-dark); color: var(--c-bg);
  border-top: 3px double var(--c-bg);
  padding: var(--s-3) var(--s-4);
}
html[data-bit="1"] .cookie { background: var(--c-bg); color: var(--c-bg-dark); border-top-color: var(--c-bg-dark); }
.cookie[hidden] { display: none; }
.cookie__inner {
  max-width: var(--w-bleed); margin-inline: auto;
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
}
.cookie__strip {
  width: 100%; height: 8px; margin-bottom: var(--s-2);
  background-image: radial-gradient(var(--c-bg) 30%, transparent 32%);
  background-size: 6px 6px;
}
html[data-bit="1"] .cookie__strip { background-image: radial-gradient(var(--c-bg-dark) 30%, transparent 32%); }
.cookie__text { font-size: 13px; letter-spacing: .5px; margin: 0; flex: 1 1 320px; }
.cookie__text a { color: inherit; }
.cookie__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.cookie .btn { background: transparent; color: inherit; }
.cookie .btn::before { background-image: radial-gradient(currentColor 45%, transparent 47%); }
.cookie .btn:hover, .cookie .btn:focus-visible { color: var(--c-bg-dark); }
html[data-bit="1"] .cookie .btn:hover, html[data-bit="1"] .cookie .btn:focus-visible { color: var(--c-bg); }
.cookie .btn--solid { background: var(--c-bg); color: var(--c-bg-dark); }
html[data-bit="1"] .cookie .btn--solid { background: var(--c-bg-dark); color: var(--c-bg); }
.cookie .btn--solid:hover, .cookie .btn--solid:focus-visible { color: var(--c-bg); }
html[data-bit="1"] .cookie .btn--solid:hover, html[data-bit="1"] .cookie .btn--solid:focus-visible { color: var(--c-bg-dark); }

.cookie.is-in { animation: cookieIn .4s ease both; }
@keyframes cookieIn { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ============================================================
   Legal pages
   ============================================================ */
.legal { max-width: var(--w-container); margin-inline: auto; padding: var(--s-6) var(--s-4) var(--sec-y); }
.legal__header { border-bottom: var(--bd); padding: var(--s-3) 0; margin-bottom: var(--s-6); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.legal__badge { font-size: 10px; letter-spacing: 2px; border: var(--bd); padding: 3px 7px; text-transform: uppercase; }
.legal h1 { margin-bottom: var(--s-2); }
.legal .updated { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: var(--s-5); }
.legal ol { list-style: none; counter-reset: item; padding: 0; }
.legal ol > li { margin-bottom: var(--s-4); padding-left: 0; }
.legal ol > li h2 { font-size: clamp(20px, 3vw, 26px); display: flex; gap: var(--s-2); align-items: baseline; }
.legal ol > li h2 .bit { font-family: var(--f-body); font-size: 13px; letter-spacing: 2px; }

/* ============================================================
   Reveal
   ============================================================ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 700px) {
  :root { --sec-y: 56px; --block-y: 40px; }
  section { padding-block: 48px; }
  .grid-2, .band__grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .rates { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .nav__links { width: 100%; margin-left: 0; order: 3; }
  .nav__actions { margin-left: auto; }
}
@media (max-width: 480px) {
  .cookie__inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Reduced motion — silence everything, features still work
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__wave { opacity: .4; }
  body { transition: none; }
}