/* ==========================================================================
   The Barbershop at Fairhaven — site styles
   Direction: Fairhaven's 1900s brick district. Deep hunter green, aged
   brass, warm cream, near-black ink. Display face is Fraunces (self-hosted
   variable woff2 — zero external font requests) for a letterpress feel;
   body text is Georgia. ONE loud moment: the barber-pole striped divider
   under the hero, used exactly once. Everything else stays calm.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Named palette tokens */
  --hunter:      #6B2029;  /* the shop's oxblood walls */
  --hunter-deep: #431018;  /* oxblood in shadow */
  --hunter-soft: #85303A;  /* raised oxblood surfaces */
  --brass:       #A8843C;  /* aged brass */
  --brass-bright:#C9A455;  /* polished brass highlight */
  --brass-deep:  #7C6128;  /* brass in shadow */
  --cream:       #F4EDDA;  /* warm cream ground */
  --paper:       #FBF6E9;  /* lighter paper surface */
  --pole-red:    #7E2D22;  /* oxblood red — the pole stripe, used once */
  --ink-black:   #17150F;  /* near-black ink */

  /* Semantic tokens (light scheme) */
  --bg: var(--cream);
  --surface: var(--paper);
  --surface-alt: #EEE5CE;
  --ink: #201C15;
  --ink-soft: #5D5546;
  --heading: #5C1A22;
  --accent: var(--brass);
  --accent-ink: #7A5E24;      /* brass-toned text on light grounds */
  --green-ink: #7C2530;       /* oxblood-toned text on light grounds */
  --danger: #8E3B2A;
  --danger-line: #C49E8E;
  --band: var(--hunter);
  --band-deep: var(--hunter-deep);
  --band-ink: var(--cream);
  --band-ink-soft: #C4BCA4;
  --line: #DCD2B6;
  --focus: #7A5E24;
  --shadow: 0 2px 12px rgba(23, 21, 15, 0.12);
  --shadow-press: 3px 3px 0 rgba(23, 21, 15, 0.30);
  --footer-bg: #2B0C12;

  --font-body: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A1013;
    --surface: #251519;
    --surface-alt: #301A20;
    --ink: #EDE6D3;
    --ink-soft: #B4AB94;
    --heading: #E9DFC4;
    --accent: #B8934A;
    --accent-ink: #D6B26A;
    --green-ink: #E0A0A4;
    --danger: #E09B85;
    --danger-line: #6E4536;
    --band: #4A141C;
    --band-deep: #300B12;
    --band-ink: var(--cream);
    --band-ink-soft: #AFA78F;
    --line: #45262C;
    --focus: #D6B26A;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    --shadow-press: 3px 3px 0 rgba(0, 0, 0, 0.55);
    --footer-bg: #1A070C;
  }
}

/* --------------------------------------------------------------- base */

* { box-sizing: border-box; }

/* The hidden attribute always wins, even over display rules on classes. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--heading);
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 900;
  letter-spacing: 0.005em;
}

h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 4vw, 2.25rem); }
h3 { font-size: 1.22rem; font-weight: 600; }

p { margin: 0 0 1em; }

a { color: var(--green-ink); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--band);
  color: var(--band-ink);
  padding: 0.6rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.wrap {
  width: min(70rem, 100% - 2.5rem);
  margin-inline: auto;
}

.section { padding: 3.5rem 0; }

.section-head { max-width: 36rem; margin-bottom: 2rem; }

.kicker {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.45rem;
}

/* --------------------------------------------------------------- header */

.site-header {
  background: var(--band);
  color: var(--band-ink);
  border-bottom: 3px solid var(--brass);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
  padding-block: 0.85rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--band-ink);
}

.brand svg { width: 1.5rem; height: 2.2rem; flex: none; }

.brand-name {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.site-nav { margin-left: auto; }

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.15rem;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--band-ink-soft);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  padding: 0.35rem 0.1rem;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--band-ink);
  border-bottom-color: var(--brass-bright);
}

/* --------------------------------------------------------------- banner */

.notice-banner {
  background: var(--brass);
  color: #1C1608;
  text-align: center;
  padding: 0.6rem 1rem;
  font-family: var(--font-ui);
  font-weight: 600;
}
.notice-banner[hidden] { display: none; }

