/* ==========================================================================
   LoveQuarters — the only stylesheet.

   This is the Lust Sanctuary system rebuilt in red, black and white. Loud on
   purpose: Anton SC caps do the shouting, a heavy Playfair italic in red is
   counterweight, Inter Tight does all the actual reading. Headings are
   two-tone — a block of caps and then a swooping italic — which is the single
   move the whole look hangs on.

   Palette is three colours and nothing else. No pink, no violet, no gold.
   All three faces are OFL and self-hosted in /fonts, so nothing phones home.
   ========================================================================== */

/* ------------------------------------------------------------------- fonts */

@font-face {
  font-family: "Anton LQ";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-sc.woff2") format("woff2");
}

@font-face {
  font-family: "Inter Tight LQ";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/intertight-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight LQ";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/intertight-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight LQ";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/intertight-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight LQ";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/intertight-800.woff2") format("woff2");
}

/* Playfair Display at 900, not a Garamond. Cormorant is a text italic with
   hairline strokes, and at display size next to a solid Anton block it read as
   a thin afterthought. This one has the stem mass to hold the second line. */
@font-face {
  font-family: "Playfair LQ";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/playfair-900i.woff2") format("woff2");
}

/* ------------------------------------------------------------------ tokens */

:root {
  /* Black, red, white. The greys are all neutral so no fourth hue sneaks in
     through a border or a muted paragraph. */
  --black:   #000000;
  --ink-0:   #08070A;
  --ink-1:   #0E0D11;
  --ink-2:   #16151A;
  --ink-3:   #201F26;

  --white:   #FFFFFF;
  --bone:    #F2F0F0;
  --grey-1:  #B9B6BC;
  --grey-2:  #8B888F;

  --red:      #FF1F3D;
  --red-lit:  #FF4D63;
  --red-deep: #C1001E;
  --red-dark: #6E0012;

  --line:   rgba(255, 255, 255, .12);
  --line-2: rgba(255, 255, 255, .07);

  --anton:  "Anton LQ", Anton, Impact, "Haettenschweiler", sans-serif;
  --serif:  "Playfair LQ", "Playfair Display", Georgia, serif;
  --sans:   "Inter Tight LQ", "Inter Tight", Inter, system-ui, sans-serif;

  --wrap: 1180px;
  --measure: 46rem;
  --ease: cubic-bezier(.2, .75, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

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

html { scroll-behavior: smooth; }

/* ------------------------------------------------------------- atmosphere */

/* Two fixed layers behind everything: red pools bleeding in from the corners,
   and a faint drifting grid so the black is never dead flat. */
@keyframes lq-drift { to { background-position: 46px 46px; } }

.lq-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 6%,  rgba(255, 31, 61, .20), transparent 30vw),
    radial-gradient(circle at 88% 14%, rgba(193, 0, 30, .18), transparent 32vw),
    radial-gradient(circle at 50% 96%, rgba(255, 31, 61, .10), transparent 34vw);
}
.lq-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .024) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), rgba(0, 0, 0, .10));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), rgba(0, 0, 0, .10));
  animation: lq-drift 24s linear infinite;
}

/* The header is excluded deliberately. This selector outranks .lq-head, so
   including it would overwrite position:sticky with position:relative and the
   header would scroll away, and would also swallow clicks on the menu. */
body.lq > *:not(.lq-glow):not(.lq-head) { position: relative; z-index: 1; }

