/* Hallmark · macrostructure: Marquee Hero (kicker variant) + full-bleed band · theme: custom "gold" · genre: editorial
 * nav: N6 newspaper masthead · footer: Ft5 statement (+ archive link groups)
 * type: Tenor Sans (display) + Jost (body) + IBM Plex Mono (label)
 *   Iskry and Futura Book were the salon's own faces; both are licensed and
 *   unavailable, so Tenor Sans and Jost stand in for them.
 * palette: archive-derived — paper #f6f6f6 (.container-wrap), gold gradient
 *   #eca223 -> #f1c828 (--grad1, on pill buttons), ink near-black
 * theme axes: light paper / contrast-sans display / warm accent (amber 74-92)
 * audience: local clients (new · returning · searching) · use: book via Square · tone: soft-luxury
 * source: site-archive for copy/prices/IA/palette · hours + address from Google Business Profile (2026-08-10)
 * IA: Home · About · Services · Gallery · Contact · Book An Appointment · Privacy policy
 * shape: hero (kicker + H1 + proof + CTA + facts + photo) -> creed -> full-bleed
 *   photograph -> reviews -> services -> CTA -> footer. The marquee band was
 *   removed when the tagline became the hero kicker; the full-bleed photograph
 *   is what breaks the page out of the generic template. Text-led, not
 *   Photographic: two images on home, one per inner page.
 * variety: deliberate sibling of site-v1-atelier — same macrostructure and IA by
 *   design, so the client can compare four dresses on one body. Not a rotation.
 * pre-emit critique: P5 H5 E5 S5 R5 V2
 *   Execution re-scored after the layout pass: the price table stacks below
 *   620px, the hero figure fills its column (UA figure margins were leaking),
 *   the sticky bar clears the safe-area inset, and section heads outrank their
 *   own rows. Rhythm derives from --section-y / --band-y, not accumulation.
 *   Variety stays 2 by design — see the variety note below.
 */

:root {
  /* paper + ink */
  --color-paper:        oklch(97%   0.004 85);
  --color-paper-2:      oklch(94.5% 0.006 85);
  --color-paper-3:      oklch(90%   0.008 85);
  --color-rule:         oklch(84%   0.008 85);
  --color-rule-2:       oklch(64%   0.012 85);
  --color-muted:        oklch(48%   0.012 85);
  --color-neutral:      oklch(34%   0.012 85);
  --color-ink-2:        oklch(22%   0.010 85);
  --color-ink:          oklch(15%   0.008 85);

  /* gold — every value the page uses, named */
  --color-accent:       oklch(76.3% 0.153 74);      /* #eca223 gradient start */
  --color-accent-2:     oklch(84.2% 0.164 92.4);    /* #f1c828 gradient end   */
  --color-accent-deep:  oklch(62%   0.130 70);      /* emphasis word, drop cap */
  --color-accent-star:  oklch(70%   0.140 78);      /* review stars           */
  --color-accent-ink:   oklch(15%   0.008 85);      /* text on gold           */
  --color-focus:        oklch(60%   0.140 74);
  --gradient-gold:      linear-gradient(180deg, var(--color-accent) 50%, var(--color-accent-2) 100%);
  --gradient-gold-flip: linear-gradient(180deg, var(--color-accent-2) 0%, var(--color-accent) 100%);

  --font-display: "Tenor Sans", ui-serif, Georgia, serif;
  --font-body:    "Jost", ui-sans-serif, system-ui, sans-serif;
  --font-label:   "IBM Plex Mono", ui-monospace, monospace;

  --space-hair: 2px;  /* optical only — underline offsets, caption lead. Not layout spacing. */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --space-16: 64px; --space-24: 96px;

  --gutter: clamp(16px, 4vw, 56px);
  --section-y: clamp(40px, 6.5vw, 80px);   /* every ordinary section */
  --band-y:    clamp(56px, 8vw, 112px);    /* the CTA band only — padding is what makes it a band */
}

*, *::before, *::after { box-sizing: border-box; }
figure { margin: 0; }
main > section > :first-child, main > figure > :first-child { margin-block-start: 0; }
main > section > :last-child,  main > figure > :last-child  { margin-block-end: 0; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

a { color: inherit; }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.wrap { max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter); }
.label {
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ── N6 · newspaper masthead ─────────────────────────────────── */
.masthead {
  text-align: center;
  padding-block: var(--space-6) var(--space-4);
  border-bottom: 3px double var(--color-rule-2);
}
.masthead__issue {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}
.masthead__mark {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 46px);
  text-decoration: none;
  display: block;
}
.masthead__links {
  margin-top: var(--space-4);
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}
.masthead__links a {
  font-size: 14px;
  text-decoration: none;
  color: var(--color-neutral);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding-bottom: var(--space-hair);
}
.masthead__links a:hover { border-bottom-color: var(--color-accent-ink); color: var(--color-ink); }
.masthead__links a[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-ink); }