/* --------------------------------------------------------------- hero */

/* The barber-chair photo runs full-bleed under a deep hunter wash.
   Phones: copy leads on the green ground, the photo is an edge-to-edge
   band at the foot. From 50rem up the photo fills the hero and the wash
   is near-solid over the copy column, opening onto the chair. */
.hero {
  position: relative;
  background:
    linear-gradient(160deg, #7C2731 0%, var(--hunter) 52%, var(--hunter-deep) 100%);
  color: var(--band-ink);
  padding: 3.5rem 0 0;
  overflow: hidden;
}

.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding-bottom: 2.5rem;
}

.hero-media {
  position: relative;
  height: clamp(15rem, 74vw, 24rem);
  margin: 0;
  overflow: hidden;
}
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
/* Oxblood atmospheric wash over the photo */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      var(--hunter),
      color-mix(in srgb, var(--hunter) 52%, transparent) 20%,
      transparent 48%),
    linear-gradient(to top,
      color-mix(in srgb, var(--hunter-deep) 85%, transparent),
      transparent 36%),
    color-mix(in srgb, var(--hunter) 26%, transparent);
}
/* Tiny corner credit — max-width so it can never clip at any viewport */
.hero-credit {
  position: absolute;
  z-index: 1;
  right: 1.1rem;
  bottom: 0.5rem;
  margin: 0;
  max-width: min(38ch, calc(100vw - 3rem));
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-align: right;
  color: #E3DCC6;
  text-shadow: 0 1px 3px rgba(7, 14, 10, 0.9);
}

@media (min-width: 50rem) {
  .hero { padding: 0; }
  .hero .wrap {
    grid-template-columns: none;
    align-content: center;
    min-height: min(72vh, 34rem);
    padding-block: 4.25rem;
  }
  .hero .wrap > div { max-width: 37rem; }
  .hero-media {
    position: absolute;
    inset: 0;
    height: auto;
  }
  .hero-media img { object-position: 68% 40%; }
  .hero-media::after {
    background:
      linear-gradient(97deg,
        color-mix(in srgb, var(--hunter) 96%, transparent) 0%,
        color-mix(in srgb, var(--hunter) 88%, transparent) 40%,
        color-mix(in srgb, var(--hunter) 42%, transparent) 62%,
        color-mix(in srgb, var(--hunter) 12%, transparent) 84%,
        color-mix(in srgb, var(--hunter-deep) 50%, transparent) 100%),
      linear-gradient(to top,
        color-mix(in srgb, var(--hunter-deep) 74%, transparent),
        transparent 28%),
      linear-gradient(to bottom,
        color-mix(in srgb, var(--hunter) 52%, transparent),
        transparent 22%);
  }
  .hero-credit { right: 1.5rem; bottom: 0.75rem; }
}

.hero h1 {
  color: var(--cream);
  margin-bottom: 0.4em;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: var(--brass-bright);
}

.hero-kicker {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin: 0 0 0.7rem;
}

.hero .tagline {
  font-size: 1.12rem;
  color: #D8D1BB;
  max-width: 32rem;
  margin-bottom: 1.4rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.hero-facts {
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--band-ink-soft);
  font-family: var(--font-ui);
  font-size: 0.93rem;
}
.hero-facts li { margin-bottom: 0.3rem; }
.hero-facts strong { color: var(--cream); }
.hero-facts a { color: var(--cream); }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  font-size: 1rem;
  cursor: pointer;
}

