/* ==========================================================================
   Barbearia Ádamo Barber
   Palette sampled from their own artwork: the Plano Mensal poster (gold),
   the logo card (bone on black), the shop's concrete wall (stone).
   ========================================================================== */

:root{
  --ink:        #0a0a0b;
  --ink-2:      #101013;
  --ink-3:      #17171a;
  --bone:       #efece6;
  --stone:      #9a9c98;
  --gold:       #d8ab52;   /* text-safe gold on black                        */
  --gold-deep:  #c08a24;   /* exact ink of their Plano Mensal headline        */
  --line:       rgba(239,236,230,.13);
  --line-2:     rgba(239,236,230,.07);

  --wrap:       1280px;
  --gut:        32px;
  --hdr-h:      72px;

  --f-disp: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --f-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background: var(--ink);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--bone);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}

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

::selection{ background: var(--gold-deep); color:#000; }

:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background: var(--gold); color:#000; padding:12px 18px;
  font-family: var(--f-disp); font-weight:700;
}
.skip:focus{ left:12px; top:12px; }

.wrap{
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding-inline: var(--gut);
}


/* ── type ───────────────────────────────────────────────────────────────── */

h1,h2,h3{
  font-family: var(--f-disp);
  font-weight: 800;
  font-stretch: 92%;
  letter-spacing: -0.022em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}

h1{ font-size: clamp(2.9rem, 6.4vw, 5.1rem); }
h2{ font-size: clamp(2.1rem, 4.3vw, 3.3rem); }
h3{
  font-size: .72rem; font-weight:700; font-stretch:108%;
  letter-spacing:.16em; text-transform:uppercase;
  line-height:1.2; color: var(--stone);
}

.eyebrow{
  font-family: var(--f-disp);
  font-size: .72rem; font-weight:700; font-stretch:108%;
  letter-spacing:.19em; text-transform:uppercase;
  color: var(--gold);
  margin:0 0 18px;
}

.lede{
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  color: var(--stone);
  max-width: 40ch;
  margin: 22px 0 0;
}

.muted{ color: var(--stone); }


/* ── buttons ────────────────────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--f-disp);
  font-size:.82rem; font-weight:700; font-stretch:104%;
  letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none;
  padding: 15px 26px;
  border:1px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-gold{ background: var(--gold); color:#0a0a0b; }
.btn-gold:hover{ background: var(--bone); }
.btn-ghost{ border-color: rgba(239,236,230,.28); color: var(--bone); }
.btn-ghost:hover{ border-color: var(--bone); background: rgba(239,236,230,.06); }

.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

.link-arrow{
  font-family: var(--f-disp);
  font-size:.8rem; font-weight:700; font-stretch:104%;
  letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid rgba(216,171,82,.4);
  padding-bottom:3px;
  color: var(--gold);
  transition: border-color .18s ease, color .18s ease;
}
.link-arrow::after{ content:' ↗'; }
.link-arrow:hover{ color: var(--bone); border-color: var(--bone); }


/* ── the mark ───────────────────────────────────────────────────────────── */
/* One alpha PNG, painted with background-color, so it works in any colour.  */

.brand-mark, .ftr-mark, .hero-badge, .sign-mark{
  display:block;
  -webkit-mask-image: url(img/mark-512.png);
          mask-image: url(img/mark-512.png);
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  background-color: currentColor;
}


/* ── header ─────────────────────────────────────────────────────────────── */

