/* ==========================================================================
   St. Charles Place Antiques & Restorations
   Visual identity: "The Treasure House" — in the shop's own livery.

   The palette is taken from the building itself (see images/storefront.jpg,
   the shop's own 2022 photograph): a brick storefront with DEEP PURPLE
   painted trim and sills, a GREEN awning lettered in cream, and warm lamp
   light in the windows. That purple — genuinely unusual for an antique
   store — is the identity, so it leads: deep aubergine bands (the trim at
   dusk) for the masthead and footer, royal plum for every action, the
   awning green as the supporting hue (the trust "awning" strip, the intake
   forms' striped canopies, the on-eBay badges), cream lettering, and aged
   brass as the accent metal antiques deserve. The masthead is the one loud
   moment — the shop's name glowing like the awning lettering over the real
   storefront photograph — and after it the page rests on calm ivory, its
   rhythm carried by value, not a parade of hues. Brass rules and diamond
   ornaments do the joinery; inventory prices hang on manila stock tags,
   the way prices actually hang in an antique store.

   PALETTE (named values, derived from the storefront photo)
     Trim Aubergine #2A1B38   the deep bands (hero, footer, cart head)
     Royal Plum     #5A3472   the action colour — buttons, links
     Awning Green   #2E6248   the supporting hue — awning strip, canopies
     Aged Gilt      #B4862E   rules, ornament, the brass-plate buttons
     Ivory          #FAF7EE   page ground (the awning's cream lettering)
     Walnut Ink     #251C2A   text, with the trim's purple cast

   TYPE
     Display: "Playfair Display" Bold — SIL Open Font License 1.1,
              (c) Claus Eggers Sorensen — subset to Latin basics and
              embedded below as a data URI (~12 KB) so the site still
              makes ZERO external requests. Fallback Georgia/Palatino.
     UI/Body: system sans stack — clarity on phones.

   DARK MODE — "after closing": the shop gone aubergine-black, the neon in
   the window and the gilt still burning. Tokens only; the rules never
   change. Buttons trade their hard brass offset shadows for lamp glows.
   ========================================================================== */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(data:font/woff2;base64,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) format("woff2");
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Named brand colours — fixed, never redefined */
  --c-aubergine: #2A1B38;
  --c-plum:      #5A3472;
  --c-awning:    #2E6248;
  --c-gilt:      #B4862E;
  --c-ivory:     #FAF7EE;
  --c-ink:       #251C2A;

  /* Semantic tokens — these are what the sheet actually uses */
  --bg:            #FAF7EE;
  --bg-raised:     #FFFDF6;
  --bg-sunken:     #F2EDDE;
  --bg-inverse:    #251C2A;
  --text:          #251C2A;
  --text-muted:    #5A5162;
  --text-inverse:  #F6F0E2;
  --line:          #E2DACA;
  --line-strong:   #7C7188; /* >= 3:1 on bg, bg-raised and bg-sunken — control borders */
  --accent:        #5A3472; /* royal plum — fills */
  --accent-ink:    #5E3378; /* plum at text weight — links, sample tags */
  --accent-hover:  #472558;
  --on-accent:     #F9F2E4;
  --accent-wash:   #EEE5F0;
  --brass-ink:     #7C5A14; /* gilt darkened to text weight — >= 4.5:1 on all light grounds */
  --brass-line:    #B4862E;
  --gilt-bright:   #C89B3C; /* decorative only, never small text */
  --error:         #9A2B1B;
  --focus:         #8A5A0E;

  /* The awning — the green strip and canopies, cream-lettered like the
     real one over the door ("St. Charles Place · 425-226-8427"). */
  --awning:         #2E6248;
  --awning-deep:    #24503A;
  --awning-ink:     #2F5F46; /* green at text weight on the light grounds */
  --on-awning:      #F3ECD6;
  --on-awning-soft: #BFD8C4;

  /* The deep aubergine bands (hero, footer, cart head, admin bar) — the
     painted trim at dusk; the same in both themes. */
  --band:          #2A1B38;
  --band-raised:   #3C2A4E;
  --band-line:     #4E3B63;
  --on-band:       #F4EDDD;
  --on-band-soft:  #CFC2D9;
  --band-gilt:     #D9A950;
  --glow:          rgba(244, 196, 106, 0.5);
  --glow-soft:     rgba(244, 196, 106, 0.22);

  /* Manila stock tag (inventory prices) */
  --tag-bg:        #F3E7C8;
  --tag-line:      #C4A667;

  /* Buttons: hard brass offset "plate" shadows by day, lamp glows by night */
  --pop-gilt:      0.2rem 0.2rem 0 var(--brass-line);
  --pop-dark:      0.2rem 0.2rem 0 #3A2B12;
  --pop-sm-gilt:   0.14rem 0.14rem 0 var(--brass-line);
  --pop-sm-dark:   0.14rem 0.14rem 0 #3A2B12;

  --shadow:        0 1px 2px rgba(37, 28, 42, .06), 0 8px 24px -12px rgba(37, 28, 42, .22);
  --shadow-lift:   0 2px 4px rgba(37, 28, 42, .08), 0 18px 40px -18px rgba(37, 28, 42, .30);

  /* Type */
  --font-display: "Playfair Display", Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-100: 0.78rem;
  --fs-200: 0.875rem;
  --fs-300: 0.9375rem;
  --fs-400: 1.0625rem;
  --fs-500: clamp(1.125rem, 0.95rem + 0.6vw, 1.3125rem);
  --fs-600: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  --fs-700: clamp(1.75rem, 1.3rem + 2.1vw, 2.625rem);
  --fs-800: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);
  --fs-900: clamp(2.6rem, 1.7rem + 4.4vw, 4.6rem);

  --lh-tight: 1.1;
  --lh-snug: 1.28;
  --lh-body: 1.62;
  --tracking-eyebrow: 0.16em;

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5.5rem;
  --sp-10: 7.5rem;

  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 8px;

  --measure: 62ch;
  --shell: 1200px;
  --shell-narrow: 780px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* After closing: aubergine-black, the gilt still catching lamplight. */
    --bg:            #151020;
    --bg-raised:     #1F1830;
    --bg-sunken:     #0F0B17;
    --bg-inverse:    #F0EADC;
    --text:          #EEE7DA;
    --text-muted:    #B9AEC6;
    --text-inverse:  #251C2A;
    --line:          #322947;
    --line-strong:   #7A7090;
    --accent:        #6D4390;
    --accent-ink:    #CBA9E6; /* plum lifted to text weight for the dark grounds */
    --accent-hover:  #7E54A3;
    --on-accent:     #F7EFDF;
    --accent-wash:   #2E2140;
    --brass-ink:     #DCAF56;
    --brass-line:    #A8792D;
    --gilt-bright:   #D9A950;
    --error:         #F0937F;
    --focus:         #E3B25C;

    --awning:         #24503A;
    --awning-deep:    #1B3F2D;
    --awning-ink:     #8FCCA8;
    --on-awning:      #EFE9D2;
    --on-awning-soft: #B4CFBB;

    --band:          #21142E;
    --band-raised:   #332244;
    --band-line:     #47325E;
    --on-band:       #F2EBDB;
    --on-band-soft:  #CDBFD9;
    --band-gilt:     #E0B25E;
    --glow:          rgba(244, 196, 106, 0.55);
    --glow-soft:     rgba(244, 196, 106, 0.24);

    --tag-bg:        #3A2C15;
    --tag-line:      #8A6E35;

    /* by night the plates glow instead of popping */
    --pop-gilt:      0 0 16px rgba(224, 178, 94, .38);
    --pop-dark:      0 0 16px rgba(224, 178, 94, .30);
    --pop-sm-gilt:   0 0 12px rgba(224, 178, 94, .32);
    --pop-sm-dark:   0 0 12px rgba(224, 178, 94, .26);

    --shadow:        0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px -14px rgba(0, 0, 0, .8);
    --shadow-lift:   0 2px 6px rgba(0, 0, 0, .55), 0 22px 48px -20px rgba(0, 0, 0, .9);
  }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute must win over any class that sets `display`.
   Without this, .btn/.hint/.form-status etc. override the UA rule and an
   element the script has hidden stays on screen. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

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

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: 0;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-800); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-600); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-500); line-height: var(--lh-snug); }

