/* =========================================================================
   SAGE & CLAY — components                 nail-salon-website-03
   =========================================================================
   No colour literals live here. Every colour, font and measurement comes
   from assets/css/tokens.css — keep it that way and a rebrand stays a
   twenty-minute job.

   Contents
   00  Reset & base
   01  Utilities: wrap, sections, eyebrow, rules, reveal
   02  Skip link & focus
   03  Topline
   04  Header & nav
   05  Mobile drawer
   06  Buttons & text links
   07  Photo mats, arches, film grade
   08  Hero (split)
   09  Pillars strip
   10  Split sections
   11  Services index (numbered rows)
   12  Ritual steps
   13  Collage (home gallery preview)
   14  Quote (stories)
   15  Visit / hours
   16  CTA band
   17  Footer
   18  Mobile call bar
   19  Pagehead (typographic)
   20  Menu (price lists + side rail)
   21  FAQ
   22  Gallery (masonry)
   23  About page pieces
   24  Contact page pieces
   25  Placeholder ribbon & open badge
   26  Print
   ========================================================================= */

/* ---------- 00 Reset & base ---------------------------------------- */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

/* Deep clay for text-sized links — the brighter --c-clay is reserved for
   large type and fills, where 4.5:1 is not required. */
a { color: var(--c-clay-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-ink); }

em, .accent-italic { font-style: italic; }

::selection { background: var(--c-sage-wash); color: var(--c-ink); }

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: 2rem 0;
}

/* ---------- 01 Utilities -------------------------------------------- */

.wrap {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.wrap--narrow { width: min(var(--wrap-narrow), 100% - 2 * var(--gutter)); }

.section { padding-block: var(--section-y); }
.section--linen { background: var(--c-linen); }
.section--sage  { background: var(--c-sage-wash); }
.section--flush-top { padding-top: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-sage-deep);
  margin: 0 0 1.1rem;
}
.eyebrow .leaf { width: 15px; height: 15px; color: var(--c-sage); flex: none; }

.lede {
  font-size: calc(var(--fs-body) * 1.14);
  color: var(--c-ink-soft);
  max-width: 34em;
}

/* Sprig divider: hairline — leaf — hairline */
.rule-leaf {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  margin: 2.25rem auto;
  color: var(--c-sage);
}
.rule-leaf::before, .rule-leaf::after {
  content: "";
  height: 1px;
  width: min(120px, 20vw);
  background: var(--c-line-strong);
}
.rule-leaf .leaf { width: 18px; height: 18px; }

/* Scroll reveal — inert unless JS marks the document ready, and a timed
   fallback class force-shows everything if anything goes wrong. */
.reveal { opacity: 1; transform: none; }
.js-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-out) var(--d, 0s), transform .7s var(--ease-out) var(--d, 0s);
}
.js-ready .reveal.is-in,
.js-ready.reveal-fallback .reveal { opacity: 1; transform: none; }

/* Reduced motion: no slide-ins, no hover zooms — content just appears. */
@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal { opacity: 1; transform: none; transition: none; }
  .mat--hover img { transition: none; }
  .mat--hover:hover img { transform: none; }
}

/* ---------- 02 Skip link & focus ------------------------------------ */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--c-ink);
  color: var(--c-paper);
  padding: .8rem 1.4rem;
  font-weight: 600;
}
.skip:focus { left: 0; }

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

/* ---------- 03 Topline ---------------------------------------------- */

.topline {
  background: var(--c-ink);
  color: var(--c-deep-soft);
  font-size: var(--fs-caption);
  letter-spacing: .08em;
}
.topline .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 32px;
  gap: 1rem;
}
.topline a { color: var(--c-paper); text-decoration: none; }
.topline a:hover { text-decoration: underline; }
.topline__note { text-transform: uppercase; letter-spacing: .18em; font-size: .6875rem; }
@media (max-width: 760px) { .topline { display: none; } }

