/* Shared styling for the wedding site: the illustrated storybook design.

   The visual stack, bottom to top:
     aged parchment (body background, vignette and paper grain)
       → hanging botanical frame (.page::before / ::after, top corners)
         → dark forest-green navigation (<wedding-nav>)
           → page heading (<page-heading>: gold star, title, divider, script)
             → editorial content column (.parchment)
               → painted landscape ending (<wedding-footer>)

   Every colour, font and size used below comes from the tokens in :root.
   Components rendered by site-chrome.js read the same tokens through the
   shadow boundary, so change a token here and the whole site follows.

   Accents still carry meaning, in the storybook palette: antique bronze
   is Saturday, wax burgundy is Sunday, moss green everything else. The
   main call to action is the forest-green ornamental button. */

:root {
  color-scheme: only light;

  /* ---- Palette, sampled from the reference artwork ---------------- */
  --forest-950: #1b261d;      /* the darkest ink: big headings */
  --forest-900: #222f26;      /* the navigation bar */
  --forest-800: #2c3a2d;      /* buttons */
  --forest-700: #3c4b38;
  --moss: #5f6b3e;
  --sage: #8e9872;
  --olive: #7a7444;

  --parchment: #eee3cf;
  --parchment-light: #f5eddd;
  --parchment-dark: #e3d3b6;
  --parchment-edge: #d6c09c;

  --gold: #a8834c;            /* lines and ornaments only, never small text */
  --gold-light: #c9a66b;
  --gold-bright: #d8b776;     /* on the green bar */
  --bronze: #7a5a2e;          /* gold for text: passes contrast on parchment */

  --ink-strong: #2a2620;
  --ink-body: #3a342b;
  --ink-soft: #5b5245;
  --ink-on-ground: #e7dcc4;
  --ink-on-ground-bright: #f6efdf;

  --wax: #6e2a2c;
  --wax-deep: #4f1c1f;
  --rose: #b06e6c;

  /* ---- Typography ------------------------------------------------- */
  /* Hermis Soul: the display face, and only on the two heading levels
     that are actually headings -- the page title and the section titles
     under it. Lora: everything anybody reads or operates, which is prose,
     navigation, labels and buttons. A decorative face set at 0.8rem on a
     button is a legibility problem, not a flourish.
     Ephesis: the handwritten interludes ("Hear ye, Bear ye…"), unchanged.

     Hermis Soul supersedes Highcrest here. Highcrest is still in
     provided-assets/fonts/ with its licence, and is no longer served. */
  --font-display: "Hermis soul", Georgia, serif;
  --font-title: "Lora", Georgia, serif;
  --font-book: "Lora", Georgia, serif;
  --font-hand: "Ephesis", "Segoe Script", cursive;
  /* Kept under its old name because four call sites use it; it is the
     display face. */
  --font-page-title: var(--font-display);

  /* ---- Layout ----------------------------------------------------- */
  --nav-h: 62px;
  /* The reading column, as a share of the viewport rather than a fixed
     measure: 75% at 601px and up, the full width with gutters below that.
     One token, read by .parchment and nothing else, so no page can grow
     its own private percentage. --content-max-width stays because other
     components still read it; it no longer caps the column. */
  --page-content-width: 75vw;
  --content-max-width: 900px;
  --measure: 34rem;
  --gutter: 24px;
  --frame-w: clamp(120px, 21vw, 310px);   /* hanging foliage width */
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px; --space-5: 64px; --space-6: 96px;

  --rule: rgba(168, 131, 76, 0.55);
  --rule-soft: rgba(168, 131, 76, 0.28);
  --radius-card: 2px;
  --shadow-print: 0 10px 22px rgba(70, 50, 20, 0.22), 0 2px 4px rgba(70, 50, 20, 0.18);

  /* ---- The codebase's original token names, mapped onto the new design.
     Components, easter eggs and pages still read these. ------------- */
  --paper-background: var(--parchment);
  --paper-shadow: none;
  --ink-primary: var(--forest-950);
  --ink-secondary: var(--ink-soft);
  --woodland-green: var(--moss);
  --earth-brown: #6b4a2c;
  --berry-red: #8c2f39;
  --accent-primary: var(--wax);       /* Sunday, the wedding */
  --accent-secondary: var(--bronze);  /* Saturday, the birthday */
  --accent-muted: var(--gold);
  /* --font-display is a real token now, declared above with the display
     face in it. The alias that used to sit here pointed it back at the
     reading face, and because it came later it won: every heading that
     asked for the display face quietly got Lora instead. */
  --font-heading: var(--font-display);
  --font-body: var(--font-book);
  --font-script: var(--font-hand);
  --ground-top: var(--forest-700);
  --ground-mid: var(--forest-900);
  --ground-deep: var(--forest-950);
  --paper-light: var(--parchment-light);
  --paper: var(--parchment);
  --paper-deep: var(--parchment-dark);
  --paper-edge: var(--gold);
  --ink: var(--ink-primary);
  --plum: var(--wax);
  --plum-bright: #8a3a3c;
  --ochre: var(--bronze);
  --serif: var(--font-book);
  --display: var(--font-title);
  --caps: var(--font-title);
  --script: var(--font-hand);
  --shadow-card: none;

  --accent: var(--moss);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.22 0 0 0 0 0.08 0.9 0 0 0 -0.32'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.005' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.33 0 0 0 0 0.15 1.8 0 0 0 -0.78'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23m)'/%3E%3C/svg%3E");

  /* The pigeon cursor. A fine pointer only; touch screens never see it. */
  --cursor-pigeon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M3 6 L8 4 C11 2.5 14 4.5 14 7.5 C14 8 13.8 8.6 13.5 9.2 C19 10.5 23 15 25 21 L26.5 25.5 L20 23.5 C13 25.5 7.5 21 7 14.5 C5.5 13 4.5 11 4.5 9 Z' fill='%237d8597' stroke='%23303845' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='6.5' r='0.9' fill='%23303845'/%3E%3Cpath d='M2.2 6.2 L6 4.8 L5.6 7.4 Z' fill='%23e8b04b'/%3E%3C/svg%3E") 3 6, auto;
  --cursor-pigeon-point: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='rotate(24 15 15)'%3E%3Cpath d='M3 6 L8 4 C11 2.5 14 4.5 14 7.5 C14 8 13.8 8.6 13.5 9.2 C19 10.5 23 15 25 21 L26.5 25.5 L20 23.5 C13 25.5 7.5 21 7 14.5 C5.5 13 4.5 11 4.5 9 Z' fill='%23b3922f' stroke='%23303845' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='6.5' r='0.9' fill='%23303845'/%3E%3Cpath d='M2.2 6.2 L6 4.8 L5.6 7.4 Z' fill='%23e8b04b'/%3E%3C/g%3E%3Ccircle cx='26' cy='4' r='1.6' fill='%23e8b04b'/%3E%3C/svg%3E") 4 8, pointer;
}

