:root {
  --phi:   1.618;
  --sqphi: 1.272;
  --qphi:  1.1278;
  --phi2:  2.618;
  --phi3:  4.236;

  --f-top: 1.1875rem;
  --f0:  clamp(1.0625rem, calc(0.4762vw + 0.759rem), var(--f-top));
  --f-h: max(1rem, calc(var(--f0) / var(--qphi)));
  --f-1: calc(var(--f-top) / var(--sqphi));
  --f-2: calc(var(--f-1) / var(--qphi));

  --f1:  calc(var(--f0) * var(--sqphi));
  --f2:  calc(var(--f1) * var(--sqphi));
  --f3:  calc(var(--f2) * var(--sqphi));
  --f4:  calc(var(--f0) * var(--phi2));
  --f5:  calc(var(--f4) * var(--sqphi));

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:  'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --space: clamp(1rem, calc(0.4762vw + 0.759rem), var(--f-top));
  --s-1: calc(var(--space) / var(--phi));
  --s0:  var(--space);
  --s1:  calc(var(--space) * var(--phi));
  --s2:  calc(var(--space) * var(--phi2));
  --s3:  calc(var(--space) * var(--phi3));

  --gutter: var(--s2);
  --band: var(--s3);
  --inset: var(--s2);
  --breath: var(--s2);
  --rule-gap: var(--s0);
  --head-gap: var(--s1);
  --stack-gap: var(--s0);
  --tight-gap: calc(var(--stack-gap) / var(--phi));

  --field-gap: var(--stack-gap);

  --measure: 60ch;
  --measure-wide:   calc(var(--measure) * var(--phi));
  --measure-widest: calc(var(--measure-wide) * var(--sqphi));
  --measure-narrow: calc(var(--measure) / var(--phi));

  --crop: calc(1 / var(--phi2));
  --focal: 50% 50%;
  --ratio-card: var(--sqphi);
  --ratio-plate: var(--phi);
  --ratio-video: calc(16 / 9);
  --plate-min: calc(56.25vw * (1 - var(--crop)));
  --plate-max: calc(56.25vw / (1 - var(--crop)));
  --plate-h: clamp(var(--plate-min), calc(100svh * (1 - 1 / var(--phi))), var(--plate-max));

  --tap: max(2.75rem, 24px);
  --icon: var(--f1);
  --mark: min(calc(var(--s1) * var(--sqphi)), 12vw);

  --radius: 0;
  --shadow: none;

  --paper:    #ffffff;
  --ink:      #292623;
  --surface:  color-mix(in srgb, var(--accent) 6%, var(--paper));
  --ink-soft: color-mix(in srgb, var(--ink) 80%, var(--paper));
  --ink-hint: color-mix(in srgb, var(--ink-soft) calc(100% / var(--sqphi)), var(--paper));
  --line:     rgba(41,38,35,.45);
  --hairline: color-mix(in srgb, var(--accent) 27%, var(--paper));
  --paper-soft:   color-mix(in srgb, var(--paper) calc(100% / var(--phi)), var(--ink));
  --hairline-ink: color-mix(in srgb, var(--accent) calc(100% - 100% / var(--phi)), var(--ink));
  --scrim:    color-mix(in srgb, var(--ink) calc(100% / var(--phi)), transparent);

  --accent:      #c8a478;
  --accent-text: #ffffff;
  --accent-ink:  color-mix(in srgb, var(--accent) 50%, var(--ink));

  --accent-wash: color-mix(in srgb, var(--accent) 8%, var(--paper));
  --action:      var(--accent);
  --action-text: var(--accent-text);

  --track-tight: -.01em;
  --track-body:   .01em;
  --track-chip:  .04em;
  --track-label: .08em;
  --track-meta:  .12em;

  --lead-tight: var(--qphi);
  --lead-head:  var(--sqphi);
  --lead-body:  var(--phi);

  accent-color: var(--accent);
}

[data-brand="neutral"] {
  --paper:    #efefef;
  --ink:      #2a2a2a;
  --surface:  #fff;
  --line:     rgba(42,42,42,.45);
  --hairline: rgba(42,42,42,.12);
}

[data-brand="mono"] { --accent: var(--ink); --action: var(--ink); --action-text: var(--paper); }