body.lq {
  margin: 0;
  background: var(--ink-0);
  color: var(--grey-1);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --------------------------------------------------------- the two-tone rule

   Every display line in the site is built the same way: a <b> of Anton caps
   and an <i> of heavy red Playfair italic. That is the whole identity, so it
   lives in one place and everything else just sets a size.                  */

.lq-2t { display: block; margin: 0; }
.lq-2t b {
  display: block;
  font-family: var(--anton);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.028em;
  line-height: .86;
  color: var(--bone);
}
.lq-2t i {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 900;
  text-transform: none;
  letter-spacing: -.02em;
  line-height: .96;
  /* Playfair's italic Q, y and g throw long swash descenders well below the
     baseline. At .08em the Q of "Quarters" ran straight through the byline. */
  padding-bottom: .2em;
  color: var(--red);
  /* Anton caps and a Playfair italic have very different optical left edges;
     this pulls the italic back so the two lines stack flush. */
  margin-left: -.03em;
  /* Playfair carries a much larger x-height than the Cormorant it replaced, so
     it needs to be set smaller than the caps line to weigh the same. */
  font-size: .9em;
}

/* ------------------------------------------------------------------ header */

.lq-head {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: .95rem clamp(1rem, 3vw, 2.2rem);
  background: linear-gradient(to bottom, rgba(8, 7, 10, .96), rgba(8, 7, 10, .72) 55%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.lq-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--white);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .9);
}
.lq-brand::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: linear-gradient(140deg, var(--red-lit), var(--red-deep));
  transform: rotate(45deg);
  border-radius: 3px;
  box-shadow: 0 0 18px rgba(255, 31, 61, .75);
}
/* Only the 900 is loaded, so asking for anything lighter here would fall back
   to a synthesised weight rather than a real one. */
.lq-brand b { font-weight: 900; }
.lq-brand i { font-style: italic; color: var(--red); }

.lq-strap { display: none; }

/* The nav is one rounded capsule, the way Lust Sanctuary does it. */
.lq-nav {
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .3rem .45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
}
.lq-nav a {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  color: var(--grey-1);
  padding: .5rem .85rem;
  border-radius: 999px;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.lq-nav a:hover { color: var(--white); background: rgba(255, 31, 61, .22); }

.lq-cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--white);
  padding: .68rem 1.25rem;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--red-lit), var(--red-deep));
  box-shadow: 0 12px 34px -12px rgba(255, 31, 61, .95);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lq-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -12px rgba(255, 31, 61, 1); }

/* ------------------------------------------------------------------ layout */

.lq-article,
.lq-simple {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1.25rem, 1fr)
    [main-start] minmax(0, var(--measure))
    [main-end] minmax(1.25rem, 1fr)
    [full-end];
}
.lq-article > *,
.lq-simple > * { grid-column: main; }
.lq-article > .lq-mast,
.lq-article > .lq-hook,
.lq-article > .lq-lanes,
.lq-simple > .lq-mast,
.lq-simple > .lq-hook { grid-column: full; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

/* -------------------------------------------------------------- masthead */

.lq-mast {
  position: relative;
  margin-top: -4.8rem;
  padding: 9.5rem clamp(1.25rem, 4vw, 2.5rem) clamp(3.5rem, 6vw, 5.5rem);
  text-align: center;
  overflow: hidden;
}
.lq-mast > *:not(.lq-mast-art) {
  position: relative;
  z-index: 1;
  max-width: 1150px;
  margin-inline: auto;
}

.lq-mast-art { position: absolute; inset: 0; z-index: 0; }
.lq-mast-art img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
/* The scrim used to run .82 dark across the top and .62 across the lower
   third, which left the art as a rumour and the hero reading as a flat black
   box. It now only darkens the strip directly under the header and the seam
   into the page, so the middle — where the art actually is — comes through. */
.lq-mast-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(8, 7, 10, .72) 0%, rgba(8, 7, 10, .10) 30%,
    rgba(8, 7, 10, .12) 68%, var(--ink-0) 100%);
}
/* Same hatching as the hook slab. It gives the hero a surface, and it is the
   one texture that repeats across the site, so the hero and the slabs read as
   the same object rather than two unrelated treatments. */
.lq-mast-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: repeating-linear-gradient(115deg,
    rgba(255, 255, 255, .05) 0 2px, transparent 2px 16px);
}
/* A red wall of light behind the wordmark. Without it the two-tone lockup is
   white type floating on nothing, which is the "empty" read. */
