@charset "UTF-8";
/* ============================================================================
   Smoking Chimney — smokingchimney.css
   Replaces: main, desktop, tablet, phone, phone320x568, phone414x736, menu,
             breadcrumbs, links, headers, recipedata, sharing, select, myBtn,
             rating_selection, thumbsgallery, phonegallery, tabletgallery.

   ONE file. One set of breakpoints. Fluid, not four fixed layouts.

   Why the old set had to go, briefly:
     - main.css imported four stylesheets on overlapping media conditions
       (phone 320-568, tablet 321-768, large phone 412-732), so at 500px wide
       three files applied at once and import order decided the winner.
     - menu.css styled bare `ul`, `li` and `li a` globally, with
       `ul { position: absolute }` and `li a { width: 180px }`. Any list
       anywhere became a horizontal menu bar. That is why the recipe markup
       used backwards <dd><dt> with no <dl> — lists were unusable.
     - Layout was four fixed widths (1100/760/400/310) plus a hard
       `height: 600px` on the recipe container.

   Everything here is scoped to a class. No bare element selectors carry
   layout. Specificity stays flat — single class, occasionally two — so
   nothing needs !important to win.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------ */
:root {
  /* Cape Dutch: delft blue and porcelain, with a copper note from the pans.
     Deliberately not the cream-and-terracotta every food site reaches for. */
  --porcelain:    #F6F4EF;
  --porcelain-lo: #EFEBE2;
  --ink:          #1C2733;
  --ink-soft:     #4A5563;
  --delft:        #2E4A6B;
  --delft-deep:   #16293D;
  --delft-wash:   #E4EAF1;
  --copper:       #A65E2E;
  --copper-lo:    #8A4C24;
  --ash:          #DDD8CE;
  --white:        #FFFFFF;

  /* EB Garamond is Dutch old-style — contemporary with Cape Dutch building,
     which is the point. Karla does the working text: legible small, on a
     phone, at arm's length, with enough character not to read as Helvetica. */
  --display: "EB Garamond", Georgia, "Times New Roman", serif;
  --body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* 4px base. Named by step so spacing decisions stay comparable. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;

  --measure: 68ch;        /* readable line length for the method */
  --shell:   1180px;      /* max page width — a ceiling, not a fixed width */
  --radius:  3px;         /* tile-edge, not pill */

  --rule: 1px solid var(--ash);
}

/* ---------------------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--copper); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--copper-lo); }

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

.sc-skip {
  position: absolute; left: -9999px;
  background: var(--delft-deep); color: var(--white);
  padding: var(--s3) var(--s4); z-index: 100;
}
.sc-skip:focus { left: var(--s4); top: var(--s4); }

.sc-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   3. SHELL
   ------------------------------------------------------------------------ */
.sc-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s4);
}
@media (min-width: 48em) { .sc-shell { padding-inline: var(--s6); } }

/* ---------------------------------------------------------------------------
   4. MASTHEAD
   ------------------------------------------------------------------------ */
.sc-masthead {
  background: var(--delft-deep);
  color: var(--white);
  border-bottom: 3px solid var(--copper);
}

.sc-masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 68px;
  padding-block: var(--s3);
}

.sc-wordmark {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--white);
  text-decoration: none;
  line-height: 1.1;
}
.sc-wordmark:hover { color: var(--white); }
.sc-wordmark span { color: var(--copper); }

