/* Cedar Hills — couples' templates */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=DM+Serif+Display:ital@0;1&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Petit+Formal+Script&family=Mrs+Saint+Delafield&family=Allura&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

.tpl-page {
  min-height: 100vh;
  background: #efeae0;
  font-family: 'Inter', sans-serif;
  color: #2b2620;
  display: flex;
  flex-direction: column;
}

/* ─────────── page header ─────────── */
.tpl-page__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  padding: 32px 48px 20px;
  background: #f4eee2;
  border-bottom: 1px solid rgba(58,52,44,0.1);
}
.tpl-page__head-left { min-width: 0; }
.tpl-page__eyebrow {
  font-size: 10px;
  letter-spacing: 0.36em;
  color: rgba(43,38,32,0.55);
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.tpl-page__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.01em;
  color: #2b2620;
}
.tpl-page__title em { color: #5E6B55; font-style: italic; }

/* ─────────── toolbar ─────────── */
.tpl-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
}
.tpl-toolbar__label {
  font-size: 10px;
  letter-spacing: 0.36em;
  color: rgba(43,38,32,0.55);
  font-weight: 500;
}
.tpl-toolbar__swatches { display: flex; gap: 8px; }

.tpl-swatch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 7px;
  border: 1px solid rgba(43,38,32,0.18);
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(43,38,32,0.8);
  transition: all 150ms ease;
  border-radius: 999px;
}
.tpl-swatch:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(43,38,32,0.4);
}
.tpl-swatch.is-active {
  background: #1B1714;
  color: #f4ede2;
  border-color: #1B1714;
}
.tpl-swatch__chip {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.tpl-swatch__chip i {
  display: block;
  flex: 1;
  height: 100%;
}

/* ─────────── intro note ─────────── */
.tpl-page__note {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  color: rgba(43,38,32,0.72);
  padding: 16px 48px 22px;
  background: #f4eee2;
  border-bottom: 1px solid rgba(58,52,44,0.06);
  display: flex;
  align-items: center;
  gap: 14px;
}
.tpl-page__note .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #B58463;
  flex-shrink: 0;
}

/* ─────────── canvas region ─────────── */
.tpl-page__canvas {
  flex: 1;
  position: relative;
  min-height: 800px;
}

/* ─────────── editable text ─────────── */
.tpl-edit {
  outline: none;
  cursor: text;
}
.tpl-edit:hover {
  background: rgba(94,107,85,0.05);
  box-shadow: 0 0 0 4px rgba(94,107,85,0.05);
  border-radius: 1px;
}
.tpl-edit:focus {
  background: rgba(94,107,85,0.1);
  box-shadow: 0 0 0 4px rgba(94,107,85,0.1);
  border-radius: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   SIGN BASE
   ═══════════════════════════════════════════════════════════════ */
.sign {
  width: 100%;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  position: relative;
  overflow: hidden;
}
.sign__inner {
  position: absolute;
  inset: 36px;
  display: flex;
  flex-direction: column;
}

/* paper texture — extremely subtle */
.sign::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.012) 0, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.01) 0, transparent 60%);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   A — EDITORIAL  (welcome / bar / cards / unplugged)
   Type-led layout, content centered vertically to fill the sign.
   ═══════════════════════════════════════════════════════════════ */
.sign--a .sign__inner {
  inset: 60px 44px;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
}

.sign-a__eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Big italic display headline */
.sign-a__welcome {
  font-family: 'DM Serif Display', 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 120px;
  font-weight: 400;
  line-height: 0.92;
  margin: 22px 0 10px;
  letter-spacing: -0.018em;
}

.sign-a__rule {
  width: 64px; height: 1px;
  background: var(--ink);
  margin: 8px auto 22px;
}

.sign-a__pretitle {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.44em;
  margin-bottom: 28px;
  text-transform: uppercase;
}

/* Stacked names (welcome) — fills the sign vertically */
.sign-a__name-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.sign-a__big-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 70px;
  letter-spacing: 0.06em;
  line-height: 1.04;
  color: var(--ink);
}
.sign-a__amp-big {
  font-family: 'DM Serif Display', 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 60px;
  line-height: 1;
  color: var(--accent);
  margin: 2px 0;
}

/* Separator above the date */
.sign-a__sep {
  width: 40px; height: 1px;
  background: var(--rule);
  margin: 28px auto 16px;
}
.sign-a__sep--small {
  width: 30px;
  margin: 22px auto 12px;
}

.sign-a__date {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.34em;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-transform: uppercase;
}
.sign-a__date i {
  color: var(--accent);
  font-style: normal;
}

/* === Small sign variants (8×10″ — cards / unplugged) === */
.sign--small .sign__inner {
  inset: 44px 36px;
}
.sign--small .sign-a__eyebrow {
  font-size: 10px;
  letter-spacing: 0.36em;
}
.sign-a__welcome--sm {
  font-size: 70px;
  margin: 18px 0 6px;
  line-height: 0.94;
}
.sign--small .sign-a__rule {
  width: 48px;
  margin: 6px auto 18px;
}
.sign--small .sign-a__pretitle {
  font-size: 10px;
  letter-spacing: 0.38em;
  margin-bottom: 22px;
}
.sign-a__body {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.55;
  color: var(--ink);
  text-align: center;
}
.sign-a__body br + br { display: none; } /* but double-br is preserved in JSX flow */
.sign--unplugged .sign-a__body { font-size: 22px; line-height: 1.5; }
.sign--small .sign-a__date {
  font-size: 10px;
  letter-spacing: 0.32em;
  gap: 10px;
}

/* === Bar sign — bigger headline + menu list === */
.sign-a__welcome--md {
  font-size: 132px;
  margin: 18px 0 6px;
  line-height: 0.92;
}
/* Smaller "Capture" headline for the Photo Album sign — leaves room for QR */
.sign-a__welcome--xs {
  font-size: 56px;
  margin: 14px 0 4px;
  line-height: 0.95;
}
.sign-a__qr-wrap {
  display: flex;
  justify-content: center;
  margin: 18px auto 10px;
}
.sign-a__qr-caption {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  margin: 8px auto;
  text-align: center;
  max-width: 260px;
  text-wrap: balance;
}
.sign--bar .sign-a__pretitle {
  margin-bottom: 22px;
}
.bar-menu {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.bar-item {
  position: relative;
}
.bar-item__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.28em;
  margin-bottom: 5px;
  color: var(--ink);
  text-transform: uppercase;
}
.bar-item__desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--muted);
  letter-spacing: 0.02em;
}
/* The × button on each bar item (hidden until hover, gone in print) */
.bar-item__x,
.rm__x {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(43,38,32,0.08);
  border: 1px solid transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms, background 140ms, color 140ms;
  color: rgba(43,38,32,0.6);
  font-size: 18px;
  line-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bar-item__x span,
.rm__x span {
  display: inline-block;
  transform: translateY(-2px);
}
.bar-item:hover .bar-item__x,
.rm:hover .rm__x {
  opacity: 1;
}
.bar-item__x:hover,
.rm__x:hover {
  background: #2b2620;
  color: #fff;
}
/* Add-drink button — visible in edit mode, hidden in print */
.bar-menu__add {
  align-self: center;
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--rule);
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 150ms;
}
.bar-menu__add:hover {
  color: var(--ink);
  border-color: var(--ink);
  border-style: solid;
  background: rgba(43,38,32,0.04);
}