p { margin: 0 0 var(--sp-4); max-width: var(--measure); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25em; }
li { margin-bottom: var(--sp-2); }

a { color: var(--accent-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color .15s ease; }
a:hover { color: var(--brass-ink); text-decoration-thickness: 2px; }

::placeholder { color: var(--text-muted); opacity: 0.75; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* on the deep aubergine bands the brown focus ring would vanish — flip it
   gilt; on the green awning strip it flips cream */
.hero, .site-footer, .banner, .admin-bar, .cart-head {
  --focus: var(--band-gilt);
}
.trust { --focus: var(--on-awning); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

::selection { background: var(--accent); color: var(--on-accent); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  background: var(--band);
  color: var(--on-band);
  border: 1px solid var(--band-gilt);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--sp-4); color: var(--on-band); }

/* --------------------------------------------------------------------------
   3. Layout primitives & ornament
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 60rem) { .shell { padding-inline: var(--sp-6); } }

.shell--narrow { max-width: var(--shell-narrow); }

.section { padding-block: var(--sp-8); }
@media (min-width: 48rem) { .section { padding-block: var(--sp-9); } }

.section--sunken { background: var(--bg-sunken); }
.section--rule { border-top: 1px solid var(--line); }

.section-head { margin-bottom: var(--sp-6); }
@media (min-width: 48rem) { .section-head { margin-bottom: var(--sp-7); } }
.section-head h2 { margin-bottom: var(--sp-3); }
.section-head p { color: var(--text-muted); font-size: var(--fs-500); margin-bottom: 0; }
.section-head p + p { margin-top: var(--sp-3); }

/* Brass rule with a centre diamond — the department-store divider. Drawn
   with clip-path so it recolours with the theme (no baked-in image). */
.section-head h2::after {
  content: "";
  display: block;
  width: 120px;
  height: 9px;
  margin-top: 0.65rem;
  background: var(--brass-line);
  clip-path: path("M0 4 h46 v1 H0 Z M74 4 h46 v1 H74 Z M60 0 L64.5 4.5 L60 9 L55.5 4.5 Z");
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 var(--sp-3);
}

.lede { font-size: var(--fs-500); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   4. Buttons & controls — brass plates and pressed seals
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-ui);
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease,
              transform .16s ease, box-shadow .16s ease;
}

/* Primary — oxblood plate, hard gilt offset; presses down into its shadow. */
.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  box-shadow: var(--pop-gilt);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn--primary:active { transform: translate(0.14rem, 0.14rem); box-shadow: 0.06rem 0.06rem 0 var(--brass-line); }

/* Brass — the gilt plate itself (add-to-cart, workshop actions). */
.btn--brass {
  background: var(--brass-line);
  color: #26140A;
  border-color: var(--brass-line);
  box-shadow: var(--pop-dark);
}
.btn--brass:hover { background: var(--gilt-bright); border-color: var(--gilt-bright); color: #26140A; }
.btn--brass:active { transform: translate(0.14rem, 0.14rem); box-shadow: 0.06rem 0.06rem 0 #3A2B12; }

/* Ghost — a thick-ruled secondary, never a thin outline. */
.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 2px solid var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover { border-color: var(--accent-ink); color: var(--accent-ink); background: var(--accent-wash); }
.btn--ghost:active { transform: translateY(1px); }

.btn--sm { min-height: 2.375rem; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-200); }
.btn--sm.btn--primary { box-shadow: var(--pop-sm-gilt); }
.btn--sm.btn--brass { box-shadow: var(--pop-sm-dark); }
.btn--sm.btn--primary:active,
.btn--sm.btn--brass:active { transform: translate(0.1rem, 0.1rem); box-shadow: none; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-4); }

/* --------------------------------------------------------------------------
   5. Header / nav
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(4px)) {
  .site-header { background: var(--bg); }
}
/* gilded hairline under the header — the brass edge of the counter */
.site-header::after {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass-line) 18%, var(--brass-line) 82%, transparent);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 4.25rem;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--text);
  margin-right: auto;
}
.wordmark:hover { color: var(--text); }
.wordmark svg { width: 2.35rem; height: 2.35rem; flex: none; }
.wordmark-text { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.005em;
}
.wordmark-sub {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-ink);
  font-weight: 700;
  margin-top: 2px;
}
@media (min-width: 30rem) {
  .wordmark-name { font-size: 1.25rem; }
  .wordmark-sub { font-size: 0.6875rem; }
}
/* On phones the name alone is the lockup — the sub-line would wrap the
   header onto four cramped lines. */