/* Primary: solid aged brass, hand-cut offset shadow, press states */
.btn-primary {
  background: linear-gradient(180deg, var(--brass-bright), var(--brass) 55%);
  color: #201806;
  border-color: var(--brass-deep);
  box-shadow: var(--shadow-press);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: linear-gradient(180deg, #D8B662, var(--brass-bright) 60%);
}
.btn-primary:active {
  background: var(--brass-deep);
  color: var(--cream);
  box-shadow: none;
  transform: translate(2px, 2px);
}

/* Secondary: still a real surface — cream fill, green ink, its own shadow */
.btn-secondary {
  background: var(--cream);
  color: #1B3B2E;
  border-color: var(--brass);
  box-shadow: 2px 2px 0 rgba(23, 21, 15, 0.24);
}
.btn-secondary:hover,
.btn-secondary:focus-visible { background: #FFFDF2; border-color: var(--brass-bright); }
.btn-secondary:active { transform: translate(1px, 1px); box-shadow: none; }

/* ================================================================
   THE one loud moment: the barber-pole divider. Angled oxblood /
   cream / hunter stripes between two brass rails, directly under
   the hero — and nowhere else on the page.
   ================================================================ */
.pole-divider {
  height: 26px;
  background: repeating-linear-gradient(
    115deg,
    var(--pole-red) 0 22px,
    #F1E8D2 22px 44px,
    #24313F 44px 66px,
    #F1E8D2 66px 88px
  );
  border-top: 4px solid var(--brass);
  border-bottom: 4px solid var(--brass);
  box-shadow: inset 0 3px 6px rgba(23, 21, 15, 0.35), inset 0 -3px 6px rgba(23, 21, 15, 0.35);
}

/* --------------------------------------------------------------- story */

.story { background: var(--bg); }

.story .wrap {
  display: grid;
  gap: 2.25rem;
  align-items: center;
}

@media (min-width: 50rem) {
  .story .wrap { grid-template-columns: 1.25fr 1fr; }
}

.story blockquote {
  margin: 1.4rem 0 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--brass);
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 1.12rem;
  color: var(--green-ink);
}
.story blockquote footer {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.4rem;
}

.story-figure { margin: 0; }
.story-figure img {
  width: 100%;
  height: min(26rem, 70vw);
  object-fit: cover;
  border-radius: 10px;
  border: 3px solid var(--surface-alt);
  outline: 1px solid var(--line);
  box-shadow: 6px 6px 0 rgba(23, 21, 15, 0.16);
}
.story-figure figcaption {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.6rem;
}

/* The one press nod on the page: a small brass-ruled line under the quote. */
.press-nod {
  display: inline-block;
  margin-top: 0.9rem;
  padding-top: 0.45rem;
  border-top: 2px solid var(--brass);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- services */

.services {
  background:
    linear-gradient(165deg, #7A2530 0%, var(--hunter) 55%, var(--hunter-deep) 100%);
  color: var(--band-ink);
}

.services .section-head h2 { color: var(--cream); }
.services .section-head p { color: var(--band-ink-soft); }
.services .kicker { color: var(--brass-bright); }

/* The price board: one cream letterpress card on the green band,
   double-ruled like an old shop price list. */
.price-board {
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--brass);
  outline: 6px solid transparent;
  box-shadow:
    0 0 0 6px var(--surface),
    0 0 0 8px var(--brass-deep),
    10px 12px 0 rgba(7, 17, 12, 0.4);
  border-radius: 3px;
  padding: 2rem clamp(1.25rem, 4vw, 2.75rem) 1.6rem;
  max-width: 46rem;
  margin-inline: auto;
}

.price-board-title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.45rem;
  color: var(--heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.25rem;
}

.price-board-sub {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-bottom: 3px double var(--brass);
  padding-bottom: 0.9rem;
  margin: 0 0 0.5rem;
}

.price-board ul { list-style: none; margin: 0; padding: 0; }

.service-item {
  padding: 0.95rem 0;
  border-bottom: 1px dashed var(--line);
}
.service-item:last-child { border-bottom: 0; }

.service-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.service-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--heading);
}

.service-leader {
  flex: 1 1 1rem;
  min-width: 1rem;
  border-bottom: 2px dotted color-mix(in srgb, var(--brass) 55%, transparent);
  transform: translateY(-0.32em);
}

/* Each dotted leader runs out to a small brass diamond — no price hedging
   in the rows; the board footer says where prices live. */
.service-glyph {
  font-size: 0.7rem;
  line-height: 1;
  color: var(--brass);
  transform: translateY(-0.12em);
}

.service-desc {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0.25rem 0 0;
  max-width: 40rem;
}

.price-board-note {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--ink-soft);
  border-top: 3px double var(--brass);
  padding-top: 0.85rem;
  margin: 0.6rem 0 0;
  text-align: center;
}

/* --------------------------------------------------------------- gallery */

.gallery { background: var(--surface); border-block: 1px solid var(--line); }

.gallery-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

/* The barber-pole photo leads at double width, so three photos land as
   two full rows (the lead, then a pair) with no orphan at any width. */
