/* ═══════════════════════════════════════════════════════════════════════════
   DS Barber Studio
   One cream ground, the shop's own: plaster walls, bouclé, travertine,
   black leather, and walnut shelves lit from beneath.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* The room. Lifted from the photographs' own walls, sofa and floor. */
  --cream:       #F3ECDF;   /* plaster wall in daylight — the ground */
  --mat:         #FAF6EE;   /* the pale mat inside a framed print */
  --boucle:      #E9DFCC;   /* the sofa */
  --travertine:  #DDD0B8;   /* the floor */

  /* Brand, read from the logo source file. Ink is also the leather chairs. */
  --ink:         #1D1D1B;
  --taupe:       #A38F7A;

  /* The shelves: walnut, and the warm strip light underneath each one. */
  --walnut:      #6E4724;
  --glow:        #F2B85E;

  /* The lit backing behind the shelves: honey, brighter under the strip
     light and deepening toward the shelf below. Walnut type sits on it. */
  --honey:       #E8CB93;
  --honey-lit:   #F0D8A8;
  --walnut-deep: #3B2714;   /* 9.0:1 on honey */

  /* Secondary ink, tinted from the ground rather than greyed. */
  --ink-2:       #574A3C;   /* 7.3:1 on cream */
  --ink-3:       #75614E;   /* 4.7:1 on cream — labels only */

  --rule:        color-mix(in srgb, var(--taupe) 55%, transparent);

  --serif: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
  --sans:  'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;

  --gut:   clamp(1rem, 5vw, 4.5rem);
  --mat-w: clamp(8px, 1.1vw, 16px);

  /* The Studio's gallery: one hanging height and one gap for every photo.
     The height is whatever makes a 3:2 beside a 2:3 (widths summing to
     2.1667 × height) exactly fill the content width, so every row lands on
     the gutters and the strip hangs at the same height. The svh cap only
     bites on unusually wide, short screens. */
  --photo-gap: clamp(10px, 1.2vw, 16px);
  --photo-sum: 2.1667;
  --photo-cap: 80svh;
  --ease:  cubic-bezier(.16, 1, .3, 1);

  /* Scroll-driven. The default leaves every page whole without JS. */
  --cx: 0px;
}

/* ─────────────────────────────  base + reset  ───────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.68;
  caret-color: var(--walnut);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video { display: block; max-width: 100%; }
figure { margin: 0; }
p { margin: 0; }
h1, h2 { margin: 0; font-size: inherit; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--glow); color: var(--ink); }

html { scrollbar-color: var(--taupe) var(--boucle); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--boucle); }
::-webkit-scrollbar-thumb { background: var(--taupe); border: 3px solid var(--boucle); }
::-webkit-scrollbar-thumb:hover { background: var(--walnut); }

:focus-visible { outline: 2px solid var(--walnut); outline-offset: 4px; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: var(--taupe); }

.skip {
  position: fixed; inset-block-start: .5rem; inset-inline-start: .5rem;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--ink); color: var(--cream);
  padding: .7rem 1.1rem;
  font: 500 .78rem/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }

[hidden] { display: none !important; }

.label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .7rem;
}

/* ─────────────────────────────  the lit shelf  ──────────────────────────── */
/* The one recurring mark. Every shelf in the room is a walnut edge with an LED
   strip under it, so light falls downward onto whatever sits below: a walnut
   rule, and a warm wash under it that is brightest at the edge and gone within
   a finger's width. */

.shelf-link {
  position: relative;
  text-decoration: none;
  padding-bottom: .42em;
}
.shelf-link::before,
.shelf-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
}
.shelf-link::before {
  bottom: 0;
  height: 2px;
  background: var(--taupe);
  transform: scaleY(.5);
  transform-origin: bottom;
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.shelf-link::after {
  top: 100%;
  height: .9em;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--glow) 62%, transparent),
    color-mix(in srgb, var(--glow) 18%, transparent) 45%,
    transparent);
  opacity: 0;
  transform: scaleY(.4);
  transform-origin: top;
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.shelf-link:hover::before,
.shelf-link:focus-visible::before { transform: none; background: var(--walnut); }
.shelf-link:hover::after,
.shelf-link:focus-visible::after { opacity: 1; transform: none; }

/* ────────────────────────────  the button  ──────────────────────────────── */
/* Black leather, and it lights like a shelf when you reach for it. */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .9em;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(.76rem, .72rem + .2vw, .86rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 1.3em 1.8em 1.22em;
  transition: background .4s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 1.1em;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--glow) 55%, transparent), transparent);
  opacity: 0;
  transform: scaleY(.3);
  transform-origin: top;
  transition: opacity .5s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.btn:hover { background: var(--walnut); }
.btn:hover::after, .btn:focus-visible::after { opacity: 1; transform: none; }

