/* ==========================================================================
   BEAUTY BY BROOKLYN
   Country, simple, minimal. Neutral ground with small pops of color.
   Tokens, spacing scale, and everything that can't be an inline style.
   Palette changes happen here and nowhere else.
   ========================================================================== */

:root {
  /* Neutrals */
  --cream: #FBF9F5;
  --oat:   #F2EDE4;
  --sand:  #E8E1D5;
  --ink:   #2E2A25;
  --muted: #675F57; /* AA on all three grounds: 5.94:1 cream, 5.37:1 oat, 4.81:1 sand */

  /* The pops of color, used sparingly */
  --rose:  #8B443F; /* AA on all four grounds: 6.66:1 cream, 6.01:1 oat, 5.39:1 sand, 5.19:1 blush */
  --blush: #EFD9D4;

  /* Derived, not new colors */
  --rule:        rgba(46, 42, 37, 0.16);
  --rule-strong: rgba(46, 42, 37, 0.38);
  --rule-inv:    rgba(251, 249, 245, 0.24);
  --ink-70:      rgba(46, 42, 37, 0.72);
  --cream-70:    rgba(251, 249, 245, 0.74);

  --display: Lora, Georgia, "Times New Roman", serif;
  --body: "Work Sans", "Helvetica Neue", Arial, sans-serif;

  /* Spacing — generous on purpose */
  --pad: clamp(24px, 6vw, 120px);
  --section: clamp(80px, 13vh, 180px);
  --gap: clamp(28px, 4vw, 76px);
  --max: 1280px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --enter: 520ms;
  --feedback: 180ms;
}

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

html, body {
  overflow-x: hidden;
  max-width: 100%;
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 100%;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

img, svg, video, canvas, iframe, table, pre { max-width: 100%; }
img { display: block; }
h1, h2, h3, h4, p, figure, figcaption, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

[data-wrap-any] { overflow-wrap: anywhere; word-break: break-word; }
[data-fit] { overflow-wrap: normal; word-break: keep-all; hyphens: none; }

button { color: inherit; -webkit-text-fill-color: currentColor; font: inherit; background: none; border: 0; cursor: pointer; }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; }

/* Skip link: offscreen until focused */
[data-skip] {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--cream);
  padding: 14px 22px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}
[data-skip]:focus { left: 12px; top: 12px; color: var(--cream); }

::selection { background: var(--blush); color: var(--ink); }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }
[data-dark] :focus-visible { outline-color: var(--cream); }

/* --- LINKS --------------------------------------------------------------- */
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--rose); }
[data-dark] a { color: var(--cream); }
[data-dark] a:hover { color: var(--cream); opacity: .66; }

/* --- STATES -------------------------------------------------------------- */
[data-mark] { border-bottom: 1px solid transparent; transition: border-color var(--feedback) var(--ease); }
[data-mark]:hover { border-bottom-color: var(--rose); }

[data-nav-link] { color: var(--ink); transition: color var(--feedback) var(--ease); position: relative; }
[data-nav-link]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
  background: var(--rose); transform: scaleX(0); transform-origin: left center;
  transition: transform 320ms var(--ease);
}
[data-nav-link]:hover { color: var(--rose); }
[data-nav-link]:hover::after { transform: scaleX(1); }
[data-nav-link][aria-current="page"] { color: var(--rose); }
[data-nav-link][aria-current="page"]::after { transform: scaleX(1); }

[data-btn] {
  background: var(--rose); color: var(--cream);
  transition: background-color var(--feedback) var(--ease), transform var(--feedback) var(--ease);
}
[data-btn]:hover { background: #7E3D39; color: var(--cream); transform: translateY(-2px); }
[data-btn]:active { transform: translateY(0); }

[data-btn-line] {
  border: 1px solid var(--rule-strong); color: var(--ink);
  transition: border-color var(--feedback) var(--ease), background-color var(--feedback) var(--ease);
}
[data-btn-line]:hover { border-color: var(--rose); background: var(--blush); color: var(--ink); }

[data-btn-inv] {
  border: 1px solid var(--cream-70); color: var(--cream);
  transition: background-color var(--feedback) var(--ease), color var(--feedback) var(--ease);
}
[data-btn-inv]:hover { background: var(--cream); color: var(--ink); }

[data-quiet] { color: var(--muted); transition: color var(--feedback) var(--ease); }
[data-quiet]:hover { color: var(--rose); }
[data-dark] [data-quiet] { color: var(--cream-70); }
[data-dark] [data-quiet]:hover { color: var(--cream); }

/* Standalone text CTAs. Sized to a real tap target, not the line box. */
[data-ul] { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--rule-strong); transition: border-color var(--feedback) var(--ease), color var(--feedback) var(--ease); }
[data-ul]:hover { border-bottom-color: var(--rose); }

