/* Site layer on Fluid Theme v2 (loaded after the child theme). Only what the theme does not do; anything here that every
   site needs belongs upstream in the-fluid-theme. */
@layer site {
  body { overflow-wrap: break-word; }
  ::placeholder { font-style: italic; } /* stopgap until the-fluid-theme#97 ships the italic placeholder */
  .narrow { max-width: var(--measure, 65ch); }
  .table-scroll { overflow-x: auto; max-width: 100%; }
  .table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .site-forms { display: grid; gap: var(--space-6, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
  .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  .choice { display: inline-flex; gap: 0.5rem; align-items: baseline; font-weight: normal; }
  fieldset.form-group { border: 0; padding: 0; margin: 0; min-width: 0; }
  fieldset.form-group legend { font-weight: 600; margin-bottom: 0.5rem; padding: 0; }
  .sources { margin-top: var(--space-8, 2rem); }
  .sources ul { padding-inline-start: 1.25rem; }
  .sources li { overflow-wrap: anywhere; }
  .answer { max-width: var(--measure, 65ch); }
  .theme-toggle { background: none; border: 0; cursor: pointer; font-family: inherit; color: inherit; padding: 0; }
  .sample-badge { display: inline-block; font-size: 0.75em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid currentColor; padding: 0.1em 0.5em; border-radius: 0.25em; }
  .card-grid { display: grid; gap: var(--space-6, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
  /* Show only what applies (forms.md 7): the service questions appear for an unresolved problem; a browser without
     :has() shows them always (never required). */
  @supports selector(:has(*)) {
    .letter-form:not(:has(input[name="topic"][value="problem"]:checked)) .if-problem { display: none; }
  }
}
/* 603010.wedding: Fluid v2 gallery (Bodoni Moda over Hanken Grotesk) with a deep sage accent (white on it ≈ 6:1),
   Pinyon Script for names only, and three landing styles by data-look on .wed (pages/home.mjs). The couple's palette
   is --p60 / --p30 / --p10 on .wed, swapped by assets/site.js; the sample card and swatches read it, the page chrome
   does not, so every text pair keeps its checked contrast. */
@font-face { font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/pinyon-script-latin-400.woff2) format("woff2"); }
@layer site {
  :root { --accent: oklch(45% 0.05 135); --font-script: "Pinyon Script", "Snell Roundhand", cursive; }
  .nowrap { white-space: nowrap; }
  .wed { --p60: #eef0e8; --p30: #5b6b4f; --p10: #b5654a; /* = PALETTES[0] in src/palettes.js */
    /* page colours come from the theme's tokens, so light, dark and Noir keep the theme's checked contrast */
    --wed-bg: var(--color-background); --wed-ink: var(--color-text); --wed-soft: var(--color-text-muted); --wed-band: var(--color-surface); --wed-line: var(--color-border);
    background: var(--wed-bg); color: var(--wed-ink); }
  .site-footer p a { text-decoration: underline; text-underline-offset: 0.15em; }
  .wed .eyebrow, .wed .meta { color: var(--wed-soft); }
  .wed-hero { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    padding: clamp(3rem, 8vw, 8rem) var(--space-gutter, 1.25rem); max-width: var(--container-content, 90rem); margin-inline: auto; min-height: min(88vh, 60rem); }
  .wed-hero__text { display: grid; gap: 1.25rem; }
  .wed-hero__title { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 6rem); line-height: 1.02; letter-spacing: -0.01em; margin: 0; }
  .wed-hero__title em { font-style: italic; }
  .wed-card { margin: 0; display: grid; gap: 0.75rem; justify-items: center; }
  .wed-card__paper { background: var(--p60); color: var(--p30); width: min(100%, 26rem); aspect-ratio: 5 / 7; padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 3.5vw, 2.25rem);
    display: grid; align-content: center; justify-items: center; gap: 0.9rem; text-align: center; border-radius: 2px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 18px 40px -18px rgb(0 0 0 / 0.35); outline: 1px solid color-mix(in srgb, var(--p10) 55%, transparent); outline-offset: -0.9rem; transition: background-color .4s, color .4s; }
  .wed-card__paper p { margin: 0; max-width: none; }
  .wed-card__kicker, .wed-card__place { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; }
  .wed-card__names { font-family: var(--font-script); font-size: clamp(2.6rem, 2rem + 2.6vw, 3.8rem); line-height: 1.1; display: grid; }
  .wed-card__amp { color: var(--p10); font-size: 0.7em; }
  .wed-card__date { font-family: var(--font-heading); font-style: italic; font-size: 1.15rem; }
  .wed-card__bar { display: flex; width: 9rem; height: 0.5rem; border-radius: 1px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--p30) 25%, transparent); }
  .wed-card__bar > span:nth-child(1) { flex: 6; background: var(--p60); }
  .wed-card__bar > span:nth-child(2) { flex: 3; background: var(--p30); }
  .wed-card__bar > span:nth-child(3) { flex: 1; background: var(--p10); }
  .palette__bar { display: block; width: 100%; height: 3.5rem; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.1); }
  .palettes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); padding: 0; margin: 0; list-style: none; }
  .palette__button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 0.5rem; width: 100%; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--wed-line); border-radius: 4px; background: color-mix(in srgb, var(--wed-bg) 92%, white); }
  .palette__button:hover { border-color: var(--wed-soft); }
  .palette__button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .palette__button[aria-pressed="true"] { border-color: var(--wed-ink); box-shadow: inset 0 0 0 1px var(--wed-ink); }
  .palette__name { font-family: var(--font-heading); font-size: 1.15rem; }
  .palette__hex { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--wed-soft); text-transform: uppercase; }
  .wed-band { background: var(--wed-band); }
  .steps { display: grid; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); padding: 0; margin: 0; list-style: none; }
  .step h3 { margin-block: 0.5rem; }
  .step__n { font-family: var(--font-heading); font-size: 3rem; line-height: 1; font-style: italic; }
  .wed-grid { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); background: var(--wed-line); border: 1px solid var(--wed-line); }
  .wed-tile { background: var(--wed-bg); padding: clamp(1.25rem, 2.5vw, 2rem); }
  .wed-tile h3 { margin-top: 0; }
  .wed [data-bg="tinted"] { background: var(--wed-band); }
  .wed .card { background: var(--wed-bg); color: var(--wed-ink); }

  /* Style 2, Colour field: the hero is a block of the couple's second colour; in light mode the bands take the main colour. */
  :root:not([data-theme="dark"]) .wed[data-look="colour-field"] { --wed-band: var(--p60); }
  .wed[data-look="colour-field"] .wed-hero { max-width: none; background: var(--p30); --color-text: var(--p60); --color-text-muted: var(--p60); color: var(--p60);
    padding-inline: max(var(--space-gutter, 1.25rem), calc((100% - var(--container-content, 90rem)) / 2)); transition: background-color .4s, color .4s; }
  .wed[data-look="colour-field"] .wed-hero .button { --accent-fill: var(--p60); --on-accent-fill: var(--p30); --accent-fill-hover: var(--p60); background: var(--p60); color: var(--p30); border-color: var(--p60); }
  .wed[data-look="colour-field"] .wed-hero .button[data-variant="outline"] { background: transparent; color: var(--p60); }
  .wed[data-look="colour-field"] .wed-hero :is(.eyebrow, .meta, .lede) { color: var(--p60); } /* .wed's --wed-soft resolved above the hero */
  .wed[data-look="colour-field"] .wed-card__paper { outline-color: var(--p30); box-shadow: 0 30px 60px -25px rgb(0 0 0 / 0.55); }

  /* Style 3, Noir: the whole page near-black with ivory type and one champagne accent, in light and dark mode alike.
     Set on :root so the nav, the forms and the footer follow (the theme reads these tokens everywhere). */
  :root:has(.wed[data-look="noir"]) {
    color-scheme: dark; --color-text: #f1ece2; --color-text-muted: #bdb5a8; --color-text-subtle: #ada596; --color-background: #141312;
    --color-surface: #1d1b19; --color-surface-raised: #24211e; --color-border: #4a453f; --color-border-subtle: #2c2926; --color-border-strong: #f1ece2;
    --accent: #e3c98f; --accent-ink: #e3c98f; --on-accent: #141312; --accent-fill: #e3c98f; --on-accent-fill: #141312; --accent-hover: #d4b877; --accent-fill-hover: #d4b877;
    --color-focus: #e3c98f; --accent-subtle: #2a2621; }
  .wed[data-look="noir"] .wed-hero__title { font-weight: 400; letter-spacing: 0.01em; }
  .wed[data-look="noir"] .wed-hero__title em { color: var(--accent-ink); }
}