/* ringospin-casino.live — stylesheet */
/* Tema oscuro único. Fondo granate casi negro con brillos suaves de
   frambuesa, oro y coral; el acento de marca es un rosa frambuesa legible
   sobre fondo oscuro y el oro queda para las superficies de llamada a la
   acción. Todos los colores son variables declaradas en :root. */

:root {
  color-scheme: dark;

  /* Fondo y superficies: una sola familia de tono granate cerca del negro,
     para que cada superficie elevada parezca del mismo material. */
  --wine-950: #0A0306;   /* footer, deepest shade */
  --wine-900: #12060C;   /* page ground */
  --wine-800: #1E0B15;   /* raised tiles, tables */
  --wine-750: #170810;   /* copy card */
  --wine-700: #2A1020;   /* hover surfaces, raised edges */
  --wine-650: #10050A;   /* lead-box far corner */

  /* Oro: color de señal para botones y detalles con texto oscuro encima. */
  --gold: #FFC24B;
  --gold-soft: #FFE1A3;
  --gold-deep: #E89B1E;

  /* Frambuesa de marca: titulares, reglas, iconos y etiquetas en mayúsculas. */
  --rose: #F0607F;
  --rose-soft: #5A1E36;
  --rose-deep: #FF9DB3;

  /* Señales secundarias: cintas, puntos y marcadores. */
  --coral: #FF8A5C;
  --ember: #FF8A5C;

  /* Brillos del bloque principal */
  --plum-050: #2A0E1C;
  --rose-glow: rgba(240, 96, 127, 0.20);
  --ember-glow: rgba(255, 138, 92, 0.10);

  --gold-glow: rgba(255, 194, 75, 0.12);
  --gold-haze: rgba(255, 194, 75, 0.08);
  --gold-wash: rgba(255, 194, 75, 0.14);

  --rose-wash: rgba(240, 96, 127, 0.12);
  --rose-edge: rgba(240, 96, 127, 0.36);

  /* Text */
  --txt-100: #F6E9EE;
  --txt-300: #C7A9B6;

  --line: rgba(240, 170, 190, 0.10);
  --line-strong: rgba(240, 170, 190, 0.20);

  /* Tipografía: Sora para titulares y cifras, Nunito Sans para el texto. */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Type scale */
  --fs-1: 1.0625rem;
  --fs-2: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --fs-3: clamp(1.9rem, 1.4rem + 2.6vw, 2.9rem);
  /* H1 — a touch tighter than before, so the compact lead-box keeps the lead. */
  --fs-4: clamp(1.95rem, 1.3rem + 3.1vw, 3.35rem);

  /* Formas: radios algo mayores que en un diseño cuadrado. */
  --rad-xs: 8px;
  --rad-sm: 12px;
  --rad-md: 16px;
  --rad-lg: 20px;
  --rad-xl: clamp(16px, 1.8vw, 24px);
  --rad-btn: 999px;

  /* Elevation. Deep near-black shadows — on a dark ground a stronger
     shade is what separates a raised surface from the field behind it. */
  --lift-1: 0 10px 24px -14px rgba(0, 0, 0, 0.55);
  --lift-2: 0 18px 38px -20px rgba(0, 0, 0, 0.6);
  --lift-3: 0 30px 60px -28px rgba(0, 0, 0, 0.65);

  /* Rhythm */
  --side-pad: clamp(1.25rem, 4vw, 2.5rem);
  --gap-y: clamp(2rem, 4.6vw, 3.5rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* No element may push the document wider than the viewport. */
html, body { max-width: 100%; overflow-x: hidden; }

img, svg { max-width: 100%; }

/* Keeps a jump target clear of the viewport edge. */
.lead-box,
.tiles,
.qa,
.copy h3 { scroll-margin-top: 1.5rem; }

body {
  margin: 0;
  /* Three very low-alpha washes keep the long page from reading as a flat
     slab; the solid midnight navy underneath is what the browser actually
     paints for overscroll and for the address bar. */
  background:
    radial-gradient(56% 38% at 6% -6%, rgba(240, 96, 127, 0.16) 0%, transparent 64%),
    radial-gradient(48% 32% at 96% 4%, rgba(255, 194, 75, 0.07) 0%, transparent 62%),
    radial-gradient(50% 32% at 40% 100%, rgba(255, 138, 92, 0.06) 0%, transparent 66%),
    var(--wine-900);
  background-attachment: fixed;
  color: var(--txt-300);
  font-family: var(--font-body);
  font-size: var(--fs-1);
  line-height: 1.68;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.shell {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--side-pad);
}

/* ---------- Top bar ---------- */

/* NB: .site-top also carries .shell, which sets padding-inline.
   Only padding-block here — a `padding` shorthand would wipe it. */
.site-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: clamp(1.25rem, 3vw, 2rem) 0;
}

.top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

.chip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: clamp(1.15rem, 3.2vw, 1.6rem);
  border-radius: var(--rad-btn);
  /* Transparent border keeps the solid chip-btn exactly as tall as the
     outlined one, so the pair sits on a shared baseline. */
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms ease,
    transform 180ms ease;
}