.arrow {
  width: 1.8em; height: .9em; overflow: visible; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square;
  transition: transform .45s var(--ease);
}
.btn:hover .arrow { transform: translateX(.3em); }

/* ────────────────────────────  the masthead  ────────────────────────────── */
/* Centred, like a house's name over its door. It scrolls away with the page;
   nothing follows the visitor down. */

.mast {
  padding: clamp(.9rem, 2.4vh, 1.6rem) var(--gut) 0;
  view-transition-name: mast;
}

/* Home alone hangs its masthead over the film. It is laid over, not fixed:
   it still scrolls away with the page, as it does on every other page. */
.page--home { position: relative; }
.page--home .mast {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  padding-top: clamp(1rem, 2.6vh, 1.8rem);
}
.page--home .mast__hours,
.page--home .mast__book,
.page--home .tabs a { color: color-mix(in srgb, var(--mat) 92%, transparent); }
.page--home .tabs a:hover,
.page--home .tabs a[aria-current] { color: var(--mat); }
.page--home .tabs { border-color: color-mix(in srgb, var(--mat) 26%, transparent); }
.page--home .hours__dot { background: color-mix(in srgb, var(--mat) 52%, transparent); }
.page--home .hours[data-state="open"] .hours__dot { background: var(--glow); }
.page--home .mast__book.shelf-link { color: color-mix(in srgb, var(--mat) 92%, transparent); }
.page--home .mast__book.shelf-link::before { background: color-mix(in srgb, var(--mat) 45%, transparent); }

.mast__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.mast__logo { justify-self: center; line-height: 0; }
.mast__logo img { width: clamp(78px, 8.2vw, 116px); height: auto; }

.mast__hours { justify-self: start; }

.mast__book {
  justify-self: end;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem clamp(1.15rem, 3.6vw, 3.4rem);
  margin-top: clamp(.9rem, 2.2vh, 1.4rem);
  padding: .95rem 0 1.05rem;
  border-block: 1px solid var(--rule);
}
.tabs a {
  position: relative;
  padding-bottom: .5em;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  transition: color .3s var(--ease);
}
.tabs a::before, .tabs a::after {
  content: ""; position: absolute; left: 0; right: .2em; pointer-events: none;
}
.tabs a::before {
  bottom: 0; height: 2px; background: var(--walnut);
  transform: scaleX(0);
  transition: transform .5s var(--ease);
}
.tabs a::after {
  top: 100%; height: 1em;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--glow) 70%, transparent),
    color-mix(in srgb, var(--glow) 16%, transparent) 50%,
    transparent);
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.tabs a:hover { color: var(--ink); }
.tabs a:hover::before { transform: scaleX(.5); }
.tabs a[aria-current] { color: var(--ink); }
.tabs a[aria-current]::before { transform: none; }
.tabs a[aria-current]::after { opacity: 1; }

/* ─────────────────────────────  the hours  ──────────────────────────────── */

.hours {
  display: flex;
  align-items: center;
  font-family: var(--sans);
  font-weight: 400;
  font-size: .86rem;
  letter-spacing: .02em;
  color: var(--ink-2);
}
.hours__dot {
  width: .46em; height: .46em; border-radius: 50%;
  background: var(--taupe);
  margin-right: .7em;
  flex: none;
}
.hours[data-state="open"] { color: var(--ink); }
.hours[data-state="open"] .hours__dot {
  background: var(--glow);
  box-shadow: 0 .15em .5em color-mix(in srgb, var(--glow) 80%, transparent);
}

/* ─────────────────────────────  honey bands  ────────────────────────────── */
/* The Studio only. A shelf's lit backing: the walnut edge on top, the strip light
   just under it, and honey deepening downward. */

.band--honey {
  position: relative;
  background: linear-gradient(to bottom, var(--honey-lit), var(--honey) 62%);
  color: var(--walnut-deep);
  border-top: 0;
  --ink-2: #5A3E24;         /* 6.2:1 on honey */
  --rule:  color-mix(in srgb, var(--walnut) 34%, transparent);
}
.band--honey::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: clamp(31px, calc(5vh + 3px), 51px);
  background: linear-gradient(to bottom,
    var(--walnut) 0 3px,
    color-mix(in srgb, var(--glow) 50%, transparent) 3px,
    transparent);
  pointer-events: none;
}
.band--honey .shelf-link { color: inherit; }
.band--honey .shelf-link::before { background: color-mix(in srgb, var(--walnut) 55%, transparent); }
.band--honey ::selection { background: var(--walnut-deep); color: var(--honey-lit); }

/* ─────────────────────────────  framed prints  ──────────────────────────── */
/* The shop's walls carry black-framed prints on a pale mat. The films and the
   portrait hang the same way. */

