*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font: 400 var(--fs-md)/1.55 var(--f-sans);
  font-stretch: var(--stretch-body);
  font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 0; padding: var(--sp-3); background: var(--c-face); }
.skip:focus { left: var(--sp-3); z-index: 30; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }
.cap { display: inline-block; }
.cap::first-letter { text-transform: uppercase; }
.muted { color: var(--c-ink-2); font-weight: 400; }
[hidden] { display: none !important; }

/* species icons (design note 13): one schematic drawing per species, in the mark's line, masked so
   it takes the text colour and the dark scheme with it. Decoration: the cut's name is beside it. */
.sp { display: inline-block; flex: none; width: 1.2em; height: 1.2em; margin-right: .35em; vertical-align: -.24em; background-color: var(--c-ink-2); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.sp--beef { -webkit-mask-image: url(species/beef.svg); mask-image: url(species/beef.svg); }
.sp--pork { -webkit-mask-image: url(species/pork.svg); mask-image: url(species/pork.svg); }
.sp--poultry { -webkit-mask-image: url(species/poultry.svg); mask-image: url(species/poultry.svg); }
.sp--fish { -webkit-mask-image: url(species/fish.svg); mask-image: url(species/fish.svg); }
.named { display: flex; align-items: flex-start; }
.named .sp { margin-top: .12em; vertical-align: 0; }

/* smoker temperature ramp, one custom property per temperature */
.edge--225, .swatch--225, .d-ring--225 { --ramp: var(--c-t225); }
.edge--250, .swatch--250, .d-ring--250 { --ramp: var(--c-t250); }
.edge--275, .swatch--275, .d-ring--275 { --ramp: var(--c-t275); }
.edge--300, .swatch--300, .d-ring--300 { --ramp: var(--c-t300); }

/* shell */
.top { position: relative; z-index: 10; border-bottom: 1px solid var(--c-line); }
.top__in, .crumbs, .wrap, .foot__in { max-width: var(--measure); margin: 0 auto; padding: 0 var(--sp-4); }
.top__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--sp-4); padding-block: var(--sp-2); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--hit); font-weight: 750; font-stretch: var(--stretch-plate); letter-spacing: -.01em; text-decoration: none; }
.brand__mark { width: 30px; height: 30px; flex: none; }
/* the wordmark's three words, told apart by colour (design note 10): ink, the needle's red for the
   word the mark's needle stands for, and the second ink */
.bw--1 { color: var(--c-ink); }
.bw--2 { color: var(--c-needle); }
.bw--3 { color: var(--c-ink-2); }
.mk-bezel { fill: var(--c-ink); }
.mk-face { fill: var(--c-face); }
.mk-tick { stroke: var(--c-ink); stroke-width: 1.6; fill: none; }
.mk-arc { stroke: var(--c-t225); stroke-width: 2.6; fill: none; stroke-linecap: round; }
.mk-needle { stroke: var(--c-needle); stroke-width: 2.4; stroke-linecap: round; }
.mk-hub { fill: var(--c-ink); }

/* nav, with a submenu under the first two items (design note 5). Native <details>: it opens by
   click, Enter and Space with no script; site.js only closes the others, and closes on Escape
   and on a click outside. */
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-3); font-size: var(--fs-sm); }
.nav__item { display: flex; align-items: center; }
.nav__link { display: inline-flex; align-items: center; min-height: var(--hit); padding-inline: 2px; font-weight: 650; text-decoration: none; }
.nav__link:hover { text-decoration: underline; }
.sub { flex: none; }
.sub > summary { list-style: none; display: grid; place-items: center; width: 40px; min-height: var(--hit); cursor: pointer; border-radius: var(--radius-sm); color: var(--c-ink-2); }
.sub > summary::-webkit-details-marker { display: none; }
.sub > summary:hover, .sub[open] > summary { background: var(--c-sunk); color: var(--c-ink); }
.sub__chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sub[open] .sub__chev { transform: rotate(180deg); }
.sub__panel {
  position: absolute; left: var(--sp-4); right: var(--sp-4); top: calc(100% - 4px);
  background: var(--c-face); border-radius: var(--radius); box-shadow: var(--shadow-menu);
  padding: var(--sp-3); font-size: var(--fs-md);
}
/* Chrome still lays out a closed <details>' content inside a contained box, at a collapsed size;
   taking it out of layout keeps a closed menu from existing anywhere. */
