/* ==========================================================================
   nails by anh — site styles
   Loads AFTER tokens/brand-tokens.css and reads everything from it.
   No hex values here (BRAND.md §8). Flat colour, black keyline used
   deliberately, no shadows, no gradients. Headings lowercase; long-form
   and practical copy in sentence case (BRAND.md §3).
   ========================================================================== */

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

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

body { margin: 0; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* skip link — visible only on focus */
.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 20;
  padding: var(--s-2) var(--s-4);
  background: var(--surface-raised); color: var(--text-strong);
  border: var(--stroke) solid var(--keyline); border-radius: var(--radius-pill);
  font-weight: var(--w-semibold); text-decoration: none; text-transform: lowercase;
}
.skip:focus { top: var(--s-4); }

/* --------------------------------------------------------------------------
   layout
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--s-6); }
.wrap--narrow { max-width: 760px; }

.band { padding-block: var(--s-9); }
.band--ivory  { background: var(--surface); }
.band--white  { background: var(--surface-raised); }
.band--sunken { background: var(--surface-sunken); }
.band--pink   { background: var(--surface-accent); color: var(--text-on-pink); }
.band--pink h1, .band--pink h2, .band--pink h3 { color: var(--text-on-pink); }
.band--ink    { background: var(--surface-inverse); color: var(--text-on-inverse); }
.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--text-on-inverse); }

/* a pattern band never carries text (BRAND.md §5) */
.band--pattern {
  height: 132px; padding: 0;
  background: var(--surface) url("patterns/pattern-x-ivory.svg") center / 200px repeat;
}

.lede { font-size: var(--t-lg); color: var(--text-muted); max-width: 56ch; }
.band--pink .lede { color: var(--text); }
.band--ink .lede  { color: var(--ivory-300); }

.eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0 0 var(--s-4);
  font-size: var(--t-sm); font-weight: var(--w-semibold);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow::before {
  content: ''; flex: none; width: 16px; height: 12px;
  background: url("marks/mark-x.svg") center / contain no-repeat;
}
.band--pink .eyebrow { color: var(--pink-900); }
.band--ink .eyebrow  { color: var(--ivory-300); }
.band--ink .eyebrow::before { background-image: url("marks/mark-x-pink.svg"); }

.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5); margin-bottom: var(--s-7);
}
.sec-head h2 { margin-bottom: var(--s-3); }
.sec-head > div:last-child { flex: none; }

.btn--lg { padding: var(--s-4) var(--s-6); font-size: var(--t-lg); }
.btn--sm { padding: var(--s-2) var(--s-4); font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   top strip — ink, wordmark in white, book button
   -------------------------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface-inverse); color: var(--text-on-inverse);
}
.top .wrap { display: flex; align-items: center; gap: var(--s-5); min-height: 62px; }
.top__mark { display: block; flex: none; }
.top__mark img { width: 128px; }
.top nav { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
.top nav a {
  color: var(--text-on-inverse); text-decoration: none;
  font-weight: var(--w-medium); font-size: var(--t-sm); text-transform: lowercase;
}
.top nav a:hover { color: var(--pink-300); }
.top nav a.btn, .top nav a.btn:hover { color: var(--text-on-pink); }
.top :focus-visible { outline-color: var(--ivory-0); }

/* --------------------------------------------------------------------------
   hero
   -------------------------------------------------------------------------- */
.hero { text-align: center; padding-block: var(--s-9) var(--s-10); }
.hero__logo { width: min(320px, 64vw); margin: 0 auto var(--s-8); } /* clear space ≈ one ear */
.hero h1 {
  font-size: clamp(var(--t-2xl), 5.4vw, var(--t-4xl));
  max-width: 18ch; margin: 0 auto var(--s-5);
}
.hero__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-3);
  margin: 0; font-size: var(--t-sm); font-weight: var(--w-semibold);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted);
}
.hero__meta li + li::before { content: '·'; margin-right: var(--s-3); color: var(--pink-600); }
.hero .lede { margin-inline: auto; }
.hero__meta--below { margin-top: var(--s-5); }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-7); }

/* --------------------------------------------------------------------------
   the work — tight crops, 3 across
   -------------------------------------------------------------------------- */
.work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.work > * {
  margin: 0; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  background: var(--surface-raised);
}
.work img { width: 100%; height: 100%; object-fit: cover; }

/* placeholder until the photos land */
.work .ph { display: grid; place-content: center; justify-items: center; gap: var(--s-3); }
.work .ph img { width: 30%; height: auto; opacity: .28; }
.work .ph span { font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-600); }

/* the last tile points at instagram: pink, ink text, never white */
.work .ig {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--s-3);
  background: var(--surface-accent); color: var(--text-on-pink);
  text-decoration: none; text-align: center; padding: var(--s-5);
}
.work .ig img { width: 30%; height: auto; }
.work .ig b { font-weight: var(--w-semibold); font-size: var(--t-xl); letter-spacing: var(--track-display); }
.work .ig span { font-size: var(--t-sm); color: var(--pink-900); }
.work .ig:hover { background: var(--pink-400); }

/* --------------------------------------------------------------------------
   what i do — plain list, no prices (those live on the booking page)
   -------------------------------------------------------------------------- */