.lq-mast::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 30%;
  width: min(1500px, 128vw);
  aspect-ratio: 1 / .62;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(255, 31, 61, .40) 0%, rgba(193, 0, 30, .20) 38%,
    rgba(110, 0, 18, .08) 62%, transparent 76%);
}

.lq-mast h1 { font-size: clamp(46px, 8.6vw, 118px); }
.lq-mast h1 b { text-shadow: 0 14px 60px rgba(0, 0, 0, .9); }
.lq-mast h1 i { text-shadow: 0 0 46px rgba(255, 31, 61, .55); }

/* The kicker is a short red dash and a line of tracked-out caps. */
.lq-kicker,
.iw-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grey-1);
  margin: 0 0 1.15rem;
}
.lq-kicker::before,
.iw-kicker::before {
  content: "";
  width: 26px;
  height: 3px;
  flex: none;
  background: var(--red);
  border-radius: 2px;
}

.lq-sub,
.iw-sub {
  font-family: var(--sans);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 400;
  color: var(--grey-1);
  max-width: 34rem;
  margin: 1.4rem auto 0;
}

.lq-byline {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--grey-2);
  margin-top: 1.5rem;
}
.lq-byline b { color: var(--grey-1); font-weight: 700; }

.ls-crumb {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--grey-2);
  margin: 0 0 1.6rem;
}
.ls-crumb a { color: var(--grey-2); text-decoration: none; }
.ls-crumb a:hover { color: var(--red); }
.ls-crumb span { margin: 0 .5rem; color: var(--red-dark); }

/* -------------------------------------------------------------- hook band

   The pattern interrupt: a full-bleed red slab with white caps across it and
   a huge ghost word bleeding off the right edge. This replaces the old soft
   SVG divider — it is the loudest thing on the page and that is the point.  */

.lq-hook {
  position: relative;
  overflow: hidden;
  margin: clamp(3.5rem, 7vw, 6rem) 0;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.5rem);
  background: linear-gradient(112deg, var(--red-dark) 0%, var(--red-deep) 38%, var(--red) 100%);
  text-align: center;
}
/* Diagonal hatching, so the slab has a surface instead of being a flat fill. */
.lq-hook::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg,
    rgba(255, 255, 255, .07) 0 2px, transparent 2px 16px);
}
.lq-hook-ghost {
  position: absolute;
  right: -.06em;
  top: 50%;
  transform: translateY(-46%);
  font-family: var(--anton);
  font-size: clamp(120px, 20vw, 260px);
  line-height: .8;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .13);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.lq-hook-h {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--anton);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.025em;
  line-height: .92;
  font-size: clamp(30px, 4.6vw, 62px);
  color: var(--white);
}
.lq-hook-p {
  position: relative;
  z-index: 1;
  margin: .9rem auto 0;
  max-width: 44rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 19px);
  color: rgba(255, 255, 255, .92);
}

/* ------------------------------------------------------------- prose + dek */

.lq-dek { margin-top: clamp(2.5rem, 5vw, 4rem); }
/* The masthead already carries its own bottom padding. Stacking the dek's
   full top margin on top of it opened a dead band of nothing between the sub
   line and the first paragraph on every page. */
.lq-mast + .lq-dek { margin-top: clamp(1.25rem, 2vw, 1.75rem); }

.lq-article p,
.lq-simple p { margin: 0 0 1.3rem; }

.lq-article a:not([class]),
.lq-simple a:not([class]) {
  color: var(--white);
  text-decoration: none;
  border-bottom: 2px solid var(--red);
  padding-bottom: 1px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.lq-article a:not([class]):hover,
.lq-simple a:not([class]):hover { background: var(--red); color: var(--white); }

strong, b { color: var(--bone); font-weight: 700; }

.muted { color: var(--grey-2); }
.small { font-size: 14px; }

/* The standfirst is a full-width pull line between sections. */
.lq-standfirst {
  margin: clamp(3rem, 5vw, 4.5rem) 0;
  padding: 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.06;
  color: var(--white);
}
.lq-standfirst::after {
  content: "";
  display: block;
  width: 78px;
  height: 4px;
  margin: 1.4rem auto 0;
  background: var(--red);
  border-radius: 2px;
}

/* ---------------------------------------------------------------- sections */

.lq-article { counter-reset: sec; }

.rev-sec { margin: clamp(3.2rem, 6vw, 5rem) 0; }

.rev-sec > h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(30px, 4.4vw, 58px);
}
/* The section number is a small red slug above the heading, not a ghost. */
.rev-sec > h2::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero);
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  line-height: 1;
  color: var(--red);
  margin-bottom: .85rem;
}
/* Anton caps sitting straight on top of body copy reads as a wall, so every
   section head gets a short red bar under it to break the block. */