.chip-btn--gold {
  background: linear-gradient(175deg, var(--gold-soft) 0%, var(--gold) 52%, var(--gold-deep) 100%);
  color: #2B1A03;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 8px 18px -12px rgba(232, 155, 30, 0.45);
}

.chip-btn--gold:hover,
.chip-btn--gold:focus-visible {
  background: linear-gradient(175deg, #FFF0C8 0%, var(--gold-soft) 55%, var(--gold) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 14px 26px -12px rgba(232, 155, 30, 0.5);
  transform: translateY(-1px);
}

.chip-btn--ghost {
  background: var(--wine-800);
  border-color: var(--line-strong);
  color: var(--txt-100);
}

.chip-btn--ghost:hover,
.chip-btn--ghost:focus-visible {
  background: var(--rose-wash);
  border-color: var(--rose-edge);
  color: var(--rose);
  transform: translateY(-1px);
}

/* ---------- Slide-out side-panel ----------
   Pure-CSS disclosure: a visually hidden checkbox drives the panel, and
   every toggle (menu-btn, close, backdrop) is a <label> bound to it.
   The checkbox stays keyboard-focusable, so Space opens and closes. */

.top-left {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 0.875rem);
}

.menu-wrap {
  display: flex;
  align-items: center;
}

/* ---------- Logo ---------- */

/* Two dice and the wordmark, set in a quiet raised badge so the mark reads
   as one object against the header instead of floating loose beside the
   text. Footprint stays close to 42x32: the badge is 38x38. */

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border-radius: var(--rad-md);
  text-decoration: none;
  transition: background-color 180ms ease, transform 180ms ease;
}

.mark:hover,
.mark:focus-visible {
  background: var(--rose-wash);
}

.mark__badge {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--rad-sm);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 120% at 24% 12%, rgba(255, 194, 75, 0.22) 0%, transparent 62%),
    linear-gradient(152deg, var(--wine-700) 0%, var(--wine-800) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 6px 14px -10px rgba(0, 0, 0, 0.3);
  transition: border-color 200ms ease, box-shadow 220ms ease;
}

.mark:hover .mark__badge {
  border-color: var(--rose-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 8px 18px -10px rgba(214, 56, 100, 0.45);
}

.mark__badge svg {
  display: block;
  width: 28px;
  height: 22px;
}

.mark__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--txt-100);
  white-space: nowrap;
}

/* "Casino" carries the accent so the lockup has a hierarchy without
   changing the brand name or adding a second line of text. */
.mark__word b {
  font-weight: 700;
  color: var(--rose);
}

@media (max-width: 420px) {
  .mark { gap: 0.4375rem; padding-inline: 0.1875rem 0.25rem; }
  .mark__badge { width: 34px; height: 34px; border-radius: var(--rad-sm); }
  .mark__badge svg { width: 25px; height: 20px; }
  .mark__word { font-size: 1rem; }
}

.menu-flag {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--rad-btn);
  border: 1px solid var(--line-strong);
  background: var(--wine-800);
  color: var(--txt-100);
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.menu-btn:hover {
  background: var(--rose-wash);
  border-color: var(--rose-edge);
  color: var(--rose);
}

/* The ring lands on the label, since the input itself is 1px. */
.menu-flag:focus-visible + .menu-btn {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}

.menu-shade {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(8, 2, 5, 0.62);
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition: opacity 280ms ease, visibility 280ms;
}

.menu-flag:checked ~ .menu-shade {
  opacity: 1;
  visibility: visible;
}

.side-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: min(86vw, 360px);
  padding: 1rem 1rem 1.5rem;
  background: var(--wine-750);
  border-right: 1px solid var(--line);
  box-shadow: 26px 0 54px -26px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  /* visibility keeps the closed panel's links out of the tab order —
     without it, keyboard users tab into an offscreen menu. */
  visibility: hidden;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), visibility 320ms;
}

.menu-flag:checked ~ .side-panel {
  transform: translateX(0);
  visibility: visible;
}

.side-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
}

.side-panel__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-100);
}

.side-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--rad-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--txt-300);
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.side-panel__close:hover {
  background: var(--rose-wash);
  border-color: var(--rose-edge);
  color: var(--rose);
}