@media (min-width: 34rem) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid figure:first-child { grid-column: span 2; }
}

.gallery-grid figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: var(--surface-alt);
  box-shadow: var(--shadow);
  min-height: 15rem;
}

@media (min-width: 54rem) {
  .gallery-grid figure { min-height: 17rem; }
}

.gallery-grid img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-grid figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(38, 10, 15, 0.88), rgba(38, 10, 15, 0.55) 70%, transparent);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  padding: 1.1rem 0.85rem 0.5rem;
}

/* JS upgrades each figure into a lightbox button */
.gallery-grid button.gallery-zoom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  cursor: zoom-in;
}

.gallery-note {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 1.25rem;
}

/* Lightbox */
dialog.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(64rem, 94vw);
  width: auto;
}
dialog.lightbox::backdrop { background: rgba(9, 18, 13, 0.88); }
.lightbox figure { margin: 0; }
.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  margin-inline: auto;
  border-radius: 8px;
  border: 3px solid var(--brass);
}
.lightbox figcaption {
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  text-align: center;
  padding: 0.6rem 0.5rem 0;
}
.lightbox-close {
  position: absolute;
  top: -0.4rem;
  right: 0;
  transform: translateY(-100%);
  background: var(--cream);
  color: var(--ink-black);
  border: 2px solid var(--brass);
  border-radius: 999px;
  font: 700 1rem var(--font-ui);
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}
.lightbox-close:hover { background: #FFFDF2; }
.lightbox-close:active { transform: translateY(-100%) translate(1px, 1px); box-shadow: none; }

/* --------------------------------------------------------------- visit */

.visit { background: var(--bg); }

.info-grid { display: grid; gap: 1.75rem; }

@media (min-width: 50rem) {
  .info-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.info-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-top: 6px solid var(--brass);
  border-radius: 10px;
  padding: 1.75rem;
  box-shadow: 5px 5px 0 rgba(23, 21, 15, 0.13);
}

.today-chip {
  display: inline-block;
  background: color-mix(in srgb, var(--brass) 18%, var(--surface));
  border: 1px solid var(--brass);
  color: var(--accent-ink);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.28rem 0.9rem;
  margin-bottom: 0.9rem;
}
.today-chip[hidden] { display: none; }

.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 0.95rem;
}

.hours-table td {
  padding: 0.38rem 0;
  border-bottom: 1px dashed var(--line);
}
.hours-table tr:last-child td { border-bottom: 0; }
.hours-table td:last-child { text-align: right; color: var(--ink-soft); }
.hours-table tr.is-today td { color: var(--accent-ink); font-weight: 700; }

.hours-footnote {
  font-family: var(--font-ui);
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin: 0.85rem 0 0;
}

address { font-style: normal; line-height: 1.75; }

.find-tip {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brass) 20%, transparent), transparent);
  border-left: 3px solid var(--brass);
  border-radius: 4px;
  font-size: 0.95rem;
}

.phone-link { font-weight: 700; white-space: nowrap; }

.web-links {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.web-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 0.45rem 1rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 2px 2px 0 rgba(23, 21, 15, 0.14);
}
.web-links a:hover,
.web-links a:focus-visible { border-color: var(--brass); background: var(--surface-alt); }
.web-links a:active { transform: translate(1px, 1px); box-shadow: none; }
.web-links svg { width: 1rem; height: 1rem; fill: var(--accent-ink); }

/* --------------------------------------------------------------- booking */

.booking-section {
  background:
    linear-gradient(200deg, #7A2530 0%, var(--hunter) 50%, var(--hunter-deep) 100%);
  color: var(--band-ink);
}

.booking-section .section-head h2 { color: var(--cream); }
.booking-section .section-head p { color: var(--band-ink-soft); }
.booking-section .section-head a { color: var(--cream); }
.booking-section .kicker { color: var(--brass-bright); }

.booking-layout { display: grid; gap: 2.25rem; }

@media (min-width: 54rem) {
  .booking-layout { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

form.booking {
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--brass);
  border-radius: 10px;
  padding: 1.75rem;
  box-shadow: 8px 10px 0 rgba(7, 17, 12, 0.4);
}

.field { margin-bottom: 1.05rem; }

.field label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
  color: var(--heading);
}

.field .hint {
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="number"],
.field input[type="password"],
.field input[type="url"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.62rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--ink-soft) 55%, var(--line));
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-family: var(--font-ui);
}