/* Removable line wrapper — full-width row, × at right */
.rm {
  position: relative;
  display: block;
  width: 100%;
}

/* ─── Memory list (In Loving Memory signs) ─── */
.memory-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin: 14px auto 6px;
  width: 100%;
}
.memory-item {
  position: relative;
  text-align: center;
}
/* Editorial memory item */
.sign--a .memory-item__name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
}
/* Heirloom memory item — italic lowercase */
.sign--b .memory-item__name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink);
  text-transform: lowercase;
}
/* Almanac memory item — proper case serif italic, mono kicker handled in JSX */
.sign--c .memory-item__name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink);
}
/* × button on memory items — reuses bar-item__x styling */
.memory-item__x {
  position: absolute;
  top: 50%;
  right: -28px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: var(--paper);
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  transition: opacity 120ms, background 120ms, color 120ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.memory-item__x span {
  display: inline-block;
  transform: translateY(-1px);
}
.memory-item:hover .memory-item__x { opacity: 1; }
.memory-item__x:hover {
  background: #2b2620;
  color: var(--paper);
  border-color: #2b2620;
}
/* Add-name button — visible in edit mode, hidden in print */
.memory-list__add {
  align-self: center;
  margin-top: 6px;
  padding: 6px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--muted);
  border-radius: 999px;
  cursor: pointer;
  transition: all 150ms;
}
.memory-list__add:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════
   B — HEIRLOOM (arched welcome, italic lowercase, ornaments)
   ═══════════════════════════════════════════════════════════════ */
.sign--b .sign__inner {
  inset: 44px;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
}
.sign-b__eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.36em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* The arch — couple's monogram inside (welcome only) */
.sign-b__arch {
  width: 250px;
  height: 290px;
  border: 1.5px solid var(--ink);
  border-radius: 125px 125px 0 0;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 26px;
  /* Optical centering: an open arch's visual mass sits BELOW its geometric
     center (the curved top has less area than the straight-sided bottom).
     Pad the top so the monogram sits at the optical center, not the
     mathematical one. */
  padding: 24px 0 0;
  /* Defensive clip: in case a tweaked monogram leans aggressively
     (italic + tall letters like "M", "W", "K"), make sure it can never
     visibly cross the inked arch line itself. */
  overflow: hidden;
}
.sign-b__monogram {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 108px;
  line-height: 0.88;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  /* Container is its natural width; the arch's flex centers it, which
     gives true visual centering for the M&D ink span. */
}
.sign-b__amp {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 66px;
  color: var(--accent);
  font-weight: 500;
  margin: 0 -2px 10px;
}

.sign-b__welcome {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 62px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  margin-bottom: 16px;
  color: var(--ink);
}
/* "cheers" on bar — banner-size */
.sign-b__welcome--bar {
  font-size: 108px;
  margin: 8px 0 12px;
}
/* "cards & gifts" / "unplugged" on small signs */
.sign-b__welcome--small {
  font-size: 56px;
  margin: 14px 0 8px;
}

.sign-b__names {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
}

.sign-b__pretitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.sign-b__ornament {
  margin: 24px 0 18px;
  font-size: 16px;
  letter-spacing: 0.7em;
  color: var(--accent);
}
.sign-b__ornament--inline {
  margin: 14px 0 12px;
  font-size: 14px;
}

.sign-b__body {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.55;
  color: var(--ink);
  margin: 6px 0;
}
.sign-b__body--unplugged {
  font-size: 21px;
  line-height: 1.5;
}

.sign-b__date {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
}
.sign-b__date--small {
  font-size: 14px;
  line-height: 1.5;
}

/* Heirloom small (8×10) tighter insets */
.sign--h-small .sign__inner { inset: 38px 36px; }
.sign--h-small .sign-b__eyebrow { font-size: 10px; letter-spacing: 0.34em; margin-bottom: 8px; }

/* Heirloom Photo Album QR — tighter spacing to fit the QR slot + caption */
.sign--h-album .sign-b__welcome--small { font-size: 44px; margin: 8px 0 6px; }
.sign-b__qr-wrap {
  display: flex;
  justify-content: center;
  margin: 6px auto 8px;
}
.sign-b__body--qr {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  margin: 4px auto;
  max-width: 260px;
  text-align: center;
  text-wrap: balance;
}

/* Heirloom bar menu - italic descs, centered */
.bar-menu--heirloom .bar-item__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  letter-spacing: 0.3em;
  font-weight: 500;
}
.bar-menu--heirloom .bar-item__desc {
  font-style: italic;
  font-size: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   C — ALMANAC (header rails, stacked editorial)
   ═══════════════════════════════════════════════════════════════ */
.sign--c .sign__inner {
  inset: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  align-items: stretch;
  gap: 0;
}

/* Top + bottom rails */
.sign-c__top, .sign-c__foot {
  display: flex;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--muted);
  text-transform: uppercase;
}
.sign-c__top {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 14px;
}
.sign-c__foot {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}

.sign-c__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.sign-c__stack--bar {
  margin-bottom: 8px;
}
.sign-c__stack--small {
  margin: 4px 0;
}

.sign-c__line {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}
.sign-c__line--welcome {
  font-style: italic;
  font-size: 88px;
  letter-spacing: -0.015em;
}
.sign-c__line--welcome-sm {
  font-style: italic;
  font-size: 62px;
  letter-spacing: -0.01em;
}
.sign-c__line--caps {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5em;
  margin: 22px 0;
  color: var(--muted);
  text-transform: uppercase;
}
.sign-c__line--it {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 42px;
  color: var(--accent);
  margin-bottom: 14px;
  font-weight: 400;
}
.sign-c__line--it-sm {
  font-size: 32px;
  margin-bottom: 8px;
}
.sign-c__line--names {
  font-family: 'DM Serif Display', serif;
  font-style: normal;
  font-size: 66px;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
}
.sign-c__line--amp {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 46px;
  color: var(--accent);
  font-weight: 400;
  margin: 2px 0;
  line-height: 1;
}

.sign-c__body {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 23px;
  line-height: 1.55;
  color: var(--ink);
  margin: 4px 0 8px;
  text-align: center;
}
.sign-c__body--unplugged {
  font-size: 20px;
  line-height: 1.5;
}

/* Almanac small (8×10) tighter rails */
.sign--a-small .sign__inner { inset: 36px 32px; }
/* Almanac Photo Album QR — sized to fit display stack + QR + body + rail */
.sign--a-album .sign-c__line--welcome-sm { font-size: 50px; }
.sign--a-album .sign-c__stack--small { margin: 4px 0 8px; }
.sign-c__qr-wrap {
  display: flex;
  justify-content: center;
  margin: 8px auto 10px;
}
.sign-c__body--qr {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  margin: 4px auto 0;
  max-width: 260px;
  text-align: center;
  color: var(--ink);
  text-wrap: balance;
}.sign--a-small .sign-c__top,
.sign--a-small .sign-c__foot {
  font-size: 9px;
  letter-spacing: 0.24em;
  padding-bottom: 12px;
}
.sign--a-small .sign-c__foot {
  padding-top: 12px;
  padding-bottom: 0;
}

/* Almanac bar menu - editorial mono caps */
.bar-menu--almanac {
  margin: 8px auto 4px;
  gap: 22px;
}
.bar-menu--almanac .bar-item__name {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.36em;
  font-weight: 600;
  margin-bottom: 6px;
}
.bar-menu--almanac .bar-item__desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0.01em;
}


