/* DS-12 Night Shift Neon -- the system.
 *
 * Measured contrast, every figure from css.contrast against the ground the
 * colour is actually painted on. Four grounds exist in this design:
 *
 *   page  #070A12      stage #111227      panel #1C1F27      field #262931
 *
 *   ink   18.499 / 17.225 / 15.401 / 13.595
 *   muted 9.143 / 8.513 / 7.611 / 6.719
 *   act   11.177 / 10.408 / 9.305 / 8.215
 *   acc   5.652 / 5.263 / 4.706 / 4.154
 *   edge  4.418 / 4.113 / 3.678 / 3.247
 *   hi    4.073 / 3.793 / 3.391 / 2.993
 *
 * Two rules follow from those figures and are load-bearing:
 *
 *   --hi is never text. At 4.073 on the page it misses 4.5:1, and on a
 *   field it misses 3:1 as well. It is the focus ring, a border and a glow.
 *   The ring carries a 3px offset, so it is drawn on the ground the control
 *   sits on and never on the field itself: no focusable control in this
 *   design sits on a field ground, which keeps the ring at 3.391.
 *
 *   --acc is text on the page, the stage and a panel (4.706 at worst)
 *   and never on a field, where it measures 4.154.
 *
 * Black on the primary action measures 11.861 and black on the secondary
 * measures 5.998, so both buttons carry black labels.
 *
 * Every gradient in this file is paired with a solid background-color. The
 * contrast sweep walks ancestors until it finds a background whose alpha
 * exceeds 0.5; a gradient alone computes as rgba(0,0,0,0) and falls through,
 * which would measure the wrong ground. The translucent header is the one
 * deliberate exception and is safe for the same reason: at .86 alpha it is
 * above the threshold and is measured as its own base.
 */




:root {
  --bg: #070A12; --ink: #F5F7FF; --act: #00D4FF; --act-h: #4ADEFF;
  --acc: #FF2E88; --acc-h: #FC6AAC; --hi: #6C5CE7;
  --stage: #111227; --panel: #1C1F27; --field: #262931;
  --muted: #AEB0B8; --edge: #74777F; --rule: #40434B;
  --on-act: #000000; --on-acc: #000000; --ft-muted: #A4A6AE;
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --max: 1240px; --measure: 68ch; --measure-s: 52ch;
  --radius: 4px; --head-h:var(--catalog-font-heading); --band-pad: 72px;
  --font-h:var(--catalog-font-heading);
  --font-b:var(--catalog-font-body);
  --t: 220ms cubic-bezier(.2, .8, .2, 1);
  --t-long: 600ms cubic-bezier(.2, .8, .2, 1);
  --gutter: 16px;
  --lift: 0 1px 0 rgba(245, 247, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.55);
  --lift-2: 0 1px 0 rgba(245, 247, 255, 0.10), 0 28px 64px rgba(0, 0, 0, 0.68);
  --glow-act: 0 0 0 1px rgba(0, 212, 255, 0.35), 0 0 24px rgba(0, 212, 255, 0.28);
  --trace: linear-gradient(90deg, var(--act), var(--hi), var(--acc));
  --focus-ring: #6C5CE7; --focus-width: 3px; --focus-offset: 3px;
}

@media (min-width: 360px)  { :root { --gutter: 18px; } }
@media (min-width: 375px)  { :root { --gutter: 20px; } }
@media (min-width: 414px)  { :root { --gutter: 24px; } }
@media (min-width: 768px)  { :root { --gutter: 36px; --band-pad: 112px;
                                      --head-h:var(--catalog-font-heading); } }
@media (min-width: 1024px) { :root { --gutter: 48px; --band-pad: 144px; } }

body { margin: 0; background: var(--bg); color: var(--ink);
       font-family: var(--font-b); font-size: 1rem; line-height: 1.6;
       -webkit-font-smoothing: antialiased; }
@media (min-width: 768px) { body { font-size: 1.0625rem; } }

h1, h2, h3 { font-family: var(--font-h); font-weight: 700;
             margin: 0 0 var(--s4); }
h1 { font-size: clamp(2.25rem, 11vw, 3.75rem); line-height: 0.98;
     letter-spacing: -0.02em; overflow-wrap: break-word; }
