/* ═══════════════════════════════════════════════════════════════════════════
   FRESH CUTS BARBERSHOP · 811 E Main St, El Cajon · shared design system
   ---------------------------------------------------------------------------
   Everything here is sampled off ONE object: the hand-painted board bolted over
   their door. It is the only piece of brand this shop owns, and it is a good one.

     · FRESH ✂ CUTS  — painted capitals in a rust-toned red, heavy grotesque
                       stems, set VERY wide with a scissor glyph doing the work
                       of a space. Flat paint on an enamel panel: no gradient and
                       no bevel, which is why nothing here has either.
     · 6197159472    — the phone number under the name, painted in a gold that
                       has faded unevenly in the sun. Gold is the site's accent
                       and it is used the way they use it: for the one number
                       you are meant to act on.
     · the stars     — five-pointed navy stars scattered along the panel, and a
                       scalloped edge cut into its border. That scallop is the
                       site's structural motif: it edges the header, the strip
                       and the footer. It is theirs, and nobody else on Main
                       Street has one.

   Ground is AGED NEWSPRINT, not cream and not black. The panel has yellowed, the
   awning above it is oxidised red, and this is a small walk-in room where a cut
   takes twenty minutes. Mr Cut (sites/mrcut) is cream with a barber pole; Align
   (sites/align) is black and gold. All three get shown by the same salesperson in
   the same town, so they had better not read as one template three times.

   No build step (house convention): this file is shared by every page and the
   header/footer markup is duplicated per page.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ground — the enamel panel, yellowed, and the newsprint it is photographed on */
  --paper:    #F7F1E4;
  --paper-2:  #EFE6D3;   /* alternating sections */
  --card:     #FFFCF4;
  --stucco:   #E4D8BF;
  --rule:     #DCCFB4;   /* hairlines */
  --rule-2:   #C0AE8B;
  --ink-box:  #141C2E;   /* the one dark surface: footer + the strip */

  /* the paint. --red is the shop's own rust red; --red-d is where the brush
     dragged and it went darker at the edge of every stroke. */
  --red:      #C0281F;
  --red-d:    #8E1A14;
  --red-dd:   #5E0E0A;
  --red-l:    #E0574A;
  --red-wash: #F8E8E3;

  /* --blue is the navy of the stars, and the site's second voice */
  --blue:     #16233F;
  --blue-d:   #0A1226;
  --blue-l:   #4A5F92;
  --blue-wash:#E7EAF1;

  /* --gold is the painted phone number. Hairlines, rules and the one number on a
     page that is meant to be acted on. Never a fill: gold as a background is a
     wedding invitation, and this is a barbershop. */
  --gold:     #B8891F;
  --gold-l:   #E0B65A;
  --gold-wash:#F6EBD2;

  /* the scalloped edge, cut out of the sign panel's border. A repeating radial
     mask rather than an image, so it takes the colour of whatever it edges. */
  --scallop-size: 22px;

  /* type */
  --ink:      #1B1611;
  --ink-2:    #4A4034;
  --mute:     #857A69;

  --display: 'Alfa Slab One', 'Rockwell', Georgia, serif;
  --sans:    'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* No third family. Mr Cut uses a condensed face for labels; here the label voice
     is Karla at 700 with heavy tracking, which sits under a slab headline without
     a third typeface arguing with it. --cond exists because booking.css asks for
     it by name and is shared across every tenant. */
  --cond:    'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1180px;
  --nav-h: 84px;
  --gut: 28px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:820px}

/* ── the brand type treatments ─────────────────────────────────────────────
   `.hot` is the painted name: rust red with a thin navy underprint, the way a
   sign painter lays a dark line under a light colour so the letters hold their
   edge against a bright sky. NOT an offset drop shadow — that is Mr Cut's
   channel-letter return and it belongs to their building, not this one.
   `.gilt` is the phone number: gold with a fine dark keyline, because gold with
   no keyline vanishes on a yellowed panel. */
.hot{
  color:var(--red);
  text-shadow:0 1px 0 rgba(22,35,63,.30), 0 2px 0 rgba(22,35,63,.12);
}
.gilt{
  color:var(--gold);
  text-shadow:0 1px 0 rgba(94,14,10,.34);
}
.blue{color:var(--blue)}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.05;letter-spacing:.004em}
h1{font-size:clamp(2.5rem,6vw,4.6rem);text-transform:uppercase}
h2{font-size:clamp(1.9rem,3.9vw,2.9rem);text-transform:uppercase}
h3{font-size:1.4rem;text-transform:uppercase}

.eyebrow{
  font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.32em;text-transform:uppercase;color:var(--gold);
  display:block;margin-bottom:16px;
}
.eyebrow.dim{color:var(--mute)}
.lede{color:var(--ink-2);font-size:1.1rem;max-width:62ch}
.small{font-size:.92rem;color:var(--mute)}

/* ── the scalloped panel edge, as a rule ───────────────────────────────────
   Their sign's border is a row of half-circles bitten out of the frame. Drawn
   with a repeating radial gradient so it inherits any colour and costs no asset.
   This replaces Mr Cut's barber-pole rule everywhere it appeared. */