/* ---------- 04 Header & nav ----------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-canvas);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.header.is-scrolled { box-shadow: var(--shadow-sm); }

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--headbar-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  color: var(--c-ink);
}
.brand:hover { color: var(--c-ink); }
/* The D&J mark is yellow — it needs the pine tile to read on the
   alabaster header, same reasoning as the favicon backing. */
.brand img {
  height: 40px; width: auto; max-width: 120px;
  box-sizing: content-box;
  background: var(--c-ink);
  padding: 6px 9px;
  border-radius: 9px;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: .01em;
  white-space: nowrap;
}
.brand__tag {
  display: block;
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-top: .1rem;
}

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2rem); }
.nav a {
  position: relative;
  color: var(--c-ink-soft);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .06em;
  padding: .35rem 0;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--c-clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--c-ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.header__phone {
  color: var(--c-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-small);
  white-space: nowrap;
}
.header__phone:hover { color: var(--c-clay-deep); }

.header__cta { flex: none; }

.navtoggle {
  display: none;
  background: none;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-xs);
  color: var(--c-ink);
  width: 44px; height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.navtoggle svg { width: 22px; height: 22px; }
.navtoggle .icon-close { display: none; }
.navtoggle[aria-expanded="true"] .icon-open { display: none; }
.navtoggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 1080px) {
  .header__phone { display: none; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  /* .btn is declared further down the file, so this needs the extra class
     to win the cascade — the drawer carries the booking link on small
     screens and the header bar keeps just brand + toggle. */
  .header__cta.btn { display: none; }
  .navtoggle { display: inline-flex; }
  .brand img { height: 28px; padding: 5px 7px; border-radius: 7px; }
  .brand__name { font-size: 1.15rem; }
}

/* ---------- 05 Mobile drawer ---------------------------------------- */

.drawer {
  display: none;
  background: var(--c-canvas);
  border-bottom: 1px solid var(--c-line);
}
.drawer.is-open { display: block; }
.drawer nav {
  display: flex;
  flex-direction: column;
  padding: 1rem var(--gutter) 1.75rem;
  gap: .1rem;
}
.drawer a {
  color: var(--c-ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.5rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--c-line);
}
.drawer a[aria-current="page"] { color: var(--c-clay-deep); }
.drawer .drawer__cta { margin-top: 1.25rem; border-bottom: 0; }
@media (min-width: 901px) { .drawer { display: none !important; } }

/* ---------- 06 Buttons & text links --------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  padding: 1rem 1.9rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--c-clay); color: var(--c-white); }
.btn--primary:hover { background: var(--c-clay-deep); color: var(--c-white); }

.btn--ghost { border-color: var(--c-ink); color: var(--c-ink); background: transparent; }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-canvas); }

.btn--paper { background: var(--c-paper); color: var(--c-ink); }
.btn--paper:hover { background: var(--c-linen); color: var(--c-ink); }

.btn--sm { padding: .7rem 1.3rem; font-size: .75rem; }

/* Editorial arrow link */
.tlink {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  color: var(--c-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-line-strong);
  padding-bottom: .3rem;
}
.tlink .arrow { transition: transform var(--dur-fast) var(--ease); }
.tlink:hover { color: var(--c-clay-deep); border-color: var(--c-clay-deep); }
.tlink:hover .arrow { transform: translateX(5px); }

/* ---------- 07 Photo mats, arches, film grade ------------------------ */

/* Every photo sits on a paper mat, like a framed print in a gallery. */
.mat {
  background: var(--c-paper);
  padding: var(--mat-pad);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.mat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius) - 4px);
  filter: var(--photo-grade);
}

/* The signature arch — apply next to .mat on the wrapper */
.mat--arch { border-radius: var(--radius-arch); }
.mat--arch img { border-radius: calc(999px - var(--mat-pad)) calc(999px - var(--mat-pad)) 6px 6px; }

.mat--hover img { transition: transform .8s var(--ease); }
.mat--hover:hover img { transform: scale(1.035); }

