/* Slatewise Studio. One stylesheet, self-hosted fonts, no scripts, no third-party anything.

   The idea: a writing slate, where the working is chalked up for anyone to check. The home
   page opens on a full-width slate with a real calculation being written out and ticked;
   each product has its own variety of slate (blue, green, heather), and the footer shows
   them as the layered strata the stone is split from.

   Colours are tokens and dark mode only redefines tokens. Every text/background pair is
   listed in tools/check_site.py (CONTRAST_PAIRS) and measured there against WCAG AA, so a
   token change that breaks contrast fails the gate instead of shipping. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("/fonts/spectral-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("/fonts/spectral-500-italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
/* Metric-matched fallbacks, so the swap to the web fonts barely moves the page. The numbers
   were measured from the font files with fontTools: size-adjust matches the average advance
   width over real site text, and the overrides are the web font's ascent/descent divided by
   that size-adjust. */
@font-face {
  font-family: "Grotesk Fallback"; src: local("Arial"), local("Helvetica");
  size-adjust: 104.1%; ascent-override: 93.8%; descent-override: 24.8%; line-gap-override: 0%;
}
@font-face {
  font-family: "Spectral Fallback"; src: local("Georgia"), local("Times New Roman");
  font-style: normal;
  size-adjust: 102.9%; ascent-override: 103%; descent-override: 45%; line-gap-override: 0%;
}
@font-face {
  font-family: "Spectral Fallback"; src: local("Georgia Italic"), local("Georgia-Italic"), local("Times New Roman Italic");
  font-style: italic;
  size-adjust: 90.9%; ascent-override: 116.5%; descent-override: 50.9%; line-gap-override: 0%;
}

:root {
  --bg: #f4f5f3;
  --surface: #ffffff;
  --ink: #17212b;
  --muted: #4a5763;
  --line: #d3d9de;
  --accent: #2b5676;
  --accent-hover: #1b3d56;
  --slate: #26313b;
  --slate-deep: #1c252d;
  --chalk: #f0efe9;
  --chalk-dim: #d3d9dd;
  --chalk-yellow: #f5da8a;
  --focus: #b45309;
  /* the three slates, one per product; text on them is always --chalk */
  --slate-blue: #34495d;
  --slate-green: #3a4c41;
  --slate-heather: #4c4154;
  --serif: "Spectral", "Spectral Fallback", Georgia, serif;
  --sans: "Schibsted Grotesk", "Grotesk Fallback", system-ui, sans-serif;
  --measure: 42rem;
  --page: 70rem;
  --gutter: 1.25rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12181e;
    --surface: #1a2229;
    --ink: #e6eaed;
    --muted: #a8b2bb;
    --line: #2c3640;
    --accent: #9fc4e0;
    --accent-hover: #c6dcee;
    --slate: #1f2931;
    --slate-deep: #0e1317;
    --focus: #fbbf24;
    --slate-blue: #2e4152;
    --slate-green: #34463b;
    --slate-heather: #45394d;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  overflow-wrap: break-word;
  font-kerning: normal;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 0.12em; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  background: var(--surface); color: var(--ink); padding: 0.6rem 1rem;
  border: 2px solid var(--focus); border-radius: 8px;
}
.skip-link:focus { top: 1rem; }