.scallop{
  height:11px;
  background:
    radial-gradient(circle at 50% 0, transparent 9px, currentColor 9.5px) 0 0 /
      var(--scallop-size) 11px repeat-x;
  color:var(--red);
}
.divider{display:flex;align-items:center;gap:14px;margin:26px 0}
.divider::before{content:"";flex:1;height:2px;background:var(--rule-2)}
/* the star from the sign, drawn in CSS rather than shipped as an image */
.divider i{
  width:15px;height:15px;flex:none;background:var(--blue);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.divider.left::before{flex:0 0 90px}
.pdiv{max-width:230px;margin:22px auto}

/* ── buttons ───────────────────────────────────────────────────────────────
   A painted lozenge: flat colour, a darker painted edge all the way round, and a
   gold hairline sitting just inside it — exactly how the name on their board is
   outlined. Pressing presses it INTO the panel (the inset deepens) rather than
   sliding it down a drop shadow, which is Mr Cut's move. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:.92rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;
  padding:16px 32px;border:0;cursor:pointer;position:relative;
  transition:background .18s,color .18s,box-shadow .18s,transform .13s cubic-bezier(.2,.8,.3,1);
  white-space:nowrap;line-height:1.15;
}
.btn-red{
  background:var(--red);color:#FFF6EE;
  box-shadow:0 0 0 2px var(--red-d), inset 0 0 0 1px rgba(224,182,90,.55),
             0 6px 18px rgba(94,14,10,.22);
}
.btn-red:hover{background:var(--red-d);transform:translateY(-1px);
  box-shadow:0 0 0 2px var(--red-dd), inset 0 0 0 1px rgba(224,182,90,.8), 0 9px 22px rgba(94,14,10,.28)}
.btn-red:active{transform:translateY(1px);
  box-shadow:0 0 0 2px var(--red-dd), inset 0 3px 8px rgba(0,0,0,.30)}
.btn-blue{
  background:var(--blue);color:#F3F1E8;
  box-shadow:0 0 0 2px #0A1226, inset 0 0 0 1px rgba(224,182,90,.45), 0 6px 18px rgba(10,18,38,.24);
}
.btn-blue:hover{background:#0F1930;transform:translateY(-1px)}
.btn-ghost{color:var(--ink);background:transparent;box-shadow:inset 0 0 0 2px var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-sm{padding:12px 20px;font-size:.83rem;letter-spacing:.14em}
.btn:disabled{opacity:.34;cursor:not-allowed;transform:none}
.btn-red:disabled,.btn-blue:disabled{box-shadow:0 0 0 2px var(--rule-2)}

/* ── header ────────────────────────────────────────────────────────────────
   The sign panel itself: an opaque cream bar with the scalloped edge hanging off
   its bottom, in red. Opaque, not translucent — on a light page a translucent bar
   lets content read straight through and stops looking like a header. */
header{position:sticky;top:0;z-index:200;background:var(--card);
  border-bottom:2px solid var(--blue);box-shadow:0 1px 0 rgba(0,0,0,.04)}
header::after{
  content:"";position:absolute;left:0;right:0;bottom:-11px;height:11px;color:var(--red);
  background:radial-gradient(circle at 50% 0, transparent 9px, currentColor 9.5px)
             0 0 / var(--scallop-size) 11px repeat-x;
}
nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:26px}
.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand img{width:auto;height:46px}
.brand .bt{line-height:1}
.brand .bn{font-family:var(--display);font-size:1.35rem;letter-spacing:.03em;text-transform:uppercase;
  display:block;color:var(--red);text-shadow:0 1px 0 rgba(22,35,63,.28)}
.brand .bs{font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-top:5px;display:block}
.navlinks{display:flex;gap:32px;align-items:center}
.navlinks a{
  font-family:var(--sans);font-size:.85rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);position:relative;padding:7px 0;transition:color .2s;
}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--red)}
/* a painted underline that grows from the left, in gold — the accent the shop
   reserves for the thing you are meant to act on */
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--gold);transition:width .24s cubic-bezier(.2,.8,.3,1)}
.navlinks a:hover::after,.navlinks a[aria-current="page"]::after{width:100%}
.navlinks .navbook{display:none}
.navtoggle{display:none;background:none;border:0;color:var(--ink);
  width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center}
@media(max-width:1000px){
  .navlinks{
    position:fixed;inset:var(--nav-h) 0 auto 0;background:var(--card);
    flex-direction:column;gap:0;padding:0 0 10px;border-bottom:2px solid var(--blue);
    transform:translateY(-120%);transition:transform .3s cubic-bezier(.2,.8,.3,1);
  }
  .navlinks.open{transform:translateY(0)}
  .navlinks a::after{display:none}
  .navtoggle{display:inline-flex}
  header .btn{display:none}
}

/* ── sections ──────────────────────────────────────────────────────────── */
section{padding:clamp(60px,8vw,104px) 0;position:relative}
.sec-head{margin-bottom:48px;max-width:70ch}
.sec-head.split{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;max-width:none;flex-wrap:wrap}
.alt{background:var(--paper-2)}

/* The equivalent of Mr Cut's stucco is ENAMEL: this panel is painted metal that
   has been in the sun since the nineties. Two layers — a broad warm bloom and a
   fine speckle — so a full-bleed section has a surface instead of being a flat
   fill the eye reads as unstyled. */
