/* Lettering: one readable text layer, CSS trim and stepped extrusion.
   Large features get depth; editorial and supporting headings get shallow relief.
   Palette rule: vibrant, but never red. Warm accents stay in the orange/amber band
   (hue ≥ 28°); pinks, corals, crimsons and raspberries are out. Each section owns a
   distinct pair, and orange is reserved for Portfolio so it stays an accent, not a theme. */

/* A variable face supplies real heavy weights rather than synthetic bold. */
@font-face {
  font-family: 'Ben Lettering'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('/fonts/inter-latin-variable.woff2') format('woff2');
}

/* ── Section palettes: face + accent, each with a lit edge; one shared extrusion side. */
html[data-lettering] { --letter-shadow: rgb(5 16 23 / .42); }
html[data-theme="light"][data-lettering] { --letter-shadow: rgb(48 68 82 / .18); }

/* Home and general pages: azure and mint. */
html[data-lettering="block"] {
  --letter-face: #57c9ff; --letter-edge: #83deff; --letter-side: #08446a;
  --letter-accent: #2ff0c9; --letter-accent-edge: #77ffe1;
}
html[data-theme="light"][data-lettering="block"] {
  --letter-face: #0756bf; --letter-edge: #458fea; --letter-side: #97c5f7;
  --letter-accent: #006b61; --letter-accent-edge: #31d9c0;
}
/* Portfolio: azure and tangerine over a deep-navy extrusion (complementary, poster-bold). */
html[data-lettering="folio"] {
  --letter-face: #57c9ff; --letter-edge: #9ee5ff; --letter-side: #123a5c;
  --letter-accent: #ffa646; --letter-accent-edge: #ffd394;
}
html[data-theme="light"][data-lettering="folio"] {
  --letter-face: #0756bf; --letter-edge: #80b7ff; --letter-side: #a9c8ee;
  --letter-accent: #b45500; --letter-accent-edge: #ffbd70;
}
/* Hire Me: emerald and lime — an open, go-ahead pairing over a deep-forest extrusion. */
html[data-lettering="warm"] {
  --letter-face: #5de6a2; --letter-edge: #a8f5cf; --letter-side: #0e4735;
  --letter-accent: #c9ef5e; --letter-accent-edge: #e7ffa6;
}
html[data-theme="light"][data-lettering="warm"] {
  --letter-face: #07744a; --letter-edge: #4fd699; --letter-side: #a7dfc4;
  --letter-accent: #4b7300; --letter-accent-edge: #b8e24c;
}
/* AI Lab: violet and cyan. */
html[data-lettering="lab"] {
  --letter-face: #baa6ff; --letter-edge: #dec4ff; --letter-side: #473078;
  --letter-accent: #61e4f2; --letter-accent-edge: #aff9ff;
}
html[data-theme="light"][data-lettering="lab"] {
  --letter-face: #6934c7; --letter-edge: #a679f5; --letter-side: #b69be8;
  --letter-accent: #006d87; --letter-accent-edge: #25d0dc;
}
/* Koda: orchid and jade. */
html[data-lettering="enamel"] {
  --letter-face: #ce9fff; --letter-edge: #f1c0ff; --letter-side: #4b3075;
  --letter-accent: #52f0b7; --letter-accent-edge: #a0ffe0;
}
html[data-theme="light"][data-lettering="enamel"] {
  --letter-face: #8823b7; --letter-edge: #dd85f4; --letter-side: #ba8fd9;
  --letter-accent: #006e51; --letter-accent-edge: #42dcba;
}
/* Blog: periwinkle titles with a sunflower accent — calm for long reading pages, with
   one bright note for emphasis. */
html[data-lettering="editorial"] {
  --letter-face: #aab9ff; --letter-edge: #d4dcff; --letter-side: #2c3370;
  --letter-accent: #ffd36a; --letter-accent-edge: #ffe9ad;
}
html[data-theme="light"][data-lettering="editorial"] {
  --letter-face: #3246b4; --letter-edge: #8e9ff4; --letter-side: #bac4f2;
  --letter-accent: #8a6300; --letter-accent-edge: #f2c14e;
}

/* ── Reset: specificity intentionally clears legacy gradient masks without changing layout. */
html[data-lettering] body :is(h1, h2, h3)[data-letter-level],
html[data-lettering] body :is(h1, h2, h3)[data-letter-level] :is(.gradient, .gradient-text, .section-title-text, .section-heading-text, .section-title-label, .gradient-text-animated, .gradient-rainbow, .no-break) {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0; /* Strokes expose overlapping variable-font contours as boxes. */
  color: var(--letter-face);
  animation: none;
  text-shadow: 0 1px 0 rgb(255 255 255 / .12), 0 2px 2px var(--letter-shadow);
  filter: none;
}
html[data-lettering] body :is(h1, h2, h3)[data-letter-level]::after { background-image: none; }