.side-panel__nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-panel__link {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 0.75rem;
  border-radius: var(--rad-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--txt-100);
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.side-panel__link:hover,
.side-panel__link:focus-visible {
  background: var(--rose-wash);
  color: var(--rose);
}

.side-panel__rule {
  height: 1px;
  margin: 1rem 0.25rem;
  background: var(--line);
}

.side-panel__label {
  margin: 0 0 0.5rem;
  padding-inline: 0.75rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-300);
  opacity: 0.8;
}

/* ---------- Heading ---------- */

/* Tight: the lead-box below is a band rather than a stage, so the title does
   not need a deep well of space to separate them. */
.title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  padding-block: clamp(1.75rem, 4.5vw, 2.75rem) 0;
}

.title-block h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--txt-100);
  text-align: center;
  text-wrap: balance;
}

/* Short rule under the title, tying the heading to the accent without
   adding another line of text. */
.title-block::after {
  content: "";
  width: 92px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rose) 0%, var(--ember) 50%, var(--gold-deep) 100%);
  opacity: 1;
}

/* ---------- Hero ----------
   Deliberately compact: a band, not a stage — an eyebrow, the offer, the
   CTA and a four-cell fact strip, so the first screen also shows the
   start of the article. */

.lead-box {
  position: relative;
  overflow: hidden;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.875rem, 2vw, 1.125rem);
  padding: clamp(1.1rem, 2.6vw, 1.6rem) clamp(1.1rem, 3vw, 2rem);
  border-radius: var(--rad-xl);
  border: 1px solid var(--line-strong);
  /* Violet and azure washes on opposing corners with one gold flare, over
     a pale indigo ramp — the cool field is what keeps the gold warm. */
  background:
    radial-gradient(80% 140% at 90% 0%, var(--rose-glow) 0%, transparent 58%),
    radial-gradient(80% 140% at 6% 100%, var(--ember-glow) 0%, transparent 62%),
    radial-gradient(56% 100% at 24% 6%, var(--gold-glow) 0%, transparent 54%),
    linear-gradient(204deg, var(--plum-050) 0%, var(--wine-800) 50%, var(--wine-650) 100%);
  box-shadow:
    var(--lift-3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Colour rule along the top edge, brightest under the offer. */
.lead-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--rose) 0%, var(--ember) 55%, var(--gold-deep) 100%);
  opacity: 0.9;
}

/* ---------- Hero decoration ----------
   Two quiet layers under the copy: an abstracted wheel bleeding off the
   right edge and a hairline weave. Both very low alpha, so they read as
   depth and never as pattern. */

.lead-box__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.lead-box__fx::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    118deg,
    rgba(240, 96, 127, 0.04) 0 1px,
    transparent 1px 38px);
}

.lead-box__wheel {
  position: absolute;
  top: 50%;
  right: -78px;
  width: 260px;
  height: 260px;
  transform: translateY(-50%);
}

@media (max-width: 720px) {
  .lead-box__wheel {
    right: -104px;
    width: 210px;
    height: 210px;
    opacity: 0.6;
  }
}

/* Everything in flow sits above .lead-box__fx (z-index 0): positioned
   elements paint after in-flow content, so without this the decoration
   would cover the copy. */
.lead-box__badge,
.lead-box__row,
.lead-box__stats {
  position: relative;
  z-index: 1;
}

.lead-box__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  max-width: 100%;
  margin: 0;
  padding: 0.3125rem 0.875rem;
  border-radius: 999px;
  border: 1px solid var(--rose-edge);
  background: var(--rose-wash);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--rose-deep);
}

.lead-box__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(255, 194, 75, 0.35);
}

.lead-box__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
}

.lead-box__copy {
  flex: 1 1 17rem;
  min-width: 0;
}

.lead-box__eyebrow {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--txt-300);
}

.lead-box__big {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 5.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--rose);
}

.lead-box__big-note {
  font-size: clamp(0.9375rem, 1.9vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--txt-100);
}

.lead-box__meta {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--txt-300);
}

.lead-box__cta {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  flex: 0 0 auto;
}

.lead-box__chip {
  display: block;
  flex: 0 0 auto;
  width: clamp(56px, 8vw, 80px);
  filter: drop-shadow(0 10px 18px rgba(232, 155, 30, 0.30));
}

.lead-box__chip svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Four cells on one rule, so the supporting numbers never compete with
   the offer figure above them. */
.lead-box__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem clamp(0.75rem, 2vw, 1.5rem);
  margin: 0;
  padding: clamp(0.75rem, 2vw, 0.9375rem) 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

@media (min-width: 620px) {
  .lead-box__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.lead-box__stats li {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}

.lead-box__stats b {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--txt-100);
}