.field textarea { min-height: 5rem; resize: vertical; }

.field [aria-invalid="true"] { border-color: var(--danger); }

.field-err {
  font-family: var(--font-ui);
  color: var(--danger);
  font-size: 0.82rem;
  margin: 0.25rem 0 0;
}

.field-row { display: grid; gap: 0 0.9rem; }
@media (min-width: 34rem) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.form-status {
  font-family: var(--font-ui);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.form-status[hidden] { display: none; }
.form-status.ok {
  background: color-mix(in srgb, var(--green-ink) 14%, var(--surface));
  border: 1px solid var(--green-ink);
  color: var(--green-ink);
}
.form-status.err {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  border: 1px solid var(--danger);
  color: var(--danger);
}

.form-note {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0.9rem 0 0;
}

.booking-aside h3 { color: var(--cream); }
.booking-aside p { color: var(--band-ink-soft); font-size: 0.98rem; }
.booking-aside a { color: var(--cream); }

.booking-aside .aside-card {
  background: color-mix(in srgb, var(--hunter-deep) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
  border-radius: 10px;
  padding: 1.4rem 1.5rem;
}
.booking-aside .aside-card + .aside-card { margin-top: 1.1rem; }
.booking-aside .aside-card p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- footer */

.site-footer {
  background: var(--footer-bg);
  color: #A9A28C;
  padding: 2.5rem 0;
  border-top: 3px solid var(--brass);
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

.site-footer a { color: var(--cream); }
.site-footer .wrap { display: grid; gap: 0.6rem; }
.site-footer .footer-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--cream);
}

/* --------------------------------------------------------------- sticky action bar (mobile) */

.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  background: color-mix(in srgb, var(--hunter-deep) 96%, transparent);
  border-top: 2px solid var(--brass);
  padding: 0.6rem max(0.75rem, env(safe-area-inset-left)) calc(0.6rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(7, 17, 12, 0.4);
}
.action-bar .btn { padding: 0.55rem 1rem; font-size: 0.92rem; }
.action-bar-inner {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
}
.action-bar-close {
  background: transparent;
  border: 0;
  color: var(--band-ink-soft);
  font: 700 1.15rem var(--font-ui);
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  line-height: 1;
}
.action-bar-close:hover { color: var(--cream); }

@media (max-width: 46rem) {
  .action-bar.is-visible { display: block; }
  body.has-action-bar { padding-bottom: 4.25rem; }
}

/* --------------------------------------------------------------- scroll reveals */

/* Only when JS is running AND motion is welcome; content is fully
   visible without JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 480ms ease, transform 480ms ease;
  }
  html.js .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Admin dashboard
   ========================================================================== */

.admin-body { background: var(--bg); min-height: 100vh; font-family: var(--font-ui); }
.admin-body h1, .admin-body h2, .admin-body h3 { font-family: var(--font-display); }

.admin-header {
  background: var(--band);
  color: var(--band-ink);
  padding: 0.85rem 0;
  border-bottom: 3px solid var(--brass);
}

.admin-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.admin-header .brand-name { font-size: 1.1rem; }

.admin-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: var(--band-ink-soft);
}

.mode-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--brass);
  color: #1C1608;
}

.admin-main { padding: 1.5rem 0 4rem; }

.admin-title { font-size: 1.5rem; margin: 0 0 1.25rem; }

.card-title { margin: 0 0 0.75rem; font-size: 1.18rem; }
.admin-toolbar .card-title { margin-bottom: 0; }

.admin-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.25rem;
}

.admin-notice {
  border-left: 4px solid var(--brass);
  background: linear-gradient(90deg, color-mix(in srgb, var(--brass) 14%, transparent), transparent);
  padding: 0.9rem 1.1rem;
  border-radius: 4px;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}

.tabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 2px solid var(--line);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.tab-btn {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 0.6rem 1rem;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}

.tab-btn:hover { color: var(--ink); border-bottom-color: var(--brass-bright); }
.tab-btn[aria-selected="true"] {
  color: var(--accent-ink);
  border-bottom-color: var(--brass);
}

.tab-panel[hidden] { display: none; }