[data-brand="sunroom"]   { --accent: #c25e43; }

[data-brand="champagne"] {
  --surface:     #f6f6f6;
  --ink-soft:    rgba(41,38,35,.72);
  --hairline:    rgba(41,38,35,.12);
  --accent:      #be9d76;
  --action:      var(--accent);
  --action-text: var(--accent-text);
}

*, ::before, ::after { box-sizing: border-box; border-radius: var(--radius); box-shadow: var(--shadow); }

html, body { margin: 0; }
body {

  font: 400 var(--f-h)/var(--lead-body) var(--sans); letter-spacing: var(--track-body);
  overflow-wrap: break-word;
  background: var(--paper); color: var(--ink);
}

h1, h2, h3, .head--section, .head--item {
  font-family: var(--serif); font-weight: 400; letter-spacing: var(--track-tight);
  line-height: var(--lead-tight); color: var(--ink);
  overflow-wrap: anywhere;
}
h1, h2, h3 { margin: 0; }
h1 { font-size: var(--f5); }
h2, .head--section { font-size: var(--f3); }
h3, .head--item { font-size: var(--f1); font-weight: 500; line-height: var(--lead-head); }

/* ── RHYTHM ── band · head · stack · flow */
.band { padding-block: var(--band); }
.band--paper { background: var(--paper); padding-inline: var(--gutter); text-align: center; }
.head { --gap: var(--head-gap); }
.stack { --gap: var(--stack-gap); }
.head > *, .stack > * { margin: 0; }
.head > * + *, .stack > * + * { margin-block-start: var(--gap); }
.head > .crumb + *, .head > .eyebrow:not(.eyebrow--serif) + *, .head > * + .eyebrow:not(.eyebrow--serif),
.stack > .crumb + *, .stack > .eyebrow:not(.eyebrow--serif) + *, .stack > * + .eyebrow:not(.eyebrow--serif) { margin-block-start: calc(var(--gap) / var(--phi)); }
.crumb { font-size: var(--f-1); letter-spacing: var(--track-label); text-transform: uppercase;
         color: var(--ink-soft); }
.crumb a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center;
           justify-content: center;
           min-height: var(--tap); min-width: var(--tap); }
.eyebrow { font-size: var(--f-2); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-soft); }
.eyebrow--serif { font: italic 400 var(--f1)/var(--lead-head) var(--serif); letter-spacing: var(--track-tight);
                  text-transform: none; }
.lede { max-width: var(--measure); margin-inline: auto; }
.flow > * { margin-block: 0 var(--head-gap); }
.flow > :where(h2, h3) { margin-block: var(--breath) var(--stack-gap); }
.flow > :where(figure, blockquote) { margin-block: var(--breath); }
.flow > :where(:first-child) { margin-block-start: 0; }
.flow > :where(:last-child) { margin-block-end: 0; }
.flow li { margin-block: 0 var(--tight-gap); }
@media (min-width: 72rem) { :root { --crop: 0; } }
@media not all and (min-width: 72rem) {
  :root { --band: var(--s2); --head-gap: var(--s0); --stack-gap: var(--s-1); --field-gap: var(--s0); }
  h1 { font-size: var(--f4); }
}

/* ── FORM ──────────────────────────────────────────────────────────────────
   A form is a masthead and a field grid, and the grid keeps four promises:

     · columns are equal — one, or two from 30rem up
     · an item sits at the top of its row, so a tall neighbour never stretches it
     · every control is one --tap tall and fills its cell, whatever it lands beside
     · a choice is a list of options, not a stack of boxes

   An item takes one cell. .field-row takes the whole row; .field-start opens a
   row, leaving the cell beside it empty. */

.form-head { display: grid; justify-items: center; text-align: center; }

/* the module sets display, so it owes [hidden] an answer — the script hides by attribute */
.form-head[hidden], .fields[hidden], .field[hidden], .choice[hidden], .consent[hidden] { display: none; }
.form-head > * { margin-inline: auto; }

.fields { display: grid; gap: var(--field-gap); grid-template-columns: minmax(0, 1fr); }
.fields > * { align-self: start; }
.fields > .field-row { grid-column: 1 / -1; }

@media (min-width: 30rem) {
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields > .field-start { grid-column: 1; }
}

.field { display: grid; gap: var(--tight-gap); }
.field > span, .choice legend {
  font-size: var(--f-1); letter-spacing: normal;
  text-transform: none; color: var(--ink-soft);
}
.field i, .consent i { font-size: var(--f-1); font-style: normal; color: var(--accent); }

.field input, .field textarea {
  font: inherit; font-size: var(--f0);
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line);
  padding: 0 var(--tight-gap);
  height: var(--tap);
  width: 100%;
}
.field textarea {
  padding: var(--tight-gap);
  height: calc(var(--tap) * var(--phi) * var(--sqphi));
  resize: vertical;
}
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--ink); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink);
}
.field ::placeholder {
  font-size: var(--f-1); color: var(--ink-hint);
  text-transform: uppercase; letter-spacing: var(--track-label);
}