.hdr{
  position: sticky; top:0; z-index:50;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.hdr.scrolled{
  background: rgba(10,10,11,.94);
  border-bottom-color: var(--line);
}
.hdr-in{
  width: min(var(--wrap), 100%);
  margin-inline:auto;
  padding: 0 var(--gut);
  height: var(--hdr-h);
  display:flex; align-items:center; gap:28px;
}

.brand{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; color: var(--bone);
  margin-right:auto;
}
.brand-mark{ width:34px; height:34px; flex:none; color: var(--bone); }
.brand-txt{
  font-family: var(--f-disp);
  font-weight:800; font-stretch:100%;
  font-size:.96rem; letter-spacing:.03em;
  text-transform:uppercase; line-height:1;
}
.brand-txt span{ color: var(--gold); }

.nav{ display:flex; gap:26px; }
.nav a{
  font-family: var(--f-disp);
  font-size:.76rem; font-weight:600; font-stretch:104%;
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color: var(--stone);
  transition: color .16s ease;
}
.nav a:hover{ color: var(--bone); }

/* Never two identical CTAs in one viewport: the header one appears only once
   the hero — which owns the primary "Agendar horário" — has scrolled away. */
.hdr-cta{ padding: 11px 20px; font-size:.76rem; }
/* Gated behind html.js, like every other hidden start state: `past-hero` is set
   by app.js, so without JavaScript this button must simply be there. */
html.js .hdr-cta{
  opacity:0; visibility:hidden; translate: 0 -6px;
  transition: opacity .25s ease, translate .25s ease, visibility .25s;
}
html.js .hdr.past-hero .hdr-cta{ opacity:1; visibility:visible; translate:0 0; }


/* ── hero ───────────────────────────────────────────────────────────────── */

.hero{
  position:relative;
  /* Kept deliberately short of a full viewport: the hero photograph is a wide
     crop, and a taller box would show less of it, not more. */
  min-height: min(92svh, 782px);
  display:flex; flex-direction:column; justify-content:center;
  isolation:isolate;
}

.hero-fig{
  margin:0;
  /* Runs up behind the sticky header: stopping at the header's lower edge
     leaves a hard horizontal seam across the top of the photograph. */
  position:absolute; right:0; bottom:5px; left:auto;
  top: calc(-1 * var(--hdr-h));
  width: 54vw;
  z-index:-1;
}
.hero-fig img{ width:100%; height:100%; object-fit:cover; object-position: 42% 50%; }
/* Feathered into the page rather than framed. Two gradients on two elements:
   a single element with two mask layers and mask-composite:intersect
   composites the first against a transparent backdrop and erases everything. */
.hero-fig::before,
.hero-fig::after{ content:''; position:absolute; inset:0; pointer-events:none; }
.hero-fig::before{
  background: linear-gradient(to right,
    var(--ink) 0%, var(--ink) 7%, rgba(10,10,11,.86) 19%, rgba(10,10,11,.36) 46%,
    rgba(10,10,11,.04) 84%, transparent 100%);
}
.hero-fig::after{
  background: linear-gradient(to bottom,
    rgba(10,10,11,.55) 0%, rgba(10,10,11,0) 22%, rgba(10,10,11,0) 56%, var(--ink) 100%);
}

.hero-in{
  width: min(var(--wrap), 100%);
  margin-inline:auto;
  padding: 96px var(--gut) 76px;
}
.hero-copy{ max-width: 640px; }

/* The badge at a size where its arc lettering actually resolves, carrying the
   slow sheen — light moving across a painted sign. */
.hero-badge{
  display:block;
  width: 108px; height:108px;
  margin: 0 0 26px -4px;
  color: var(--bone);
  position:relative; overflow:hidden;
}
.mark-sheen{
  position:absolute; top:-25%; bottom:-25%; left:0;
  width: 40%;
  background: linear-gradient(102deg, transparent, rgba(192,138,36,.95), transparent);
  translate: -160% 0;
}

/* The barber pole bolted beside their door, flattened into a rule. Square tile
   + 45deg stops is the one stripe that tiles seamlessly, so translating by
   exactly one tile width loops with no visible jump. */
.pole{
  position:absolute; left:0; right:0; bottom:0;
  height: 7px;
  overflow:hidden;
  border-top: 1px solid var(--line-2);
  background: #131217;
}
.pole i{
  display:block; height:100%;
  width: calc(100% + 34px);
  /* Bone, not gold: gold-on-black diagonals read as hazard tape, white-on-dark
     reads as the pole. */
  background-image: linear-gradient(45deg,
      var(--bone) 25%, transparent 25%, transparent 50%,
      var(--bone) 50%, var(--bone) 75%, transparent 75%);
  background-size: 34px 34px;
  opacity:.20;
}


/* ── the razor band ─────────────────────────────────────────────────────── */

.band{
  position:relative;
  min-height: 232px;
  display:flex; align-items:center;
  padding: 26px var(--gut) 0;
  width: min(var(--wrap), 100%);
  margin-inline:auto;
  overflow: clip;          /* clip, not hidden: hidden here would make this a
                              scroll container and view() would resolve to it */
}
.band-line{
  margin:0; position:relative; z-index:1;
  font-family: var(--f-disp);
  font-size: clamp(.78rem, 1.1vw, .9rem); font-weight:700; font-stretch:108%;
  letter-spacing:.22em; text-transform:uppercase;
  color: var(--gold-deep);
}
/* Bleeds off the right edge on purpose: it reads as the surface the section
   sits on, not as an icon dropped into a box. */
.band-razor{
  position:absolute; z-index:0; pointer-events:none;
  right:-11%; top:52%;
  width: min(66vw, 760px);
  translate: 0 -50%;
  rotate: -13deg;
}
.razor{ width:100%; height:auto; overflow:visible; }
/* No drop-shadow filter: the blade rotates forever, and a filter on a rotating
   element this size re-rasterises every frame. */
.razor .draw{
  stroke: var(--bone); stroke-width:1.6;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round;
  fill: #1c1d21;
}
.razor .handle{ fill:#232429; }
.razor .tang{ fill:#141418; }
.razor .edge{ stroke: var(--gold); stroke-width:1.6; fill:none; }
.razor .pivot{ fill: var(--gold-deep); stroke-width:1.3; }
.razor .blade-sheen{ opacity:0; }


/* ── sections ───────────────────────────────────────────────────────────── */

.sec{ padding: clamp(72px, 9vw, 132px) 0; scroll-margin-top: calc(var(--hdr-h) + 8px); }
.sec-head{ max-width: 46ch; margin-bottom: clamp(38px, 5vw, 62px); }
.sec-note{ color: var(--stone); margin: 20px 0 0; max-width: 44ch; }
.sec-foot{ margin: 40px 0 0; }


/* ── trabalho: column masonry, nothing cropped ──────────────────────────── */

.grid-masonry{ columns: 3; column-gap: 22px; }
.tile{ margin: 0 0 22px; break-inside: avoid; }
.tile img{ width:100%; background: var(--ink-2); }


/* ── serviços: their letreiro ───────────────────────────────────────────── */

.sec-sign{ background: var(--ink-2); border-block: 1px solid var(--line-2); }

.sign{
  position:relative; isolation:isolate;
  display:grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap: 40px;
  padding: 54px 48px 58px;
  background:
    radial-gradient(120% 150% at 50% -32%, rgba(239,236,230,.16), transparent 62%),
    linear-gradient(#2a262c, #211e24);
  border: 1px solid rgba(239,236,230,.10);
  box-shadow: 0 30px 70px -40px #000;
}
/* The single lamp bolted above the real sign. */
.sign::before{
  content:''; position:absolute; z-index:-1;
  left:50%; translate:-50% 0; top:-9px;
  width: 190px; height: 18px;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,236,196,.55), transparent 70%);
}

.sign-list{ list-style:none; margin:0; padding:0; }
.sign-list li{
  display:flex; align-items:baseline; gap: 13px;
  font-family: var(--f-disp);
  font-weight:600; font-stretch:96%;
  font-size: clamp(1.02rem, 1.5vw, 1.32rem);
  letter-spacing:.005em;
  padding: 6px 0;
  color: var(--bone);
}
/* A short gold stroke, the razor in their badge reduced to one mark. */
.sign-list li::before{
  content:''; flex:none;
  width: 15px; height: 2px; margin-top: .62em;
  background: var(--gold);
  rotate: -32deg;
}

.sign-mark{
  width: clamp(140px, 15vw, 196px);
  aspect-ratio: 1;
  color: rgba(239,236,230,.92);
}

.sign-contact{ text-align:right; }
.sign-lead{
  margin:0 0 6px;
  font-size:.86rem; color: rgba(239,236,230,.62);
}
.sign-phone{ margin:0 0 8px; }
.sign-phone a{
  font-family: var(--f-disp);
  font-weight:700; font-stretch:96%;
  font-size: clamp(1.3rem, 2.1vw, 1.72rem);
  letter-spacing:-.01em; text-decoration:none;
  border-bottom: 1px solid transparent;
}
.sign-phone a:hover{ border-bottom-color: var(--gold); }
.sign-handle{ margin:0; }
.sign-handle a{
  font-size:.92rem; color: rgba(239,236,230,.62);
  text-decoration:none; border-bottom:1px solid rgba(239,236,230,.22);
}
.sign-handle a:hover{ color: var(--bone); border-bottom-color: var(--bone); }


/* ── plano ──────────────────────────────────────────────────────────────── */

.plano-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.86fr);
  gap: 72px;
  align-items:center;
}
.plano-list{
  list-style:none; margin: 34px 0 0; padding:0;
  display:grid; gap: 2px;
}
.plano-list li{
  padding: 13px 0 13px 30px;
  border-bottom: 1px solid var(--line-2);
  position:relative;
  color: var(--bone);
}
.plano-list li:last-child{ border-bottom:0; }
.plano-list li::before{
  content:''; position:absolute; left:2px; top:22px;
  width:9px; height:9px;
  background: var(--gold-deep);
  rotate: 45deg;
}

