/* Haven Salon — the front room: plaster wall, oak shelves, Haven's wall sign, black counter. */

@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/sourcesans3-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/sourcesans3-italic-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --plaster: #F4F1EC;
  --plaster-deep: #ECE6DE;
  --paper: #FBF9F6;
  --oak-top: #E2C6A2;
  --oak: #C9A27A;
  --oak-deep: #A9805A;
  --counter: #1F1B19;
  --counter-2: #2B2623;
  --mocha: #6E4E46;
  --mocha-ink: #4E3530;
  --ink: #2A2320;
  --ink-soft: #5E514B;
  --on-counter: #F4F1EC;
  --on-counter-soft: #C9BEB6;
  --neon: #D9646F;
  --neon-hot: #FF8DBA;
  --neon-soft: rgba(217, 100, 111, .24);
  --ring: rgba(110, 78, 70, .22);
  --line: rgba(78, 53, 48, .16);

  --display: "Montserrat", "Century Gothic", "Futura", sans-serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --gold: #C49A63;
  --gold-deep: #9C743F;
  --gold-soft: #E7CFA8;
  --coral: #D9646F;

  --fs-neon: clamp(2.5rem, 1.7rem + 2.2vw, 3.6rem);
  --fs-h1: clamp(2.3rem, 1.5rem + 3vw, 4.1rem);
  --fs-h2: clamp(1.7rem, 1.3rem + 1.5vw, 2.6rem);
  --fs-h3: clamp(1.2rem, 1.1rem + .35vw, 1.4rem);
  --fs-lede: clamp(1.125rem, 1.05rem + .35vw, 1.3rem);
  --fs-body: clamp(1.0625rem, 1.02rem + .15vw, 1.125rem);
  --fs-small: .9375rem;

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;
  --wrap: 78rem;
  --gutter: clamp(1.25rem, .6rem + 3vw, 3rem);
  --radius: 4px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --topbar-h: 4.5rem;
  --dock-h: 0px;
  --counter-h: 8.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--plaster); color: var(--ink);
  font-family: var(--body); font-size: var(--fs-body); line-height: 1.6;
  font-kerning: normal; text-rendering: optimizeLegibility;
  padding-bottom: var(--dock-h);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mocha-ink); text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