/* ═══════════════════════════════════════════════════════════════
   D — MEADOW (tracked serif uppercase, script "and", sage default)
   ═══════════════════════════════════════════════════════════════ */
.sign--d .sign__inner {
  inset: 70px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

/* Top + bottom eyebrows — 2-line tracked uppercase serif */
.sign-d__eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.85;
}
.sign-d__eyebrow > div + div { margin-top: 2px; }

/* Mid-section stack of names with script "and" between */
.sign-d__name-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 22px 0;
}
.sign-d__big-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 64px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 0.95;
  white-space: nowrap;
}
.sign-d__big-name--sm { font-size: 44px; }

/* Smaller stacked title (Cards & Gifts, In Loving Memory) */
.sign-d__stacked-titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
}

/* Welcome / Cheers / Seating — single big word */
.sign-d__welcome {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 80px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 0.95;
  margin: 12px 0;
  white-space: nowrap;
}
.sign-d__welcome--sm { font-size: 48px; }

/* Script "and" with em-rules on either side */
.sign-d__amp {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--accent);
}
.sign-d__amp-rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.sign-d__amp-script {
  font-family: 'Petit Formal Script', 'Italianno', cursive;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  /* Petit Formal Script doesn't have a true italic axis; the font itself
     is calligraphic. Apply a hair of optical lift. */
  transform: translateY(-2px);
}
/* Inline variant — used in dates / foot lines where there's no room for rules.
   Sized relative to surrounding text (em) so it scales with date size, and
   nudged down so its visual middle sits on the caps middle of the date names. */
.sign-d__amp-inline {
  font-family: 'Petit Formal Script', cursive;
  font-size: 1.5em;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
  display: inline-block;
  vertical-align: baseline;
  transform: translateY(0.08em);
  line-height: 0;
}

/* Bottom date — tracked uppercase serif */
.sign-d__date {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.5;
}
.sign-d__date--sm { font-size: 13px; letter-spacing: 0.28em; }

/* Italic body copy (unplugged paragraph, QR caption) */
.sign-d__body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.55;
  text-align: center;
  margin: 12px 0;
}
.sign-d__body-it { font-style: italic; }
.sign-d__body--qr { font-size: 17px; margin: 12px 0 6px; }

/* Meadow QR center wrap */
.sign-d__qr-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px auto 10px;
}

/* Small (8×10) signs — tighter insets */
.sign--m-small .sign__inner { inset: 50px 42px; }
.sign--m-small .sign-d__eyebrow { font-size: 11px; letter-spacing: 0.34em; }
.sign--m-small .sign-d__welcome { font-size: 48px; margin: 14px 0; }
.sign--m-small .sign-d__big-name { font-size: 38px; }
.sign--m-small .sign-d__big-name--sm { font-size: 34px; }
.sign--m-small .sign-d__amp-script { font-size: 26px; }
.sign--m-small .sign-d__amp-rule { width: 24px; }

/* Meadow seating — slightly more breathing room */
.sign-d__welcome + .seating-list { margin-top: 14px; }

/* Meadow bar menu — clean serif rows */
.bar-menu--meadow {
  margin: 12px auto 14px;
  gap: 18px;
}
.bar-menu--meadow .bar-item__name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}
.bar-menu--meadow .bar-item__desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  opacity: 0.82;
}

/* Table-number card — meadow uses sage serif */
.sign--d .table-number__digits {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 240px;
  letter-spacing: -0.02em;
  color: var(--ink);
}


/* ═══════════════════════════════════════════════════════════════
   E — LYRIC (oversized swashy script, tracked sans, gallery white)
   ═══════════════════════════════════════════════════════════════ */
.sign--e .sign__inner {
  inset: 50px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}
.sign--e {
  /* Pure white — gallery feel. Override default paper. */
}

/* Eyebrows + sub-eyebrows — tracked uppercase sans */
.sign-e__eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.85;
}
.sign-e__eyebrow > div + div { margin-top: 0; }
.sign-e__sub-eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 4px;
}

/* The hero — wispy script with thin horizontal lines extending out from
   either side of the word to the sign edges. The line meets the script
   at the x-height middle; the gap between line and script is the natural
   flex gap. ScriptHero component handles auto-fit. */
.sign-e__hero-wrap {
  display: flex;
  flex: 1 1 auto;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  gap: 28px;
}
.sign-e__hero-line {
  flex: 1 1 auto;
  height: 0;
  /* border-top instead of background so the line reliably appears in print
     (browsers suppress background-color by default to save ink). */
  border-top: 1.5px solid var(--ink);
  align-self: center;
  min-width: 20px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.sign-e__hero {
  flex: 0 0 auto;
  font-family: 'Mrs Saint Delafield', 'Pinyon Script', cursive;
  font-weight: 400;
  /* font-size set dynamically by ScriptHero */
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  text-align: center;
  outline: none;
  cursor: text;
  /* Script glyphs (esp. Mrs Saint Delafield) carry trailing flourishes
     that extend past the measured text box — give them room so the
     horizontal lines never touch the swash. */
  padding: 0 0.12em;
  /* The trailing-flourish overhang makes the inked glyph sit ~5% of
     font-size right of the textbox center. Nudge left so the visible
     letters look centered between the two lines. */
  transform: translateX(-0.08em);
}
.sign-e__hero:focus { outline: none; }

/* Footer block — names + date */
.sign-e__foot {
  text-align: center;
  line-height: 1.5;
}
.sign-e__names {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
}
.sign-e__and {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.7em;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  display: inline-block;
  margin: 0 -2px;
  /* Italic ampersand slants right; nudge it left so it sits visually
     centered between the two names. */
  transform: translateX(-2px);
  line-height: 0;
  vertical-align: -0.18em;
}
.sign-e__foot-date {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  margin-top: 4px;
}

/* Caption (album QR) */
.sign-e__caption {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 8px 0 4px;
}

/* QR wrap */
.sign-e__qr-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px auto;
}

/* Lyric — keep the card edges clean; let the script flex but stay contained.
   The size is what makes it feel wispy/edge-to-edge, not actual overflow. */

/* Small (8×10) signs */
.sign--l-small .sign__inner { inset: 40px 28px; }
.sign--l-small .sign-e__eyebrow { font-size: 10px; letter-spacing: 0.34em; }
.sign--l-small .sign-e__sub-eyebrow { font-size: 10px; letter-spacing: 0.34em; }
.sign--l-small .sign-e__names { font-size: 11px; letter-spacing: 0.3em; }
.sign--l-small .sign-e__and { font-size: 18px; }
.sign--l-small .sign-e__foot-date { font-size: 13px; }
.sign--l-small .sign-e__hero { /* size capped by max prop on ScriptHero */ }

/* Lyric bar menu — minimalist */
.bar-menu--lyric {
  margin: 18px auto 10px;
  gap: 18px;
}
.bar-menu--lyric .bar-item__name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}
.bar-menu--lyric .bar-item__desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  opacity: 0.78;
}

/* Lyric memory list — italic serif fits the script vibe */
.sign--e .memory-item__name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink);
}

/* Group wrapper for hero + sub-eyebrow (Cards, Unplugged). Lets the script
   sit visually together with its supporting label, and pushes the foot to
   the natural bottom of the sign via space-between on sign__inner. */