.pull{
  margin: 40px 0 0; padding: 24px 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--f-disp);
  font-weight:700; font-stretch:96%;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height:1.15; letter-spacing:-.015em;
  color: var(--bone);
}
.pull cite{
  display:block; margin-top:12px;
  font-family: var(--f-body); font-style:normal;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--stone); font-weight:500;
}

.plano-card{
  padding: 34px 32px 32px;
  background:
    radial-gradient(120% 140% at 50% -30%, rgba(216,171,82,.10), transparent 60%),
    var(--ink-2);
  border: 1px solid var(--line);
}
.plano-card h3{ margin: 0 0 22px; }
.plano-plans{ list-style:none; margin:0; padding:0; }
.plano-plans li{
  display:grid;
  grid-template-columns: 2.2em minmax(0,1fr);
  row-gap: 3px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-2);
}
.plano-plans .n{
  grid-row: 1 / span 2;
  font-family: var(--f-disp);
  font-size:.72rem; font-weight:700; font-stretch:108%;
  letter-spacing:.14em; color: var(--gold-deep);
  padding-top: .35em;
}
.plano-plans .p{
  font-family: var(--f-disp);
  font-weight:800; font-stretch:96%;
  font-size: clamp(1.12rem, 1.7vw, 1.34rem);
  letter-spacing:-.015em; line-height:1.1;
}
.plano-plans .d{ font-size:.9rem; color: var(--stone); }
.plano-foot{ margin: 20px 0 18px; font-size:.9rem; color: var(--stone); }

