/* Join In Guernsey — shared visual system.
   See /planning/brand-brief.md, /planning/visual-brief.md and
   /planning/responsible-design-decisions.md for the reasoning behind every
   decision below — this file applies it, it doesn't re-derive it.

   Deliberately single-theme (no dark mode): light-on-dark increases perceived
   halation for astigmatic readers, more common with age — the wrong trade for
   this audience. See visual-brief.md "Decided: no dark mode".

   Display typeface is Space Grotesk (The Quarry's own heading face),
   replacing Fraunces — the "Direction B" full-harmony call: Quarry green is
   the lead accent throughout, terracotta retired. Atkinson Hyperlegible stays
   for body text regardless — it's the Braille Institute's purpose-built
   low-vision face, not swapped for Quarry's Poppins. See responsible-design-decisions.md
   "Visual identity" for the full reasoning and the independently-verified
   contrast figures. */

:root {
  /* Colours follow The Quarry (thequarry.media): pale yellow page, white header
     and panels, near-black text, Quarry green. Token names are kept from the
     original palette so every existing rule picks up the new values.
     Contrast checked against both the yellow page and white panels:
     ink 16.7:1, secondary 7.6:1, dark green 9.3:1 on yellow. Quarry green
     (#60a07d) fails as text (2.9:1) so it is a FILL only, with ink text on it. */
  --ink: #15171a;
  --charcoal: #33363b;
  --granite-text: #4b4f55;   /* secondary/tertiary TEXT, 7.6:1 on the yellow page */
  --granite-line: #b8bd7a;   /* borders/decoration only, never text */
  --line: #d4d8a8;
  --chalk: #ffffff;          /* light text on dark fills */
  --page: #f8fd98;           /* The Quarry's page yellow */
  --paper: #ffffff;          /* panels, cards, header */
  --terracotta: #1f4a34;     /* lead accent (Quarry dark green): links, selected states, primary actions */
  --lichen: #2e6b4b;         /* accessibility/positive-confirmation signal, 5.9:1 on yellow */
  --ochre: #60a07d;          /* Quarry green, FILL ONLY with ink text on it, never a text colour */
  --badge-bg: var(--ink);
  --badge-text: var(--chalk);
  --error: #9c3b2e;
  --focus: #15171a;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { background: var(--page); }

body {
  background: var(--page);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--terracotta); text-decoration-thickness: 1.5px; }
a:visited { color: var(--terracotta); }

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

@media (prefers-reduced-motion: no-preference) {
  .chip, .listing-card, a { transition: background-color 160ms ease, border-color 160ms ease; }
}

h1, h2, h3 { text-wrap: balance; }

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

/* ---------- Notices / banners ---------- */
.wip-banner {
  background: var(--terracotta);
  color: var(--chalk);
  padding: 0.7rem 1.5rem;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
}
.wip-banner a { color: var(--chalk); text-decoration-thickness: 1.5px; }

.notice {
  background: var(--paper);
  border: 1px solid var(--granite-line);
  border-left: 4px solid var(--ochre);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  color: var(--charcoal);
}

/* ---------- Masthead ---------- */
.masthead {
  /* White full-width header band, as on thequarry.media */
  background: var(--paper);
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
  padding: 2.25rem 0 1.5rem;
  margin-bottom: 2.25rem;
}
.masthead a.wordmark-link { text-decoration: none; display: inline-block; }
.wordmark {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0;
  color: var(--ink);
}
.wordmark .place { color: var(--terracotta); }
.masthead .strapline {
  max-width: 62ch;
  font-size: 1.1rem;
  color: var(--charcoal);
  margin: 0.6rem 0 0;
}
.masthead .maintained-by {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  color: var(--granite-text);
}
nav.site-nav {
  margin-top: 1.1rem;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
nav.site-nav a {
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
nav.site-nav a:hover, nav.site-nav a:focus-visible { border-bottom-color: var(--terracotta); }

/* ---------- Section labels ---------- */
.section-label, h2.section-label {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--granite-text);
  margin: 0 0 1rem;
}

/* ---------- Tag cloud ---------- */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.6rem 0.7rem; align-items: baseline; margin: 0 0 2rem; padding: 0; list-style: none; }
.tag-cloud-item {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3em 0.9em;
  color: var(--charcoal);
  text-decoration: none;
  max-width: 100%;
  min-width: 0;              /* flex items default to min-width:auto, which for unbreakable
                                 text overrides max-width/overflow-wrap entirely — this was
                                 the actual bug, not the wrap property below */
  overflow-wrap: anywhere;   /* real tag data includes long hyphen-joined slugs with no spaces —
                                 see the discovery-sourced "neurological-conditions-..." tag */
  display: inline-block;
}
.tag-cloud-item:hover, .tag-cloud-item:focus-visible { border-color: var(--terracotta); color: var(--terracotta); }

