/* ============================================================================================
   Katie Lendel brand layer — katielendel.com
   ============================================================================================

   The personal-brand counterpart to assets/css/brand.css (ScaleLounge). Same philosophy,
   deliberately different identity: the two sites must read as one family without either looking
   like a reskin of the other. ScaleLounge owns forest / champagne / warm ivory / charcoal and is
   operational and systematic. Katie owns steel blue / ink / paper / greige and is editorial and
   human. Neither file imports the other, and nothing here may leak into a ScaleLounge page.

   v2 (2026-09-06, Katie's call): the first pass shipped aubergine/rosewood/porcelain with a
   Newsreader serif; Katie liked the layout and copy but not the colours or the title face. This
   revision keeps every token NAME's role identical and swaps the values: a crisp paper ground,
   neutral greige surfaces, and one deep steel blue doing all the confidence work, with Bricolage
   Grotesque (a modern editorial grotesque, SIL OFL) as the display face over Inter.

   CONTRAST IS MEASURED, NOT ASSUMED (same discipline as brand.css). Ratios computed with the
   WCAG relative-luminance formula on 2026-09-06:

     ink #16171B on paper #FAF9F7 . . . . . . . 17.02:1  AAA
     ink on greige #EFEDE9 . . . . . . . . . . 15.32:1  AAA
     slate #5A5E66 on paper . . . . . . . . . . 6.18:1  AA (5.56:1 on greige — do not lighten)
     steel #24395C on paper . . . . . . . . . . 11.00:1 AAA (text, buttons, focus ring)
     paper on steel . . . . . . . . . . . . . . 11.00:1 AAA (button label)
     paper on midnight #151F31 . . . . . . . . 15.26:1  AAA (the dark band)
     steel-soft #6D86A8 on paper . . . . . . . . 3.55:1 FAILS AA for body-size text

   So the soft steel tint follows the same rule champagne does on the ScaleLounge side: it is a
   mark, a rule, a large-type accent, never small text on a light surface. The ink-shifted
   variant --k-accent-ink (#3D5C87, 6.48:1 on paper, 5.83:1 on greige) is the only tinted colour
   allowed in eyebrows and small text. The border #DBD7D0 is 1.36:1 against paper: a quiet
   divider, never a focus indicator, never the only signal.
   ============================================================================================ */

/* ---- 1. Brand primitives ---- */
:root {
  --k-paper: #FAF9F7;                  /* the page */
  --k-paper-raised: #FEFDFC;           /* raised surface, near white but not clinical */
  --k-greige: #EFEDE9;                 /* secondary surface / alternating band */
  --k-greige-deep: #E4E1DB;            /* pressed / hovered light surface */
  --k-ink: #16171B;                    /* primary text */
  --k-slate: #5A5E66;                  /* secondary text — 6.18:1 on paper */
  --k-steel: #24395C;                  /* confidence and action: deep steel blue */
  --k-steel-hover: #2E4870;            /* hover lifts lighter, like forest does */
  --k-midnight: #151F31;               /* active, and the dark editorial band */
  --k-steel-soft: #6D86A8;             /* accent ONLY: rules, marks, large type (3.55:1) */
  --k-steel-ink: #3D5C87;              /* the only tint allowed as small text on light */
  --k-border: #DBD7D0;                 /* quiet hairline */
  --k-border-strong: #C7C2B9;
  /* On the dark midnight band. Measured: #B7C1D1 on midnight is 9.09:1 (AAA). */
  --k-on-dark: #F5F6F8;
  --k-on-dark-secondary: #B7C1D1;
  --k-steel-on-dark: #8CA6C9;          /* 6.61:1 on midnight — the eyebrow tint for the dark
                                          band. The soft tint there is decor only. */
}