@media (min-width: 768px) { h1 { font-size: clamp(3.25rem, 7vw, 7rem);
     line-height: 0.94; letter-spacing: -0.035em; } }
h2 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1.02;
     letter-spacing: -0.02em; overflow-wrap: break-word; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15;
     letter-spacing: -0.01em; }
p { margin: 0 0 var(--s4); }
.measure   { max-width: var(--measure); }
.measure-s { max-width: var(--measure-s); }
a { color: var(--act); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto;
        padding-inline: var(--gutter); }

/* ---------------------------------------------------------------------- *
 * the layered stage -- fingerprint row one
 *
 * The page is the darkest ground. A band that carries weight is lifted onto
 * the stage, and every card on it is lifted again onto a panel. The luminous
 * line at the head of each band is the same gradient the footer opens with.
 * ---------------------------------------------------------------------- */

.sec {
  position: relative;
  padding-block: var(--band-pad);
  background-color: var(--bg);
}

.sec::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 1px;
  background-color: var(--rule);
  background-image: linear-gradient(90deg,
      transparent 0%, rgba(0, 212, 255, 0.55) 22%,
      rgba(108, 92, 231, 0.65) 50%, rgba(255, 46, 136, 0.55) 78%,
      transparent 100%);
}

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 90;
  padding: var(--s3) var(--s4);
  background: var(--act);
  color: var(--on-act);
  font-weight: 700;
  border-radius: 0 0 var(--radius) 0;
}
.skip:focus { inset-inline-start: 0; }

/* ---------------------------------------------------------------------- *
 * the compact translucent header -- fingerprint row two
 * ---------------------------------------------------------------------- */

.hd {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: rgba(7, 10, 18, 0.86);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--rule);
}

/* The header inner is not inside a .wrap -- the shell emits it bare -- so it
 * carries the wrap geometry itself. Without this the bar runs edge to edge at
 * every width and keeps growing past the 1240px the rest of the page stops at,
 * which no overflow gate can see because nothing actually overflows. */
.hd__in {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  height: var(--head-h);
}

.mark {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
  font-family: var(--font-h);
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

.mark__h {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 0 18px rgba(0, 212, 255, 0.45);
}

.mark__sub {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The sub-line is held back until the wrap has stopped growing. From 414 to
 * 1279 the header carries a nine-tab bar and a book action at the same time,
 * and this second line is the one thing that can go without costing a visitor
 * anything: the wordmark is still readable text either way. */
@media (max-width: 1279px) { .mark__sub { display: none; } }

/* ---------------------------------------------------------------------- *
 * glowing tab navigation -- fingerprint row five
 * ---------------------------------------------------------------------- */

.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s2);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--t), background-color var(--t);
}

.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: var(--s2);
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background-color: transparent;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t), background-color var(--t);
}

.nav__link:hover { color: var(--ink); background-color: var(--stage); }
.nav__link:hover::after {
  background-color: var(--act);
  transform: scaleX(1);
}

.nav__no {
  color: var(--ink);
  background-color: var(--stage);
  font-weight: 700;
}
.nav__no::after {
  background-color: var(--act);
  transform: scaleX(1);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.75);
}

@media (min-width: 1024px) { .nav { display: block; } }

/* ---------------------------------------------------------------------- *
 * the disclosure -- a real button, closes with Escape, works without TS
 * ---------------------------------------------------------------------- */

.drawer { position: relative; }
@media (min-width: 1024px) { .drawer { display: none; } }

.drawer__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding-inline: var(--s3);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.drawer__toggle::-webkit-details-marker { display: none; }

.drawer__bars {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--act);
  box-shadow: 0 -6px 0 var(--act), 0 6px 0 var(--act);
}

.drawer__word { font-weight: 700; }
@media (max-width: 359px) { .drawer__word { display: none; } }

.drawer__panel {
  position: absolute;
  top: var(--head-h);
  inset-inline-end: 0;
  z-index: 50;
  min-width: min(84vw, 300px);
  padding: var(--s3);
  background-color: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--lift-2);
  list-style: none;
  margin: 0;
}

.drawer__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s3);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
}
.drawer__link:hover { background-color: var(--field); color: var(--act); }

