/*
 * redrooms landing page. Colors, fonts and glass from the redrooms Design System
 * (https://claude.ai/artifact/Qi1A4eNX7puJpprGdHXtK5), same values as src/styles/tokens.css.
 */
/* The Design System's fonts, served with the site (no request to Google): Syne for titles, Figtree for text */
@font-face {
  font-family: "Syne";
  src: url("fonts/syne-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --bg: #0e0a0c;
  --surface: #181215;
  --border: rgba(255, 232, 238, 0.09);
  --border-strong: rgba(255, 232, 238, 0.18);
  --text: #f3e9ee;
  --text-muted: #b3a3a9;
  --text-soft: rgba(243, 233, 238, 0.85);
  --accent: #c9304a;
  --accent-hover: #d84560;
  --accent-light: #ef6b80;
  --on-accent: #ffffff;
  --alert: #ff3b30;
  --online: #3ddc84;
  --focus-glow: rgba(239, 107, 128, 0.18);
  --lava-bordeaux: #780e20;
  --lava-violet: #6e28a1;
  --lava-plum: #4f1778;
  --lava-magenta: #991a66;
  --glass-bg: rgba(38, 16, 24, 0.45);
  --glass-blur: blur(24px) saturate(160%);
  --glass-border: rgba(255, 232, 238, 0.12);
  --glass-highlight: inset 0 1px 0 rgba(255, 232, 238, 0.12);
  --field-bg: rgba(14, 10, 12, 0.55);
  --shadow-float: 0 18px 50px rgba(0, 0, 0, 0.55);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --font-display: "Syne", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
  color-scheme: dark;
}

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

/* The scrollbar, in the site's colors: thin, dark track, a soft rose handle */
html {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent-light) 50%, transparent) var(--bg);
}

@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    background: var(--bg);
  }

  ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent-light) 50%, transparent);
    border-radius: 999px;
    border: 2px solid var(--bg);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--accent-light);
  }
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent-light);
}

/* The lava lamp: slow blurred blobs behind everything */
.lava {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.lava span {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.7;
  animation: float 26s ease-in-out infinite alternate;
}

.lava span:nth-child(1) {
  width: 46vw;
  height: 46vw;
  left: -10vw;
  top: -12vw;
  background: var(--lava-bordeaux);
}

.lava span:nth-child(2) {
  width: 36vw;
  height: 36vw;
  right: -8vw;
  top: 10vh;
  background: var(--lava-plum);
  animation-duration: 32s;
}

.lava span:nth-child(3) {
  width: 30vw;
  height: 30vw;
  left: 30vw;
  bottom: -10vw;
  background: var(--lava-magenta);
  animation-duration: 38s;
}

.lava span:nth-child(4) {
  width: 22vw;
  height: 22vw;
  right: 20vw;
  bottom: 10vh;
  background: var(--lava-violet);
  opacity: 0.5;
  animation-duration: 29s;
}

/* With WebGL (lava.js), the app's lava lamp replaces the blurred blobs */
.lava canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lava.webgl span {
  display: none;
}

/* Film grain over the glows, the same as the app */
.lava .grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.12;
  mix-blend-mode: overlay;
}

@keyframes float {
  to {
    transform: translate(6vw, 8vh) scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lava span {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

.page {
  width: min(1080px, 100% - 32px);
  margin: 0 auto;
}

/* Top bar: the name, and a shortcut to the form */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}

.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}

/* The name: "red" in white, "ROOMS" in the light red, in capitals */
.logo span {
  color: var(--accent-light);
  text-shadow: var(--neon);
  animation: glow-flicker 6.1s 0.7s infinite; /* its own pace, so it never blinks with the other lights */
}

.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
}

/* The first screen: headline, one line, the form */
.hero {
  /* Not stretched to the screen's height: the space down to "What's inside" stays the same before and after
     signing up, whatever the form or the welcome panel measures */
  display: flex;
  flex-direction: column;
  /* The same 120px gap everywhere: logo to first line, form to "What's inside" (the heading's own top padding), cards to the
     next group, last cards to the footer */
  padding: 96px 0 0;
}

h1,
h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
}