/* ---------- Homepage finder (wizard) ---------- */
#finder-wizard { margin-bottom: 1rem; }
#finder-wizard h2 { margin-bottom: 0.4rem; }
#finder-wizard > p { max-width: 55ch; }
#finder-skip-all { font-weight: 700; }

.wizard-progress {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--granite-text);
  margin: 1.5rem 0 0.3rem;
}
.wizard-step h3 {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 3.5vw, 1.8rem);
  margin: 0 0 0.3rem;
}
.wizard-step h3:focus-visible { outline: none; }
.wizard-hint { color: var(--charcoal); margin: 0 0 1rem; max-width: 55ch; }

.wizard-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1rem;
}
.wizard-choice {
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.75em 1.3em;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: var(--charcoal);
  background: var(--paper);
  cursor: pointer;
}
.wizard-choice:hover { border-color: var(--terracotta); color: var(--terracotta); }
.wizard-choice.selected {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--chalk);
}

.wizard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.3rem; }
.wizard-skip-step {
  border: none; background: none; font: inherit; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0.45em 0.1em;
}
.wizard-back {
  border: none; background: none; font: inherit; font-weight: 700; color: var(--charcoal);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0.45em 0.1em;
}
.wizard-continue {
  padding: 0.7rem 1.6rem; border-radius: 8px; border: none; font: inherit; font-weight: 700;
  font-size: 1rem; background: var(--terracotta); color: var(--chalk); cursor: pointer;
}
.wizard-continue:hover { background: var(--ink); }

#finder-toggle { font-size: 0.95rem; margin: 0 0 2rem; }
/* When browsing everything, the way back to the questions is a real button, not a footnote link */
#finder-toggle-link[data-mode="wizard"] {
  display: inline-block; padding: 0.8rem 1.4rem; border-radius: 8px; border: 2px solid var(--terracotta);
  background: var(--paper); color: var(--terracotta); font-weight: 700; font-size: 1.05rem; text-decoration: none;
}
#finder-toggle-link[data-mode="wizard"]:hover, #finder-toggle-link[data-mode="wizard"]:focus-visible { background: var(--terracotta); color: var(--chalk); }
#finder-toggle-link[data-mode="wizard"]::after { content: " \2192"; }
.finder-helper { color: var(--charcoal); font-size: 0.95rem; }
.site-footer .footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-weight: 700; }
.guide-links li { margin-bottom: 0.4rem; }

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.7rem;
  align-items: center;
  margin-bottom: 0.6rem;
}
.filter-bar > strong { font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--granite-text); width: 100%; }
.parish-toggle,
.intensity-toggle {
  position: relative;
  display: inline-block;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.45em 1em;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--charcoal);
  cursor: pointer;
  user-select: none;
}
.parish-toggle input, .intensity-toggle input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.parish-toggle:has(input:checked), .intensity-toggle:has(input:checked) { background: var(--terracotta); border-color: var(--terracotta); color: var(--chalk); }
.parish-toggle:has(input:focus-visible), .intensity-toggle:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
#parish-reset,
#intensity-reset {
  border: none; background: none; font: inherit; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0.45em 0.3em;
}
.filter-bar .meta { width: 100%; font-size: 0.85rem; color: var(--granite-text); margin-top: 0.4rem; }

#active-tag-filter { font-size: 0.95rem; color: var(--charcoal); margin-bottom: 1rem; }

/* ---------- Best match callout ---------- */
.best-match {
  background: var(--paper);
  border: 3px solid var(--ochre);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.best-match-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--terracotta);
  margin-bottom: 0.3rem;
}
.best-match h3 { margin: 0 0 0.3rem; font-family: "Space Grotesk", "Segoe UI", sans-serif; font-weight: 700; font-size: 1.3rem; }
.best-match h3 a { text-decoration: none; }
.best-match h3 a:hover, .best-match h3 a:focus-visible { text-decoration: underline; }
.best-match p { margin: 0; color: var(--charcoal); }

/* ---------- Listing cards ---------- */
#listings-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}
.listing-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.listing-card[hidden] { display: none; }
.demo-badge, .verify-badge {
  align-self: flex-start;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25em 0.6em;
  border-radius: 4px;
  display: inline-block;
}
/* Distinct from a plain "Verified by {name}" badge (a human independently
   checked it) — this is the organiser's own say-so, a real but different
   confidence level. Reuses --lichen, already the project's established
   positive-confirmation colour (see accessibility.access-line). */