.sub:not([open]) > .sub__panel { display: none; }
.sub__h { margin: 0 0 var(--sp-1); padding: 0 var(--sp-3); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-ink-2); }
.sub__panel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.sub__panel li a { display: flex; align-items: center; padding: 10px var(--sp-3); min-height: var(--hit); border-radius: var(--radius-sm); font-weight: 650; text-decoration: none; line-height: 1.5; }
.sub__panel li a:hover { background: var(--c-bg); }
.sub__panel a[aria-current="page"] { background: var(--c-bg); box-shadow: inset 4px 0 0 var(--c-needle); }
.sub__temps { grid-template-columns: repeat(4, 1fr) !important; }
.sub__temps a { text-align: center; font-weight: 800 !important; font-stretch: var(--stretch-plate); border-bottom: 4px solid var(--ramp); border-radius: var(--radius-sm) var(--radius-sm) 2px 2px !important; }
.sub__temps a[aria-current="page"] { box-shadow: none; background: var(--c-bg); }
.sub__all { display: flex; align-items: center; min-height: var(--hit); margin-top: var(--sp-2); padding: 0 var(--sp-3); border-top: 1px solid var(--c-line); font-weight: 700; }

.crumbs { padding: 0; }
.crumbs ol { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-4) 0; display: flex; flex-wrap: wrap; gap: 0 var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-2); }
.crumbs li + li::before { content: "/"; margin-right: var(--sp-1); color: var(--c-line-strong); }
.crumbs a { display: inline-block; padding-block: 6px; }

.wrap { padding-block: var(--sp-4) var(--sp-7); }
.h1 { margin: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-xl); line-height: 1.15; font-weight: 750; letter-spacing: -.015em; }
.h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); line-height: 1.25; font-weight: 700; }
.h2--quiet { font-size: var(--fs-md); }
.sect { margin-top: var(--sp-7); }
.lead { margin: 0 0 var(--sp-3); color: var(--c-ink-2); }

/* the answer: a gauge plate. No edge along its top (design note 6); the edge stays in the
   vocabulary for the current table row, the safety gap and the note. */
.plate {
  background: var(--c-face);
  border-radius: var(--radius);
  box-shadow: var(--shadow-face);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
}
.plate__ctx { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--c-ink-2); }
.plate__verb { font-weight: 400; }
.plate__time {
  margin: var(--sp-2) 0 var(--sp-4);
  display: flex; flex-direction: column; align-items: flex-start;
  font-stretch: var(--stretch-plate);
  line-height: .95;
}
.plate__lo, .plate__hi { font-size: var(--fs-plate); font-weight: 800; letter-spacing: -.035em; white-space: nowrap; }
.plate__time b, .plate__count b { font-weight: inherit; }
.plate__time i { font-style: normal; font-size: .42em; font-weight: 650; letter-spacing: 0; margin-left: .08em; color: var(--c-ink-2); }
.plate__hi { color: var(--c-needle); }
.plate__hi i { color: inherit; }
.plate__to { font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--c-ink-2); margin: var(--sp-2) 0 var(--sp-1); }
.plate__temps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.pt { background: var(--c-bg); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); }
.pt dt { font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--c-ink-2); }
.pt dd { margin: 2px 0 0; font-size: var(--fs-lg); font-weight: 750; font-stretch: var(--stretch-plate); line-height: 1.25; }
.pt dd.pt__sub { font-size: var(--fs-sm); font-weight: 600; font-stretch: var(--stretch-body); color: var(--c-ink-2); }
.pt--safe dd::before { content: ""; display: inline-block; width: 3px; height: .8em; margin-right: 6px; background: var(--c-needle); vertical-align: -.05em; }
.pt--warn { outline: 2px solid var(--c-needle); outline-offset: -2px; }
.pt dd.pt__cut { font-size: var(--fs-md); }
.pt dd.pt__cut a { font-weight: 750; }
.plate__count { margin: var(--sp-1) 0 var(--sp-3); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--sp-2); font-stretch: var(--stretch-plate); line-height: 1; }
.plate__count b { font-size: var(--fs-plate); font-weight: 800; letter-spacing: -.035em; }
.plate__count i { font-style: normal; font-size: var(--fs-lg); font-weight: 650; color: var(--c-ink-2); }
.plate__temps--four { grid-template-columns: repeat(4, 1fr); }
.plate__temps--four .pt { border-bottom: 4px solid var(--ramp); text-align: center; padding-inline: var(--sp-1); }
.pt__v { font-size: var(--fs-lg); font-weight: 800; font-stretch: var(--stretch-plate); white-space: nowrap; }