.veined{position:relative;overflow:hidden}
.veined::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.75;
  background:
    radial-gradient(ellipse 60% 45% at 88% 6%,  rgba(184,137,31,.10), transparent 64%),
    radial-gradient(ellipse 45% 50% at 4% 94%,  rgba(192,40,31,.06),  transparent 66%);
}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{
  min-height:calc(100svh - var(--nav-h));display:grid;place-items:center;
  text-align:left;padding:clamp(40px,5vw,72px) 0;position:relative;overflow:hidden;
  background:linear-gradient(178deg,var(--card) 0%,var(--paper) 48%,var(--stucco) 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 58% 46% at 76% 26%, rgba(184,137,31,.13), transparent 68%),
    radial-gradient(ellipse 38% 32% at 6% 88%,  rgba(22,35,63,.07),   transparent 70%);
}
.hero .wrap{position:relative;z-index:1}
.hero-mark{
  width:clamp(58px,8vw,86px);height:auto;margin:0 0 22px;
  filter:drop-shadow(0 6px 14px rgba(20,28,46,.16));
  animation:markIn 1s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes markIn{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}
.hero h1{margin-bottom:6px}
.hero .tagline{
  font-family:var(--sans);font-size:clamp(.86rem,1.4vw,1.02rem);font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;color:var(--blue);margin:18px 0 0;
}
.hero .lede{margin:22px 0 0}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.scrollcue{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--mute);
  display:flex;flex-direction:column;align-items:center;gap:9px;
}
.scrollcue::after{content:"";width:2px;height:32px;
  background:linear-gradient(180deg,var(--gold),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
@media(max-width:700px){.scrollcue{display:none}}

/* the service line, as a navy strip scalloped top and bottom — the sign panel
   inverted, which is what the shop's own window decal does */
.strip{background:var(--ink-box);color:#E6DECD;padding:22px 0;overflow:hidden;position:relative}
.strip::before,.strip::after{
  content:"";position:absolute;left:0;right:0;height:11px;color:var(--paper);z-index:1;
  background:radial-gradient(circle at 50% 0, transparent 9px, currentColor 9.5px)
             0 0 / var(--scallop-size) 11px repeat-x;
}
.strip::before{top:0}
.strip::after{bottom:0;transform:scaleY(-1)}
.strip .row{display:flex;justify-content:center;flex-wrap:wrap;padding:4px 0;
  font-family:var(--sans);font-size:.86rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase}
.strip .row span{padding:0 22px;position:relative}
/* the navy stars off the panel, used as separators */
.strip .row span+span::before{
  content:"";position:absolute;left:-2px;top:50%;width:11px;height:11px;margin-top:-5px;
  background:var(--gold);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

/* ── cards ─────────────────────────────────────────────────────────────────
   A painted enamel plate: white face, navy keyline, and a gold hairline set in
   from the edge the way the lettering on their board is outlined. It lifts on
   hover; it does not slide along a hard offset shadow, which is Mr Cut's. */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.card{
  background:var(--card);border:2px solid var(--blue);padding:30px 26px;position:relative;
  box-shadow:inset 0 0 0 1px rgba(184,137,31,.28), 0 4px 16px rgba(20,28,46,.08);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s;
}
.card:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(184,137,31,.6), 0 14px 30px rgba(20,28,46,.16)}
.card .num{font-family:var(--display);font-size:1.15rem;color:var(--red);display:block;margin-bottom:12px}

/* ── barber cards ──────────────────────────────────────────────────────── */
.barber{
  background:var(--card);border:2px solid var(--blue);display:flex;flex-direction:column;
  box-shadow:inset 0 0 0 1px rgba(184,137,31,.28), 0 4px 16px rgba(20,28,46,.08);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s;
}
.barber:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(184,137,31,.6), 0 14px 30px rgba(20,28,46,.16)}
.barber .photo{
  aspect-ratio:4/3;background:var(--blue-wash);
  display:grid;place-items:center;position:relative;overflow:hidden;border-bottom:2px solid var(--blue);
  /* ONE definition of the disc, shared by the image and the ring so they cannot
     disagree. Sized off WIDTH — a percentage HEIGHT on a centred grid item has no
     definite basis to resolve against. */
  --disc:min(70%,204px);
}
.barber .photo img{
  width:var(--disc);height:auto;aspect-ratio:1;object-fit:cover;
  clip-path:circle(50% at 50% 50%);position:relative;z-index:1;
}
/* the ring: a gold circle in FRONT of the photo, the sign's outline treatment
   applied to a face. No blur and no tint — nothing washes out a portrait. */
.barber .photo::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:var(--disc);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:2;
  border:3px solid var(--gold);
}
.barber .photo.no-photo{aspect-ratio:4/3;background:var(--red-wash)}
/* The ring above frames a PHOTOGRAPH. With no photo the monogram draws its own
   ring (below) and two concentric circles read as a bullseye, not a portrait. */
.barber .photo.no-photo::after{display:none}
.barber .photo .mono{
  font-family:var(--display);font-size:clamp(2rem,4.4vw,2.9rem);color:var(--red);
  position:relative;z-index:1;
}
.barber .photo.no-photo .mono::after{
  content:"";position:absolute;left:50%;top:50%;width:2.7em;height:2.7em;
  transform:translate(-50%,-50%);border:3px solid var(--gold);border-radius:50%;
}
.barber .body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.barber h3{font-size:1.3rem;margin:0}
.barber .barber-name{font-size:1.9rem;margin:0;text-transform:uppercase}
.barber .role{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold)}
.barber .bio{font-size:.95rem;color:var(--ink-2);flex:1}
.barber .meta{font-family:var(--sans);font-size:.9rem;color:var(--mute);padding-top:12px;
  border-top:1px solid var(--rule)}
.barber .meta b{color:var(--ink);font-weight:700}
.barber .meta .cats{display:block}
.barber .acts{display:flex;gap:12px;align-items:center;margin-top:6px}

/* ── service menu ──────────────────────────────────────────────────────────
   A hand-lettered board, so it is set like one: slab capitals, leader dots, and
   the price in the same paint as the name over the door. */
