/* Light world: an 1800s barber shop. Applied when data-theme="barber".
   Engraved paper, gilt sign-painting, oxblood leather, brass. Tokens from DESIGN.md section 2.
   Fonts name the planned OFL families first (DESIGN.md section 5); until they are bundled in assets/fonts/
   the system engraved and old-style faces carry the look. Nothing is loaded from a CDN. */

[data-theme="barber"] {
  --paper: #ead9b5;
  --paper-hi: #f4e8cc;
  --paper-lo: #d3be92;
  --ink: #1e1812;
  --ink-soft: #4a3d2e;
  --wood: #1b1410;
  --wood-mid: #3a2616;
  --mahogany: #5a2a1a;
  --oxblood: #7a1f22;
  --oxblood-hi: #9a2c2e;
  --brass: #b58a3c;
  --gilt: #d9b35a;
  --pole-red: #b3262b;
  --pole-blue: #27406e;
  --pole-white: #f2ebdd;

  --page-bg: var(--paper);
  --header-bg: var(--paper-hi);
  --hero-bg: var(--wood);
  --hero-scrim: rgba(27, 20, 16, 0.94);
  --banner-scrim-end: rgba(27, 20, 16, 0.55);
  --footer-bg: var(--wood);
  --footer-text: var(--paper-hi);
  --footer-heading: var(--gilt);
  --footer-link: #ecd089;
  --text: var(--ink);
  --heading: var(--ink);
  --nav-link: var(--ink);
  --link: var(--oxblood);
  --link-hover: #5a1414;
  --rule: #5a1414;
  --focus: #1f3f7a;
  --focus-halo: #f4e8cc;
  --skip-bg: var(--oxblood);
  --skip-fg: var(--paper-hi);
  --toggle-bg: #f8f0dc;
  --toggle-fg: #5a1414;
  --toggle-hover: #e9dcbc;

  --heading-font: "Rye", "Playfair Display SC", "Copperplate", "Copperplate Gothic Bold", "Didot", Georgia, serif;
  --label-font: "IM Fell English SC", "Copperplate", "Copperplate Gothic Light", "Hoefler Text", Georgia, serif;
  --body-font: "IM Fell English", "Cormorant Garamond", "Hoefler Text", "Baskerville", "Iowan Old Style", Georgia, serif;
}

/* ---- Header: cream paper strip, gilt double rule, cartouche wordmark ---- */
[data-theme="barber"] .site-header {
  border-bottom: 3px double var(--rule);
  box-shadow: 0 1px 0 var(--brass), 0 6px 14px rgba(30, 24, 18, 0.18);
}

[data-theme="barber"] .site-name {
  min-width: 14rem;
  padding: 0.6rem 2rem 0.5rem;
  color: var(--ink);
}

@media (min-width: 68.75em) and (max-width: 79.9375em) {
  [data-theme="barber"] .site-name {
    min-width: 12rem;
    padding: 0.6rem 1.5rem 0.5rem;
  }
}

[data-theme="barber"] .brand-main {
  font-size: 1.85rem;
  letter-spacing: 0.04em;
}

[data-theme="barber"] .brand-sub {
  margin-top: 0.15rem;
  color: var(--oxblood);
}

[data-theme="barber"] .plaque {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--ink-soft);
  outline: 1px solid var(--ink-soft);
  outline-offset: 2px;
  color: var(--ink-soft);
  text-align: center;
}

/* The left plaque repeats the hero headline and crowds the brand; the barber header keeps wordmark, menu and lamp only. */
:root[data-theme="barber"] .plaque-left {
  display: none;
}

[data-theme="barber"] .plaque-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 0;
  outline: 0;
  white-space: nowrap;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}

@media (min-width: 80em) {
  [data-theme="barber"] .site-nav {
    font-size: 1.15rem;
    gap: clamp(0.25rem, 0.7vw, 0.6rem);
  }

  [data-theme="barber"] .site-nav a {
    padding: 0.4rem 0.65rem;
  }
}

/* The lamp hint needs the wide header; below that the lamp alone stays. */
@media (max-width: 89.9375em) {
  :root[data-theme="barber"] .plaque-right {
    display: none;
  }
}

[data-theme="barber"] .header-inner {
  min-height: 96px;
}