[data-credit] { border-bottom: 1px solid transparent; transition: border-color var(--feedback) var(--ease); }
[data-credit]:hover { border-bottom-color: var(--cream-70); }

/* Rounding is deliberate, not uniform. The two true portrait moments get the
   arch; supporting photographs get a barely-there radius. */
[data-arch] { border-radius: 9999px 9999px 6px 6px; }
[data-inset] { border-radius: 4px; }

/* Photographs zoom gently inside a fixed frame rather than jumping. */
[data-photo] { display: block; width: 100%; cursor: zoom-in; overflow: hidden; background: var(--sand); }
[data-photo] img { transition: transform 800ms var(--ease); }
@media (hover: hover) and (min-width: 821px) {
  [data-photo]:hover img { transform: scale(1.04); }
}

/* Scroll reveal. The hidden state is applied by site.js, never by CSS alone, so
   with JS off every section stays visible. */
[data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity 780ms var(--ease), transform 780ms var(--ease);
}
[data-reveal][data-shown="true"] { opacity: 1; transform: none; }

/* Service marquee. Both halves are pinned by site.js to the SAME integer pixel
   width, so the track is exactly twice one half and a constant -50% lands on an
   exact pixel boundary. The endpoint must never change while the animation is
   running — a variable endpoint makes the seam jump mid-flight — so the track
   starts paused and only runs once it has been measured. */
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
[data-marquee] { overflow: hidden; }
[data-marquee-track] {
  display: flex; width: max-content;
  animation: marquee 46s linear infinite;
  animation-play-state: paused;
  will-change: transform; backface-visibility: hidden;
}
[data-marquee-track][data-ready="true"] { animation-play-state: running; }
[data-marquee]:hover [data-marquee-track][data-ready="true"] { animation-play-state: paused; }

/* Small rose ornament */
[data-orn] { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--rose); }
[data-orn]::before, [data-orn]::after { content: ""; width: clamp(28px, 6vw, 64px); height: 1px; background: var(--rule); }

/* --- PAGE TRANSITIONS ----------------------------------------------------
   The ENTRY fade lives in each page's inline critical <style>, not here: an
   external stylesheet needs a network round trip, so a rule in this file
   cannot hide the unstyled first paint it is meant to cover. Only the exit
   state belongs here. Opacity only, never transform, or a transformed
   ancestor would become the containing block for the fixed nav. */
[data-page][data-leaving="true"] {
  animation: none;
  opacity: 0;
  transition: opacity 250ms var(--ease);
}

/* --- CURSOR --------------------------------------------------------------
   A small pair of shears. Interactive elements keep their standard cursors so
   affordances are never lost. Delete these four rules to restore the default. */
body {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E2A25'%20stroke-width='1.7'%20stroke-linecap='round'%3E%3Ccircle%20cx='6.5'%20cy='18'%20r='2.4'/%3E%3Ccircle%20cx='17.5'%20cy='18'%20r='2.4'/%3E%3Cpath%20d='M8.4%2016.2%2017.6%204.5'/%3E%3Cpath%20d='M15.6%2016.2%206.4%204.5'/%3E%3C/svg%3E") 13 11, auto;
}
a, button, [role="button"], label, summary {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232E2A25'%20stroke-width='1.7'%20stroke-linecap='round'%3E%3Ccircle%20cx='9'%20cy='18.6'%20r='2.3'/%3E%3Ccircle%20cx='15'%20cy='18.6'%20r='2.3'/%3E%3Cpath%20d='M10.3%2016.5%2012.3%204.6'/%3E%3Cpath%20d='M13.7%2016.5%2011.7%204.6'/%3E%3C/svg%3E") 12 4, pointer;
}
[data-photo] { cursor: zoom-in; }
[data-dark] a, [data-dark] button {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FBF9F5'%20stroke-width='1.7'%20stroke-linecap='round'%3E%3Ccircle%20cx='9'%20cy='18.6'%20r='2.3'/%3E%3Ccircle%20cx='15'%20cy='18.6'%20r='2.3'/%3E%3Cpath%20d='M10.3%2016.5%2012.3%204.6'/%3E%3Cpath%20d='M13.7%2016.5%2011.7%204.6'/%3E%3C/svg%3E") 12 4, pointer;
}
[data-dark] {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FBF9F5'%20stroke-width='1.7'%20stroke-linecap='round'%3E%3Ccircle%20cx='6.5'%20cy='18'%20r='2.4'/%3E%3Ccircle%20cx='17.5'%20cy='18'%20r='2.4'/%3E%3Cpath%20d='M8.4%2016.2%2017.6%204.5'/%3E%3Cpath%20d='M15.6%2016.2%206.4%204.5'/%3E%3C/svg%3E") 13 11, auto;
}