.menu-cat{margin-bottom:44px}
.menu-cat h3{color:var(--gold);font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.28em;margin-bottom:16px}
.menu-row{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--rule)}
.menu-row .nm{flex:0 1 auto;min-width:0;font-family:var(--display);font-size:1.15rem;text-transform:uppercase}
.menu-row .fill{flex:1;border-bottom:2px dotted var(--rule-2);transform:translateY(-6px);min-width:20px}
.menu-row .pr{font-family:var(--display);font-size:1.15rem;color:var(--red);white-space:nowrap;text-align:right}
.menu-row .by{display:block;font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.12em;
  color:var(--mute);text-transform:uppercase;margin-top:2px}
.menu-row .desc{flex-basis:100%;font-size:.92rem;color:var(--mute);margin-top:-2px}

/* ── footer ────────────────────────────────────────────────────────────────
   The one dark surface, scalloped along its top edge — the sign panel again,
   this time hanging down instead of up. It gives the newsprint somewhere to end. */
footer{background:var(--ink-box);color:#BDB4A2;padding:66px 0 30px;font-size:.95rem;position:relative}
footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:11px;color:var(--paper);
  background:radial-gradient(circle at 50% 0, transparent 9px, currentColor 9.5px)
             0 0 / var(--scallop-size) 11px repeat-x;
}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1.1fr 1fr .8fr;gap:42px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
footer h4{font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-l);margin-bottom:14px}
footer a:hover{color:#fff}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-bottom{margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.85rem;color:#847B6C}

/* ── hours ─────────────────────────────────────────────────────────────── */
.hours-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--rule);font-size:.97rem}
.hours-row .d{color:var(--mute)}
footer .hours-row{border-bottom-color:rgba(255,255,255,.1)}
footer .hours-row .d{color:#847B6C}
.hours-row.today{color:var(--ink);font-weight:700}
footer .hours-row.today{color:#fff}
.hours-row.today .d{color:var(--red)}
footer .hours-row.today .d{color:var(--gold-l)}
/* Monday. The shop is shut and the row has to say so louder than a grey dash —
   this is the single most common wasted trip to a barbershop. */
.hours-row.closed .d{color:var(--mute);font-style:italic}

/* ── reveal on scroll ──────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-mark{animation:none}
  .scrollcue::after{animation:none}
  html{scroll-behavior:auto}
}

/* ── page header (inner pages) ─────────────────────────────────────────── */
.pagehead{padding:clamp(52px,7vw,96px) 0 clamp(32px,4vw,52px);text-align:center;
  position:relative;overflow:hidden;background:linear-gradient(180deg,var(--card),var(--stucco))}
.pagehead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 0%, rgba(184,137,31,.12), transparent 70%)}
.pagehead .wrap{position:relative;z-index:1}
.crumb{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.crumb a:hover{color:var(--red)}

/* ── review proof ─────────────────────────────────────────────────────────
   Visible content only, never schema aggregateRating: Google's structured-data
   policy forbids a business marking up an aggregate rating it pulled from a
   third party, and doing it risks a manual action. The stars still do their job
   where it counts — on the page. */
.rating{display:flex;align-items:center;gap:11px;margin-top:22px;
  font-size:.92rem;color:var(--ink-2);flex-wrap:wrap}
.rating .stars{color:var(--gold);letter-spacing:.12em;font-size:1.05rem}
.rating b{color:var(--ink);font-weight:700}

/* ── work photo ───────────────────────────────────────────────────────── */
.workgrid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
@media(max-width:860px){.workgrid{grid-template-columns:1fr;gap:32px}}
.workshot{position:relative;border:2px solid var(--blue);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(184,137,31,.45), 0 14px 34px rgba(20,28,46,.18)}
.workshot img{width:100%;height:auto;display:block}

/* ── social proof band ────────────────────────────────────────────────────── */
.proof{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--card)}
.proofrow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center}
.proofrow > div{padding:30px 14px;position:relative}
.proofrow > div + div::before{content:"";position:absolute;left:0;top:22%;height:56%;width:1px;background:var(--rule-2)}
.proofrow b{display:block;font-family:var(--display);font-size:clamp(1.7rem,2.7vw,2.5rem);
  line-height:1;color:var(--red)}
.proofrow span{display:block;margin-top:9px;font-family:var(--sans);font-size:.74rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
@media(max-width:760px){.proofrow{grid-template-columns:1fr 1fr}
  .proofrow > div:nth-child(3)::before{display:none}}

/* ── the service finder ───────────────────────────────────────────────────── */
.svcfilter{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:42px;justify-content:center}
.fchip{background:var(--card);border:2px solid var(--blue);color:var(--ink);
  padding:10px 18px;font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;transition:all .16s}
.fchip:hover{background:var(--gold-wash)}
.fchip.on{background:var(--red);border-color:var(--red);color:#FFF6EE;
  box-shadow:inset 0 0 0 1px rgba(224,182,90,.6)}

.svccat{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);margin:0 0 18px;display:flex;align-items:center;gap:14px}
.svccat::after{content:"";flex:1;height:1px;background:var(--rule-2)}
.svcblock{margin-bottom:48px}
.svcblock[hidden]{display:none}

.svcitem{border:2px solid var(--blue);background:var(--card);padding:24px 24px 22px;margin-bottom:12px;
  box-shadow:inset 0 0 0 1px rgba(184,137,31,.22);transition:box-shadow .2s,transform .2s}
.svcitem:hover{transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(184,137,31,.6), 0 10px 24px rgba(20,28,46,.13)}
.svchead{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap}
.svcitem h3{font-size:1.4rem;margin:0}
.svcfrom{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap}
.svcfrom b{font-family:var(--display);font-size:1.2rem;color:var(--red);letter-spacing:0}
.svcdesc{color:var(--ink-2);font-size:.97rem;margin-top:8px;max-width:64ch}
.svcwho{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);margin:18px 0 10px}