/* ------------------------------------------------------------------ */
/* The display face                                                    */
/* ------------------------------------------------------------------ */

/* Hermis Soul, converted from provided-assets/fonts/Hermissoul-Regular.ttf
   by tools/build_assets.py. The conversion is a format change and
   nothing else: no subsetting, no renaming, no touching the glyphs,
   because the licence permits conversion only "as long as the font is
   not modified in any other way". Dropping the characters this site
   does not currently set would be exactly that kind of modification,
   so the whole face is published -- 47 KB of WOFF2, which is a small
   price for not having to argue about it.

   The licence (provided-assets/fonts/Hermissoul-LICENCE.txt) allows
   personal use, naming "recreational websites for friends and family",
   permits conversion to WOFF, and permits embedding in a web app that
   does not offer the font as a download. A wedding nobody is charged
   to attend is personal use on that wording. If this site ever carries
   anything commercial, the author sells a licence for that.

   It replaces Highcrest, which was a blackletter and stays in
   provided-assets with its own licence, unserved.

   The face's own line box is 1.99em tall, because each capital carries a
   flourish rising well above the letter and a tail dropping below it.
   Left alone that pushes a title half a line down its own box. The
   overrides below set the line box to exactly the ink: 137% above the
   baseline clears the tallest flourish, 28% below clears the deepest
   tail. A title can then use line-height: 1 and sit where the design
   expects it, and two lines of title never collide. */
