/* ==========================================================================
   Vivah · the public site
   --------------------------------------------------------------------------
   Every colour, size, radius, duration and easing here is a var(--token) from
   public/styles/tokens.css, which is generated from design/tokens/tokens.json.
   There is one exception and it is marked: the petal gradient, which is a 15px
   decoration that carries no type.

   The shape of the design, and where each part of it comes from:

     · the TYPE and the COLOUR are the wedding-site reference, entirely;
     · the BANNER is that reference's floral hero with design-2's job — a couple
       illustrated in the middle and a search strip across the bottom;
     · the SECTION SET below it is design-1's;
     · the MOTION is the reference's: things bloom, rise and settle rather than
       sliding in. Nothing here moves faster than --duration-base, and every
       animation is switched off wholesale under prefers-reduced-motion.

   It is a served file rather than a <style> block because this is a multi-page
   site: inlining it would re-send the whole design on every navigation and
   cache it on none of them.
   ========================================================================== */

/* --------------------------------------------------------------- 1. base */

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

/* `scroll-padding-top`, which keeps an in-page link's heading out from under the fixed
   header, is in chrome.css with the header it makes room for. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

/* 🔴 NO HORIZONTAL SCROLL, EVER. Several sections here bleed a flower past the
   content edge on purpose, and every one of them is one mistake away from a page
   that drags sideways under a thumb. `clip` rather than `hidden`, so `position:
   sticky` on the header still works. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-secondary-700);
}

p {
  margin: 0 0 1em;
}

figure {
  margin: 0;
}

::selection {
  background: var(--brand-primary-200);
  color: var(--brand-secondary-700);
}

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

.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;
}

/* `.skip`, the skip link, is in chrome.css: it is part of the header partial now. */

/* ------------------------------------------------------------ 2. layout */

/* `.wrap` is in chrome.css: the header and the footer are laid out on it. */

/*
 * The header is out of flow, so something has to make room for it. Every page pays it
 * here; the home page's banner opts out and pays it in its own padding instead, because
 * it is the one section that wants to run underneath.
 */
main {
  padding-top: var(--layout-header-h);
}

.section {
  position: relative;
  padding-block: var(--layout-section);
}

.section--flush-top {
  padding-top: 0;
}

.section--blush {
  background: var(--bg-band-blush);
}
.section--rose {
  background: var(--bg-band-rose);
}
.section--sand {
  background: var(--bg-band-sand);
}
.section--sage {
  background: var(--bg-band-sage);
}
.section--surface {
  background: var(--bg-surface);
}

/* The deep band: the footer, and any section that should feel like an occasion. */
.section--ink {
  background: var(--bg-brand-panel);
  color: var(--text-on-brand);
}
.section--ink h1,
.section--ink h2,
.section--ink h3 {
  color: var(--text-on-brand);
}
.section--ink p {
  color: var(--text-on-brand-muted);
}

.center {
  text-align: center;
}

.prose {
  max-width: var(--measure-prose);
}

.prose ul {
  padding-left: var(--space-5);
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose p,
.prose li {
  color: var(--text-secondary);
}

/* ------------------------------------------------- 3. section furniture */

/*
 * The four parts of a section head, in the order they are read:
 *
 *   eyebrow   a gold word in small caps, saying what kind of section this is
 *   script    the Pinyon line, which is ornament wearing the shape of a word
 *   title     the Cormorant heading, which is the actual sentence
 *   lead      one supporting line, never two
 *
 * Every one of them is optional. What is NOT optional is the order: a script
 * line under a title reads as a caption, and the whole effect depends on it
 * arriving first.
 */
.section-head {
  max-width: 680px;
  margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
}

.section-head--start {
  margin-inline: 0;
  text-align: left;
}

.eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-accent-600);
}

.section--ink .eyebrow {
  color: var(--brand-accent-on-brand);
}

.script {
  margin: 0 0 var(--space-1);
  font-family: var(--font-script);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.25;
  color: var(--brand-primary-700);
  /* Pinyon's descenders are long and its ascenders are taller than its cap
     height, so it needs room a sans of the same size would not. */
  padding-block: 0.08em;
}