.print {
  position: relative;
  background: var(--mat);
  padding: var(--mat-w);
  border: 2px solid var(--ink);
  box-shadow: 0 22px 44px -30px rgba(29, 29, 27, .55);
}
.print img, .print video { width: 100%; height: auto; }

/* Films hang unframed everywhere, so the flow stays the same from page to
   page; the About portrait is the one hung print left. */
.film__frame { position: relative; overflow: hidden; background: var(--ink); }
.film__frame > video, .film__frame > .film__still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.row__item--film { position: relative; }

/* ───────────────────────────────  HOME  ─────────────────────────────────── */

/* The opening: one film, whole, on a dark stage — the screen is masked to the
   cut's shape rather than the window's, so the frame is never cropped by the
   browser. The desktop file is a 4:3 cut taken straight from the source at its
   native 1080 × 810; phones get the vertical original, uncut. */
.cine {
  position: relative;
  height: 100svh;
  min-height: 460px;
  overflow: hidden;
  background: #191009;
  border-bottom: 1px solid var(--rule);
}
.cine__film {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}
.cine__film > video, .cine__film > .film__still, .cine__film img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Nothing is cropped until the screen is short and wide and the min-width
     above takes over; when it does, the head is what has to stay. */
  object-position: 50% 36%;
}
/* The masthead hangs over the head of the film, so the film carries a shade
   there too. Its stops are in rem, not percentages, because what has to stay
   readable is the masthead's own height — small uppercase type, which needs
   4.5:1 and gets it on the film's brightest frame. */
.cine__film::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(25, 16, 9, .78) 0,
    rgba(25, 16, 9, .68) 9rem,
    rgba(25, 16, 9, .63) 13rem,
    rgba(25, 16, 9, 0) 19rem);
  pointer-events: none;
}
/* The words sit in their own pool of shade, warm rather than grey: it rises
   from the foot of the film, and deepens into the corner the words occupy so
   the face on the right keeps its light. Both end in the masking's own colour,
   so the foot of the film and the masking meet without a seam. Measured on the
   film's brightest frame, the worst pixel behind the headline reads 3.9:1. */
.cine__film::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 0% 100%, rgba(25, 16, 9, .62), rgba(25, 16, 9, 0) 85%),
    linear-gradient(to top, rgba(25, 16, 9, .92), rgba(25, 16, 9, .62) 28%, rgba(25, 16, 9, 0) 62%);
  pointer-events: none;
}
.cine__say {
  position: absolute;
  z-index: 2;
  left: var(--gut); right: var(--gut);
  bottom: clamp(1.6rem, 5vh, 3.4rem);
  display: grid;
  justify-items: start;
  gap: clamp(1rem, 2.6vh, 1.8rem);
}
/* The lit shelf again: a walnut mark with its light falling down the screen. */
.cine__rule { width: clamp(56px, 6vw, 92px); height: 2px; background: var(--walnut); position: relative; }
.cine__rule::after {
  content: "";
  position: absolute; left: -25%; right: -25%; top: 100%; height: 14px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--glow) 72%, transparent), transparent);
}
.cine__line {
  margin: 0;
  color: var(--mat);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 6.2rem);
  line-height: .94;
  letter-spacing: -.035em;
}
.cine__line em { font-style: normal; display: block; color: color-mix(in srgb, var(--mat) 82%, transparent); }
/* Book carries the lit shelf here too: a walnut edge with its light falling
   onto the footage. */
.cine__say .btn { background: var(--mat); color: var(--ink); box-shadow: inset 0 -2px 0 var(--walnut); }
.cine__say .btn::after { opacity: 1; transform: none; }
.cine__say .btn:hover { background: var(--glow); }

/* Bodoni ends its g in a ball ear, detached from the bowl, which reads as a
   full stop when a line ends on it. Measured off the served font: the ear is
   the only ink right of 0.418em above the x-height, and the bowl never passes
   0.407em, so a notch takes the ear and leaves bowl, link and tail whole. The
   span sits on a zero line box so it cannot lift the line it is in. */
.g-ear {
  display: inline-block;
  line-height: 0;
  clip-path: polygon(-.2em -.7em, .385em -.7em, .385em -.0475em, .418em .0375em,
                     1.2em .0375em, 1.2em .7em, -.2em .7em);
}

/* The review line: both ratings, read live from Fresha and Google by
   tools/update-ratings.js. Stars fill to the real score, never rounded up. */
.proof {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(1.6rem, 4vh, 2.4rem) var(--gut);
  border-top: 1px solid var(--rule);
}
.proof__item {
  display: flex;
  align-items: baseline;
  gap: .2em .6em;
  text-decoration: none;
}
.proof__item:hover .rating__from, .proof__item:focus-visible .rating__from { color: var(--walnut); }
.proof__sep { width: 1px; height: 2.2rem; background: var(--rule); }