.sign-e__center {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 0;
}
.sign-e__center .sign-e__hero-wrap {
  flex: 0 0 auto;
  align-self: center;
}

/* Table-number card — lyric uses Mrs Saint Delafield (script) for the number */
.sign--e .table-number__digits {
  font-family: 'Mrs Saint Delafield', cursive;
  font-size: 320px;
  line-height: 0.78;
  color: var(--ink);
  padding: 0 8px;
  /* Mrs Saint Delafield numerals sit high in their bounding box —
     compensate so the digit is visually centered top-to-bottom. */
  transform: translateY(0.06em);
  display: inline-block;
}


/* ═══════════════════════════════════════════════════════════════
   F — HARBOR (double-line border frame, copperplate script, blue)
   ═══════════════════════════════════════════════════════════════ */

/* The frame itself — thin double-line border made of two stacked borders */
.sign--f {
  /* The .sign element keeps the paper background. */
}
.sign-f__frame {
  position: absolute;
  inset: 22px;
  border: 1px solid var(--ink);
  /* Inner border is created via box-shadow inset */
  box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--ink);
}
.sign--f .sign__inner {
  inset: 32px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
}

/* Top eyebrows — serif uppercase, restrained */
.sign-f__eyebrow {
  font-family: 'Libre Caslon Text', 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.85;
}
.sign-f__eyebrow > div + div { margin-top: 0; }

/* Stacked copperplate names — Allura, large */
.sign-f__script-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 8px 0;
  /* Allura has dramatic ascenders/descenders — give it room */
  padding: 12px 0;
}
.sign-f__script-name {
  font-family: 'Allura', 'Pinyon Script', cursive;
  font-weight: 400;
  font-size: 130px;
  line-height: 0.95;
  letter-spacing: 0;
  color: var(--ink);
  white-space: nowrap;
}
.sign-f__and {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: var(--ink);
  /* Allura has dramatic descenders (e.g. "g" in Margaret) and ascenders (e.g.
     "D" in Daniel) that can crash into a tight "and". Give it real breathing
     room above and below so it's never covered regardless of the names used. */
  margin: 10px 0 12px;
  line-height: 1;
  /* Sit on its own visual band so any nearby loops pass behind it. */
  position: relative;
  z-index: 1;
}

/* Single-script-line variant (Cheers, Cards & Gifts, etc.) */
.sign-f__script-single {
  font-family: 'Allura', 'Pinyon Script', cursive;
  font-weight: 400;
  font-size: 110px;
  line-height: 0.95;
  color: var(--ink);
  padding: 4px 8px;
  white-space: nowrap;
}
.sign-f__script-single--sm {
  font-size: 84px;
}

/* Date — serif tracked uppercase */
.sign-f__date {
  font-family: 'Libre Caslon Text', 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.4;
}
.sign-f__date--sm { font-size: 12px; letter-spacing: 0.16em; }

/* Flourish — italic serif "we are so happy" type lines */
.sign-f__flourish {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
  line-height: 1.4;
  margin-top: -4px;
}

/* Body copy (Unplugged, Cards) — italic serif */
.sign-f__body {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
  line-height: 1.5;
  text-align: center;
  margin: 4px 0;
}
.sign-f__body--qr { font-size: 16px; margin-top: 8px; }
.sign-f__body br + br { display: none; }

/* QR wrap */
.sign-f__qr-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px auto;
}

/* Small (8×10) — tighter frame + insets */
.sign--c-small .sign-f__frame { inset: 16px; }
.sign--c-small .sign__inner   { inset: 28px 28px; }
.sign--c-small .sign-f__eyebrow      { font-size: 11px; letter-spacing: 0.18em; }
.sign--c-small .sign-f__script-stack { margin: 4px 0; padding: 8px 0; }
.sign--c-small .sign-f__script-name  { font-size: 80px; }
.sign--c-small .sign-f__script-single { font-size: 72px; padding: 2px 6px; }
.sign--c-small .sign-f__and          { font-size: 22px; margin: 6px 0 8px; }
.sign--c-small .sign-f__body         { font-size: 17px; }
.sign--c-small .sign-f__date         { font-size: 12px; }

/* Harbor bar menu — italic serif rows */
.bar-menu--harbor {
  margin: 8px auto 12px;
  gap: 18px;
}
.bar-menu--harbor .bar-item__name {
  font-family: 'Allura', cursive;
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0;
}
.bar-menu--harbor .bar-item__desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  opacity: 0.82;
}

/* Harbor memory list — italic serif */
.sign--f .memory-item__name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink);
}

/* Table-number — Allura swashy numeral */
.sign--f .table-number__digits {
  font-family: 'Allura', cursive;
  font-size: 260px;
  line-height: 0.85;
  color: var(--ink);
  padding: 0 10px;
}


/* ═══════════════════════════════════════════════════════════════
   COLLECTION DETAIL PAGE  (col-*)
   ═══════════════════════════════════════════════════════════════ */
.col-page {
  min-height: 100vh;
  background: #f4eee2;
  font-family: 'Inter', sans-serif;
  color: #2b2620;
  display: flex;
  flex-direction: column;
}

/* ─── Reset confirmation modal ───────────────────────────── */
.col-reset-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43,38,32,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.col-reset-dialog {
  background: #f7f1e6;
  border: 1px solid rgba(58,52,44,0.12);
  box-shadow: 0 16px 48px rgba(43,38,32,0.22);
  padding: 36px 40px 28px;
  max-width: 380px;
  width: 90%;
  text-align: center;
}
.col-reset-dialog__msg {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  line-height: 1.5;
  color: #2b2620;
  margin: 0 0 28px;
}
.col-reset-dialog__btns {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.col-reset-dialog__btn {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 10px 24px;
  border: 1px solid #2b2620;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.col-reset-dialog__btn--cancel {
  background: transparent;
  color: #2b2620;
}
.col-reset-dialog__btn--cancel:hover { background: rgba(43,38,32,0.06); }
.col-reset-dialog__btn--ok {
  background: #2b2620;
  color: #f7f1e6;
}
.col-reset-dialog__btn--ok:hover { background: #3d3530; }
.col-reset-dialog__btn--ok:disabled { opacity: 0.45; cursor: not-allowed; }

/* ─── Couple verification modal ──────────────────────────── */
.col-verify-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43,38,32,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.col-verify-dialog {
  background: #f7f1e6;
  border: 1px solid rgba(58,52,44,0.12);
  box-shadow: 0 20px 60px rgba(43,38,32,0.28);
  padding: 44px 44px 36px;
  max-width: 420px;
  width: 92%;
  text-align: center;
}
.col-verify-dialog__eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #7A8770;
  margin: 0 0 12px;
}
.col-verify-dialog__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  color: #2b2620;
  margin: 0 0 12px;
}
.col-verify-dialog__body {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(43,38,32,0.65);
  margin: 0 0 24px;
}
.col-verify-dialog__input {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(43,38,32,0.25);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #2b2620;
  padding: 12px 14px;
  outline: none;
  margin-bottom: 12px;
  text-align: center;
  transition: border-color 0.15s ease;
}
.col-verify-dialog__input:focus { border-color: #5E6B55; }
.col-verify-dialog__error {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: #b04a3a;
  margin: 0 0 14px;
  line-height: 1.4;
}

.col-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 48px;
  border-bottom: 1px solid rgba(58,52,44,0.1);
  background: #f7f1e6;
}
.col-nav__back {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(43,38,32,0.65);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  justify-self: start;
  transition: color 150ms, border-color 150ms;
}
.col-nav__back:hover { color: #2b2620; border-bottom-color: #5E6B55; }
.col-nav__brand {
  display: flex;
  align-items: center;
  justify-content: center;
}
.col-nav__brand img {
  height: 44px;
  width: auto;
  display: block;
  object-fit: contain;
}
.col-nav__placeholder { justify-self: end; }

/* Header */
.col-header {
  text-align: center;
  padding: 72px 48px 56px;
  border-bottom: 1px solid rgba(58,52,44,0.08);
}
.col-header__eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.36em;
  color: #B58463;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.col-header__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0 0 28px;
  color: #2b2620;
}
.col-header__lede {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: rgba(43,38,32,0.72);
  max-width: 580px;
  margin: 0 auto;
}