a:hover { text-decoration-color: currentColor; }
::selection { background: #EFD9B8; color: var(--counter); }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; border-radius: 2px; box-shadow: 0 0 0 6px var(--neon-soft); }
html { scrollbar-color: var(--oak) var(--plaster-deep); }
::-webkit-scrollbar { width: 12px; height: 10px; }
::-webkit-scrollbar-track { background: var(--plaster-deep); }
::-webkit-scrollbar-thumb { background: var(--oak); border-radius: 8px; border: 3px solid var(--plaster-deep); }
input, textarea { caret-color: var(--neon); }
h1, h2, h3 { font-family: var(--display); color: var(--mocha-ink); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0 0 var(--s4); text-wrap: pretty; }
address { font-style: normal; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.measure { max-width: 64ch; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.lede { font-size: var(--fs-lede); color: var(--ink); line-height: 1.5; }
.credit { color: var(--ink-soft); }
.skip { position: absolute; left: var(--s4); top: -4rem; z-index: 100; background: var(--counter); color: var(--on-counter); padding: var(--s3) var(--s4); border-radius: var(--radius); }
.skip:focus { top: var(--s3); }
main:focus { outline: none; }

/* ---------- icons + buttons ---------- */
.icon { width: 1.15em; height: 1.15em; flex: none; }
.icon--end { margin-inline-start: .45em; width: 1em; height: 1em; }
.btn {
  --ring: rgba(196,154,99,.55);
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  min-height: 3.1rem; padding: .55rem 1.5rem; border-radius: 999px; position: relative;
  font-family: var(--display); font-size: 1rem; font-weight: 600; letter-spacing: -.005em; line-height: 1.2;
  text-decoration: none; border: 0; cursor: pointer; isolation: isolate;
  outline: 1px solid var(--ring); outline-offset: -5px;
  transition: background-color .3s var(--ease), box-shadow .4s var(--ease), color .3s, outline-color .3s, outline-offset .4s var(--ease), transform .35s var(--ease);
}
.btn:has(.btn__chip) { padding-right: .45rem; }
.btn__chip {
  display: inline-grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 50%; flex: none;
  border: 1px solid var(--gold); color: var(--gold-soft);
  transition: background-color .35s var(--ease), color .35s, transform .45s var(--ease);
}
.btn__chip .icon { width: 1rem; height: 1rem; margin: 0; }
.btn:hover { outline-color: var(--gold); outline-offset: -4px; }
.btn:hover .btn__chip { background: var(--gold); color: var(--counter); transform: rotate(-12deg); }
.btn:focus-visible { outline: 1px solid var(--gold); outline-offset: -5px; box-shadow: 0 0 0 3px var(--plaster), 0 0 0 5px var(--coral); }
.counter .btn:focus-visible { box-shadow: 0 0 0 3px var(--counter), 0 0 0 5px var(--gold-soft); }
.btn--small { min-height: 2.6rem; padding: .4rem 1.15rem; font-size: .95rem; outline-offset: -4px; }
.btn--large { min-height: 3.6rem; padding: .7rem 1.9rem; font-size: 1.08rem; }
.btn--large:has(.btn__chip) { padding-right: .55rem; }
.btn--large .btn__chip { width: 2.5rem; height: 2.5rem; }
.btn--counter { background: var(--counter); color: var(--on-counter); box-shadow: 0 8px 16px -10px rgba(31,27,25,.7); }
.btn--counter:hover { background: #0F0D0C; color: #fff; box-shadow: 0 12px 22px -12px rgba(31,27,25,.8); }
.btn--plaster { --ring: rgba(110,78,70,.35); background: var(--plaster); color: var(--counter); box-shadow: 0 8px 18px -10px rgba(0,0,0,.65); }
.btn--plaster .btn__chip { border-color: var(--gold-deep); color: var(--gold-deep); }
.btn--plaster:hover { background: #fff; outline-color: var(--gold-deep); }
.btn--plaster:hover .btn__chip { background: var(--gold-deep); color: #fff; }
.btn--ghost { --ring: rgba(110,78,70,.3); background: transparent; color: var(--mocha-ink); box-shadow: inset 0 0 0 1px rgba(110,78,70,.45); }
.btn--ghost .btn__chip { border-color: var(--gold-deep); color: var(--gold-deep); }
.btn--ghost:hover { background: rgba(110,78,70,.06); box-shadow: inset 0 0 0 1px var(--mocha-ink); outline-color: var(--gold-deep); }
.btn--ghost .icon:first-child { color: var(--gold-deep); }
.btn--ghost-light { --ring: rgba(231,207,168,.4); background: transparent; color: var(--on-counter); box-shadow: inset 0 0 0 1px rgba(244,241,236,.4); }
.btn--ghost-light:hover { background: rgba(244,241,236,.07); box-shadow: inset 0 0 0 1px var(--on-counter); }
.btn--ghost-light .icon:first-child { color: var(--gold-soft); }
.btn:active { transform: translateY(1px) scale(.99); }
.textlink { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--mocha-ink); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s5); }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--plaster) 94%, transparent); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.topbar.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 20px -18px rgba(60,40,30,.5); }
@supports (backdrop-filter: blur(8px)) { .topbar { backdrop-filter: saturate(1.1) blur(8px); } }
.topbar__inner { width: min(100% - 2 * var(--gutter), 86rem); margin-inline: auto; height: var(--topbar-h); display: flex; align-items: center; gap: var(--s5); }
.topbar__logo { display: inline-flex; color: var(--mocha); border-radius: 50%; }
.logo { display: block; }
.logo--header { height: 3.1rem; width: auto; }
.topnav { margin-inline-start: auto; }
.topnav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s1); }
.topnav__list a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .85rem; font-family: var(--display); font-size: 1.05rem; color: var(--ink); text-decoration: none; border-radius: var(--radius); position: relative; }
.topnav__list a:hover { color: var(--mocha-ink); background: rgba(110,78,70,.06); }
.topnav__list a[aria-current="page"] { color: var(--mocha-ink); }
.topnav__list a[aria-current="page"]::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .35rem; height: 2px; border-radius: 2px; background: var(--mocha); }
.topnav__toggle { display: none; }
.topnav__mobile-only { display: none; }
.topbar__actions { display: flex; align-items: center; gap: var(--s3); }
.topbar__call { display: inline-flex; align-items: center; gap: .4em; min-height: 2.75rem; padding: 0 .5rem; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.topbar__call:hover { color: var(--mocha-ink); }

/* ---------- wall + neon ---------- */
.wall {
  position: relative;
  background:
    radial-gradient(60rem 28rem at 18% 12%, rgba(255,255,255,.65), transparent 70%),
    radial-gradient(40rem 30rem at 90% 80%, rgba(214,198,180,.28), transparent 70%),
    var(--plaster);
}
/* ---------- shelves + prints + tags ---------- */
.shelf { list-style: none; margin: 0; padding: 0 var(--s5); display: flex; align-items: flex-end; gap: clamp(1rem, 2.5vw, 2.5rem); position: relative; }
.shelf::after, .plank {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--plank-h, 22px); z-index: 0;
  --ph: var(--plank-h, 22px);
  box-shadow: 0 20px 22px -14px rgba(70,45,25,.42), 0 5px 7px -4px rgba(70,45,25,.2);
}
/* Every plank is the same photographed maple floating shelf (src/decor/wall/shelf.webp): its two ends are kept and the middle stretches. --ph is the plank's height. */
.shelf::after, .plank, .label-item::after, .shelf--team .shelf__item::after, .menu-cat__head::after, .person__shelf::after, .headshelf::after, .counter--band::before, .counter--desk::before, .counter--footer::before {
  border-style: solid; border-color: transparent; border-radius: 0; border-width: 0 calc(var(--ph) * .52);
  border-image: url("../decor/wall/shelf.webp") 0 58 fill / 0 1 stretch;
}
/* Menu labels: one continuous plank per row, drawn by the row's first label across the whole row. */
@media (min-width: 64.01em) {
  .label-item::after { display: none; }
  .label-item:nth-child(4n+1)::after { display: block; right: auto; width: 400%; }
  .label-item:nth-child(4n+1):nth-last-child(3)::after { width: 300%; }
  .label-item:nth-child(4n+1):nth-last-child(2)::after { width: 200%; }
  .label-item:nth-child(4n+1):nth-last-child(1)::after { width: 100%; }
}
@media (min-width: 48.01em) and (max-width: 64em) {
  .label-item::after { display: none; }
  .label-item:nth-child(3n+1)::after { display: block; right: auto; width: 300%; }
  .label-item:nth-child(3n+1):nth-last-child(2)::after { width: 200%; }
  .label-item:nth-child(3n+1):nth-last-child(1)::after { width: 100%; }
}
.shelf__item { position: relative; z-index: 1; padding-bottom: calc(var(--plank-h, 22px) * .86); }
.shelf__item:hover, .shelf__item:focus-within { z-index: 6; }
.shelf--a { z-index: 2; }
.print-link { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: inherit; border-radius: 3px; }
.print {
  display: block; background: #fff; padding: 6px; border-radius: 2px; position: relative;
  box-shadow: 7px 9px 16px -8px rgba(60, 40, 30, .35), 0 1px 2px rgba(60,40,30,.18);
  transform-origin: 50% 100%;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.print img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 1px; }
.print--portrait img { aspect-ratio: 4 / 5; }
.print--wide img { aspect-ratio: auto; }
.print--tall img { aspect-ratio: 2 / 3; }
.print::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -3px; height: 6px; border-radius: 50%; background: rgba(40, 25, 15, .35); filter: blur(3px); z-index: -1; transition: opacity .55s var(--ease), transform .55s var(--ease); }
.print-link:hover .print, .print-link:focus-visible .print { transform: translateY(-10px); box-shadow: 10px 22px 28px -14px rgba(60, 40, 30, .45), 0 1px 2px rgba(60,40,30,.12); }
.print-link:hover .print::after, .print-link:focus-visible .print::after { opacity: .35; transform: translateY(10px) scaleX(.85); }
.print-link:focus-visible { box-shadow: none; outline-offset: 6px; }

