/* Grace, direction 2: Lift.
   The page lifts like hair does: deepest brunette at the top, cool platinum where you book.
   Mobile first. Tokens only, plus color-mix() tints of them. */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face {
  font-family: "Piazzolla";
  src: url("../fonts/piazzolla-latin-wght-opsz.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src: url("../fonts/commissioner-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Piazzolla's own proportional oldstyle digits, for numbers in running text.
   Commissioner has no oldstyle figures in any release. */
@font-face {
  font-family: "Grace Figures";
  src: url("../fonts/grace-figures-piazzolla-osf.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0030-0039;
}
/* Metric-matched fallbacks, measured in Chromium against the real faces. */
@font-face {
  font-family: "Piazzolla fallback";
  src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("Times New Roman"), local("Liberation Serif");
  font-weight: 100 900;
  size-adjust: 98.04%;
  ascent-override: 113.22%;
  descent-override: 31.62%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Commissioner fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  font-weight: 100 900;
  size-adjust: 99.87%;
  ascent-override: 101.83%;
  descent-override: 20.63%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  /* Six role colours */
  --ink: #1A1210;        /* level 2: band 1 ground, text on light bands */
  --pale-gold: #EEE2C6;  /* text on dark bands, band 6 ground */
  --caramel: #B07F50;    /* band 4. Tuned from #A9825E, which read as cardboard. */
  --honey: #C99E62;      /* band 4 end. Tuned from #C9A46E. */
  --golden: #E0C795;     /* band 5 start */
  --platinum: #E7E6EE;   /* band 7: cool, toned, never cream. Tuned from #E8E7EB, a touch more violet. */

  /* Hair ramp sampled from Grace's photo: structure, never accent */
  --hair-1: #130D0C;
  --hair-2: #281D1A;
  --hair-3: #3A2C28;
  --hair-4: #52392D;     /* chestnut: tuned warmer from sampled #4D3B36, which read mauve-grey as a field */
  --hair-5: #6B4A38;     /* milk chocolate: tuned from sampled #654E45 */
  --hair-6: color-mix(in srgb, var(--hair-5) 50%, var(--caramel)); /* rail chip only: neither text colour passes on it */

  --font-display: "Piazzolla", "Piazzolla fallback", Georgia, serif;
  --font-text: "Grace Figures", "Commissioner", "Commissioner fallback", Arial, sans-serif;
  --font-lining: "Commissioner", "Commissioner fallback", Arial, sans-serif;

  --fs-hero: clamp(2.875rem, 1.75rem + 5.2vw, 6.75rem);
  --fs-h2: clamp(2.125rem, 1.5rem + 2.9vw, 4.25rem);
  --fs-shade: clamp(2.5rem, 1.6rem + 3.6vw, 5.25rem); /* gallery title and empty-band shade names */
  --fs-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --fs-small: 0.9375rem;
  --fs-rail: 0.8125rem;

  --gutter: clamp(1rem, 0.4rem + 2.6vw, 4rem);
  --gutter-end: var(--gutter);
  --band-pad: clamp(4rem, 2.6rem + 5.6vw, 8.5rem);
  --measure: 33rem;
  --radius: 3px;
  --bar-h: 3.75rem;

  /* Fixed chrome follows the band at the middle of the screen (set by site.js). */
  --here-ground: var(--ink);
  --here-fg: var(--pale-gold);
}
@media (min-width: 900px) {
  :root {
    --gutter-end: calc(var(--gutter) + 6.75rem);
    --header-h: 4.5rem;
    --photo-h: min(100svh, 62rem);
    --photo-w: calc(var(--photo-h) * 1240 / 1850);
    --hero-gap: clamp(3rem, 1rem + 4vw, 6rem);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  font-kerning: normal;
  font-variant-numeric: proportional-nums;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 580; text-wrap: balance; }
p, ul, ol, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
p, li { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--fg, var(--pale-gold)); color: var(--ground, var(--ink)); }

/* Display headings (below) use Piazzolla at its largest optical size. Its word space is
   narrow at display sizes, so tracking stays light (-0.012em) and words get +0.07em. */

/* Designed focus: a ring in the band's text colour, held off the element. */
:focus-visible {
  outline: 2px solid var(--fg, var(--pale-gold));
  outline-offset: 4px;
  border-radius: var(--radius);
}
a:not(.book):focus-visible { text-decoration-thickness: 2px; }

.skip {
  position: absolute; left: var(--gutter); top: 0.75rem; z-index: 20;
  padding: 0.75rem 1rem; min-height: 44px;
  background: var(--pale-gold); color: var(--ink); font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- The lift ----------
   Each band has a start and end colour; text colour is fixed per band and passes on both.
   One registered colour, --ground. Without scroll-driven animation, or with reduced motion,
   each band is a hard-edged solid at its start colour. */
@property --ground {
  syntax: "<color>";
  inherits: true;
  initial-value: #1A1210;
}
.band {
  --ground: var(--from);
  background-color: var(--ground);
  color: var(--fg);
  padding: var(--band-pad) var(--gutter-end) var(--band-pad) var(--gutter);
}
.band--1 { --from: var(--ink);    --to: color-mix(in oklab, var(--ink) 55%, var(--hair-3)); --fg: var(--pale-gold); }
.band--2 { --from: var(--hair-3); --to: color-mix(in oklab, var(--hair-3) 50%, var(--hair-4)); --fg: var(--pale-gold); }
.band--3 { --from: var(--hair-4); --to: var(--hair-5); --fg: var(--pale-gold); }
/* the flip: chocolate to caramel, past the dead zone (#897061) in one step */
.band--4 { --from: var(--caramel); --to: var(--honey); --fg: var(--ink); }
/* blondes and ash: golden, toned towards platinum */
.band--5 { --from: var(--golden); --to: color-mix(in oklab, var(--golden) 40%, var(--platinum)); --fg: var(--ink); }
.band--6 { --from: var(--pale-gold); --to: color-mix(in oklab, var(--pale-gold) 70%, var(--platinum)); --fg: var(--ink); }
/* the toner step: warm pale gold to cool platinum */
.band--7 { --from: var(--platinum); --to: var(--platinum); --fg: var(--ink); }

@keyframes lift {
  from { --ground: var(--from); }
  to   { --ground: var(--to); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band {
      view-timeline: --band block;
      animation: lift linear both;
      animation-timeline: --band;
      /* from "band top at the middle of the screen" to "band bottom at the middle" */
      animation-range: cover 50vh cover calc(100% - 50vh);
    }
    /* Band 1 starts lifting as soon as the header leaves, so it never parts from the header. */
    .band--1 { animation-range: contain 0% cover calc(100% - 50vh); }
  }
}

/* ---------- Book controls: always the strongest contrast on their band ---------- */
.book {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.7rem 1.35rem;
  background: var(--fg); color: var(--ground);
  font-family: var(--font-lining); font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; border-radius: var(--radius);
}
.book:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.book--small { min-height: 44px; padding: 0.55rem 1.1rem; }
.hero__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Second choice beside the main Book: same shape, outlined in the band's text colour */
.book--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
@media (max-width: 599px) { .hero__actions { flex-direction: column; } .hero__actions .book { text-align: center; } } /* phones: both full width */
.book--big {
  width: 100%; min-height: 4.5rem; margin-top: 2rem;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3125rem, 1.1rem + 0.9vw, 1.875rem);
  letter-spacing: -0.005em; word-spacing: 0.05em;
}

/* ---------- Header ---------- */
.site-header {
  --fg: var(--pale-gold); --ground: var(--ink);
  container: header / inline-size;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem var(--gutter-end) 0 var(--gutter);
  background: var(--ink); color: var(--pale-gold);
}
.site-header__brand { display: grid; gap: 0.1rem; }
.wordmark {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.375rem, 0.9rem + 2.2vw, 2.5rem);
  line-height: 1; letter-spacing: -0.02em; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
/* The name is written "Hair&nbsp;by Grace&nbsp;G.O", so when space is tight it breaks only after "by". */
@media (min-width: 900px) { .site-header .wordmark { font-size: clamp(1.75rem, 0.5rem + 1.6vw, 2.5rem); } }
.site-header__tag { font-size: var(--fs-small); line-height: 1.3; }
/* "The work" (the gallery page) shows at every width; the in-page links join it from 1200 px. */
.site-nav { display: flex; align-items: center; margin-left: auto; }
.site-nav ul { display: flex; gap: 1.75rem; margin: 0; }
.site-nav li:not(.site-nav__work) { display: none; }
.site-nav ul a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.2rem; white-space: nowrap;
  font-family: var(--font-lining); font-size: var(--fs-small); font-weight: 500; text-decoration: none;
}
.site-nav ul a:hover, .site-nav ul a[aria-current="page"] { text-decoration: underline; }
.site-nav ul a[aria-current="page"] { text-decoration-thickness: 2px; }
@media (min-width: 900px) {
  .site-header {
    height: var(--header-h); padding-top: 0.5rem;
    padding-left: calc(var(--photo-w) + var(--hero-gap));
  }
  .site-header__tag { display: none; }
  .site-nav { margin-right: 1rem; }
}
/* ...and only when the header has room for them beside the full name. */
@container header (max-width: 12rem) { .site-nav { margin-right: 0; } } /* tall, narrow windows */
@media (min-width: 1200px) {
  @container header (min-width: 30rem) { .site-nav li:not(.site-nav__work) { display: block; } }
}

/* ---------- Band 1: hero ---------- */
.hero { display: flex; flex-direction: column; padding-top: 1.75rem; padding-bottom: clamp(3.5rem, 2rem + 6vw, 7rem); }
.hero__copy { display: contents; }
.hero__title { order: 1; font-size: var(--fs-hero); line-height: 0.98; max-width: 11ch; }
.hero__title { font-family: var(--font-display); font-weight: 580; letter-spacing: -0.012em; word-spacing: 0.07em; }
.hero__photo { order: 2; margin: 1.25rem calc(-1 * var(--gutter-end)) 0 calc(-1 * var(--gutter)); background: color-mix(in srgb, var(--hair-3) 40%, var(--platinum)); }
.hero__text { order: 3; margin-top: 2rem; }
.hero__intro { font-size: var(--fs-lead); line-height: 1.45; max-width: 30rem; }

@media (min-width: 900px) {
  /* The photo bleeds to the top and left edges, full height; the type column holds the rest. */
  .hero {
    display: grid;
    grid-template-columns: var(--photo-w) minmax(0, 1fr);
    column-gap: var(--hero-gap);
    padding: 0 var(--gutter-end) 0 0;
    min-height: calc(var(--photo-h) - var(--header-h));
  }
  .hero__photo {
    grid-column: 1; grid-row: 1; order: 0;
    margin: calc(-1 * var(--header-h)) 0 0 0;
    position: relative; z-index: 1;
  }
  .hero__photo img { height: var(--photo-h); width: var(--photo-w); max-width: none; }
  .hero__copy {
    display: block; grid-column: 2; grid-row: 1; align-self: center;
    container-type: inline-size;
    padding-bottom: 2rem;
  }
  .hero__title { font-size: clamp(2.75rem, 17cqi, 7rem); max-width: none; }
  .hero__text { margin-top: 2.25rem; }
}

/* ---------- Band 2: the work, every shade I colour ----------
   The four shade families set large, each on its own shade, leading into gallery.html.
   It never repeats the hero photo: with no other photos it is typographic. */
.the-work__title { font-size: var(--fs-h2); line-height: 1.02; max-width: 13ch; }
.the-work__title { font-family: var(--font-display); font-weight: 580; letter-spacing: -0.012em; word-spacing: 0.07em; }
.the-work__line { margin-top: 0.9rem; font-size: var(--fs-lead); line-height: 1.45; max-width: var(--measure); }
.the-work .scale { margin-top: 2.25rem; }
.the-work__foot { margin-top: 1.75rem; display: grid; gap: 0.5rem; justify-items: start; }
.the-work__all {
  display: inline-flex; align-items: center; min-height: 48px;
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 580; line-height: 1.15; word-spacing: 0.04em;
  text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.the-work__all:hover { text-decoration-thickness: 2px; }
.the-work__more { font-size: var(--fs-small); }
@media (min-width: 900px) {
  .the-work {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: end;
    padding-top: clamp(4rem, 2rem + 4vw, 6.5rem); padding-bottom: clamp(4rem, 2rem + 4vw, 6.5rem);
  }
  .the-work__title { grid-column: 1 / span 7; max-width: none; }
  .the-work__line { grid-column: 8 / -1; margin: 0; }
  .the-work .scale { grid-column: 1 / -1; margin-top: 3rem; }
  .the-work__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 2.5rem; margin-top: 2rem; }
}

/* ---------- What I do: one plain section, a grid of services (Brett, 2026-11-11) ---------- */
.band--plain { --from: var(--platinum); --to: var(--platinum); --fg: var(--ink); animation: none; }
.services-sec { padding-top: clamp(3.5rem, 2rem + 4.5vw, 6.5rem); padding-bottom: clamp(3.5rem, 2rem + 4.5vw, 6.5rem); }
.services-sec__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 580; line-height: 1; letter-spacing: -0.012em; word-spacing: 0.07em; }
.services {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem;
}
.service {
  display: flex; flex-direction: column;
  padding: 1.25rem 1.25rem 1.35rem;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent); border-radius: var(--radius);
}
.service__name { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 580; line-height: 1.15; word-spacing: 0.04em; }
.service__line { margin-top: 0.4rem; max-width: 26rem; }
.service__price { margin-top: auto; padding-top: 0.9rem; font-family: var(--font-lining); font-size: var(--fs-small); font-weight: 400; }