.stars { position: relative; display: block; width: clamp(64px, 5.4vw, 76px); align-self: center; flex: none; }
.stars svg { display: block; width: 100%; height: auto; }
.stars__base { fill: color-mix(in srgb, var(--taupe) 45%, transparent); }
.stars__fill { position: absolute; inset: 0; fill: var(--ink); clip-path: inset(0 calc(100% - var(--r) * 20%) 0 0); }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.rating__score {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.rating__from { color: var(--ink-2); font-size: clamp(.94rem, .9rem + .2vw, 1.04rem); transition: color .3s var(--ease); }

/* The rooms index: four doors off the hall. */
/* Four doors off the hall, each standing in its own room. A wide section can
   only show a band of a tall photograph, so the photographs are given their
   own width instead and keep their full height. */
.rooms {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #191009;
  border-block: 1px solid var(--rule);
}
.rooms__title {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  margin: 0;
  padding: clamp(1.8rem, 5vh, 3rem) var(--gut) clamp(3rem, 7vh, 4.5rem);
  background: linear-gradient(to bottom,
    rgba(25, 16, 9, .94) 0,
    rgba(25, 16, 9, .88) 46%,
    rgba(25, 16, 9, .55) 72%,
    rgba(25, 16, 9, 0) 100%);
  pointer-events: none;
}
.rooms__list { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 0; }

.rooms__title {
  color: var(--mat);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.028em;
  margin-bottom: clamp(1.6rem, 4.5vh, 3rem);
}


.room-link {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: end;
  align-items: center;
  column-gap: 1.25rem;
  min-height: min(84svh, 840px);
  padding: clamp(1.4rem, 4vh, 2.2rem) clamp(1rem, 1.8vw, 1.8rem);
  border-left: 1px solid color-mix(in srgb, var(--mat) 18%, transparent);
  text-decoration: none;
}
.room-link:first-child { border-left: 0; }
/* The photograph is the door. It rests a little in shadow and comes up to full
   light under the pointer, so the one you are choosing is the lit one. */
.room-link__thumb {
  position: absolute; inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Side by side the whole photograph fits, so --aim does nothing here; it is
     what keeps a face in frame when the doors stack on a phone. */
  object-position: 50% var(--aim, 50%);
  filter: brightness(.82);
  transition: filter .6s var(--ease), transform 1.2s var(--ease);
}
.room-link::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(25, 16, 9, .92), rgba(25, 16, 9, .3) 46%, rgba(25, 16, 9, .1));
}
.room-link__name, .room-link .arrow { position: relative; z-index: 2; }
.room-link:hover .room-link__thumb,
.room-link:focus-visible .room-link__thumb { filter: brightness(1.04); transform: scale(1.03); }
.room-link__name {
  grid-column: 1;
  color: color-mix(in srgb, var(--mat) 80%, transparent);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -.022em;
  transition: color .35s var(--ease), transform .6s var(--ease);
}
.room-link .arrow {
  grid-column: 2; grid-row: 1;
  width: 2.2rem; height: 1rem;
  stroke: color-mix(in srgb, var(--mat) 74%, transparent);
  stroke-width: 1.2;
  opacity: .66;
  transition: opacity .4s var(--ease), transform .5s var(--ease), stroke .4s var(--ease);
}
.room-link:hover .room-link__name,
.room-link:focus-visible .room-link__name { color: var(--mat); transform: translateX(.35rem); }
.room-link:hover .arrow,
.room-link:focus-visible .arrow { stroke: var(--glow); opacity: 1; transform: translateX(.3rem); }

/* ─────────────────────────────  page heads  ─────────────────────────────── */

.page-head {
  padding: clamp(3rem, 10vh, 7.5rem) var(--gut) clamp(2.5rem, 7vh, 5rem);
  text-align: center;
  display: grid;
  justify-items: center;
}
.page-head__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 8.4vw, 7.2rem);
  line-height: .95;
  letter-spacing: -.035em;
}
/* The lit shelf at title scale: a short walnut rule, and the strip light
   pooling beneath its middle. It draws out from the centre on arrival. */
.page-head__rule {
  position: relative;
  display: block;
  width: clamp(64px, 6.5vw, 96px);
  height: 2px;
  margin-top: clamp(1.2rem, 3vh, 1.8rem);
  background: var(--walnut);
}
.page-head__rule::after {
  content: "";
  position: absolute;
  left: -35%; right: -35%;
  top: 100%;
  height: 18px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--glow) 70%, transparent),
    color-mix(in srgb, var(--glow) 18%, transparent) 45%,
    transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 30%, var(--ink) 70%, transparent);
          mask-image: linear-gradient(to right, transparent, var(--ink) 30%, var(--ink) 70%, transparent);
  pointer-events: none;
}
.js .page-head__rule { transform: scaleX(0); }
.js .page-head__rule::after { opacity: 0; }
.js.is-ready .page-head__rule {
  transform: none;
  transition: transform 1.3s var(--ease) .25s;
}
.js.is-ready .page-head__rule::after {
  opacity: 1;
  transition: opacity 1.1s var(--ease) .75s;
}