.tag {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, 18px);
  width: max-content; max-width: 15.5rem; text-align: left;
  display: flex; flex-direction: column; gap: .1rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 3px;
  padding: .5rem .75rem .55rem; line-height: 1.3;
  box-shadow: 0 1px 1px rgba(60,40,30,.06), 0 6px 14px -10px rgba(60,40,30,.35);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tag--pointer::before { content: ""; position: absolute; left: 50%; top: -11px; width: 1px; height: 10px; background: rgba(78,53,48,.45); }
.tag__name { font-family: var(--display); font-weight: 500; font-size: 1rem; color: var(--mocha-ink); }
.tag__meta { font-size: .9rem; color: var(--ink-soft); display: flex; gap: .4em; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: .3rem; margin-top: .25rem; }
.tag__price { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.print-link:hover .tag, .print-link:focus-visible .tag { transform: translate(-50%, 24px); box-shadow: 0 0 0 1px var(--ring), 0 10px 20px -10px rgba(60,40,30,.45); }
.tag__cta { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--ease), opacity .35s var(--ease), margin .45s var(--ease); font-family: var(--display); font-weight: 500; font-size: .95rem; color: var(--mocha-ink); }
.tag__cta > span { overflow: hidden; display: inline-flex; align-items: center; }
.print-link:hover .tag__cta, .print-link:focus-visible .tag__cta { grid-template-rows: 1fr; opacity: 1; margin-top: .35rem; }

/* ---------- hero ---------- */
.hero { overflow: clip; }
/* Hero shelves: a large print is a 14-inch frame and every item keeps its real size against it.
   --hl-v is the print height the viewport allows; --in-max is the scale at which the fuller shelf (about 36 inches of
   prints and items) still fits the shelf width, so on wide screens prints and items shrink together instead of the prints being squeezed. */
.hero { --hl-v: clamp(10rem, calc((100svh - var(--topbar-h) - var(--counter-h) - 19.5rem) / 2), 19rem); }
.hero__shelves { container-type: inline-size; }
.shelf--hero { --in-max: calc((94cqw - 8.5rem) / 36); --hl: min(var(--hl-v), calc(var(--in-max) * 14)); --hm: calc(var(--hl) * .8); --in: calc(var(--hl) / 14); }
.hero__inner { width: min(100% - 2 * var(--gutter), 86rem); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; min-height: calc(100svh - var(--topbar-h) - var(--counter-h)); padding-block: var(--s2); }
.hero__copy { padding-block: var(--s5); min-width: 0; }
.hero__shelves { min-width: 0; }
.hero__h { font-size: var(--fs-h1); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; }
.hero__lede { font-size: var(--fs-lede); margin-top: var(--s5); max-width: 40ch; color: var(--ink); }
.hero__shelves { display: grid; gap: 7.75rem; padding-block: .5rem 5rem; }
.shelf--hero { justify-content: center; }
.shelf--a { padding-inline: 3%; justify-content: space-evenly; }
.shelf--b { padding-inline: 3% 3%; justify-content: space-evenly; }
.shelf--hero { gap: clamp(.75rem, 1.6vw, 1.75rem); --plank-h: 30px; }
.shelf--hero .print img { height: var(--hl); width: auto; }
.shelf--hero .shelf__item--m .print img { height: var(--hm); }
.shelf--b .shelf__item--m .print img { aspect-ratio: 360 / 499; }

/* ---------- counter (the front desk) ---------- */
.counter { background: var(--counter); color: var(--on-counter); position: relative; }
.counter :where(a:not(.btn)) { color: var(--on-counter); }
.counter--band, .counter--desk, .counter--footer { box-shadow: 0 -18px 30px -24px rgba(0,0,0,.55); }
.counter--band, .counter--desk, .counter--footer { border-top: 10px solid var(--oak); }
.counter--band::before, .counter--desk::before, .counter--footer::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; --ph: 14px; }
.counter--band::after, .counter--desk::after, .counter--footer::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: linear-gradient(rgba(0,0,0,.35), transparent); pointer-events: none; }
.counter__inner { width: min(100% - 2 * var(--gutter), 86rem); margin-inline: auto; }
.band { display: flex; align-items: center; justify-content: space-between; gap: var(--s5) var(--s7); flex-wrap: wrap; padding-block: var(--s4); min-height: calc(var(--counter-h) - 10px); }
.band__actions { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.band__link { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 500; font-size: 1rem; min-height: 2.75rem; text-decoration: none; }
.band__link:hover { text-decoration: underline; text-underline-offset: .25em; }
.band__facts { display: flex; align-items: center; gap: var(--s3) var(--s6); flex-wrap: wrap; }
.band__fact { display: inline-flex; align-items: center; gap: .5em; margin: 0; min-height: 2.75rem; text-decoration: none; font-variant-numeric: tabular-nums; }
.band__fact .icon { color: var(--oak-top); }
a.band__fact:hover { text-decoration: underline; text-underline-offset: .25em; }
.band__fact--quiet { color: var(--on-counter-soft); }

/* ---------- sections ---------- */
.section { padding-block: clamp(4rem, 3rem + 5vw, 8rem); }
.section__head { margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); display: grid; gap: var(--s4); }
.section__head .h2 { max-width: 22ch; }
.section__head--split { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--s5) var(--s8); }
.section__head--split p { margin: 0; }
.section__ask { margin: var(--s7) 0 0; }
.work-shelf .section__ask { margin-top: 5.5rem; }
.team-shelf .section__ask { margin-top: 8.5rem; }

.intro__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.intro__text .h2 { max-width: 18ch; margin-bottom: var(--s5); }
.intro__photo figcaption, figure figcaption { margin-top: var(--s3); font-size: var(--fs-small); color: var(--ink-soft); }
figure { margin: 0; }