.rev-sec > h2::after {
  content: "";
  display: block;
  width: 62px;
  height: 4px;
  margin-top: 1.1rem;
  background: var(--red);
  border-radius: 2px;
}

/* The FAQ, the read-next list and the author card sit outside the numbered
   run, so they get the same display size without the counter or the bar. */
.faq > h2,
.lq-next > h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(26px, 3.4vw, 44px);
}

.rev-sec h3 {
  margin: 2.2rem 0 .7rem;
  font-family: var(--anton);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.015em;
  font-size: clamp(19px, 2.1vw, 26px);
  color: var(--white);
}

/* ------------------------------------------------------------- spec strip */

.lq-spec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 2.2rem 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--ink-1);
}
.lq-spec-item { padding: 1.15rem 1.2rem; border-right: 1px solid var(--line-2); }
.lq-spec-item:last-child { border-right: 0; }
.lq-spec-l {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--grey-2);
  margin-bottom: .5rem;
}
.lq-spec-v {
  display: block;
  font-family: var(--anton);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.015em;
  font-size: 22px;
  line-height: 1;
  color: var(--white);
}
.lq-spec-bar { display: flex; gap: 4px; margin-bottom: .55rem; }
.lq-spec-bar i {
  display: block;
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
}
.lq-spec-bar i.on { background: var(--red); box-shadow: 0 0 12px rgba(255, 31, 61, .9); }

/* -------------------------------------------------------------- lane rows

   The big loud index. Each row is an oversized Anton line that lights up red
   and slides right on hover.                                                */

.lq-index { margin: 2.5rem 0; border-top: 1px solid var(--line); }

.lq-row {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  align-items: center;
  gap: 1.2rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding-left .35s var(--ease);
}
.lq-row:hover { padding-left: .9rem; }

.lq-row-n {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--grey-2);
  transition: color .3s var(--ease);
}
.lq-row:hover .lq-row-n { color: var(--red); }

.lq-row-i {
  font-family: var(--anton);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: 1;
  font-size: clamp(22px, 3vw, 38px);
  color: var(--bone);
  transition: color .3s var(--ease);
}
.lq-row:hover .lq-row-i { color: var(--red); }

.lq-row-go {
  font-family: var(--sans);
  font-size: 18px;
  color: var(--grey-2);
  transition: transform .35s var(--ease), color .3s var(--ease);
}
.lq-row:hover .lq-row-go { color: var(--red); transform: translateX(7px); }

/* ------------------------------------------------------------------- steps */

.lq-steps { margin: 2.2rem 0; }
.lq-step {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 1.3rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line-2);
}
.lq-step:first-child { border-top: 0; }
.lq-step-n {
  font-family: var(--anton);
  font-weight: 400;
  font-size: 52px;
  line-height: .8;
  color: var(--red);
  text-shadow: 0 0 30px rgba(255, 31, 61, .55);
}
.lq-step h3 { margin: 0 0 .35rem; }
.lq-step p { margin: 0; }

/* ----------------------------------------------------------------- widgets

   Cards, not glass. Flat panels with a real border and a red top edge on the
   ones that matter.                                                         */

.ls-explore,
.ls-picker,
.ls-poll,
.guide-safety,
.lq-author,
.faq {
  margin: 2.5rem 0;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--ink-1);
}
.ls-explore, .ls-picker, .ls-poll { border-top: 3px solid var(--red); }