/* Gilt underline draws left to right; the current page carries an oxblood lozenge. */
[data-theme="barber"] .site-nav a::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.1rem;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease;
}

[data-theme="barber"] .site-nav a:hover::after,
[data-theme="barber"] .site-nav a:focus-visible::after {
  transform: scaleX(1);
}

[data-theme="barber"] .site-nav a[aria-current="page"] {
  color: var(--oxblood);
}

[data-theme="barber"] .site-nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.45rem;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--oxblood);
  transform: rotate(45deg);
}

/* ---- Buttons ---- */
[data-theme="barber"] .btn {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

[data-theme="barber"] .btn-primary {
  background: var(--oxblood);
  color: var(--paper-hi);
  border-color: var(--gilt);
  box-shadow: inset 0 0 0 2px var(--oxblood), inset 0 0 0 3px rgba(217, 179, 90, 0.6);
}

[data-theme="barber"] .btn-primary:hover,
[data-theme="barber"] .btn-primary:focus-visible {
  background: var(--oxblood-hi);
  color: #fff8e8;
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 2px var(--oxblood-hi), inset 0 0 12px rgba(243, 217, 139, 0.45), 0 3px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="barber"] .btn:active {
  transform: translateY(1px);
}

[data-theme="barber"] .btn-ghost {
  background: transparent;
  color: var(--oxblood);
  border-color: var(--oxblood);
  box-shadow: inset 0 0 0 1px var(--paper-hi), inset 0 0 0 2px rgba(122, 31, 34, 0.35);
}

[data-theme="barber"] .btn-ghost:hover,
[data-theme="barber"] .btn-ghost:focus-visible {
  background: var(--oxblood);
  color: var(--paper-hi);
  transform: translateY(-1px);
}

[data-theme="barber"] .btn-soon {
  color: var(--ink-soft);
  border-color: var(--ink-soft);
  background: transparent;
}

/* ---- Hero: gilt on wood ---- */
[data-theme="barber"] .hero,
[data-theme="barber"] .page-banner {
  color: var(--paper-hi);
  border-bottom: 6px solid var(--wood-mid);
  box-shadow: inset 0 -2px 0 var(--brass);
}

[data-theme="barber"] .hero h1,
[data-theme="barber"] .page-banner h1 {
  color: var(--gilt);
  letter-spacing: 0.03em;
  text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.55);
}

/* Gilt lettering: gradient clipped to the text where supported, solid gilt otherwise. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  [data-theme="barber"] .hero h1 span,
  [data-theme="barber"] .page-banner h1 span {
    /* Block, so the clipped gradient covers the second (em) line too. */
    display: block;
    background: linear-gradient(180deg, #f3d98b 0%, #d9b35a 50%, #a77a2a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.6));
  }
}

[data-theme="barber"] .hero .eyebrow,
[data-theme="barber"] .page-banner .eyebrow {
  color: #e9cf8e;
}

[data-theme="barber"] .eyebrow span::before,
[data-theme="barber"] .eyebrow span::after {
  content: "\2766";
  content: "\2766" / "";
  margin: 0 0.6em;
  color: var(--brass);
  letter-spacing: 0;
}

[data-theme="barber"] .hero-flourish {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #e9cf8e;
}

[data-theme="barber"] .hero-flourish::before,
[data-theme="barber"] .hero-flourish::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--brass);
}

/* ---- Sections on paper ---- */
[data-theme="barber"] .section-head {
  text-align: center;
}

[data-theme="barber"] .section-head h2 {
  letter-spacing: 0.04em;
}

[data-theme="barber"] .section-sub {
  color: var(--ink-soft);
}

/* ---- Cards: hanging shop signs on a brass rail ---- */
[data-theme="barber"] .card-hang {
  position: relative;
  height: 44px;
  background:
    repeating-linear-gradient(180deg, var(--brass) 0 5px, transparent 5px 8px) 24% 10px / 3px calc(100% - 10px) no-repeat,
    repeating-linear-gradient(180deg, var(--brass) 0 5px, transparent 5px 8px) 76% 10px / 3px calc(100% - 10px) no-repeat;
}

[data-theme="barber"] .card-hang::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--gap) / -2);
  right: calc(var(--gap) / -2);
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, #f3d98b, #b58a3c 55%, #6a4a18);
  box-shadow: 0 2px 3px rgba(30, 24, 18, 0.35);
}