.lead-box__stats span {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-300);
  opacity: 0.85;
}

/* Below 560px the coin would crowd the button, so the pair stacks and the
   CTA takes the full width of the card. */
@media (max-width: 559px) {
  .lead-box__cta {
    width: 100%;
    justify-content: flex-start;
  }

  .lead-box__cta .cta { flex: 1 1 auto; text-align: center; }
}

/* ---------- Buttons ---------- */

.cta {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.8125rem 1.75rem;
  border-radius: var(--rad-btn);
  border: 1px solid rgba(232, 155, 30, 0.5);
  background: linear-gradient(175deg, var(--gold-soft) 0%, var(--gold) 52%, var(--gold-deep) 100%);
  color: #2B1A03;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 12px 22px -14px rgba(232, 155, 30, 0.5);
  transition: background 180ms ease, box-shadow 220ms ease, transform 180ms ease;
}

.cta:hover,
.cta:focus-visible {
  background: linear-gradient(175deg, #FFF0C8 0%, var(--gold-soft) 55%, var(--gold) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 18px 30px -14px rgba(232, 155, 30, 0.55);
  transform: translateY(-2px);
}

/* The lead-box CTA only; in-article buttons keep the base size. */
.cta--xl {
  margin-top: 0;
  padding: 0.9375rem clamp(1.5rem, 4vw, 2.25rem);
  font-size: 0.9375rem;
}

/* ---------- Shimmer utility ----------
   Add `glint` to any solid gold button. Registering the alpha as a
   typed custom property lets the hover step ramp instead of jumping;
   browsers without @property support just switch it instantly. */

@property --sheen-alpha {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}

.glint {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --sheen-alpha: 0.5;
  transition: --sheen-alpha 260ms ease;
}

/* z-index -1 paints the gloss above the gold fill but below the label,
   so the text never washes out as the light passes over it. */
.glint::after {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 45%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, var(--sheen-alpha)) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: translateX(-130%) skewX(-16deg);
  animation: glint-run 3.2s ease-in-out infinite;
}

.glint:hover,
.glint:focus-visible {
  --sheen-alpha: 0.72;
}

/* Travels for the first 1.7s, then rests offscreen for the remainder —
   a loop with a built-in pause rather than a constant sweep. */
@keyframes glint-run {
  0%, 6%    { transform: translateX(-130%) skewX(-16deg); }
  58%, 100% { transform: translateX(330%) skewX(-16deg); }
}

/* ---------- Category cards ---------- */

/* Mobile-first: one column, widening to two then four. Explicit
   breakpoints rather than auto-fit, so the row never breaks 3+1. */
.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 2vw, 1rem);
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
}

@media (min-width: 560px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .tiles { grid-template-columns: repeat(4, 1fr); }
}

.tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 82px;
  padding: 1.0625rem 1.125rem 0.9375rem 1.125rem;
  border-radius: var(--rad-md);
  border: 1px solid var(--line);
  background:
    linear-gradient(158deg, var(--wine-800) 0%, var(--wine-750) 100%);
  box-shadow: var(--lift-1);
  text-decoration: none;
  overflow: hidden;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    box-shadow 240ms ease,
    transform 200ms ease;
}

/* Violet edge that grows on hover — the card's only moving part besides
   the lift, so the row never flickers when the pointer crosses it. */
.tile::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rose-deep) 0%, var(--rose-soft) 100%);
  opacity: 0.35;
  transition: opacity 200ms ease;
}

.tile:hover,
.tile:focus-visible {
  background: linear-gradient(158deg, var(--wine-700) 0%, var(--wine-800) 100%);
  border-color: var(--rose-edge);
  box-shadow:
    var(--lift-2),
    0 10px 24px -14px rgba(214, 56, 100, 0.32);
  transform: translateY(-3px);
}

.tile:hover::before,
.tile:focus-visible::before { opacity: 1; }

.tile__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.tile__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--txt-100);
}

.tile__hint {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--txt-300);
}

.tile__pic {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}

.tile__pic svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------- Prose block ---------- */

.article-box {
  margin-top: var(--gap-y);
  padding: clamp(1.75rem, 4.2vw, 3.25rem) clamp(1.25rem, 4.2vw, 3.5rem);
  border-radius: var(--rad-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 40% at 0% 0%, rgba(240, 96, 127, 0.08) 0%, transparent 62%),
    linear-gradient(192deg, var(--wine-800) 0%, var(--wine-750) 100%);
  box-shadow: var(--lift-3);
}

/* The reading measure is capped on the text elements, not the wrapper, so
   a full-width block dropped into the copy can span the whole column. */