.sc-tagline {
  display: none;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
@media (min-width: 56em) { .sc-tagline { display: block; } }

/* Navigation — a closed list of category hubs, not 350 recipe links.
   The old menu ran 14 queries per page load and dumped every recipe into
   the markup of every page. */
.sc-nav { background: var(--delft); }
.sc-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sc-nav__list a {
  display: block;
  padding: var(--s3) var(--s4);
  color: rgba(255,255,255,0.9);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.sc-nav__list a:hover,
.sc-nav__list a[aria-current="page"] {
  background: var(--delft-deep);
  color: var(--white);
}

@media (max-width: 47.99em) {
  .sc-nav__list { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .sc-nav__list::-webkit-scrollbar { display: none; }
}

/* ---------------------------------------------------------------------------
   5. BREADCRUMB
   ------------------------------------------------------------------------ */
.sc-crumbs { padding-block: var(--s4) 0; }
.sc-crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s2);
  list-style: none; margin: 0; padding: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.sc-crumbs li + li::before {
  content: "/";
  margin-right: var(--s2);
  color: var(--ash);
}
.sc-crumbs a { color: var(--delft); text-decoration: none; }
.sc-crumbs a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   6. RECIPE HEAD
   ------------------------------------------------------------------------ */
.sc-recipe { padding-bottom: var(--s8); }

.sc-recipe__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: var(--s4) 0 var(--s3);
  max-width: 20ch;
}

/* Byline carries the E-E-A-T signal: a named professional wrote this.
   Fifteen years in the trade is the site's strongest asset and it was
   previously buried in an About page. */
.sc-byline {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s2) var(--s4);
  padding-block: var(--s3);
  border-block: var(--rule);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sc-byline strong { color: var(--ink); font-weight: 700; }
.sc-byline a { color: var(--delft); text-decoration: none; }
.sc-byline a:hover { text-decoration: underline; }

.sc-stars { color: var(--copper); letter-spacing: 0.1em; }

.sc-intro {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: var(--s5) 0;
}
.sc-intro a { color: var(--copper); }

.sc-hero {
  margin: var(--s5) 0;
  background: var(--porcelain-lo);
}
.sc-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Facts rail. Tabular figures so the numbers align down the column —
   this is data, and it should read as data. */
.sc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0;
  margin: var(--s5) 0;
  border: var(--rule);
  background: var(--white);
}
.sc-facts__item {
  padding: var(--s4) var(--s3);
  text-align: center;
  border-right: var(--rule);
}
.sc-facts__item:last-child { border-right: 0; }
.sc-facts__label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s1);
}
.sc-facts__value {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--delft);
  line-height: 1.1;
}

.sc-jump {
  display: inline-block;
  padding: var(--s3) var(--s5);
  background: var(--copper);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background 0.15s ease;
}
.sc-jump:hover { background: var(--copper-lo); color: var(--white); }

/* ---------------------------------------------------------------------------
   7. THE PASS — signature element
   ---------------------------------------------------------------------------
   In a professional kitchen the pass is where the ticket meets the plate.
   Here it is the ingredients column, and it stays with you while you scroll
   the method. Desktop: sticky sidebar. Mobile: a drawer pinned to the bottom
   edge that you tap to peek at without losing your place in the method.

   This is the one place boldness is spent. Everything around it stays quiet.
   ------------------------------------------------------------------------ */
.sc-cook {
  display: grid;
  gap: var(--s6);
  margin-top: var(--s6);
}
@media (min-width: 60em) {
  .sc-cook {
    grid-template-columns: minmax(280px, 22rem) minmax(0, 1fr);
    gap: var(--s8);
    align-items: start;
  }
}

.sc-section__title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--delft);
  margin: 0 0 var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 2px solid var(--delft);
}

/* --- Ingredients ---------------------------------------------------------- */
.sc-pass {
  background: var(--white);
  border: var(--rule);
  padding: var(--s5);
}
@media (min-width: 60em) {
  .sc-pass {
    position: sticky;
    top: var(--s4);
    max-height: calc(100vh - var(--s6));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.sc-pass__group { margin-bottom: var(--s5); }
.sc-pass__group:last-child { margin-bottom: 0; }

.sc-pass__heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: var(--rule);
}

/* A real <ul>. The old stylesheet made this impossible. */
.sc-pass__list { list-style: none; margin: 0; padding: 0; }
.sc-pass__list li {
  padding: var(--s2) 0 var(--s2) var(--s5);
  border-bottom: 1px dotted var(--ash);
  font-size: 0.9375rem;
  line-height: 1.5;
  position: relative;
  font-variant-numeric: tabular-nums;
}
.sc-pass__list li:last-child { border-bottom: 0; }

/* A small glazed square, not a bullet — the tile motif, quietly. */
.sc-pass__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px; height: 7px;
  background: var(--delft-wash);
  border: 1px solid var(--delft);
}

/* --- Method --------------------------------------------------------------- */
.sc-method { max-width: var(--measure); }

.sc-method__group { margin-bottom: var(--s6); }

