/* client.css — ONE design across every page a client or a prospect sees.
 *
 * WHY THIS FILE EXISTS. This repo carried TWO house styles and nothing in it
 * said which was Love Sunday: the operator rooms and the old portal template
 * used cream, ink and #fe1817 in Noto Serif Display; the landing page used
 * pink, plum and #FE1717 in Fraunces. An earlier audit flagged the conflict
 * as unresolved and said any new client-facing page would have to pick one.
 * The repo owner picked: the landing page IS the brand, and the operator's
 * custom UI is being retired into it.
 *
 * THE PALETTE AND TYPE SCALE BELOW ARE LIFTED VERBATIM from
 * landing/love-sunday.css, comments and measured contrast ratios included.
 * They were not retyped and they were not "matched by eye" -- a second set of
 * values that drifts from the first is exactly the problem this file is
 * closing. When the landing changes, this is regenerated from it.
 *
 * THE FONTS ARE SELF-HOSTED. The landing loads them from Google, which means
 * Google's servers see the IP of everyone who reads it. The client pages say
 * in their privacy policy that they load nothing from anyone else, and that
 * sentence is worth more than the convenience of a CDN. Same faces, same
 * rendering, no third party.
 *
 * RED IS STILL A MARK, NEVER A SENTENCE, and the rule survives the change of
 * palette: bright --red measures 3.16:1 on the pink ground, so it is legal
 * only at 24px or larger. --red-ink (5.18:1) is the red that carries words.
 * The two are separate variables so the distinction cannot be lost by
 * somebody reaching for "the red".
 */

/* Fraunces, Figtree and DM Mono, SELF-HOSTED.
   Generated from Google's own css2 response, with every url() rewritten
   to this origin and every unicode-range kept verbatim -- so a browser
   still fetches only the subset it needs.

   WHY SELF-HOSTED. The landing page loads these from fonts.googleapis.com,
   which means Google's servers see the IP of everyone who reads it. The
   client pages say, in the privacy policy, that they load nothing from
   anyone else -- and that sentence is worth more than the convenience.
   Serving them here keeps the design identical and the claim true.

   All three are SIL Open Font License 1.1; the licences sit beside the
   files in _brand/fonts/web/ as that licence requires. */