.section--ink .script {
  color: var(--brand-accent-on-brand);
}

.section-title {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
}

/* The emphasis word inside a heading, the way both reference designs mark the
   subject of the sentence. */
.section-title em {
  font-style: normal;
  color: var(--brand-primary-800);
}

.section--ink .section-title em {
  color: var(--brand-accent-on-brand);
}

.section-lead {
  margin: var(--space-5) 0 0;
  color: var(--text-secondary);
}

.section-head--start .section-lead {
  margin-inline: 0;
}

/* The lead paragraph as the reference sets it: display italic, larger, quieter. */
.lead {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(var(--text-lg), 2.2vw, var(--text-2xl));
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}

/* ---------------------------------------------------------- 4. ornament */

/*
 * The gold flourish, as an image and as a rule.
 *
 * `.flourish` is the drawn one from the art library; `.gold-rule` is the CSS one
 * for places that need a divider rather than a piece of ornament. Both fade at
 * their ends, which is what stops either reading as a box edge.
 */
.flourish {
  display: block;
  width: clamp(140px, 20vw, 220px);
  margin: var(--space-3) auto 0;
  opacity: 0.9;
}

.section-head--start .flourish {
  margin-inline: 0;
}

.gold-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--gradient-gold-rule);
}

/*
 * A floral piece placed against a section.
 *
 * `pointer-events: none` on every one of them: these sit over the corners of
 * sections that contain links and form fields, and a flower that eats a click on
 * a button behind it is the worst kind of decoration.
 */
.petalwork {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  /* The artwork is watercolour on white paper and the bands are tinted, so it
     always sits slightly brighter than its ground. Multiply marries them. */
  mix-blend-mode: multiply;
}

/*
 * 🔑 WHICH PIECE GOES IN WHICH CORNER — the rule, because it was got wrong once.
 *
 * The two corner pieces are L-shapes with the flowers at the angle:
 *
 *     corner-a   flowers bottom-RIGHT, one arm along the bottom, one up the right
 *     corner-b   flowers bottom-LEFT,  one arm along the bottom, one up the left
 *
 * So a LEFT corner takes corner-b and a RIGHT corner takes corner-a, and a TOP corner is
 * the same piece flipped vertically. The first version put corner-a top-left and rotated
 * corner-b into the bottom-right, which left both bouquets pointing INTO the page with
 * their stems reaching for the edge — a corner piece growing the wrong way.
 *
 * ⚠️ THE FLIP IS `scale`, NOT `transform`. Any animation on `transform` replaces a static
 * transform outright, so a mirrored piece that is ever animated un-mirrors itself every
 * cycle. The individual property composes with the animation instead.
 */
.petalwork--tl {
  top: 0;
  left: 0;
  width: clamp(120px, 18vw, 230px);
  scale: 1 -1;
}
.petalwork--tr {
  top: 0;
  right: 0;
  width: clamp(120px, 18vw, 230px);
  scale: 1 -1;
}
.petalwork--bl {
  bottom: 0;
  left: 0;
  width: clamp(120px, 18vw, 230px);
}
.petalwork--br {
  bottom: 0;
  right: 0;
  width: clamp(120px, 18vw, 230px);
}

/* The flat-vector blooms, scattered. Lower opacity is what folds design-2's
   saturated teal and violet into a blush palette without recolouring the art. */
.bloom {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.55;
}

@media (max-width: 47.99rem) {
  /* Ornament is the first thing to go on a phone: it competes with the content
     for a 360px column and it is the part that is doing the least work. */
  .petalwork,
  .bloom {
    display: none;
  }
  .petalwork--keep {
    display: block;
    width: 34vw;
    opacity: 0.8;
  }
}

/* ----------------------------------------------------------- 5. controls */

/* `.btn` and its variants, and `.link-quiet`, are in chrome.css: the header and the footer
   draw with them, on the application's page too. What stays here is what only the public
   pages use. */