.ls-explore h3, .ls-picker h3, .ls-poll h3, .guide-safety h3, .faq h3 {
  margin-top: 0;
}

.gs-h {
  font-family: var(--anton);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 20px;
  color: var(--white);
  margin: 0 0 .5rem;
}
.gs-ic { color: var(--red); }
.gs-body { margin: 0; }

/* slider */
.lse-track { width: 100%; margin: 1.3rem 0 .5rem; }
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .16);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid var(--white);
  cursor: pointer;
  box-shadow: 0 0 20px rgba(255, 31, 61, .9);
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--red);
  cursor: pointer;
}
.lse-ends {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--grey-2);
}
.lse-meter { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); margin: .9rem 0; }
.lse-meter > i { display: block; height: 100%; border-radius: 2px; background: var(--red); transition: width .4s var(--ease); }
.lse-out { margin: .9rem 0 0; }

/* buttons */
.lsp-opts, .lspoll-opts { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 0; }
.lsp-opts button, .lspoll-opts button {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--bone);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .65rem 1.15rem;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.lsp-opts button:hover, .lspoll-opts button:hover,
.lsp-opts button[aria-pressed="true"], .lspoll-opts button[aria-pressed="true"] {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.lsp-result, .lspoll-res { margin-top: 1.2rem; }
.lspr-card h4 {
  font-family: var(--anton);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 24px;
  color: var(--white);
  margin: 0 0 .4rem;
}

/* --------------------------------------------------------- author + footer */

.lq-author-h {
  font-family: var(--anton);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 20px;
  color: var(--white);
  margin: 0 0 .6rem;
}
.aname { color: var(--red); }

.lq-next { margin: 3rem 0 0; }
.lq-next-all {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.lq-next-all:hover { color: var(--white); }

.site-footer {
  margin-top: clamp(4rem, 8vw, 7rem);
  padding: 3rem clamp(1.25rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
  background: var(--black);
  font-size: 14px;
  color: var(--grey-2);
}
.foot-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.2rem; }
.foot-nav a {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey-1);
  text-decoration: none;
}
.foot-nav a:hover { color: var(--red); }
.disclosure { max-width: 50rem; }

/* ------------------------------------------------------------------ motion */

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ mobile */

.lq-burger {
  display: none;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--bone);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  padding: .6rem 1.1rem;
  cursor: pointer;
}
.nav-mobile { display: none; }

/* ------------------------------------------------------------- comparison
   A real table, not a card grid pretending to be one. Flat panel, hairline
   rules, and the row for the page you are on gets the red edge so the eye
   knows where it is standing before it reads a single cell.               */
.lq-cmp-wrap {
  margin: 2.2rem 0 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--ink-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lq-cmp {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: clamp(14px, 1.4vw, 16px);
}
.lq-cmp thead th {
  padding: .95rem 1.1rem;
  text-align: left;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey-2);
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.lq-cmp tbody th {
  padding: 1.05rem 1.1rem;
  text-align: left;
  font-family: var(--anton);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-size: clamp(15px, 1.7vw, 19px);
  color: var(--white);
  white-space: nowrap;
}
.lq-cmp tbody th a { color: var(--white); text-decoration: none; }
.lq-cmp tbody th a:hover { color: var(--red-lit); }
.lq-cmp td {
  padding: 1.05rem 1.1rem;
  color: var(--grey-1);
  vertical-align: top;
}
.lq-cmp tbody tr + tr th,
.lq-cmp tbody tr + tr td { border-top: 1px solid var(--line-2); }
.lq-cmp tbody tr.is-this th,
.lq-cmp tbody tr.is-this td { background: rgba(255, 31, 61, .06); }
.lq-cmp tbody tr.is-this th {
  box-shadow: inset 3px 0 0 var(--red);
  color: var(--red-lit);
}
.lq-cmp-note {
  margin: .2rem 0 0;
  font-size: 14px;
  color: var(--grey-2);
}

/* ---------------------------------------------------------------- mistakes
   The section people actually scroll for. Each item leads with a red cross
   so the block reads as a list of things not to do at a glance.           */
.lq-miss { list-style: none; margin: 2.2rem 0 0; padding: 0; }
.lq-miss-i {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 1.1rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line-2);
}
.lq-miss-i:last-child { border-bottom: 1px solid var(--line-2); }
.lq-miss-x {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-top: .15rem;
  border: 1px solid var(--red-deep);
  border-radius: 50%;
  color: var(--red);
  font-size: 13px;
  line-height: 1;
}
.lq-miss-i h3 { margin: 0 0 .45rem; }
.lq-miss-i p { margin: 0; }

