/* ==========================================================================
   LoungeTV.co.uk (Loungest WebTV)
   Design language: late-night velvet bar.
   Tokens are brand-derived: crimson #e52029 and ink #211f20 are sampled
   from the existing Loungest logo, not invented.

   Shape rule (locked): every corner in the system is --r (2px). Sharp,
   editorial, applied to cards, media, buttons and inputs alike.
   Accent rule (locked): crimson is the ONLY accent on the page.
   Theme rule (locked): the page is dark. No section inverts.
   ========================================================================== */

:root {
  /* Type */
  --font-display: 'Syne', 'Trebuchet MS', sans-serif;
  --font-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;

  /* Surface ramp (warm near-black, never #000) */
  --ink-900: #0d0c0f;
  --ink-850: #121116;
  --ink-800: #17161c;
  --ink-700: #201f26;

  /* Hairlines */
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);

  /* Brand accent (single) */
  --red: #e52029;
  --red-deep: #a8161d;
  --red-text: #ff6169;   /* AA-safe crimson for small text on ink */

  /* Ink on dark */
  --paper: #f2efe9;
  --muted: #9d979b;

  /* System */
  --r: 2px;
  --shell: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t: 0.4s var(--ease);

  /* Consumed by accessibility.js / gdpr.js */
  --accent-cyan: #e52029;
  --border-glass: rgba(255, 255, 255, 0.09);
  --radius-xl: 2px;
  --radius-2xl: 2px;
  --radius-full: 2px;
  --text-primary: #f2efe9;
  --text-muted: #9d979b;
  --color-border: rgba(255, 255, 255, 0.09);
  --color-bg-deep: #0d0c0f;
  --color-bg-card: #17161c;
  --color-text-main: #f2efe9;
  --color-text-muted: #9d979b;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  font-family: var(--font-body);
  background: var(--ink-900);
  color: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 2px solid var(--red-text);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--red);
  color: #fff;
  padding: 12px 20px;
  font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

/* --- Typography scale --- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.35rem, 4.4vw, 3.9rem); }
h2 { font-size: clamp(2rem, 4vw, 3.3rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.2; }

p { max-width: 62ch; }

.lede {
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  color: var(--muted);
}

/* The one eyebrow style. Budget: max 1 per 3 sections. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red-text);
  display: block;
  margin-bottom: 18px;
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  padding: 15px 30px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t), transform 0.15s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--red);
  color: #fff;             /* 4.6:1 on crimson, AA */
  border-color: var(--red);
}
.btn-primary:hover { background: var(--red-deep); border-color: var(--red-deep); }

.btn-ghost {
  background: rgba(13, 12, 15, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--paper);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--paper); background: rgba(13, 12, 15, 0.82); }
@media (prefers-reduced-transparency: reduce) {
  .btn-ghost { background: var(--ink-800); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* --- Scroll reveal ---
   Gated on html.lm-js so content stays visible if scripting never runs. */
html.lm-js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.lm-js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   HEADER  (one line at desktop, 72px tall)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  height: 72px;
  display: flex;
  align-items: center;
  background: rgba(13, 12, 15, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--ink-900); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand img { height: 46px; width: auto; }

.nav-cluster { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }

.main-nav ul { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 28px); }
.main-nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.main-nav a:hover { color: var(--paper); border-bottom-color: var(--red); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 9px 11px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--paper);
  margin: 4px 0;
}

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--ink-850);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; }
  .main-nav a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .main-nav a:hover { border-bottom-color: var(--line); }
}

/* ==========================================================================
   HERO  (copy block, then the player at the full width of the shell)
   The claim is that this is not available anywhere else. The thing playing
   beneath the claim is the evidence, so it is the stage, not a side column.
   ========================================================================== */
.hero {
  position: relative;
  padding-top: clamp(44px, 5.5vw, 72px);
  padding-bottom: clamp(56px, 7vw, 96px);
  overflow: hidden;
  isolation: isolate;
}

.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 26% 16%; }