/* labels on the menu shelf */
.menu-shelf { background: linear-gradient(var(--plaster-deep), var(--plaster) 70%); }
.shelf--labels { flex-wrap: wrap; row-gap: 0; padding: 0; gap: 0; background: none; }
.shelf--labels::after { display: none; }
.shelf--labels { justify-content: center; }
.label-item { flex: 0 0 22.5%; padding: 0 clamp(.5rem, 1.2vw, 1rem) 2.6rem; position: relative; display: flex; align-items: flex-end; }
.label-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1.6rem; height: 16px; --ph: 16px; box-shadow: 0 12px 16px -10px rgba(70,45,25,.42); }
.menu-label {
  display: flex; flex-direction: column; gap: var(--s3); width: 100%; position: relative; z-index: 1;
  background: var(--paper); border: 1px solid var(--line); border-radius: 3px 3px 2px 2px; padding: 1.1rem 1.15rem 1rem;
  text-decoration: none; color: var(--ink);
  box-shadow: 6px 8px 16px -10px rgba(60,40,30,.35);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.label-item--0 .menu-label { min-height: 11.5rem; }
.label-item--1 .menu-label { min-height: 9.75rem; }
.label-item--2 .menu-label { min-height: 10.75rem; }
.menu-label:hover, .menu-label:focus-visible { transform: translateY(-8px); box-shadow: 0 0 0 1px var(--ring), 8px 18px 24px -14px rgba(60,40,30,.45); }
.menu-label__name { font-family: var(--display); font-size: 1.3rem; font-weight: 480; color: var(--mocha-ink); line-height: 1.15; }
.menu-label__rows { display: grid; gap: .3rem; margin-top: auto; border-top: 1px solid var(--line); padding-top: .6rem; }
.menu-label__row { display: flex; justify-content: space-between; gap: var(--s4); font-size: .95rem; color: var(--ink-soft); line-height: 1.35; }
.menu-label__price { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* work shelf */
.shelf--work { justify-content: center; align-items: flex-end; padding-bottom: 0; margin-bottom: 4rem; }
.shelf--work .shelf__item--xl { width: clamp(13rem, 24vw, 21rem); }
.shelf--work .shelf__item--l { width: clamp(11.5rem, 21vw, 18.5rem); }
.shelf--work .shelf__item--m { width: clamp(10rem, 18vw, 16rem); }

/* team shelf */
.team-shelf { background: var(--plaster-deep); }
.shelf--team { flex-wrap: wrap; justify-content: center; gap: 8.5rem clamp(1rem, 2.2vw, 2rem); padding: 0; }
.shelf--team::after { display: none; }
.shelf--team .shelf__item { width: clamp(9rem, 15vw, 11.75rem); padding-bottom: 0; }
.shelf--team .shelf__item::after { content: ""; position: absolute; left: -1.2rem; right: -1.2rem; bottom: -14px; height: 12px; --ph: 12px; box-shadow: 0 12px 16px -10px rgba(70,45,25,.42); z-index: -1; }
.shelf--team .tag { max-width: 11.5rem; }
.shelf--team .tag__meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* reviews */
.reviews__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.reviews__summary { color: var(--ink-soft); margin: var(--s4) 0 var(--s7); max-width: 46ch; }
.quote { margin: 0; }
.quote blockquote { margin: 0; }
.quote p { font-family: var(--display); font-size: 1.3rem; line-height: 1.35; color: var(--mocha-ink); margin: 0 0 var(--s3); font-weight: 400; }
.quote figcaption { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }
.quote--big p { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem); line-height: 1.12; letter-spacing: -.02em; max-width: 18ch; }
.quote--small p { font-size: 1.15rem; }
.reviews__rest { display: grid; gap: var(--s6); padding-top: var(--s2); }
.reviews__rest .quote { padding-top: var(--s5); border-top: 1px solid var(--line); }

/* first visit steps */
.first-visit { background: var(--plaster-deep); }
.first-visit__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--s6); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3.5rem 1fr; column-gap: var(--s5); }
.steps li::before { content: counter(step); grid-row: span 2; font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--mocha); font-weight: 350; border-right: 1px solid var(--line); padding-right: var(--s4); text-align: right; }
.steps h3 { font-size: var(--fs-h3); margin-bottom: var(--s2); }
.steps p { margin: 0; max-width: 56ch; }

/* visit teaser + week row */
.visit-teaser__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.address { font-family: var(--display); font-size: var(--fs-h3); color: var(--ink); margin: var(--s5) 0; line-height: 1.35; }
.address--big { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.visit-teaser__photo { justify-self: center; width: min(100%, 21rem); }
.week { list-style: none; margin: var(--s5) 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.week__day { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .7rem .2rem .6rem; text-align: center; border-left: 1px solid var(--line); position: relative; }
.week__day:first-child { border-left: 0; }
.week__name { font-family: var(--display); font-weight: 500; color: var(--mocha-ink); }
.week__val { font-size: .82rem; color: var(--ink-soft); line-height: 1.2; }
.week__day.is-closed .week__val { color: var(--ink); font-weight: 600; }
.week__today { display: none; font-size: .78rem; color: var(--counter); }
.week__day.is-today { background: #F3EADF; box-shadow: inset 0 -4px 0 var(--oak); }
.week__day.is-today .week__today { display: block; font-weight: 600; color: var(--mocha-ink); }

/* ---------- page heads ---------- */
.pagehead { background: var(--plaster); padding-block: clamp(2rem, 1.25rem + 3vw, 4rem) clamp(2.5rem, 2rem + 2.5vw, 3.75rem); border-bottom: 1px solid var(--line); }
.pagehead--split .pagehead__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5) clamp(2rem, 5vw, 5rem); align-items: end; }
.pagehead__copy .lede { max-width: 40ch; }
.pagehead__inner .h1 { margin-bottom: var(--s5); }
.pagehead .lede { margin-bottom: 0; }
.howto { color: var(--ink-soft); margin-top: var(--s4); }
.jump { margin-top: var(--s6); }
.jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.jump a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; text-decoration: none; color: var(--ink); font-family: var(--display); }
.jump a:hover { border-color: var(--mocha); color: var(--mocha-ink); }

