/* CraftM8 — one stylesheet. Tokens are DESIGN.md §7.2 mapped to CSS custom
   properties (the VISUAL-SPEC.html mapping), plus one measured hue ramp per
   app (WEBSITE.md §5.2). System type only — the wordmark rule. */

:root {
  --surface: #FAF7F2;
  --surface-alt: #F2ECE3;
  --ink: #241F1A;
  --muted: #534B42;
  --outline: #877B6B;
  --outline-subtle: #E3DBCF;
  --primary: #28406E;
  --on-primary: #FFFFFF;
  --primary-container: #DCE4F5;
  --on-primary-container: #12203C;
  --accent: #A3402F;
  --accent-container: #F7DED6;
  --success: #2F6B4F;
  --warning: #8A5A00;
  --danger: #9B2C2C;
  --m8: #B84A36;
  /* neutral ramp defaults; [data-app] overrides */
  --ground: var(--surface);
  --tint: var(--surface-alt);
  --lift: #EDE5D8;
  --base: var(--primary);
  --deep: #1D3054;
  --action: var(--primary);
  --field-bg: #FFFFFF;
  /* rhythm, shape, elevation, motion - a closed set, so later work stays systematic */
  --radius-s: 8px; --radius-m: 12px; --radius-l: 14px;
  --shadow-1: 0 1px 3px rgb(36 31 26 / .06);
  --shadow-2: 0 6px 20px rgb(36 31 26 / .10);
  --ease-out: cubic-bezier(.2,.7,.3,1);
  --t-ack: 120ms; --t-move: 200ms; --t-settle: 350ms;
}