h1 {
  margin-top: 14px;
  font-size: clamp(48px, 10vw, 112px);
}

h1 em {
  font-style: normal;
  color: var(--accent-light);
}

.lead {
  max-width: 560px;
  margin: 24px 0 32px;
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--text-soft);
}

/* The waitlist form, in the same glass as the app's panels */
.join {
  /* Across the page, from left to right, like the cards below */
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--shadow-float);
}

.row {
  display: flex;
  gap: 8px;
}

/* The email field is the point of the page: thicker than the other fields and buttons, with a clearer outline */
.join .field,
.join .button {
  height: 60px;
  font-size: 17px;
}

.join .field {
  border-color: color-mix(in srgb, var(--accent-light) 45%, transparent);
}

.field {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
}

.field::placeholder {
  color: var(--text-muted);
}

.field:focus-visible {
  outline: none;
  border-color: var(--accent-light);
  box-shadow: 0 0 0 3px var(--focus-glow);
}

.button {
  flex: none;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-md);
  /* Filled with the button red, the words in a pale red; on hover only the light inside appears */
  background: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-light) 55%, transparent);
  color: color-mix(in srgb, var(--accent-light) 35%, white);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  /* For the light under the pointer, drawn above the red but under the text */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* On hover, a soft white light follows the pointer across the red button (its spot is set by script.js).
   The red itself stays the same. */
.button:not(.ghost)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90px circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.35), transparent 60%);
  opacity: 0;
  transition: opacity 0.2s;
}

.button:not(.ghost):hover::before {
  opacity: 1;
}


/* The main "Join the waitlist" buttons: glass, with a thin light under it. A door icon (Lucide, closed then open) sits on the left.
   When the pointer is on the card around the button, the door opens and the red spreads from it across the whole button. */
.button.door {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 34px 0 28px;
  /* Glass, like the cards and the fields around it */
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight);
  color: #f6e6ea;
  transition: border-color 0.5s 0.4s, box-shadow 0.8s 0.3s;
}

.button.door::before {
  display: none; /* no pointer light here: the door has its own */
}

.door-label {
  text-shadow: 0 1px 2px rgba(50, 0, 12, 0);
  transition: text-shadow 0.4s 0.6s;
}

/* The thin light under the button, from edge to edge */
.door-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  z-index: -1;
  background: #ffc2cd;
  box-shadow: var(--line-glow);
  /* Lit like "bad habit": the same neon light, flickering lightly at its own pace */
  animation: line-flicker 6.7s 1.5s infinite;
  transition: opacity 0.4s 0.6s;
}

@keyframes line-flicker {
  0%,
  6%,
  10%,
  52%,
  54.5%,
  100% {
    box-shadow: var(--line-glow);
  }
  7%,
  53% {
    box-shadow: var(--line-glow-dim);
  }
  9% {
    box-shadow: 0 0 9px 2px color-mix(in srgb, var(--accent-light) 60%, transparent), 0 0 26px 6px color-mix(in srgb, var(--accent-light) 25%, transparent);
  }
}

/* The door icon: a closed door that is replaced by an open one. The red is born at its middle (the circle lives inside the
   icon's box, so it always follows it) and grows over the whole button. */
.door-icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
}

.door-closed,
.door-open {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: scaleX(-1); /* mirrored: handle on the right, the door opens the other way */
  transition: opacity 0.25s 0.1s;
}

.door-open {
  opacity: 0;
}

.door-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  z-index: -2;
  background: radial-gradient(circle, #ff6a82 0%, #e0485f 20%, #c9354f 42%, #b52e48 70%, #a8283f 100%);
  transform: scale(0);
  transition: transform 1s cubic-bezier(0.45, 0, 0.2, 1) 0.3s;
}