/* ---- the mark: a slate with a chalk tick ---- */
.mark { width: 2rem; height: 2rem; flex: none; }
.mark-slate { fill: var(--slate); }
.mark-frame { fill: none; stroke: var(--chalk); stroke-opacity: 0.28; stroke-width: 1.1; }
.mark-chalk { fill: none; stroke: var(--chalk); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) { .mark-slate { fill: #3b4b58; } }

/* ---- header ---- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.35rem 1.5rem; padding-block: 0.8rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-name { font: 600 1.55rem/1 var(--serif); letter-spacing: -0.012em; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.site-nav li { margin: 0; }
.site-nav a {
  color: var(--muted); text-decoration: none; font-size: 0.97rem; font-weight: 500;
  display: inline-block; padding-block: 0.55rem;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
@media (min-width: 52rem) {
  .site-header { position: sticky; top: 0; }
}
@media (max-width: 30rem) {
  .site-nav ul { gap: 0 1rem; }
  .site-nav a { font-size: 0.94rem; padding-block: 0.45rem; }
}

/* ---- page grid: reading content sits in the centre column, .band runs full width ---- */
main {
  display: grid;
  grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, calc(var(--page) - 2 * var(--gutter))) minmax(var(--gutter), 1fr);
  padding-bottom: 4.5rem;
}
main > * { grid-column: 2; min-width: 0; }
main > .band { grid-column: 1 / -1; }
.page-page main { padding-top: 0; }
.page-page main > .prose:first-child { padding-top: 0; }

/* Reading pages open on a slate nameplate. The band is the header's own background pushed
   out sideways with a spread shadow and clipped top and bottom, so it spans the window
   without the element leaving the reading column (and without any horizontal overflow). */
.page-head {
  --stone: var(--slate);
  background: var(--stone); color: var(--chalk);
  box-shadow: 0 0 0 100vmax var(--stone); clip-path: inset(0 -100vmax);
  padding-block: clamp(2.25rem, 6vw, 3.5rem) clamp(1.75rem, 5vw, 2.75rem);
  margin-bottom: 2.5rem;
}
.slate-blue .page-head { --stone: var(--slate-blue); }
.slate-green .page-head { --stone: var(--slate-green); }
.slate-heather .page-head { --stone: var(--slate-heather); }
.page-head h1 { color: var(--chalk); margin-bottom: 0.5rem; }
.page-head h1:last-child { margin-bottom: 0; }
.page-head .lede { color: var(--chalk); margin: 0.9rem 0 0; }
.page-head .effective { color: var(--chalk-dim); margin: 0; }
.page-head .eyebrow a, .page-head a { color: var(--chalk-yellow); }
.page-head .tag { color: var(--chalk); border-color: rgba(240, 239, 233, 0.4); margin-bottom: 0.8rem; }

/* ---- type ---- */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 6vw, 3.4rem); margin: 0 0 0.7rem; }
h2 { font-size: clamp(1.55rem, 3.6vw, 2.05rem); margin: 2.8rem 0 0.75rem; }
h3 { font-size: 1.22rem; margin: 1.9rem 0 0.45rem; letter-spacing: -0.004em; }
p, ul, ol, dl, table { margin: 0 0 1rem; }
li + li { margin-top: 0.35rem; }
.lede { font-size: 1.2rem; line-height: 1.6; max-width: var(--measure); text-wrap: pretty; }
.muted { color: var(--muted); }
.prose { max-width: var(--measure); }
.prose p, .prose li { text-wrap: pretty; }
.eyebrow { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.5rem; }
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.tag {
  display: inline-block; font-size: 0.9rem; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.7rem;
}
.tagline { font: italic 500 1.4rem/1.35 var(--serif); color: var(--muted); margin-bottom: 1rem; }