/* ---------- First visit: one centred call to action (Brett, 2026-11-11) ---------- */
.visit {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: clamp(4rem, 2.5rem + 5vw, 7.5rem); padding-bottom: clamp(4rem, 2.5rem + 5vw, 7.5rem);
}
@media (min-width: 900px) { .visit { padding-left: var(--gutter-end); } } /* even sides, so the block sits centred */
.visit__title { font-size: var(--fs-h2); line-height: 1; text-wrap: balance; }
.visit__title { font-family: var(--font-display); font-weight: 580; letter-spacing: -0.012em; word-spacing: 0.07em; }
.visit__line { margin-top: 1rem; font-size: var(--fs-lead); line-height: 1.45; max-width: 34rem; }
.visit__hours { margin-top: 1rem; font-size: var(--fs-small); }

/* ---------- Band 7: about and book, on platinum ---------- */
.arrive { padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem); }
.arrive__about, .arrive__where { max-width: var(--measure); }
.arrive__where { margin-top: 3rem; }
.arrive__about p + p, .arrive__where p + p { margin-top: 0.6rem; }
.arrive__label {
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 580; line-height: 1.2; word-spacing: 0.04em;
  margin-bottom: 0.75rem;
}
.arrive__town { font-weight: 560; }
.arrive__map { display: inline-flex; align-items: center; min-height: 44px; }
.contact { margin-top: 0.6rem; }
.contact a { display: inline-flex; min-height: 44px; align-items: center; }
@media (min-width: 900px) {
  .arrive { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
  .book--big { width: auto; padding-inline: 2.25rem; }
  .arrive__about { grid-column: 1 / span 5; }
  .arrive__where { grid-column: 7 / span 5; margin-top: 0; }
}

/* ---------- Footer ---------- */
.site-footer {
  --fg: var(--ink); --ground: var(--platinum);
  background: var(--platinum); color: var(--ink);
  padding: 2rem var(--gutter-end) calc(var(--bar-h) + 2.5rem + env(safe-area-inset-bottom)) var(--gutter);
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  display: grid; gap: 0.35rem; font-size: var(--fs-small);
}
.wordmark--small { font-size: 1.5rem; min-height: 0; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
/* Deposit and cancellation, on every page (Brett, 2026-11-11): Grace's own words, under the links */
.site-footer__policy {
  grid-column: 1 / -1; margin-top: 1rem; padding-top: 1.25rem; max-width: 46rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  display: grid; gap: 0.5rem; line-height: 1.5;
}
.site-footer__policy-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 580; line-height: 1.2; }
.site-footer__thanks { margin-top: 0.25rem; }
.site-footer__sign { font-family: var(--font-display); font-weight: 580; white-space: nowrap; }
.site-footer__sign::before { content: "\2014\00a0"; }
@media (min-width: 900px) {
  .site-footer { grid-template-columns: auto 1fr repeat(3, auto); align-items: baseline; column-gap: 2rem; padding-bottom: 2.5rem; padding-left: var(--gutter); }
}

/* ---------- Level rail: small and quiet ----------
   Phone: one solid bar in the colour of the band you're on. Its top edge is the ten shades;
   inside, the level on the left and Book on the right.
   Desktop: a slim column of the ten shades on the right edge. */
.rail {
  position: fixed; z-index: 10; left: 0; right: 0; bottom: 0;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom));
  background: var(--here-ground); color: var(--here-fg);
  font-family: var(--font-lining); font-variant-numeric: lining-nums;
}
.rail__chips {
  position: absolute; left: 0; right: 0; top: 0;
  display: grid; grid-template-columns: repeat(10, 1fr); align-items: start;
  height: 4px; margin: 0;
}
.rail__chips li { height: 4px; background: var(--chip); }
.rail__chips li[data-current] { height: 4px; transform: scaleY(2); transform-origin: top; box-shadow: 0 0 0 1px var(--here-fg); position: relative; z-index: 1; }
.rail__label {
  display: none;
  position: absolute; left: var(--gutter); top: calc(4px + (var(--bar-h) - 4px) / 2); transform: translateY(-50%);
  max-width: calc(100vw - 9rem);
  font-size: var(--fs-rail); font-weight: 500; line-height: 1.25;
}
.js .rail__label { display: block; }
.book--fixed {
  position: fixed; z-index: 11; right: var(--gutter-end);
  bottom: calc((var(--bar-h) - 4px - 44px) / 2 + env(safe-area-inset-bottom));
  min-height: 44px; min-width: 5.5rem;
  background: var(--pale-gold); color: var(--ink);
}
.js .book--fixed { background: var(--here-fg); color: var(--here-ground); }
.book--fixed:focus-visible { outline-color: var(--here-fg); }