.page-head__lead {
  margin-top: clamp(1.1rem, 3vh, 1.8rem);
  max-width: 44ch;
  color: var(--ink-2);
  font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem);
  line-height: 1.6;
  text-wrap: balance;
}

/* ─────────────────────────────  photographs  ────────────────────────────── */

.plate img { width: 100%; height: auto; }
.plate--full { padding-inline: var(--gut); }
.plate--full img { max-height: 92svh; object-fit: cover; }


/* Gallery rows. Each photo's width follows its own proportions, so a row
   shares one height with no cropping, and every row on the page hangs at the
   same height until the width runs out. */
.row {
  container-type: inline-size;
  display: flex;
  gap: var(--photo-gap);
  margin: 0 var(--gut) var(--photo-gap);
}
.row--single { justify-content: center; }
.row__item {
  flex: none;
  height: min(var(--photo-cap), calc((100cqw - (var(--n, 2) - 1) * var(--photo-gap)) / var(--photo-sum)));
  aspect-ratio: var(--ar);
}
.row__item picture, .row__item img, .row__item video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The Work's finished cuts: three photographs and two short films in one row. */
.finished { padding: clamp(3rem, 9vh, 6rem) 0; }

.chapter { padding-bottom: clamp(2rem, 6vh, 4rem); }
/* No heading: the photographs say it. The gap alone separates the group. */
.chapter--mono { padding-top: clamp(3rem, 9vh, 6rem); }
.chapter__head {
  display: grid;
  gap: clamp(.8rem, 2vh, 1.2rem);
  padding: clamp(3rem, 9vh, 6rem) var(--gut) clamp(1.8rem, 5vh, 3rem);
  max-width: 60rem;
}
.chapter__title {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.4rem, 5.6vw, 4.8rem);
  line-height: 1;
  letter-spacing: -.028em;
}

/* ───────────────────────────────  WORK  ─────────────────────────────────── */

.craft { position: relative; }
.craft__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
@media (prefers-reduced-motion: no-preference) {
  .js .craft__stage { overflow: hidden; scrollbar-width: none; }
  .js .craft__stage::-webkit-scrollbar { display: none; }
}
.craft__track {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.6rem);
  padding-inline: var(--gut);
  transform: translate3d(calc(var(--cx) * -1), 0, 0);
  will-change: transform;
}
.craft__frame { flex: none; height: clamp(300px, 70svh, 720px); }
.craft__frame picture { display: block; height: 100%; }
.craft__frame img { height: 100%; width: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.craft--level .craft__stage {
  container-type: inline-size;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(1.2rem, 3vh, 2rem);
}
.craft__title {
  padding-inline: var(--gut);
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.4rem, 5.6vw, 4.8rem);
  line-height: 1;
  letter-spacing: -.028em;
}
/* max-content keeps both gutters inside the track, so the strip's last photo
   comes to rest on the same margin its first one starts from. */
.craft--level .craft__track { align-self: flex-start; width: max-content; gap: var(--photo-gap); }
/* Same height as the rows: the stage is the full width, the rows sit inside the gutters. */
.craft--level .craft__frame { height: min(var(--photo-cap), calc((100cqw - 2 * var(--gut) - var(--photo-gap)) / var(--photo-sum))); }
.craft__frame:nth-of-type(odd)  { transform: translateY(calc(-1 * clamp(10px, 3.5svh, 40px))); }
.craft__frame:nth-of-type(even) { transform: translateY(clamp(10px, 3.5svh, 40px)); }
.craft--level .craft__frame { transform: none; }

/* The cut runs behind the whole menu, and the shade deepens into the words. */
.menu {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #191009;
  border-block: 1px solid var(--rule);
}
/* The cut runs behind the whole menu and the words stand on it. A wide band
   of a vertical film only ever shows a slice of it, so the section is given
   real height — the deeper it is, the more of the cut is in it. */
.menu__film {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.menu::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(25, 16, 9, .92), rgba(25, 16, 9, .7) 52%, rgba(25, 16, 9, .2) 86%),
    linear-gradient(to top, rgba(25, 16, 9, .45), rgba(25, 16, 9, 0) 55%);
}
.menu__col {
  position: relative;
  z-index: 2;
  max-width: 56rem;
  min-height: min(96svh, 980px);
  display: grid;
  align-content: center;
  padding: clamp(5rem, 14vh, 9rem) var(--gut);
}
.menu__film > video, .menu__film > .film__still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* aimed so the band holds both the barber's hands and the client's head */
  object-position: 50% 40%;
}