/* one row per barber who does it — their face, the price, a direct booking link */
.offers{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:9px}
.offer{display:flex;align-items:center;gap:12px;padding:11px 13px;
  border:1px solid var(--rule-2);background:var(--paper);transition:all .16s}
.offer:hover{border-color:var(--red);background:#fff;
  box-shadow:inset 0 0 0 1px rgba(184,137,31,.5), 0 6px 14px rgba(20,28,46,.12)}
.offer .oav{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--blue-wash);display:grid;place-items:center;
  font-family:var(--display);font-size:.9rem;color:var(--red);box-shadow:0 0 0 2px var(--gold)}
.offer .oav img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.offer .oinfo{flex:1;min-width:0;line-height:1.25}
.offer .onm{display:block;font-size:.98rem;font-weight:700}
.offer .odur{display:block;font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute)}
.offer .opr{font-family:var(--display);font-size:1.1rem;color:var(--red);flex:none}

/* ── skeletons ────────────────────────────────────────────────────────────
   The shape of the thing arriving, not the words "Loading…". On a slow phone
   this is most of the perceived speed. */
.skel{border:2px solid var(--rule);background:var(--card)}
.skel .sk{background:linear-gradient(90deg,var(--stucco) 25%,#F8F1E5 37%,var(--stucco) 63%);
  background-size:400% 100%;animation:shimmer 1.5s ease-in-out infinite}
.skel .sk-photo{aspect-ratio:4/3}
.skel .sk-body{padding:24px}
.skel .sk-line{height:12px;margin-bottom:11px}
.skel .sk-line.w60{width:60%}.skel .sk-line.w40{width:40%}.skel .sk-line.w85{width:85%}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.skel .sk{animation:none}.hero h1 .chrome{animation:none}}

/* ── sticky mobile book bar ───────────────────────────────────────────────
   The header CTA is hidden under 1000px (the nav collapses), which leaves phones
   with no persistent way to book. Highest-leverage element on a barbershop site:
   most traffic is a phone and the goal is one tap. Behaviour (start down, rise
   only after the in-page CTA scrolls up and out) is in initStickyBook(). */
.mbook{display:none}
@media(max-width:1000px){
  .mbook{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:300;
    background:var(--red);color:#fff;text-align:center;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    box-shadow:0 -10px 30px rgba(0,0,0,.22);
    border-top:4px solid var(--gold);
    transform:translateY(115%);
    transition:transform .3s cubic-bezier(.2,.8,.3,1);
  }
  .mbook.is-up{transform:none}
  /* carries the bar's colour past the bottom of the LAYOUT viewport. A fixed
     element at bottom:0 is anchored to the small viewport; when iOS Safari's
     toolbar collapses, the visual viewport grows and the page scrolls through
     the strip that opens underneath. */
  .mbook::after{
    content:"";position:absolute;left:0;right:0;top:100%;
    height:100vh;height:100lvh;background:var(--red);pointer-events:none;
  }
  /* the Arcbay video bubble is fixed to the same corner this bar owns; it reads
     this variable through the shadow boundary, so lifting it is a variable rather
     than a fork of the shared embed */
  :root{--arcbay-bubble-bottom-mobile:88px}
  body{padding-bottom:74px}
  /* the booking page has its own submit button; a duplicate CTA there is noise */
  body[data-page="book"] .mbook{display:none}
  body[data-page="book"]{padding-bottom:0}
}
@media(prefers-reduced-motion:reduce){.mbook{transition:none}}

.barber .photo img{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.barber:hover .photo img{transform:scale(1.04)}

@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}

/* ═══════════════════════════════════════════════════════════════════════════
   THE STOREFRONT PHOTOGRAPH
   The only picture of this shop that exists is the board over its door, off
   their Google profile. That is genuinely all there is — no interior, no work,
   no team — and it is worth more than any stock barbershop interior, because it
   is the thing a customer looks for walking east on Main. It gets the hero panel
   and nothing else on this site pretends to be a photo library.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-split{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,5vw,68px);align-items:center;width:100%;
}
.hero-copy{max-width:34rem;text-align:left}
.hero-copy .hero-mark{margin-left:0}
.hero-copy .lede{margin-left:0;text-align:left}
.hero-copy .hero-cta{justify-content:flex-start}
.hero-copy .rating{justify-content:flex-start}
.hero-copy h1{font-size:clamp(3.1rem,5.4vw,5.4rem);letter-spacing:.01em}

/* Text first, photo second — the name and the reason to book get read before
   the picture, and the picture is what you look at while deciding. */
.hero-shot{order:2}
.hero-shot{
  margin:0;position:relative;overflow:hidden;
  border:3px solid var(--blue);
  box-shadow:inset 0 0 0 1px rgba(184,137,31,.5), 0 20px 44px rgba(20,28,46,.20);
}
.hero-shot img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/5;object-fit:cover;object-position:50% 38%;
}
/* Shot on a phone into a bright El Cajon sky, so the panel is slightly cool and
   the awning above it is blown out. A warm wash pulls the enamel back towards the
   newsprint it sits on, and a soft vignette at the top keeps the sky from being
   the brightest thing on the page. */
.hero-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(198deg,rgba(20,28,46,.20),transparent 34%),
    linear-gradient(20deg,rgba(224,182,90,.14),transparent 52%);
}