.copy {
  max-width: none;
  margin-inline: 0;
}

/* ---------- Content header row ----------
   Carries the contents control above the article. */

.article-box__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

/* The rail carries its own bottom margin when it stands alone; inside
   this row the wrapper owns the spacing. */
.article-box__head .contents { margin-bottom: 0; }

/* ---------- Table of contents ---------- */

/* Collapsed it is a single compact line sized to its own content, and the
   open list is absolutely positioned — so neither state reflows the copy. */
.contents {
  position: relative;
  z-index: 3;
  width: fit-content;
  max-width: 100%;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.contents__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--rad-sm);
  border: 1px solid var(--line-strong);
  background: var(--wine-700);
  cursor: pointer;
  list-style: none;
  box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.25);
  transition: background-color 180ms ease, border-color 180ms ease;
}

.contents__toggle::-webkit-details-marker { display: none; }

.contents__toggle:hover,
.contents[open] .contents__toggle {
  background: var(--rose-wash);
  border-color: var(--rose-edge);
}

.contents__label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--txt-100);
  white-space: nowrap;
}

.contents__arrow {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-left: 0.125rem;
  color: var(--rose);
  transition: transform 220ms ease;
}

.contents__arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contents[open] .contents__arrow { transform: rotate(180deg); }

.contents__drop {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 5;
  min-width: 232px;
  padding: 0.5rem;
  border-radius: var(--rad-md);
  border: 1px solid var(--rose-edge);
  background: var(--wine-700);
  box-shadow: 0 24px 42px -18px rgba(0, 0, 0, 0.3);
  animation: contents-in 200ms ease;
}

@keyframes contents-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Where ::details-content is supported, fade the panel in AND out.
   allow-discrete holds visibility through the closing fade — a plain
   animation can only ever play on open. */
@supports selector(::details-content) {
  .contents__drop { animation: none; }

  .contents::details-content {
    opacity: 0;
    transition: opacity 220ms ease, content-visibility 220ms allow-discrete;
  }

  .contents[open]::details-content { opacity: 1; }
}

.contents__ico {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--rose);
}

.contents__ico path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.contents__list {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: contents;
}

.contents__link {
  display: flex;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  margin-inline: -0.5rem;
  border-radius: var(--rad-xs);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--txt-300);
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

/* Numbered because a contents list is a real sequence — these are the
   sections in page order. */
.contents__link::before {
  counter-increment: contents;
  content: counter(contents);
  flex: 0 0 auto;
  width: 1ch;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--rose);
  opacity: 0.75;
}

.contents__link:hover,
.contents__link:focus-visible {
  background: var(--rose-wash);
  color: var(--txt-100);
}

.contents__link:hover::before,
.contents__link:focus-visible::before {
  opacity: 1;
}

.copy h2,
.copy h3,
.copy p { max-width: 68ch; }

/* Section heads carry a short violet stem on the left. It is drawn in the
   margin, so the text baseline and the reading measure are untouched. */
.copy h2 {
  position: relative;
  margin: clamp(2.5rem, 4.8vw, 3.25rem) 0 1rem;
  padding-bottom: 0.625rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 1.8rem);
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--txt-100);
  text-wrap: balance;
  scroll-margin-top: 1.5rem;
}

.copy h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rose-deep) 0%, var(--ember) 100%);
}

.copy h3 {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0.625rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--rose-deep);
  text-wrap: balance;
}

.copy > :first-child { margin-top: 0; }

/* ----- Data tables ----- */

.tbl-scroll {
  margin-block: clamp(1.25rem, 3vw, 1.75rem);
  overflow-x: auto;
  border-radius: var(--rad-md);
  border: 1px solid var(--line);
  background: var(--wine-750);
  box-shadow: 0 12px 26px -20px rgba(0, 0, 0, 0.25);
}

.copy table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.copy th {
  padding: 0.8125rem 1rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rose-deep);
  background: var(--wine-700);
  border-bottom: 2px solid var(--rose-edge);
}

.copy td {
  padding: 0.75rem 1rem;
  vertical-align: top;
  line-height: 1.5;
  color: var(--txt-300);
  border-bottom: 1px solid var(--line);
}

/* Zebra striping, so a wide table stays readable once it scrolls. */
.copy tbody tr:nth-child(even) td { background: rgba(214, 56, 100, 0.05); }

.copy td:first-child {
  color: var(--txt-100);
  font-weight: 600;
}

.copy tbody tr:last-child td { border-bottom: 0; }

.copy tbody tr:hover td { background: var(--rose-wash); }

/* ----- In-content call to action ----- */

.copy-action {
  display: flex;
  margin-block: clamp(1.5rem, 3.5vw, 2.25rem);
}