/* --- LIGHTBOX ------------------------------------------------------------ */
[data-lightbox] {
  position: fixed; inset: 0; z-index: 95; background: rgba(30, 27, 23, 0.96);
  display: none; align-items: center; justify-content: center;
}
[data-lightbox][data-open="true"] { display: flex; }

/* --- NAV ----------------------------------------------------------------- */
@media (min-width: 821px) {
  [data-links] { order: 2; flex: 1 1 auto; justify-content: flex-end; border-top: 0; }
  /* The hamburger and its drawer furniture are phone-only. [data-drawer-extra]
     is injected into the links row, so it must be hidden here too or its Book
     button and phone number sit in the desktop bar. */
  [data-burger], [data-drawer-scrim], [data-drawer-extra] { display: none !important; }
}

/* --- MOBILE DRAWER -------------------------------------------------------
   Phone navigation is a hamburger drawer, not a squeezed row. Every drawer
   rule is gated behind html.bbb-js (set by the inline head script), so with
   scripting off the links stay a plain visible row and nothing is trapped
   behind a button that cannot open. */
@media (max-width: 820px) {
  [data-links] {
    order: 9; flex-basis: 100%; justify-content: center;
    border-top: 1px solid var(--rule);
  }

  html.bbb-js [data-burger] {
    order: 3; margin-left: auto;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; width: 46px; height: 46px; flex: 0 0 auto;
  }
  html.bbb-js [data-burger] span {
    display: block; width: 22px; height: 1.5px; background: var(--ink);
    transition: transform 320ms var(--ease), opacity 200ms var(--ease);
  }
  html[data-drawer="open"] [data-burger] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  html[data-drawer="open"] [data-burger] span:nth-child(2) { opacity: 0; }
  html[data-drawer="open"] [data-burger] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  html.bbb-js [data-links] {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(86vw, 340px);
    order: 0; flex-basis: auto; border-top: 0;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: calc(env(safe-area-inset-top, 0px) + 84px) 30px calc(env(safe-area-inset-bottom, 0px) + 34px);
    background: var(--cream);
    box-shadow: -18px 0 44px rgba(46, 42, 37, 0.13);
    transform: translateX(101%);
    transition: transform 460ms var(--ease);
    overflow-y: auto; overscroll-behavior: contain;
    z-index: 70;
  }
  html[data-drawer="open"] [data-links] { transform: translateX(0); }

  /* Drawer links read as a menu: large, serif, generously spaced, hairline
     separated. Tap rows are full width so the whole line is the target. */
  html.bbb-js [data-links] [data-nav-link] {
    display: flex !important; align-items: center;
    min-height: 64px !important;
    font-family: var(--display) !important;
    font-size: 27px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border-bottom: 1px solid var(--rule);
    opacity: 0; transform: translateX(14px);
    transition: opacity 300ms var(--ease), transform 300ms var(--ease), color var(--feedback) var(--ease);
  }
  html[data-drawer="open"] [data-links] [data-nav-link] { opacity: 1; transform: none; }
  html[data-drawer="open"] [data-links] [data-nav-link]:nth-of-type(1) { transition-delay: 90ms; }
  html[data-drawer="open"] [data-links] [data-nav-link]:nth-of-type(2) { transition-delay: 150ms; }
  html[data-drawer="open"] [data-links] [data-nav-link]:nth-of-type(3) { transition-delay: 210ms; }
  /* The sliding underline is a desktop hover affordance; it has no place here. */
  html.bbb-js [data-links] [data-nav-link]::after { display: none; }

  html.bbb-js [data-drawer-extra] {
    margin-top: auto; padding-top: 30px;
    display: flex; flex-direction: column; gap: 14px;
    opacity: 0; transition: opacity 300ms var(--ease) 260ms;
  }
  html[data-drawer="open"] [data-drawer-extra] { opacity: 1; }

  html.bbb-js [data-drawer-scrim] {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(46, 42, 37, 0.34);
    opacity: 0; pointer-events: none;
    transition: opacity 460ms var(--ease);
  }
  html[data-drawer="open"] [data-drawer-scrim] { opacity: 1; pointer-events: auto; }

  /* The top bar sits above both, so the wordmark and the close affordance
     stay reachable while the drawer is open. */
  [data-nav] { z-index: 75; }

  /* Book lives inside the drawer on phones; two buttons plus a wordmark cannot
     fit a 360px bar without crowding. */
  /* !important because the tag carries an inline display declaration, which
     would otherwise win over this rule. */
  html.bbb-js [data-navrow] > div > [data-btn] { display: none !important; }
}