@media (min-width: 900px) {
  .rail {
    left: auto; right: 1.25rem; bottom: auto; top: 50%; transform: translateY(-50%);
    width: 6.5rem; height: auto; background: none; color: inherit;
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.9rem;
    pointer-events: none;
  }
  .rail__chips {
    position: static;
    grid-template-columns: none; grid-template-rows: repeat(10, 1.6rem);
    align-items: stretch; justify-items: end;
    width: auto; height: auto;
  }
  .rail__chips li { width: 6px; height: auto; }
  .rail__chips li[data-current] { width: 16px; transform: none; }
  .rail__label {
    position: static; transform: none; max-width: 6.5rem; text-align: right;
    padding: 0.35rem 0.55rem; border-radius: var(--radius);
    background: var(--here-ground); color: var(--here-fg);
  }
  .book--fixed { right: 1.25rem; bottom: 1.25rem; }
}

/* Fixed chrome waits until the header (which has its own Book) has scrolled away,
   so nothing ever sits on the photo on the first screen. Without JS it is always shown. */
.js .book--fixed { opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 180ms; }
.js.chrome-on .book--fixed { opacity: 1; visibility: visible; }
@media (max-width: 899.98px) {
  .js .rail { opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 180ms; }
  .js.chrome-on .rail { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .js .book--fixed, .js .rail { transition: none; }
}

/* ---------- Policies page: a short lift, pale gold to platinum ---------- */
.page-policies { --gutter-end: var(--gutter); } /* no rail on this page, so no rail gutter */
html:has(body.page-policies) { background: var(--platinum); } /* short page: no dark strip under the footer */
.page-policies .site-header { padding-bottom: 1.25rem; }
@media (min-width: 900px) {
  .page-policies .site-header { padding-left: var(--gutter); padding-bottom: 0; }
}
.policies-head { padding-top: clamp(3rem, 2rem + 4vw, 6rem); padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.policies__title { font-size: var(--fs-h2); line-height: 1; }
.policies__title { font-family: var(--font-display); font-weight: 580; letter-spacing: -0.012em; word-spacing: 0.07em; }
.policies__line { margin-top: 1rem; font-size: var(--fs-lead); max-width: var(--measure); }
.policies__draft {
  margin-top: 1.5rem; padding: 0.15rem 0 0.2rem 1rem; max-width: var(--measure);
  border-left: 2px solid color-mix(in srgb, currentColor 55%, transparent); font-size: var(--fs-small);
}
.policies__draft strong { font-family: var(--font-lining); font-weight: 600; display: block; }
.policies-list { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.policies__list { display: grid; gap: 0; }
.policy { padding: 1.4rem 0 1.6rem; border-top: 1px solid color-mix(in srgb, currentColor 32%, transparent); }
.policy p { margin-top: 0.5rem; max-width: 30rem; }
.policy__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 580; line-height: 1.15; word-spacing: 0.04em; }
.policy p + p { margin-top: 0.6rem; }
.policies__back { margin-top: 1.5rem; }
.policies__back a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer--short { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .policies-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: end; }
  .policies-head > div:first-child { grid-column: 1 / span 6; }
  .policies__draft { grid-column: 8 / -1; margin: 0; }
  .policies__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; max-width: 52rem; }
}

