/* ==========================================================================
   Theme · white ground, Glacial Indifference everywhere
   Loaded after each page's own stylesheet (style.css, workroom.css or
   prices.css), so every rule here wins by source order alone. Nothing in the
   three base stylesheets is edited: delete this file and its <link> and the
   pages fall back to the original cream-and-serif theme.

   1. Typeface   — one family for display, text and annotation.
   2. Ground     — the warm paper becomes #fff; the black bands (process,
                   footer, mobile drawer, cookie bar, Lisbon's process and
                   enquiry) turn white too, by re-pointing their on-dark
                   tokens at the ink ones rather than restyling each part.
   Left dark on purpose: the photographic hero and the lightbox, where the
   black is behind a photograph, not the page.
   ========================================================================== */

/* 1. Typeface ------------------------------------------------------------ */
@font-face {
  font-family: "Glacial Indifference";
  src: url("../fonts/glacial-indifference-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Glacial Indifference";
  src: url("../fonts/glacial-indifference-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Glacial has no euro sign and no middle dot; both fall through to the next
   geometric face in the stack, which has them. */
:root {
  --glacial: "Glacial Indifference", "Futura", "Century Gothic", "Avenir Next",
             -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: var(--glacial);   /* style.css, workroom.css */
  --sans:    var(--glacial);   /* style.css, prices.css */
  --text:    var(--glacial);   /* workroom.css */
  --annot:   var(--glacial);   /* workroom.css */
}

/* Glacial ships no italic. A slanted geometric sans reads as a mistake, so
   the browser is told not to fake one: every italic rule in the three base
   stylesheets now renders upright. */
html { font-synthesis: none; }

/* The display scale. style.css sized it for Instrument Serif, a narrow,
   light serif; set in Glacial — wide, monoline, and the face the wordmark
   itself is drawn in — the same numbers came out half again as heavy, and a
   152px "Portfolio" read as a second, larger logo under the real one. This
   rescales it for Glacial on one ratio (≈1.41 per step at desktop), capped
   near the 4.5–5rem the Lisbon page found is as far as Glacial goes before
   it turns into a poster.
                      phone (390)   desktop (1440)   was (desktop)
     xl  page title       40px          80px           131–152px
     l   section          32px          56px            86px
     m   sub-section      26px          40px            51px
     s   item title       20px          28px            30px
   The mark keeps the header; the h1 leads the page; each step below reads
   as one step down — never two things of the same weight on one screen. */
:root {
  --fs-display-xl: clamp(2.5rem,   1.5rem  + 4vw,   5rem);
  --fs-display-l:  clamp(2rem,     1.4rem  + 2.4vw, 3.5rem);
  --fs-display-m:  clamp(1.625rem, 1.25rem + 1.4vw, 2.5rem);
  --fs-display-s:  clamp(1.25rem,  1.1rem  + 0.7vw, 1.75rem);
}
/* Glacial wants tightening as it grows (a headline reads as one object) and
   none at item size, where its open counters need the room. */
.display    { letter-spacing: 0; }
.display-xl { line-height: 1.02; letter-spacing: -0.02em; }
.display-l  { line-height: 1.06; letter-spacing: -0.015em; }
.display-m  { line-height: 1.12; letter-spacing: -0.01em; }

/* Two sizes style.css sets outside the scale. The home headline gets one
   notch over a page title, because it sits on the photograph and has to
   hold it, but stays well under the old 131px poster. The stat figures sit
   at sub-section size, beneath the section heading they belong to. */
.hero__title { font-size: clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem); line-height: 1; }
.stat__value { font-size: var(--fs-display-m); }

/* 2. Ground -------------------------------------------------------------- */
:root {
  --paper:   #ffffff;
  --paper-2: #f4f4f3;
  --paper-3: #e9e9e7;
}

/* style.css — the header's frosted ground was the old paper tone. Only the
   style.css header carries data-header; Lisbon's and Prices' are opaque and
   already follow --paper / --page. */
.site-header[data-header] { background: rgba(255, 255, 255, 0.72); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header[data-header] { background: rgba(255, 255, 255, 0.97); }
}

/* style.css — black bands become white. */
.on-dark, .site-footer, .drawer, .cookie {
  --on-dark:      var(--ink);
  --on-dark-soft: var(--ink-faint);
  --on-dark-line: var(--line);
  background: var(--white);
  color: var(--ink);
}
.on-dark .lede              { color: var(--ink-soft); }
.on-dark .btn               { --btn-bg: var(--white); --btn-ink: var(--ink); }
.on-dark .btn--ghost:hover,
.on-dark .btn--ghost:focus-visible { color: var(--white); }
.footer-col li,
.footer-bar,
.cookie__text               { color: var(--ink-soft); }
.site-footer a:hover,
.footer-col li button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }
.site-footer                { border-top: 1px solid var(--line); }
.cookie                     { border-top-color: var(--line); }
/* The header turns light while an overlay is open; over the now-white drawer
   it has to stay ink. (Modal and lightbox are still dark, so they keep it.) */
html:not(.no-js) body:has(.drawer[data-open="true"]) .site-header[data-header] { color: var(--ink); }

/* workroom.css (Lisbon) — the same move for its two dark sections. */
.on-ink {
  --on-ink:         var(--ink);
  --on-ink-2:       var(--ink-2);
  --on-ink-line:    var(--line);
  --thread-on-dark: var(--thread);
  background: var(--paper);
  border-top: var(--hair);
}
.on-ink .btn                { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.on-ink .btn:hover          { background: var(--thread); border-color: var(--thread); color: var(--paper); }
.on-ink .input:hover, .on-ink .select:hover, .on-ink .textarea:hover { border-bottom-color: var(--ink-3); }
.on-ink ::placeholder       { color: var(--ink-3); }
.on-ink .form-status[data-state="ok"] { color: var(--paper); }

/* Footer column headings are h2 on these pages (they were h3, which on
   a page with no h2 — Portfolio, 404 — skipped a level for anyone moving by
   headings). Same look as style.css gave the h3. Scoped to the style.css
   pages (only their header carries data-header): Lisbon's workroom.css
   styles its own .footer-col h2. */
body:has(.site-header[data-header]) .footer-col h2 {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  color: var(--on-dark-soft);
  margin-bottom: 1.25rem;
}

/* Terms and Privacy: the numbered clause headings (h3) were 11px — smaller
   than the 17px clauses under them, so a heading read as a footnote. Up to
   the small size, still in caps and tracked, so it stays a label under the
   28px h2 rather than competing with it. */
.legal h3 { font-size: var(--fs-small); }

/* The desktop side rail ("Atelier · Cape Town" and the reading-progress
   line) is retired: its markup is gone from every page, and the 58px the
   page reserved for it on wide screens goes back to the layout. The hero's
   vertical "Custom · Made to measure" caption and "Scroll" cue are gone from
   index.html too. */
:root { --rail: 0px; }
@media (min-width: 1200px) { :root { --rail: 0px; } }

/* ==========================================================================
   Home hero · one photograph, the words over it
   The photograph (the "stage") runs up behind the transparent header and
   carries the eyebrow, the headline and the line beneath it, together. No
   buttons: the header's "Book a consultation" is the call to action.
     desktop  the stage fills the first screen
     tablet   700–899px: the wide crop, a stage sized to the width
     phone    the stage is exactly the photograph's shape (--hero-phone-ratio,
              width / height), so the whole group shows, uncropped
   Which photograph, and the words' colour, position and (lightest legible)
   shade for it, live in css/hero.css — which, for the current full-bleed
   photograph, also replaces the tablet and phone sizing above.
   ========================================================================== */
.hero--photo {
  display: block;
  min-height: 0;
  margin-top: 0;                 /* the photograph runs up behind the header */
  background: var(--white);
  color: var(--ink);
}
.hero__stage {
  position: relative;
  display: flex;
  align-items: var(--hero-head-align, flex-end);
  /* The header sits over the top of the stage; the words are placed in the
     part below it. */
  padding-top: var(--hx1-bar, 92px);
  height: min(calc(100vw / var(--hero-phone-ratio, 0.6)), 100svh);
  min-height: 20rem;
  overflow: hidden;
  background: var(--hero-ground, #2a2a2b);     /* while the photo loads */
}
.hero--photo .hero__media picture { display: block; height: 100%; }
.hero--photo .hero__media img { animation: none; transform: none; object-position: var(--hero-pos, 50% 30%); }
.hero--photo .hero__media::after { background: var(--hero-shade, none); }
.hero__head {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(1.25rem, 4vh, 3rem);
  color: var(--hero-ink, var(--white));
}
.hero__head .label { color: inherit; }
/* The words hug the page edge (with the gutter) at every width rather than
   the centred 1560px column: on a wide screen the photograph is wide too,
   and centred words would drift onto the people. */
.hero--photo .hero__head.wrap { max-width: none; }
.hero--photo .hero__title { margin: clamp(0.5rem, 1.5vw, 1rem) 0 0; font-size: clamp(2.25rem, 11vw, 2.75rem); }
/* The line under the headline: same colour, set close beneath it so the two
   read as one block. */
.hero--photo .hero__lede {
  color: inherit;
  margin: clamp(0.75rem, 1.6vw, 1.25rem) 0 0;
  max-width: 34ch;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  line-height: 1.55;
}
@media (min-width: 700px) and (max-width: 899px) {
  /* Tied to the width, not the screen height: tall enough that heads clear
     the header, shallow enough that the group stays small and to the right
     with the words beside them. */
  .hero__stage { height: min(max(31rem, calc(54svh + var(--hx1-bar, 100px))), 72vw); }
  .hero--photo .hero__lede { max-width: 24ch; }
  .hero--photo .hero__title { font-size: min(5.5rem, 4.6vw); }
  .hero--photo .hero__title .line > span { white-space: nowrap; }
}
@media (min-width: 900px) {
  .hero__stage { height: 100svh; min-height: 34rem; }
  .hero--photo .hero__title { font-size: min(5.5rem, 4.6vw); }
  .hero--photo .hero__title .line > span { white-space: nowrap; }
}

/* Framed images given a <picture> (the studio's craft image) fill the frame
   like a bare <img> does. */
.frame picture { display: block; height: 100%; }