/* The photograph reads behind the copy and is gone by the time the player
   starts, so the picture on screen is the only picture asking for attention. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(13,12,15,0.96) 0%, rgba(13,12,15,0.86) 34%, rgba(13,12,15,0.58) 70%, rgba(13,12,15,0.48) 100%),
    linear-gradient(to bottom, rgba(13,12,15,0.60) 0%, rgba(13,12,15,0.12) 20%, rgba(13,12,15,0.62) 36%, var(--ink-900) 50%);
}

.hero-copy { max-width: none; }
.hero h1 { font-size: clamp(2.2rem, 5.1vw, 4.15rem); max-width: 34ch; }
.hero h1 em {
  font-style: italic;
  color: var(--red-text);
  line-height: 1.14;      /* descender clearance for the y in "anywhere" */
  padding-bottom: 0.06em;
  display: inline-block;
}
.hero-sub {
  margin-top: 20px;
  max-width: 50ch;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  color: var(--muted);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.btn-play { width: 13px; height: 13px; fill: currentColor; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 560px) {
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .hero-actions .btn { width: 100%; }
}

/* --- The player --------------------------------------------------------- */
.player-card {
  margin-top: clamp(40px, 5vw, 64px);
  border-radius: var(--r);
  filter: drop-shadow(0 26px 60px rgba(0, 0, 0, 0.7));
  transition: box-shadow 0.3s var(--ease);
}
.player-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-strong);
}
.player-state {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-text);
  white-space: nowrap;
}
/* On-air light: the only looping motion on the page, and it stops with the
   global reduced-motion rule. It reports real state, which is why it exists. */
.player-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  animation: ltv-onair 2.6s var(--ease) infinite;
}
@keyframes ltv-onair {
  0%   { box-shadow: 0 0 0 0 rgba(229, 32, 41, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(229, 32, 41, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 32, 41, 0); }
}
.player-open {
  font-size: 0.8rem;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.player-open:hover { color: var(--red-text); border-bottom-color: var(--red-text); }

/* The embedded player draws a 16:9 stage plus 159px of its own chrome. A
   percentage padding resolves against width, so this reserves stage + chrome
   at every width and the frame never clips its own controls. */
.player-frame-wrap {
  position: relative;
  width: 100%;
  padding-bottom: calc(56.25% + 160px);
  background: #000;
  border-radius: var(--r);
  overflow: hidden;
}
.player-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.player-noscript {
  display: block;
  margin-top: 14px;
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--ink-850);
  font-size: 0.92rem;
  color: var(--muted);
}
.player-noscript a { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }

/* Brief attention ring when "Watch now" moves focus to the player. */
.player-card.player-attn { box-shadow: 0 0 0 2px var(--red), 0 26px 60px rgba(0, 0, 0, 0.7); }

/* Arrival: claim first, evidence second. Gated on scripting so nothing is
   hidden if the script never runs; off entirely under reduced motion. */
@keyframes ltv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html.lm-js .hero-copy > * { animation: ltv-rise 0.7s var(--ease) both; }
  html.lm-js .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  html.lm-js .hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  html.lm-js .hero .player-card { animation: ltv-rise 0.8s var(--ease) 0.26s both; }
}

/* ==========================================================================
   SECTIONS  (shared rhythm)
   ========================================================================== */
.section { padding-block: clamp(72px, 9vw, 132px); }
/* Width in px, not ch: ch here would be body ch, and a display h2 in a 46ch
   body column breaks into three lines. The lede keeps its own measure. */
.section-head { max-width: 680px; margin-right: auto; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head p { margin-top: 16px; max-width: 56ch; }

/* ==========================================================================
   THE CHANNEL  (four claims, four cells: wide over narrow, narrow over wide,
   each on its own photograph)
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.cell {
  position: relative;
  min-height: clamp(280px, 26vw, 380px);
  display: flex;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-850);
  overflow: hidden;
  isolation: isolate;
  transition: background var(--t), border-color var(--t);
}
.cell:hover { background: var(--ink-800); border-color: var(--line-strong); }
.cell-wide { grid-column: span 2; }

.cell-img { align-items: flex-end; }
.cell-img img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.cell-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(13,12,15,0.96) 26%, rgba(13,12,15,0.62) 56%, rgba(13,12,15,0.10) 100%);
}
.cell-img:hover img { transform: scale(1.04); }

.cell-body { padding: clamp(22px, 2.6vw, 34px); }
.cell-body h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); margin-bottom: 10px; }
.cell-body p { font-size: 0.95rem; line-height: 1.6; color: var(--muted); max-width: 40ch; }

@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .cell-wide { grid-column: auto; }
  .cell { min-height: 240px; }
}

/* ==========================================================================
   STORY  (editorial bleed: image bleeds off the left edge)
   ========================================================================== */
.story {
  background: var(--ink-850);
  border-block: 1px solid var(--line);
  padding-block: clamp(72px, 9vw, 132px);
  overflow: hidden;
}
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: stretch;
}
.story-media {
  position: relative;
  margin-left: calc(var(--gutter) * -1 - 60px);
  border-radius: var(--r);
  overflow: hidden;
}
.story-media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.story-copy h2 { max-width: 17ch; }
.story-copy p { margin-top: 22px; color: var(--muted); }
.story-copy strong { color: var(--paper); font-weight: 600; }