/* ---------- The scale: every shade family set large, on its own shade ----------
   Homepage band 2. Four full-width rows, darkest first, like a type specimen of the ramp.
   Each row is one link to its band on gallery.html. */
.scale { display: grid; margin: 0; }
.scale__shade {
  position: relative; display: flex; flex-direction: column;
  background: var(--sw); color: var(--fg);
  padding: 1.15rem 1.25rem 1.1rem;
}
.scale__name {
  font-family: var(--font-display); font-weight: 580; letter-spacing: -0.012em; word-spacing: 0.07em;
  font-size: clamp(2.125rem, 1.2rem + 3.6vw, 5rem); line-height: 1.02; text-wrap: balance;
  text-decoration: none;
}
.scale__name::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* the whole row is the link */
.scale__shade:hover .scale__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.scale__name:focus-visible { outline: none; }
/* Focus ring drawn inside the row, in the row's own text colour, so it holds on every shade */
.scale__shade:has(.scale__name:focus-visible) { outline: 2px solid var(--fg); outline-offset: -8px; }
.scale__meta {
  display: flex; flex-wrap: wrap; gap: 0.15rem 1.25rem; margin-top: 0.5rem;
  font-family: var(--font-lining); font-variant-numeric: lining-nums;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem); font-weight: 500; line-height: 1.35;
}
.scale__status { font-weight: 400; }
.scale__photo { margin: 1.5rem 0 0; width: 64%; }
.scale__shade--photo-end .scale__photo { align-self: flex-end; }
.scale__photo--landscape, .scale__photo--pair { width: 100%; }
.scale__photo img { width: 100%; background-color: var(--ph); }
@media (min-width: 900px) {
  .scale__shade {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 2rem;
    padding: 1.6rem 2rem 1.5rem;
  }
  .scale__meta { flex-direction: column; align-items: flex-end; text-align: right; margin: 0; }
  /* A row with a photo: name and levels on one side, the photo on the other, sides alternating */
  .scale__shade--photo { grid-template-rows: auto 1fr; align-items: start; }
  .scale__shade--photo .scale__name { grid-column: 1; grid-row: 1; }
  .scale__shade--photo .scale__meta { grid-column: 1; grid-row: 2; align-self: end; align-items: flex-start; text-align: left; flex-direction: row; }
  .scale__photo { grid-column: 2; grid-row: 1 / span 2; margin: 0; width: 13rem; }
  .scale__photo--landscape { width: 21rem; }
  .scale__photo--pair { width: 22rem; }
  .scale__shade--photo-start { grid-template-columns: auto minmax(0, 1fr); }
  .scale__shade--photo-start .scale__name, .scale__shade--photo-start .scale__meta { grid-column: 2; }
  .scale__shade--photo-start .scale__photo { grid-column: 1; }
}