/* ---- 2. Type ----------------------------------------------------------------------------------
   Inter for body and UI (the family relationship with ScaleLounge), Bricolage Grotesque for
   display. Bricolage is the modern editorial voice: a grotesque with real personality and an
   optical-size axis, so headline sizes render the tighter display cut the face was designed to
   show at scale. Both self-hosted, both SIL OFL, licences alongside the files in assets/fonts/.
   Inter re-declares the same woff2 brand.css uses — one file on disk, cached once across both
   sites. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-variable.woff2') format('woff2');
}

:root {
  --k-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --k-font-display: 'Bricolage Grotesque', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Display scale. A grotesque carries more visual mass than the serif it replaced, so the
     clamps sit a step under the v1 values. Body copy is 17px: reading size, not the floor. */
  --k-t-hero: clamp(2.3rem, 1.3rem + 3.2vw, 3.8rem);
  --k-t-h2: clamp(1.75rem, 1.25rem + 1.9vw, 2.65rem);
  --k-t-h3: clamp(1.22rem, 1.06rem + .65vw, 1.55rem);
  --k-t-lead: clamp(1.05rem, .98rem + .32vw, 1.2rem);
  --k-t-body: 1.0625rem;               /* 17px */
  --k-t-sm: 1rem;
  --k-t-xs: .875rem;                   /* 14px — the floor for anything meant to be read */
  --k-t-eyebrow: .8125rem;

  --k-w-display: 560;                  /* Bricolage's medium range: confident without shouting */
  --k-w-medium: 500;
  --k-w-semi: 600;

  --k-lh-display: 1.05;
  --k-lh-body: 1.65;
  --k-track-display: -.022em;
  --k-track-eyebrow: .16em;

  --k-radius: 10px;
  --k-radius-lg: 16px;
  --k-radius-pill: 999px;

  /* One shadow, and a quiet one. Premium here comes from spacing and type, not depth. */
  --k-shadow: 0 20px 50px -32px rgba(22, 23, 27, .35);

  --k-ease: cubic-bezier(.22, .9, .3, 1);
  --k-dur: .18s;

  --k-measure: 66ch;
  --k-container: 1140px;
}

/* ---- 3. Semantic roles ---- */
:root {
  --k-bg: var(--k-paper);
  --k-surface: var(--k-paper-raised);
  --k-surface-2: var(--k-greige);
  --k-text: var(--k-ink);
  --k-text-2: var(--k-slate);
  --k-accent: var(--k-steel-soft);       /* marks and rules only */
  --k-accent-ink: var(--k-steel-ink);    /* eyebrows and small accent text */
  --k-action: var(--k-steel);
  --k-action-hover: var(--k-steel-hover);
  --k-action-active: var(--k-midnight);
  --k-focus: var(--k-steel);             /* 11:1 — the only brand colour fit for a ring */
}

/* ---- 4. Base ---- */
.k-body {
  margin: 0;
  font-family: var(--k-font);
  font-size: var(--k-t-body);
  font-weight: 400;
  line-height: var(--k-lh-body);
  color: var(--k-text);
  background: var(--k-bg);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Katie's standing rule, carried over from brand.css: never one orphaned word on the last
   line of a title or subtitle, and no widows in running copy. Degrades silently. */
.k-body h1, .k-body h2, .k-body h3, .k-body h4 { text-wrap: balance; }
.k-body p, .k-body li, .k-body dd, .k-body dt, .k-body blockquote, .k-body figcaption { text-wrap: pretty; }

/* One visible focus treatment everywhere; keyboard only, mouse clicks stay clean. */
.k-body :focus-visible {
  outline: 2px solid var(--k-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* On the dark band a steel ring vanishes into itself. Paper there instead. */
.k-dark :focus-visible { outline-color: var(--k-on-dark); }

/* ---- 5. Motion --------------------------------------------------------------------------------
   Calm only. Nothing pulses, glows, floats or shines on this site. */
@media (prefers-reduced-motion: reduce) {
  .k-body * { transition-duration: .01ms !important; animation: none !important; scroll-behavior: auto; }
}