@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-media { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-radius: 0; }
}

/* ==========================================================================
   ADVERTISE  (a full bleed band: the gallery under a heavy scrim, the offer
   at the left, the three specifics ruled off beneath it)
   ========================================================================== */
.advertise {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(80px, 10vw, 150px);
  border-bottom: 1px solid var(--line);
}
.advertise-media { position: absolute; inset: 0; z-index: -2; }
.advertise-media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.advertise-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg, rgba(13,12,15,0.97) 0%, rgba(13,12,15,0.92) 48%, rgba(13,12,15,0.74) 100%);
}
.advertise-copy { max-width: 58ch; }
.advertise-copy h2 { max-width: 15ch; }
.advertise-copy p { margin-top: 18px; color: var(--muted); }
.advertise-copy .btn { margin-top: 28px; }

.offer-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  margin-top: clamp(48px, 6vw, 84px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line-strong);
}
.offer-item { padding-inline: clamp(22px, 3vw, 46px); border-left: 1px solid var(--line-strong); }
.offer-item:first-child { padding-left: 0; border-left: 0; }
.offer-item:last-child { padding-right: 0; }
.offer-item h3 { font-size: 1.05rem; margin-bottom: 8px; }
.offer-item p { font-size: 0.93rem; color: var(--muted); margin: 0; }
@media (max-width: 860px) {
  .offer-row { grid-template-columns: 1fr; padding-top: 0; border-top: 0; }
  .offer-item { padding: 20px 0; border-left: 0; border-top: 1px solid var(--line-strong); }
  .offer-item:last-child { padding-bottom: 0; }
}

/* ==========================================================================
   CONTACT  (split: reasons + socials left, live form right)
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
/* Two reasons, divided by a hairline. The generic tag and note glyphs that sat
   here were drawn by hand and carried no meaning the heading did not. */
.contact-reasons { display: grid; margin-top: 34px; border-top: 1px solid var(--line); }
.reason { padding: 22px 0; border-bottom: 1px solid var(--line); }
.reason h3 { font-size: 1.05rem; margin-bottom: 6px; }
.reason p { font-size: 0.93rem; color: var(--muted); }

.socials { display: flex; gap: 12px; margin-top: 30px; }
.social {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  transition: border-color var(--t), background var(--t), transform 0.2s var(--ease);
}
.social svg { width: 19px; height: 19px; fill: var(--muted); transition: fill var(--t); }
.social:hover { border-color: var(--red); background: rgba(229,32,41,0.1); transform: translateY(-2px); }
.social:hover svg { fill: var(--paper); }

/* The embed is served by TapTheNfc and supplies its own panel, now on a dark
   surface via theme=mirror. We add no card of our own around it, which keeps the
   contact column to a single nested surface. */
.form-card { border-top: 1px solid var(--line); padding-top: 26px; }
.form-card > h3 { margin-bottom: 6px; }
.form-card > p { font-size: 0.92rem; color: var(--muted); margin-bottom: 18px; }
.form-paper { border-radius: var(--r); overflow: hidden; }
.form-frame { width: 100%; height: 700px; border: 0; }
@media (max-width: 680px) { .form-frame { height: 760px; } }

/* Phone: a route to the studio that does not depend on the embedded form. */
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--ink-900);
  border-top: 1px solid var(--line);
  padding-top: clamp(56px, 7vw, 88px);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 2.05fr);
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 56px;
}
.footer-brand img { height: 62px; width: auto; margin-bottom: 22px; }
.footer-brand address {
  font-style: normal;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.8;
}
.footer-col h2 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 18px;
}
.footer-col li { margin-bottom: 11px; }

/* Nine legal links next to two three-link columns left the footer lopsided.
   The long list runs in two sub columns so the three block out level. */
.footer-col-wide ul {
  display: grid;
  grid-auto-flow: column;              /* read down the first column, then across */
  grid-template-rows: repeat(5, auto);
  column-gap: 18px;
  align-content: start;
}
@media (max-width: 860px) { .footer-col-wide ul { grid-template-columns: 1fr; } }
.footer-col a {
  font-size: 0.92rem;
  color: var(--muted);
  transition: color var(--t);
}
.footer-col a:hover { color: var(--red-text); }