.copy-action .cta { margin-top: 0; }

/* The contents list is long now, so cap it and let it scroll. */
.contents__drop {
  max-height: min(360px, 60vh);
  overflow-y: auto;
}

.copy p {
  margin: 0 0 1.35rem;
  color: var(--txt-100);
  line-height: 1.7;
}

.copy p:last-child { margin-bottom: 0; }

/* Source copy carries real bullet lists; they inherit the paragraph
   measure and rhythm so a list never reads as a different column. */
.copy ul {
  max-width: 68ch;
  margin: 0 0 1.35rem;
  padding-left: 1.25rem;
  list-style: none;
}

.copy li {
  position: relative;
  margin-bottom: 0.5rem;
  color: var(--txt-100);
  line-height: 1.7;
}

.copy li:last-child { margin-bottom: 0; }

.copy li::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--rose);
  transform: rotate(45deg);
}

/* Numbered steps. Same rhythm and measure as the bullet list, but the
   marker is a counted chip drawn in the margin, so the text edge of both
   list types still lines up with the paragraphs above them. */
.copy ol {
  max-width: 68ch;
  margin: 0 0 1.35rem;
  padding-left: 2.25rem;
  list-style: none;
  counter-reset: step;
}

.copy ol li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: -2.25rem;
  top: 0.12em;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: var(--rad-xs);
  background: var(--rose-wash);
  border: 1px solid var(--rose-edge);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--rose-deep);
}

.copy strong {
  font-weight: 700;
  color: var(--rose-deep);
}

/* ---------- In-content showcase showcase ---------- */

.showcase {
  position: relative;
  margin-block: clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(1.125rem, 3vw, 1.75rem);
  border-radius: var(--rad-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 130% at 88% 0%, var(--gold-haze) 0%, transparent 60%),
    linear-gradient(150deg, var(--wine-700) 0%, var(--plum-050) 100%);
  box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.25);
}

.showcase__label {
  margin: 0 0 clamp(0.875rem, 2vw, 1.125rem);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-deep);
}

/* Five across in two rows. No scrolling — the grid reflows to three then
   two columns instead. */
.showcase__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(0.625rem, 1.6vw, 0.9375rem);
}

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

@media (min-width: 860px) {
  .showcase__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.slot {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  text-decoration: none;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.slot:hover,
.slot:focus-visible { transform: translateY(-5px); }

.slot__cover {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: var(--rad-md);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 10px 22px -12px rgba(0, 0, 0, 0.35);
  transition: box-shadow 240ms ease;
}

.slot:hover .slot__cover,
.slot:focus-visible .slot__cover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    0 16px 30px -12px rgba(0, 0, 0, 0.35),
    0 0 22px -6px rgba(214, 56, 100, 0.45);
}

/* Top gloss and floor shade, so every cover reads as a lit object
   rather than a flat swatch. */
.slot__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.02) 42%,
    rgba(60, 10, 30, 0.20) 100%);
}

/* REAL ARTWORK GOES HERE.
   Add <img class="slot__img" src="cover.jpg" alt=""> as the first child of
   .slot__cover and it fills the tile, covering the illustration beneath.
   Supply 600x600 or larger; the gloss, ribbon and hover all still apply. */
.slot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Vector scene behind the logotype: sits below the gloss pseudo-element
   because it is an earlier child, and below the title via z-index. */
.slot__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Slot covers are dominated by their own logotype, so the title is set
   as display type over the art. */
.slot__title {
  position: absolute;
  top: 8%;
  left: 0;
  right: 0;
  z-index: 1;
  padding-inline: 8%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.6875rem, 2.3vw, 1rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: #FFFFFF;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 3px 10px rgba(0, 0, 0, 0.6);
}

.slot__title em {
  display: block;
  font-style: normal;
  color: #FFE58C;
}

.slot__title small {
  display: block;
  margin-top: 0.25em;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.82);
}

.slot__tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.25rem 0.25rem;
  /* Deeper than --coral so the small uppercase label keeps its contrast. */
  background: linear-gradient(90deg, #E89B1E 0%, #8F1A3E 100%);
  color: #FFFFFF;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.slot__name {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--txt-100);
  transition: color 180ms ease;
}

.slot__studio {
  font-size: 0.625rem;
  line-height: 1.3;
  color: var(--txt-300);
  opacity: 0.8;
}

.slot:hover .slot__name,
.slot:focus-visible .slot__name { color: var(--rose); }

/* ----- Cover art. Each is a layered radial "spotlight" over a diagonal
   base ramp, which is what gives the flat gradients depth. ----- */