/* Homepage gallery strip (2026-11-08): each shade row carries up to three of her photos, darkest to
   lightest, large enough that the hair leads. Phone: two across (the third waits for the gallery). */
.scale__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1.1rem; }
.scale__photos--n1 { grid-template-columns: minmax(0, 1fr); width: 64%; }
.scale__photos .scale__photo { margin: 0; width: auto; }
.scale__photos .scale__photo:nth-child(3) { display: none; }
.scale__photos img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 40%; background-color: var(--ph); }
.scale__cap { margin-top: 0.4rem; font-size: var(--fs-small); line-height: 1.3; }
@media (min-width: 900px) {
  .scale__shade--photos { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; align-items: start; column-gap: 2rem; padding-block: 1.75rem; }
  .scale__shade--photos .scale__name { grid-column: 1; grid-row: 1; }
  .scale__shade--photos .scale__meta { grid-column: 1; grid-row: 2; align-self: end; align-items: flex-start; text-align: left; flex-direction: row; }
  .scale__photos { grid-column: 2; grid-row: 1 / span 2; margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
  .scale__photos--n1 { width: 33.333%; justify-self: end; grid-template-columns: minmax(0, 1fr); }
  .scale__photos--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 66.667%; justify-self: end; }
  .scale__photos .scale__photo { grid-column: auto; grid-row: auto; width: auto; }
  .scale__photos .scale__photo:nth-child(3) { display: block; }
  /* No family names on the homepage (Brett, 2026-11-11): the photos take the whole row. */
  .scale__shade--photos { grid-template-columns: minmax(0, 1fr); }
  .scale__photos { grid-column: 1 / -1; grid-row: auto; }
  .scale__photos--n1, .scale__photos--n2 { justify-self: start; }
}