.sc-method__heading {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--copper);
  margin: 0 0 var(--s4);
}

.sc-method__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }

.sc-method__step {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--s4);
  align-items: start;
  margin-bottom: var(--s5);
}

/* The delft tile. Flat, no gradient, no shadow — a glazed square with a
   numeral. The inner hairline is the only nod to glaze. Numbered markers
   are justified here because method steps genuinely are a sequence. */
.sc-method__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  background: var(--delft);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
  color: var(--white);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  border-radius: var(--radius);
  user-select: none;
}

.sc-method__text { margin: 0; padding-top: 0.28rem; }

/* ---------------------------------------------------------------------------
   8. MOBILE DRAWER
   ------------------------------------------------------------------------ */
.sc-drawer-toggle {
  display: none;
  position: fixed;
  left: 50%; bottom: var(--s4);
  transform: translateX(-50%);
  z-index: 40;
  padding: var(--s3) var(--s6);
  background: var(--delft-deep);
  color: var(--white);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(22,41,61,0.32);
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
@media (max-width: 59.99em) {
  .sc-drawer-toggle { display: block; }

  .sc-pass {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    max-height: 72vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-top: 3px solid var(--copper);
    box-shadow: 0 -8px 32px rgba(22,41,61,0.22);
    transform: translateY(101%);
    transition: transform 0.24s ease;
    padding-bottom: var(--s8);
  }
  .sc-pass[data-open="true"] { transform: translateY(0); }
  .sc-pass__close {
    position: sticky; top: 0;
    display: block; width: 100%;
    margin: calc(var(--s5) * -1) 0 var(--s4) 0;
    padding: var(--s3);
    background: var(--white);
    border: 0; border-bottom: var(--rule);
    font-family: var(--body);
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
  }
}
@media (min-width: 60em) {
  .sc-pass__close { display: none; }
}

/* ---------------------------------------------------------------------------
   9. NUTRITION
   ------------------------------------------------------------------------ */
.sc-nutrition {
  margin: var(--s6) 0;
  padding: var(--s5);
  background: var(--delft-wash);
  border-left: 3px solid var(--delft);
}
.sc-nutrition h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--delft);
  margin: 0 0 var(--s3);
}
.sc-nutrition dl {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6);
  margin: 0; font-size: 0.875rem;
}
.sc-nutrition dt { color: var(--ink-soft); }
.sc-nutrition dd {
  margin: 0 var(--s4) 0 var(--s1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sc-nutrition p {
  margin: var(--s3) 0 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   10. PROMO SLOT
   ---------------------------------------------------------------------------
   Below the method, deliberately. The old placement sat between the
   ingredients and the instructions — interrupting the cook at the exact
   moment they needed the method, and competing with AdSense for the most
   valuable position on the page. Driven by the promo_slots table, so a
   campaign change is a row edit rather than a template edit and an upload.
   ------------------------------------------------------------------------ */
.sc-promo {
  display: grid;
  gap: var(--s5);
  margin: var(--s8) 0 0;
  padding: var(--s5);
  background: var(--delft-deep);
  color: var(--white);
  border-radius: var(--radius);
}
@media (min-width: 40em) {
  .sc-promo { grid-template-columns: 160px 1fr; align-items: center; gap: var(--s6); }
}
.sc-promo__label {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0 0 var(--s2);
}
.sc-promo__title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 var(--s4);
  color: var(--white);
}
.sc-promo p { margin: 0 0 var(--s4); color: rgba(255,255,255,0.82); font-size: 0.9375rem; }
.sc-promo__cta {
  display: inline-block;
  padding: var(--s3) var(--s5);
  background: var(--copper);
  color: var(--white);
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; border-radius: var(--radius);
}
.sc-promo__cta:hover { background: var(--copper-lo); color: var(--white); }
.sc-promo img { border-radius: var(--radius); }

/* ---------------------------------------------------------------------------
   11. RELATED
   ------------------------------------------------------------------------ */
.sc-related { margin-top: var(--s8); }
.sc-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s5);
  list-style: none; margin: 0; padding: 0;
}
.sc-related__grid a { text-decoration: none; color: var(--ink); display: block; }
.sc-related__grid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius);
  background: var(--porcelain-lo);
}
.sc-related__name {
  display: block;
  margin-top: var(--s2);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
}
.sc-related__grid a:hover .sc-related__name { color: var(--copper); }