/* the dial */
.dial { margin-top: var(--sp-5); }
.dial figure, [data-fig] { margin: 0; }
.dial svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.d-face { fill: var(--c-face); stroke: var(--c-ink); stroke-width: 5; }
.d-tick { stroke: var(--c-line-strong); stroke-width: 1.2; }
.d-tick--major { stroke: var(--c-ink); stroke-width: 2.4; }
.d-hour, .d-span { font: 650 11px var(--f-sans); fill: var(--c-ink-2); font-stretch: var(--stretch-plate); }
.d-hour { paint-order: stroke; stroke: var(--c-face); stroke-width: 4px; stroke-linejoin: round; }
.d-span { fill: var(--c-ink); }
.d-track { fill: none; stroke: var(--c-line); stroke-width: 1; }
.d-ring, .d-spread { fill: none; stroke-width: 15; stroke: var(--ramp); }
.d-spread { stroke-opacity: .28; }
.d-temp { font: 700 11px var(--f-sans); fill: var(--c-ink-2); paint-order: stroke; stroke: var(--c-face); stroke-width: 4px; stroke-linejoin: round; }
.d-temp.is-current { fill: var(--c-ink); font-weight: 800; }
.d-needle { transform-origin: 160px 164px; transform: rotate(var(--a)); }
.d-needle path { stroke: var(--c-needle); stroke-width: 3.2; stroke-linecap: round; }
.d-needle circle { fill: var(--c-ink); stroke: var(--c-needle); stroke-width: 2.5; }