.section--ink .btn--outline {
  color: var(--text-on-brand);
  border-color: var(--border-on-brand);
}

.section--ink .btn--outline:hover {
  color: var(--bg-brand-panel);
  background-color: var(--brand-accent-on-brand);
  border-color: var(--brand-accent-on-brand);
}

/*
 * The quiet link with a rule that grows. The rule is the whole control — it is
 * how the reference makes a text link feel like a button without drawing a box.
 */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--layout-tap-target);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-primary-800);
  transition: color var(--duration-base) var(--ease-standard);
}

.link-arrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  transition: width var(--duration-slow) var(--ease-out);
}

.link-arrow:hover::after {
  width: 48px;
}

.section--ink .link-arrow {
  color: var(--brand-accent-on-brand);
}

/* ------------------------------------------------------------- 6. cards */

.card {
  position: relative;
  padding: var(--space-6);
  background-color: var(--bg-surface);
  background-image: var(--gradient-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--sheen-top),
    inset 0 -1px 0 var(--sheen-bottom);
}

.card--lift {
  transition: transform var(--duration-slow) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-out);
}

.card--lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3), inset 0 1px 0 var(--sheen-top),
    inset 0 -1px 0 var(--sheen-bottom);
}

/*
 * The arched card, which is the one shape in this design that is not a
 * rectangle. Design 1 puts its three "why choose us" panels in soft arches and
 * circles; an arch is also a temple doorway, which is the right association here
 * and the reason it is worth a non-standard radius.
 */
.card--arch {
  border-radius: var(--radius-2xl) var(--radius-2xl) var(--radius-lg) var(--radius-lg);
}

.card-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.card-body {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* The round icon well at the top of a feature card. */
.card-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  color: var(--brand-primary-700);
  background-image: var(--gradient-brand-soft);
  border: 1px solid var(--brand-accent-200);
  border-radius: var(--radius-full);
}

.card-icon svg {
  width: 26px;
  height: 26px;
}

/* -------------------------------------------------------------- 7. grid */

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

/* A two-column split where one side is art and the other is words. */
.split {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split--art-first > :first-child {
    order: -1;
  }
}

/* ------------------------------------------------------ 8–9. header, footer */

/*
 * In chrome.css. They are the ONE header and footer of the whole site — around the React
 * application as well as these pages — and the application's page cannot load this file,
 * whose base rules would restyle everything under it.
 */

/* ------------------------------------------------------------ 10. motion */

/*
 * Scroll reveal.
 *
 * `.no-js` on <body> is removed by the site script, and until it is, every
 * revealed element is fully visible. That ordering is the whole contract: a
 * reveal implemented the other way round leaves the page blank for anybody whose
 * script was blocked, which on a marketing page is the entire content.
 */
body:not(.no-js) [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-reveal) var(--ease-standard),
    transform calc(var(--duration-reveal) + 200ms) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

body:not(.no-js) [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* The floral corners open rather than appear: they grow from the corner they are
   anchored to, which is why each has its own transform-origin. */
@keyframes bloom-in-left {
  from {
    opacity: 0;
    transform: translate(-8%, 8%) scale(0.9);
  }
}

@keyframes bloom-in-right {
  from {
    opacity: 0;
    transform: translate(8%, -8%) scale(0.9);
  }
}

@keyframes sway {
  50% {
    transform: rotate(1.1deg);
  }
}

@keyframes sway-back {
  50% {
    transform: rotate(-1.3deg);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}

@keyframes float-soft {
  50% {
    transform: translateY(-10px);
  }
}

/* A pulse, not a turn. The reference's version rotates as well, and a wreath rocking
   on its axis behind a couple reads as something going round — which is exactly the
   motion this design was asked not to have. */
@keyframes breathe {
  50% {
    opacity: 0.8;
    transform: scale(0.97);
  }
}

@keyframes petal-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  10% {
    opacity: 0.85;
  }
  50% {
    transform: translate3d(calc(var(--drift) * 1px), 46vh, 0) rotate(200deg);
  }
  90% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--drift) * -0.6px), 92vh, 0) rotate(460deg);
  }
}