/* Toolbar */
.col-toolbar {
  background: #f7f1e6;
  border-bottom: 1px solid rgba(58,52,44,0.08);
  padding: 24px 48px 22px;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
}
.col-toolbar__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.col-toolbar__group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.col-toolbar__label {
  font-size: 10px;
  letter-spacing: 0.36em;
  color: rgba(43,38,32,0.55);
  font-weight: 500;
  text-transform: uppercase;
}
.col-toolbar__swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.col-toolbar__hint {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(43,38,32,0.85);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.col-toolbar__hint .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #B58463;
  flex-shrink: 0;
}

/* Print tip — small advisory line under the toolbar */
.col-toolbar__printtip {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(58,52,44,0.18);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(43,38,32,0.85);
  line-height: 1.55;
}
.col-toolbar__printtip strong {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #B58463;
  font-weight: 700;
  margin-right: 10px;
}
.col-toolbar__printtip em {
  font-style: normal;
  font-weight: 600;
  color: #2b2620;
}

/* Custom-colors panel */
.col-toolbar__custom {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(58,52,44,0.18);
  flex-wrap: wrap;
}
.col-toolbar__custom-label {
  font-size: 10px;
  letter-spacing: 0.36em;
  color: rgba(43,38,32,0.55);
  font-weight: 500;
}
.col-toolbar__custom-note {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(43,38,32,0.55);
}
.color-input {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.color-input__lbl {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(43,38,32,0.7);
  font-weight: 500;
}
.color-input input[type="color"] {
  width: 32px; height: 32px;
  border: 1px solid rgba(43,38,32,0.2);
  border-radius: 50%;
  padding: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}
.color-input input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-input input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.color-input__hex {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: rgba(43,38,32,0.7);
  letter-spacing: 0.05em;
}

/* PIECES */
.col-pieces {
  flex: 1;
  padding: 80px 48px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 96px;
}
.col-pieces__solo {
  display: flex;
  justify-content: center;
}
.col-pieces__row {
  display: flex;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
}
.piece {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.piece__board {
  /* The shadow now lives on .sign so SeatingChart can render its
     screen-only editor as a sibling without the shadow wrapping both. */
  background: transparent;
}
.sign {
  box-shadow:
    0 1px 0 rgba(43,38,32,0.08),
    0 1px 3px rgba(43,38,32,0.06),
    0 18px 50px -8px rgba(43,38,32,0.18);
}
.piece__label {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(43,38,32,0.7);
}
.piece__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.piece__name { font-weight: 600; color: #2b2620; }
.piece__sep { color: rgba(43,38,32,0.3); }
.piece__dim { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.18em; color: rgba(43,38,32,0.55); text-transform: none; }

.piece__sizes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
}
.piece__size {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.piece__size-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(43,38,32,0.78);
  text-transform: uppercase;
  padding-right: 8px;
  border-right: 1px solid rgba(43,38,32,0.18);
  font-weight: 600;
}
.piece__size-note {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(43,38,32,0.82);
}
.piece__action-sep { color: rgba(43,38,32,0.25); }
.piece__action {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: #B58463;
  text-decoration: none;
  border-bottom: 1px solid #B58463;
  padding-bottom: 3px;
  transition: color 150ms;
  cursor: pointer;
}
.piece__action:hover { color: #2b2620; border-bottom-color: #2b2620; }
.piece__action.is-busy {
  color: rgba(43,38,32,0.5);
  border-bottom-color: rgba(43,38,32,0.2);
  pointer-events: none;
  cursor: progress;
}

/* ─────────── QR uploader (used on Photo Album signs) ───────────
   Lives inside each Photo Album sign. Couples drop their generated QR PNG
   here and the printed/PDF sign has it baked in. Regular DOM (no shadow
   root) so html2canvas captures it. */
.qr-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px dashed rgba(26,22,18,0.32);
  color: rgba(26,22,18,0.55);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
  overflow: hidden;
  user-select: none;
}
.qr-slot.is-filled { cursor: default; border-style: solid; border-color: rgba(26,22,18,0.15); }
.qr-slot.is-dropping { border-color: var(--accent, #B58463); background: rgba(181,132,99,0.05); }
.qr-slot__img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.qr-slot__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  text-align: center;
}
.qr-slot__pattern {
  width: 60%;
  height: auto;
  opacity: 0.32;
  color: rgba(26,22,18,0.85);
  fill: currentColor;
  stroke: currentColor;
}
.qr-slot__hint {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(26,22,18,0.55);
}
.qr-slot__hint strong { font-weight: 600; color: rgba(26,22,18,0.75); }
.qr-slot__hint span   { font-size: 8px; letter-spacing: 0.14em; opacity: 0.7; }
.qr-slot__clear {
  position: absolute;
  top: -10px; right: -10px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: #1A1612;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  opacity: 0;
  transition: opacity 150ms;
  z-index: 2;
}
.qr-slot:hover .qr-slot__clear { opacity: 1; }

/* In print, hide all empty-state affordances. If filled, just show the image. */
@media print {
  .qr-slot { border-color: rgba(26,22,18,0.15) !important; border-style: solid !important; cursor: default !important; }
  .qr-slot__clear { display: none !important; }
  .qr-slot__hint { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SEATING CHART · multi-column alphabetical list
   ═══════════════════════════════════════════════════════════════ */
.seating-list {
  flex: 1;
  width: 100%;
  margin: 14px 0 12px;
  /* column-count comes from inline style — React picks 3/4/5 based on count */
  column-gap: 14px;
  column-fill: balance;
  /* font-size + line-height also come from inline style */
  font-family: 'Cormorant Garamond', serif;
  color: var(--ink);
}
.seating-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  break-inside: avoid;
  padding: 1px 0;
}
.seating-row__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}
.seating-row__dots {
  flex: 1 1 auto;
  height: 1px;
  border-bottom: 1px dotted var(--rule);
  transform: translateY(-2px);
  min-width: 4px;
}
.seating-row__table {
  flex: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85em;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding-left: 2px;
}

/* Editorial — slimmer column rules, mono table # */
.seating-list--editorial { column-rule: 1px solid rgba(26,22,18,0.06); }
.seating-list--editorial .seating-row__name { font-weight: 400; }

/* Heirloom — italic body, serif table #, ornamental column rule */
.seating-list--heirloom { column-rule: 1px solid rgba(26,22,18,0.08); font-style: italic; }
.seating-list--heirloom .seating-row__name {
  font-style: italic;
  font-variant: normal;
}
.seating-list--heirloom .seating-row__table {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1em;
  font-weight: 500;
}
.seating-list--heirloom .seating-row__dots {
  border-bottom-style: dotted;
}

/* Almanac — serif display, hairline column rule */
.seating-list--almanac { column-rule: 1px solid rgba(26,22,18,0.1); }
.seating-list--almanac .seating-row {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
}
.seating-list--almanac .seating-row__table {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78em;
  letter-spacing: 0.04em;
}

/* Headlines / chrome sized specifically for the seating chart */
.sign-a__welcome--seating { font-size: 96px; margin: 14px 0 4px; line-height: 0.92; }
.sign-a__date--seating { margin-top: 8px; }
.sign-b__welcome--seating {
  font-size: 64px;
  margin: 4px 0 6px;
  line-height: 1;
}
.sign--h-seating .sign-b__pretitle { margin-bottom: 10px; }
.sign-c__line--welcome-md {
  font-style: italic;
  font-size: 72px;
  letter-spacing: -0.015em;
}
.sign-c__stack--seating { margin-bottom: 10px; }

/* ═══════════════════════════════════════════════════════════════
   GUEST EDITOR · screen-only manager that lives beneath the sign
   (rendered as a sibling to .sign so html2canvas / print skip it)
   ═══════════════════════════════════════════════════════════════ */
.guest-editor {
  margin-top: 26px;
  padding: 22px 24px 24px;
  background: #FAF6EE;
  border: 1px solid rgba(43,38,32,0.12);
  border-radius: 6px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Inter', sans-serif;
  color: #2b2620;
}
.guest-editor__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(43,38,32,0.18);
}
.guest-editor__title { display: flex; align-items: baseline; gap: 12px; }
.guest-editor__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #B58463;
}
.guest-editor__count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: rgba(43,38,32,0.6);
}
.guest-editor__head-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.guest-editor__cols-head {
  display: grid;
  grid-template-columns: 1fr 1fr 70px 32px;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(43,38,32,0.5);
}
.guest-editor__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 480px;
  overflow-y: auto;
  padding: 2px 4px 2px 0;
}
.guest-editor__row {
  display: grid;
  grid-template-columns: 1fr 1fr 70px 32px;
  gap: 8px;
  align-items: center;
}
.guest-editor__row input {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid rgba(43,38,32,0.18);
  border-radius: 4px;
  background: #fff;
  color: #2b2620;
  transition: border-color 150ms;
}
.guest-editor__row input:focus {
  outline: none;
  border-color: #B58463;
  box-shadow: 0 0 0 2px rgba(181,132,99,0.18);
}
.guest-editor__row input[type="number"] { text-align: center; -moz-appearance: textfield; }
.guest-editor__row input[type="number"]::-webkit-outer-spin-button,
.guest-editor__row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.guest-editor__x {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: rgba(43,38,32,0.4);
  width: 32px; height: 32px;
  border-radius: 50%;
  transition: all 150ms;
}
.guest-editor__x:hover { background: rgba(180,40,40,0.08); color: #b54040; }

.guest-editor__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(43,38,32,0.18);
}
.guest-editor__note {
  font-size: 12px;
  font-style: italic;
  color: rgba(43,38,32,0.55);
}