.services { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.menu li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding: var(--s-4) 0; border-top: 1px solid var(--border);
}
.menu li:last-child { border-bottom: 1px solid var(--border); }
.menu b { font-weight: var(--w-semibold); color: var(--text-strong); text-transform: lowercase; font-size: var(--t-lg); }
.menu span { color: var(--text-muted); font-size: var(--t-sm); text-align: right; flex: none; text-transform: lowercase; }
.services .lede { margin-top: var(--s-3); }
.services .btn { margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   the short version — the rules that cost time or money
   -------------------------------------------------------------------------- */
.short {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--s-8); margin-top: var(--s-7);
}
.short li { display: flex; gap: var(--s-4); align-items: baseline; line-height: var(--lh-snug); }
.short b {
  flex: none; min-width: 5.6rem; text-align: right;
  font-weight: var(--w-semibold); font-size: var(--t-xl);
  letter-spacing: var(--track-display); font-variant-numeric: tabular-nums;
  text-transform: lowercase; color: var(--text-on-pink);
}
.short span { color: var(--text); }
.short__cta { margin-top: var(--s-7); }

/* --------------------------------------------------------------------------
   how it works — three steps, the bunny outline as the bullet
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); }
.step__mark {
  position: relative; width: 64px; height: 86px; margin-bottom: var(--s-4);
  background: url("marks/mark-outline.svg") center / contain no-repeat;
}
.step__mark i {
  position: absolute; left: 0; right: 0; top: 50%;
  font-style: normal; font-weight: var(--w-semibold); font-size: var(--t-lg);
  text-align: center; color: var(--text-strong);
}
.step h3 { margin-bottom: var(--s-2); }
.step p { max-width: 34ch; }

/* --------------------------------------------------------------------------
   book — the square flow, framed once with the keyline
   -------------------------------------------------------------------------- */
.embed {
  position: relative; margin-top: var(--s-7);
  background: var(--surface-raised);
  border: var(--stroke) solid var(--keyline); border-radius: var(--radius-lg);
  overflow: hidden; height: min(88vh, 900px); min-height: 560px;
}
.embed__wait {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: var(--s-4); text-align: center; padding: var(--s-6); color: var(--text-muted);
}
.embed__wait img { width: 56px; }
.embed__wait p { max-width: 30ch; }
.embed iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.book__alt { margin-top: var(--s-5); font-size: var(--t-sm); color: var(--text-muted); text-align: center; }

/* --------------------------------------------------------------------------
   policies page
   -------------------------------------------------------------------------- */
.pol { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-9); align-items: start; }
.toc { position: sticky; top: 88px; }
.toc li + li { margin-top: var(--s-2); }
.toc a { color: var(--text-muted); text-decoration: none; font-size: var(--t-sm); font-weight: var(--w-medium); text-transform: lowercase; }
.toc a:hover, .toc a[aria-current] { color: var(--text-strong); }
.toc .label { display: block; margin-bottom: var(--s-4); }

.sec { scroll-margin-top: 88px; }
.sec + .sec { margin-top: var(--s-8); }
.sec h2 { margin-bottom: var(--s-4); }
.sec ul { display: flex; flex-direction: column; gap: var(--s-3); }
.sec li { position: relative; padding-left: var(--s-5); max-width: var(--measure); }
.sec li::before {
  content: ''; position: absolute; left: 0; top: .55em; width: 11px; height: 11px;
  background: url("marks/mark-x.svg") no-repeat center / contain; opacity: .75;
}
.sec li strong { font-weight: var(--w-semibold); color: var(--text-strong); }

.sec--end .lede { font-size: var(--t-base); }
.sec--end p + p { margin-top: var(--s-5); }

/* the one keyline callout on the policy page */
.note {
  margin-top: var(--s-5); padding: var(--s-5);
  background: var(--surface-raised);
  border: var(--stroke) solid var(--keyline); border-radius: var(--radius);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   footer — ink, stacked white logo, no street address on purpose
   -------------------------------------------------------------------------- */
.foot { text-align: center; padding-block: var(--s-9); }
.foot__logo { width: 150px; margin: 0 auto var(--s-6); }
.foot__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-3); font-size: var(--t-sm); color: var(--ivory-300); text-transform: lowercase; }
.foot__meta li + li::before { content: '·'; margin-right: var(--s-4); color: var(--pink-300); }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); margin: var(--s-5) 0 var(--s-6); }
.foot__links a { color: var(--text-on-inverse); font-weight: var(--w-medium); text-transform: lowercase; text-underline-offset: 4px; }
.foot__links a:hover { color: var(--pink-300); }
.foot__thanks { display: block; color: var(--ivory-300); margin-bottom: var(--s-4); }
.foot small { display: block; font-size: var(--t-xs); color: var(--ink-400); }
.foot :focus-visible { outline-color: var(--ivory-0); }

/* --------------------------------------------------------------------------
   responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .services { grid-template-columns: 1fr; gap: var(--s-6); }
  .steps { grid-template-columns: 1fr; gap: var(--s-6); }
  .pol { grid-template-columns: 1fr; gap: var(--s-7); }
  .toc { position: static; }
  .toc ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
  .toc li + li { margin-top: 0; }
}
@media (max-width: 720px) {
  .band { padding-block: var(--s-8); }
  .wrap { padding-inline: var(--s-5); }
  .hero { padding-block: var(--s-8) var(--s-9); }
  .hero__logo { margin-bottom: var(--s-7); }
  .sec-head { flex-direction: column; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-6); }
  .work { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .work .ig { grid-column: 1 / -1; aspect-ratio: auto; padding: var(--s-6); }
  .work .ig img { width: 56px; }
  .short { grid-template-columns: 1fr; gap: var(--s-5); }
  .short b { min-width: 4.8rem; font-size: var(--t-lg); }
  .menu b { font-size: var(--t-base); }
  .embed { height: 82vh; border-radius: var(--radius); }
}
@media (max-width: 520px) {
  .top .wrap { gap: var(--s-4); }
  .top__mark img { width: 112px; }
  .top nav { gap: var(--s-4); }
  .top nav .hide-sm { display: none; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__meta, .foot__meta { flex-direction: column; align-items: center; }
  .hero__meta li + li::before, .foot__meta li + li::before { content: none; margin: 0; }
}