.caption {
  font-size: var(--fs-caption);
  color: var(--c-ink-faint);
  letter-spacing: .04em;
  margin-top: .6rem;
}

/* ---------- 08 Hero (split) ------------------------------------------ */

.hero { overflow: clip; }
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  margin: 0 0 1.4rem;
  max-width: 11em;
}
.hero__title em { color: var(--c-clay); }

.hero__sub {
  font-size: calc(var(--fs-body) * 1.18);
  color: var(--c-ink-soft);
  max-width: 30em;
  margin-bottom: 2rem;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-caption);
  color: var(--c-ink-faint);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hero__media { position: relative; }
.hero__media .mat { position: relative; z-index: 1; }
/* sage echo arch behind the photo */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 26px -26px -26px 26px;
  border: 1px solid var(--c-sage);
  border-radius: var(--radius-arch);
  opacity: .55;
}
.hero__media .leaf-flourish {
  position: absolute;
  z-index: 2;
  width: clamp(70px, 9vw, 110px);
  height: auto;
  color: var(--c-sage-deep);
  left: -34px;
  bottom: -18px;
  transform: rotate(-8deg);
}

.hero__badge {
  position: absolute;
  z-index: 2;
  right: -14px;
  top: 14%;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .8rem 1.1rem;
  font-size: var(--fs-caption);
  color: var(--c-ink-soft);
  letter-spacing: .06em;
}
.hero__badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-ink);
  letter-spacing: 0;
}

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero__media { max-width: 440px; margin-inline: auto; }
  .hero__media .leaf-flourish { left: -12px; }
  .hero__badge { right: 6px; }
}
@media (max-width: 560px) {
  .hero__badge { display: none; }
}

/* ---------- 09 Pillars strip ----------------------------------------- */

.pillars { border-block: 1px solid var(--c-line); background: var(--c-paper); }
.pillars .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-block: 0;
}
.pillar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 1.75rem;
}
.pillar + .pillar { border-left: 1px solid var(--c-line); }
.pillar .leaf { width: 26px; height: 26px; color: var(--c-sage-deep); flex: none; }
.pillar strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: .01em;
}
.pillar span { font-size: var(--fs-caption); color: var(--c-ink-faint); }
@media (max-width: 860px) {
  .pillars .wrap { grid-template-columns: 1fr; }
  .pillar + .pillar { border-left: 0; border-top: 1px solid var(--c-line); }
  .pillar { padding: 1.1rem .25rem; }
}

/* ---------- 10 Split sections ---------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.25rem, 6vw, 5.5rem);
  align-items: center;
}
.split--media-left  .split__media { order: -1; }
.split__media { position: relative; }

/* small offset still-life stacked on the main studio shot */
.split__inset {
  position: absolute;
  width: clamp(140px, 18vw, 220px);
  right: -8%;
  bottom: -3rem;
  z-index: 2;
}
.split__inset .mat { box-shadow: var(--shadow-lg); }

.split__body .tlink { margin-top: 1.5rem; }

.ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.ticks li {
  position: relative;
  padding: .45rem 0 .45rem 2rem;
  color: var(--c-ink-soft);
}
.ticks .leaf {
  position: absolute;
  left: 0; top: .78em;
  width: 16px; height: 16px;
  color: var(--c-clay);
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--media-left .split__media { order: 0; }
  .split__inset { right: 4%; bottom: -2rem; }
  .split__body { padding-bottom: 1rem; }
}

/* ---------- 11 Services index (numbered rows) ------------------------ */

.svcindex { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line-strong); }

.svcrow { border-bottom: 1px solid var(--c-line-strong); }
.svcrow a {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 5fr) minmax(0, 6fr) auto auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: 1.5rem .5rem;
  text-decoration: none;
  color: var(--c-ink);
  transition: background var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.svcrow a:hover { background: var(--c-paper); padding-left: 1.1rem; }