/* inputs (§6 Recompute): every home and cut page in wave 1 */
.inputs { display: grid; gap: var(--sp-4); background: var(--c-face); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-face); }
.field { display: grid; gap: var(--sp-1); }
.field__l { font-size: var(--fs-sm); font-weight: 650; }
.field__in { display: flex; align-items: center; gap: var(--sp-2); }
.field input[type=text], .field select {
  min-height: var(--hit); width: 100%; max-width: 12rem; padding: 0 var(--sp-3);
  font: 700 var(--fs-lg) var(--f-sans); color: var(--c-ink); background: var(--c-bg);
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm);
}
.field--wide select { max-width: none; font-size: var(--fs-md); }
.field [data-stepper] input[type=text] { width: 5.5rem; text-align: center; padding: 0 var(--sp-2); }
.step {
  display: grid; place-items: center; flex: none; width: var(--hit); height: var(--hit); padding: 0;
  color: var(--c-ink); background: var(--c-bg); border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm); cursor: pointer; touch-action: manipulation;
}
/* The − and + are two bars drawn in CSS, stacked in one grid cell; the name is the aria-label. */
.step::before, .step[data-step-by="1"]::after { content: ""; grid-area: 1 / 1; width: 14px; height: 2px; border-radius: 1px; background: currentColor; }
.step[data-step-by="1"]::after { width: 2px; height: 14px; }
@media (forced-colors: active) { .step::before, .step::after { forced-color-adjust: none; background: ButtonText; } }
.step:hover:not(:disabled) { border-color: var(--c-ink); }
.step:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.step:disabled { color: var(--c-ink-2); opacity: .45; cursor: default; }
.field__u { font-weight: 650; color: var(--c-ink-2); }
.field__hint { font-size: var(--fs-sm); color: var(--c-ink-2); }
.field__link a { display: inline-flex; align-items: center; min-height: var(--hit); font-weight: 700; }
.field input[aria-invalid="true"] { border: 2px solid var(--c-needle); }
.field:has(input[aria-invalid="true"]) .field__hint { color: var(--c-needle); font-weight: 650; }
.seg { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); }
.seg legend { padding: 0; margin-bottom: var(--sp-1); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: grid; place-items: center; min-height: var(--hit); border-radius: var(--radius-sm);
  background: var(--c-bg); font-weight: 700; font-size: var(--fs-sm); border: 1px solid var(--c-line);
  border-bottom: 4px solid var(--ramp);
}
.seg input:checked + span { background: var(--c-ink); color: var(--c-face); border-color: var(--c-ink); }
.seg input:focus-visible + span { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* tables */
table { width: 100%; border-collapse: collapse; background: var(--c-face); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-face); }
caption { caption-side: bottom; text-align: left; padding-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-2); }
th, td { padding: var(--sp-3); text-align: left; border-bottom: 1px solid var(--c-line); vertical-align: top; }
thead th { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-2); background: var(--c-sunk); }
tbody tr:last-child > * { border-bottom: 0; }
.n { text-align: right; }
.tt th { white-space: nowrap; }
.tt td { font-weight: 700; font-stretch: var(--stretch-plate); }
tr.is-current > * { background: color-mix(in srgb, var(--c-needle) 8%, var(--c-face)); }
tr.is-current > th:first-child { box-shadow: inset 4px 0 0 var(--c-needle); }
.now { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-needle); margin-left: var(--sp-1); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; background: var(--ramp); }
.wt th, .wt td { padding: var(--sp-2) 6px; font-size: var(--fs-sm); }
.wt thead th { font-size: 11px; letter-spacing: .02em; text-transform: none; white-space: nowrap; }
.wt thead .swatch { width: 8px; height: 8px; margin-right: 3px; }
.wt th:first-child { padding-left: var(--sp-3); white-space: nowrap; font-weight: 700; }
.wt td { line-height: 1.25; }
.wt .lo, .wt .hi, .cc .lo, .cc .hi { display: block; white-space: nowrap; }
.wt .hi, .cc .hi { color: var(--c-ink-2); }

/* Under 600px a row of five columns does not fit: each weight becomes a 2x2 block of its four
   temperatures, labelled from the cell's own data-t. */
@media (max-width: 599px) {
  .wt, .wt tbody { display: block; }
  .wt caption { display: block; }
  .wt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wt tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--c-line); }
  .wt tbody tr:last-child { border-bottom: 0; }
  .wt th, .wt td { border-bottom: 0; }
  .wt th[scope=row] { grid-column: 1 / -1; padding: var(--sp-3) var(--sp-3) 0; font-size: var(--fs-md); }
  .wt td { text-align: left; padding: var(--sp-2) var(--sp-3); }
  .wt td::before { content: attr(data-t); display: block; font-size: 11px; font-weight: 700; color: var(--c-ink-2); letter-spacing: .04em; }
  .wt .lo, .wt .hi { display: inline; }
  .wt tr.is-current > * { background: none; }
  .wt tr.is-current > th:first-child { box-shadow: none; }
  .wt tr.is-current { background: color-mix(in srgb, var(--c-needle) 8%, var(--c-face)); box-shadow: inset 4px 0 0 var(--c-needle); }
}

/* the hub chart: a true table from 1000px; below it every cut is a card of labelled cells, four
   temperatures and the two doneness figures, six across from 600px and two across under it. */