.verify-badge-confirmed {
  background: var(--lichen);
  color: var(--chalk);
}
.editorial-flag-banner {
  background: var(--ochre);
  color: var(--ink);
  font-weight: 600;
  padding: 0.6em 0.9em;
  border-radius: 4px;
  margin: 0.5em 0;
}
.free-pill {
  display: inline-block;
  background: var(--ochre);
  color: var(--ink);
  font-weight: 700;
  padding: 0.05em 0.5em;
  border-radius: 4px;
}
.listing-card h3 { font-size: 1.18rem; margin: 0; line-height: 1.3; }
.listing-card h3 a { text-decoration: none; border-bottom: 2px solid transparent; }
.listing-card h3 a:hover, .listing-card h3 a:focus-visible { border-bottom-color: var(--terracotta); }
.listing-card .meta { margin: 0; font-size: 0.95rem; color: var(--charcoal); }
.tag {
  display: inline-block;
  font-size: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2em 0.7em;
  color: var(--granite-text);
  text-decoration: none;
  margin: 0.2rem 0.3rem 0 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.tag:hover, .tag:focus-visible { border-color: var(--terracotta); color: var(--terracotta); }

.no-matches, #no-matches { color: var(--granite-text); font-style: italic; }

/* ---------- Single listing page ---------- */
article.listing { max-width: 640px; }
article.listing h2 {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  line-height: 1.15;
  margin: 0.8rem 0 0.3rem;
}
article.listing > .meta { font-size: 1.05rem; color: var(--charcoal); margin: 0 0 1rem; }

/* Get in touch — active-seniors.github.io#152. The fastest path from
   finding a listing to actually contacting someone, right under the
   title rather than after a long scroll through cost/schedule/access
   detail. The fuller organiser-box further down stays as the complete
   reference; this is the one-tap shortcut. */
.get-in-touch {
  background: var(--paper);
  border: 1.5px solid var(--terracotta);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.5rem;
}
.get-in-touch > strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--granite-text);
  margin-bottom: 0.4rem;
}
.joining-summary { margin: 0 0 0.8rem; font-weight: 700; color: var(--ink); }
.contact-buttons { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0; }
.contact-button {
  display: inline-block;
  padding: 0.65em 1.3em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 1.5px solid var(--terracotta);
  color: var(--terracotta);
}
.contact-button:hover, .contact-button:focus-visible { background: var(--terracotta); color: var(--chalk); }
.contact-button-primary { background: var(--terracotta); color: var(--chalk); }
.contact-button-primary:hover, .contact-button-primary:focus-visible { background: var(--ink); border-color: var(--ink); }

article.listing .description { font-size: 1.05rem; max-width: 65ch; margin-bottom: 1.5rem; }
.detail-rows {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.1rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 1.5rem;
}
.detail-rows p { margin: 0; display: flex; gap: 0.5rem; }
.detail-rows strong { min-width: 6.5rem; flex-shrink: 0; }
.detail-rows .uncertain { color: var(--granite-text); font-style: italic; }
.access-line { color: var(--lichen); font-weight: 700; }
article.listing .tags { margin-bottom: 1.5rem; }
.organiser-box { font-size: 0.98rem; margin-bottom: 1.5rem; }
.organiser-box strong { display: block; margin-bottom: 0.3rem; }
.freshness {
  font-size: 0.88rem;
  color: var(--granite-text);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  margin-bottom: 1.5rem;
}
.back-link { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--granite-line); }
.back-link:hover, .back-link:focus-visible { border-bottom-color: var(--terracotta); }

/* ---------- Tag index page ---------- */
ul.tag-list { list-style: none; padding: 0; }
ul.tag-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
ul.tag-list a { text-decoration: none; font-weight: 700; }

/* ---------- Submission form ---------- */
fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
legend { font-weight: 700; padding: 0 0.4rem; color: var(--ink); }
form label { display: block; margin-top: 0.85rem; font-size: 0.92rem; font-weight: 700; color: var(--charcoal); }
form label.checkbox-inline { display: inline-block; font-weight: normal; margin-right: 1.2rem; color: var(--ink); }
form input[type="text"], form input[type="email"], form input[type="tel"], form input[type="url"],
form input[type="number"], form select, form textarea {
  width: 100%; max-width: 420px; padding: 0.5rem 0.6rem; margin-top: 0.3rem;
  border: 1.5px solid var(--line); border-radius: 6px; font: inherit; color: var(--ink);
  background: var(--paper); box-sizing: border-box;
}
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button[type="submit"] {
  margin-top: 1.5rem; padding: 0.7rem 1.6rem; background: var(--terracotta); color: var(--chalk);
  border: none; border-radius: 8px; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
}
button[type="submit"]:hover { background: var(--ink); }
button[type="submit"]:disabled { background: var(--granite-line); cursor: not-allowed; }
#form-status { margin-top: 1rem; font-weight: 700; }
#form-status.success { color: var(--lichen); }
#form-status.error { color: var(--error); }