.svcrow__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--c-sage-deep);
}
.svcrow__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  letter-spacing: -.01em;
}
.svcrow__desc { color: var(--c-ink-faint); font-size: var(--fs-small); }
.svcrow__thumb {
  width: 74px; height: 92px;
  border-radius: 999px 999px 4px 4px;
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  padding: 4px;
}
.svcrow__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 999px 999px 2px 2px;
  filter: var(--photo-grade);
}
.svcrow__arrow {
  color: var(--c-clay-deep);
  font-size: 1.3rem;
  transition: transform var(--dur-fast) var(--ease);
}
.svcrow a:hover .svcrow__arrow { transform: translateX(6px); }

@media (max-width: 860px) {
  .svcrow a { grid-template-columns: 2.4rem minmax(0, 1fr) auto; }
  .svcrow__desc, .svcrow__thumb { display: none; }
}

/* ---------- 12 Ritual steps ------------------------------------------ */

.ritual {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  counter-reset: step;
}
.ritual__step { position: relative; padding-top: 1.6rem; }
.ritual__step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -1.1rem;
  left: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--c-sage);
  opacity: .55;
}
.ritual__step h3 { position: relative; margin-bottom: .5rem; }
.ritual__step p { color: var(--c-ink-soft); font-size: var(--fs-small); }
@media (max-width: 760px) {
  .ritual { grid-template-columns: 1fr; gap: 2.75rem; }
}

/* ---------- 13 Collage (home gallery preview) ------------------------ */

.collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}
.collage__a { grid-column: 1 / span 5; }
.collage__b { grid-column: 6 / span 4; margin-top: 3.5rem; }
.collage__c { grid-column: 10 / span 3; margin-top: 7rem; }
@media (max-width: 760px) {
  .collage__a { grid-column: 1 / span 7; }
  .collage__b { grid-column: 8 / span 5; margin-top: 2.5rem; }
  .collage__c { display: none; }
}

/* ---------- 14 Quote (stories) --------------------------------------- */

.stories { text-align: center; }
.stories .quote {
  position: relative;
  max-width: 21em;
  margin: 0 auto 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-quote);
  line-height: 1.35;
  color: var(--c-ink);
}
.stories .quote p { margin: 0; }
.stories__who {
  font-size: var(--fs-small);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-bottom: 2rem;
}
.stories__nav {
  background: none;
  border: 0;
  padding: .3rem;
  cursor: pointer;
  color: var(--c-ink);
  font: 600 var(--fs-small) var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-line-strong);
}
.stories__nav:hover { color: var(--c-clay-deep); border-color: var(--c-clay-deep); }
.stories__slide { display: none; }
.stories__slide.is-active { display: block; }

/* ---------- 15 Visit / hours ----------------------------------------- */

.hours { width: 100%; border-collapse: collapse; }
.hours caption {
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  padding-bottom: .8rem;
}
.hours th, .hours td {
  padding: .7rem .25rem;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-small);
  text-align: left;
}
.hours th { font-weight: 500; color: var(--c-ink-soft); }
.hours td { text-align: right; color: var(--c-ink); }
.hours tr.is-today th, .hours tr.is-today td {
  color: var(--c-clay-deep);
  font-weight: 600;
}
.hours tr.is-today th::after {
  content: "· today";
  font-style: italic;
  font-family: var(--font-display);
  margin-left: .45rem;
  color: var(--c-sage-deep);
  font-weight: 400;
}
.hours .is-closed td { color: var(--c-ink-faint); font-style: italic; }

/* ---------- 16 CTA band ----------------------------------------------- */

.band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--c-paper);
  text-align: center;
  padding-block: clamp(5rem, 12vw, 9rem);
}
.band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--photo-grade);
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-band);
}
.band h2 { color: var(--c-paper); max-width: 16em; margin-inline: auto; }
.band h2 em { color: var(--c-clay-wash); }
.band p { color: var(--c-deep-soft); max-width: 36em; margin: 0 auto 2rem; }
.band .btn { margin-inline: .5rem; margin-top: .5rem; }