/* Bulk paste panel */
.guest-editor__bulk {
  margin-bottom: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid rgba(43,38,32,0.14);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guest-editor__bulk-label {
  font-size: 13px;
  line-height: 1.5;
  color: #2b2620;
}
.guest-editor__bulk-label small { font-size: 11px; color: rgba(43,38,32,0.6); }
.guest-editor__bulk-label code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  background: #FAF6EE;
  padding: 1px 5px;
  border-radius: 2px;
}
.guest-editor__bulk textarea {
  width: 100%;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid rgba(43,38,32,0.18);
  border-radius: 4px;
  resize: vertical;
  min-height: 120px;
  color: #2b2620;
}
.guest-editor__bulk textarea:focus {
  outline: none;
  border-color: #B58463;
  box-shadow: 0 0 0 2px rgba(181,132,99,0.18);
}
.guest-editor__bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Buttons */
.ge-btn {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid rgba(43,38,32,0.18);
  background: #fff;
  color: #2b2620;
  border-radius: 4px;
  cursor: pointer;
  transition: all 150ms;
}
.ge-btn:hover:not(:disabled) {
  border-color: #B58463;
  color: #B58463;
}
.ge-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ge-btn--primary {
  background: #2b2620;
  color: #f4ede2;
  border-color: #2b2620;
}
.ge-btn--primary:hover:not(:disabled) {
  background: #B58463;
  border-color: #B58463;
  color: #fff;
}
.ge-btn--ghost {
  background: transparent;
  border-color: rgba(43,38,32,0.18);
  font-size: 10px;
  padding: 6px 12px;
}