@media (max-width: 29.99rem) {
  .wordmark-sub { display: none; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: transparent;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-3);
  min-height: 2.5rem;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.nav-toggle-bars { display: block; width: 18px; height: 10px; position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after,
.nav-toggle-bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars span { top: 4px; }
.nav-toggle-bars::after { bottom: 0; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--sp-5);
  align-items: center;
}
.site-nav li { margin: 0; }
.site-nav a {
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-300);
  font-weight: 600;
  padding: var(--sp-2) 0;
  border-bottom: 2px solid transparent;
  display: inline-block;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--accent-ink); border-bottom-color: var(--brass-line); }

.header-cta { display: none; white-space: nowrap; }

@media (max-width: 71.99rem) {
  .site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--bg-raised);
    border-bottom: 2px solid var(--brass-line);
    box-shadow: var(--shadow-lift);
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { margin: 0; border-bottom: 1px solid var(--line); }
  .site-nav li:last-child { border-bottom: 0; }
  .site-nav a { padding: var(--sp-4) 0; width: 100%; border-bottom: 0; }
  .site-nav .nav-call {
    margin-top: var(--sp-4);
    display: inline-flex;
    width: 100%;
  }
}

@media (min-width: 72rem) {
  .nav-toggle { display: none; }
  .site-nav { display: block; }
  .site-nav .nav-call { display: none; }
  .header-cta { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   6. Banner
   -------------------------------------------------------------------------- */
.banner {
  background: var(--band);
  color: var(--on-band);
  font-size: var(--fs-200);
  text-align: center;
  border-bottom: 1px solid var(--band-gilt);
}
.banner[hidden] { display: none; }
.banner .shell { padding-block: var(--sp-2); }
.banner p { margin: 0; max-width: none; }
.banner a { color: var(--band-gilt); text-decoration: underline; }
.banner a:hover { color: var(--on-band); }

/* --------------------------------------------------------------------------
   7. Image frames + missing-photo placeholder
   -------------------------------------------------------------------------- */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  aspect-ratio: 4 / 3;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.frame--wide { aspect-ratio: 16 / 9; }
.frame--tall { aspect-ratio: 3 / 4; }
.frame--square { aspect-ratio: 1 / 1; }

/* Standalone story photos hang in a gilt-fillet gallery frame; the margin
   makes room for the outline (box-shadow does not take up layout space). */
.frame--matted {
  margin: 9px;
  box-shadow: 0 0 0 6px var(--bg-raised), 0 0 0 7px var(--brass-line), var(--shadow);
}

/* Styled placeholder shown when the photo file is not present yet. */
.frame.is-missing {
  background-color: var(--bg-sunken);
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0 11px,
      color-mix(in srgb, var(--line-strong) 40%, transparent) 11px 12px
    );
  border-style: dashed;
  border-color: var(--line-strong);
  display: grid;
  place-items: center;
}
.frame.is-missing::after {
  content: attr(data-slot);
  display: block;
  max-width: 88%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: pre-line; /* honour the newlines written into data-slot */
  overflow-wrap: break-word;
}

figure { margin: 0; }
figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-200);
  color: var(--text-muted);
  line-height: 1.5;
}
.frame--matted + figcaption { margin-top: calc(var(--sp-3) + 9px); }

/* --------------------------------------------------------------------------
   8. Hero — the real storefront at dusk, edge to edge
   The ONE loud moment on the page. The shop's own photo runs full-bleed
   under the aubergine wash (the trim at dusk); no frame, no mat, no
   caption block — just a tiny credit in the corner. On phones the copy
   leads on the dusk ground and the photo is a full-bleed band beneath
   it, blended in; from 62rem up the photo fills the whole hero and the
   copy sits over it, the wash heaviest where the text lives.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(115% 85% at 50% 0%, color-mix(in srgb, var(--band-raised) 62%, transparent), transparent 70%),
    var(--band);
  color: var(--on-band);
  border-bottom: 1px solid var(--band-line);
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-7) var(--sp-6);
}

/* the storefront photo, bled to the section edges — explicit height, not
   aspect-ratio, so max-height can never transfer into a narrowed width */