/* ---------- Shade families: one tone per family, by its levels ----------
   Bands use --from/--to/--fg (the lift); swatches and chips use --sw. Text passes on both ends. */
.tone--brunette { --from: var(--hair-3); --to: var(--hair-5); --fg: var(--pale-gold); --sw: var(--hair-5); }
.tone--caramel  { --from: var(--caramel); --to: var(--honey); --fg: var(--ink); --sw: var(--caramel); }
.tone--blonde   { --from: var(--golden); --to: var(--pale-gold); --fg: var(--ink); --sw: var(--golden); }
.tone--platinum { --from: var(--platinum); --to: var(--platinum); --fg: var(--ink); --sw: var(--platinum); }

/* ---------- Gallery page: a lift of its own ---------- */
@media (min-width: 900px) {
  .page-gallery .site-header { padding-left: var(--gutter); }
}
.g-head { --from: var(--ink); --to: var(--ink); --fg: var(--pale-gold); padding-top: clamp(1.5rem, 1rem + 2.6vw, 4rem); padding-bottom: 1.5rem; }
.g-head__title { font-family: var(--font-display); font-weight: 580; font-size: var(--fs-shade); line-height: 1; letter-spacing: -0.012em; word-spacing: 0.07em; max-width: 16ch; }
.g-head__intro { margin-top: 0.85rem; font-size: var(--fs-lead); line-height: 1.45; max-width: 30rem; }
@media (min-width: 900px) {
  .g-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: end; padding-bottom: clamp(2rem, 1rem + 2vw, 3rem); }
  .g-head__title { grid-column: 1 / span 8; max-width: none; }
  .g-head__intro { grid-column: 9 / -1; margin: 0; }
}