.visit-fig figcaption{
  margin-top:14px; font-size:.85rem; color: var(--stone); line-height:1.45;
}


/* ── visitar ────────────────────────────────────────────────────────────── */

.visit-grid{
  display:grid;
  grid-template-columns: .82fr repeat(3, minmax(0,1fr));
  gap: 22px;
  align-items:start;
}
.card{
  padding: 30px 28px 32px;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
}
.card h3{ margin: 0 0 18px; }
.card p{ margin: 0 0 8px; }
.card p:last-child{ margin-bottom:0; }
.card .big{
  font-family: var(--f-disp);
  font-weight:800; font-stretch:96%;
  font-size: 1.32rem; line-height:1.15; letter-spacing:-.015em;
  margin-bottom: 10px;
}
.card .link-arrow{ display:inline-block; margin-top:10px; }

.hours{ margin:0; }
.hours div{
  display:flex; justify-content:space-between; gap:16px;
  padding: 12px 0; border-bottom:1px solid var(--line-2);
}
.hours div:last-child{ border-bottom:0; padding-bottom:0; }
.hours dt{ color: var(--stone); font-size:.94rem; }
.hours dd{
  margin:0; font-family: var(--f-disp); font-weight:700; font-stretch:100%;
  letter-spacing:.02em; white-space:nowrap;
}

.visit-fig{ margin:0; }
.visit-fig img{ width:100%; border:1px solid var(--line-2); }


/* ── footer ─────────────────────────────────────────────────────────────── */