/* ----------------------------------------------------------------- sources
   Quieter than the widgets on purpose. This is the receipt, not the pitch. */
.lq-src {
  margin: 2.5rem 0;
  padding: clamp(1.3rem, 2.6vw, 1.8rem);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--ink-0);
}
.lq-src-h {
  margin: 0 0 .9rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grey-2);
}
.lq-src ol { margin: 0; padding-left: 1.3rem; }
.lq-src li { margin: 0 0 .75rem; color: var(--grey-2); font-size: 15px; }
.lq-src li:last-child { margin-bottom: 0; }
.lq-src li a {
  display: block;
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid var(--red-dark);
  padding-bottom: .15rem;
  width: fit-content;
}
.lq-src li a:hover { color: var(--red-lit); border-bottom-color: var(--red); }
.lq-src-pub { display: block; margin-top: .25rem; font-size: 13px; }

@media (max-width: 900px) {
  .lq-nav, .lq-cta { display: none; }
  .lq-burger { display: inline-block; }

  .nav-mobile {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    background: var(--ink-1);
    border-bottom: 1px solid var(--line);
    transition: max-height .4s var(--ease);
  }
  .nav-mobile[aria-hidden="false"] { max-height: 420px; }
  .nav-mobile a {
    display: block;
    padding: 1rem clamp(1rem, 4vw, 2rem);
    border-top: 1px solid var(--line-2);
    font-family: var(--anton);
    font-weight: 400;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: -.01em;
    color: var(--bone);
    text-decoration: none;
  }
  .nav-mobile a:hover { color: var(--red); }

  .lq-mast { padding-top: 8rem; min-height: 0; }
  .lq-spec { grid-template-columns: repeat(2, 1fr); }
  .lq-spec-item:nth-child(2n) { border-right: 0; }
  .lq-spec-item:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); }
  .lq-step { grid-template-columns: 3.2rem 1fr; gap: .9rem; }
  .lq-step-n { font-size: 38px; }
  .lq-row { grid-template-columns: 2.6rem 1fr; }
  .lq-row-go { display: none; }
  /* The ghost word is wider than a phone; shrink it so it stays a texture
     rather than one enormous letter filling the slab. */
  .lq-hook-ghost { font-size: clamp(90px, 34vw, 150px); }
}

@media (max-width: 520px) {
  body.lq { font-size: 17px; }
  .lq-spec { grid-template-columns: 1fr; }
  .lq-spec-item { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .lq-spec-item:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .lq-glow::after { animation: none; }
  .lq-row, .lq-row-go, .lq-cta { transition: none; }
}

/* New v2 blocks on small screens. The table keeps its own horizontal scroll
   rather than collapsing, because a four column comparison read as stacked
   cards loses the whole point of putting it in a table. */
@media (max-width: 900px) {
  .lq-cmp { min-width: 560px; }
  .lq-cmp thead th,
  .lq-cmp tbody th,
  .lq-cmp td { padding: .85rem .8rem; }
  .lq-miss-i { grid-template-columns: 1.9rem 1fr; gap: .8rem; }
  .lq-miss-x { width: 1.7rem; height: 1.7rem; font-size: 11px; }
}

@media (max-width: 520px) {
  .lq-cmp { min-width: 480px; }
  .lq-cmp-wrap { border-radius: 12px; }
  .lq-src li { font-size: 14px; }
}