@font-face {
  font-family: "Hermis soul";
  src: url("fonts/Hermissoul-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* The face declares 138% above the baseline and 96% below, which asks
     for a line box 2.34em tall when the ink only ever occupies 1.00em of
     it. Left alone, every heading would sit in a vast empty block and
     two-line titles would drift apart. Measured across the characters
     the site actually sets, the tallest ink is 79% and the deepest 20%;
     these leave a little room above for accents. The file itself is
     untouched -- these are CSS line metrics, not an edit to the font. */
  ascent-override: 86%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* Hermis Soul ships Regular and nothing else. Asking a browser for bold
   makes it smear the outlines into a fake one, so every rule that uses
   the display face states weight 400 and means it. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ------------------------------------------------------------------ */
/* Aged parchment                                                      */
/* ------------------------------------------------------------------ */

body {
  background-color: var(--parchment);
  /* A pre-rendered, seamless paper tile (grain plus slow mottling), lit
     from the centre and aged towards the edges. No filters at run time. */
  background-image:
    radial-gradient(ellipse 120% 80% at 50% 30%, rgba(250, 245, 232, 0.55) 0%, rgba(250, 245, 232, 0) 60%),
    linear-gradient(90deg, rgba(150, 110, 55, 0.16) 0, rgba(150, 110, 55, 0) min(14%, 180px), rgba(150, 110, 55, 0) calc(100% - min(14%, 180px)), rgba(150, 110, 55, 0.16) 100%),
    url("images/art/parchment-tile.webp");
  background-size: 100% 100%, 100% 100%, 512px 512px;
  font-family: var(--font-book);
  color: var(--ink-body);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


@media (pointer: fine) {
  html, body { cursor: var(--cursor-pigeon); }
  a, button, label, select, summary { cursor: var(--cursor-pigeon-point); }
  input, textarea { cursor: text; }
}

::selection { background: var(--forest-800); color: var(--parchment-light); }

a { color: var(--forest-800); text-decoration-color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--wax); text-decoration-color: currentColor; }

/* ------------------------------------------------------------------ */
/* BotanicalPageFrame: the hanging foliage in both top corners          */
/* ------------------------------------------------------------------ */

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.page::before, .page::after {
  content: ""; position: absolute; top: calc(var(--nav-h) - 6px); z-index: -1;
  width: var(--frame-w); aspect-ratio: 268 / 621; pointer-events: none;
  background: url("images/art/foliage-left.webp") left top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.page::before { left: 0; }
.page::after {
  right: 0; aspect-ratio: 272 / 516;
  background-image: url("images/art/foliage-right.webp"); background-position: right top;
}

/* ------------------------------------------------------------------ */
/* The content column (.parchment, kept for compatibility)             */
/* ------------------------------------------------------------------ */

.parchment {
  position: relative;
  flex: 1 0 auto;
  width: var(--page-content-width);
  max-width: none;
  margin-inline: auto;
  padding: 48px var(--gutter) 24px;
}
.parchment::before, .parchment::after { content: none !important; }
/* The three wrappers that used to set a narrower measure of their own.
   There is one column width now; what keeps prose readable inside it is
   --measure on the text children, not a narrower page. */
.parchment.narrow, .parchment.form-sheet, .parchment.honeymoon {
  width: var(--page-content-width);
  max-width: none;
}

decorative-border { display: none !important; }

.parchment > :where(p, h2, h3, ul, ol, blockquote, .prose),
.section > :where(p, h2, h3, ul, ol, .prose) {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
.parchment > schedule-day, .section > schedule-day { max-width: 40rem; margin-left: auto; margin-right: auto; }

.section { margin: var(--space-6) 0 0; position: relative; }
.section:first-of-type { margin-top: var(--space-4); }

/* Sections are separated by the fine botanical gold rule. */
.section::before {
  content: ""; display: block; width: min(100%, 560px); aspect-ratio: 714 / 62; margin: 0 auto var(--space-3);
  background: url("images/art/divider-wide.webp") center / contain no-repeat;
}
.section.plain::before, .section:first-of-type::before { content: none; }
.section > info-panel, .parchment > info-panel, .section > part-of-weekend { display: block; max-width: 40rem; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ */
/* Typography                                                          */
/* ------------------------------------------------------------------ */

.parchment h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1; letter-spacing: 0.04em;
  margin: 0 0 0.25em; color: var(--forest-950); text-wrap: balance;
}

/* Section headings: the display face, a short gold rule beneath.
   In the case they are written in, not forced into capitals -- the
   letterspaced small capitals suited the serif this used to be set in,
   and a display face has its own spacing drawn into it. */
.parchment h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2rem); line-height: 1.25; letter-spacing: 0.04em;
  margin-block: 0 0.9em; color: var(--forest-950); text-align: center; text-wrap: balance;
}
.parchment h2::after {
  content: ""; display: block; width: 120px; height: 18px; margin: 0.45em auto 0;
  background: url("images/art/divider-small.svg") center / contain no-repeat;
}
.parchment h2.form-section::after, .parchment h2.plain::after { content: none; }

.parchment h3 {
  font-family: var(--font-title); font-weight: 600;
  font-size: 1.3rem; letter-spacing: 0.1em;
  margin-block: 1.6em 0.4em; color: var(--forest-950);
}

.parchment p { font-size: 1.2rem; line-height: 1.65; margin-block: 0 1.05em; text-wrap: pretty; }
.parchment li { font-size: 1.15rem; line-height: 1.6; }

.parchment .lead { font-size: 1.32rem; font-style: italic; color: var(--ink-soft); line-height: 1.5; }

.script, .names {
  font-family: var(--font-hand); font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 3.4rem); line-height: 1.15; color: var(--forest-950);
}

.eyebrow {
  font-family: var(--font-title); font-weight: 500; font-size: 1.2rem;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--forest-950);
}