.field-hint { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.25rem; }

.check-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.admin-item-list { list-style: none; margin: 0; padding: 0; }

.admin-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--line);
}
.admin-item:last-child { border-bottom: 0; }

.admin-item .ai-thumb {
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  flex: none;
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  color: var(--ink-soft);
  overflow: hidden;
}
.admin-item .ai-thumb img { width: 100%; height: 100%; object-fit: cover; }

.admin-item .ai-meta { flex: 1 1 12rem; min-width: 0; }
.admin-item .ai-name { font-weight: 700; }
.admin-item .ai-sub { font-size: 0.82rem; color: var(--ink-soft); }
.admin-item .ai-notes {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.2rem;
  overflow-wrap: anywhere;
}

.admin-item .ai-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.status-select {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.status-flag {
  display: inline-block;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.12rem 0.6rem;
  background: var(--surface-alt);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.status-flag.is-new {
  background: color-mix(in srgb, var(--brass) 25%, var(--surface));
  border-color: var(--brass);
  color: var(--accent-ink);
}

.btn-small {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  border: 2px solid var(--brass-deep);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(23, 21, 15, 0.18);
  display: inline-block;
  text-decoration: none;
}
.btn-small:hover,
.btn-small:focus-visible { border-color: var(--brass); background: var(--surface-alt); }
.btn-small:active { transform: translate(1px, 1px); box-shadow: none; }

.btn-danger { color: var(--danger); border-color: var(--danger-line); }

.btn-solid {
  background: var(--band);
  color: var(--band-ink);
  border-color: var(--band-deep);
}
.btn-solid:hover,
.btn-solid:focus-visible { background: var(--hunter-soft); border-color: var(--band); }
.btn-solid:active { background: var(--band-deep); }

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1rem;
}

.save-status {
  font-size: 0.85rem;
  color: var(--ink-soft);
  min-height: 1.2em;
}

.login-card {
  max-width: 26rem;
  margin: 3rem auto;
  text-align: center;
}

dialog.item-editor {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  width: min(34rem, calc(100% - 2rem));
  padding: 1.5rem;
  box-shadow: var(--shadow);
  font-family: var(--font-ui);
}
dialog.item-editor::backdrop { background: rgba(9, 18, 13, 0.65); }

.photo-preview {
  width: 100%;
  max-width: 14rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
  min-height: 6rem;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  font-size: 0.8rem;
  overflow: hidden;
}
.photo-preview img { width: 100%; height: auto; }

.link-fetch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.link-fetch-row input[type="url"] { flex: 1 1 12rem; min-width: 0; }
.link-fetch-row .btn-small { flex: none; }

/* --------------------------------------------------------------- privacy */

.prose { max-width: 44rem; }
.prose h2 { margin-top: 2rem; font-size: 1.35rem; }

/* --------------------------------------------------------------- misc */

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

/* Motion is opt-in only */
@media (prefers-reduced-motion: no-preference) {
  .btn,
  .btn-small,
  .tab-btn,
  .site-nav a,
  .web-links a {
    transition: background-color 140ms ease, color 140ms ease,
                border-color 140ms ease, box-shadow 140ms ease,
                transform 140ms ease;
  }
  .info-card,
  .gallery-grid figure { transition: border-color 160ms ease, box-shadow 160ms ease; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------- barbers */

.barbers { background: var(--surface); }

.barber-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .barber-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .barber-grid { grid-template-columns: repeat(4, 1fr); } }

.barber-card {
  background: var(--bg);
  border: 2px solid var(--line);
  border-top: 6px solid var(--brass);
  border-radius: 12px;
  padding: 1.35rem 1.35rem 1.1rem;
  box-shadow: 4px 4px 0 rgba(23, 21, 15, 0.13);
}

.barber-card h3 {
  margin: 0 0 0.15rem;
  font-size: 1.16rem;
  color: var(--heading);
}

.barber-role {
  margin: 0 0 0.7rem;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.barber-card p:last-child {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* the dogs get the oxblood card — the shop's own running joke */
.barber-card--dogs {
  background: var(--band);
  border-color: var(--band-deep);
  border-top-color: var(--brass-bright);
}
.barber-card--dogs h3 { color: var(--cream); }
.barber-card--dogs .barber-role { color: var(--brass-bright); }
.barber-card--dogs p:last-child { color: var(--band-ink-soft); }

/* ==========================================================================
   Appointment calendar — public
   A month grid of the shop's published open times, sat above the request
   form as its own letterpress card. Days with open times are real, raised
   brass tiles (filled, offset shadow, focusable, aria-pressed via the day
   buttons below); days with nothing on offer stay flat parchment and are
   disabled, not fake-clickable. Tapping a day lists its times as chunky
   buttons; tapping a time reveals the short request form.
   ========================================================================== */

.cal-card {
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--brass);
  border-radius: 10px;
  padding: clamp(1.1rem, .8rem + 1.3vw, 1.6rem);
  box-shadow: 8px 10px 0 rgba(7, 17, 12, 0.4);
  margin-bottom: 1.75rem;
}

.cal-intro h3 { margin-bottom: .3rem; }
.cal-preview-flag {
  display: inline-block;
  vertical-align: middle;
  margin-left: .4rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brass) 20%, var(--surface));
  border: 1px solid var(--brass);
  color: var(--accent-ink);
  font-family: var(--font-ui);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cal-lede {
  font-family: var(--font-ui);
  font-size: .88rem;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: 1.1rem;
}

.cal-layout { display: grid; gap: 1.4rem; }
@media (min-width: 56rem) {
  .cal-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 2rem;
    align-items: start;
  }
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .7rem;
}
.cal-month {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--heading);
  text-align: center;
}
.cal-nav-btn {
  font: inherit;
  min-width: 2.6rem;
  min-height: 2.6rem;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  border-radius: 8px;
  border: 2px solid var(--brass-deep);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(23, 21, 15, 0.18);
}
.cal-nav-btn:hover,
.cal-nav-btn:focus-visible { border-color: var(--brass); background: var(--surface-alt); }
.cal-nav-btn:active { transform: translate(1px, 1px); box-shadow: none; }
.cal-nav-btn[disabled] {
  opacity: .4;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}

