/* ============================================
   ЛАФЕТКИ — brand layer
   ============================================
   Loaded after main.css. Most of the brand is expressed as token overrides
   injected by templates/header.php; this file holds the parts that tokens
   cannot reach — components whose colour pairings would otherwise break, and
   the napkin card.

   The three accents are the logo's own values. The indigo comes from the
   printed pack label, which the logo drops — keeping it is deliberate.

   Every hue exists twice: a bright "surface" value that may only sit behind
   ink, and a darker "ink" value that is safe as text on paper. Gold on paper
   is 1.75:1 and teal 2.25:1, so the bright values can never carry body text —
   that is the whole reason the pair exists.

     ink         #241937  label field, body text            15.74 on paper
     gold        #FBB04A  wordmark, calls to action          8.99 on ink
     coral       #E86C78  the one hot accent                 5.39 on ink
     coral-focus #C85D67  focus rings        3.83 on paper / 4.11 on ink
     coral-ink   #AC5059  links on paper                     4.94 on paper
     teal        #4EBAA1  series names, quiet accents        6.98 on ink
     teal-ink    #337B6A  small type on paper                4.78 on paper
     blush       #FBEAEC  bands and surfaces                14.25 with ink
     paper       #FBF9F6  the napkin itself

   Coral at its logo value is 2.92:1 on paper, just under the 3:1 a focus ring
   needs, which is why coral-focus exists as a separate, slightly deeper value
   rather than the ring quietly failing on light backgrounds.
   ============================================ */

/* ── Ground ─────────────────────────────────────────────────────────────── */
body { background: var(--lf-paper); }

/* ── Display type ───────────────────────────────────────────────────────────
   Unbounded is wide and circular, so it needs negative tracking and a tight
   leading to read as a wordmark rather than as a row of separate letters. */
h1, h2, h3,
.lf-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
h4, h5, h6 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }

/* The design system gives headings no bottom margin, which was survivable at
   its original 1.3 leading and is not at 1.05. */
h1, h2 { margin-bottom: var(--space-md); }
h3, h4, h5, h6 { margin-bottom: var(--space-sm); }
h1:last-child, h2:last-child, h3:last-child { margin-bottom: 0; }

/* ── Eyebrow: the label's band ──────────────────────────────────────────────
   On the pack, the series name and the descriptor sit in flush-left blush
   rectangles under the wordmark. The eyebrow borrows that device, so it is
   rectangular rather than a pill — a pill would be the generic answer. */
.section-label {
  background: var(--lf-blush);
  color: var(--lf-ink);
  border-bottom: none;
  border-radius: 2px;
  padding: 0.3rem 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* ── The ink field ──────────────────────────────────────────────────────────
   main.css calls this "--teal" for historical reasons; here it is the indigo
   field from the label, and its headings are gold, exactly as printed. */
.section--teal { background: var(--lf-ink); color: var(--lf-paper); }
.section--teal h1,
.section--teal h2,
.section--teal h3 { color: var(--lf-gold); }
.section--teal a:not(.btn) { color: var(--lf-teal); }

/* ── One band, one gap ──────────────────────────────────────────────────────
   Here "grey" (--off-white) is the page's own paper, so a plain block next to
   a grey one reads as one band. The shared rule in home-sections-css only
   joins blocks of the same class; this joins plain and grey too, so the gap
   between them is one block's padding, not two. */
.section:not(.section--grey):not(.section--teal):not(.section--warm) + .section--grey,
.section--grey + .section:not(.section--grey):not(.section--teal):not(.section--warm) { padding-top: 0; }

/* ── Buttons ────────────────────────────────────────────────────────────────
   Gold field, ink text — the wordmark's own logic. Hover flips the two, which
   keeps 8.99:1 in both directions instead of fading to a lighter tint. */
.btn { font-weight: 600; }
.btn--primary {
  background: var(--lf-gold);
  color: var(--lf-ink);
  border-color: var(--lf-gold);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--lf-ink);
  color: var(--lf-gold);
  border-color: var(--lf-ink);
}
.btn--outline {
  background: transparent;
  color: var(--lf-ink);
  border-color: var(--lf-ink);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--lf-ink);
  color: var(--lf-paper);
  border-color: var(--lf-ink);
}
/* On the ink field an outline button has to invert to stay visible. */
.section--teal .btn--outline {
  color: var(--lf-paper);
  border-color: var(--lf-paper);
}
.section--teal .btn--outline:hover,
.section--teal .btn--outline:focus-visible {
  background: var(--lf-paper);
  color: var(--lf-ink);
}

/* ── Focus ──────────────────────────────────────────────────────────────────
   coral-focus is the one brand value that clears 3:1 against both grounds
   (3.83 on paper, 4.11 on ink), so a single ring works everywhere. */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--lf-coral-focus);
  outline-offset: 2px;
}

/* ── Logo ───────────────────────────────────────────────────────────────────
   The design system knocks the footer logo out to a white silhouette, which
   suits a monochrome mark on a dark footer. The Лафетки logo is a full-colour
   badge carrying its own coral field, so it reads on the ink ground as it is
   and the filter would erase it. */
.footer-brand img { filter: none; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card { border-color: var(--lf-border); }
.card__title a:hover { color: var(--lf-coral-ink); }

/* ============================================
   The napkin — the signature
   ============================================
   The product is a question printed on a napkin, so a question on this site
   is shown on one. Two details do the work and nothing else is added: the
   pressed quilting the napkin is embossed with, and the ring where the fold
   presses the edge.
   ============================================ */
.lf-napkin {
  position: relative;
  container-type: inline-size;   /* the question sizes off the napkin, not the window */
  aspect-ratio: 1 / 1;
  /* Past this width a napkin stops reading as an object and becomes a panel. */
  max-width: 420px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  padding: 8%;
  background-color: #fff;
  /* the embossed quilting, at the edge of visibility */
  background-image: radial-gradient(circle, rgba(36, 25, 55, 0.055) 1px, transparent 1.3px);
  background-size: 9px 9px;
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(36, 25, 55, 0.05),
    0 14px 34px -14px rgba(36, 25, 55, 0.3);
}

/* the pressed edge */
.lf-napkin::before {
  content: '';
  position: absolute;
  inset: clamp(7px, 2.5%, 12px);
  border: 1px solid rgba(36, 25, 55, 0.11);
  border-radius: 2px;
  pointer-events: none;
}

.lf-napkin__q {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  /* cqi = 1% of the napkin's own width, so the question keeps the same optical
     size whether the napkin is one of three in a row or standing alone. */
  font-size: clamp(0.95rem, 7.4cqi, 1.6rem);
  line-height: 1.45;
  color: var(--lf-ink);
  text-align: center;
  text-wrap: balance;
}
/* Keywords are set bold on the printed napkin; keep that. */
.lf-napkin__q b,
.lf-napkin__q strong { font-weight: 700; }

/* Series attribution, small, under the question. */
.lf-napkin__series {
  margin-top: 0.9rem;
  font-size: clamp(0.62rem, 3.1cqi, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lf-teal-ink);
  text-align: center;
}

/* A napkin laid on the ink field keeps its paper colour — that is the point. */
.section--teal .lf-napkin { box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.55); }

.lf-napkin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1rem, 3vw, 1.75rem);
}

/* ── Motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover { transform: none; }
}