/* ---------- 17 Footer -------------------------------------------------- */

.footer {
  background: var(--c-deep);
  color: var(--c-deep-soft);
  font-size: var(--fs-small);
}
.footer a { color: var(--c-deep-soft); text-decoration: none; }
.footer a:hover { color: var(--c-paper); text-decoration: underline; }

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
}
.footer__brand img { height: 44px; width: auto; }
.footer__brand p { margin-top: 1.1rem; max-width: 30em; }
.footer h3 {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-paper);
  margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { padding: .28rem 0; }

.footer__bar {
  border-top: 1px solid var(--c-deep-line);
  padding-block: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  font-size: var(--fs-caption);
}
.footer__bar a { text-decoration: underline; }

.social { display: flex; gap: 1rem; margin-top: 1.4rem; }
.social a {
  display: inline-flex;
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-deep-line);
  border-radius: 50%;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.social a:hover { border-color: var(--c-paper); color: var(--c-paper); text-decoration: none; }
.social svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ---------- 18 Mobile call bar ----------------------------------------- */

.callbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  gap: .6rem;
}
.callbar .btn { flex: 1; padding: .85rem 1rem; }
@media (max-width: 760px) {
  .callbar { display: flex; }
  body { padding-bottom: 76px; }
}

/* ---------- 19 Pagehead (typographic — no photo, unlike 01/02) --------- */

.pagehead {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}
.pagehead h1 { max-width: 14em; margin-inline: auto; }
.pagehead h1 em { color: var(--c-clay); }
.pagehead .lede { margin-inline: auto; text-align: center; }
.pagehead .rule-leaf { margin-bottom: 0; }

/* ---------- 20 Menu (price lists + side rail) --------------------------- */

.menu-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.menurail {
  position: sticky;
  top: calc(var(--headbar-h) + 1.5rem);
}
.menurail h2 {
  font-size: .6875rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-bottom: 1rem;
}
.menurail ul { list-style: none; margin: 0; padding: 0; }
.menurail a {
  display: block;
  padding: .5rem 0 .5rem 1rem;
  border-left: 1px solid var(--c-line);
  color: var(--c-ink-soft);
  text-decoration: none;
  font-size: var(--fs-small);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.menurail a:hover { color: var(--c-ink); }
.menurail a.is-active {
  color: var(--c-clay-deep);
  border-left-color: var(--c-clay);
  font-weight: 600;
}

.menu-note {
  background: var(--c-sage-wash);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  margin-bottom: 2.5rem;
}

.menucat { padding-top: 1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); scroll-margin-top: calc(var(--headbar-h) + 1rem); }
.menucat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--c-line-strong);
  padding-bottom: .8rem;
  margin-bottom: .4rem;
}
.menucat__head h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.menucat__head .menucat__sub {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-sage-deep);
  font-size: 1rem;
  white-space: nowrap;
}

.pricelist { list-style: none; margin: 0; padding: 0; }
.pricelist li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .35rem 1.5rem;
  padding: .95rem .25rem;
  border-bottom: 1px solid var(--c-line);
  align-items: baseline;
}
.pricelist .name {
  font-weight: 600;
  font-size: var(--fs-body);
}
.pricelist .name .tag {
  display: inline-block;
  margin-left: .6rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: .9rem;
  color: var(--c-clay-deep);
}
.pricelist .desc {
  grid-column: 1;
  color: var(--c-ink-faint);
  font-size: var(--fs-small);
}
.pricelist .price {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--c-ink);
  white-space: nowrap;
}
.pricelist .price small {
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--c-ink-faint);
  letter-spacing: .04em;
}

.fineprint {
  font-size: var(--fs-caption);
  color: var(--c-ink-faint);
  max-width: 52em;
}