.hero-media {
  position: relative;
  height: clamp(15rem, 75vw, 26rem);
  overflow: hidden;
}
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* keep the lettered awning in the crop at every width */
  object-position: 50% 58%;
}
/* the dusk wash over the photo — blends up into the copy band above it
   (no seam), pools at the foot for the credit line */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      var(--band),
      color-mix(in srgb, var(--band) 55%, transparent) 16%,
      transparent 42%),
    linear-gradient(to top,
      color-mix(in srgb, var(--band) 85%, transparent),
      transparent 34%),
    color-mix(in srgb, var(--band) 28%, transparent);
}

/* tiny credit, bottom corner of the hero — never a caption block */
.hero-credit {
  position: absolute;
  z-index: 2;
  right: var(--sp-4);
  bottom: var(--sp-2);
  margin: 0;
  max-width: none;
  font-size: var(--fs-100);
  letter-spacing: 0.02em;
  color: var(--on-band-soft);
  text-shadow: 0 1px 3px rgba(10, 5, 18, .85);
}

@media (min-width: 62rem) {
  .hero-media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    max-height: none;
  }
  .hero-media img { object-position: 50% 56%; }
  /* the wash: near-solid over the copy column, opening onto the
     storefront to the right, gathering again at the far edge and the
     top and foot — no corner is ever empty */
  .hero-media::after {
    background:
      linear-gradient(96deg,
        color-mix(in srgb, var(--band) 96%, transparent) 0%,
        color-mix(in srgb, var(--band) 93%, transparent) 44%,
        color-mix(in srgb, var(--band) 62%, transparent) 66%,
        color-mix(in srgb, var(--band) 34%, transparent) 86%,
        color-mix(in srgb, var(--band) 50%, transparent) 100%),
      linear-gradient(to top,
        color-mix(in srgb, var(--band) 80%, transparent),
        transparent 26%),
      linear-gradient(to bottom,
        color-mix(in srgb, var(--band) 62%, transparent),
        transparent 22%);
  }
  .hero-inner {
    display: grid;
    align-items: center;
    min-height: min(72vh, 36rem);
    padding-block: var(--sp-9);
  }
  .hero-copy { max-width: 40rem; }
  .hero-credit { right: var(--sp-6); bottom: var(--sp-3); }
}

/* "EST · 1973" lockup — gilt rules closing on a diamond each side */
.hero-est {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  font-family: var(--font-ui);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--band-gilt);
  max-width: none;
}
.hero-est::before,
.hero-est::after {
  content: "";
  flex: 1 1 3rem;
  max-width: 8rem;
  height: 9px;
  background: var(--band-gilt);
  clip-path: path("M0 4 h64 v1 H0 Z M76 0 L80.5 4.5 L76 9 L71.5 4.5 Z");
}
.hero-est::before { transform: scaleX(-1); }

.hero h1 { margin-bottom: var(--sp-4); }
.hero-name {
  display: block;
  font-size: var(--fs-900);
  line-height: 1.04;
  color: #F8E7C6;
  /* the lamplit sign: layered static glow, verified >= 4.5:1 without it */
  text-shadow:
    0 0 14px var(--glow),
    0 0 40px var(--glow),
    0 0 90px var(--glow-soft);
}
.hero-sub {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-family: var(--font-ui);
  font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--band-gilt);
}

.hero .lede {
  color: var(--on-band-soft);
  max-width: 46ch;
  margin-bottom: var(--sp-6);
}
.hero .lede strong { color: var(--on-band); font-weight: 650; }

/* Buttons on the mahogany: the gilt plate leads, the ghost is ivory-ruled */
.hero .btn--primary {
  background: var(--band-gilt);
  border-color: var(--band-gilt);
  color: #2B1403;
  box-shadow: 0.2rem 0.2rem 0 #120A1C;
}
.hero .btn--primary:hover { background: #EBC272; border-color: #EBC272; color: #2B1403; }
.hero .btn--primary:active { transform: translate(0.14rem, 0.14rem); box-shadow: 0.06rem 0.06rem 0 #120A1C; }
.hero .btn--ghost {
  border-color: var(--on-band-soft);
  color: var(--on-band);
}
.hero .btn--ghost:hover { border-color: var(--on-band); color: var(--on-band); background: color-mix(in srgb, var(--on-band) 12%, transparent); }

/* --------------------------------------------------------------------------
   8b. Trust strip — the brass ledger under the masthead
   -------------------------------------------------------------------------- */
.trust {
  position: relative;
  /* explicit base colour under the gradient — the ground is never transparent */
  background-color: var(--awning);
  background-image: linear-gradient(180deg, var(--awning) 0%, var(--awning-deep) 100%);
  color: var(--on-awning);
  /* room for the scalloped fringe drawn by the ::after */
  padding-bottom: 10px;
}
/* the awning's scalloped fringe */
.trust::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -10px;
  height: 10px;
  background: var(--awning-deep);
  -webkit-mask-image: radial-gradient(circle 10px at 10px 0, #000 98%, transparent);
  -webkit-mask-size: 20px 10px;
  -webkit-mask-repeat: repeat-x;
  mask-image: radial-gradient(circle 10px at 10px 0, #000 98%, transparent);
  mask-size: 20px 10px;
  mask-repeat: repeat-x;
}
.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
@media (min-width: 48rem) {
  .trust-list { grid-template-columns: repeat(3, 1fr); }
}
.trust-list li {
  margin: 0;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--on-awning) 25%, transparent);
}
.trust-list li:last-child { border-bottom: 0; }
@media (min-width: 48rem) {
  .trust-list li {
    border-bottom: 0;
    border-left: 1px solid color-mix(in srgb, var(--on-awning) 25%, transparent);
    padding: var(--sp-5) var(--sp-5);
  }
  .trust-list li:first-child { border-left: 0; padding-left: 0; }
}
.trust-term {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-500);
  color: var(--on-awning);
  margin-bottom: 2px;
}
.trust-desc { display: block; font-size: var(--fs-200); color: var(--on-awning-soft); }
.trust-desc a { color: var(--on-awning); }
.trust-desc a:hover { color: var(--on-awning-soft); }