.ftr{ border-top:1px solid var(--line); padding: 52px 0 64px; }
.ftr-in{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.ftr-mark{ width:52px; height:52px; flex:none; color: rgba(239,236,230,.5); }
.ftr-txt{ margin-right:auto; }
.ftr-name{
  margin:0 0 4px; font-family: var(--f-disp);
  font-weight:800; font-stretch:96%; font-size:1.05rem; letter-spacing:-.01em;
}
.ftr-txt .muted{ margin:0; font-size:.88rem; }
.ftr-links{ display:flex; gap:22px; margin:0; }
.ftr-links a{
  font-family: var(--f-disp); font-size:.76rem; font-weight:600; font-stretch:104%;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color: var(--stone);
}
.ftr-links a:hover{ color: var(--gold); }


/* ==========================================================================
   Motion. Every starting state below is gated behind html.js, set by an
   inline script in <head>: a visitor whose JS never runs sees the whole page.
   ========================================================================== */

@keyframes rise{
  from{ opacity:0; translate: 0 22px; }
  to  { opacity:1; translate: 0 0; }
}
@keyframes sheen{
  0%,   62% { translate: -140% 0; }
  100%      { translate:  260% 0; }
}
@keyframes pole-run{
  from{ translate: 0 0; }
  to  { translate: -34px 0; }   /* exactly one tile of background-size */
}

.mark-sheen{ animation: sheen 9s cubic-bezier(.5,0,.5,1) infinite; }
.pole i{ animation: pole-run 1.6s linear infinite; }

/* ── the razor ──────────────────────────────────────────────────────────────
   Start states behind html.js, like everything else: without JavaScript the
   razor is simply drawn and still. Only rotate, translate and opacity are
   animated, so the whole thing stays on the compositor. */
@keyframes ink-stroke{ from{ stroke-dashoffset:1; fill-opacity:0 } to{ stroke-dashoffset:0; fill-opacity:1 } }
@keyframes blade-cycle{
  0%   { rotate: 168deg; animation-timing-function: cubic-bezier(.32,1.06,.3,1); }
  12%  { rotate: 0deg; }
  76%  { rotate: 0deg; animation-timing-function: cubic-bezier(.6,0,.4,1); }
  87%  { rotate: 168deg; }
  100% { rotate: 168deg; }
}
@keyframes blade-sheen{
  0%, 16%  { translate: 250px 0; opacity:0; }
  20%      { opacity:1; }
  42%      { translate: -90px 0; opacity:0; }
  100%     { translate: -90px 0; opacity:0; }
}
@keyframes razor-drift{
  from{ rotate: -13deg; translate: 0 -50%; }
  to  { rotate: -11.4deg; translate: 0 calc(-50% - 11px); }
}

html.js .razor .draw{ stroke-dasharray:1; stroke-dashoffset:1; fill-opacity:0; }
html.js .razor-blade{ transform-origin: 243px 65px; rotate: 168deg; }
html.js .band-razor{ animation: razor-drift 13s 1s ease-in-out infinite alternate; }
html.js .razor .blade-sheen{ animation: blade-sheen 15s 1.4s infinite both; }
html.js .razor-blade{ animation: blade-cycle 15s 1.4s infinite both; }

/* Drawn in the order a hand would draw it: handle, pivot, tang, blade, edge.
   `.drawn` is set by app.js when the band first scrolls in — a plain class, not
   a scroll timeline, because view() on an element inside an <svg> is not
   something to bet the page's only real animation on. */
html.js .band-razor.drawn .handle{ animation: ink-stroke .85s .05s ease-out forwards; }
html.js .band-razor.drawn .pivot { animation: ink-stroke .30s .70s ease-out forwards; }
html.js .band-razor.drawn .tang  { animation: ink-stroke .40s .85s ease-out forwards; }
html.js .band-razor.drawn .blade { animation: ink-stroke 1.0s .95s ease-out forwards; }
html.js .band-razor.drawn .edge  { animation: ink-stroke .90s 1.5s ease-out forwards; }

/* Scroll-driven where available: the reveal is scrubbed by scroll position and
   runs off the main thread. `both` supplies the hidden start state, so nothing
   is hidden unless the animation itself is running.
   Wrapped in a no-preference query rather than being switched off later: the
   selector below carries three classes, so a plainer reduced-motion override
   would lose on specificity no matter where it sits in the file. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    html.js:not(.no-sdt) .reveal{
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
  }
}
/* Fallback branch, same choreography via a class from app.js. */
html.js.no-sdt .reveal{
  opacity:0; translate: 0 22px;
  transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1);
}
html.js.no-sdt .reveal.in{ opacity:1; translate: 0 0; }