/* ---- buttons ---- */
.btn {
  display: inline-block; font-weight: 600; font-size: 1rem; line-height: 1.2;
  padding: 0.78rem 1.25rem; border-radius: 10px; text-decoration: none;
  background: var(--ink); color: var(--bg); border: 2px solid var(--ink);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { background: transparent; color: var(--ink); text-decoration: none; }
.btn-chalk { background: var(--chalk); color: var(--slate); border-color: var(--chalk); }
.btn-chalk:hover { background: transparent; color: var(--chalk); }
.btn-quiet { color: var(--chalk); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(240, 239, 233, 0.45); }
.btn-quiet:hover { color: var(--chalk); text-decoration-color: var(--chalk); }

/* ==== HOME: the slate ==== */
.hero {
  position: relative; overflow: hidden;
  color: var(--chalk);
  background-color: var(--slate);
  /* Faint smudges of old, wiped working, so it reads as a used slate and not a flat fill. */
  background-image:
    radial-gradient(38rem 14rem at 78% 18%, rgba(240, 239, 233, 0.055), transparent 70%),
    radial-gradient(30rem 12rem at 12% 88%, rgba(240, 239, 233, 0.04), transparent 70%),
    radial-gradient(22rem 9rem at 55% 70%, rgba(240, 239, 233, 0.035), transparent 70%),
    url("/img/slate-grain.svg");
  background-size: auto, auto, auto, 240px 240px;
  border-bottom: 1px solid var(--slate-deep);
}
.hero-grid {
  display: grid; gap: 2.5rem 3.5rem; align-items: center;
  padding-block: clamp(3rem, 8vw, 6.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.hero h1 { color: var(--chalk); font-size: clamp(2.6rem, 6.8vw, 4.6rem); line-height: 1.04; letter-spacing: -0.022em; max-width: 6.4em; margin-bottom: 1.2rem; }
.hero .lede { color: var(--chalk); margin-bottom: 1.8rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin: 0; }

/* The working, in chalk */
.working { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; text-shadow: 0 0 1px rgba(240, 239, 233, 0.35); }
.working-lines { list-style: none; margin: 0; padding: 0; font-size: clamp(1.2rem, 2.7vw, 1.8rem); line-height: 1.3; }
.w-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; margin: 0 0 0.55rem; }
.w-amt { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.35rem; }
.w-note { font-size: 0.72em; color: var(--chalk-dim); margin-top: -0.2rem; }
.w-total { font-size: 1.22em; }
/* the rule drawn before the total, as it would be on paper */
.w-rule { height: 2px; margin: 1.3rem 0 0.9rem; background: var(--chalk); opacity: 0.75; border-radius: 2px; transform-origin: left center; transform: rotate(-0.3deg); }
.w-sum { color: var(--chalk-yellow); box-shadow: 0 3px 0 -1px var(--chalk-yellow), 0 7px 0 -1px var(--chalk-yellow); padding-bottom: 0.1rem; }
.w-tick { width: 1.6em; height: 1.6em; overflow: visible; margin-bottom: 0.2em; }
.w-tick path { fill: none; stroke: var(--chalk-yellow); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.working figcaption { font: 400 0.95rem/1.5 var(--sans); font-style: normal; color: var(--chalk-dim); margin-top: 1.5rem; }

/* One orchestrated moment: the working is chalked up line by line, the sum is underlined,
   then ticked. CSS only (no script, and it works in any renderer that runs CSS animation).
   With reduced motion it simply appears finished. */
@media (prefers-reduced-motion: no-preference) {
  .w-line { animation: chalk-write 0.55s cubic-bezier(0.3, 0.1, 0.3, 1) both; }
  .w-1 { animation-delay: 0.35s; }
  .w-2 { animation-delay: 0.95s; }
  .w-note { animation-delay: 1.5s; animation-duration: 0.4s; }
  .w-total { animation-delay: 2.15s; }
  .w-rule { animation: chalk-rule 0.45s ease-out 1.85s both; }
  .w-sum { animation: chalk-underline 0.35s ease-out 2.7s both; }
  .w-tick path { stroke-dasharray: 1; animation: chalk-tick 0.45s cubic-bezier(0.5, 0, 0.3, 1) 3.05s both; }
}
@keyframes chalk-write { from { clip-path: inset(-0.5em 100% -0.5em 0); } to { clip-path: inset(-0.5em -0.5em -0.5em 0); } }
@keyframes chalk-rule { from { transform: rotate(-0.3deg) scaleX(0); } to { transform: rotate(-0.3deg) scaleX(1); } }
@keyframes chalk-underline { from { box-shadow: 0 3px 0 -1px transparent, 0 7px 0 -1px transparent; } to { box-shadow: 0 3px 0 -1px var(--chalk-yellow), 0 7px 0 -1px var(--chalk-yellow); } }
@keyframes chalk-tick { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ==== HOME: products, each on its own slate ==== */
.products { padding-block: clamp(3rem, 7vw, 5rem) 1rem; }
.products h2 { margin-top: 0; margin-bottom: 2rem; }
.product {
  display: grid; gap: 0; align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  margin-bottom: 1.75rem;
}
@media (min-width: 52rem) {
  .product { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .product:nth-of-type(even) .product-art { order: -1; }
}
.product-copy { padding: clamp(1.5rem, 4vw, 2.75rem); display: flex; flex-direction: column; }
.product h3 { font-size: clamp(1.8rem, 4vw, 2.3rem); margin: 0.3rem 0 0.2rem; }
.product h3 a { color: var(--ink); text-decoration: none; }
.product h3 a:hover { text-decoration: underline; text-decoration-thickness: 0.06em; }
.status { font-size: 0.92rem; font-weight: 600; color: var(--muted); margin: 0; }
.product-line { font: italic 500 1.3rem/1.35 var(--serif); color: var(--muted); margin-bottom: 0.9rem; text-wrap: balance; }
.tiers { display: grid; gap: 0.7rem; margin: 0.4rem 0 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.tiers div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.05rem; }
@media (min-width: 30rem) { .tiers div { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; } }
.slate-heather .tiers div { grid-template-columns: minmax(0, 1fr); gap: 0; }
.tiers dt { font-weight: 700; }
.tiers dd { margin: 0; color: var(--muted); }
.product-cta { margin: auto 0 0; }

.product-art {
  position: relative; display: flex; align-items: flex-start; justify-content: center;
  padding: 3rem 1.5rem 0; min-height: 21rem; max-height: 34rem; overflow: hidden;
  background-color: var(--stone, var(--slate));
  background-image:
    radial-gradient(20rem 10rem at 30% 20%, rgba(240, 239, 233, 0.07), transparent 70%),
    url("/img/slate-grain.svg");
  background-size: auto, 240px 240px;
}
.slate-blue { --stone: var(--slate-blue); }
.slate-green { --stone: var(--slate-green); }
.slate-heather { --stone: var(--slate-heather); }

/* A phone drawn in CSS around the real screenshot; on the home page it rises out of the
   bottom of its slate, cropped by the card. */
.device {
  width: min(16.5rem, 100%); padding: 0.55rem; border-radius: 2.3rem;
  background: #0d1216; box-shadow: 0 0 0 1px rgba(240, 239, 233, 0.12), 0 24px 50px -20px rgba(0, 0, 0, 0.6);
  position: relative;
}
.device::before {
  content: ""; position: absolute; top: 1.05rem; left: 50%; width: 4.2rem; height: 1.05rem;
  transform: translateX(-50%); background: #0d1216; border-radius: 999px; z-index: 1;
}
.device img { display: block; width: 100%; border-radius: 1.8rem; background: var(--chalk); }
.slate-heather .product-art { align-items: flex-end; }
@media (min-width: 52rem) { .product-art { min-height: 26rem; } }

/* Templates: two sheets, drawn, since there's no app screen to show */
.sheets { position: relative; width: min(19rem, 100%); height: 17rem; margin-bottom: -1px; }
.sheet {
  position: absolute; bottom: 0; width: 12.5rem; height: 16rem; border-radius: 6px 6px 0 0;
  background: #fbfbf8; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
}
.sheet-grid {
  left: 0; transform: rotate(-4deg); transform-origin: bottom left;
  background-image:
    linear-gradient(#fbfbf8 0 0),
    repeating-linear-gradient(0deg, #d9dfe3 0 1px, transparent 1px 1.35rem),
    repeating-linear-gradient(90deg, #d9dfe3 0 1px, transparent 1px 3.1rem);
  background-size: 100% 2.6rem, 100% 100%, 100% 100%;
  background-repeat: no-repeat, repeat, repeat;
}
.sheet-cv { right: 0; transform: rotate(3deg); transform-origin: bottom right; padding: 1.4rem 1.3rem; }
.sheet-head { display: block; height: 0.9rem; width: 55%; border-radius: 3px; background: var(--stone); margin: 1rem 0 0 1rem; }
.sheet-cv .sheet-head { margin: 0 0 1rem; width: 62%; }
.sheet-lines {
  display: block; height: 10.5rem;
  background: repeating-linear-gradient(180deg, #cfd6db 0 0.45rem, transparent 0.45rem 1.15rem);
  width: 88%;
}

/* ==== HOME: how we build ==== */
.how { padding-block: 2.5rem 1rem; }
.how h2 { margin-top: 0.5rem; }
.principles { display: grid; gap: 0.25rem 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.principle { padding-left: 2.4rem; position: relative; }
/* The same chalk tick as the mark: each one is a promise we hold ourselves to. */
.principle::before {
  content: ""; position: absolute; left: 0; top: 0.1rem; width: 1.6rem; height: 1.6rem;
  background: url("/img/tick.svg") center / contain no-repeat;
}
.principle h3 { margin-top: 0; }
.principle p { color: var(--muted); }

/* ==== PRODUCT PAGES ==== */
.product-hero {
  color: var(--chalk);
  background-color: var(--stone, var(--slate));
  background-image:
    radial-gradient(34rem 14rem at 20% 10%, rgba(240, 239, 233, 0.07), transparent 70%),
    url("/img/slate-grain.svg");
  background-size: auto, 240px 240px;
  margin-bottom: 2.75rem;
}
.product-head {
  display: grid; gap: 2rem 3rem; align-items: center; grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(2.5rem, 6vw, 4rem) 0;
}
@media (min-width: 52rem) {
  .product-head { grid-template-columns: minmax(0, 1fr) 17rem; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
}
.product-hero h1 { color: var(--chalk); font-size: clamp(2.6rem, 7vw, 4rem); letter-spacing: -0.02em; margin-bottom: 0.4rem; }
.product-hero .tag { color: var(--chalk); border-color: rgba(240, 239, 233, 0.4); margin-bottom: 1rem; }
.product-hero .tagline { color: var(--chalk-yellow); }
.product-hero .lede { color: var(--chalk); margin-bottom: 0; }
.shot { margin: 0; justify-self: center; width: min(17rem, 100%); }
.shot figcaption { font-size: 0.88rem; color: var(--chalk-dim); margin-top: 0.8rem; text-align: center; }
@media (max-width: 51.99rem) {
  .shot { padding-bottom: 2rem; }
}

.feature-list { padding-left: 1.2rem; }
.feature-list li::marker { color: var(--muted); }
.feature-list strong { color: var(--ink); }

.callout {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 10px; padding: 1rem 1.2rem; max-width: var(--measure);
}
.callout p:last-child { margin-bottom: 0; }

.link-row { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.link-row li { margin: 0; }
.link-row a {
  display: inline-block; padding: 0.6rem 1.05rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); text-decoration: none; font-weight: 600;
}
.link-row a:hover { border-color: var(--accent); }

/* ---- tables ---- */
table { border-collapse: collapse; width: 100%; max-width: var(--measure); font-size: 0.98rem; }
caption { text-align: left; color: var(--muted); font-size: 0.92rem; padding-bottom: 0.5rem; }
th, td { text-align: left; vertical-align: top; padding: 0.65rem 0.9rem 0.65rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
thead th { font-size: 0.9rem; font-weight: 700; color: var(--muted); border-bottom: 2px solid var(--ink); }
td.num { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---- legal and reading pages ---- */
.toc { margin-block: 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.25rem; max-width: var(--measure); }
.toc p { margin: 0 0 0.4rem; font-weight: 700; }
.toc ul { margin: 0; padding-left: 1.1rem; columns: 2 14rem; column-gap: 2rem; }
.toc li { break-inside: avoid; }
.effective { color: var(--muted); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.4rem; max-width: var(--measure); }
dl.facts dt { font-weight: 700; }
dl.facts dd { margin: 0; }
@media (max-width: 30rem) {
  dl.facts { grid-template-columns: 1fr; gap: 0.1rem; }
  dl.facts dd { margin-bottom: 0.7rem; }
}

/* ---- footer, with the strata ---- */
.site-footer { background: var(--slate-deep); color: var(--chalk); font-size: 0.95rem; }
.strata { display: grid; }
.strata span { display: block; }
.strata span:nth-child(1) { height: 4px; background: #7d6d86; }
.strata span:nth-child(2) { height: 12px; background: #4d6780; }
.strata span:nth-child(3) { height: 3px; background: #8b98a3; }
.strata span:nth-child(4) { height: 8px; background: #5a7263; }
.footer-inner { padding-block: 2.25rem 2.6rem; }
.footer-brand { display: flex; align-items: center; gap: 0.6rem; font: 600 1.2rem var(--serif); margin-bottom: 1rem; }
.footer-brand .mark { width: 1.7rem; height: 1.7rem; }
.site-footer .mark-slate { fill: #3b4b58; }
.site-footer a { color: var(--chalk); }
.footer-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; margin-bottom: 1rem; }
.footer-links li { margin: 0; }
.footer-links a { display: inline-block; padding-block: 0.3rem; }
.fine { color: var(--chalk-dim); font-size: 0.9rem; margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media print {
  .site-header nav, .skip-link, .strata, .product-art { display: none; }
  .hero, .product-hero, .site-footer { background: none; color: #000; }
  .hero h1, .hero .lede, .product-hero h1, .product-hero .lede, .working, .w-sum { color: #000; }
}