/* Self-hosted type. Generated by tools/fetch-fonts.js — do not hand-edit.
   Greek faces are EB Garamond / Literata aliased onto the Latin family names. */
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url(/assets/fonts/cormorant-garamond-300i-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url(/assets/fonts/cormorant-garamond-300i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/cormorant-garamond-400i-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/cormorant-garamond-400i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/cormorant-garamond-300-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/cormorant-garamond-300-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/cormorant-garamond-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/cormorant-garamond-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/cormorant-garamond-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/cormorant-garamond-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/cormorant-garamond-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/cormorant-garamond-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/lora-400i-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/lora-400i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/lora-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/lora-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/lora-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/lora-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/eb-garamond-400i-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/eb-garamond-400i-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/eb-garamond-400-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/eb-garamond-400-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/eb-garamond-500-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/eb-garamond-500-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/eb-garamond-600-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/eb-garamond-600-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/literata-400i-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/literata-400i-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/literata-400-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/literata-400-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/literata-500-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/literata-500-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

/* Classical — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-accent-2: #ac803e;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;

  --color-accent-2-100: #fff3e4;
  --color-accent-2-200: #ffe3be;
  --color-accent-2-300: #f5cd96;
  --color-accent-2-400: #dbaf70;
  --color-accent-2-500: #bc8f4e;
  --color-accent-2-600: #9b7232;
  --color-accent-2-700: #79561f;
  --color-accent-2-800: #573d14;
  --color-accent-2-900: #382810;

  --font-heading: "Cormorant Garamond", system-ui, sans-serif;
  --font-heading-weight: 600; /* review round 3: bold retired — semibold is the
     interface headings' ceiling (they need the weight at small sizes); display
     text goes lighter still, to the normal cut (see the deck) */
  --font-body: "Lora", system-ui, sans-serif;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.plate{filter:sepia(0.22) saturate(0.82) contrast(1.05);box-sizing:border-box;
  border:6px solid var(--color-surface);outline:1px solid var(--color-divider)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: transparent; border: 1px solid var(--color-divider);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg); border: 1px solid var(--color-divider);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }


/* ==========================================================================
   Witch of Pelion — site layer over the Classical design system.
   Sections 1-3 are lifted verbatim from the prototype. Section 4 onward is
   what the prototype left to the developer (see handoff: Open Items).
   ========================================================================== */

/* --- 1. Ground and ink: warm Classical's grey-neutral palette to earth ---- */
:root {
  --color-bg: #f2ece1;
  --color-surface: #e7dcc8;
  --color-text: #2f2619;
  --color-divider: color-mix(in srgb, #6b5637 26%, transparent);
  --color-accent-100: #eee3cd;
  --color-moss: #6d7350;
}

/* Every <img> carries width/height attributes so its box is reserved before the
   image decodes. Those attributes also map to presentational width/height hints,
   which would otherwise beat the layout's own `aspect-ratio` and stretch the
   photograph to its full intrinsic height — so hand the box back to the CSS.
   Images that genuinely set their own height (hero and banner fills) do it in an
   inline style, which still wins over this rule. */
img { height: auto; }

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
a { color: var(--color-accent-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }
::selection { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }

@keyframes wop-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- 2. Organic shape layer: no hard rectangles anywhere on the page ------ */
.plate { border-radius: 36% 36% 13% 13% / 25% 25% 8% 8%; overflow: hidden; }
.plate img { border-radius: 34% 34% 11% 11% / 24% 24% 7% 7%; display: block; }
.plate:nth-of-type(even) { border-radius: 13% 13% 36% 36% / 8% 8% 25% 25%; }
.plate:nth-of-type(even) img { border-radius: 11% 11% 34% 34% / 7% 7% 24% 24%; }
.plate:nth-of-type(3n) { border-radius: 54% 46% 42% 58% / 44% 40% 60% 56%; }
.plate:nth-of-type(3n) img { border-radius: 52% 44% 40% 56% / 42% 38% 58% 54%; }

.btn, .tag { border-radius: 999px; }
.input, textarea.input, select.input { border-radius: 20px; }
textarea.input { border-radius: 24px 24px 24px 6px; }

/* The radius cycle above assumes plates sit one per card. Six of them side by side
   in the Home photo grid hits every branch of the cycle at once and reads as noise,
   so the grid gets a single soft shape and becomes a set. */
.photo-grid .plate,
.photo-grid .plate:nth-of-type(even),
.photo-grid .plate:nth-of-type(3n) { border-radius: 30% 30% 30% 30% / 22% 22% 22% 22%; }
.photo-grid .plate img,
.photo-grid .plate:nth-of-type(even) img,
.photo-grid .plate:nth-of-type(3n) img { border-radius: 28% 28% 28% 28% / 20% 20% 20% 20%; }

/* --- 3. Rules fade out at both ends rather than cutting the page ---------- */
.hr {
  border: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--color-divider) 14%, var(--color-divider) 86%, transparent);
}

/* ==========================================================================
   4. Site chrome — authored here, not in the prototype
   ========================================================================== */

.skip-link {
  position: absolute; left: var(--space-3); top: -60px; z-index: 60;
  background: var(--color-bg); color: var(--color-accent-800);
  padding: 10px 16px; border: 1px solid var(--color-divider); border-radius: 999px;
  font-family: var(--font-heading); font-size: 15px; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--space-3); }

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-divider);
}
.header-row {
  max-width: 1180px; margin: 0 auto;
  padding: var(--space-2) var(--space-6);
  display: flex; align-items: center; gap: var(--space-6);
}