.choice { border: 0; padding: 0; margin: 0; display: grid; gap: var(--tight-gap); }
.choice__opts { display: grid; justify-items: start; }
.choice__opt {
  display: inline-flex; align-items: center; gap: var(--tight-gap);
  min-height: calc(var(--tap) / var(--phi));
  font-size: var(--f-1); letter-spacing: normal; color: var(--ink-soft);
  accent-color: var(--accent);
}
.choice__opt:hover, .choice__opt:has(input:checked) { color: var(--ink); }

/* options that carry a description are drawn boxes, one to a row */
.choice__opts--cards { gap: var(--stack-gap); width: 100%; }
.choice__opts--cards .choice__opt {
  display: grid; grid-template-columns: auto 1fr; gap: var(--stack-gap);
  align-items: start; justify-self: stretch; width: 100%;
  border: 1px solid var(--line); padding: var(--tight-gap) var(--stack-gap);
  min-height: var(--tap); color: var(--ink-soft);
}
.choice__opts--cards .choice__opt em    { font-style: normal; display: block; }
.choice__opts--cards .choice__opt small { font-size: var(--f-1); color: var(--ink-soft); display: block; }

.consent {
  display: grid; grid-template-columns: auto 1fr; gap: var(--tight-gap);
  align-items: start; align-content: center; min-height: var(--tap);
  font-size: var(--f-1); color: var(--ink-soft);
}
.consent input { accent-color: var(--accent); min-height: var(--icon); min-width: var(--icon); }

.fineprint { margin: 0; max-width: var(--measure); font-size: var(--f-1); color: var(--ink-soft); }

.choice__opt:has(input:focus-visible),
.consent:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.choice__opt input:focus-visible,
.consent input:focus-visible { outline: none; }

@media (max-width: 30rem) { :root { --gutter: var(--s1); --field-gap: calc(var(--head-gap) * var(--phi)); } }

a { color: var(--ink); text-decoration: none; }
::selection { background: var(--accent-wash); color: var(--ink); }

.btn {
  --btn-bg: var(--action);
  --btn-fg: var(--action-text);
  --btn-bd: var(--action);
  --btn-bg-hover: color-mix(in srgb, var(--ink) 12%, var(--action));
  --btn-fg-hover: var(--action-text);
  --btn-bd-hover: color-mix(in srgb, var(--ink) 12%, var(--action));

  height: var(--tap); min-width: var(--tap);
  padding: 0 var(--s0);
  border: 1px solid var(--btn-bd); color: var(--btn-fg); text-decoration: none;
  background: var(--btn-bg);
  display: inline-grid; grid-auto-flow: column; place-items: center; gap: var(--s-1);
  font-size: var(--f-1); letter-spacing: var(--track-label); text-transform: uppercase;
  overflow-wrap: anywhere;
}

.btn:hover, .btn.is-hover {
  background: var(--btn-bg-hover); color: var(--btn-fg-hover); border-color: var(--btn-bd-hover);
}

.btn:focus-visible, .btn.is-focus {
  outline: 2px solid var(--ink); outline-offset: 2px;
}

.btn--ink {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
  --btn-bg-hover: transparent;
  --btn-fg-hover: var(--accent-ink);
  --btn-bd-hover: var(--accent);
}

.btn--rule {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--accent);
  --btn-bg-hover: transparent;
  --btn-fg-hover: var(--accent-ink);
  --btn-bd-hover: var(--ink);

  border-width: 0 0 1px;
  height: auto; min-height: var(--tap);
  padding: 0 0 var(--s-1);
  place-items: end start;
}

form:has(:invalid) .btn[type="submit"],
.btn[data-loading] {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
  --btn-bg-hover: transparent;
  --btn-fg-hover: var(--accent-ink);
  --btn-bd-hover: var(--accent);
}

.btn[data-loading] { cursor: progress; }

.slot-prompt { background: var(--surface); outline: 1px dashed var(--line);
               font-size: inherit; }

.slot-empty { background: var(--hairline); border: 1px dashed var(--line);
              display: grid; place-items: center; }
.slot-note  { font-size: var(--f-1); letter-spacing: var(--track-chip); color: var(--ink-soft);
              text-align: center; padding: var(--s0); }

@font-face { font-family: 'Cormorant Garamond'; src: url('/brand/cormorant-garamond-var.woff2') format('woff2');
             font-style: normal; font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/brand/cormorant-garamond-var-italic.woff2') format('woff2');
             font-style: italic; font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('/brand/lato-400.woff2') format('woff2');
             font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('/brand/lato-700.woff2') format('woff2');
             font-style: normal; font-weight: 700; font-display: swap; }

@font-face { font-family: 'Lato'; src: url('/brand/lato-400-italic.woff2') format('woff2');
             font-style: italic; font-weight: 400; font-display: swap; }