.grp th .sp { background-color: currentColor; }
.grp th { padding: var(--sp-2) var(--sp-3); background: var(--c-sunk); font-size: var(--fs-xs); font-weight: 750; text-transform: uppercase; letter-spacing: .1em; color: var(--c-ink-2); }
.cc__cut, .th1 .cc__cut { font-weight: 700; }
.cc__cut a { font-weight: 750; }
.cc__cut small { display: block; font-weight: 500; font-size: var(--fs-xs); color: var(--c-ink-2); }
.cc td { font-size: var(--fs-sm); line-height: 1.3; }
.cc__t .lo { font-weight: 700; }
.cc__f { font-weight: 700; white-space: nowrap; }
.cc__f--safe::before { content: ""; display: inline-block; width: 3px; height: .8em; margin-right: 5px; background: var(--c-needle); vertical-align: -.05em; }
.cc__f--safe.is-below { color: var(--c-needle); }
@media (max-width: 999px) {
  .cc, .cc tbody { display: block; }
  .cc caption { display: block; padding: 0 0 var(--sp-2); }
  .cc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cc tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--c-line); }
  .cc tr.grp, .cc tr.grp th { display: block; }
  .cc th, .cc td { border-bottom: 0; }
  .cc .cc__cut { grid-column: 1 / -1; padding: var(--sp-3) var(--sp-3) 0; font-size: var(--fs-md); }
  .cc .cc__cut small { display: inline; margin-left: var(--sp-1); }
  .cc td { text-align: left; padding: var(--sp-2) var(--sp-3); }
  .cc td::before { content: attr(data-t); display: block; font-size: 11px; font-weight: 700; color: var(--c-ink-2); letter-spacing: .04em; }
  .cc td.cc__f--safe::before { display: block; width: auto; height: auto; margin: 0; background: none; }
  .cc .lo, .cc .hi { display: inline; }
}
@media (min-width: 600px) and (max-width: 999px) {
  .cc tr { grid-template-columns: repeat(6, 1fr); }
}

/* the temp_hub chart: one time per cut, with a bar on the dial's scale */
.th1 th, .th1 td { padding: var(--sp-3) var(--sp-2); }
.th1 th:first-child { padding-left: var(--sp-3); width: 34%; }
.th1 td:last-child { padding-right: var(--sp-3); white-space: nowrap; font-weight: 700; }
.th1__f small { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 650; color: var(--c-ink-2); }
.th1__f small.is-below { color: var(--c-needle); }
.th1__t { font-weight: 700; font-size: var(--fs-sm); line-height: 1.3; }
.bar { display: flex; height: 8px; margin-top: 6px; border-radius: 4px; overflow: hidden; background: var(--c-sunk); }
.bar__lo { background: var(--ramp); }
.bar__hi { background: var(--ramp); opacity: .32; }