/* The door opens and the red spreads when the pointer is anywhere on the card around the button (the form card, or "Want in first?") */
@media (hover: hover) {
  /* The glow around the button itself only shows when the pointer is on the button */
  .button.door:hover {
    border-color: color-mix(in srgb, var(--accent-light) 75%, transparent);
    box-shadow: 0 0 36px color-mix(in srgb, var(--accent-light) 45%, transparent);
  }
  :is(.join, .feature):hover .button.door:not(.solid) .door-label {
    text-shadow: 0 1px 2px rgba(50, 0, 12, 0.55);
  }
  :is(.join, .feature):hover .button.door:not(.solid) .door-line {
    opacity: 0;
  }
  :is(.join, .feature):hover .button.door:not(.solid) .door-circle {
    transform: scale(26);
  }
  :is(.join, .feature):hover .button.door:not(.solid) .door-closed {
    opacity: 0;
  }
  :is(.join, .feature):hover .button.door:not(.solid) .door-open {
    opacity: 1;
  }
}

/* The bottom button ("Want in first?"): red from the start, no spreading red. On hover of the button itself the door opens and a
   simple glow shows around it. The top button above keeps the glass version. */
.button.door.solid {
  border: 0;
  background: var(--accent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-light) 55%, transparent);
  color: color-mix(in srgb, var(--accent-light) 35%, white);
  transition: box-shadow 0.35s, background-color 0.2s;
}

.button.door.solid .door-line,
.button.door.solid .door-circle {
  display: none;
}

@media (hover: hover) {
  .button.door.solid:hover {
    box-shadow: inset 0 0 0 1px var(--accent-light), 0 0 26px 2px color-mix(in srgb, var(--accent-light) 60%, transparent), 0 0 60px 8px color-mix(in srgb, var(--accent-light) 25%, transparent);
  }
  .button.door.solid:hover .door-closed {
    opacity: 0;
  }
  .button.door.solid:hover .door-open {
    opacity: 1;
  }
}

.button.door.solid:focus-visible,
.button.door.solid:active {
  box-shadow: inset 0 0 0 1px var(--accent-light), 0 0 26px 2px color-mix(in srgb, var(--accent-light) 60%, transparent), 0 0 60px 8px color-mix(in srgb, var(--accent-light) 25%, transparent);
}

/* The same, for the keyboard and for a finger pressing on a phone */
.button.door:focus-visible,
.button.door:active {
  border-color: color-mix(in srgb, var(--accent-light) 75%, transparent);
}

.button.door:focus-visible .door-line,
.button.door:active .door-line {
  opacity: 0;
}

.button.door:focus-visible .door-circle,
.button.door:active .door-circle {
  transform: scale(26);
}

.button.door:focus-visible .door-closed,
.button.door:active .door-closed {
  opacity: 0;
}

.button.door:focus-visible .door-open,
.button.door:active .door-open {
  opacity: 1;
}

.button.door:focus-visible .door-label,
.button.door:active .door-label {
  text-shadow: 0 1px 2px rgba(50, 0, 12, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .button.door,
  .button.door * {
    transition: none;
  }
}

.button:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

.button:disabled {
  cursor: progress;
  opacity: 0.7;
}

.checks {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-muted);
}

/* On computers the two switches sit side by side */
@media (min-width: 900px) {
  .checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
  }
}

.checks label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

/* The boxes to tick, drawn as the app's switches: a rounded track, a square knob that slides right and turns white
   on the red track when on */
.checks input {
  flex: none;
  position: relative;
  width: 48px;
  height: 28px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--field-bg);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.checks input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--text-muted);
  transition: transform 0.2s, background-color 0.2s;
}

.checks input:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.checks input:checked::before {
  transform: translateX(20px);
  background: var(--on-accent);
}

.checks input:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}

/* The text next to a switch, centered on it */
.checks label {
  align-items: center;
}

/* The welcome panel after signing up: the invite link, how many friends joined, the optional question */
.welcome h2 {
  margin: 8px 0 0;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1;
}

.intro-small {
  margin: 12px 0 18px;
  color: var(--text-soft);
}

.welcome .field[readonly] {
  cursor: text;
  text-overflow: ellipsis;
}

.friends {
  margin: 16px 0 0;
  font-weight: 600;
}

.friends strong {
  color: var(--accent-light);
}