/* not sure */
.unsure { margin-block: clamp(2.5rem, 2rem + 2vw, 4rem); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s3) var(--s7); box-shadow: 0 10px 30px -26px rgba(60,40,30,.6); }
.unsure__h { font-size: var(--fs-h3); grid-row: span 2; }
.unsure p { margin: 0; max-width: 60ch; }
.unsure__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3) !important; }

/* service menu */
.menu-cat { padding-block: clamp(3rem, 2.5rem + 3vw, 5.5rem); }
.menu-cat + .menu-cat { border-top: 1px solid var(--line); }
.menu-cat__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s3) var(--s7); align-items: end; margin-bottom: var(--s6); padding-bottom: var(--s5); position: relative; }
.menu-cat__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 2px; --ph: 14px; box-shadow: 0 10px 14px -9px rgba(70,45,25,.42); }
.menu-cat__head p { margin: 0; color: var(--ink-soft); }
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 5rem); }
.svc { padding: var(--s5) 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--topbar-h) + 1.5rem); }
.svc:target { background: linear-gradient(90deg, #F3EADF, transparent); padding-left: var(--s4); }
.svc__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); margin-bottom: var(--s2); }
.svc__name { font-size: 1.2rem; font-weight: 480; }
.svc__price { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.svc__desc { margin: 0 0 var(--s2); max-width: 58ch; }
.svc__suits { margin: 0; color: var(--ink-soft); font-size: var(--fs-small); }
.svc__suits span { color: var(--mocha-ink); font-weight: 600; }
.svc__note { margin: var(--s2) 0 0; font-size: var(--fs-small); font-style: italic; color: var(--mocha-ink); }
.menu-cat__ask { margin: var(--s7) 0 0; }

/* facts list */
.policies__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s5) clamp(2rem, 6vw, 7rem); }
.facts { margin: 0; display: grid; gap: 0; }
.facts > div { display: grid; grid-template-columns: 10rem 1fr; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.facts > div:first-child { border-top: 1px solid var(--line); }
.facts dt { font-family: var(--display); font-weight: 500; color: var(--mocha-ink); }
.facts dd { margin: 0; max-width: 60ch; }

/* team page */
.people__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(4rem, 6vw, 6.5rem) clamp(2rem, 5vw, 5rem); }
.person { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; gap: var(--s5) clamp(1.25rem, 2.5vw, 2.25rem); align-items: start; scroll-margin-top: calc(var(--topbar-h) + 1.5rem); }
.person__shelf { position: relative; padding-bottom: 14px; }
.person__shelf::after { content: ""; position: absolute; left: -.75rem; right: -.75rem; bottom: 0; height: 12px; --ph: 12px; box-shadow: 0 12px 16px -10px rgba(70,45,25,.42); }
.person__name { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); }
.person__role { color: var(--ink-soft); margin: var(--s1) 0 var(--s3); }
.person__spec { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.person__spec li { font-size: .9rem; line-height: 1.3; padding: .3rem .6rem; background: var(--paper); border: 1px solid var(--line); border-radius: 3px; color: var(--mocha-ink); }
.person__bio { max-width: 52ch; }
.person .quote { margin: var(--s4) 0 var(--s5); padding-left: var(--s4); border-left: 1px solid var(--oak); }
.person__ask { margin: 0; }
.person:target .print { box-shadow: 0 0 0 3px var(--ring), 7px 9px 16px -8px rgba(60, 40, 30, .35); }
.also { margin-top: clamp(4rem, 6vw, 6rem); padding-top: var(--s6); border-top: 1px solid var(--line); }
.also__list { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); }
.also__name { font-family: var(--display); font-size: 1.15rem; color: var(--mocha-ink); }
.also__how { color: var(--ink-soft); font-size: var(--fs-small); }

/* work page */
.shelf--gallery { --hl: 330px; --plank-h: 30px; --in: calc(clamp(13rem, 21vw, 19.5rem) * 4 / 3 / 20); justify-content: space-evenly; margin-bottom: 5rem; flex-wrap: nowrap; gap: clamp(1rem, 2vw, 2rem); }
.shelf--gallery .shelf__item--xl { width: clamp(13rem, 21vw, 19.5rem); }
.shelf--gallery .shelf__item--l { width: clamp(11.5rem, 18.5vw, 17rem); }
.gallery__more { text-align: center; margin-top: var(--s6); }
.space { background: var(--plaster-deep); }
.space__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "text a" "b c"; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.space__text { grid-area: text; }
.space__text .h2 { margin-bottom: var(--s5); }
.space__text .quote { margin-top: var(--s5); }
.space__a { grid-area: a; }
.space__b { grid-area: b; width: min(100%, 19rem); justify-self: end; }
.space__c { grid-area: c; width: min(100%, 15rem); }

/* visit page */
.visit-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s7); align-items: center; }
.visit-head__photo { width: min(100%, 19rem); justify-self: center; }
.hours .h2 { margin-bottom: var(--s4); }
.hours__note { color: var(--ink-soft); }
.local__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.local__grid .h2 { margin-bottom: var(--s5); }