/* reference: the FDA chart as the answer plate */
.plate--table { padding: var(--sp-4) 0 0; }
.plate--table .plate__ctx { padding: 0 var(--sp-4) var(--sp-3); }
.plate--table table { box-shadow: none; border-radius: 0 0 var(--radius) var(--radius); }
.sr th[scope=row] { font-weight: 600; font-size: var(--fs-sm); line-height: 1.35; }
.sr__t { font-size: var(--fs-lg); font-weight: 800; font-stretch: var(--stretch-plate); white-space: nowrap; }
.sr__t::before { content: ""; display: inline-block; width: 3px; height: .8em; margin-right: 6px; background: var(--c-needle); vertical-align: -.05em; }
.sr__r { font-weight: 650; white-space: nowrap; font-size: var(--fs-sm); }
.rows { display: grid; gap: var(--sp-3); }
.rowgrp { background: var(--c-face); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4) var(--sp-4); box-shadow: var(--shadow-face); }
.rowgrp__h { margin: 0 0 var(--sp-3); display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-md); line-height: 1.3; }
.rowgrp__t { font-weight: 800; font-stretch: var(--stretch-plate); white-space: nowrap; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips li { position: relative; display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 var(--sp-3) 0 var(--sp-2); border-radius: 999px; background: var(--c-bg); font-weight: 650; }
.chips a { text-decoration: none; }
.chips a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.chips li:hover { box-shadow: inset 0 0 0 2px var(--c-ink); }
.chips li:focus-within { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.chips a:focus-visible { outline: none; }
.note { margin: var(--sp-6) 0 0; padding: var(--sp-3) var(--sp-4); background: var(--c-face); border-left: 6px solid var(--c-ink); border-radius: var(--radius-sm); }

/* doneness */
.probe { margin-bottom: var(--sp-3); }
.probe svg { display: block; width: 100%; max-width: 480px; height: auto; overflow: visible; }
.probe__axis { stroke: var(--c-line-strong); stroke-width: 2; }
.probe__tick { stroke: var(--c-line-strong); stroke-width: 1; }
.probe__pull { fill: var(--c-ink); }
.probe__safe { stroke: var(--c-needle); stroke-width: 3; stroke-linecap: round; }
.probe__t { font: 700 12px var(--f-sans); fill: var(--c-ink); font-stretch: var(--stretch-plate); }
.probe__t--safe { fill: var(--c-needle); }
.facts { margin: 0; display: grid; gap: 1px; background: var(--c-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-face); }
.facts div { background: var(--c-face); padding: var(--sp-3) var(--sp-4); display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--sp-3); }
.facts dt { font-weight: 650; color: var(--c-ink-2); font-size: var(--fs-sm); padding-top: 2px; }
.facts dd { margin: 0; font-weight: 750; font-stretch: var(--stretch-plate); }
.facts small { display: block; margin-top: 2px; font-weight: 400; font-stretch: var(--stretch-body); font-size: var(--fs-sm); color: var(--c-ink-2); }
.facts dd.facts__say { font-weight: 650; font-stretch: var(--stretch-body); }
.facts dd.facts__say small { margin-top: var(--sp-2); }
.facts--safe dt { color: var(--c-needle); }
.done__why { margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4); background: var(--c-face); border-left: 6px solid var(--c-ink); border-radius: var(--radius-sm); }
@media (max-width: 479px) { .facts div { grid-template-columns: 1fr; gap: var(--sp-1); } }
.gap { background: var(--c-face); border-left: 6px solid var(--c-needle); border-radius: var(--radius-sm); padding: var(--sp-4); }
.gap p { margin: 0; }

/* folds: the source spread and the attributions, closed by default (design note 4) */
.fold { background: var(--c-face); border-radius: var(--radius-sm); }
.fold > summary { list-style: none; display: flex; align-items: center; gap: var(--sp-2); min-height: var(--hit); padding: var(--sp-2) var(--sp-4); cursor: pointer; font-weight: 650; font-size: var(--fs-sm); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-right: 2px; }
.fold[open] > summary::before { transform: rotate(45deg); }
.fold > .lead, .fold > .spread, .fold > ul { padding: 0 var(--sp-4) var(--sp-4); }
.spread { list-style: none; margin: 0; display: grid; gap: var(--sp-2); }
.spread li { background: var(--c-bg); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); display: grid; gap: 2px; }
.spread__who { font-weight: 750; }
.spread__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.spread__pull { font-size: var(--fs-sm); font-weight: 650; white-space: nowrap; }
.spread__v { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-2); }
.spread__v dd { margin: 0; color: var(--c-ink); font-variant-numeric: tabular-nums; }

/* link lists: the whole tile is the link */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.tile { position: relative; display: grid; align-content: start; gap: 2px; min-height: 64px; padding: var(--sp-3); background: var(--c-face); border-radius: var(--radius-sm); box-shadow: 0 1px 2px rgba(19,23,26,.08); }
.tile:hover { box-shadow: inset 0 0 0 2px var(--c-ink); }
.tile:focus-within { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.tile a { text-decoration: none; }
.tile a:focus-visible { outline: none; }
.tile a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tile__n { display: flex; align-items: flex-start; font-weight: 700; line-height: 1.2; }
.tile__n .sp { margin-top: -.05em; vertical-align: 0; }
.tile__t { font-size: var(--fs-sm); color: var(--c-ink-2); }
.tiles__note { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--c-ink-2); }
.tiles__more { margin: var(--sp-3) 0 0; }
.tiles__more a { display: inline-flex; align-items: center; min-height: var(--hit); font-weight: 700; }
.tiles__more a::first-letter { text-transform: uppercase; }
.temps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.temps__a { display: grid; place-items: center; align-content: center; gap: 0; min-height: 64px; padding: var(--sp-2) var(--sp-1); background: var(--c-face); border-radius: var(--radius-sm); text-decoration: none; border-bottom: 4px solid var(--ramp, var(--c-ink)); text-align: center; }
.temps__a span { font-weight: 800; font-stretch: var(--stretch-plate); white-space: nowrap; }
.temps__a small { font-size: var(--fs-xs); color: var(--c-ink-2); line-height: 1.2; }
.temps__a:hover { box-shadow: inset 0 0 0 2px var(--c-ink); }