/* ── page head (inner pages) ─────────────────────────────────── */
.pagehead { padding-block: var(--space-16) var(--space-8); border-bottom: 1px solid var(--color-rule); }
.pagehead h1 { font-size: clamp(34px, 6vw, 72px); }
.pagehead p { margin: var(--space-4) 0 0; max-width: 52ch; color: var(--color-ink-2); }


/* ── list rows (menu / tiers) ────────────────────────────────── */
.section { padding-block: var(--space-16); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
  gap: var(--space-4) var(--space-8);
  align-items: baseline;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-rule);
}
.row__name { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 27px); }
.row__desc { color: var(--color-muted); font-size: 15px; max-width: 48ch; }
.row__price {
  font-family: var(--font-label); font-size: 14px;
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
@media (max-width: 720px) {
  /* name and price share the first line; the note sits under both.
     Without explicit placement the spanning note pushes the price
     onto a third row. */
  .row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); }
  .row__name  { grid-column: 1; grid-row: 1; }
  .row__price { grid-column: 2; grid-row: 1; }
  .row__desc  { grid-column: 1 / -1; grid-row: 2; }
  .row__desc:empty { display: none; }
}

/* ── service tables (services page) ──────────────────────────── */
.cat { padding-block: var(--space-12) var(--space-4); }
.cat h2 { font-size: clamp(23px, 3.2vw, 34px); }
table { width: 100%; border-collapse: collapse; margin-top: var(--space-4); }
th, td {
  text-align: left;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--color-rule);
  font-size: 16px;
}
th {
  font-family: var(--font-label); font-weight: 400;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-muted);
}
td.num {
  font-family: var(--font-label); font-size: 14px;
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
td.dur { font-family: var(--font-label); font-size: 13px; color: var(--color-muted); text-align: right; white-space: nowrap; }

/* ── creed ───────────────────────────────────────────────────── */
.creed {
  padding-block: var(--space-16);
  display: grid; gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  border-top: 1px solid var(--color-rule);
}
.creed h3 { font-size: 21px; margin-bottom: var(--space-2); }
.creed p { margin: 0; color: var(--color-muted); font-size: 15px; }

/* ── prose ───────────────────────────────────────────────────── */
.words { padding-block: var(--space-12) var(--space-16); max-width: 58ch; }
.words p { font-size: 18px; color: var(--color-ink-2); margin: 0 0 var(--space-4); }
.words__sign { font-family: var(--font-display); font-size: 24px; margin-top: var(--space-8); }

/* ── gallery plates (no archive imagery survives) ────────────── */
.plates {
  padding-block: var(--space-12) var(--space-16);
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.plate { display: grid; gap: var(--space-2); }
.plate__slot {
  aspect-ratio: 4 / 3;
  background: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  display: grid; place-content: center;
  min-width: 0;
}
.plate__slot span { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.plate p { margin: 0; font-size: 14px; color: var(--color-muted); }

/* ── booking ─────────────────────────────────────────────────── */
.book { border-top: 3px solid var(--color-ink); padding-block: var(--space-24); }
.book h2 { font-size: clamp(30px, 6vw, 72px); max-width: 22ch; text-wrap: balance; }
.book__row { margin-top: var(--space-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.btn {
  display: inline-block;
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  text-decoration: none;
  font-size: 16px;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.book__alt { font-size: 15px; color: var(--color-muted); }
.book__alt a { white-space: nowrap; border-bottom: 1px solid var(--color-rule-2); text-decoration: none; }

/* ── contact details ─────────────────────────────────────────── */
.details {
  padding-block: var(--space-12) var(--space-16);
  display: grid; gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.details dl { margin: 0; }
.details dt { margin-bottom: var(--space-2); }
.details dd { margin: 0 0 var(--space-1); font-size: 16px; font-variant-numeric: tabular-nums; }
.details dd span { color: var(--color-muted); }
.details a { text-decoration: none; border-bottom: 1px solid var(--color-rule); }

/* ── Ft5 · statement footer + archive link groups ────────────── */
.statement { border-top: 1px solid var(--color-rule); padding-block: var(--space-16) var(--space-12); }
.statement > p:first-child {
  font-family: var(--font-display);
  font-size: clamp(23px, 3.6vw, 38px);
  line-height: 1.15;
  max-width: 38ch;
  margin: 0;
}
.statement__groups {
  margin-top: var(--space-16);
  display: grid; gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.statement__groups ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.statement__groups li { margin-bottom: var(--space-1); font-size: 15px; }
.statement__groups a { text-decoration: none; border-bottom: 1px solid var(--color-rule); white-space: nowrap; }
.statement__meta {
  margin-top: var(--space-12);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
  font-size: 13.5px;
  color: var(--color-muted);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── added after UI/UX + SEO audit ───────────────────────────── */

.skip {
  position: absolute; left: -9999px;
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-3) var(--space-4); z-index: 100;
}
.skip:focus { left: var(--space-4); top: var(--space-4); }

.masthead__mark { display: inline-flex; align-items: center; gap: var(--space-3); }
.masthead__lotus { width: auto; height: 26px; }

/* proof + hero action row */
.proof {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3);
  font-size: 15px; color: var(--color-neutral);
}
.proof__stars { color: var(--color-accent-ink); letter-spacing: 0.06em; }
.proof a { text-decoration: none; border-bottom: 1px solid var(--color-rule-2); white-space: nowrap; }

.hero { padding-block: var(--space-12) var(--space-8); }
.hero h1 { font-size: clamp(30px, 5.4vw, 58px); max-width: 16ch; }
.hero__sub { margin: var(--space-4) 0 0; max-width: 46ch; color: var(--color-ink-2); font-size: 18px; }
.hero__actions { margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-4); }
.btn--solid { background: var(--color-ink); color: var(--color-paper); }
.btn--solid:hover { background: var(--color-accent); color: var(--color-paper); }
.hero__facts {
  margin-top: var(--space-8); padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6);
  font-size: 15px; color: var(--color-neutral);
}
.hero__facts a { text-decoration: none; border-bottom: 1px solid var(--color-rule-2); }
.hero__shot { margin-top: var(--space-12); }
.hero__shot img { width: 100%; height: clamp(220px, 42vh, 420px); object-fit: cover; }

/* reviews */
.reviews { padding-block: var(--space-16); border-top: 1px solid var(--color-rule); }
.reviews__grid {
  margin-top: var(--space-8); display: grid; gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.reviews blockquote { margin: 0; }
.reviews blockquote p {
  font-family: var(--font-display); font-size: 21px; line-height: 1.3; margin: 0 0 var(--space-3);
}
.reviews cite { font-style: normal; font-size: 14px; color: var(--color-muted); }

/* gallery photos */
.plate__slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plate__slot--photo { padding: 0; border: 0; background: none; }

/* about portrait */
.portrait { margin-block: var(--space-8); max-width: 300px; }
.portrait img { width: 100%; height: auto; }

/* sticky mobile action bar */
.actionbar { display: none; }
@media (max-width: 760px) {
  .actionbar {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; inset: auto 0 0 0; z-index: 50;
    border-top: 1px solid var(--color-rule);
    background: color-mix(in oklab, var(--color-paper) 94%, transparent);
    backdrop-filter: blur(8px);
  }
  .actionbar a {
    padding: var(--space-4); text-align: center; text-decoration: none;
    font-size: 16px; white-space: nowrap;
  }
  .actionbar a + a { border-left: 1px solid var(--color-rule); }
  .actionbar a.is-primary { background: var(--color-ink); color: var(--color-paper); }
  body { padding-bottom: 64px; }
}


/* ── gold treatment ──────────────────────────────────────────────
 * The salon's own button: gold gradient, pill, uppercase (--grad1 on
 * the archived site). Accent is deliberately confined to the primary
 * CTA and the hairlines; the sticky bar uses a flat tint so the gold
 * footprint on a 375px viewport stays inside the accent budget.
 * -------------------------------------------------------------- */

h1, h2, h3 { font-weight: 400; letter-spacing: 0.005em; line-height: 1.12; }
.masthead__mark {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(20px, 3.8vw, 34px);
}

/* Short section heads take caps too — they echo the logo lockup and stay on
   one line. Page H1/H2 stay sentence case: at display size caps cost a whole
   extra line on mobile and push the booking CTA below the fold. */
.creed h3 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 17px;
}

/* masthead rule — ::after, not border-image (radius-safe, engine-safe) */
.masthead { position: relative; border-bottom: 1px solid var(--color-rule); }
.masthead::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
}

.proof__stars { color: var(--color-accent-star); }
.prose p.first::first-letter { color: var(--color-accent-deep); }
.book { border-top-color: var(--color-accent); }
.masthead__links a[aria-current="page"],
.masthead__links a:hover { border-bottom-color: var(--color-accent); }

/* buttons — 8 states */
.btn {
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  font-weight: 600;
  border-color: var(--color-ink);
}
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn[aria-disabled="true"], .btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.btn--solid {
  background: var(--gradient-gold);
  color: var(--color-accent-ink);
  border-color: transparent;
}
.btn--solid:hover { background: var(--gradient-gold-flip); color: var(--color-accent-ink); }
.btn--solid:active { transform: translateY(1px); }

/* sticky bar — flat tint, not the full gradient (accent budget) */
.actionbar a.is-primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.actionbar a:active { transform: translateY(1px); }
.actionbar a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn--solid:active, .actionbar a:active { transform: none; }
}

/* the salon's own tagline, promoted to a hero kicker */
.hero__kicker {
  margin: 0 0 var(--space-3);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}

/* full-bleed photograph — the page's one structural interruption */
.bleed {
  margin: var(--space-16) 0;
  padding: 0;
}
.bleed img {
  width: 100%;
  height: clamp(240px, 46vh, 460px);
  object-fit: cover;
  display: block;
}
.bleed figcaption {
  max-width: 76rem;
  margin: var(--space-3) auto 0;
  padding-inline: var(--gutter);
  font-size: 14px;
  color: var(--color-muted);
}

/* package table — tier name with its description beneath */
th[scope="row"] { font-family: var(--font-display); font-size: 17px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-ink); padding-right: var(--space-6); }
th[scope="row"] .tier__note { display: block; font-family: var(--font-body); font-size: 14px; color: var(--color-muted); margin-top: var(--space-hair); max-width: 52ch; }

/* ── vertical rhythm ─────────────────────────────────────────────
 * One value for ordinary sections, one for the CTA band. Ruled
 * sections pull their top in so the border reads as a section rule
 * rather than floating mid-void. The bleed photograph sits hard
 * against its neighbours on purpose — their padding is its air.
 * -------------------------------------------------------------- */
.section, .creed, .reviews, .words, .plates, .details, .cat { padding-block: var(--section-y); }
.creed, .reviews { padding-top: calc(var(--section-y) * 0.75); }
.book { padding-block: var(--band-y); }
.pagehead { padding-block: clamp(24px, 5vw, 56px) calc(var(--section-y) * 0.5); }
.hero { padding-block: clamp(20px, 4vw, 40px) calc(var(--section-y) * 0.5); }
.bleed { margin-block: 0; }
.statement { padding-block: var(--section-y) var(--space-12); }

/* ── 2. services price table — stack below 620px ─────────────── */
@media (max-width: 620px) {
  .cat table, .cat thead, .cat tbody, .cat tr, .cat th, .cat td { display: block; width: 100%; }
  .cat thead { position: absolute; left: -9999px; }
  .cat tr { border-bottom: 1px solid var(--color-rule); padding-block: var(--space-4); }
  .cat tr:last-child { border-bottom: 0; }
  .cat th[scope="row"] { padding: 0 0 var(--space-2); border: 0; }
  .cat th[scope="row"] .tier__note { max-width: none; }
  .cat td { border: 0; padding: var(--space-1) 0; text-align: left; }
  .cat td::before {
    content: attr(data-label) " ";
    font-family: var(--font-label);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-right: var(--space-2);
  }
}

/* ── 3. sticky bar clears the iPhone home indicator ──────────── */
@media (max-width: 760px) {
  .actionbar a { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ── 4. section heads outrank their own rows ─────────────────── */
.cat-head {
  font-family: var(--font-display);
  font-size: clamp(21px, 3vw, 28px);
  font-weight: 400;
  margin: 0 0 var(--space-4);
}

/* ── 6. masthead gives the phone its first screen back ───────── */
@media (max-width: 600px) {
  .masthead__issue { display: none; }
  .masthead { padding-block: var(--space-4) var(--space-3); }
  .masthead__links { margin-top: var(--space-3); }
}

/* ── 7. sticky bar appears once the hero CTA has scrolled away ─ */
@media (max-width: 760px) {
  .actionbar { transition: transform 180ms ease, opacity 180ms ease; }
  .actionbar[data-hidden="true"] { transform: translateY(100%); opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .actionbar { transition: none; }
}

/* price columns: headers share their cells' alignment, and all three
   numeric columns take the same width so the figures form one grid */
.cat thead th + th { text-align: right; }
.cat thead th + th,
.cat td.num { width: 7rem; }