/* One card per row (the board stacks at 1099px): the rail must not reach into the page gutter and add sideways scroll. */
@media (max-width: 68.6875em) {
  [data-theme="barber"] .board .card-hang::before {
    left: 0;
    right: 0;
  }
}

@media (max-width: 37.4375em) {
  [data-theme="barber"] .card-hang::before {
    left: 0;
    right: 0;
  }
}

[data-theme="barber"] .card-sign {
  border: 2px solid var(--wood-mid);
  background-color: var(--paper-hi);
  box-shadow:
    inset 0 0 0 5px var(--paper-hi),
    inset 0 0 0 6px var(--brass),
    0 10px 18px rgba(30, 24, 18, 0.22);
  text-align: center;
  transform-origin: 50% -44px;
}

[data-theme="barber"] .card-sign::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background: var(--oxblood);
  transform: rotate(45deg);
}

[data-theme="barber"] .card-art {
  border-bottom: 1px solid var(--ink-soft);
  box-shadow: 0 3px 0 -2px var(--ink-soft);
}

[data-theme="barber"] .card-title {
  justify-content: center;
  font-family: var(--label-font);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}

[data-theme="barber"] .card-title .icon {
  color: var(--oxblood);
}

[data-theme="barber"] .card-desc {
  font-style: italic;
  color: var(--ink-soft);
}

[data-theme="barber"] .card .btn {
  align-self: center;
}

[data-theme="barber"] .board .card-sign {
  text-align: left;
}

[data-theme="barber"] .board .card-title {
  justify-content: flex-start;
}

[data-theme="barber"] .board .card .btn {
  align-self: start;
  justify-self: start;
}

/* The sign swings from its bracket on hover or keyboard focus, then settles. */
@keyframes sign-swing {
  0% { transform: rotate(0deg); }
  18% { transform: rotate(3deg); }
  40% { transform: rotate(-2.2deg); }
  60% { transform: rotate(1.2deg); }
  80% { transform: rotate(-0.5deg); }
  100% { transform: rotate(0deg); }
}

[data-theme="barber"] .card:hover .card-sign,
[data-theme="barber"] .card:focus-within .card-sign {
  animation: sign-swing 900ms cubic-bezier(0.3, 0.6, 0.4, 1) 1;
}

/* ---- About / Contact band: engraved frames ---- */
[data-theme="barber"] .band-col,
[data-theme="barber"] .story-text,
[data-theme="barber"] .contact-aside {
  background-color: var(--paper-hi);
}

[data-theme="barber"] .band-contact .vignette {
  order: 2;
}

[data-theme="barber"] .vignette {
  border: 1px solid var(--ink);
  outline: 1px solid var(--ink-soft);
  outline-offset: 3px;
  background-color: var(--paper-hi);
}

[data-theme="barber"] .band-text h2,
[data-theme="barber"] .log h3 {
  color: var(--ink);
}

[data-theme="barber"] .band-text .kicker,
[data-theme="barber"] .log .kicker {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--label-font);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oxblood);
}

/* ---- About: our story with a drop cap ---- */
[data-theme="barber"] .story-text {
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

[data-theme="barber"] .log li:first-child p:first-of-type::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-family: var(--heading-font);
  font-size: 3.6em;
  line-height: 0.8;
  color: var(--oxblood);
}

[data-theme="barber"] .log li + li {
  padding-top: 1.75rem;
  border-top: 3px double var(--ink-soft);
}

[data-theme="barber"] .footnote {
  font-style: italic;
  color: var(--ink-soft);
}

/* ---- Contact: a letter on ruled writing paper ---- */
[data-theme="barber"] .contact-form {
  background-color: #fbf6ea;
  background-image:
    linear-gradient(90deg, transparent 2.6rem, rgba(154, 44, 46, 0.45) 2.6rem, rgba(154, 44, 46, 0.45) calc(2.6rem + 1px), transparent calc(2.6rem + 1px)),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(39, 64, 110, 0.16) 31px 32px);
  box-shadow: 0 1px 0 var(--paper-lo), 0 12px 24px rgba(30, 24, 18, 0.2);
  border: 1px solid var(--paper-lo);
  padding-left: clamp(3.25rem, 5vw, 4rem);
}

[data-theme="barber"] .contact-form .salutation {
  font-family: var(--body-font);
  font-style: italic;
}