/* shared tail */
.prov__stamp { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-2); }
.prov ul { margin: 0; padding-left: var(--sp-6); font-size: var(--fs-sm); color: var(--c-ink-2); overflow-wrap: anywhere; }
.prov li + li { margin-top: var(--sp-2); }
.safety { margin: var(--sp-5) 0 0; padding: var(--sp-4); border: 2px solid var(--c-ink); border-radius: var(--radius-sm); font-weight: 650; }

/* static */
.prose { max-width: 38rem; }
.prose h2 { font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-2); }
.prose p { margin: 0 0 var(--sp-3); }

/* footer: the logo, one link group, one legal line (design notes 2 and 3) */
.foot { border-top: 1px solid var(--c-line); background: var(--c-sunk); }
.foot__in { padding-block: var(--sp-6); display: grid; gap: var(--sp-4); font-size: var(--fs-sm); }
.foot h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-ink-2); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
.foot li a { display: inline-flex; align-items: center; min-height: var(--hit); font-weight: 600; }
.foot__legal { margin: 0; color: var(--c-ink-2); }

/* 404 */
.dead { text-align: center; padding-block: var(--sp-6); }
.dead__dial { width: 120px; height: 120px; }
.dead__dial .d-face { stroke-width: 4; }
.d-needle--rest { transform: none; animation: none !important; }
.go { display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 var(--sp-5); border-radius: 999px; background: var(--c-needle); color: var(--c-on-needle); font-weight: 750; text-decoration: none; }

/* motion: the needle sweeps to the upper estimate while the rings draw; the submenu drops; the
   fold chevrons turn. All of it off under reduced motion; the answer itself never moves. */
@media (prefers-reduced-motion: no-preference) {
  .d-needle { animation: sweep var(--dur-sweep) var(--ease-sweep) 150ms both; transition: transform var(--dur-sweep) var(--ease-sweep); }
  .d-ring { animation: draw var(--dur-draw) var(--ease-sweep) both; }
  .sub[open] .sub__panel { animation: drop var(--dur-ui) ease-out; }
  .sub__chev, .fold > summary::before { transition: transform var(--dur-ui) ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@keyframes sweep { from { transform: rotate(0deg); } }
@keyframes draw { from { stroke-dasharray: 0 var(--d); } }
@keyframes drop { from { opacity: 0; transform: translateY(-4px); } }

@media (min-width: 720px) {
  .h1 { font-size: 2.25rem; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .wt th, .wt td { padding: var(--sp-3); font-size: var(--fs-md); }
  .wt thead th { font-size: var(--fs-xs); }
  .nav__item { position: relative; }
  .sub__panel { left: auto; right: 0; top: calc(100% + 2px); width: 22rem; }
  .sub__panel:has(.sub__temps) { width: 18rem; }
  .foot__in { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--sp-7); }
  .foot__legal { grid-column: 1 / -1; }
  .rows { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  :root { --measure: 62rem; }
  .wt .lo, .wt .hi { display: inline; }
  .wrap:has(> .dial) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-6); align-items: start; }
  .wrap:has(> .dial) > * { grid-column: 1 / -1; }
  .wrap:has(> .dial) > .plate { grid-column: 1; }
  .wrap:has(> .dial) > .dial { grid-column: 2; grid-row: span 3; margin-top: 0; }
  .wrap:has(> .dial) > [data-block="inputs"],
  .wrap:has(> .dial) > [data-block="temp_table"] { grid-column: 1; margin-top: var(--sp-5); }
}