/*
 * 🔴 ONE RULE, EVERYTHING OFF.
 *
 * Every animation on this site is decoration: falling petals, swaying flowers,
 * a heading rising into place. A devotee who has asked their operating system
 * for less motion gets a page that is complete and still, and no individual
 * animation has to remember to opt out.
 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body:not(.no-js) [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------- 11. print */

@media print {
  .petalwork,
  .bloom,
  .petals {
    display: none !important;
  }
  body {
    background: none;
  }
}

/* =========================================================== 12. documents
 *
 * The FAQ, the terms and every CMS page. They differ in words and not in shape,
 * so they share one vocabulary: a head with a breadcrumb, a rail of anchors down
 * the left, and a measured column of prose beside it.
 *
 * It lives in site.css rather than in three <style> blocks because it WAS three
 * <style> blocks — near-identical ones, which had already drifted: the CMS page
 * called its wrapper `.page-head` and the other two called theirs `.doc-head`,
 * and the two had different padding.
 * ------------------------------------------------------------------------- */

.doc-head {
  padding-block: clamp(var(--space-6), 4vw, var(--space-12)) var(--space-8);
}

.crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

.crumbs a {
  color: var(--text-secondary);
}

.crumbs a:hover {
  color: var(--brand-primary-800);
  text-decoration: underline;
}

.crumbs svg {
  flex-shrink: 0;
  color: var(--brand-accent-500);
}

.doc-head h1 {
  font-size: clamp(2rem, 4.6vw, 3.25rem);
}

.doc-lead {
  max-width: var(--measure-prose);
  margin: var(--space-5) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(var(--text-md), 2vw, var(--text-lg));
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-5) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.doc-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.doc-meta svg {
  color: var(--brand-accent-500);
}

/* A standing note at the top of a document — "awaiting legal review" and its like.
   Warning-toned rather than blush: it is the one thing on the page that is not the
   document, and it has to be told apart from it. */
.doc-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: var(--measure-prose);
  margin-top: var(--space-8);
  padding: var(--space-5);
  background: var(--status-warning-100);
  border-left: 3px solid var(--status-warning-600);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.doc-notice svg {
  flex-shrink: 0;
  margin-top: 0.15em;
  color: var(--status-warning-700);
}

.doc-notice p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ---- the rail and the column ---- */

.doc-layout {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  grid-template-columns: 1fr;
  padding-bottom: var(--layout-section);
}

@media (min-width: 64rem) {
  .doc-layout {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    align-items: start;
  }
}

/*
 * The rail is sticky on a wide screen and an ordinary list on a narrow one. On a
 * phone it is the first thing under the heading, which is the right place for a
 * table of contents — it is how a reader decides whether to read the rest.
 */
.doc-rail h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-accent-600);
}

.doc-rail ol {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-rail a {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-left: 2px solid var(--border-subtle);
  transition: color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

.doc-rail a:hover {
  color: var(--brand-primary-800);
  border-left-color: var(--brand-primary-600);
}

@media (min-width: 64rem) {
  .doc-rail {
    position: sticky;
    top: calc(var(--layout-header-h) + var(--space-6));
  }
}

.doc-body,
.page-body {
  max-width: var(--measure-prose);
}

.doc-body p,
.doc-body li,
.page-body p,
.page-body li {
  color: var(--text-secondary);
}

.doc-body h2,
.page-body h2 {
  margin: clamp(var(--space-10), 5vw, var(--space-16)) 0 var(--space-4);
  font-size: var(--text-2xl);
}

.doc-body h3,
.page-body h3 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--text-lg);
}

.doc-body > :first-child,
.page-body > :first-child {
  margin-top: 0;
}

.page-body ul,
.page-body ol,
.doc-body ul,
.doc-body ol {
  padding-left: var(--space-6);
}

.page-body li + li,
.doc-body li + li {
  margin-top: var(--space-2);
}