.centre { text-align: center; }
.centre p, .centre .lead { margin-left: auto; margin-right: auto; }
.parchment p.centre { max-width: 32rem; margin-left: auto; margin-right: auto; }

.small-print { font-size: 1.05rem !important; color: var(--ink-soft); font-style: italic; }

.rule { display: block; width: min(100%, 560px); aspect-ratio: 714 / 62; margin: 2.6em auto; background: url("images/art/divider-wide.webp") center / contain no-repeat; }

/* Contextual watercolours: the couple's own paintings, lifted off the
   paper. The mask softens the scan edges into the parchment. */
.vignette { display: block; width: 100%; height: auto; pointer-events: none; }

/* ------------------------------------------------------------------ */
/* Layout helpers                                                      */
/* ------------------------------------------------------------------ */

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 18px; margin: 1.6em 0 2em; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 1.6em 0 2em; align-items: start; }

[data-day="saturday"] { --accent: var(--accent-secondary); }
[data-day="sunday"] { --accent: var(--accent-primary); }
[data-day="friday"], [data-day="monday"], [data-day="multiple"] { --accent: var(--woodland-green); }

/* A small watercolour above a section heading, and a larger interlude
   between sections: the couple's paintings as chapter ornaments. */
.section-art { width: clamp(220px, 34vw, 340px); margin: 0 auto 18px; }
.interlude-art { width: clamp(260px, 44vw, 420px); margin: 2.4em auto; }
.section > .section-art + h2 { margin-top: 0; }
.section > p, .section > .centre { text-align: center; }

/* A watercolour beside a section heading, tucked into the margin. */
.margin-art { position: absolute; width: clamp(110px, 16vw, 200px); pointer-events: none; z-index: -1; }
.margin-art.left { left: -40px; }
.margin-art.right { right: -40px; }
@media (max-width: 1100px) { .margin-art { display: none; } }

/* ------------------------------------------------------------------ */
/* Primary button: the dark-green ornamental button                    */
/* ------------------------------------------------------------------ */

.actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 22px; margin-top: var(--space-5); }

.btn, .btn-submit {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  min-height: 52px; padding: 12px 34px;
  font-family: var(--font-title); font-weight: 500; font-size: 1.12rem;
  letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; line-height: 1.1;
  border: 0; border-radius: 2px;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn.primary, .btn-submit, .parchment a.btn.primary {
  color: var(--ink-on-ground-bright);
  background-color: var(--forest-800);
  background-image: var(--noise), linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.12));
  background-size: 160px 160px, 100% 100%;
  /* An inner gold hairline, and notched corners like the printed button. */
  box-shadow: inset 0 0 0 4px var(--forest-800), inset 0 0 0 5px rgba(201, 166, 107, 0.75), 0 3px 8px rgba(30, 30, 15, 0.28);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