@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:28px}
  .hero-shot{order:-1;max-width:none}
  .hero-shot img{aspect-ratio:16/11;object-position:50% 34%}
  .hero-copy{max-width:none}
  .hero-copy .eyebrow{letter-spacing:.24em}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE PASS
   Ported wholesale from sites/align/styles.css, which was measured at
   390x844 / DPR 3 / touch against a live phone. The findings are about layout,
   not palette — 44px tap targets, a hero that fits one screen, a roster that is
   a comparison rather than a scroll — so they transfer intact, and re-deriving
   them on a different cream site would be re-doing solved work.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  /* hero: copy first, photo as a band under it. Photo-first spent the whole of
     screen one on branding and pushed the wordmark and the Book button off it. */
  .hero{min-height:0;padding:24px 0 38px}
  .hero-split{grid-template-columns:1fr;gap:24px}
  .hero-shot{order:2;max-width:none;margin-top:4px}
  .hero-shot img{aspect-ratio:3/2;object-position:50% 32%}
  .hero-shot{box-shadow:inset 0 0 0 1px rgba(184,137,31,.5), 0 12px 26px rgba(20,28,46,.18)}

  /* the nav bar already shows the pole AND the name 60px above this */
  .hero-copy .hero-mark{display:none}
  .hero-copy h1{font-size:clamp(2.3rem,11vw,3.1rem)}
  .hero-copy .lede{margin-top:14px;font-size:1.02rem}
  .hero-copy .hero-cta{margin-top:18px}
  .hero .scrollcue{display:none}

  /* tap targets: 44px minimum. Padding, not font-size — nothing about the type
     changes. The barber name is the link that matters most on this site and was
     the easiest to mis-tap at 32px. */
  .barber h3 a,
  .navlinks a,
  footer a{display:inline-block;min-height:44px;line-height:44px}
  .crumb a{display:inline-block;min-height:44px;line-height:44px;padding-right:4px}
  .fchip{min-height:44px;padding-top:0;padding-bottom:0}
  .btn-sm{padding:13px 20px}
  a[href^="tel:"],a[href^="mailto:"]{display:inline-block;min-height:44px;line-height:44px}

  /* Barber cards stay STACKED here (the 2-up rework is at 560px below). Only the
     bio drops: on a roster where nobody has written one it rendered as an empty
     gap pushing the price and the Book button down. */
  .barber .bio{display:none}

  .sec-head{margin-bottom:26px}
  section{padding:42px 0}
  footer{padding:44px 0 26px}

  .pagehead{padding:28px 0 22px}
  .pagehead h1{font-size:clamp(2.1rem,11vw,3rem)}
  .pagehead .pdiv{margin:14px auto;max-width:180px}
  .pagehead .lede{font-size:1rem}

  /* the service finder was 8.4 screens for sixteen services — dense, correct
     information dressed at desktop scale. Tighten the frame, not the content. */
  .svcfilter{margin-bottom:20px;gap:8px}
  .fchip{padding-left:14px;padding-right:14px}
  .svcblock{margin-bottom:26px}
  .svccat{margin-bottom:12px;gap:10px}
  .svcitem{padding:14px 13px 13px;margin-bottom:9px}
  .svcitem h3{font-size:1.3rem}
  .svchead{gap:5px 12px}
  .svcdesc{font-size:.93rem;margin-top:5px}
  .svcwho{margin:11px 0 7px}
  .offers{gap:7px}
  .offer{padding:8px 11px;gap:10px}
  .offer .oav{width:36px;height:36px}
}

/* ── the team preview as a swipeable rail on a phone ─────────────────────
   Five stacked cards are three full screens. A rail keeps ALL FIVE — nobody gets
   cut for being fifth, which is the whole point — inside one. */
@media (max-width:760px){
  #teamPreview.grid{
    display:grid;grid-auto-flow:column;grid-auto-columns:80vw;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);
    padding-block:6px 12px;                /* room for the 6px card shadow */
    scrollbar-width:none;
  }
  #teamPreview.grid::-webkit-scrollbar{display:none}
  #teamPreview .barber{scroll-snap-align:center}
  #teamPreview .barber .photo{--disc:min(58%,150px)}
}