/* book page */
.pagehead--book { border-bottom: 0; }
.desk { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6) clamp(2rem, 6vw, 6rem); padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.desk__h { color: var(--on-counter); font-size: var(--fs-h3); margin-bottom: var(--s3); }
.desk p { color: var(--on-counter-soft); max-width: 52ch; }
.desk .actions { margin-top: var(--s4); margin-bottom: var(--s4); }
.desk__small { font-size: var(--fs-small); }
.desk__side { padding-left: clamp(0rem, 3vw, 3rem); border-left: 1px solid rgba(244,241,236,.14); }
.whobook { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s4); }
.whobook__item { display: grid; grid-template-columns: 3.5rem 1fr; grid-template-rows: auto auto; column-gap: var(--s3); align-items: center; padding: var(--s3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); min-height: 4.75rem; transition: box-shadow .3s var(--ease), border-color .3s; }
.whobook__item:hover { border-color: var(--mocha); box-shadow: 0 0 0 1px var(--mocha); }
.whobook__item img { grid-row: span 2; width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 2px; }
.whobook__name { font-family: var(--display); font-weight: 500; color: var(--mocha-ink); line-height: 1.2; }
.whobook__how { font-size: .875rem; color: var(--ink-soft); display: inline-flex; align-items: center; }
.whobook__also { margin-top: var(--s5); color: var(--ink-soft); }
.widget__frame { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); min-height: 30rem; padding: var(--s4); }
.widget__fallback { margin-top: var(--s4); color: var(--ink-soft); }

/* ---------- footer ---------- */
.counter--footer { margin-top: 0; }
.footer { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.5fr)); gap: var(--s6); padding-block: clamp(3rem, 2.5rem + 3vw, 5rem) var(--s6); }
.logo--footer { height: 5.5rem; width: auto; color: var(--on-counter); }
.footer__line { margin: var(--s4) 0 0; color: var(--on-counter-soft); max-width: 30ch; }
.footer__line + .footer__line { margin-top: var(--s2); }
.footer__h { font-family: var(--display); font-size: 1.3rem; color: var(--on-counter); font-weight: 500; margin-bottom: var(--s3); }
.footer__col p { margin: 0 0 var(--s3); }
.footer__col a { text-decoration-color: rgba(244,241,236,.35); }
.footer__muted { color: var(--on-counter-soft); font-size: var(--fs-small); }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.footer__links a { display: inline-flex; min-height: 2.25rem; align-items: center; }
.footer__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--s5); padding-block: var(--s4) var(--s6); border-top: 1px solid rgba(244,241,236,.12); color: var(--on-counter-soft); font-size: 1rem; }
.footer__base p { margin: 0; }
.counter :focus-visible { outline-color: var(--gold-soft); }

/* ---------- mobile dock ---------- */
.dock { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 64em) {
  .hero__inner { grid-template-columns: 1fr; min-height: 0; padding-block: var(--s6) var(--s7); }
  .hero { --hl-v: clamp(12rem, 40vw, 20rem); }
  .label-item { flex-basis: 33.333%; }
  .hero__lede { max-width: 44ch; }
  .hero__shelves { gap: 5rem; }
  .intro__grid, .reviews__grid, .first-visit__grid, .visit-teaser__grid, .policies__grid, .local__grid, .visit-head, .desk { grid-template-columns: 1fr; }
  .section__head--split { grid-template-columns: 1fr; }
  .people__list { grid-template-columns: 1fr; }
  .menu-cat__head { grid-template-columns: 1fr; }
  .space__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "text text" "a a" "b c"; }
  .footer { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .desk__side { padding-left: 0; border-left: 0; border-top: 1px solid rgba(244,241,236,.14); padding-top: var(--s5); }
  .unsure { grid-template-columns: 1fr; }
  .unsure__h { grid-row: auto; }
}