[data-app="quiltm8"] {
  --ground: #F9F0EA; --tint: #F5E8DE; --lift: #F1DCCB;
  --base: #AF5240; --deep: #77382B; --action: #AF5240;
}
[data-app="knitm8"] {
  --ground: #EEF5F0; --tint: #E4EFE8; --lift: #D5E7DB;
  --base: #4F7A5E; --deep: #375541; --action: #4F7A5E;
}
[data-app="soapm8"] {
  --ground: #EDF6F5; --tint: #E2F1EE; --lift: #D2EAE6;
  --base: #41796F; --deep: #2E564F; --action: #41796F;
}
[data-app="stitchm8"] {
  --ground: #EDF0F6; --tint: #E2E7F1; --lift: #D2DAEA;
  --base: #4A5E88; --deep: #3B4B6C; --action: #4A5E88;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #17150F;
    --surface-alt: #221E17;
    --ink: #F2ECE3;
    --muted: #B8AEA1;
    --outline: #7C7365;
    --outline-subtle: #322C24;
    --primary: #A8C0F0;
    --on-primary: #0D1B36;
    --primary-container: #2B3F66;
    --on-primary-container: #DCE4F5;
    --accent: #F0A090;
    --accent-container: #6B2618;
    --success: #88C9A5;
    --warning: #E0B357;
    --danger: #F09A9A;
    --m8: #CE6A50;
    --ground: #201C15; --tint: #221E17; --lift: #2B2519;
    --deep: #D69A8E; --action: #D69A8E; --base: #D69A8E;
    --field-bg: #221E17;
  }
  :root:not([data-theme="light"]) [data-app="knitm8"],
  :root:not([data-theme="light"])[data-app="knitm8"] { --deep: #89B398; --action: #89B398; --base: #89B398; }
  :root:not([data-theme="light"]) [data-app="soapm8"],
  :root:not([data-theme="light"])[data-app="soapm8"] { --deep: #75B5AA; --action: #75B5AA; --base: #75B5AA; }
  :root:not([data-theme="light"]) [data-app="stitchm8"],
  :root:not([data-theme="light"])[data-app="stitchm8"] { --deep: #9BAAC9; --action: #9BAAC9; --base: #9BAAC9; }
  /* Cards carry their own [data-app]; in dark theme their ground must go dark
     too, or the wordmark's dark M8 token lands on a light card - measured at
     3.22:1, which is the bug this replaces. */
  :root:not([data-theme="light"]) [data-app] {
    --ground: #201C15; --tint: #221E17; --lift: #2B2519;
  }
  :root:not([data-theme="light"]) [data-app="quiltm8"] { --deep: #D69A8E; --action: #D69A8E; --base: #D69A8E; }
  :root:not([data-theme="light"]) .btn.primary { color: #17150F; }
  :root:not([data-theme="light"]) { --shadow-1: 0 1px 3px rgb(0 0 0 / .35); --shadow-2: 0 6px 20px rgb(0 0 0 / .45); }
  :root:not([data-theme="light"]) .result .big { color: var(--ink); }
}
[data-theme="dark"] {
  --surface: #17150F;
  --surface-alt: #221E17;
  --ink: #F2ECE3;
  --muted: #B8AEA1;
  --outline: #7C7365;
  --outline-subtle: #322C24;
  --primary: #A8C0F0;
  --on-primary: #0D1B36;
  --primary-container: #2B3F66;
  --on-primary-container: #DCE4F5;
  --accent: #F0A090;
  --accent-container: #6B2618;
  --success: #88C9A5;
  --warning: #E0B357;
  --danger: #F09A9A;
  --m8: #CE6A50;
  --ground: #201C15; --tint: #221E17; --lift: #2B2519;
  --deep: #D69A8E; --action: #D69A8E; --base: #D69A8E;
  --field-bg: #221E17;
}
[data-theme="dark"] [data-app], [data-theme="dark"][data-app] {
  --ground: #201C15; --tint: #221E17; --lift: #2B2519;
}
[data-theme="dark"] [data-app="quiltm8"], [data-theme="dark"][data-app="quiltm8"] { --deep: #D69A8E; --action: #D69A8E; --base: #D69A8E; }
[data-theme="dark"] [data-app="knitm8"], [data-theme="dark"][data-app="knitm8"] { --deep: #89B398; --action: #89B398; --base: #89B398; }
[data-theme="dark"] [data-app="soapm8"], [data-theme="dark"][data-app="soapm8"] { --deep: #75B5AA; --action: #75B5AA; --base: #75B5AA; }
[data-theme="dark"] [data-app="stitchm8"], [data-theme="dark"][data-app="stitchm8"] { --deep: #9BAAC9; --action: #9BAAC9; --base: #9BAAC9; }
[data-theme="dark"] .btn.primary { color: #17150F; }
[data-theme="dark"] { --shadow-1: 0 1px 3px rgb(0 0 0 / .35); --shadow-2: 0 6px 20px rgb(0 0 0 / .45); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; margin: 0; line-height: 1.2; }
h1 { font-size: clamp(28px, 5vw, 40px); letter-spacing: -0.01em; }
h2 { font-size: clamp(22px, 3.5vw, 26px); }
h3 { font-size: 19px; }
p { margin: 0; }
a { color: var(--action); }
.num, .result .big, .trace td { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2.5px solid var(--action); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 14px; z-index: 10; }
.skip:focus { left: 8px; }

/* wordmark: weight is the primary channel, colour the secondary (BRAND.md §3) */
.wm { white-space: nowrap; letter-spacing: -0.005em; text-decoration: none; color: var(--ink); }
.wm span { font-weight: 400; }
.wm b { font-weight: 700; color: var(--m8); }

/* running-stitch divider — the one decorative motif */
.stitch {
  height: 2px; border: 0; margin: 0; opacity: 0.55;
  background: repeating-linear-gradient(90deg, var(--outline) 0 10px, transparent 10px 18px);
}

/* header / footer */
.shead nav { display: flex; align-items: center; gap: 20px; padding: 14px 0; flex-wrap: wrap; }
.shead .wm.home { font-size: 21px; }
.shead .wm.section { font-size: 18px; opacity: 0.9; }
.shead .spacer { flex: 1; }
.shead a:not(.wm) { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15.5px; padding: 6px 2px; }
.shead a:not(.wm):hover { color: var(--action); }
.theme-toggle { background: none; border: 1.5px solid var(--outline); color: var(--ink);
  border-radius: 8px; padding: 4px 9px; font-size: 15px; cursor: pointer; }
.sfoot { padding: 26px 0 36px; color: var(--muted); font-size: 14.5px; }
.sfoot p { margin: 0 0 8px; }
.sfoot .wm { font-weight: 600; }
.sfoot .seed { font-size: 13.5px; opacity: 0.9; }

/* hero */
.hero { background: linear-gradient(180deg, var(--ground), var(--surface)); }
.hero .wrap { padding: 52px 20px 46px; display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.hero .copy { flex: 1 1 340px; max-width: 640px; min-width: 0; }
.matnote { color: var(--muted); font-size: 14.5px; max-width: 46ch; }
.hero .promise { font-size: 20px; margin: 14px 0 6px; max-width: 50ch; }
.hero .sub { color: var(--muted); max-width: 54ch; margin-top: 6px; }
.hero .mark { flex: none; }
.facts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 0;
  font-size: 15px; color: var(--muted); margin: 14px 0 20px; }
.facts b { color: var(--ink); font-weight: 600; }
.facts .dot { margin: 0 10px; color: var(--outline); }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* the mark assembles once — four blades, 250ms steps, stilled for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .mark .blade { opacity: 0; transform: scale(0.6); transform-origin: 54px 53px;
    animation: blade-in 250ms ease-out forwards; }
  .mark .blade:nth-child(2) { animation-delay: 100ms; }
  .mark .blade:nth-child(3) { animation-delay: 200ms; }
  .mark .blade:nth-child(4) { animation-delay: 300ms; }
  @keyframes blade-in { to { opacity: 1; transform: scale(1); } }
}

/* buttons, badges, chips */
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px;
  padding: 12px 20px; font-size: 16.5px; font-weight: 600; text-decoration: none;
  border: 0; cursor: pointer; font-family: inherit; }
.btn.primary { background: var(--action); color: #fff; }
.btn.ghost { background: transparent; color: var(--action); box-shadow: inset 0 0 0 1.5px var(--action); }
.chip { display: inline-block; border-radius: 999px; padding: 2px 11px; font-size: 13px;
  font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.chip.est { background: var(--accent-container); color: var(--ink); }
.chip.free { background: var(--primary-container); color: var(--on-primary-container); }
.chip.mat { background: var(--tint); color: var(--deep); box-shadow: inset 0 0 0 1px var(--outline-subtle); }
.chip.cat { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--outline); }
.lock { font-size: 13.5px; color: var(--muted); }

/* sections */
section.band { padding: 38px 0 42px; }
section.band.tinted { background: var(--tint); }
section.band.ground { background: var(--ground); }
.section-intro { color: var(--muted); margin: 8px 0 22px; max-width: 66ch; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 860px) { .cols2 { grid-template-columns: 1fr; } }
/* a grid child's min-width defaults to auto, and a wide trace table would
   force the page past 320px; the trace scrolls inside itself instead */
.cols2 > *, .calc > * { min-width: 0; }

/* app cards (home, /apps/) */
.appgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.appcard { border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.appcard .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.appcard .head .chip { margin-left: auto; }
.appcard h3 { font-size: 20px; }
.appcard p { color: var(--muted); font-size: 15.5px; }
.appcard .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.appcard a.cover { color: inherit; text-decoration: none; font-weight: inherit; }
.spectrum { display: grid; grid-template-columns: repeat(4, 1fr); height: 10px; }

/* stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stat { background: var(--surface-alt); border-radius: 12px; padding: 16px 18px; }
.stat .n { font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--muted); font-size: 14.5px; }

/* tool grid */
.toolgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tool { background: var(--surface-alt); border-radius: 13px; padding: 16px 16px 14px;
  display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
a.tool:hover { outline: 1.5px solid var(--action); }
.tool svg { width: 30px; height: 30px; color: var(--base); flex: none; }
.tool .q { font-weight: 600; font-size: 16.5px; }
.tool .a { color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.tool .row { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }

/* calculator */
.calc { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 30px; align-items: start; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.field label small { font-weight: 400; color: var(--muted); }
.field .in { display: flex; align-items: center; border: 1.5px solid var(--outline);
  border-radius: 10px; background: var(--field-bg); }
.field input, .field select { border: 0; background: none; color: var(--ink); font: inherit;
  font-size: 18px; font-variant-numeric: tabular-nums; padding: 12px 14px; width: 100%; min-width: 0; }
.field input:focus, .field select:focus { outline: none; }
.field .in:focus-within { outline: 2.5px solid var(--action); outline-offset: 1px; }
.field .unit { color: var(--muted); font-size: 15px; padding-right: 14px; white-space: nowrap; }
.field .err { color: var(--danger); font-size: 14px; margin-top: 4px; display: none; }
.field.invalid .in { border-color: var(--danger); }
.field.invalid .err { display: block; }
.advanced { margin: 10px 0 0; }
.advanced summary { color: var(--muted); font-size: 14.5px; cursor: pointer; }
.advanced[open] summary { margin-bottom: 10px; }
.unit-toggle { display: inline-flex; border: 1.5px solid var(--outline); border-radius: 9px;
  overflow: hidden; margin-bottom: 16px; }
.unit-toggle button { border: 0; background: none; color: var(--muted); font: inherit;
  font-size: 14.5px; font-weight: 600; padding: 7px 14px; cursor: pointer; }
.unit-toggle button[aria-pressed="true"] { background: var(--action); color: #fff; }

.result { background: var(--tint); border-radius: 14px; padding: 20px 24px;
  border-left: 5px solid var(--action); }
.result .you { font-size: 13.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--deep); }
.result .big { font-size: 38px; font-weight: 600; line-height: 1.15; }
.result .sub { color: var(--muted); font-size: 16px; }
.result .sub b { color: var(--ink); }
.result .more { color: var(--muted); font-size: 14.5px; margin-top: 10px; }
/* long detail labels must be allowed to wrap, or one of them decides the
   width of the whole page on a 320px phone */
.result .more span span { white-space: normal; }
.warnbox { border-radius: 10px; padding: 10px 14px; font-size: 14.5px; margin-top: 10px; }
.warnbox.caution { background: var(--accent-container); }
.warnbox.info { background: var(--surface-alt); color: var(--muted); }

.explain summary { font-weight: 600; color: var(--action); cursor: pointer; margin-top: 14px; }
.trace { background: var(--surface-alt); border-radius: 12px; padding: 14px 18px;
  font-size: 15.5px; margin-top: 10px; overflow-x: auto; }
.trace table { border-collapse: collapse; width: 100%; }
.trace td { padding: 4px 10px 4px 0; vertical-align: top; }
.trace td:first-child { color: var(--muted); width: 26px; }
.trace td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.trace .assume { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--outline);
  color: var(--muted); font-size: 14px; }

/* side cards on calculator pages */
.sidecard { background: var(--surface-alt); border-radius: 14px; padding: 20px 22px; margin-bottom: 14px; }
.sidecard.ground { background: var(--ground); }
.sidecard h2 { font-size: 19px; margin-bottom: 8px; }
.sidecard p, .sidecard li { color: var(--muted); font-size: 15px; }
.sidecard ul { margin: 8px 0 0; padding-left: 20px; }

/* screenshots gallery */
.gallery { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 4px 14px; }
.shot { flex: none; scroll-snap-align: start; width: min(280px, 78vw); }
.shot img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--outline-subtle);
  display: block; }
.shot figcaption { font-size: 14px; color: var(--muted); padding: 8px 4px 0; }

/* FAQ */
.faq-list { max-width: 74ch; }
.faq-item { border-bottom: 1px solid var(--outline-subtle); }
.faq-item summary { font-weight: 600; font-size: 17px; padding: 14px 0; cursor: pointer;
  list-style-position: outside; }
.faq-item p { color: var(--muted); padding: 0 0 16px; max-width: 68ch; }

/* prose pages (privacy, imprint, how-to text) */
.prose { max-width: 74ch; }
.prose h2 { margin: 26px 0 8px; }
.prose h3 { margin: 20px 0 6px; }
.prose p, .prose li { color: var(--muted); margin-bottom: 10px; }
.prose strong { color: var(--ink); }
.callout { background: var(--accent-container); border-radius: 12px; padding: 14px 18px;
  margin: 14px 0; font-size: 15.5px; }
.callout b { display: inline-block; }

/* breadcrumbs */
.crumbs { font-size: 13.5px; color: var(--muted); margin: 22px 0 8px; }
.crumbs a { color: var(--muted); }

/* page scaffolding */
.page-head { padding: 10px 0 6px; }
.page-head .lede { color: var(--muted); margin: 10px 0 0; max-width: 66ch; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .shead, .sfoot, .theme-toggle, .cta-row,   .stitch { display: none; }
  a { color: inherit; text-decoration: none; }
}


/* ===================================================================
   Everything below replaces a style="" attribute. The site ships a
   strict Content-Security-Policy with no 'unsafe-inline', which drops
   style attributes outright - so an inline colour is not a shortcut
   here, it is an invisible element on the deployed host.
   =================================================================== */

/* the craft-colour strip: one class per app, in family order */
.spectrum { display: grid; grid-template-columns: repeat(4, 1fr); height: 10px; }
.spectrum i { display: block; }
.spectrum .s-quiltm8  { background: linear-gradient(90deg, #F1DCCB, #AF5240); }
.spectrum .s-knitm8   { background: linear-gradient(90deg, #D5E7DB, #4F7A5E); }
.spectrum .s-soapm8   { background: linear-gradient(90deg, #D2EAE6, #41796F); }
.spectrum .s-stitchm8 { background: linear-gradient(90deg, #D2DAEA, #4A5E88); }

/* app cards take their colour from their own [data-app] scope */
.appcard { background: var(--ground); box-shadow: var(--shadow-1); }
.appcard .head { flex-wrap: nowrap; align-items: flex-start; }
.appcard .head h3 { min-width: 0; }
.appcard .head .chip { flex: none; }
.appcard h3 .wm span { color: var(--ink); }
.appcard p { color: var(--muted); }
.appcard .proof { font-size: 14.5px; color: var(--deep); font-weight: 600; }
.appcard.rich { grid-column: span 2; }
@media (max-width: 700px) { .appcard.rich { grid-column: auto; } }
.appcard .more { margin-top: auto; font-weight: 600; }
.fifth { margin-top: 16px; color: var(--muted); max-width: 60ch; }

/* stat band - the zero leads, and each number says when it was counted */
.stat.lead { background: var(--primary-container); color: var(--on-primary-container); }
.stat.lead .l { color: var(--on-primary-container); }
.stat .when { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.stat.lead .when { color: var(--on-primary-container); opacity: .85; }

/* hero: the working calculator sits beside the copy */
.hero .proofcard { flex: 0 1 340px; background: var(--ground); border-radius: var(--radius-l);
  padding: 18px 20px; box-shadow: var(--shadow-1); min-width: 0; }
.hero .proofcard h2 { font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--deep); }
.hero .proofcard .field { margin-bottom: 10px; }
.hero .proofcard .result { padding: 14px 16px; margin-top: 12px; }
.hero .proofcard .result .big { font-size: 30px; }
.hero .proofcard .seemore { display: inline-block; margin-top: 10px; font-weight: 600; font-size: 15px; }
.hero .mark { flex: none; }

/* maker's note and the check-us block */
.note-card { background: var(--surface-alt); border-radius: var(--radius-l); padding: 22px 24px;
  max-width: 62ch; }
.note-card h2 { font-size: 20px; margin-bottom: 8px; }
.note-card p { color: var(--muted); }

/* small utilities, each replacing a repeated inline style */
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 14px; } .mt-3 { margin-top: 22px; }
.mb-2 { margin-bottom: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.cat-head { margin: 18px 0 12px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.measure { max-width: 66ch; }
.plain { background: var(--surface); }
.yield-fig { width: 100%; margin-top: 10px; }
.yield-fig.tall { max-width: 300px; }
.figure-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.figure-head .n { font-size: 24px; font-weight: 600; color: var(--deep);
  font-variant-numeric: tabular-nums; }
.side-note { color: var(--muted); font-size: 14.5px; margin-top: 8px; }

/* --- accessibility: target sizes (WCAG 2.2 2.5.8) --- */
.sfoot a, .crumbs a { display: inline-block; padding-block: 6px; }
.theme-toggle { min-width: 44px; min-height: 44px; display: inline-flex;
  align-items: center; justify-content: center; }
.explain summary, .advanced summary, .faq-item summary { padding-block: 10px; }
.shead a:not(.wm) { padding-block: 10px; }

/* --- contrast: links on tinted grounds need the text-grade step --- */
.band.tinted a:not(.btn):not(.chip), .band.ground a:not(.btn):not(.chip),
.sidecard a, .appcard a.more, .result a { color: var(--deep); }
.unit-toggle button[aria-pressed="true"] { background: var(--action); color: #fff; }
[data-theme="dark"] .unit-toggle button[aria-pressed="true"],
[data-theme="dark"] .btn.primary { color: #17150F; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .unit-toggle button[aria-pressed="true"] { color: #17150F; }
}

/* --- screenshot gallery: the UA's figure margin hid six of seven --- */
.shot { margin: 0; }
.gallery { scroll-padding-left: 20px; }

/* --- type scale --- */
@media (min-width: 768px) { body { font-size: 18px; } }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
/* German compounds are longer than any English word on this page and ran
   straight out of the column at 1200px. `hyphens` needs the lang attribute the
   layout already sets, and `break-word` is the floor under any language we have
   not measured yet. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }

/* ===================================================================
   Motion. Every rule explains or acknowledges something; nothing loops,
   nothing moves on scroll but a gentle draw, nothing runs at all when
   the system asks for less.
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .btn, .appcard, a.tool, .theme-toggle, .unit-toggle button, .shot img {
    transition: transform var(--t-ack) var(--ease-out),
                box-shadow var(--t-ack) var(--ease-out),
                border-color var(--t-ack) var(--ease-out),
                background-color var(--t-ack) var(--ease-out);
  }
  .btn:hover, .btn:focus-visible { transform: translateY(-1px); }
  .appcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
  a.tool:hover { box-shadow: inset 0 0 0 1.5px var(--base); }

  /* the mark turns once, on request - a pinwheel that pinwheels */
  .mark { transition: transform var(--t-settle) var(--ease-out); }
  .mark:hover { transform: rotate(90deg); }

  /* the answer settles when it changes: your typing did this */
  .result .big.fresh { animation: settle 180ms var(--ease-out); }
  @keyframes settle { from { opacity: .35; transform: scale(1.02); } }

  /* the working reveals as a sequence, because that is what it is */
  details[open] .trace tbody tr { animation: rise var(--t-move) var(--ease-out) backwards; }
  .trace tbody tr:nth-child(2) { animation-delay: 30ms; }
  .trace tbody tr:nth-child(3) { animation-delay: 60ms; }
  .trace tbody tr:nth-child(4) { animation-delay: 90ms; }
  .trace tbody tr:nth-child(5) { animation-delay: 120ms; }
  .trace tbody tr:nth-child(6) { animation-delay: 150ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(4px); } }

  details[open] > *:not(summary) { animation: rise var(--t-move) var(--ease-out); }
  .theme-toggle svg { transition: opacity var(--t-move) var(--ease-out); }

  /* the seam sews itself in, once, where the browser can do it for free */
  @supports (animation-timeline: view()) {
    hr.stitch { background-size: 0% 100%; background-repeat: no-repeat;
      animation: stitch-in linear both; animation-timeline: view();
      animation-range: entry 0% entry 60%; }
    @keyframes stitch-in { to { background-size: 100% 100%; } }
  }
}

/* free polish where supported, a no-op everywhere else */
@view-transition { navigation: auto; }

/* the last few utility classes the templates ask for */
.trace.wide { width: 100%; }
.wm.strong { font-weight: 600; }
.hint { color: var(--muted); font-size: 14px; margin-top: 4px; }
.formhint { color: var(--muted); font-size: 14.5px; margin: 10px 0 0; }
.field .lbl { display: block; font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.yesno { display: inline-flex; border: 1.5px solid var(--outline); border-radius: 9px; overflow: hidden; }
.yesno button { border: 0; background: none; color: var(--muted); font: inherit;
  font-size: 15px; font-weight: 600; padding: 10px 20px; min-height: 44px; cursor: pointer; }
.yesno button[aria-pressed="true"] { background: var(--action); color: #fff; }
[data-theme="dark"] .yesno button[aria-pressed="true"] { color: #17150F; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .yesno button[aria-pressed="true"] { color: #17150F; }
}
.result.stale { opacity: .55; }
.result.stale::after { content: "waiting for a number it can use"; display: block;
  margin-top: 8px; font-size: 14px; color: var(--muted); }
.calc.mini { display: block; }
.calc.mini .field { margin-bottom: 10px; }

/* the header at phone width: the wordmark takes the first line, the links and
   the theme control share the second, and nothing is stranded on a row of its own */
@media (max-width: 700px) {
  .shead nav { gap: 8px 16px; padding: 12px 0 10px; }
  .shead .wm.home { flex: 1 1 100%; }
  .shead .wm.section { display: none; }
  .shead .spacer { display: none; }
  .shead a:not(.wm) { font-size: 15.5px; }
  .shead .theme-toggle { margin-left: auto; }
}

/* the hero's calculator is a taste, not the full instrument: no unit switch,
   no working, and none of the notes that belong on the calculator page */
.calc.mini .warnbox, .calc.mini [data-out-warnings] { display: none; }
.hero .proofcard h2 { margin-bottom: 12px; }
.hero .proofcard .result { margin-top: 14px; }

/* Language switcher and the note that says a translation is unreviewed.
   Both live in the footer: a switcher at the top of the page competes with the
   navigation for the same glance, and nobody looks for it until they have
   decided the page is not in their language. */
.langs { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .1rem .55rem;
  align-items: baseline; font-size: .86rem; }
.langs span { color: var(--muted); }
.langs a { color: var(--muted); text-decoration: none; padding: .1rem 0;
  border-bottom: 1px solid transparent; }
.langs a:hover, .langs a:focus-visible { color: var(--ink); border-bottom-color: var(--outline); }
.langs a[aria-current="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--outline-subtle); }
.unreviewed { margin-top: .55rem; max-width: 62ch; font-size: .8rem; line-height: 1.5;
  color: var(--muted); }