/* ── mobile header ─────────────────────────────────────────────────────── */
@media (max-width:1000px){
  :root{--nav-h:64px}
  .brand img{height:40px}
  .brand .bn{font-size:1.25rem}
  .brand .bs{font-size:.6rem;margin-top:3px}
  .brand{min-height:44px}

  /* the burger, drawn: three rules from one element plus its two pseudo-elements,
     so the lines cannot drift apart. 19px of glyph inside a 44px target — the
     target belongs to the finger, the glyph to the eye. */
  .navtoggle{
    display:inline-flex;align-items:center;justify-content:center;position:relative;
    width:44px;height:44px;padding:0;background:none;border:0;
    color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .navtoggle:hover,.navtoggle[aria-expanded="true"]{color:var(--red)}
  .burger,.burger::before,.burger::after{
    content:"";position:absolute;left:50%;width:20px;height:2.5px;margin-left:-10px;
    border-radius:1px;background:currentColor;
    transition:transform .26s cubic-bezier(.2,.8,.3,1),top .26s cubic-bezier(.2,.8,.3,1),background .2s;
  }
  .burger{top:50%;margin-top:-1.25px}
  .burger::before{left:0;margin-left:0;top:-6.5px}
  .burger::after{left:0;margin-left:0;top:6.5px}
  /* open: the middle line goes, the outer two cross. The button that opened it is
     the button that closes it, and it has to look like it. */
  .navtoggle[aria-expanded="true"] .burger{background:transparent}
  .navtoggle[aria-expanded="true"] .burger::before{top:0;transform:rotate(45deg)}
  .navtoggle[aria-expanded="true"] .burger::after{top:0;transform:rotate(-45deg)}

  /* the panel: a list below the bar, hairline-separated, 48px rows. Deliberately
     not a full-screen overlay — five links behind a modal is something you have
     to get out of. */
  .navlinks{box-shadow:0 22px 34px rgba(0,0,0,.14)}
  .navlinks a{
    display:flex;align-items:center;min-height:48px;line-height:1.2;
    padding:0 24px;width:100%;font-size:1.05rem;letter-spacing:.14em;
    border-top:1px solid var(--rule);color:var(--ink);
  }
  .navlinks a:first-child{border-top:0}
  .navlinks a[aria-current="page"]{color:var(--red)}
  /* the Book row cloned in by initNav() — a control among destinations, so it
     looks like one */
  .navlinks .navbook{
    display:flex;border-top:0;margin:10px 24px 4px;padding:15px;text-align:center;
    justify-content:center;width:auto;min-height:0;line-height:1.2;
    background:var(--red);color:#FFF6EE;
    box-shadow:0 0 0 2px var(--red-d), inset 0 0 0 1px rgba(224,182,90,.55);
    font-family:var(--sans);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:1rem;
  }
  .navlinks .navbook::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .burger,.burger::before,.burger::after{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE ROSTER ON A PHONE — 2-up, composed like /book's step 1
   Five stacked cards measured 2685px, almost all of it frame: a full-width 4:3
   photo band whose actual content is a 208px circle, five times over. /book had
   already solved this — a round avatar centred over the name, two per row, so
   four people are on screen at once and choosing is a comparison instead of a
   scroll.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:560px){
  /* minmax(0,…) not 1fr: grid items default to min-width:auto, which is what
     pushed this page 79px wider than the phone the first time. */
  #teamGrid.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #teamGrid .barber{position:relative;padding:16px 10px 13px;align-items:center;text-align:center}
  #teamGrid .barber:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(184,137,31,.28), 0 4px 16px rgba(20,28,46,.08)}

  /* the photo frame IS the disc now — no band, no bottom rule, no 4:3 void */
  #teamGrid .barber .photo,
  #teamGrid .barber .photo.no-photo{
    width:96px;aspect-ratio:1;border-radius:50%;border-bottom:0;
    margin:0 auto 11px;--disc:100%;
    /* the whole card is the link (see the ::after below); this anchor must not
       also take the tap, or the card sometimes navigates and sometimes doesn't */
    pointer-events:none;
  }
  #teamGrid .barber .photo .mono{font-size:1.85rem}
  #teamGrid .barber .body{padding:0;gap:4px;align-items:center;width:100%;flex:1}
  #teamGrid .barber h3{font-size:1.1rem;line-height:1.12}
  /* the 44px target moves from the name to the whole card, so the name goes back
     to being type rather than a 44px band of empty line-height */
  #teamGrid .barber h3 a{min-height:0;line-height:1.12;display:inline}
  #teamGrid .barber .role{font-size:.78rem;letter-spacing:.12em}
  #teamGrid .barber .meta{width:100%;font-size:.95rem;padding-top:8px;margin-top:2px;line-height:1.35}
  /* "Cuts · Beard · Shave" wraps to three lines in 141px and buries the price.
     It is on the barber's own page, one tap away, in full. */
  #teamGrid .barber .meta .cats{display:none}

  #teamGrid .barber .acts{width:100%;margin-top:10px;gap:8px}
  /* the ghost button was a third link to the profile the card already opens */
  #teamGrid .barber .acts .btn-ghost{display:none}
  #teamGrid .barber .acts .btn-red{
    flex:1;padding:12px 8px;font-size:.82rem;letter-spacing:.1em;
    position:relative;z-index:2;
    box-shadow:0 0 0 2px var(--red-d), inset 0 0 0 1px rgba(224,182,90,.55);
  }
  /* tap the card → that barber's menu and hours. Tap the red button → straight
     into booking them. */
  #teamGrid .barber h3 a::after{content:"";position:absolute;inset:0;z-index:1}

  /* An odd roster leaves the last barber alone beside an empty cell — the exact
     hole this layout exists to close. The orphan spans the row and recomposes
     sideways instead. */
  #teamGrid .barber:last-child:nth-child(odd){
    grid-column:1/-1;flex-direction:row;align-items:center;text-align:left;padding:14px;gap:16px;
  }
  #teamGrid .barber:last-child:nth-child(odd) .photo{margin:0;flex:none}
  #teamGrid .barber:last-child:nth-child(odd) .body{align-items:flex-start;min-width:0}
  #teamGrid .barber:last-child:nth-child(odd) .meta{border-top:0;padding-top:0;margin-top:0}
  #teamGrid .barber:last-child:nth-child(odd) .acts{margin-top:9px;width:auto}
  #teamGrid .barber:last-child:nth-child(odd) .acts .btn-red{flex:none;padding:12px 30px}
}