.menu__title {
  color: var(--mat);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.028em;
  margin-bottom: clamp(1.6rem, 4.5vh, 3rem);
}
.menu__list { border-top: 1px solid color-mix(in srgb, var(--mat) 26%, transparent); }

.svc {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: clamp(1rem, 2.4vw, 2rem);
  padding: clamp(.95rem, 2.3vh, 1.45rem) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--mat) 26%, transparent);
  text-decoration: none;
}
.svc__name {
  color: color-mix(in srgb, var(--mat) 82%, transparent);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.018em;
  transition: color .35s var(--ease);
}
.svc .arrow {
  width: 1.9rem; height: .9rem;
  stroke: color-mix(in srgb, var(--mat) 74%, transparent);
  stroke-width: 1.2;
  align-self: center;
  opacity: .62;
  transition: opacity .4s var(--ease), transform .5s var(--ease), stroke .4s var(--ease);
}
.svc:hover .svc__name, .svc:focus-visible .svc__name { color: var(--mat); }
.svc:hover .arrow, .svc:focus-visible .arrow { stroke: var(--glow); opacity: 1; transform: translateX(.3rem); }

.menu__more { margin-top: clamp(1.3rem, 3.4vh, 2rem); color: color-mix(in srgb, var(--mat) 64%, transparent); max-width: 44ch; }
.menu__more .shelf-link { color: var(--mat); font-weight: 400; }
.menu__more .shelf-link::before { background: color-mix(in srgb, var(--mat) 45%, transparent); }

/* ───────────────────────────────  ABOUT  ────────────────────────────────── */

.story {
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding: clamp(3rem, 9vh, 6.5rem) var(--gut) clamp(3.5rem, 10vh, 7rem);
  align-items: start;
}
.story__portrait img { aspect-ratio: 2 / 3; object-fit: cover; }

.story__text { max-width: 36rem; }
.story__text > p + p { margin-top: 1.15em; }

.story__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 7.4vw, 6.4rem);
  line-height: .95;
  letter-spacing: -.035em;
  margin-bottom: clamp(1.4rem, 4vh, 2.4rem);
}
.story__lead {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.15rem + .9vw, 1.9rem);
  line-height: 1.32;
  letter-spacing: -.012em;
}
.story__text > .story__lead { margin-bottom: 1.4em; }
.story__text > p:not([class]) { color: var(--ink-2); font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); }

.story__text > .story__motto {
  margin-block: clamp(2rem, 6vh, 3.5rem);
  padding-block: clamp(1.4rem, 4vh, 2.2rem);
  border-block: 1px solid var(--rule);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.8rem);
  line-height: 1.3;
  letter-spacing: -.02em;
}

.plate--story img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 30% 40%; }

/* ───────────────────────────────  VISIT  ────────────────────────────────── */

.visit {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: 0 var(--gut) clamp(3.5rem, 10vh, 7rem);
  align-items: start;
}

.visit__map {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--ink);
  background: var(--boucle);
}
/* Toned into the room — desaturated and warmed so it hangs on the cream like
   a print — and back to full colour the moment someone reaches for it. */
.visit__map iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(1) sepia(.28) contrast(.94) brightness(1.02);
  transition: filter .6s var(--ease);
}
.visit__map:hover iframe, .visit__map:focus-within iframe { filter: none; }

.visit__details { display: grid; gap: clamp(1.8rem, 4.5vh, 2.6rem); }
.visit__block > p:not(.label) + p { margin-top: .7rem; }
.visit__block .shelf-link { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); font-weight: 400; }

.hours--line { font-size: 1rem; margin-bottom: 1rem; }

.week { border-top: 1px solid var(--rule); max-width: 26rem; }
.week li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .2rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  font-variant-numeric: lining-nums tabular-nums;
}
/* Today, lit like a shelf. */
.week li.is-today {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 2px solid var(--walnut);
  background: linear-gradient(to top, color-mix(in srgb, var(--glow) 30%, transparent), transparent 75%);
}

.visit__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem 2rem; }
.visit__dir {
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}


/* ─────────────────────────────  the close  ──────────────────────────────── */

.close {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(1.4rem, 3.6vh, 2.2rem);
  padding: clamp(4.5rem, 14vh, 10rem) var(--gut);
}
.close__line {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.close__note { color: var(--ink-2); font-size: .94rem; }

/* ─────────────────────────────────  FOOTER  ─────────────────────────────── */
/* The travertine floor, with the shelf's walnut edge and its light along the
   top. The grain is the shop's own stone, high-passed. */

.foot {
  position: relative;
  background-color: var(--travertine);
  background-image: url(../img/stone-grain.webp);
  background-size: 250px;
  background-blend-mode: overlay;
  color: var(--ink);
  padding: clamp(3rem, 8vh, 5rem) var(--gut) clamp(1.6rem, 4vh, 2.4rem);
}
/* The shelf and its light are one object: the walnut edge, then the wash. */
.foot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: clamp(31px, calc(5vh + 3px), 51px);
  background: linear-gradient(to bottom,
    var(--walnut) 0 3px,
    color-mix(in srgb, var(--glow) 42%, transparent) 3px,
    transparent);
  pointer-events: none;
}