.note {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* The two big statement cards, first in their group and across the whole row */
.feature.wide .real,
.feature.community h2 {
  font-size: clamp(40px, 7vw, 80px);
  line-height: 1;
}

/* First in "Stay close", even above Support us, which is moved to the top on narrower screens */
.features.close .community {
  order: -2;
}

.community[hidden] {
  display: none;
}

.community strong {
  display: inline-block;
  color: var(--accent-light);
  font-variant-numeric: tabular-nums;
}

/* The same neon light on "bad habit" and the changing word, each flickering at its own pace so they never blink together */
:root {
  --line-glow: 0 0 14px 4px color-mix(in srgb, var(--accent-light) 85%, transparent), 0 0 40px 10px color-mix(in srgb, var(--accent-light) 40%, transparent);
  --line-glow-dim: 0 0 5px 1px color-mix(in srgb, var(--accent-light) 50%, transparent), 0 0 14px 3px color-mix(in srgb, var(--accent-light) 20%, transparent);
  --neon: 0 0 0.16em color-mix(in srgb, var(--accent-light) 85%, transparent), 0 0 0.45em color-mix(in srgb, var(--accent-light) 50%, transparent);
  --neon-dim: 0 0 0.06em color-mix(in srgb, var(--accent-light) 60%, transparent), 0 0 0.18em color-mix(in srgb, var(--accent-light) 25%, transparent);
}

h1 em {
  text-shadow: var(--neon);
  animation: glow-flicker 7.3s 1.2s infinite;
}

.rotating {
  text-shadow: var(--neon);
  animation: glow-flicker 5.1s 2.4s infinite;
}

@keyframes glow-flicker {
  0%,
  6%,
  10%,
  52%,
  54.5%,
  100% {
    text-shadow: var(--neon);
  }
  7%,
  53% {
    text-shadow: var(--neon-dim);
  }
  9% {
    text-shadow: 0 0 0.1em color-mix(in srgb, var(--accent-light) 70%, transparent), 0 0 0.3em color-mix(in srgb, var(--accent-light) 35%, transparent);
  }
}

/* Once the count has arrived: a burst of light, then the light stays on and flickers lightly, like a neon sign */
.community strong.lit {
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent-light) 85%, transparent), 0 0 28px color-mix(in srgb, var(--accent-light) 50%, transparent);
  animation: burst 0.9s ease-out, neon 5.5s 1s infinite;
}

@keyframes burst {
  0% {
    text-shadow: 0 0 0 transparent;
  }
  25% {
    text-shadow: 0 0 18px var(--accent-light), 0 0 60px color-mix(in srgb, var(--accent-light) 90%, transparent), 0 0 110px color-mix(in srgb, var(--accent-light) 60%, transparent);
  }
}

@keyframes neon {
  0%,
  6%,
  10%,
  52%,
  54.5%,
  100% {
    opacity: 1;
  }
  7% {
    opacity: 0.82;
  }
  9% {
    opacity: 0.9;
  }
  53% {
    opacity: 0.86;
  }
}

@media (prefers-reduced-motion: reduce) {
  .community strong.lit,
  h1 em,
  .rotating,
  .logo span,
  .door-line {
    animation: none;
  }
}



.community p a {
  color: var(--accent-light);
  font-weight: 600;
}

.robot:empty {
  display: none;
}

/* Room above the box only while it is shown (Cloudflare asks the person to do something) */
.robot.shown {
  margin-top: 14px;
}

/* The bot trap: a field people never see */
.trap {
  position: absolute;
  left: -9999px;
}

.message {
  margin: 12px 0 0;
  font-size: 14px;
}

.message:empty {
  display: none;
}

.message[data-kind="error"] {
  color: var(--alert);
}

.message[data-kind="done"] {
  color: var(--online);
  font-weight: 600;
}

/* The title over a group of sections: the cards, then Follow us and Support us */
.heading {
  padding-top: 115px; /* + the line above the tag: 120px between the last thing and the group's tag */
}

.heading h2 {
  margin-top: 10px;
  font-size: clamp(40px, 7vw, 72px);
}

/* A card across the whole row */
.feature.wide {
  grid-column: 1 / -1;
}

/* Our promise: "Real" once and a changing word after it, in the accent, big inside its card */
.feature .real {
  font-size: clamp(48px, 8vw, 88px);
  line-height: 1;
}