@media (max-width: 48em) {
  :root { --topbar-h: 3.75rem; --dock-h: calc(4.5rem + env(safe-area-inset-bottom)); }
  .logo--header { height: 2.5rem; }
  .topbar__actions { display: none; }
  .topnav__toggle { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius); font: 500 1rem var(--display); color: var(--ink); cursor: pointer; }
  .topnav__toggle .icon--close { display: none; }
  .topnav__toggle[aria-expanded="true"] .icon--close { display: block; }
  .topnav__toggle[aria-expanded="true"] .icon--open { display: none; }
  .topnav__list { display: none; position: absolute; left: 0; right: 0; top: var(--topbar-h); flex-direction: column; gap: 0; background: var(--plaster); border-bottom: 1px solid var(--line); padding: var(--s3) var(--gutter) var(--s5); box-shadow: 0 20px 30px -24px rgba(60,40,30,.6); }
  .topnav__list.is-open { display: flex; }
  .topnav__list a { min-height: 3.25rem; font-size: 1.25rem; padding: 0; width: 100%; border-bottom: 1px solid var(--line); border-radius: 0; }
  .topnav__list a[aria-current="page"]::after { left: 0; right: auto; width: 2.5rem; bottom: .55rem; }
  .topnav__mobile-only { display: block; }

  .hero__inner { padding-block: var(--s5) var(--s6); gap: var(--s5); }
  .hero__shelves { gap: 4.75rem; padding-bottom: 3rem; }
  .shelf--a, .shelf--b { padding-inline: 4%; justify-content: center; }
  .shelf--hero { --hl: 15.5rem; --hm: 12.5rem; }
  .shelf--hero .print img { height: auto; width: 100%; }
  .shelf--hero .shelf__item--l { width: 40vw; }
  .shelf--hero .shelf__item--m { width: 33vw; }
  .shelf--a { gap: .4rem; padding-inline: 2%; }
  .shelf--hero { --in: 3.4vw; }
  .shelf--b .shelf__item:nth-child(4), .shelf--b .shelf__item:nth-child(5) { display: none; }
  .shelf--b { justify-content: center; gap: .6rem; }
  .hero__shelves { gap: 6rem; padding-bottom: 8.5rem; }
  .shelf--hero .tag { max-width: calc(100% + 5rem); }
  .hero__shelves { padding-bottom: 5rem; }
  .tag { max-width: calc(100% + 1.5rem); }
  .shelf--work .tag, .shelf--gallery .tag, .shelf--team .tag { max-width: 100%; }
  .team-shelf .section__ask { margin-top: 0; }
  .tag { max-width: 44vw; }

  .counter--band .band { padding-block: var(--s5); }
  .band__actions { width: 100%; }
  .band__actions .btn { width: 100%; }
  .band__facts { flex-direction: column; align-items: flex-start; gap: 0; }

  .shelf--work, .shelf--gallery { overflow-x: auto; justify-content: flex-start; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 5.25rem; margin-inline: calc(-1 * var(--gutter)); gap: 1.25rem; overscroll-behavior-x: contain; }
  .shelf--work::after, .shelf--gallery::after { bottom: 4rem; left: 0; right: 0; width: auto; }
  .shelf--work .shelf__item, .shelf--gallery .shelf__item { flex: none; width: 64vw !important; scroll-snap-align: center; }
  .shelf--gallery .decor, .shelf--work .decor { width: auto !important; }
  .shelf--gallery { --hl: 240px; --in: calc(64vw * 4 / 3 / 20); }
  .shelf--a .decor:nth-last-child(-n+2) { display: none; }
  .shelf--team { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 5.5rem; margin-inline: calc(-1 * var(--gutter)); gap: 1.75rem; }
  .shelf--team .shelf__item { flex: none; width: 42vw; scroll-snap-align: start; }
  .shelf--labels { display: grid; grid-template-columns: 1fr; }
  .label-item { padding-bottom: 2.5rem; }
  .label-item .menu-label { min-height: 0 !important; }

  .menu-list { grid-template-columns: 1fr; }
  .person { grid-template-columns: 7.5rem 1fr; }
  .facts > div { grid-template-columns: 1fr; gap: var(--s1); }
  .week__val { font-size: .72rem; }
  .week__name { font-size: .95rem; }
  .space__grid { grid-template-columns: 1fr; grid-template-areas: "text" "a" "b" "c"; }
  .space__b, .space__c { justify-self: start; }
  .footer { grid-template-columns: 1fr; }

  .dock {
    display: flex; gap: var(--s3); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
    background: var(--counter); box-shadow: 0 -12px 24px -14px rgba(0,0,0,.5);
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .dock .btn { min-height: 3rem; }
  .dock__book { flex: 1 1 auto; }
  .dock__team, .dock__call { flex: 0 0 auto; padding-inline: 1rem; }
  .is-book .dock { display: none; }
  .is-book { --dock-h: 0px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .print-link:hover .print, .print-link:focus-visible .print, .menu-label:hover, .menu-label:focus-visible { transform: none; }
}

@media print {
  .topbar, .dock, .counter--band, .sign { display: none !important; }
  body { background: #fff; }
}

/* ---------- wall objects in page heads ---------- */
.headshelf { list-style: none; margin: 0; padding: 0 var(--s4) 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: .55rem; position: relative; padding-bottom: 14px; }
.headshelf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; border-radius: 2px; --ph: 12px; box-shadow: 0 12px 16px -10px rgba(70,45,25,.42); }
.headshelf li { position: relative; z-index: 1; }
.headshelf--cats { padding: 0; gap: 0; row-gap: 1.5rem; }
.headshelf--cats::after { display: none; }
.headshelf--cats li { padding: 0 .2rem 14px; }
.pagehead--svc .pagehead__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.headshelf--cats .cat-label { padding: .55rem .65rem .5rem; }
.headshelf--cats li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; z-index: -1; --ph: 12px; box-shadow: 0 12px 16px -10px rgba(70,45,25,.42); }
.cat-label { display: flex; flex-direction: column; justify-content: flex-end; gap: .15rem; background: var(--paper); border: 1px solid var(--line); border-radius: 3px 3px 1px 1px; padding: .55rem .75rem .5rem; text-decoration: none; color: var(--mocha-ink); font-family: var(--display); font-weight: 500; line-height: 1.15; box-shadow: 5px 7px 12px -8px rgba(60,40,30,.35); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.cat-label small { font-family: var(--body); font-weight: 400; font-size: .85rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: .25rem; margin-top: .2rem; }
.headshelf li:nth-child(3n+1) .cat-label { min-height: 5.6rem; }
.headshelf li:nth-child(3n+2) .cat-label { min-height: 4.6rem; }
.headshelf li:nth-child(3n) .cat-label { min-height: 5.1rem; }
.cat-label:hover, .cat-label:focus-visible { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--ring), 6px 14px 18px -10px rgba(60,40,30,.45); }
.headshelf--team { gap: .4rem; flex-wrap: nowrap; }
.mini { display: block; background: #fff; padding: 4px; border-radius: 2px; box-shadow: 4px 6px 10px -6px rgba(60,40,30,.35); transition: transform .45s var(--ease); }
.mini img { width: clamp(2.6rem, 3.6vw, 3.4rem); aspect-ratio: 4 / 5; object-fit: cover; }
.headshelf li:nth-child(odd) .mini img { aspect-ratio: 3 / 4.4; }
a:hover > .mini, a:focus-visible > .mini { transform: translateY(-6px); }
.headshelf a:not(.cat-label) { display: block; border-radius: 2px; }
.pagehead .shelf--gallery { margin: var(--s7) 0 6.5rem; }
.space__text .measure:last-of-type { margin-bottom: 0; }
.intro__links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); }
@media (max-width: 64em) {
  .pagehead--split .pagehead__inner { grid-template-columns: 1fr; }
}
@media (max-width: 48em) {
  .person { grid-template-columns: 1fr; }
  .person__shelf { width: min(13rem, 70%); }
  .headshelf { gap: .4rem; padding-inline: var(--s2); }
  .cat-label { padding: .45rem .55rem .4rem; font-size: .95rem; }
  .headshelf li .cat-label { min-height: 0 !important; }
  .mini img { width: calc((100vw - 2 * var(--gutter) - 6rem) / 10); }
  .headshelf--team { gap: .25rem; padding-inline: .25rem; }
  .mini { padding: 2px; }
  .pagehead .shelf--gallery { margin-top: var(--s5); }
}
.person__src { display: block; margin-top: var(--s2); font-size: var(--fs-small); color: var(--ink-soft); }

/* ---------- Haven's wall sign: "THIS MUST BE / the Place" ----------
   A clean recreation of the lettering on the salon's back wall, same layout as the original. */