/* --------------------------------------------------------------------------
   9. The building — floor guide ("since 1973" section)
   -------------------------------------------------------------------------- */
.floors-grid {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}
@media (min-width: 62rem) {
  .floors-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: var(--sp-8); }
}

/* The cross-section: three storeys stepping out as they come down, capped
   by a cornice and footed by the workshop bench. */
.floor-guide {
  margin: var(--sp-5) 0 var(--sp-3);
}
.floor-guide::before {
  /* cornice */
  content: "";
  display: block;
  width: 100%;
  height: 10px;
  background: var(--band);
  border: 1px solid var(--brass-line);
  border-bottom: 0;
}
.floor {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  padding: var(--sp-4) var(--sp-5);
  margin-inline: auto;
}
.floor + .floor { border-top: 0; }
.floor:nth-child(2) { border-top: 0; }
.floor--bench {
  width: 100% !important;
  background: var(--bg-sunken);
  border-top: 3px double var(--brass-line) !important;
}
.floor-no {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-600);
  color: var(--brass-ink);
  line-height: 1;
  text-align: center;
  border-right: 1px solid var(--line);
  padding-right: var(--sp-4);
  align-self: stretch;
  display: grid;
  place-items: center;
}
.floor-name {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.floor-desc { display: block; font-size: var(--fs-300); color: var(--text); }
.floor-copy { grid-column: 2; }
.floor-note { max-width: 60ch; }

/* ---- From the archive — the shop's own photographs of pieces long since
   sold. A gallery-framed trio; never presented as current inventory. ---- */
.archive {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.archive .eyebrow { margin-bottom: var(--sp-2); }
.archive-intro { color: var(--text-muted); font-size: var(--fs-300); max-width: 60ch; }
.archive-strip {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}
@media (min-width: 34rem) {
  .archive-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 72rem) {
  .archive-strip { grid-template-columns: repeat(4, 1fr); }
}
/* Square specimen tiles — one piece each, centred. */
.archive-strip .frame { aspect-ratio: 1 / 1; }

.stat-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-6);
  margin: var(--sp-6) 0 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.stat-line li { margin: 0; }
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-600);
  color: var(--accent-ink);
  line-height: 1;
}
.stat-lbl { display: block; font-size: var(--fs-200); color: var(--text-muted); margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   10. Inventory gallery — stock cards with hanging price tags
   -------------------------------------------------------------------------- */
.gallery-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-strong);
}
.filter-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  appearance: none;
  background: var(--bg-raised);
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-200);
  font-weight: 650;
  padding: 0.4rem 0.95rem;
  min-height: 2.25rem;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--accent-ink); color: var(--accent-ink); background: var(--accent-wash); }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.gallery-count {
  margin-left: auto;
  font-size: var(--fs-200);
  color: var(--text-muted);
}

.grid-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }
.grid-cards > li { margin: 0; }

.card {
  margin: 0;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover,
.card:focus-within { border-color: var(--brass-line); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.card:hover .frame img { transform: scale(1.035); }
.card .frame { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.card-body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--sp-2); }
.card-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-500); margin: 0; line-height: var(--lh-snug); }
.card-cat {
  font-size: var(--fs-100);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brass-ink);
  font-weight: 700;
}
.card-desc { font-size: var(--fs-300); color: var(--text-muted); margin: 0; flex: 1 1 auto; }

/* The price hangs on a manila stock tag — pointed end, punched brass eyelet,
   price in the display face. Display-only everywhere; Stripe's registered
   price is what a buyer actually pays. */
.card-price {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: var(--tag-bg);
  border: 1px solid var(--tag-line);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-400);
  line-height: 1;
  padding: 0.42em 0.7em 0.42em 1.5em;
  clip-path: polygon(0.95em 0%, 100% 0%, 100% 100%, 0.95em 100%, 0% 50%);
}
.card-price::before {
  /* the punched eyelet */
  content: "";
  position: absolute;
  left: 0.62em;
  top: 50%;
  width: 0.42em;
  height: 0.42em;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--bg-raised);
  box-shadow: 0 0 0 1.5px var(--tag-line);
}

/* Catalog-style footer: tag opposite the actions, above a hairline. */
.card-foot {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.tag {
  display: inline-block;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid currentColor;
}
.tag--sample { color: var(--accent-ink); }
.tag--sold { color: var(--text-muted); }
.tag--hold { color: var(--brass-ink); }

.card-flags { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: var(--sp-6);
  text-align: center;
  color: var(--text-muted);
}
.empty-state p { margin-inline: auto; }

.note-inline {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass-line);
  background: var(--bg-raised);
  font-size: var(--fs-300);
  color: var(--text-muted);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.note-inline p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. Storefront link cards — brass plaques to eBay / Shopify.
   Plain navigation, never embeds: nothing is fetched from either site
   until the visitor chooses to leave.
   -------------------------------------------------------------------------- */
.store-links {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 48rem) {
  .store-links { grid-template-columns: 1.25fr 1fr; }
}
.store-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--sp-5);
  text-decoration: none;
  color: var(--text);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.store-card:hover,
.store-card:focus-visible {
  color: var(--text);
  border-color: var(--brass-line);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
.store-card--primary { border-top-color: var(--brass-line); }
.store-card-eyebrow {
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-ink);
}
.store-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
.store-card-desc {
  font-size: var(--fs-300);
  color: var(--text-muted);
  flex: 1 1 auto;
}
.store-card-host {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--text-muted);
  overflow-wrap: anywhere;
  transition: color .15s ease;
}
.store-card:hover .store-card-host { color: var(--brass-ink); }