/* The editor never prints (it sits as a .sign sibling, but belt-and-suspenders) */
@media print {
  .guest-editor { display: none !important; }
  .tn-editor    { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   TABLE NUMBERS — sign content + stepper
   ═══════════════════════════════════════════════════════════════ */

/* The big numeral, centered in the sign. Sized per collection below. */
.sign__inner > .table-number {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.table-number__digits {
  font-feature-settings: 'lnum' 1;
  line-height: 0.85;
}

/* Editorial — italic display, ultra-large */
.sign--a .table-number__digits {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 240px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
/* Heirloom — upright roman, smaller (sits inside ornament frame) */
.sign--b .table-number__digits {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 220px;
  color: var(--ink);
}
/* Almanac — mono-modern, slightly slimmer */
.sign--c .table-number__digits {
  font-family: 'DM Serif Display', serif;
  font-size: 220px;
  color: var(--ink);
  letter-spacing: -0.04em;
}

/* ─── Stepper (sibling of .sign, screen-only) ─── */
.tn-editor {
  width: min(560px, calc(100% - 16px));
  margin: 16px auto 0;
  padding: 16px 18px;
  background: #fdfbf6;
  border: 1px solid rgba(43,38,32,0.10);
  border-radius: 8px;
  color: #2b2620;
}
.tn-editor__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.tn-editor__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #B58463;
}
.tn-editor__count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: rgba(43,38,32,0.7);
}
.tn-editor__count strong { color: #2b2620; }

.tn-editor__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.tn-editor__step {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tn-editor__n {
  width: 60px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 6px;
  border: 1px solid rgba(43,38,32,0.18);
  border-radius: 4px;
  background: #fff;
  color: #2b2620;
}
.tn-editor__n:focus {
  outline: none;
  border-color: #B58463;
}
.tn-editor__count-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(43,38,32,0.7);
}
.tn-editor__count-field input {
  width: 60px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 6px 4px;
  border: 1px solid rgba(43,38,32,0.18);
  border-radius: 4px;
  background: #fff;
  color: #2b2620;
}
.tn-editor__tip {
  margin-top: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(43,38,32,0.7);
  line-height: 1.5;
}

/* OUTRO */
.col-outro {
  background: #2b2620;
  color: #f4ede2;
  padding: 88px 48px 96px;
  text-align: center;
}
.col-outro__inner { max-width: 640px; margin: 0 auto; }
.col-outro__eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.34em;
  color: #D9B89A;
  margin-bottom: 22px;
}
.col-outro h3 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  margin: 0 0 22px;
  color: #f4ede2;
}
.col-outro p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  line-height: 1.55;
  margin: 0 0 36px;
  color: rgba(244,237,226,0.75);
}
.col-outro p em { color: #f4ede2; font-style: italic; }
.col-outro__cta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: #f4ede2;
  text-decoration: none;
  border-bottom: 1px solid rgba(244,237,226,0.4);
  padding-bottom: 4px;
}
.col-outro__cta:hover { border-bottom-color: #f4ede2; }

/* ═══════════════════════════════════════════════════════════════
   COLLECTIONS INDEX PAGE  (cx-*)
   ═══════════════════════════════════════════════════════════════ */
.cx-page {
  min-height: 100vh;
  background: #f4eee2;
  font-family: 'Inter', sans-serif;
  color: #2b2620;
  display: flex;
  flex-direction: column;
}

.cx-nav {
  padding: 28px 48px 24px;
  text-align: center;
  border-bottom: 1px solid rgba(58,52,44,0.1);
  background: #f7f1e6;
}
.cx-nav__brand {
  margin-bottom: 4px;
}
.cx-nav__brand img {
  height: 56px;
  width: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
.cx-nav__sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.34em;
  color: rgba(43,38,32,0.55);
}
.cx-nav__back {
  position: absolute;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(43,38,32,0.45);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s ease;
}
.cx-nav__back:hover { color: #B58463; }
.cx-nav { position: relative; }

/* ─── Shared site-style nav (replaces cx-nav & col-nav) ─────── */
.tmpl-nav {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 64px;
  padding: 20px 56px;
  background: #f7f1e6;
  border-bottom: 1px solid rgba(58,52,44,0.1);
}
.tmpl-nav__logo {
  display: flex;
  align-items: center;
}
.tmpl-nav__logo img {
  height: 64px;
  width: auto;
  display: block;
  object-fit: contain;
}
.tmpl-nav__links {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tmpl-nav__link {
  color: rgba(43,38,32,0.55);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.tmpl-nav__link:hover {
  color: #2b2620;
}
.tmpl-nav__link--active {
  color: #2b2620;
  border-bottom-color: #2b2620;
}

/* ─── For Couples trigger (inside tmpl-nav) ──── */
.tmpl-nav { position: relative; }
.tmpl-couples-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0 0 4px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tmpl-couples-trigger__chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.22s ease;
}
.tmpl-couples-trigger--open .tmpl-couples-trigger__chevron {
  transform: rotate(-135deg) translateY(-2px);
}

/* ─── For Couples band ──── */
.tmpl-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: rgba(94, 107, 85, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(94, 107, 85, 0.4);
  box-shadow: 0 12px 40px rgba(34, 30, 26, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
}
.tmpl-band--open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.tmpl-band__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 860px;
  margin: 0 auto;
  padding: 0 48px;
}
.tmpl-band__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 24px;
  text-decoration: none;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.15s ease;
}
.tmpl-band__item:last-child { border-right: none; }
.tmpl-band__item:hover { background: rgba(255, 255, 255, 0.1); }
.tmpl-band__num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #D9B89A;
  line-height: 1;
}
.tmpl-band__label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 400;
  color: #f7f1e6;
  line-height: 1.2;
}
.tmpl-band__desc {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  font-style: italic;
  color: rgba(250, 246, 240, 0.7);
  line-height: 1.4;
}

/* ─── Site footer (slim) ──── */
.tmpl-site-footer {
  background: #2b2620;
  color: #f7f1e6;
  padding: 32px 64px;
  text-align: center;
}
.tmpl-site-footer__meta {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 239, 232, 0.4);
}
.tmpl-site-footer__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.tmpl-site-footer__link:hover { color: rgba(244, 239, 232, 0.7); }

/* Hero */
.cx-hero {
  text-align: center;
  padding: 96px 48px 64px;
}
.cx-hero__eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.36em;
  color: #B58463;
  margin-bottom: 24px;
  text-transform: uppercase;
}
.cx-hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 108px;
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0 0 32px;
  color: #2b2620;
}
.cx-hero__title em { font-style: italic; color: #5E6B55; }
.cx-hero__lede {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  line-height: 1.55;
  color: rgba(43,38,32,0.72);
  max-width: 640px;
  margin: 0 auto 56px;
}
.cx-hero__lede em { font-style: italic; color: #B58463; }

.cx-hero__how {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}
.cx-hero__step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(58,52,44,0.18);
}
.cx-hero__num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #B58463;
  font-weight: 500;
  margin-top: 2px;
}
.cx-hero__step strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-style: italic;
  font-size: 20px;
  color: #2b2620;
  margin-bottom: 4px;
}
.cx-hero__step span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: rgba(43,38,32,0.65);
  line-height: 1.4;
}

/* Collections section */
.cx-collections {
  padding: 88px 48px 96px;
  background: #2b2620;
  border-top: none;
  border-bottom: none;
}
.cx-collections__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}
.cx-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.36em;
  color: #B58463;
  text-transform: uppercase;
  display: block;
  margin-bottom: 18px;
}
.cx-collections .cx-eyebrow {
  color: #B58463;
}
.cx-collections__head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  margin: 0 0 22px;
  color: #f7f1e6;
}
.cx-collections__head h2 em { font-style: italic; color: #D9B89A; }
.cx-collections__head p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  line-height: 1.5;
  color: rgba(250,246,240,0.88);
  margin: 0;
}
.cx-collections__head p em { font-style: italic; color: #f7f1e6; }

.cx-collections__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
}

.cx-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 220ms cubic-bezier(.2,.7,.3,1);
}
.cx-card-link:hover { transform: translateY(-4px); }
.cx-card-link.is-disabled { cursor: default; pointer-events: none; opacity: 0.85; }

.cx-card {
  background: #fff;
  border: 1px solid rgba(43,38,32,0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow 220ms;
}
.cx-card-link:hover .cx-card {
  box-shadow:
    0 1px 0 rgba(43,38,32,0.06),
    0 18px 60px -12px rgba(43,38,32,0.18);
  border-color: rgba(43,38,32,0.18);
}
.cx-card.is-coming {
  background: #f9f4ea;
}

.cx-card__preview {
  position: relative;
  aspect-ratio: 3 / 4;
  /* Enable container queries so .mini-actual can size itself relative
     to this card's inline width. */
  container-type: inline-size;
  background: #fff;
  border-bottom: 1px solid rgba(43,38,32,0.08);
  overflow: hidden;
}
.cx-card.is-coming .cx-card__preview { background: #f5efe2; }

.cx-card__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: #2b2620;
  color: #f4ede2;
  padding: 5px 10px;
  border-radius: 999px;
}

.cx-card__meta {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.cx-card__no {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #B58463;
  text-transform: uppercase;
}
.cx-card__name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  margin: 8px 0 0;
  color: #2b2620;
}
.cx-card__descriptor {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: #5E6B55;
  margin-top: 4px;
}
.cx-card__desc {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(43,38,32,0.7);
  margin: 14px 0 0;
}
.cx-card__pieces {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(43,38,32,0.1);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(43,38,32,0.55);
  text-transform: uppercase;
}
.cx-card__cta {
  margin-top: 22px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #B58463;
}
.cx-card__cta--muted { color: rgba(43,38,32,0.4); }

/* ─────────── MINI sign previews on collection cards ───────────
   Each preview renders the actual collection WelcomeSign component at
   full design size (540×720), then scales it to fit the card via a
   container-query-driven CSS transform. Identical to the real sign. */
.mini-actual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  background: #fff;
}
.mini-actual > .sign {
  width: 540px;
  height: 720px;
  flex-shrink: 0;
  /* Container query unit cqw = 1% of preview container's inline size.
     scale() needs a <number>; calc(length / length) gives a unitless number. */
  transform: scale(calc(100cqw / 540px));
  transform-origin: center center;
  /* Drop the card shadow since the preview card already has its own framing */
  box-shadow: none !important;
}
.mini--loading {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: rgba(43,38,32,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}


/* FOOTER */
.cx-foot {
  padding: 80px 48px;
  text-align: center;
  background: #f4eee2;
}
.cx-foot__inner { max-width: 540px; margin: 0 auto; }
.cx-foot__eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.36em;
  color: #B58463;
  margin-bottom: 20px;
}
.cx-foot p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  line-height: 1.55;
  color: rgba(43,38,32,0.7);
  margin: 0 0 28px;
}
.cx-foot p a {
  color: #B58463;
  border-bottom: 1px solid #B58463;
  text-decoration: none;
  padding-bottom: 2px;
}
.cx-foot__sig {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: #2b2620;
}