.page-body a,
.doc-body a,
.doc-lead a {
  color: var(--brand-info-700);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The fading gold rule between a document's head and its body. */
.page-rule {
  height: 1px;
  border: 0;
  margin: 0 0 var(--space-10);
  background: var(--gradient-gold-rule);
}

.clause + .clause {
  margin-top: clamp(var(--space-10), 5vw, var(--space-16));
}

.doc-foot,
.faq-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  max-width: var(--measure-prose);
  margin-top: clamp(var(--space-12), 6vw, var(--space-20));
  padding: var(--space-6);
  background-color: var(--bg-surface);
  background-image: var(--gradient-surface);
  border: 1px solid var(--brand-accent-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.doc-foot p,
.faq-more p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.faq-more h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.faq-group + .faq-group {
  margin-top: clamp(var(--space-12), 6vw, var(--space-16));
}

.faq-group > h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xl);
}

.faq-group > p {
  max-width: var(--measure-prose);
  color: var(--text-secondary);
}

/* ---- the accordion, in both of its forms ----
 *
 * 🔑 THE FAQ PAGE USES <details> AND THE HOME PAGE DOES NOT, ON PURPOSE.
 *
 * A <details> cannot animate its own height, which is why the home page's short
 * accordion is a button over a region — there the opening IS the interaction, and
 * four questions snapping open is the jarring part of every FAQ built the other way.
 *
 * But a <details> has something the button pattern cannot have: a browser opens one
 * automatically when a fragment inside it is targeted. The FAQ page is a document
 * whose entire rail is deep links into it, and an answer that stayed shut when
 * somebody followed a link to it would be a broken page.
 *
 * They are styled together here so the two read as one control.
 */
.faq-list {
  display: grid;
  gap: var(--space-3);
}

details.faq-item {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

details.faq-item[open] {
  border-color: var(--brand-accent-200);
  box-shadow: var(--shadow-2);
}

details.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--layout-tap-target);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--brand-secondary-700);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--duration-base) var(--ease-standard);
}

/* Safari draws its own triangle and ignores `list-style`, so both are needed. */
details.faq-item > summary::-webkit-details-marker {
  display: none;
}

details.faq-item > summary:hover {
  background: var(--bg-sunken);
}

details.faq-item > summary:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.faq-chevron {
  flex-shrink: 0;
  color: var(--brand-primary-600);
  transition: transform var(--duration-base) var(--ease-standard);
}

details.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

details.faq-item > div {
  padding: 0 var(--space-5) var(--space-5);
  max-width: var(--measure-prose);
}

details.faq-item > div p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ---- the standalone notice page (unsubscribe) ---- */

.notice {
  max-width: 40rem;
  margin: clamp(var(--space-8), 5vw, var(--space-16)) auto;
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  background-color: var(--bg-surface);
  background-image: var(--gradient-surface);
  border: 1px solid var(--brand-accent-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
}

.notice h1 {
  margin-bottom: var(--space-5);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.notice form {
  margin: var(--space-6) 0;
}

/* ---- the 404 ----
 *
 * The couple in an arch beside the words, the same arrangement as the home page's
 * quote band — so a stranger who follows a stale link lands somewhere that is visibly
 * the same site, rather than on a line of text.
 */
.lost {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
  grid-template-columns: 1fr;
  padding-block: clamp(var(--space-12), 8vw, var(--space-24));
  text-align: center;
}

@media (min-width: 48rem) {
  .lost {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    text-align: left;
  }
}

.lost__art {
  justify-self: center;
  width: min(70vw, 20rem);
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border: 1px solid var(--brand-accent-200);
  border-radius: 999px 999px var(--radius-xl) var(--radius-xl);
  box-shadow: var(--shadow-3);
}

.lost__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lost h1 {
  font-size: clamp(2rem, 4.6vw, 3.25rem);
}

.lost .lead {
  max-width: 34rem;
  margin-top: var(--space-5);
}

.lost__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-8);
}

@media (min-width: 48rem) {
  .lost .lead {
    margin-inline: 0;
  }
  .lost__actions {
    justify-content: flex-start;
  }
}