/* Its longer text, kept to a readable line length */
.feature.wide p {
  max-width: 760px;
}

.rotating {
  display: inline-block;
  color: var(--accent-light);
  transition: opacity 0.25s, transform 0.25s;
}

.rotating.out {
  opacity: 0;
  transform: translateY(0.15em);
}

.intro {
  max-width: 640px;
  margin: 20px 0 0;
  font-size: clamp(17px, 2vw, 19px);
  color: var(--text-soft);
}

/* The promises */
.features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 32px 0 0;
}

/* Stay close until the three fit on one row: Waitlist and Follow us side by side, Support us above them across the whole width */
@media (max-width: 959px) {
  .features.close {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .features.close .support {
    grid-column: 1 / -1;
    order: -1;
  }
}

/* On phones the cards of "Don't be a stranger" come one after the other, full width (community, support, waitlist, follow us) */
@media (max-width: 639px) {
  .features.close {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Two per row on tablets, three per row on computers (3 and 3), across the page's whole width */
@media (min-width: 640px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.feature {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
}

.feature h2 {
  font-size: 26px;
  line-height: 1.05;
}

.feature p {
  margin: 12px 0 0;
  color: var(--text-muted);
}

/* A card's buttons, at the bottom of the card so they line up across a row */
.links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
}

/* Room before the footer */
main {
  padding-bottom: 120px;
}

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 0 40px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-muted);
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

footer a {
  color: var(--text-muted);
  text-decoration: none;
}

footer a:hover {
  color: var(--text);
}

/* Networks and donations as small icons */
footer nav {
  align-items: center;
}

footer nav a[data-social],
footer nav a[data-donate] {
  display: inline-flex;
}

/* Lit like the logos in "Follow us": the same light red on hover */
footer nav a[data-social],
footer nav a[data-donate] {
  transition: color 0.15s;
}

footer nav a[data-social]:hover,
footer nav a[data-donate]:hover,
footer nav a[data-social]:focus-visible,
footer nav a[data-donate]:focus-visible {
  color: var(--accent-light);
}

/* Between the social networks and the site's own pages (Privacy, Legal notice): a thin line */
footer .sep {
  width: 1px;
  height: 16px;
  align-self: center;
  background: var(--border-strong);
}

/* The age gate: over everything until you say you are 18 or older */
.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(14, 10, 12, 0.8);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}

.gate[hidden] {
  display: none;
}

.gate-box {
  width: min(440px, 100%);
  padding: 36px 28px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--shadow-float);
  text-align: center;
}

.gate-box h2 {
  margin: 12px 0;
  font-size: 34px;
}

.gate-box p {
  margin: 0 0 24px;
  color: var(--text-muted);
}

.gate-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

a.button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.ghost {
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--border-strong);
  color: var(--text);
}

.ghost:hover {
  background: rgba(255, 232, 238, 0.07);
}

/* While the gate shows, the page behind does not scroll */
body.gated {
  overflow: hidden;
}

/* Follow us: one rectangle per network, just its logo, sharing the card's width */
.socials {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.social {
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.social:hover {
  background: rgba(255, 232, 238, 0.07);
  border-color: var(--accent-light);
  color: var(--accent-light);
}

/* Support us: the same rectangle across the whole card, the Patreon logo then the words */
.social.tip {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  text-decoration: none;
}

.social:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

/* The privacy page */
.doc {
  max-width: 720px;
  padding: 40px 0 100px;
}

/* Inside its card, more room around the text than the small cards */
.doc .feature {
  padding: 40px 36px;
}

.doc h1 {
  font-size: clamp(40px, 7vw, 64px);
  margin-bottom: 32px;
}

.doc h2 {
  margin: 36px 0 12px;
  font-size: 24px;
  line-height: 1.1;
}

.doc p,
.doc li {
  color: var(--text-soft);
}

@media (max-width: 560px) {
  .doc .feature {
    padding: 28px 20px;
  }

  .row,
  .gate-actions {
    flex-direction: column;
  }

  /* Stacked, it must keep its own height instead of sharing the row's */
  .field {
    flex: none;
  }

  a.button {
    justify-content: center;
  }
  .button {
    width: 100%;
  }
}