/* ---------------------------------------------------------------------------
   12. TAGS + FOOTER
   ------------------------------------------------------------------------ */
.sc-tags {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  list-style: none; margin: var(--s6) 0 0; padding: 0;
}
.sc-tags a {
  display: inline-block;
  padding: var(--s1) var(--s3);
  background: var(--porcelain-lo);
  border: var(--rule);
  border-radius: var(--radius);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-decoration: none;
}
.sc-tags a:hover { background: var(--delft-wash); color: var(--delft); }

.sc-ad {
  margin: var(--s7) auto;
  text-align: center;
  min-height: 100px;   /* reserved so ad load does not shift layout */
}

.sc-footer {
  margin-top: var(--s8);
  padding-block: var(--s6);
  background: var(--delft-deep);
  color: rgba(255,255,255,0.78);
  font-size: 0.875rem;
}
.sc-footer a { color: var(--white); }
.sc-footer__inner {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  justify-content: space-between; align-items: center;
}

/* ---------------------------------------------------------------------------
   13. PRINT
   ---------------------------------------------------------------------------
   People print recipes. The old site had no print styles at all.
   ------------------------------------------------------------------------ */
@media print {
  .sc-masthead, .sc-nav, .sc-crumbs, .sc-promo, .sc-related,
  .sc-ad, .sc-footer, .sc-jump, .sc-drawer-toggle, .sc-tags { display: none; }

  body { background: #fff; font-size: 11pt; }
  .sc-cook { display: block; }
  .sc-pass {
    position: static; max-height: none; border: 1px solid #999;
    break-inside: avoid; margin-bottom: 1.5rem;
  }
  .sc-method__step { break-inside: avoid; }
  .sc-method__num { background: #fff; color: #000; border: 1px solid #000; box-shadow: none; }
  .sc-hero img { max-height: 8cm; object-fit: contain; }
  a[href]::after { content: ""; }
}

/* ---------------------------------------------------------------------------
   14. CATEGORY AND TAG LISTINGS
   ---------------------------------------------------------------------------
   These pages are new. Every recipe previously sat flat in /recipe-pages/
   with no hub above it, so nothing could rank for a broad term and no
   authority flowed down to the recipes.
   ------------------------------------------------------------------------ */
.sc-index__count {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s5);
  padding-bottom: var(--s3);
  border-bottom: var(--rule);
}

.sc-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s6) var(--s5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sc-index__item a { display: block; text-decoration: none; color: var(--ink); }

.sc-index__item img,
.sc-index__noimage {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--delft-wash);
  border-radius: var(--radius);
}

.sc-index__name {
  display: block;
  margin-top: var(--s3);
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
}
.sc-index__item a:hover .sc-index__name { color: var(--copper); }

.sc-index__meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s1) 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   15. HOMEPAGE
   ---------------------------------------------------------------------------
   The old homepage led with a banner image and buried Marna's fifteen years
   in professional kitchens below it. That experience is the site's strongest
   asset and the strongest thing Google can read. It goes first.
   ------------------------------------------------------------------------ */
.sc-hero-home {
  background: var(--delft-deep);
  color: var(--porcelain);
  border-bottom: 3px solid var(--copper);
}
.sc-hero-home__inner { padding-block: clamp(var(--s7), 9vw, var(--s8)); }

.sc-hero-home__kicker {
  margin: 0 0 var(--s3);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
}
.sc-hero-home__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.2rem, 6.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s4);
  max-width: 18ch;
}
.sc-hero-home__lede {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.55;
  color: rgba(246,244,239,0.82);
  max-width: 52ch;
  margin: 0 0 var(--s5);
}