@media (max-width: 860px) {
  .menu-layout { grid-template-columns: 1fr; }
  .menurail {
    position: static;
    overflow-x: auto;
    padding-bottom: .5rem;
    -webkit-overflow-scrolling: touch;
  }
  .menurail h2 { display: none; }
  .menurail ul { display: flex; gap: .4rem; }
  .menurail a {
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-xs);
    padding: .45rem .9rem;
    white-space: nowrap;
  }
  .menurail a.is-active {
    border-color: var(--c-clay);
    background: var(--c-clay-wash);
  }
}

/* ---------- 21 FAQ ------------------------------------------------------ */

.faq { border-top: 1px solid var(--c-line-strong); }
.faq details { border-bottom: 1px solid var(--c-line-strong); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.3rem .25rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--c-clay);
  flex: none;
  transition: transform var(--dur-fast) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__body { padding: 0 .25rem 1.5rem; color: var(--c-ink-soft); max-width: 60em; }

/* ---------- 22 Gallery (masonry) ---------------------------------------- */

.masonry {
  columns: 3;
  column-gap: clamp(1rem, 2.5vw, 1.75rem);
}
.masonry > figure {
  break-inside: avoid;
  margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
}
.masonry figcaption {
  font-size: var(--fs-caption);
  color: var(--c-ink-faint);
  padding: .55rem .2rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.masonry figcaption .num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-sage-deep);
}
@media (max-width: 900px) { .masonry { columns: 2; } }
@media (max-width: 540px) { .masonry { columns: 1; } }

/* ---------- 23 About page pieces ----------------------------------------- */

.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
.value {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.9rem 1.7rem;
}
.value .leaf { width: 24px; height: 24px; color: var(--c-clay); margin-bottom: 1rem; }
.value h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.value p { color: var(--c-ink-soft); font-size: var(--fs-small); }
@media (max-width: 860px) { .values { grid-template-columns: 1fr; } }

.mood {
  position: relative;
}
.mood .caption { text-align: center; }

/* ---------- 24 Contact page pieces --------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.infocard {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.infocard .hours { margin-top: 1.5rem; }
.infocard__row {
  display: flex;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--c-line);
  align-items: baseline;
}
.infocard__row:last-of-type { border-bottom: 0; }
.infocard__row .leaf { width: 17px; height: 17px; color: var(--c-sage-deep); flex: none; align-self: center; }
.infocard__row a { color: var(--c-ink); text-decoration: none; }
.infocard__row a:hover { color: var(--c-clay-deep); }
.infocard__label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  min-width: 5.2rem;
}
.infocard .btns { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

.map {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  padding: var(--mat-pad);
}
.map iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
  border-radius: calc(var(--radius) - 4px);
  filter: saturate(.55) sepia(.14);
}
.map__cta {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
}

/* ---------- 25 Placeholder ribbon & open badge ---------------------------- */

.placeholder-tag {
  display: inline-block;
  background: var(--c-warn-wash);
  color: var(--c-warn);
  border: 1px solid var(--c-warn);
  border-radius: var(--radius-xs);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3rem .7rem;
}

.open-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: var(--radius-xs);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4rem .8rem;
}
.open-badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.open-badge.is-open   { background: var(--c-open-wash);   color: var(--c-open); }
.open-badge.is-closed { background: var(--c-closed-wash); color: var(--c-closed); }

/* ---------- 26 Print ------------------------------------------------------ */

@media print {
  .topline, .header, .drawer, .callbar, .band, .footer .social,
  .menurail, .navtoggle, .btn, .map__cta { display: none !important; }
  body { background: var(--c-white); color: var(--c-ink); padding-bottom: 0; }
  .section { padding-block: 1.5rem; }
  .pagehead { padding: 1rem 0; }
  .mat, .infocard, .value { box-shadow: none; }
  .menu-layout { grid-template-columns: 1fr; }
  .menucat { break-inside: avoid; margin-bottom: 1.5rem; }
  a { color: var(--c-ink); text-decoration: none; }
}