/* --- COLLAPSES ----------------------------------------------------------- */
@media (max-width: 1000px) {
  [data-hero] { grid-template-columns: 1fr !important; }
  [data-hero-img] { max-width: min(100%, 420px) !important; max-height: none !important; margin-inline: auto; }
}

/* Phones get ONE column, everywhere. Two-up grids at 360px leave photographs
   too small to judge hair colour by, which is the whole point of the gallery. */
@media (max-width: 820px) {
  [data-two] { grid-template-columns: 1fr !important; }
  [data-two] [data-inset] { max-width: 340px !important; }
  [data-grid] { grid-template-columns: 1fr !important; }
  [data-stagger] > * { margin-top: 0 !important; }

  /* Any auto-fit track wide enough to pair up is pinned to a single column. */
  [data-screen-label] [style*="auto-fit"] { grid-template-columns: 1fr !important; }

  /* Footer blocks are flex-basis sized, so they pair up without this. */
  footer [style*="flex:1 1"] { flex-basis: 100% !important; }

  /* Portrait figures centre rather than hugging the desktop edge. */
  [data-two] figure > [data-inset] { margin-left: 0 !important; margin-right: auto !important; }
}

/* Label/description rows sit inside an already-halved column, so they need to
   stack well before the phone breakpoint. Full-width rows (services) keep
   their two-column rhythm down to the phone breakpoint below. */
@media (max-width: 1100px) {
  [data-two] [data-row] { grid-template-columns: 1fr !important; gap: 6px !important; }
}

@media (max-width: 820px) {
  [data-row] { grid-template-columns: 1fr !important; gap: 6px !important; }
}

/* Tablets keep a two-up rhythm; phones never do. */
@media (min-width: 821px) and (max-width: 900px) {
  [data-grid] { grid-template-columns: 1fr 1fr !important; }
}

/* --- GALLERY (masonry columns keep every photo at its native ratio) ------
   Each figure is an inline-block so it is an atomic, unfragmentable unit.
   break-inside alone is not honoured here: the [data-photo] button child
   establishes its own formatting context and the column break lands between
   the button and the figcaption, splitting a photo from its own caption. */
[data-gallery] { columns: 3; column-gap: var(--gap); }
[data-gallery] > figure {
  display: inline-block; width: 100%; vertical-align: top;
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  margin: 0 0 var(--gap);
}
@media (min-width: 821px) and (max-width: 900px) { [data-gallery] { columns: 2 !important; } }
@media (max-width: 820px) { [data-gallery] { columns: 1 !important; } }

/* --- MOTION -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-photo]:hover img { transform: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-marquee-track] { animation: none !important; }
  [data-page] { animation: none !important; }
  [data-links], [data-links] [data-nav-link], [data-drawer-extra], [data-burger] span { transition: none !important; }
  html.bbb-js [data-links] [data-nav-link] { opacity: 1 !important; transform: none !important; }
  html.bbb-js [data-drawer-extra] { opacity: 1 !important; }
  [data-page][data-leaving="true"] { opacity: 1 !important; }
}

/* --- PRINT --------------------------------------------------------------- */
@media print {
  [data-nav], [data-lightbox] { display: none !important; }
  body { background: #fff; color: #000; }
}