.foot__inner {
  position: relative;
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
}
.foot__mark { line-height: 0; justify-self: start; }
.foot__mark img { width: clamp(76px, 7vw, 96px); height: auto; }
.foot__col p:not(.label) { font-size: .96rem; line-height: 1.7; color: var(--ink-2); }
/* Days and times in two aligned columns, so Sunday can never read as sharing
   the weekday hours. */
.foot__hours {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 1.6rem;
  row-gap: .3rem;
  margin: 0;
  font-size: .96rem;
  line-height: 1.6;
  color: var(--ink-2);
  font-variant-numeric: lining-nums tabular-nums;
}
.foot__hours dt { color: var(--ink); }
.foot__hours dd { margin: 0; }
.foot__col a { text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.foot__col a:hover { color: var(--walnut); text-decoration-color: var(--walnut); }
.foot .label { color: var(--ink-2); }

.social { display: grid; gap: .45rem; }
.social a {
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: color .3s var(--ease);
}
.social a:hover { color: var(--walnut); }

.foot__base {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: clamp(2.4rem, 6vh, 3.6rem);
  padding-top: 1.2rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  font-size: .86rem;
  color: var(--ink-2);
}
.foot__nav { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.foot__nav a {
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
}
.foot__nav a:hover { color: var(--walnut); }

/* ────────────────────────────────  motion  ──────────────────────────────── */

/* Tabs change like rooms: the content cross-fades, the masthead holds. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .3s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(10px); } }

/* Reveals start visible: a figure cropped by a tenth, text at a third. */
.js .reveal > picture {
  clip-path: inset(0 0 11% 0);
  transform: scale(1.012);
  transition: clip-path 1.1s var(--ease), transform 1.4s var(--ease);
}
.js .reveal.is-in > picture { clip-path: inset(0 0 0 0); transform: none; }
.js .reveal > span {
  display: block;
  opacity: .34;
  transform: translateY(9px);
  transition: opacity .85s var(--ease), transform 1s var(--ease);
}
.js .reveal.is-in > span { opacity: 1; transform: none; }

/* The home page arrives once, in order. */
.js .e { opacity: 0; transform: translateY(12px); }
.js.is-ready .e {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s);
}
/* The film opens from its centre outward, the words and Book follow. */
.js .cine__film.e { opacity: 1; transform: none; clip-path: inset(0 26% 0 26%); }
.js.is-ready .cine__film.e {
  clip-path: inset(0);
  transition: clip-path 1.8s var(--ease) var(--d, 0s);
}
.e--1 { --d: .18s; } .e--2 { --d: .3s; } .e--3 { --d: .46s; } .e--4 { --d: .6s; }

/* ──────────────────────────────  responsive  ────────────────────────────── */

@media (min-width: 900px) {


  .story { grid-template-columns: minmax(0, 38vw) 1fr; }
  .story__portrait { position: sticky; top: clamp(1.5rem, 4vh, 3rem); }

  .visit { grid-template-columns: 1.25fr 1fr; }
  .visit__map { aspect-ratio: auto; height: clamp(420px, 70svh, 720px); }

  .foot__inner { grid-template-columns: auto repeat(4, 1fr); }
  .foot__mark { margin-right: clamp(1rem, 4vw, 4rem); }
}

@media (max-width: 899.98px) {
  /* On a phone the film is the vertical original, uncut, and the masthead
     hangs over it exactly as it does on a laptop. */
  .cine__say .btn { justify-self: stretch; justify-content: center; }

  .proof { flex-direction: column; gap: .9rem; }
  .proof__sep { width: 2.5rem; height: 1px; }
  /* The four doors stack instead of standing side by side, and each one is
     tall enough to hold its whole photograph. */
  .rooms__title {
    position: relative;
    inset: auto;
    background: none;
    padding: clamp(2.2rem, 6vh, 3.2rem) var(--gut) clamp(1.3rem, 3.6vh, 1.9rem);
  }
  .rooms__list { grid-template-columns: 1fr; }
  .room-link {
    min-height: 50svh;
    padding: clamp(1.1rem, 3.5vh, 1.8rem) var(--gut);
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--mat) 18%, transparent);
  }
  .room-link__thumb { filter: none; }

  /* On a phone the section is tall and narrow, so the film shows itself
     almost whole and the shade can rise from the foot instead. */
  .menu__col { min-height: 0; display: block; }
  .menu::after {
    background: linear-gradient(to top, rgba(25, 16, 9, .92), rgba(25, 16, 9, .66) 42%, rgba(25, 16, 9, .42));
  }
  .menu__col { max-width: none; }

  .page-head { text-align: left; justify-items: start; }

  .row { flex-direction: column; }
  .row__item { width: 100%; height: auto; }
  .row--swipe {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: 0;
    padding-inline: var(--gut);
    scroll-padding-inline: var(--gut);
    scrollbar-width: none;
  }
  .row--swipe::-webkit-scrollbar { display: none; }
  .row--swipe .row__item { width: 62vw; flex: none; scroll-snap-align: start; }
  .plate--full { padding-inline: 0; }
  .plate--full img { max-height: none; }

  /* The strip becomes a native swipe on a phone. */
  .craft__stage {
    position: static; height: auto;
    padding-block: clamp(1rem, 3vh, 2rem) clamp(2.5rem, 7vh, 4rem);
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
  }
  .js .craft__stage { overflow-x: auto; }
  .craft__track { transform: none; }
  .craft__frame { width: min(72vw, 340px); height: auto; transform: none !important; scroll-snap-align: start; }
  .craft__frame img { width: 100%; height: auto; }

  .craft--level .craft__stage { padding-bottom: 0; }

  /* The Studio's strip: only the photographs move; "Inside" stays put. */
  .js .craft--level .craft__stage, .craft--level .craft__stage { overflow: visible; scroll-snap-type: none; }
  .craft--level .craft__track {
    align-self: stretch;
    width: auto;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    scrollbar-width: none;
  }
  .craft--level .craft__track::-webkit-scrollbar { display: none; }
  .row--swipe, .craft__stage { overscroll-behavior-x: contain; }
  /* The Work strip's hairline sits right under its photographs. */
  .craft:not(.craft--level) .craft__stage { padding-bottom: 0; }
  .craft:not(.craft--level) .swipe-bar { margin-bottom: clamp(2.5rem, 7vh, 4rem); }

  /* Where a strip swipes, a hairline under it shows how far along it is: the
     walnut edge of the lit shelf, sliding along a taupe rule. */
  .swipe-bar {
    display: block;
    position: relative;
    height: 2px;
    margin: clamp(.9rem, 2.4vh, 1.3rem) var(--gut) 0;
    background: var(--rule);
    overflow: hidden;
  }
  .swipe-bar > span {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--vis, .3) * 100%);
    background: var(--walnut);
    transform: translateX(calc(var(--pos, 0) * (1 / var(--vis, .3) - 1) * 100%));
  }
  .craft--level .craft__frame { height: auto; }


  .foot__inner { grid-template-columns: 1fr 1fr; }
  .foot__mark { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .mast__hours .hours__detail, .mast__book-more, .tabs__the { display: none; }
  .mast__hours, .mast__book { font-size: .74rem; }
  .tabs { gap: .4rem 1.15rem; }
  .tabs a { font-size: .7rem; letter-spacing: .16em; }
  .svc { grid-template-columns: 1fr auto; }
  .svc .arrow { display: none; }
  .foot__inner { grid-template-columns: 1fr; }
  .foot__nav { gap: .4rem 1.1rem; }
  .foot__nav a { font-size: .7rem; letter-spacing: .15em; }
}