/* ── Feature headlines: stepped extrusion.
   Headline and emphasis share ONE geometry; only the lit edge colour changes, so an
   emphasised word never looks thicker than the words beside it. Offsets are in em so
   depth scales with the headline from phone to 4K. */
html[data-lettering] body h1[data-letter-level] {
  --letter-lit: var(--letter-edge);
  font-family: 'Ben Lettering', Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.16;
  text-wrap: balance;
}
html[data-lettering] body :is(h1[data-letter-level], h1[data-letter-level] :is(.gradient, .gradient-text, .section-title-text, .no-break, [data-letter-emphasis])) {
  text-shadow:
    0 -.008em 0 rgb(255 255 255 / .3),
    .008em .012em 0 var(--letter-lit),
    .016em .025em 0 var(--letter-side),
    .024em .038em 0 var(--letter-side),
    .033em .052em 0 var(--letter-side),
    .042em .066em 0 var(--letter-side),
    .052em .085em .02em var(--letter-shadow),
    .06em .11em .12em var(--letter-shadow);
}
html[data-lettering] body [data-letter-emphasis] {
  --letter-lit: var(--letter-accent-edge);
  color: var(--letter-accent);
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
  font-weight: 900;
}
/* Portfolio's first line and Koda's title read as one face; the accent carries the second beat. */
html[data-lettering="folio"] body h1 [data-letter-emphasis]:first-of-type,
html[data-lettering="enamel"] body h1 [data-letter-emphasis] {
  --letter-lit: var(--letter-edge);
  color: var(--letter-face);
}

/* A quiet cut-metal edge suits long article titles and the résumé identity. */
html:is([data-lettering="editorial"], [data-lettering="emboss"]) body :is(h1[data-letter-level], h1[data-letter-level] [data-letter-emphasis]) {
  letter-spacing: -.025em;
  text-shadow: 0 -1px 0 rgb(255 255 255 / .24), 0 1px 0 var(--letter-side), 0 3px 3px var(--letter-shadow);
}
html[data-lettering="emboss"] body h1 a { color: inherit; }

/* ── Supporting headings: machined relief, with an accent label on section titles. */
html[data-lettering] body h2[data-letter-level] { font-weight: 750; letter-spacing: -.02em; line-height: 1.3; }
html[data-lettering] body h3[data-letter-level] { letter-spacing: -.012em; line-height: 1.4; }
html[data-lettering] body :is(h2, h3)[data-letter-level] { color: var(--letter-face); }
html[data-lettering] body :is(h2, h3) [data-letter-emphasis] {
  text-shadow: 0 -1px 0 rgb(255 255 255 / .22), 1px 2px 0 var(--letter-side), 2px 4px 5px var(--letter-shadow);
}
/* The trim is a tapered two-tone rule drawn under the label: bright at the start,
   fading out, so it reads as an inlay rather than a hyperlink underline. It lives on a
   pseudo-element because the label's own background is owned by legacy prism rules
   (reduced motion force-centres it with !important, which would strike through text). */
html[data-lettering] body h2[data-letter-level] :is(.section-title-text, .section-title-label) {
  color: var(--letter-accent);
  display: inline-block;
  position: relative;
  padding-bottom: .22em;
  text-shadow: 0 -1px 0 rgb(255 255 255 / .2), 1px 2px 0 var(--letter-side), 2px 4px 6px var(--letter-shadow);
}
html[data-lettering] body h2[data-letter-level] :is(.section-title-text, .section-title-label)::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--letter-accent) 0 38%, color-mix(in srgb, var(--letter-accent-edge) 70%, transparent) 72%, transparent);
  pointer-events: none;
}
html[data-lettering] body h2[data-letter-level] > svg { color: var(--letter-accent); }

/* ── Forced colours: system colours only, no decoration. */
@media (forced-colors: active) {
  html[data-lettering] body [data-letter-level],
  html[data-lettering] body [data-letter-level] * {
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
    text-shadow: none !important;
    background: none !important;
  }
  html[data-lettering] body h2[data-letter-level] :is(.section-title-text, .section-title-label)::after {
    background: CanvasText !important;
    height: 1px;
  }
}

/* Watermarks moved to css/components/_watermarks.css (generated by scripts/build-watermarks.mjs). */