.btn.primary::after, .btn-submit::after {
  content: "✦"; position: absolute; left: 50%; bottom: -1px; transform: translate(-50%, 0);
  font-size: 0.62rem; letter-spacing: 0; color: var(--gold-light); line-height: 1;
}
.btn.primary:hover, .btn-submit:hover { background-color: var(--forest-700); color: #fffaf0; }
.btn.primary:active, .btn-submit:active { transform: translateY(1px); }

.btn.secondary, .parchment a.btn.secondary {
  color: var(--forest-950); background: transparent;
  box-shadow: inset 0 0 0 1px var(--rule), inset 0 0 0 4px transparent, inset 0 0 0 5px var(--rule-soft);
}
.btn.secondary:hover { background: rgba(255, 250, 238, 0.5); color: var(--forest-950); }

/* ------------------------------------------------------------------ */
/* Epigraph and handwritten interludes                                 */
/* ------------------------------------------------------------------ */

.epigraph {
  max-width: 30rem; margin: 0 auto 2.4em; text-align: center;
  font-family: var(--font-book); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--ink-soft);
}
.epigraph cite { display: block; margin-top: 0.6em; font-style: normal; font-family: var(--font-title); letter-spacing: 0.14em; font-size: 0.95rem; color: var(--bronze); }

.interlude { text-align: center; margin: var(--space-5) auto 0; max-width: 32rem; }
.interlude .script { display: block; margin-bottom: 0.15em; }

/* ------------------------------------------------------------------ */
/* Slotted content inside components                                   */
/* ------------------------------------------------------------------ */

info-panel p, illustrated-card p { font-size: 1.12rem; line-height: 1.6; margin: 0 0 0.7em; max-width: none; }
info-panel p:last-child, illustrated-card p:last-child { margin-bottom: 0; }
info-panel ul { margin: 0; padding-left: 1.1em; font-size: 1.1rem; line-height: 1.55; }
info-panel li { margin-bottom: 0.3em; }
info-panel:not(:defined), illustrated-card:not(:defined) { display: block; }

.keepers-only { display: none; }

/* ------------------------------------------------------------------ */
/* Form controls: stationery for the RSVP                              */
/* ------------------------------------------------------------------ */

/* .parchment.form-sheet had its own width until the column became a
   share of the viewport. What is measured now is the form inside it
   (.form, max-width 760px, below). */

/* The reply card: a sheet of finer paper with a double gold rule. */
.form-card {
  position: relative; margin: 2em auto 0; max-width: 760px;
  padding: clamp(28px, 6vw, 56px) clamp(20px, 6vw, 60px);
  background: rgba(250, 245, 233, 0.62);
  box-shadow: inset 0 0 0 1px var(--rule), inset 0 0 0 6px transparent, inset 0 0 0 7px var(--rule-soft), 0 12px 30px rgba(90, 65, 25, 0.12);
}

.form { display: flex; flex-direction: column; gap: 28px; margin-top: 0.4em; }
.form-group { display: flex; flex-direction: column; gap: 28px; }

.parchment h2.form-section {
  margin: 1em 0 -4px; padding-bottom: 10px; max-width: none; text-align: left;
  border-bottom: 1px solid var(--rule); font-size: clamp(1.25rem, 3vw, 1.5rem);
}
.form > p.hint { margin: -16px 0 0; font-size: 1.05rem; font-style: italic; color: var(--ink-soft); max-width: none; }

.field { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > .label, .field > legend {
  font-family: var(--font-title); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.08em; color: var(--forest-950); padding: 0;
}
.field .hint, .sub-field .hint { font-size: 1.02rem; font-style: italic; color: var(--ink-soft); }

.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="number"], .field textarea, .field select,
.sub-field input, .two-up.sub-field input {
  width: 100%;
  font-family: var(--font-book); font-size: 1.15rem; color: var(--ink-strong);
  padding: 10px 2px 8px;
  border: 0; border-bottom: 1px solid var(--gold); border-radius: 0;
  background: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.field textarea { resize: vertical; padding: 10px 12px; border: 1px solid var(--rule); background: rgba(255, 252, 244, 0.45); line-height: 1.5; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a8834c' stroke-width='1.4'/%3E%3C/svg%3E") right 6px center no-repeat;
}
.field input::placeholder, .field textarea::placeholder { color: #8d8264; opacity: 1; font-style: italic; }

/* The headcounts. A number input is as wide as the column by default,
   which makes a box for two digits look like a box for an essay, and the
   browser's own spinner arrows are the one piece of operating-system
   chrome anywhere on this parchment. Both go. */
.field input[type="number"], .sub-field input[type="number"] { max-width: 7rem; }
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button,
.sub-field input[type="number"]::-webkit-outer-spin-button,
.sub-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.field input[type="number"], .sub-field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.field input:hover, .sub-field input:hover, .field select:hover { border-bottom-color: var(--forest-700); }
.field input:focus-visible, .sub-field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--forest-800); outline-offset: 3px; border-color: var(--forest-800); background-color: rgba(255, 252, 244, 0.55);
}