/* ═══════════════════════════════════════════════════════════════
   PRINT — single-piece printing + hide chrome + kill browser headers
   + pin page size to exact sign dimensions
   ═══════════════════════════════════════════════════════════════ */
/* Generic @page rule kills browser-supplied URL/title/date headers by
   removing the margin space those headers would render in. */
@page {
  margin: 0;
}

/* Named pages — each piece sets which page rule it prints under.
   Sizes match the sign's CSS pixel box at 96dpi:
     540 × 720 = 5.625 × 7.5 in (the 18×24 aspect)
     400 × 500 = 4.167 × 5.208 in (the 8×10 aspect)
   Print shops can scale these to any larger size without cropping. */
@page poster {
  size: 5.625in 7.5in;
  margin: 0;
}
@page framed {
  size: 4.167in 5.208in;
  margin: 0;
}

.piece--poster { page: poster; }
.piece--framed { page: framed; }

@media print {
  /* Hide global chrome on any print */
  .col-nav, .col-header, .col-toolbar, .col-outro,
  .piece__label, .cx-nav, .cx-hero, .cx-collections, .cx-foot {
    display: none !important;
  }
  .col-page, .col-pieces {
    padding: 0 !important;
    background: #fff !important;
    gap: 0 !important;
  }
  .col-pieces { align-items: flex-start !important; }
  .col-pieces__solo, .col-pieces__row {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  .piece { margin: 0 !important; }
  .piece__board { box-shadow: none !important; }
  /* hide all edit affordances */
  .rm__x, .bar-item__x, .bar-menu__add,
  .memory-item__x, .memory-list__add { display: none !important; }
}

/* Reset-signs button in the collection toolbar */
.col-toolbar__reset {
  margin-left: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(43,38,32,0.6);
  background: transparent;
  border: 1px solid rgba(43,38,32,0.18);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 150ms;
}
.col-toolbar__reset:hover {
  color: #2b2620;
  border-color: #2b2620;
  background: rgba(43,38,32,0.04);
}

/* ═══════════════════════════════════════════════════════════
   HAMBURGER — hidden on desktop (must be before mobile block)
   ═══════════════════════════════════════════════════════════ */
.tmpl-nav__hamburger { display: none; }

/* ═══════════════════════════════════════════════════════════
   MOBILE — placed LAST so it overrides all base styles above
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Prevent horizontal overflow on the whole page */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* ── Nav ────────────────────────────────────────────────── */
  .tmpl-nav {
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    padding: 14px 20px;
  }
  .tmpl-nav__logo img { height: 48px; }
  .tmpl-nav__links { display: none !important; }
  .tmpl-band { display: none !important; }

  .tmpl-nav__hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    width: 40px;
    height: 40px;
  }
  .tmpl-nav__hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: #2b2620;
    border-radius: 1px;
  }

  /* ── Mobile nav overlay ─────────────────────────────────── */
  .tmpl-mobile-overlay {
    position: fixed;
    inset: 0;
    background: #f7f1e6;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    padding: 80px 32px 48px;
    overflow-y: auto;
  }
  .tmpl-mobile-overlay__close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    font-size: 32px;
    font-family: 'Cormorant Garamond', serif;
    color: #2b2620;
    cursor: pointer;
    line-height: 1;
    padding: 8px;
  }
  .tmpl-mobile-overlay__link {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 400;
    color: #2b2620;
    text-decoration: none;
    padding: 13px 0;
    border-bottom: 1px solid rgba(58,52,44,0.1);
  }
  .tmpl-mobile-overlay__cta { padding: 24px 0 8px; }
  .tmpl-mobile-overlay__btn {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 15px;
    font-style: italic;
    color: #f7f1e6;
    background: #3a342c;
    text-decoration: none;
    padding: 14px 28px;
    text-align: center;
  }
  .tmpl-mobile-overlay__group {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(58,52,44,0.1);
    margin-top: 4px;
    padding-top: 4px;
  }
  .tmpl-mobile-overlay__group-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #5E6B55;
    padding: 16px 0 8px;
    font-weight: 500;
  }
  .tmpl-mobile-overlay__sub {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 400;
    color: #2b2620;
    text-decoration: none;
    padding: 11px 0;
    border-bottom: 1px solid rgba(58,52,44,0.1);
  }

  /* ── Collections index page ─────────────────────────────── */
  .cx-hero { padding: 48px 24px 40px; }
  .cx-hero__title { font-size: clamp(48px, 13vw, 72px) !important; }
  .cx-hero__lede { font-size: 18px; margin-bottom: 40px; }
  .cx-hero__how { grid-template-columns: 1fr !important; gap: 20px; }
  .cx-collections { padding: 48px 20px 64px; }
  .cx-collections__head { margin-bottom: 40px; }
  .cx-collections__head h2 { font-size: 38px; }
  .cx-collections__head p { font-size: 16px; }
  .cx-collections__grid { grid-template-columns: 1fr !important; gap: 20px; }
  .cx-foot { padding: 48px 24px; }

  /* ── Collection shell page ──────────────────────────────── */
  .col-header { padding: 40px 24px 32px; }
  .col-header__title { font-size: clamp(44px, 11vw, 72px) !important; }
  .col-header__lede { font-size: 17px; }
  .col-toolbar { padding: 16px 20px; }
  .col-toolbar__row { flex-direction: column !important; align-items: flex-start; gap: 12px; }
  .col-toolbar__hint { font-size: 13px; }
  .col-toolbar__printtip { padding: 14px 20px; font-size: 13px; }
  .col-toolbar__reset { display: none !important; }
  .col-pieces { padding: 24px 16px 48px; }
  .col-pieces__solo { max-width: 100%; padding: 0; }
  .col-pieces__row { display: flex !important; flex-direction: column; gap: 32px; }

  /* Sign boards — scale to fit phone width */
  .piece { width: 100%; }
  .piece__board {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .piece__label { padding: 12px 4px 8px; }
  .piece__sizes { flex-direction: column !important; gap: 6px; margin-top: 10px; }
  .piece__size { flex-direction: column; align-items: flex-start !important; gap: 4px; }

  /* Site footer */
  .tmpl-site-footer { padding: 24px; }
  .tmpl-site-footer__meta { font-size: 9px; letter-spacing: 0.16em; }
}