.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand img { width: 46px; height: auto; opacity: .92; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-heading); font-weight: 500; font-size: 19px;
  letter-spacing: .02em; color: var(--color-text);
}
.brand-tag {
  font-family: var(--font-heading); font-style: italic; font-size: 12px;
  letter-spacing: .06em; color: var(--color-accent-700);
}

.site-nav {
  display: flex; gap: var(--space-4); margin-left: auto;
  align-items: center; flex-wrap: wrap;
}
.navlink {
  font-family: var(--font-heading); font-size: 15px; letter-spacing: .02em;
  padding: 6px 2px; border-bottom: 1px solid transparent;
  color: var(--color-text); text-decoration: none;
  background: transparent; border-left: 0; border-right: 0; border-top: 0; cursor: pointer;
}
.navlink:hover { color: var(--color-accent); }
/* The prototype never marked the current page; the 1px border was already reserved for it. */
.navlink[aria-current="page"] { color: var(--color-accent-800); border-bottom-color: var(--color-accent); }
.site-nav .btn { margin-left: var(--space-2); }

.lang-switch { flex-shrink: 0; display: flex; gap: var(--space-2); align-items: center; }
.lang-switch a {
  font-family: var(--font-heading); font-size: 14px; letter-spacing: .1em;
  padding: 4px 2px; text-decoration: none;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.lang-switch a[aria-current="true"] { color: var(--color-accent-700); }
.lang-switch a + a { border-left: 1px solid var(--color-divider); padding-left: var(--space-3); }

/* Burger is hidden until the drawer breakpoint. */
.nav-toggle {
  display: none; margin-left: auto;
  background: transparent; border: 1px solid var(--color-divider); border-radius: 999px;
  padding: 8px 14px; cursor: pointer;
  font-family: var(--font-heading); font-size: 15px; letter-spacing: .02em;
  color: var(--color-text);
}
.nav-toggle:hover { color: var(--color-accent); }

/* --- 5. Header responsive: below 880px the nav becomes a disclosure ------- */
@media (max-width: 880px) {
  .header-row { gap: var(--space-3); flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 8px; }
  .lang-switch { order: 3; }
  .site-nav {
    order: 4; display: none; width: 100%; margin-left: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding-bottom: var(--space-3);
  }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav .navlink {
    padding: var(--space-3) 2px; font-size: 17px;
    border-bottom: 1px solid var(--color-divider);
  }
  .site-nav .btn { margin: var(--space-3) 0 0; align-self: flex-start; }
}

/* --- 6. Footer ----------------------------------------------------------- */
.site-footer {
  margin-top: auto;
  background-image: linear-gradient(to right, transparent, var(--color-divider) 18%, var(--color-divider) 82%, transparent);
  background-size: 100% 1px; background-position: top center; background-repeat: no-repeat;
}
.footer-row {
  max-width: 1180px; margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  align-items: center; justify-content: space-between;
  font-size: 14px; color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer-nav a { font-family: var(--font-heading); font-size: 15px; text-decoration: none; }

/* --- 7. Form states ------------------------------------------------------ */
/* Honeypot: off-screen, never announced, never tabbable. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* There is no red in this palette — errors speak in accent, weight and an icon-free mark. */
.form-error,
.field-error {
  color: var(--color-accent-700);
  font-size: 14px; line-height: 1.6; margin: 0;
}
.field-error { margin-top: 2px; }
.field-error::before { content: "— "; }
.input[aria-invalid="true"] { border-color: var(--color-accent); }

button[aria-busy="true"] { opacity: .65; cursor: progress; }

/* --- 8. The peacock frame the client has no photograph for ---------------
   A dashed outline reads as a broken image. Keep it quiet and deliberate: the
   same mat as a real plate, no border of its own, just a soft italic caption. */
.empty-frame {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); box-sizing: border-box;
  background: color-mix(in srgb, var(--color-surface) 70%, var(--color-bg));
  color: color-mix(in srgb, var(--color-text) 38%, transparent);
  font-family: var(--font-heading); font-style: italic; font-size: 14px;
  text-align: center;
}

/* --- 9. Focus and motion ------------------------------------------------- */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- 10. Hero height guard on short landscape viewports ------------------ */
@media (max-height: 620px) and (orientation: landscape) {
  .hero { min-height: 520px !important; }
}