/* --------------------------------------------------------------------------
   11b. "On the auction block" — owner-curated eBay showcase.
   One card at a time; arrows, dots and a gentle auto-rotate (disabled for
   reduced motion, paused on hover/focus). Cards are snapshots that link
   out — bids and availability live on eBay.
   -------------------------------------------------------------------------- */
.auction { margin-bottom: var(--sp-6); }
.auction-track { list-style: none; margin: 0; padding: 0; }
.auction-card { margin: 0; }
.auction-card.is-active { animation: auction-in .35s ease; }
@keyframes auction-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.auction-link {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.auction-link:hover,
.auction-link:focus-visible {
  color: var(--text);
  border-color: var(--brass-line);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
@media (min-width: 48rem) {
  .auction-link { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
.auction-link .frame {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  height: 100%;
}
@media (min-width: 48rem) {
  .auction-link .frame { border-bottom: 0; border-right: 1px solid var(--line); }
}
.auction-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5);
}
.auction-flags { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.auction-badge {
  display: inline-block;
  background: var(--awning);
  color: var(--on-awning);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
}
.auction-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-600);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
.auction-note-line { color: var(--text-muted); font-size: var(--fs-300); }
.auction-cta {
  margin-top: auto;
  padding-top: var(--sp-2);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: var(--fs-300);
}
.auction-link:hover .auction-cta { color: var(--brass-ink); text-decoration: underline; }
.auction-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.auction-arrow {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--bg-raised);
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.auction-arrow:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.auction-arrow:active { transform: translateY(1px); }
.auction-dots { display: flex; gap: var(--sp-2); }
.auction-dot {
  width: 0.9rem;
  height: 0.9rem;
  padding: 0;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.auction-dot:hover { border-color: var(--accent-ink); }
.auction-dot[aria-current="true"] { background: var(--accent); border-color: var(--accent); }
.auction-note { max-width: 60ch; }

/* --------------------------------------------------------------------------
   12. Restoration section + process
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); }
}

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0 0 var(--sp-5);
  padding: 0;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3.1rem;
  margin-bottom: var(--sp-4);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  background: var(--tag-bg);
  border: 1px solid var(--tag-line);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--brass-line);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-400);
  line-height: 1;
}
.steps strong { display: block; font-size: var(--fs-400); }
.steps span { color: var(--text-muted); font-size: var(--fs-300); }

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
.form-card {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-top: 0;
  border-radius: var(--radius);
  padding: calc(var(--sp-5) + 10px) var(--sp-5) var(--sp-5);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* the intake forms sit under their own little awning canopy */
.form-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  background: repeating-linear-gradient(90deg,
    var(--awning) 0 20px, var(--on-awning) 20px 40px);
}
.form-card > .eyebrow { margin-bottom: var(--sp-2); color: var(--awning-ink); }
.form-card h3 { margin-bottom: var(--sp-2); }
@media (min-width: 48rem) { .form-card { padding: var(--sp-6); } }

.field { margin-bottom: var(--sp-4); }
.field-row { display: grid; gap: var(--sp-4); }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }

label {
  display: block;
  font-size: var(--fs-300);
  font-weight: 650;
  margin-bottom: var(--sp-2);
  color: var(--text);
}
.label-optional { font-weight: 400; color: var(--text-muted); font-size: var(--fs-200); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-300);
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
  min-height: 2.875rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--brass-line);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass-line) 28%, transparent);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--error);
}

input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: var(--fs-200);
  padding: var(--sp-3);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-muted);
}

.hint { display: block; font-size: var(--fs-200); color: var(--text-muted); margin-top: var(--sp-2); }
.error-text {
  display: block;
  font-size: var(--fs-200);
  color: var(--error);
  font-weight: 600;
  margin-top: var(--sp-2);
  min-height: 0;
}
.error-text:empty { display: none; }

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
}
.checkbox input { width: 1.15rem; height: 1.15rem; margin-top: 0.28rem; accent-color: var(--accent); }
.checkbox label { margin: 0; font-weight: 400; font-size: var(--fs-300); color: var(--text-muted); }
.checkbox .error-text { grid-column: 1 / -1; margin-top: 0; }

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

.form-status {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--fs-300);
  border: 1px solid var(--line-strong);
  background: var(--bg-sunken);
}
.form-status[hidden] { display: none; }
.form-status--ok { border-color: var(--brass-line); border-left: 3px solid var(--brass-line); background: var(--bg-sunken); color: var(--text); }
.form-status--err { border-color: var(--error); border-left: 3px solid var(--error); color: var(--error); background: var(--bg-sunken); }