.sign { display: block; width: var(--sign-w, clamp(15rem, 9rem + 16vw, 24.5rem)); max-width: 100%; height: auto; margin: 0 0 var(--s4) -.35rem; user-select: none; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .sign { animation: sign-write 1.7s cubic-bezier(.45,.05,.2,1) .15s both; }
}
@keyframes sign-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sign--small { --sign-w: clamp(11rem, 8rem + 9vw, 16.5rem); }

/* ---------- decorations on shelves ---------- */
.decor { pointer-events: none; display: flex; align-items: flex-end; }
.decor img { height: calc(var(--in, 12px) * var(--h)); width: auto; max-width: none; filter: drop-shadow(0 3px 2px rgba(60,40,25,.22)) drop-shadow(6px 8px 10px rgba(60,40,25,.12)); }
.hero { position: relative; }

/* ---------- salon stations ---------- */
.mirror {
  position: relative; display: block; border-radius: 999px 999px 6px 6px; padding: 7px;
  background: linear-gradient(145deg, #3a3532, #141211 55%, #2b2725);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 8px 14px 24px -14px rgba(40,25,15,.55), 0 2px 3px rgba(40,25,15,.25);
}
.mirror img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; border-radius: 999px 999px 3px 3px; }
.mirror::after { content: ""; position: absolute; inset: 7px; border-radius: 999px 999px 3px 3px; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.16) 38%, rgba(255,255,255,0) 46%, rgba(255,255,255,0) 60%, rgba(255,255,255,.08) 64%, rgba(255,255,255,0) 68%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 22px rgba(0,0,0,.18); }
.station-desk { position: relative; margin-top: .6rem; --plank-h: 18px; --mirror-frac: .82; container-type: inline-size; }
.station-desk__top { --in: calc(100cqw * var(--mirror-frac) / 24); position: relative; display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--in) * .8); height: calc(var(--in) * 10.6 + var(--plank-h) * .84); padding: 0 .75rem calc(var(--plank-h) * .84); }
.station-desk__top .plank { left: -.6rem; right: -.6rem; }
.station-desk__top .decor { position: relative; z-index: 1; }
.station-desk__front {
  position: relative; height: 3.4rem; margin-inline: -.2rem; border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #2a2522, #1b1816); display: grid; place-items: center;
  box-shadow: inset 0 6px 8px -4px rgba(0,0,0,.6), 0 14px 20px -14px rgba(30,20,10,.6);
}
.nameplate {
  margin: 0; padding: .32rem .9rem .3rem; border-radius: 3px; font-family: var(--display); font-weight: 600; font-size: .9rem; letter-spacing: -.005em;
  color: #1A1008; background: linear-gradient(180deg, #EFD9B0, #D2AE77 55%, #BF9860); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.4);
  white-space: nowrap; max-width: calc(100% - 1rem); overflow: hidden; text-overflow: ellipsis;
}

/* team page stations */
.stations { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(4.5rem, 6vw, 6.5rem) clamp(2rem, 4vw, 4rem); }
.station { scroll-margin-top: calc(var(--topbar-h) + 1.5rem); display: flex; flex-direction: column; --hl: 150px; }
.station__wall { padding-inline: clamp(1rem, 3vw, 2.25rem); }
.station .mirror { margin-inline: auto; width: 82%; }
.station__info { margin-top: var(--s5); }
.station__role { color: var(--ink-soft); margin: 0 0 var(--s3); }
.station .person__spec { margin-bottom: var(--s3); }
.station .person__bio { margin-bottom: var(--s3); }
.station .quote { margin: var(--s3) 0 var(--s4); padding-left: var(--s4); border-left: 1px solid var(--oak); }
.station__ask { margin: auto 0 0; padding-top: var(--s3); }
.station:target .mirror { box-shadow: 0 0 0 3px var(--gold-soft), 8px 14px 24px -14px rgba(40,25,15,.55); }

/* home: row of stations */
.station-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4rem clamp(1rem, 2.4vw, 2.25rem); }
.station-mini { --hl: 120px; }
.station-mini .station-desk { --mirror-frac: .86; }
.station-mini a { display: block; text-decoration: none; color: inherit; border-radius: 10px; }
.station-mini .mirror { width: 86%; margin-inline: auto; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.station-mini a:hover .mirror, .station-mini a:focus-visible .mirror { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 10px 22px 30px -16px rgba(40,25,15,.6); }
.station-mini .station-desk { margin-top: .35rem; }
.station-mini .station-desk__top { padding-inline: .5rem; }
.station-mini .station-desk__front { height: 2.7rem; }
.station-mini .nameplate { font-size: .8rem; padding: .25rem .6rem; }
.station-mini__spec { display: block; text-align: center; margin-top: var(--s3); font-size: .9rem; color: var(--ink-soft); line-height: 1.35; }

@media (max-width: 64em) {
  .stations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .station-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
@media (max-width: 48em) {
  .stations { grid-template-columns: 1fr; }
  .station__wall { padding-inline: 8%; }
  .station-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); gap: 1rem; padding: .5rem var(--gutter) 1rem; margin-inline: calc(-1 * var(--gutter)); }
  .station-mini { flex: 0 0 46vw; scroll-snap-align: start; padding-inline: .8rem; }
    .sign { --sign-w: 15.5rem; }
}

/* ---------- vines growing on the wall ----------
   Trailing pothos (Haven keeps pothos on its shelves) grown along section edges. Always behind content, never interactive. */
.has-vine { position: relative; isolation: isolate; overflow-x: clip; }
.vine { position: absolute; z-index: -1; width: var(--w); height: auto; max-width: none; pointer-events: none; user-select: none; filter: drop-shadow(2px 6px 5px rgba(60,45,30,.17)); }
.vine--flip { transform: scaleX(-1); }
@media (max-width: 47.99em) {
  .vine { width: var(--w-sm, var(--w)); }
  .vine--desk { display: none; }
}
/* Vines along the side margins only where the margin is wide enough to hold them clear of text. */
@media (max-width: 87.99em) { .vine--side { display: none; } }
/* Vines in a left column under a heading: only while that column stands beside its content. */
@media (max-width: 64em) { .vine--wide { display: none; } }
@media print { .vine { display: none; } }