.footer-base {
  border-top: 1px solid var(--line);
  padding-block: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-base p { font-size: 0.86rem; color: var(--muted); max-width: none; }
.footer-base strong { color: var(--paper); font-weight: 600; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a { font-size: 0.86rem; color: var(--muted); transition: color var(--t); }
.footer-links a:hover { color: var(--red-text); }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal-page { padding-block: clamp(56px, 7vw, 96px); }
.legal-wrap { max-width: 820px; margin-inline: auto; }
.legal-wrap h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-bottom: 10px; }
.legal-date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}
.legal-body p, .legal-body li { color: var(--muted); max-width: 74ch; }
.legal-body p { margin-bottom: 18px; }
.legal-body h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.42rem);
  margin-top: 40px;
  margin-bottom: 14px;
  color: var(--paper);
}
.legal-body ul { margin: 0 0 20px 20px; list-style: disc; }
.legal-body li { margin-bottom: 9px; }
.legal-body a { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }
.legal-body strong { color: var(--paper); font-weight: 600; }
.legal-body table { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: 0.9rem; }
.legal-body th, .legal-body td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; }
.legal-body th { color: var(--paper); font-weight: 600; }

/* Print */
@media print {
  .site-header, .site-footer, .socials { display: none; }
  body { background: #fff; color: #000; }
  .legal-body p, .legal-body li, .legal-date { color: #333; }
}

/* ==========================================================================
   COOKIE CONSENT
   The banner and preferences dialog rendered by gdpr.js. These styles were
   missing, which left the consent UI unstyled and stranded below the footer.
   ========================================================================== */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: none;
  background: rgba(18, 17, 22, 0.97);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55);
}
.cookie-banner.is-open { display: block; }
@media (prefers-reduced-transparency: reduce) {
  .cookie-banner { background: var(--ink-850); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.cookie-banner-inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 44px);
}
.cookie-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 78ch;
}
.cookie-text a { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }

.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; flex-shrink: 0; }

.cookie-btn {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 12px 20px;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.cookie-btn:hover { border-color: var(--paper); background: rgba(255, 255, 255, 0.07); }
.cookie-btn:active { transform: translateY(1px); }
/* Accept and reject carry equal visual weight: consent must not be nudged. */
.cookie-btn-accept { background: var(--red); border-color: var(--red); color: #fff; }
.cookie-btn-accept:hover { background: var(--red-deep); border-color: var(--red-deep); }

@media (max-width: 860px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; padding-block: 18px; }
  .cookie-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cookie-btn-settings { grid-column: 1 / -1; }
}

/* --- Preferences dialog --- */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(6, 5, 8, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cookie-modal.is-open { display: flex; }

.cookie-modal-card {
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--ink-850);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
}
.cookie-modal-card h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  margin-bottom: 8px;
}
.cookie-modal-intro { font-size: 0.9rem; color: var(--muted); margin-bottom: 26px; }

.cookie-option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.cookie-option h3 { font-size: 1rem; margin-bottom: 6px; }
.cookie-option p { font-size: 0.86rem; line-height: 1.55; color: var(--muted); max-width: none; }

.cookie-always {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-text);
  white-space: nowrap;
  padding-top: 5px;
}

/* Switch. The native checkbox stays in the accessibility tree and drives the
   visual state, so keyboard and screen reader users get the real control. */
.cookie-switch { position: relative; flex-shrink: 0; width: 48px; height: 27px; }
.cookie-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cookie-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--ink-700);
  border: 1px solid var(--line-strong);
  transition: background var(--t), border-color var(--t);
  pointer-events: none;
}
.cookie-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--paper);
  transition: transform var(--t);
}
.cookie-switch input:checked + .cookie-slider { background: var(--red); border-color: var(--red); }
.cookie-switch input:checked + .cookie-slider::before { transform: translateX(21px); }
.cookie-switch input:focus-visible + .cookie-slider {
  outline: 2px solid var(--red-text);
  outline-offset: 3px;
}

.cookie-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
@media (max-width: 520px) {
  .cookie-modal-actions { flex-direction: column-reverse; }
  .cookie-modal-actions .cookie-btn { width: 100%; }
}

/* Footer entry point so consent can be changed or withdrawn at any time. */
.cookie-prefs-btn {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: color var(--t);
}
.cookie-prefs-btn:hover { color: var(--red-text); }

/* The accessibility launcher is fixed bottom-left with an inline style, so it
   needs !important to be lifted clear of the consent banner. Without this it
   covers the reject button on narrow screens. */
html.lm-consent-open #a11y-widget-container {
  bottom: calc(var(--lm-consent-h, 120px) + 20px) !important;
}
/* While the preferences dialog is open the launcher would float above it on
   z-index alone, so the background control is taken out of reach. */
html.lm-consent-modal #a11y-widget-container { display: none !important; }