@media (prefers-reduced-motion: reduce){
  .mark-sheen, .pole i{ animation:none; }
  .mark-sheen{ opacity:0; }
  html.js .razor .draw,
  html.js .band-razor.drawn .handle,
  html.js .band-razor.drawn .pivot,
  html.js .band-razor.drawn .tang,
  html.js .band-razor.drawn .blade,
  html.js .band-razor.drawn .edge{
    animation:none; stroke-dashoffset:0; fill-opacity:1;
  }
  html.js .razor-blade{ animation:none; rotate: 0deg; }
  html.js .band-razor{ animation:none; }
  html.js .razor .blade-sheen{ animation:none; opacity:0; }
  html.js .reveal,
  html.js.no-sdt .reveal{ animation:none; opacity:1; translate:none; transition:none; }
  .hdr-cta{ transition:none; }
}


/* ==========================================================================
   Narrower viewports. Base rules are declared above these, never below.
   ========================================================================== */

@media (max-width: 1000px){
  .grid-masonry{ columns: 2; }

  .plano-grid{ grid-template-columns: minmax(0,1fr); gap: 44px; }

  .sign{
    grid-template-columns: minmax(0,1fr) auto;
    gap: 28px 36px;
    padding: 44px 34px 46px;
  }
  .sign-contact{ grid-column: 1 / -1; text-align:left; padding-top: 4px;
                 border-top: 1px solid rgba(239,236,230,.12); }

  .visit-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* Must stay in step with this image's `sizes`: its only master is a 640px
     video frame, so 300px is the widest slot it can cover at 2x. */
  .visit-fig{ max-width: 300px; }
}

/* Below this the photo can no longer share the width with the type, so it goes
   full-bleed behind it and the copy sits over the darkened lower half. */
@media (max-width: 900px){
  /* The photograph stops sharing space with the type and becomes a band above
     it. Behind the copy it is unreadable here anyway: in a tall narrow box a
     3:4 portrait shows its whole height, so the middle of the frame — the head
     and the comb — lands exactly where the text has to be legible. */
  .hero{ min-height: 0; justify-content: flex-start; }
  .hero-fig{
    position: relative; inset: auto; width: auto; z-index: 0;
    height: min(46svh, 380px);
    margin-top: calc(-1 * var(--hdr-h));
  }
  .hero-fig img{ object-position: 52% 38%; }
  .hero-fig::before{
    background: linear-gradient(to bottom,
      rgba(10,10,11,.66) 0%, rgba(10,10,11,.12) 26%, rgba(10,10,11,.10) 52%, var(--ink) 100%);
  }
  .hero-fig::after{ background:none; }
  .hero-in{ padding-top: 24px; padding-bottom: 62px; }
  .hero-badge{ width: 84px; height:84px; margin-bottom: 20px; }
}

@media (max-width: 760px){
  .nav{ display:none; }
  .hero .cta-row{ flex-direction: column; align-items: stretch; }
  .hero .cta-row .btn{ width:100%; }
}

@media (max-width: 640px){
  :root{ --gut: 20px; }
  body{ font-size:16px; }
  .grid-masonry{ columns: 1; }
  .tile{ margin-bottom:14px; }
  .grid-masonry{ column-gap:14px; }
  .visit-grid{ grid-template-columns: minmax(0,1fr); }
  .sign{ grid-template-columns: minmax(0,1fr); padding: 34px 24px 38px; gap: 26px; }
  .sign-mark{ width: 132px; justify-self:start; }
  .hours div{ flex-direction: column; gap: 2px; }
  .hours dt{ font-size:.86rem; }
  .ftr-in{ gap:18px; }
  .ftr-links{ width:100%; }
}