.thumb-preview {
  margin-top: var(--sp-3);
  display: none;
  max-width: 180px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.thumb-preview.is-visible { display: block; }

/* Multi-photo attachment previews (up to three), each with a remove button. */
.thumb-strip {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.thumb-strip li { margin: 0; }
.thumb-item {
  position: relative;
  width: 96px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-sunken);
}
.thumb-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  display: block;
}
.thumb-remove {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.thumb-remove:hover { color: var(--error); border-color: var(--error); }
.thumb-remove:active { transform: scale(.94); }

/* --------------------------------------------------------------------------
   15. Visit / contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 52rem) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }

.detail-list { margin: 0; }
.detail-list div {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}
.detail-list div:first-child { padding-top: 0; }
.detail-list dt {
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brass-ink);
}
.detail-list dd { margin: 0; font-size: var(--fs-400); }

.hours-table { width: 100%; border-collapse: collapse; font-size: var(--fs-300); }
.hours-table th, .hours-table td { text-align: left; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.hours-table th { font-weight: 650; width: 45%; }
.hours-table td { color: var(--text-muted); }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }

.links-inline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.links-inline li { margin: 0; }

/* --------------------------------------------------------------------------
   16. Footer — the second and last mahogany band
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--band);
  color: var(--on-band-soft);
  border-top: 3px double var(--brass-line);
  padding-block: var(--sp-7) var(--sp-6);
  font-size: var(--fs-300);
}
.footer-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-7); } }
.site-footer h2 {
  font-size: var(--fs-500);
  margin-bottom: var(--sp-3);
  color: var(--band-gilt);
  font-weight: 700;
}
.site-footer p { color: var(--on-band-soft); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sp-2); }
.site-footer a { color: var(--on-band); text-decoration: none; border-bottom: 1px solid var(--band-line); }
.site-footer a:hover { color: var(--band-gilt); border-bottom-color: var(--band-gilt); }
.footer-bottom {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--band-line);
  color: var(--on-band-soft);
  font-size: var(--fs-200);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
}
.footer-bottom p { margin: 0; max-width: 70ch; }

/* Base styling works on the light page grounds (privacy page); the footer
   flips it to band colours below. */
.spec-notice {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--brass-line);
  background: var(--bg-raised);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-4);
  font-size: var(--fs-200);
  color: var(--text-muted);
  margin-top: var(--sp-5);
}
.spec-notice p { margin: 0; max-width: 80ch; color: inherit; }
.spec-notice strong { color: var(--text); }
.spec-notice code { font-family: var(--font-mono); color: var(--text); }
.site-footer .spec-notice {
  border-color: var(--band-line);
  border-left-color: var(--band-gilt);
  background: color-mix(in srgb, var(--band-raised) 55%, var(--band));
  color: var(--on-band-soft);
}
.site-footer .spec-notice strong,
.site-footer .spec-notice code { color: var(--on-band); }

/* --------------------------------------------------------------------------
   17. Dialog (piece detail)
   -------------------------------------------------------------------------- */
dialog.sheet {
  border: 1px solid var(--brass-line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  color: var(--text);
  padding: 0;
  width: min(38rem, calc(100vw - 2rem));
  max-height: min(85vh, 48rem);
  box-shadow: var(--shadow-lift);
}
dialog.sheet::backdrop { background: rgba(26, 10, 4, .66); }
dialog.sheet[open] { animation: sheet-in .28s cubic-bezier(.2, .7, .3, 1); }
dialog.sheet[open]::backdrop { animation: backdrop-in .28s ease; }
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(0.75rem) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.sheet-body { overflow-y: auto; max-height: inherit; }
/* The piece photo runs full-bleed across the top of the sheet; the text
   below it gets the padding. */
.sheet-body .frame { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.sheet-text { padding: var(--sp-5); }
.sheet-text h2 { font-size: var(--fs-600); margin-bottom: var(--sp-2); }
.sheet-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.sheet-meta p { margin: 0; }
.sheet-close {
  position: absolute;
  z-index: 3; /* must sit above the piece photo, which fills the top of the sheet */
  top: var(--sp-3);
  right: var(--sp-3);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  width: 2.25rem; height: 2.25rem;
  font-size: 1.1rem; line-height: 1;
  color: var(--text);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.sheet-close:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.sheet-close:active { transform: scale(.94); }

/* --------------------------------------------------------------------------
   17b. Cart — header button + right-hand drawer
   Prices in the cart are display-only; checkout is minted server-side from
   the shop's Stripe-registered prices. The drawer is a native <dialog>
   (same focus trap and Escape handling as the piece sheet), docked to the
   right edge by the rules below.
   -------------------------------------------------------------------------- */
.cart-open {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: transparent;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-3);
  min-height: 2.5rem;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.cart-open:hover { border-color: var(--accent-ink); color: var(--accent-ink); background: var(--accent-wash); }
.cart-open svg { width: 1.1rem; height: 1.1rem; flex: none; }
.cart-open-label { display: none; }
@media (min-width: 30rem) { .cart-open-label { display: inline; } }
/* The narrowest phones: tighten header gaps so wordmark + cart + menu all fit. */
@media (max-width: 23.99rem) {
  .header-inner { gap: var(--sp-2); }
  .cart-open { padding-inline: var(--sp-2); }
  .nav-toggle { padding-inline: var(--sp-2); letter-spacing: 0; }
  .wordmark svg { width: 2rem; height: 2rem; }
  .wordmark-name { font-size: 1rem; }
}
.cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.3rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-100);
  font-weight: 700;
  line-height: 1;
}

dialog.cart {
  position: fixed;
  inset: 0 0 0 auto;
  height: 100dvh;
  max-height: 100dvh;
  width: min(26rem, calc(100vw - 2.5rem));
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 2px solid var(--brass-line);
  border-radius: 0;
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: var(--shadow-lift);
}
dialog.cart::backdrop { background: rgba(26, 10, 4, .66); }
dialog.cart[open] {
  display: flex;
  flex-direction: column;
  animation: cart-in .28s cubic-bezier(.2, .7, .3, 1);
}
dialog.cart[open]::backdrop { animation: backdrop-in .28s ease; }
@keyframes cart-in {
  from { opacity: 0; transform: translateX(1.25rem); }
  to   { opacity: 1; transform: none; }
}

/* the drawer's mahogany header band */
.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--band);
  color: var(--on-band);
  border-bottom: 2px solid var(--band-gilt);
  flex: none;
}
.cart-head h2 { font-size: var(--fs-600); margin: 0; color: var(--on-band); }
.cart-close {
  position: static;
  flex: none;
  background: transparent;
  border-color: var(--on-band-soft);
  color: var(--on-band);
}
.cart-close:hover { color: var(--band-gilt); border-color: var(--band-gilt); }