.cv-gem {
  background:
    radial-gradient(70% 60% at 32% 26%, #FFC4EA 0%, transparent 62%),
    radial-gradient(80% 70% at 76% 82%, #9C82D8 0%, transparent 66%),
    linear-gradient(150deg, #DE94CF 0%, #8E74C6 100%);
}

.cv-jade {
  background:
    radial-gradient(66% 58% at 30% 24%, #9EEBCB 0%, transparent 60%),
    radial-gradient(80% 74% at 78% 84%, #4F8A7A 0%, transparent 64%),
    linear-gradient(150deg, #66B79B 0%, #4A7A6C 100%);
}

.cv-coral {
  background:
    radial-gradient(66% 58% at 32% 24%, #FFB0A8 0%, transparent 60%),
    radial-gradient(84% 76% at 78% 86%, #9A5A63 0%, transparent 66%),
    linear-gradient(150deg, #E17C8A 0%, #9E5A66 100%);
}

.cv-tide {
  background:
    radial-gradient(64% 56% at 30% 22%, #A8E8F0 0%, transparent 58%),
    radial-gradient(84% 76% at 80% 88%, #5A73A6 0%, transparent 66%),
    linear-gradient(150deg, #6FA6CC 0%, #56699A 100%);
}

.cv-dune {
  background:
    radial-gradient(58% 52% at 46% 40%, #FFEFB8 0%, #F7BD74 46%, transparent 72%),
    radial-gradient(86% 80% at 82% 90%, #A8685A 0%, transparent 68%),
    linear-gradient(150deg, #F0A070 0%, #B06A5A 100%);
}

.cv-rose {
  background:
    radial-gradient(64% 58% at 30% 24%, #FFC2D4 0%, transparent 60%),
    radial-gradient(84% 76% at 80% 86%, #9A5A88 0%, transparent 66%),
    linear-gradient(150deg, #E88AAE 0%, #975C8C 100%);
}

.cv-sky {
  background:
    radial-gradient(60% 54% at 44% 34%, #B8ECFF 0%, transparent 62%),
    radial-gradient(86% 78% at 80% 88%, #5E6DA8 0%, transparent 66%),
    linear-gradient(150deg, #7FA1E6 0%, #5C689E 100%);
}

.cv-ruby {
  background:
    radial-gradient(62% 56% at 34% 26%, #FFB8AE 0%, transparent 58%),
    radial-gradient(86% 78% at 80% 88%, #8A5560 0%, transparent 66%),
    linear-gradient(150deg, #CF7A88 0%, #8A5763 100%);
}

.cv-plum {
  background:
    radial-gradient(62% 56% at 32% 24%, #FFC9F5 0%, transparent 60%),
    radial-gradient(86% 78% at 80% 88%, #7A5CA0 0%, transparent 66%),
    linear-gradient(150deg, #BF86DE 0%, #7E60A8 100%);
}

.cv-dusk {
  background:
    radial-gradient(60% 54% at 40% 28%, #C8D6FF 0%, transparent 58%),
    radial-gradient(86% 78% at 80% 88%, #5C5E8E 0%, transparent 66%),
    linear-gradient(150deg, #8A8ED6 0%, #5E6192 100%);
}

/* ---------- FAQ ----------
   <details> again: a native accordion that is keyboard-operable and
   announces its expanded state without a line of script. */

.qa {
  margin-top: var(--gap-y);
}

.qa__title {
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--txt-100);
  text-wrap: balance;
}

.qa__intro {
  max-width: 68ch;
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  line-height: 1.7;
  color: var(--txt-300);
}

/* Closing line under the accordion — same measure as the intro, so the
   block reads as a single column of text around the questions. */
.qa__outro {
  max-width: 68ch;
  margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
  line-height: 1.7;
  color: var(--txt-300);
}

.qa__list {
  display: grid;
  gap: 0.75rem;
}

.qa__item {
  border-radius: var(--rad-md);
  border: 1px solid var(--line);
  background: var(--wine-800);
  box-shadow: 0 12px 26px -20px rgba(0, 0, 0, 0.25);
  transition: border-color 200ms ease, background-color 200ms ease;
}

.qa__item:hover {
  border-color: var(--rose-edge);
}

.qa__item[open] {
  background: var(--wine-700);
  border-color: var(--rose-edge);
}

.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.5vw, 1.25rem) clamp(1.125rem, 3vw, 1.5rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  line-height: 1.35;
  color: var(--txt-100);
  transition: color 180ms ease;
}

.qa__q::-webkit-details-marker { display: none; }

.qa__q:hover,
.qa__item[open] .qa__q {
  color: var(--rose);
}

.qa__ico {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--rose);
}

.qa__ico path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* The vertical stroke swings flat, turning the plus into a minus. */
.qa__ico-v {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 260ms ease;
}

.qa__item[open] .qa__ico-v {
  transform: rotate(90deg);
}

.qa__a {
  max-width: 70ch;
  margin: 0;
  padding: 0 clamp(1.125rem, 3vw, 1.5rem) clamp(1.125rem, 2.5vw, 1.375rem);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--txt-300);
  animation: qa-in 220ms ease;
}

@keyframes qa-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsible gambling ---------- */

.safe {
  margin-top: var(--gap-y);
}

/* One quiet panel rather than four loose tiles on the page ground: the
   block has a header rule and a contained field, which lifts it out of
   the footer margin without shouting. */
.safe__panel {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--rad-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 150% at 4% 0%, var(--gold-haze) 0%, transparent 58%),
    linear-gradient(162deg, var(--wine-800) 0%, var(--wine-750) 100%);
  box-shadow: 0 18px 38px -26px rgba(0, 0, 0, 0.25);
}

.safe__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(1rem, 2.5vw, 1.375rem);
}

/* Short accent stem, then the rule that runs out to the panel edge. */
.safe__head::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--rose) 0%, var(--ember) 100%);
}

.safe__head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.safe__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: var(--txt-100);
}

.safe__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.625rem, 1.5vw, 0.875rem);
}

@media (min-width: 560px) {
  .safe__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .safe__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.safe__card {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  min-height: 78px;
  padding: 0.9375rem 1rem;
  border-radius: var(--rad-md);
  border: 1px solid var(--line);
  background: var(--wine-700);
  text-decoration: none;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
}

/* Only the two cards that actually navigate get a hover affordance. */
a.safe__card:hover,
a.safe__card:focus-visible {
  background: var(--rose-wash);
  border-color: var(--rose-edge);
  transform: translateY(-2px);
}

.safe__ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--rad-md);
  background: var(--rose-wash);
  border: 1px solid var(--rose-edge);
  color: var(--rose);
}

.safe__ico svg {
  width: 20px;
  height: 20px;
}

.safe__ico svg path,
.safe__ico svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.safe__age {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  color: var(--rose-deep);
}

.safe__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.safe__name {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--txt-100);
}

.safe__sub {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--txt-300);
  opacity: 0.85;
}

/* ---------- Footer ---------- */

.site-foot {
  position: relative;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-block: clamp(2rem, 4.5vw, 2.75rem);
  background: var(--wine-950);
  border-top: 1px solid var(--line);
}

/* Colour hairline above the footer rule, so the page closes on the accent. */
.site-foot::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 8%, rgba(214, 56, 100, 0.8) 28%, rgba(255, 170, 130, 0.75) 50%, rgba(255, 194, 75, 0.7) 72%, transparent 92%);
}

.site-foot__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.site-foot__note {
  max-width: 62ch;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--txt-300);
  opacity: 0.9;
}

/* ---------- Screen-reader helper ---------- */

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.site-foot__copy {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--txt-100);
}

.site-foot__copy a {
  color: var(--rose);
  text-decoration: none;
  border-bottom: 1px solid var(--rose-edge);
}

.site-foot__copy a:hover,
.site-foot__copy a:focus-visible {
  color: var(--rose-deep);
  border-bottom-color: currentColor;
}

/* ---------- A11y ---------- */

a:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
  .cta:hover,
  .cta:focus-visible,
  .chip-btn:hover,
  .chip-btn:focus-visible,
  .tile:hover,
  .tile:focus-visible,
  .slot:hover,
  .slot:focus-visible,
  a.safe__card:hover,
  a.safe__card:focus-visible { transform: none; }
  .glint::after { animation: none; opacity: 0; }
  .contents__drop,
  .qa__a { animation: none; }
  .contents::details-content { transition: none; }
}

/* ---------- Progressive-enhancement hooks (assets/js/ringo.js) ----------
   Both are inert until ringo.js adds the class. Without JS the page
   behaves exactly as before. */

/* Background scroll lock while the side-panel is open. */
html.menu-locked { overflow: hidden; }

/* Contents entry for the section currently in view. */
.contents__link.is-active {
  background: var(--rose-wash);
  color: var(--txt-100);
}

.contents__link.is-active::before { opacity: 1; }

/* ---------- Firma del autor ---------- */

.byline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
}

.byline__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--rose) 0%, #8F1A3E 100%);
  box-shadow: 0 0 0 2px var(--wine-800), 0 0 0 4px var(--gold-deep);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.875rem;
  color: #FFFFFF;
}

.byline__text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.byline__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--txt-100);
}

.byline__meta {
  font-size: 0.75rem;
  color: var(--txt-300);
}