@font-face {
 font-family: 'DM Mono';
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url(/_brand/fonts/web/dm-mono-normal-latin-ext.woff2) format('woff2');
 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
 font-family: 'DM Mono';
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url(/_brand/fonts/web/dm-mono-normal-latin.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
 font-family: 'Figtree';
 font-style: italic;
 font-weight: 400 700;
 font-display: swap;
 src: url(/_brand/fonts/web/figtree-italic-latin-ext.woff2) format('woff2');
 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
 font-family: 'Figtree';
 font-style: italic;
 font-weight: 400 700;
 font-display: swap;
 src: url(/_brand/fonts/web/figtree-italic-latin.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
 font-family: 'Figtree';
 font-style: normal;
 font-weight: 400 700;
 font-display: swap;
 src: url(/_brand/fonts/web/figtree-normal-latin-ext.woff2) format('woff2');
 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
 font-family: 'Figtree';
 font-style: normal;
 font-weight: 400 700;
 font-display: swap;
 src: url(/_brand/fonts/web/figtree-normal-latin.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
 font-family: 'Fraunces';
 font-style: italic;
 font-weight: 400;
 font-display: swap;
 src: url(/_brand/fonts/web/fraunces-italic-latin-ext.woff2) format('woff2');
 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
 font-family: 'Fraunces';
 font-style: italic;
 font-weight: 400;
 font-display: swap;
 src: url(/_brand/fonts/web/fraunces-italic-latin.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
 font-family: 'Fraunces';
 font-style: normal;
 font-weight: 400 500;
 font-display: swap;
 src: url(/_brand/fonts/web/fraunces-normal-latin-ext.woff2) format('woff2');
 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
 font-family: 'Fraunces';
 font-style: normal;
 font-weight: 400 500;
 font-display: swap;
 src: url(/_brand/fonts/web/fraunces-normal-latin.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* — fixed by the identity — */
  --red:       #FE1717;  /* the mark, the accent, the call to action. Display type only. */
  --paper:     #FEDEED;  /* the ground. Pale pink; the brand colour verbatim at first light. */

  /* — derived: type — */
  --ink:       #3B1C24;  /* body copy. Warm plum-brown, red-leaning so it belongs to the pink. */
  --ink-soft:  #7D4B53;  /* captions, meta, secondary copy. Still AA on every surface. */
  --red-ink:   #BD1212;  /* red that carries words: links, labels, small CTAs, outlined buttons. */

  /* — derived: surfaces — */
  --mat:       #FFFDFB;  /* warm white: the mat of a framed print, cards, the browser frame. */
  --blush:     #FBCFE1;  /* a deeper pink: chips, insets, the empty-frame ground, hover fills. */
  --sky:       #FFF1F6;  /* the top of the sky; a lift behind the hero. Not a text surface. */
  --glow:      #FFD9C2;  /* the sun's halo and warm highlights. Not a text surface. */

  /* — text on the ground — */
  /* pair: --ink on --paper */               /*  12.26:1  (worst 12.26) */
  /* pair: --ink-soft on --paper */          /*   5.62:1  (worst 5.61)  */
  /* pair: --red-ink on --paper */           /*   5.18:1  (worst 5.17)  */
  /* pair: --red on --paper @ 3 */           /*   3.16:1  (worst 3.15) — LARGE TYPE ONLY */

  /* — text on blush — */
  /* pair: --ink on --blush */               /*  10.97:1  (worst 10.95) */
  /* pair: --ink-soft on --blush */          /*   5.03:1  (worst 4.95)  */
  /* pair: --red-ink on --blush */           /*   4.64:1  (worst 4.57)  */
  /* Bright --red never carries words on blush; it is not declared here. */

  /* — text on the mat — */
  /* pair: --ink on --mat */                 /*  15.02:1  (worst 14.46) */
  /* pair: --ink-soft on --mat */            /*   6.89:1  (worst 6.63)  */
  /* pair: --red-ink on --mat */             /*   6.35:1  (worst 6.11)  */
  /* pair: --red on --mat @ 3 */             /*   3.87:1  (worst 3.72) — LARGE TYPE ONLY */

  /* — text on red fills — */
  /* pair: --mat on --red @ 3 */             /*   3.87:1  (worst 3.72) — the big CTA: bold, >= 20px */
  /* pair: --mat on --red-ink */             /*   6.35:1  (worst 6.11) — any size */
  /* pair: --paper on --red-ink */           /*   5.18:1  (worst 5.17) — any size */

  /* — lines and shadow (not text; no pairing needed) — */
  --line:        #EFC6D3;   /* hairlines on paper; overridden by color-mix() below where supported */
  --line-strong: #E1A9BC;
  --shadow-ink:  rgb(74 30 40 / 0.20);  /* the colour of shade; warms through the day */

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text:    "Figtree", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* text steps */
  --text-xs:   clamp(0.75rem,   0.72rem + 0.14vw,  0.8125rem); /* 12 → 13   notation, footnotes */
  --text-sm:   clamp(0.875rem,  0.84rem + 0.16vw,  0.9375rem); /* 14 → 15   captions, nav */
  --text-base: clamp(1.0625rem, 1.03rem + 0.16vw,  1.125rem);  /* 17 → 18   body */
  --text-lg:   clamp(1.1875rem, 1.10rem + 0.40vw,  1.375rem);  /* 19 → 22   lede, big buttons */
  /* display steps */
  --text-xl:   clamp(1.5rem,    1.25rem + 1.05vw,  2rem);      /* 24 → 32   h3, pull lines */
  --text-2xl:  clamp(2rem,      1.55rem + 1.85vw,  3rem);      /* 32 → 48   h2 */
  --text-3xl:  clamp(2.75rem,   1.95rem + 3.30vw,  4.75rem);   /* 44 → 76   h1, the hero promise */
  --text-4xl:  clamp(3.5rem,    2.20rem + 5.40vw,  6.75rem);   /* 56 → 108  the statement, alone */

  /* the large-text floor. Anything set in bright --red must be at least
     this big (24px) or 18.66px and bold; the classes below enforce it. */
  --text-large-min: 1.5rem;

  --leading-tight: 1.02;
  --leading-snug:  1.15;
  --leading-body:  1.55;
  --tracking-display: -0.015em;
  --tracking-caps: 0.12em;

  /* ── THE BAND, AND IT DOES NOT FLIP ───────────────────────────────────
     --ink and --paper swap with the reader's theme, which is right for a
     page and WRONG for the masthead, the spine and the billing band. The
     old portal template states the rule and the reason: "the masthead and
     the billing band are ink in both, because an ink band under a red rule
     is the house signature, and a signature that changes with the reader's
     operating system is not one."

     Using var(--ink) for those inverted them in dark mode — a pale bar
     across the top of a dark page, and a filled button that became an
     outline. It looked like a theme bug and it was a rule being lost, which
     is the more expensive kind.

     Measured: --on-band on --band 12.91:1, --band-quiet on --band
     7.27:1, and bright --red on --band 3.88:1 — a mark there, as
     everywhere, and above the 3:1 floor a non-text mark needs. */
  --band:    #3B1C24;
  --on-band: #FBE7EF;
  --band-quiet: #D2A8B6;

  --measure: 68ch;
  --gutter: clamp(18px, 4vw, 40px);
  --radius: 4px;
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; max-width: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display-1, .display-2, .display-3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
  color: var(--ink);
  margin: 0;
}
h1, .display-1 { font-size: var(--text-3xl); }
h2, .display-2 { font-size: var(--text-2xl); }
h3, .display-3 { font-size: var(--text-xl); line-height: var(--leading-snug); }
p, ul, ol { margin: 0 0 1rem; }
p { text-wrap: pretty; }
ul, ol { padding-left: 1.15em; }
li { margin-bottom: 0.4rem; }
img { max-width: 100%; height: auto; }
a { color: var(--red-ink); text-underline-offset: 3px; }
code, .mono { font-family: var(--font-mono); font-size: 0.92em;
  overflow-wrap: anywhere; }

.wrap   { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.prose  { max-width: var(--measure); }
.lede   { font-size: var(--text-lg); line-height: 1.4; }
.small  { font-size: var(--text-sm); }
.quiet  { color: var(--ink-soft); }

/* The tracked-caps notation, in the mono face — the landing's own signature
   for a label, and the reason a label here never looks like body copy. */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: calc(var(--tracking-caps) * -1);
}

/* ── the mark ─────────────────────────────────────────────────────────────
   Bright --red measures 3.16:1 on the pink ground: LARGE TYPE AND MARKS ONLY.
   Anything that carries words in red uses --red-ink at 5.18:1. This is the
   same rule the old palette had at a different pair of values, and it is the
   rule most likely to be lost in a restyle. */
.rule { width: 64px; height: 4px; background: var(--red); }
.dot::before { content: ""; display: inline-block; width: 7px; height: 7px;
  background: var(--red); margin-right: 0.55em; vertical-align: middle; }

/* ── surfaces ─────────────────────────────────────────────────────────── */
.sheet { background: var(--mat); border: 1px solid var(--blush);
  border-radius: var(--radius); }
.inset { background: var(--blush); border-radius: var(--radius); }

/* ── controls ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; font: inherit; font-family: var(--font-text);
  font-weight: 600; font-size: var(--text-sm); line-height: 1;
  padding: 0.9em 1.6em; min-height: 48px; border-radius: 999px;
  cursor: pointer; text-decoration: none; text-align: center;
  /* The band, not --ink: a filled button that becomes an outline at night
     is the same lost signature as an inverting masthead. */
  border: 1px solid var(--band); background: var(--band);
  color: var(--on-band);
}
.btn:hover { background: var(--red-ink); border-color: var(--red-ink); }
.btn:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 3px; }
.btn[disabled] { opacity: 0.55; cursor: default; }
.btn--ghost { background: none; color: var(--ink); }
.btn--ghost:hover { background: var(--blush); border-color: var(--ink);
  color: var(--ink); }

.field {
  width: 100%; font: inherit; font-size: var(--text-base);
  padding: 0.75em 0.9em; color: var(--ink); background: var(--mat);
  border: 1px solid var(--blush); border-radius: var(--radius);
}
.field::placeholder { color: var(--ink-soft); opacity: 0.7; }
.field:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 1px;
  border-color: var(--red-ink); }

/* ── dark ─────────────────────────────────────────────────────────────────
   The landing is light only, deliberately: it is a print, and a print does
   not invert. These pages are read at night on a phone, so they get a dark
   ground -- but it is the SAME palette turned down rather than a second
   design. Plum stays plum; the pink becomes the ink it was always beside. */
/* ── dark ─────────────────────────────────────────────────────────────────
   THREE STATES, NOT TWO, and the third is why this is written twice.

   A reader has a system preference, and some rooms also carry an explicit
   toggle that stamps data-theme on the root. So: the media query is guarded
   with :not([data-theme="light"]) so an explicit LIGHT choice beats the
   system's dark; and the same values are repeated under [data-theme="dark"]
   so an explicit DARK choice beats a light system. Miss either and the
   toggle appears to work in one direction only — which is how a theme
   switch ends up being called flaky rather than half-written.

   The landing page is light only, deliberately: it is a print, and a print
   does not invert. These pages are read at night on a phone, so they get a
   dark ground — but it is the SAME palette turned down rather than a second
   design. Plum stays plum; the pink becomes the ink it was always beside.

   MEASURED, not assumed — the landing's own discipline applied to the half
   of the palette it does not have:

     --ink on --paper            15.21:1
     --ink-soft on --paper        8.57:1
     --red-ink on --paper         7.91:1
     --ink on --mat              14.11:1
     --ink-soft on --mat          7.95:1
     --ink on --blush            11.81:1
     --ink-soft on --blush        6.65:1
     bright --red on --paper      4.57:1

   Bright --red clears AA for body here, which it does NOT in light
   (3.16:1). The rule does not change with the theme: red stays a MARK and
   never a sentence, because a rule that holds only after sunset is a rule
   somebody breaks in daylight. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #241119;   /* the ground, plum turned down */
    --mat:   #2E1720;   /* cards, the frame */
    --blush: #43222D;   /* insets, chips, the door half */
    --sky:   #2A131C;

    --ink:      #FBE7EF;
    --ink-soft: #D2A8B6;
    --red-ink:  #FF8A8A;
  }
}
:root[data-theme="dark"] {
    --paper: #241119;   /* the ground, plum turned down */
    --mat:   #2E1720;   /* cards, the frame */
    --blush: #43222D;   /* insets, chips, the door half */
    --sky:   #2A131C;

    --ink:      #FBE7EF;
    --ink-soft: #D2A8B6;
    --red-ink:  #FF8A8A;
}