/* Category grid — the hubs that never existed before. */
.sc-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s3);
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
}
.sc-cats a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--white);
  border: var(--rule);
  border-left: 3px solid var(--delft);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-left-color 0.15s ease, background 0.15s ease;
}
.sc-cats a:hover { background: var(--delft-wash); border-left-color: var(--copper); }
.sc-cats__name { font-family: var(--display); font-size: 1.15rem; font-weight: 600; }
.sc-cats__count {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.sc-about {
  margin-top: var(--s8);
  padding: var(--s6);
  background: var(--delft-wash);
  border-left: 3px solid var(--delft);
}
.sc-about__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--delft);
  margin: 0 0 var(--s4);
}
.sc-about__body { font-family: var(--display); font-size: 1.2rem; line-height: 1.6; max-width: 62ch; }
.sc-about__body p { margin: 0 0 var(--s4); }
.sc-about__body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   16. FILTER
   ------------------------------------------------------------------------ */
.sc-filter { margin: var(--s5) 0 var(--s6); }
.sc-filter__input {
  width: 100%;
  max-width: 32rem;
  padding: var(--s3) var(--s4);
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: var(--rule);
  border-bottom: 2px solid var(--delft);
  border-radius: var(--radius);
}
.sc-filter__input:focus { outline: 3px solid var(--copper); outline-offset: 2px; }
.sc-filter__count {
  margin: var(--s3) 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.sc-index__item[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   17. PROSE
   ---------------------------------------------------------------------------
   Long-form text pages: privacy, terms, category intros. Constrained to a
   readable measure, unlike the old .welcomebox which was justified at
   1100px wide with `word-break: break-all` on mobile.
   ------------------------------------------------------------------------ */
.sc-prose { max-width: 68ch; }

.sc-prose h2 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 600;
  color: var(--delft);
  margin: var(--s7) 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: var(--rule);
}
.sc-prose h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper);
  margin: var(--s5) 0 var(--s2);
}
.sc-prose p  { margin: 0 0 var(--s4); }
.sc-prose ul { margin: 0 0 var(--s4); padding-left: var(--s5); }
.sc-prose li { margin-bottom: var(--s2); }
.sc-prose .sc-intro { margin-top: 0; }

/* ---------------------------------------------------------------------------
   18. FORMS
   ---------------------------------------------------------------------------
   The old contact form used <div class="fieldlabels"> for its labels, so
   nothing was programmatically associated with an input: screen readers had
   no label to announce and tapping the text did not focus the field. These
   are real <label for> pairs with generous tap targets.
   ------------------------------------------------------------------------ */
.sc-form { max-width: 34rem; margin: var(--s6) 0; }

.sc-form__field { margin-bottom: var(--s5); }

.sc-form__label {
  display: block;
  margin-bottom: var(--s2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--delft);
}

.sc-form__input {
  width: 100%;
  padding: var(--s3) var(--s4);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: var(--rule);
  border-bottom: 2px solid var(--delft);
  border-radius: var(--radius);
}
.sc-form__input:focus { outline: 3px solid var(--copper); outline-offset: 2px; }

.sc-form__textarea { resize: vertical; min-height: 9rem; }

.sc-form__hint {
  margin: var(--s2) 0 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.sc-form__submit {
  display: inline-block;
  padding: var(--s3) var(--s6);
  background: var(--copper);
  color: var(--white);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease;
}
.sc-form__submit:hover { background: var(--copper-lo); }

/* reCAPTCHA is a fixed 304px widget and will overflow a narrow phone.
   Scaling it down keeps it inside the viewport. */
@media (max-width: 25em) {
  .g-recaptcha { transform: scale(0.86); transform-origin: 0 0; }
}

/* Form status messages and the honeypot. */
.sc-notice {
  margin: var(--s5) 0;
  padding: var(--s4) var(--s5);
  border-left: 3px solid var(--delft);
  background: var(--delft-wash);
  font-size: 0.9375rem;
  max-width: 34rem;
}
.sc-notice--ok  { border-left-color: var(--delft); }
.sc-notice--bad { border-left-color: var(--copper); background: #F7EAE2; }

/* Off-screen rather than display:none — bots skip hidden fields, which
   would defeat the point of the trap. */
.sc-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Contact address — large enough to be the point of the page. */
.sc-contact-email {
  margin: var(--s6) 0;
  padding: var(--s5);
  background: var(--white);
  border: var(--rule);
  border-left: 3px solid var(--copper);
  border-radius: var(--radius);
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  word-break: break-word;
}
.sc-contact-email a { text-decoration: none; }
.sc-contact-email a:hover { text-decoration: underline; }