/* Jump index: a quiet legend, each name with a chip of its shade */
.g-index { background: var(--ink); color: var(--pale-gold); padding: 0 var(--gutter-end) clamp(1.75rem, 1rem + 2.6vw, 4rem) var(--gutter); }
.g-index__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.g-index__item a {
  display: flex; align-items: center; gap: 0.6rem; min-height: 44px;
  font-family: var(--font-lining); font-size: var(--fs-small); font-weight: 500; line-height: 1.2;
  text-decoration: none; text-wrap: balance;
}
.g-index__item a::before {
  content: ""; flex: none; width: 1.125rem; height: 1.125rem; border-radius: 2px;
  background: var(--sw); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pale-gold) 30%, transparent);
}
.g-index__item a:hover { text-decoration: underline; }
.g-index__item a:focus-visible { outline-color: var(--pale-gold); } /* the item's tone sets --fg for its chip, not for the ink ground */
@media (min-width: 900px) {
  .g-index__list { display: flex; gap: 0.25rem 2.5rem; flex-wrap: wrap; }
}

/* One band per family */
.gband { padding-top: clamp(2rem, 1rem + 5vw, 7rem); padding-bottom: clamp(4rem, 2rem + 6vw, 8rem); }
.gband__name { font-family: var(--font-display); font-weight: 580; font-size: clamp(2.125rem, 1.2rem + 3.6vw, 5.25rem); line-height: 1; letter-spacing: -0.012em; word-spacing: 0.07em; max-width: 18ch; }
.gband__levels { margin-top: 0.55rem; font-family: var(--font-lining); font-variant-numeric: lining-nums; font-size: clamp(1.0625rem, 0.96rem + 0.4vw, 1.3125rem); font-weight: 500; }

/* An empty band: its shade, its name set large, its levels, one honest line. Compact, one column. */
.gband--empty { padding-top: clamp(3rem, 2rem + 3.5vw, 5.5rem); padding-bottom: clamp(3rem, 2rem + 3.5vw, 5.5rem); }
.gband--empty .gband__soon { margin-top: 1.1rem; font-size: var(--fs-lead); line-height: 1.45; max-width: 30rem; }
/* From 900 px an empty band is a type band: the shade name set across it, levels and the line beneath */
@media (min-width: 900px) {
  .gband--empty { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: baseline;
    padding-top: clamp(3rem, 1.5rem + 2.5vw, 4.5rem); padding-bottom: clamp(3rem, 1.5rem + 2.5vw, 4.5rem); }
  .gband--empty .gband__head { display: contents; }
  .gband--empty .gband__name { grid-column: 1 / -1; font-size: clamp(5rem, 1rem + 6.4vw, 8rem); line-height: 0.95; max-width: none; }
  .gband--empty .gband__levels { grid-column: 1 / span 4; margin-top: 1.5rem; }
  .gband--empty .gband__soon { grid-column: 7 / -1; margin-top: 1.5rem; }
}