/* role=grid → role=row → role=gridcell; each row is its own 7-column grid
   so the ARIA structure and the visual structure are the same thing. */
.cal-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .4rem;
  margin-bottom: .4rem;
}
.cal-cell { min-width: 0; }
.cal-dow {
  display: block;
  text-align: center;
  padding-block: .3rem;
  font-family: var(--font-ui);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Ordinary / inert days: flat parchment, no shadow, disabled — never read
   as clickable. Days with open times: a real raised brass tile, the same
   filled-button language as the rest of the site. */
.cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  width: 100%;
  min-height: 3rem;
  padding: .35rem .15rem;
  background: var(--surface-alt);
  border: 2px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-family: var(--font-ui);
  font-size: .85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  cursor: default;
}
.cal-day[disabled] { opacity: .55; }
.cal-day--open {
  background: linear-gradient(180deg, var(--brass-bright), var(--brass) 60%);
  border-color: var(--brass-deep);
  color: #201806;
  box-shadow: var(--shadow-press);
  cursor: pointer;
}
.cal-day--open:hover,
.cal-day--open:focus-visible {
  background: linear-gradient(180deg, #D8B662, var(--brass-bright) 60%);
}
.cal-day--open:active {
  background: var(--brass-deep);
  color: var(--cream);
  box-shadow: none;
  transform: translate(2px, 2px);
}
.cal-day--today {
  border-color: var(--green-ink);
}
.cal-day--selected,
.cal-day--selected:hover {
  background: var(--band);
  border-color: var(--band-deep);
  color: var(--band-ink);
  box-shadow: none;
  transform: none;
}
.cal-day__num { line-height: 1; }
.cal-day__count {
  min-width: 1.1rem;
  padding: 0 .32rem;
  border-radius: 999px;
  background: var(--band);
  color: var(--band-ink);
  font-size: .64rem;
  font-weight: 700;
  line-height: 1.5;
}
.cal-day--selected .cal-day__count { background: var(--brass-bright); color: #201806; }

.cal-key {
  position: relative;
  margin: .5rem 0 0;
  padding-left: 1.3rem;
  font-family: var(--font-ui);
  font-size: .78rem;
  color: var(--ink-soft);
}
.cal-key__swatch {
  position: absolute;
  left: 0;
  top: .15em;
  width: .9rem;
  height: .9rem;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--brass-bright), var(--brass) 60%);
  border: 1px solid var(--brass-deep);
}