/* ---------------------------------------------------------------------- *
 * actions
 * ---------------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: var(--s5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-h);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t),
              color var(--t), box-shadow var(--t);
}

.btn--primary {
  background-color: var(--act);
  color: var(--on-act);
  box-shadow: var(--glow-act);
}
.btn--primary:hover { background-color: var(--act-h); }

.btn--ghost {
  background-color: transparent;
  border-color: var(--edge);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--act); color: var(--act); }

.btn--book { font-size: 0.875rem; padding-inline: var(--s4); }

.btn--sub {
  background-color: var(--acc);
  color: var(--on-acc);
}
.btn--sub:hover { background-color: var(--acc-h); }

/* ---------------------------------------------------------------------- *
 * focus -- the ring is the highlight colour, 3px at a 3px offset, which is
 * what section 4 specifies. It is drawn outside the control, so it is never
 * measured against a field ground.
 * ---------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius);
}

/* ---------------------------------------------------------------------- *
 * forms -- the control sits on a field ground, the form around it on a
 * panel, which is what keeps the offset ring above 3:1.
 * ---------------------------------------------------------------------- */

.field {
  display: block;
  margin-bottom: var(--s4);
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  margin-top: var(--s2);
  min-height: 44px;
  padding: var(--s3);
  background-color: var(--field);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.field textarea { min-height: 140px; resize: vertical; }

.field__opt { color: var(--muted); font-weight: 400; }

.hint { margin: var(--s2) 0 0; font-size: 0.8125rem; color: var(--muted); }

.err {
  margin: var(--s2) 0 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--acc);
}
.err:empty { display: none; }

/* ---------------------------------------------------------------------- *
 * the subscribe band
 * ---------------------------------------------------------------------- */

.sub-band { background-color: var(--stage); }

.sub-band__in { display: grid; gap: var(--s6); }

.sub-band__h { margin-bottom: var(--s3); }

.sub-band__p { margin: 0; color: var(--muted); max-width: var(--measure); }

.sub-form {
  padding: var(--s5);
  background-color: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--lift);
}

.sub-form__field { margin-bottom: var(--s4); }

.sub-form__status { margin: var(--s3) 0 0; font-size: 0.875rem; }
.sub-form__status:empty { display: none; }

@media (min-width: 1024px) {
  .sub-band__in {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--s7);
  }
}

/* ---------------------------------------------------------------------- *
 * the luminous line footer -- fingerprint row four
 * ---------------------------------------------------------------------- */

.ft {
  position: relative;
  background-color: var(--bg);
  border-top: 1px solid var(--rule);
  color: var(--ft-muted);
}

.ft::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: 0;
  height: 2px;
  background-color: var(--rule);
  background-image: linear-gradient(90deg,
      transparent 0%, rgba(0, 212, 255, 0.85) 25%,
      rgba(108, 92, 231, 0.95) 50%, rgba(255, 46, 136, 0.85) 75%,
      transparent 100%);
}

.ftmark {
  padding-block: var(--s8) var(--s7);
  border-bottom: 1px solid var(--rule);
}

.ftmark__h { margin-bottom: var(--s4); color: var(--ink); }

.ftmark__p {
  margin: 0 0 var(--s5);
  max-width: var(--measure);
  color: var(--ft-muted);
}

.ftmark__act { display: flex; flex-wrap: wrap; gap: var(--s3); }

.ft__in { display: grid; gap: var(--s7); padding-block: var(--s7); }

.ft__h {
  margin: 0 0 var(--s4);
  font-family: var(--font-h);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.ft__list { list-style: none; margin: 0; padding: 0; }

.ft__row { margin-bottom: var(--s2); }

.ft__list a,
.ft__addr a,
.ft__legal a { color: var(--act); }

.ft__addr { font-style: normal; margin: 0 0 var(--s3); }

.ft__hours { margin: 0; }

.ft__foot {
  padding-block: var(--s5);
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
}

.ft__legal { margin: 0; }

@media (min-width: 768px) {
  .ft__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------- *
 * animation off
 *
 * The reduced-motion pass fails any transition or animation whose duration
 * exceeds 0.02s, so both are pinned to 0.01ms rather than removed -- a
 * removed transition leaves the property with its inherited duration.
 * Section 4's requirement is met as written: the poster stays visible, the
 * glow becomes static, and every reveal is fully shown because nothing in
 * this design was hidden to begin with.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}