.sub-field { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.sub-field label { display: flex; flex-direction: column; gap: 6px; }

.choices { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.choice {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 9px 18px 9px 14px;
  border: 1px solid var(--rule); border-radius: 2px; background: rgba(255, 252, 244, 0.35);
  font-size: 1.1rem; color: var(--ink-strong); transition: background-color 0.18s ease, border-color 0.18s ease;
}
.choice:hover { background: rgba(255, 252, 244, 0.8); border-color: var(--gold); }
.choice:has(input:checked) { border-color: var(--forest-800); background: rgba(44, 58, 45, 0.07); }
.choice:focus-within { outline: 2px solid var(--forest-800); outline-offset: 2px; }
.choice input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--forest-800); }

.two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 28px; }

/* Validation: the field at fault is underlined in wax and named. */
.field [aria-invalid="true"], .choices input[aria-invalid="true"] { border-color: var(--berry-red); outline: 2px solid var(--berry-red); outline-offset: 2px; }
.field-error { display: flex; align-items: baseline; gap: 6px; font-size: 1.02rem; color: var(--berry-red); font-weight: 500; }
.field-error::before { content: "✦"; font-size: 0.75em; }

.submit-row { display: flex; flex-direction: column; align-items: center; margin-top: 18px; }
.btn-submit { font-size: 1.2rem; padding: 15px 46px; min-height: 56px; }
.btn-submit[disabled] { opacity: 0.75; cursor: progress; }

.status { margin-top: 16px; font-family: var(--font-book); font-style: italic; font-size: 1.1rem; color: var(--bronze); text-align: center; }
.status[data-kind="error"] { color: var(--berry-red); font-style: normal; }
.status[data-kind="success"] { color: var(--forest-800); }

.done {
  margin: 1.6em auto 0; max-width: 34rem; padding: 26px 24px; text-align: center;
  box-shadow: inset 0 0 0 1px var(--forest-800), inset 0 0 0 5px transparent, inset 0 0 0 6px var(--rule);
  background: rgba(250, 245, 233, 0.7);
}
.done::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 10px; background: url("images/art/seal.webp") center / contain no-repeat; }
.done p { margin: 0 !important; }

.honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------ */
/* Accessibility floor                                                 */
/* ------------------------------------------------------------------ */

a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--forest-800); outline-offset: 3px; border-radius: 1px;
}
.btn:focus-visible, .btn-submit:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; clip-path: none; }

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 1200;
  background: var(--parchment-light); color: var(--forest-950); padding: 10px 16px; font-family: var(--font-book);
}
.skip-link:focus { left: 8px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
  :root { --gutter: 22px; --frame-w: clamp(96px, 19vw, 170px); }
  .section { margin-top: var(--space-5); }
}

@media (max-width: 640px) {
  :root { --measure: 100%; --gutter: 18px; --frame-w: 26vw; --nav-h: 60px; }
  .page::before, .page::after { -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 78%); mask-image: linear-gradient(to bottom, #000 40%, transparent 78%); }
  .parchment { padding-top: 32px; max-width: none; }
  .parchment p { font-size: 1.14rem; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .grid { gap: 14px; }
  .actions .btn { width: 100%; }
  .parchment h2 { letter-spacing: 0.12em; }
}

/* The small-screen rule the column change turns on: at 600px and below
   the column stops being a share of the viewport and takes the whole of
   it, with a gutter small enough not to waste a narrow screen and big
   enough that the text never touches the edge. 601px is deliberately the
   first width that gets the 75% column. */
@media (max-width: 600px) {
  :root { --page-content-width: 100%; }
  .parchment { padding-inline: clamp(12px, 4vw, 20px); }
}