.cal-day-title { margin-bottom: .55rem; font-size: 1.05rem; }
.cal-day-hint {
  font-family: var(--font-ui);
  font-size: .85rem;
  color: var(--ink-soft);
  max-width: 42ch;
}

.slot-list { display: flex; flex-wrap: wrap; gap: .55rem; }
.slot-btn {
  flex: 1 1 auto;
  min-width: 6.6rem;
  min-height: 2.9rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .5rem .9rem;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--brass-deep);
  border-radius: 8px;
  box-shadow: 2px 2px 0 rgba(23, 21, 15, 0.2);
  font: inherit;
  font-family: var(--font-ui);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.slot-btn:hover,
.slot-btn:focus-visible { border-color: var(--brass); background: var(--surface-alt); }
.slot-btn:active { transform: translate(1px, 1px); box-shadow: none; }
.slot-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--brass-bright), var(--brass) 60%);
  color: #201806;
  border-color: var(--brass-deep);
  box-shadow: var(--shadow-press);
}
.slot-btn__barber {
  display: block;
  font-weight: 400;
  font-size: .72rem;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  margin-top: .15rem;
}

/* The picked slot, shown read-only at the top of the request form. */
.slot-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  margin-bottom: 1.05rem;
  padding: .8rem .95rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brass);
  border-radius: 6px;
}
.slot-choice__text { display: flex; flex-direction: column; gap: .1rem; }
.slot-choice__label {
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.slot-choice__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--heading);
}
.slot-choice__note {
  font-family: var(--font-ui);
  font-size: .78rem;
  color: var(--ink-soft);
}
.slot-choice__actions { display: flex; gap: .45rem; }

/* ==========================================================================
   Appointment calendar — admin
   The dashboard's Calendar tab reuses every .cal-* class above; these
   pieces are admin-only: open/booked count badges on each day, the day
   editor's existing-slot rows, and the tick-box time grid used to publish
   several times at once.
   ========================================================================== */

.admin-cal .cal-day { min-height: 3.4rem; }

.acal-badges {
  display: flex;
  align-items: center;
  gap: .22rem;
  max-width: 100%;
}
.acal-badge {
  padding: 0 .3rem;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.acal-badge--open { background: var(--band); color: var(--band-ink); }
.cal-day--selected .acal-badge--open { background: var(--brass-bright); color: #201806; }
.acal-badge--booked {
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

.day-editor {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 2px dashed var(--line);
}
.day-editor h3 { margin-bottom: .2rem; }

.slot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .55rem .1rem;
  border-bottom: 1px dashed var(--line);
}
.slot-row:last-child { border-bottom: 0; }
.slot-row__time {
  flex: 1 1 auto;
  min-width: 5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--heading);
}
.slot-row__barber {
  font-family: var(--font-ui);
  font-size: .78rem;
  color: var(--ink-soft);
}
.status-pill {
  display: inline-block;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .12rem .6rem;
}
.status-pill--open { background: color-mix(in srgb, var(--brass) 25%, var(--surface)); color: var(--accent-ink); border: 1px solid var(--brass); }
.status-pill--booked,
.status-pill--accepted { background: var(--band); color: var(--band-ink); }

.time-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
  gap: .5rem;
  margin: .6rem 0 1rem;
}
.time-check {
  position: relative;
}
.time-check input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.time-check span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: .35rem .3rem;
  background: var(--surface);
  border: 2px solid var(--brass-deep);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  box-shadow: 2px 2px 0 rgba(23, 21, 15, 0.18);
}
.time-check input:checked + span {
  background: linear-gradient(180deg, var(--brass-bright), var(--brass) 60%);
  color: #201806;
  box-shadow: var(--shadow-press);
}
.time-check input:disabled + span {
  background: var(--surface-alt);
  color: var(--ink-soft);
  border-color: var(--line);
  box-shadow: none;
  cursor: default;
}
.time-check input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.row-card__slot {
  display: inline-block;
  margin: .3rem 0 0;
  padding: .18rem .65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brass) 20%, var(--surface));
  border: 1px solid var(--brass);
  color: var(--accent-ink);
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 700;
}