/* ---------- Print list ---------- */
.print-list-count {
  display: inline-block;
  background: var(--terracotta);
  color: var(--chalk);
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 1.4em;
  text-align: center;
  padding: 0.05em 0.45em;
  border-radius: 999px;
  margin-left: 0.3em;
}
.print-list-count[hidden] { display: none; }

.print-list-toggle {
  align-self: flex-start;
  margin-top: 0.3rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.45em 1em;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--charcoal);
  background: var(--paper);
  cursor: pointer;
}
.print-list-toggle:hover { border-color: var(--terracotta); color: var(--terracotta); }
.print-list-toggle.on-print-list {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--chalk);
}

.print-list-actions { display: flex; gap: 0.8rem; margin: 1rem 0 1.5rem; }
.print-list-actions button {
  padding: 0.6rem 1.3rem; border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer;
}
#print-this-list { background: var(--terracotta); color: var(--chalk); border: none; }
#print-this-list:hover { background: var(--ink); }
#clear-print-list { background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); }
#clear-print-list:hover { border-color: var(--terracotta); color: var(--terracotta); }

.print-list-intro { color: var(--granite-text); font-size: 0.95rem; max-width: 60ch; }

.print-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.print-item h3 { font-family: "Space Grotesk", "Segoe UI", sans-serif; font-weight: 700; font-size: 1.4rem; margin: 0 0 0.3rem; }
.print-item-meta { color: var(--charcoal); margin: 0 0 0.8rem; }
.print-item-rows p, .print-item-organiser div { margin: 0.3rem 0; }
.print-item-organiser { margin-top: 0.8rem; }
.print-item-organiser strong { display: block; margin-bottom: 0.2rem; }

/* Large-print output — active-seniors.github.io#153. This is a printout
   meant to be handed to someone, or left on a table, so it's deliberately
   much larger and plainer than the screen version: big type, pure black on
   white (the theme's paper/chalk tones are a screen-contrast choice, not a
   printer-ink one), no chrome, one listing per block that won't get split
   across a page break. */
@media print {
  .wip-banner,
  nav.site-nav,
  .masthead .maintained-by,
  footer.site-footer,
  .print-list-toggle,
  .print-list-actions,
  .print-list-intro,
  #print-list-empty-message,
  .print-list-count,
  .back-link {
    display: none !important;
  }

  body { background: #fff; color: #000; font-size: 14pt; line-height: 1.5; }
  .page { max-width: none; padding: 0; }
  .masthead { border-bottom: 2pt solid #000; margin-bottom: 0.3in; padding: 0 0 0.2in; }
  .wordmark { font-size: 22pt; color: #000; }
  .wordmark .place { color: #000; }
  .masthead .strapline { display: none; }

  .print-item {
    background: #fff;
    border: none;
    border-bottom: 1.5pt solid #000;
    border-radius: 0;
    padding: 0.25in 0;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .print-item h3 { font-size: 22pt; color: #000; }
  .print-item-meta,
  .print-item-rows p,
  .print-item-organiser div,
  .print-item-organiser strong {
    font-size: 14pt;
    color: #000;
  }
  .print-item-rows strong { min-width: 2in; display: inline-block; }
}

/* ---------- Footer ---------- */
footer.site-footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--line);
  color: var(--granite-text);
  font-size: 0.9rem;
  max-width: 65ch;
}
footer.site-footer a { color: var(--terracotta); }

/* ---------- Results view: "Your matches" summary and fold-down sections ---------- */
.your-answers {
  background: var(--paper);
  border: 2px solid var(--terracotta);
  border-radius: 10px;
  padding: 1.1rem 1.3rem 1rem;
  margin: 0 0 1.25rem;
  scroll-margin-top: 1rem;
}
.your-answers h2 { margin: 0 0 0.4rem; }
.your-answers h2:focus-visible { outline: none; }
.your-answers p { margin: 0.25rem 0; }
.your-answers-count { font-weight: 700; }
.your-answers-actions { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 0.7rem !important; }
.your-answers-change {
  display: inline-block; padding: 0.55rem 1.1rem; border-radius: 8px; background: var(--terracotta);
  color: var(--chalk) !important; font-weight: 700; text-decoration: none;
}
.your-answers-change:hover, .your-answers-change:focus-visible { background: var(--ink); }
#your-answers-clear { align-self: center; font-weight: 700; }

details.fold { margin: 0 0 1rem; }
details.fold > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0; border-bottom: 1.5px solid var(--line);
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "\25B8"; font-size: 1rem; color: var(--terracotta); transition: transform 150ms ease; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary h2 { display: inline; margin: 0; font-size: 1.25rem; }
details.fold > summary strong { font-size: 1rem; }
details.fold[open] > summary { margin-bottom: 0.8rem; }