/* Composed, never gridded. Phone: one column; sizes and sides alternate, the lead runs edge to edge. */
.g-row { display: grid; row-gap: 3rem; }
.g-row + .g-row { margin-top: 3.5rem; }
.g-row--lead { row-gap: 1.25rem; }
.g-photo { margin: 0; min-width: 0; }
.g-photo img { width: 100%; background-color: var(--ph); }
.g-ph--full { margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-end)); }
.g-ph--l84, .g-ph--l76, .g-ph--l62 { margin-left: calc(-1 * var(--gutter)); }
.g-ph--r84, .g-ph--r76, .g-ph--r62 { justify-self: end; margin-right: calc(-1 * var(--gutter-end)); }
.g-ph--l84, .g-ph--r84 { width: 84vw; }
.g-ph--l76, .g-ph--r76 { width: 76vw; }
.g-ph--l62, .g-ph--r62 { width: 62vw; }
.g-cap { display: grid; gap: 0.15rem; margin-top: 0.8rem; max-width: 30rem; }
.g-ph--full .g-cap { padding-inline: var(--gutter) var(--gutter-end); }
.g-ph--l84 .g-cap, .g-ph--l76 .g-cap, .g-ph--l62 .g-cap { padding-left: var(--gutter); }
.g-ph--r84 .g-cap, .g-ph--r76 .g-cap, .g-ph--r62 .g-cap { padding-right: var(--gutter-end); }
.g-cap__title { font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + 0.45vw, 1.4375rem); font-weight: 560; line-height: 1.2; word-spacing: 0.04em; text-wrap: balance; }
.g-cap__tech { font-size: var(--fs-small); }

/* Before and after: one crop shape, one size, side by side so the colour can be compared at a glance.
   minmax(0, 1fr) keeps both halves exactly equal whatever the image's own width. */
.g-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.g-pair img { width: 100%; background-color: var(--ph); }
.g-pair__label { margin-top: 0.5rem; font-family: var(--font-lining); font-size: var(--fs-small); font-weight: 560; }
.g-ph--full .g-pair__half:first-child .g-pair__label { padding-left: var(--gutter); }

/* The composition starts at 640 px, so a tablet gets it too. */
@media (min-width: 640px) {
  .g-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 0; align-items: start; }
  .g-row + .g-row { margin-top: clamp(4rem, 2rem + 4vw, 7rem); }
  .g-row > .g-photo { grid-column: var(--col); grid-row: 1; width: auto; margin: 0; justify-self: stretch; }
  .g-row > .g-photo .g-cap { padding: 0; }
  .g-ph--full .g-pair__half:first-child .g-pair__label { padding-left: 0; }
  /* Each band's lead photo hangs from the band's top edge; the shade name keeps its offset. */
  /* No family heading any more (Brett, 2026-11-11), so the band keeps its own top padding. */
  .g-row--lead > .gband__head { grid-column: 1 / span 5; grid-row: 1; padding-top: clamp(3rem, 1.5rem + 5vw, 7rem); }
  .g-row--lead-landscape > .gband__head, .g-row--lead-pair > .gband__head { grid-column: 1 / span 4; }
  /* Side captions touch their photo's own edge */
  .g-row > .g-photo--side { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; }
  .g-photo--side > picture, .g-photo--side > .g-pair { grid-column: var(--col); grid-row: 1; display: block; }
  .g-photo--side > .g-pair { display: grid; }
  .g-photo--side > .g-cap { grid-column: var(--cap); grid-row: 1; margin: 0; }
  .g-photo--cap-end > .g-cap { justify-self: end; justify-items: end; text-align: right; }
  /* Lead row: the shade name on top, the caption in its own row below it, so they never collide */
  .g-row--lead { grid-template-rows: auto 1fr; }
  .g-row--lead > .g-photo--side { grid-row: 1 / span 2; grid-template-rows: subgrid; }
  .g-row--lead > .g-photo--side > picture, .g-row--lead > .g-photo--side > .g-pair { grid-row: 1 / span 2; align-self: start; }
  .g-row--lead > .g-photo--side > .g-cap { grid-row: 2; align-self: end; padding-top: 1.5rem; }
  /* Two photos in a row: the darker one left and higher, the other dropped */
  .g-drop { margin-top: clamp(4rem, 1rem + 8vw, 9rem) !important; }
}

/* At the light end, next to colour correction: Book */
.g-end { border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem); }
.g-end__title { font-family: var(--font-display); font-weight: 580; font-size: var(--fs-shade); line-height: 1; letter-spacing: -0.012em; word-spacing: 0.07em; max-width: 18ch; }
.g-end__hours { margin-top: 1rem; font-size: var(--fs-small); }
@media (min-width: 900px) {
  .g-end { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: end; }
  .g-end__title { grid-column: 1 / span 7; max-width: none; }
  .g-end__act { grid-column: 8 / -1; padding-bottom: 0.4rem; }
  .g-end .book--big { margin: 0; }
}

/* Print: no fixed chrome */
@media print {
  .rail, .book--fixed { display: none; }
}