@media (min-width: 900px) { .swipe-bar { display: none; } }

/* A mouse can drag a strip too, as on a phone with a finger. */
@media (hover: hover) and (pointer: fine) {
  [data-swipe] { cursor: grab; }
  [data-swipe].is-dragging { cursor: grabbing; user-select: none; }
}

/* ─────────────────────────  reduced motion / data  ──────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root { --cx: 0px; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .craft__stage { position: static; height: auto; overflow-x: auto; padding-block: 2rem 3rem; }
  .craft__track { transform: none; }
  .js .reveal > picture, .js .reveal > span { opacity: 1; clip-path: none; transform: none; transition: none; }
  .js .e, .js.is-ready .e { opacity: 1; transform: none; clip-path: none; transition: none; }
  .js .cine__film.e, .js.is-ready .cine__film.e { clip-path: none; }
  .js .page-head__rule, .js.is-ready .page-head__rule { transform: none; transition: none; }
  .js .page-head__rule::after, .js.is-ready .page-head__rule::after { opacity: 1; transition: none; }
  .btn, .arrow, .tabs a, .tabs a::before, .tabs a::after, .shelf-link::before, .shelf-link::after,
  .room-link__thumb, .room-link__name, .room-link .arrow, .svc__name, .svc .arrow, .social a, .visit__map iframe { transition: none; }
}