[data-theme="barber"] .contact-form label {
  color: var(--ink-soft);
}

[data-theme="barber"] .contact-form input,
[data-theme="barber"] .contact-form textarea {
  border-bottom: 1px solid var(--ink-soft);
  font-size: 1.15rem;
  color: var(--ink);
}

[data-theme="barber"] .contact-form textarea {
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(74, 61, 46, 0.35) 31px 32px);
  line-height: 32px;
  padding-top: 0;
  border: 0;
}

/* A photographic poured-wax seal, with the exact company mark impressed above
   an HTML caption. The label stays legible if decorative images are unavailable. */
[data-theme="barber"] .contact-form .form-actions {
  justify-content: flex-end;
  padding: 0 0.5rem 2.25rem;
}

[data-theme="barber"] .btn-seal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 10rem;
  height: 10rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url("../assets/ui/wax-seal-oxblood.webp") center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 5px 4px rgb(45 22 15 / 28%));
  color: var(--oxblood);
  font-family: var(--label-font);
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
  transition: transform 180ms ease, filter 180ms ease;
}

[data-theme="barber"] .btn-seal::after {
  content: "";
  position: absolute;
  left: 27%;
  top: 33%;
  width: 46%;
  height: 31%;
  background: #b84d43;
  -webkit-mask: url("../assets/art/bamcio-mark-barber.svg") center / contain no-repeat;
  mask: url("../assets/art/bamcio-mark-barber.svg") center / contain no-repeat;
  filter: drop-shadow(0 -1px 0 #420e12) drop-shadow(0 1px 0 #db7c66);
  opacity: 0.8;
  pointer-events: none;
}

[data-theme="barber"] .btn-seal > .w-light {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: -0.5rem;
  right: -0.5rem;
  white-space: nowrap;
}

[data-theme="barber"] .btn-seal:hover,
[data-theme="barber"] .btn-seal:focus-visible {
  transform: rotate(-2deg) translateY(-2px);
  filter: drop-shadow(0 7px 5px rgb(45 22 15 / 34%));
}

[data-theme="barber"] .btn-seal:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

[data-theme="barber"] .btn-seal:active {
  transform: translateY(1px) scale(0.98);
}

[data-theme="barber"] .contact-aside {
  padding: 1.5rem;
}

[data-theme="barber"] .form-ok {
  color: #2f4a22;
}

[data-theme="barber"] .form-error {
  color: var(--oxblood);
}

/* ---- Footer: dark wood, brass nav, closing line ---- */
[data-theme="barber"] .site-footer {
  border-top: 6px solid var(--wood-mid);
  box-shadow: inset 0 2px 0 var(--brass);
}

[data-theme="barber"] .footer-brand {
  letter-spacing: 0.04em;
}

[data-theme="barber"] .footer-nav a {
  text-decoration: none;
}

[data-theme="barber"] .footer-nav a:hover,
[data-theme="barber"] .footer-nav a:focus-visible {
  color: #fff3cf;
  text-decoration: underline;
  text-decoration-color: var(--gilt);
}

[data-theme="barber"] .footer-line {
  font-style: italic;
  font-family: var(--body-font);
  font-size: 1.05rem;
  letter-spacing: 0;
  color: #ecd089;
}

[data-theme="barber"] .footer-small {
  border-top: 1px solid rgba(181, 138, 60, 0.4);
  color: #d8c9a6;
}

[data-theme="barber"] .site-footer :focus-visible,
[data-theme="barber"] .hero :focus-visible,
[data-theme="barber"] .page-banner :focus-visible {
  outline-color: #f4d98a;
  box-shadow: 0 0 0 1px var(--wood);
}

/* A fresh impression replaces the company signet when the sender presses it. */
.seal-initials { display: none; }
[data-theme="barber"] .seal-initials {
  display: block;
  position: absolute;
  inset: 0;
  padding-top: 36%;
  color: #c86a57;
  font-family: "IM Fell English", Georgia, serif;
  font-style: italic;
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.06em;
  text-indent: -0.06em;
  text-shadow: 0 -1px 1px #3b0b10, 0 1px 0 #e38a70;
  transform: rotate(-2deg);
  pointer-events: none;
}
[data-theme="barber"] .btn-seal.is-stamped::after { opacity: 0; }