/* ── the footer on a phone ───────────────────────────────────────────────── */
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:20px 18px}
  /* the brand blurb spans the row; everything after it pairs cleanly */
  .foot-grid > :first-child{grid-column:1/-1}
  footer h4{margin-bottom:6px}
  /* `footer a` is an inline-block with line-height:44px, so each <li> carries a
     line box of its own around it — the inline-block descender gap, doubled by
     the 44px line-height, rendered the rows 88px apart. Making the row itself
     the flex line removes the second box; the 44px minimum is untouched. */
  footer ul{gap:0}
  footer li{display:flex}
  /* display:flex beats the [hidden] attribute's display:none, which un-hid the
     email row applyBusiness() hides when the shop has no email on file — the
     dangling em-dash that code exists to prevent. */
  footer li[hidden]{display:none}
  footer ul a{display:flex;align-items:center;line-height:1.25;width:100%}
  /* "Mon – Sat" and "9am – 7pm" do not fit one 157px line and wrapped into four */
  .hours-row{flex-direction:column;align-items:flex-start;gap:1px;padding:8px 0;font-size:.92rem}
  .foot-bottom{margin-top:22px;padding-top:15px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE NAVY BAND
   The stars on their panel are navy, and this is where that navy gets to be a
   surface rather than a detail. Mr Cut's equivalent band sells a beauty-supply
   counter; Fresh Cuts has no retail, so this band carries the thing that IS true
   of them and is the actual reason somebody picks this shop: walk in and wait, or
   take a time and don't. One band, one idea.
   ═══════════════════════════════════════════════════════════════════════════ */
.supply{background:var(--blue);color:#fff;position:relative;overflow:hidden}
.supply::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 82% 14%,rgba(255,255,255,.12),transparent 66%)}
.supply .wrap{position:relative;z-index:1}
.supply .eyebrow{color:var(--gold-l)}
.supply h2{color:#fff}
.supply .lede{color:#CFD5E4}
.supply .btn-ghost{color:#fff;box-shadow:inset 0 0 0 2px #fff}
.supply .btn-ghost:hover{background:#fff;color:var(--blue)}
.shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:40px}
.shelfitem{background:rgba(255,255,255,.07);border:1px solid rgba(224,182,90,.35);padding:22px 20px}
.shelfitem h4{font-family:var(--display);font-size:1.05rem;text-transform:uppercase;
  color:#fff;margin-bottom:8px;letter-spacing:.01em}
.shelfitem p{font-size:.93rem;color:#C3CBDD;line-height:1.5}

/* Owner pull-quote. One real, attributable review rather than a carousel of five:
   a single line a visitor could go and verify reads as true; a wall of them reads
   as marketing. */
.ownerquote{margin:34px 0 0;padding:24px 28px;border-left:4px solid var(--gold);
  background:var(--card);max-width:62ch;
  box-shadow:inset 0 0 0 1px rgba(184,137,31,.22), 0 6px 18px rgba(20,28,46,.08)}
.ownerquote blockquote{margin:0;font-family:var(--sans);font-size:1.15rem;font-weight:500;
  color:var(--ink);line-height:1.55}
.ownerquote figcaption{margin-top:14px;font-family:var(--sans);font-size:.76rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}

.ownerhead{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ownerhead img{width:140px;height:140px;flex:none;object-fit:cover;border-radius:50%;
  border:3px solid var(--gold)}
/* min-width:0 is load-bearing: without it the display heading's min-content width
   keeps the text column wider than the row and wraps the portrait onto its own
   line at every viewport. */
.ownerhead>div{flex:1 1 340px;min-width:0}
.ownerhead h2{margin-top:6px}
.ownerbody p+p{margin-top:16px}
@media(max-width:560px){.ownerhead{gap:16px}.ownerhead img{width:96px;height:96px}}

/* ── full-bleed photograph ───────────────────────────────────────────────────
   Edge to edge, between two sections. The scalloped edges top and bottom tie it to
   the page instead of letting it read as a gap where the layout stopped. Height is
   capped in vh so a wide photo does not become a full screen of ceiling tiles on a
   tall monitor. */
.bleed{margin:0;position:relative;overflow:hidden;background:var(--ink-box)}
.bleed::before,.bleed::after{
  content:"";position:absolute;left:0;right:0;height:11px;color:var(--paper);z-index:1;
  background:radial-gradient(circle at 50% 0, transparent 9px, currentColor 9.5px)
             0 0 / var(--scallop-size) 11px repeat-x;
}
.bleed::before{top:0}
.bleed::after{bottom:0;transform:scaleY(-1)}
.bleed img{display:block;width:100%;height:auto;max-height:56vh;object-fit:cover;object-position:50% 46%}
@media(max-width:760px){.bleed img{max-height:none;aspect-ratio:16/9}}

/* a photograph inside the navy band — a gold keyline rather than the navy border
   used on newsprint, because navy on navy disappears */
.supplyshot{margin:38px 0 0;overflow:hidden;border:2px solid rgba(224,182,90,.55);
  box-shadow:0 18px 40px rgba(0,0,0,.34)}
.supplyshot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 45%}
@media(max-width:760px){.supplyshot{box-shadow:0 10px 24px rgba(0,0,0,.34)}.supplyshot img{aspect-ratio:4/3}}

/* A photograph of the shop's own price board, if one is ever taken. Fresh Cuts
   publishes NO menu anywhere — this is the single highest-value photograph anyone
   could bring back from a visit, because it turns every invented number on this
   site into a transcribed one. Styled and waiting; used by no page yet. */
.boardshot{margin:0;border:2px solid var(--blue);
  box-shadow:inset 0 0 0 1px rgba(184,137,31,.5), 0 18px 40px rgba(20,28,46,.22);
  overflow:hidden;background:#111}
.boardshot img{display:block;width:100%;height:auto}
.boardnote{font-size:.92rem;color:var(--mute);margin-top:16px}

/* ── info rows used on the Visit page ──────────────────────────────────── */
.inforow{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--rule)}
.inforow .k{font-family:var(--cond);font-size:.95rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);flex:0 0 108px}
.inforow .v{flex:1;min-width:0}