.cart-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-5);
}
.cart-once { margin-top: 0; margin-bottom: var(--sp-4); }

.cart-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.cart-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  margin: 0;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.cart-item .frame {
  width: 64px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
}
/* At thumbnail size the frame's data-slot caption cannot fit — show the
   hatched placeholder alone. */
.cart-item .frame.is-missing::after { content: none; }
.cart-item-title { font-weight: 650; font-size: var(--fs-300); margin: 0 0 2px; line-height: var(--lh-snug); }
.cart-item-price { margin: 0; font-size: var(--fs-200); font-weight: 700; color: var(--brass-ink); }
.cart-item-remove {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.cart-item-remove:hover { color: var(--error); border-color: var(--error); }
.cart-item-remove:active { transform: scale(.94); }

.cart-empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-sunken);
  padding: var(--sp-5);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-300);
}
.cart-empty p { margin: 0; margin-inline: auto; }

.cart-foot {
  flex: none;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-top: 3px double var(--brass-line);
  background: var(--bg-raised);
}
.cart-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-1);
  max-width: none;
  font-weight: 650;
}
.cart-total { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-600); color: var(--text); }
.cart-total-note { margin-top: 0; margin-bottom: var(--sp-4); }
.cart-foot .hint { max-width: none; }
.cart-foot .form-status { margin-top: var(--sp-3); }

/* Sold pieces keep their dignity: a quiet tag and a muted price, never a
   dead button. */
.card-sold-note {
  font-weight: 700;
  font-size: var(--fs-200);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   18. Admin dashboard
   -------------------------------------------------------------------------- */
.admin-body { background: var(--bg); }

.admin-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--band);
  color: var(--on-band);
  border-bottom: 2px solid var(--band-gilt);
}
.admin-bar .shell { display: flex; align-items: center; gap: var(--sp-3); min-height: 3.5rem; }
.admin-bar-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-400); margin-right: auto; }
.admin-bar-user { font-size: var(--fs-200); color: var(--on-band-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.admin-bar .btn--ghost { color: var(--on-band); border-color: var(--on-band-soft); }
.admin-bar .btn--ghost:hover { background: color-mix(in srgb, var(--on-band) 14%, transparent); color: var(--on-band); border-color: var(--on-band); }

.tabs {
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: var(--sp-5);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-300);
  font-weight: 650;
  padding: var(--sp-3) var(--sp-4);
  min-height: 2.875rem;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brass-line); }
.tab:hover { color: var(--text); border-bottom-color: var(--line-strong); }
.tab[aria-selected="true"]:hover { border-bottom-color: var(--brass-line); }
.tab:focus-visible { outline-offset: -3px; }

.panel[hidden] { display: none; }

.admin-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.admin-card h2, .admin-card h3 { margin-top: 0; }

.record-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.record {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
}
.record-head { display: flex; gap: var(--sp-3); align-items: flex-start; }
.record-thumb { width: 72px; height: 72px; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--line); overflow: hidden; background: var(--bg-sunken); }
.record-thumb img { width: 100%; height: 100%; object-fit: cover; }
.record-title { font-weight: 650; margin: 0 0 2px; font-size: var(--fs-400); }
.record-sub { margin: 0; font-size: var(--fs-200); color: var(--text-muted); }
.record-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Photos attached to a request/inquiry: tap a thumbnail to expand it in
   place, tap again to shrink it back. Pure toggle, no dialog. */
.photo-strip { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.photo-thumb {
  padding: 0;
  width: 72px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-sunken);
  cursor: zoom-in;
  transition: border-color .15s ease;
}
.photo-thumb:hover { border-color: var(--brass-line); }
.photo-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  display: block;
}
.photo-thumb[aria-expanded="true"] {
  width: 100%;
  cursor: zoom-out;
}
.photo-thumb[aria-expanded="true"] img {
  aspect-ratio: auto;
  max-height: 70vh;
  object-fit: contain;
  background: var(--bg-sunken);
}
.record pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-ui);
  font-size: var(--fs-300);
  color: var(--text-muted);
}

/* Buy-it-now fields inside the inventory form — grouped and brass-edged so
   the commerce settings read as one decision, not three stray fields. */
.commerce-fields {
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass-line);
  background: var(--bg-sunken);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.commerce-fields .field:last-of-type { margin-bottom: var(--sp-3); }
.commerce-fields code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

.setup-steps { counter-reset: s; }
.setup-steps code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
  word-break: break-word;
}

.callout {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--brass-line);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-sunken);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-300);
}
.callout p:last-child { margin-bottom: 0; }
.callout h2 { font-size: var(--fs-500); margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   19. Prose page (privacy)
   -------------------------------------------------------------------------- */
.prose { padding-block: var(--sp-7) var(--sp-8); }
.prose h1 { margin-bottom: var(--sp-4); }
.prose h1::after {
  content: "";
  display: block;
  width: 120px;
  height: 9px;
  margin-top: 0.65rem;
  background: var(--brass-line);
  clip-path: path("M0 4 h46 v1 H0 Z M74 4 h46 v1 H74 Z M60 0 L64.5 4.5 L60 9 L55.5 4.5 Z");
}
.prose h2 { font-size: var(--fs-600); margin-top: var(--sp-7); }
.prose h3 { font-size: var(--fs-500); margin-top: var(--sp-5); }
.prose ul { max-width: var(--measure); }
.prose li { color: var(--text); }

/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-nav, .nav-toggle, .cart-open, .banner, .card-foot .btn, .form-card, dialog { display: none !important; }
  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}