/* concreteslabcalc.com — tokens and shared components.
   Palette is a site-survey kit: cured concrete, graphite, tape blade, chalk line.
   Yellow appears only on surfaces that MEASURE. Blue only where a DECISION is made. */

/* Self-hosted, latin subset, fetched by scripts/fetch_fonts.py. The mockup links these from
   Google Fonts for review only; rule 8 requires a build to make no third-party font request.

   The ranges are the clipped file's, not Archivo's full design space — declaring an axis wider
   than the file carries makes a browser clamp silently. scripts/fetch_fonts.py holds the pair. */
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(fonts/archivo-var-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-var-latin.woff2) format('woff2');
}

/* Bypass block, WCAG 2.4.1. Not drawn in the mockup, so it carries no class of its own and is
   selected by its target instead: an invented class would fail mockup_introduces_nothing. */
body > a[href="#main"] {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--surface);
  padding: 14px 18px; min-height: var(--tap); display: inline-flex; align-items: center;
  font: 600 1rem/1.2 var(--body); text-decoration: none;
}
body > a[href="#main"]:focus { left: 0; }

:root {
  /* colour */
  --ground:  #D9DEDD;   /* cured concrete, cool grey — page ground */
  --surface: #FBFCFB;   /* fresh screed — panels and cards */
  --ink:     #14181A;   /* graphite — all primary text */
  --slate:   #4F595C;   /* wet concrete — secondary text */
  --blade:   #F2C200;   /* tape blade — measurement surfaces ONLY */
  --chalk:   #17458C;   /* chalk line — decisions and links ONLY */
  /* derived */
  --gravel:  #98A2A2;
  --edge:    #C2C9C8;
  --edge-hi: #A9B2B1;
  --tint:    #F1F3F2;

  /* type */
  --display: Archivo, "Arial Narrow", Helvetica, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", Helvetica, sans-serif;

  /* measure */
  --gut: 16px;
  --chamfer: 15px;
  --tap: 48px;
  --anchor-h: 50px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.55 var(--body);
  /* reserves the anchor ad's height without waiting for script */
  padding-bottom: calc(var(--anchor-h) + 8px);
}
body.no-anchor { padding-bottom: 0; }

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

/* declared figure wrappers (data-fig): a <figure> carries a UA margin, and these
   wrap drawings whose position must not move */
figure { margin: 0; }
.fig { min-width: 0; }

a { color: var(--chalk); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* every hover state on the site eases: a surface that changes instantly has nothing for
   prefers-reduced-motion to switch off, which is how a design passes the rule by moving nothing */
a { transition: text-decoration-color .15s ease; }
a:hover { text-decoration-color: var(--blade); }

:focus-visible {
  outline: 3px solid var(--chalk);
  outline-offset: 2px;
  border-radius: 2px;
}
/* on graphite the chalk ring disappears; white keeps the rationing rule intact */
.topbar :focus-visible, .foot :focus-visible { outline-color: var(--surface); }

/* ---------- shell ---------- */

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gut); }

.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 26px; }
.cols > * { min-width: 0; }

.topbar {
  background: var(--ink);
  color: var(--surface);
  border-bottom: 4px solid var(--blade);
}
.topbar-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--surface); text-decoration: none;
  padding: 11px 0; min-height: var(--tap);
}
.brand-logo { width: 38px; height: 31px; flex: none; }
.brand-word {
  font-family: var(--display);
  font-variation-settings: "wdth" 112, "wght" 500;
  font-size: 1.16rem; letter-spacing: -0.01em; line-height: 1;
}
.brand-word b { font-variation-settings: "wdth" 112, "wght" 800; }

.nav { margin-left: auto; min-width: 0; max-width: 100%; }
/* wraps rather than scrolls: a header that captures a sideways gesture fights the page scroll */
.nav-list { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-list a {
  display: flex; align-items: center; min-height: var(--tap);
  padding: 12px 11px;
  color: #D9DEDD; text-decoration: none; white-space: nowrap;
  font-size: 0.9rem; font-weight: 600;
  border-bottom: 3px solid transparent;
}
.nav-list a { transition: color .15s ease, border-color .15s ease; }
.nav-list a:hover,
.nav-list a[aria-current="page"] { color: var(--surface); border-bottom-color: var(--blade); }

/* ---------- eyebrow / headings ---------- */

.eyebrow {
  font: 600 0.75rem/1 var(--body);
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--slate); margin: 0 0 10px;
}
.eyebrow--tick { display: flex; align-items: center; gap: 9px; }
.eyebrow--tick::before {
  content: ""; width: 22px; height: 8px; flex: none;
  background: repeating-linear-gradient(to right, var(--ink) 0 2px, transparent 2px 7px);
}

h1 {
  font-family: var(--display);
  font-variation-settings: "wdth" 118, "wght" 750;
  font-size: clamp(1.65rem, 5.6vw, 2.6rem);
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 0 12px;
}
h2 {
  font-family: var(--display);
  font-variation-settings: "wdth" 115, "wght" 700;
  font-size: clamp(1.25rem, 3.6vw, 1.7rem);
  line-height: 1.12; letter-spacing: -0.015em;
  margin: 0 0 14px;
}
h3 { font: 600 1.02rem/1.3 var(--body); margin: 0 0 6px; }
p { margin: 0 0 14px; }
.lede { font-size: 1.06rem; color: var(--slate); max-width: 56ch; }

.sect { margin: 0 0 34px; }
.sect-note { font-size: 0.9rem; color: var(--slate); margin: 10px 0 0; }
.sect-note a, .qa-a a, .lede a, .prose a, .answer-sub a { display: inline-block; padding: 11px 0; }

/* ---------- inputs: proposal A's arrangement, this site's skin ---------- */

.calc { margin: 0; }
.rig-grid {
  display: grid;
  /* Two by two at every width, including 360px. Never auto-fit: it collapsed to
     two columns at 360 and left the number field 28px wide between its steppers. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.field { min-width: 0; }
.field > label {
  display: block;
  font: 600 0.78rem/1.2 var(--body);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 7px;
}
.field .fhint {
  /* always its own line, so all four labels are two lines and the groups line up */
  display: block;
  font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--slate); font-size: 0.85rem;
}

.stepper {
  display: flex; align-items: stretch;
  border: 2px solid var(--ink);
  border-bottom-width: 6px;
  border-bottom-color: var(--blade);   /* the field is a measuring surface */
  background: var(--surface);
}
.stepper { transition: border-color .18s ease; }
.stepper:focus-within { border-bottom-color: var(--chalk); }
.stepper button {
  flex: none; width: 44px; min-height: var(--tap);
  border: 0; background: var(--tint); color: var(--ink);
  font: 500 1.5rem/1 var(--display);
  font-variation-settings: "wdth" 100, "wght" 600;
  cursor: pointer;
  transition: background .15s ease;
}
.stepper button:hover { background: var(--blade); }
.stepper input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  min-height: var(--tap);
  border: 0; border-inline: 2px solid var(--ink);
  background: transparent; color: var(--ink);
  font-family: var(--display);
  font-variation-settings: "wdth" 118, "wght" 800;
  font-size: 1.32rem; line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: center; padding: 6px 4px;
}
.stepper .unit {
  display: none;
  flex: none; place-content: center;
  padding: 0 9px; min-height: var(--tap);
  font: 600 0.72rem/1 var(--body);
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--tint); color: var(--slate);
}

.select-wrap { position: relative; }
.select-wrap select {
  width: 100%;
  /* matches the stepper group: 48px of control plus its 2px/6px borders */
  min-height: calc(var(--tap) + 8px);
  padding: 0 42px 0 12px;
  border: 2px solid var(--ink);
  border-bottom-width: 6px; border-bottom-color: var(--blade);
  background: var(--surface); color: var(--ink);
  font-family: var(--display);
  font-variation-settings: "wdth" 112, "wght" 700;
  font-size: 1.02rem;
  appearance: none; cursor: pointer;
}
.select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 45%;
  width: 10px; height: 10px;
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.chips-lab {
  display: block; width: 100%;
  font: 600 0.78rem/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate); margin: 18px 0 0;
}
.chip {
  font: 600 1rem/1 var(--body);
  min-height: var(--tap); min-width: 48px; padding: 12px 13px;
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--edge-hi); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.chip { transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--ink); color: var(--surface); border-color: var(--ink);
  box-shadow: inset 0 -5px 0 var(--blade);
}
.hint { font-size: 0.88rem; color: var(--slate); margin: 14px 0 0; max-width: 56ch; }

/* ---------- the answer ---------- */

.answer {
  background: var(--surface);
  border: 2px solid var(--ink);
  padding: 20px var(--gut) 22px;
  clip-path: polygon(
    0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer))
  );
}
.answer-lab {
  font: 600 0.75rem/1 var(--body); letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--slate); margin: 0 0 4px;
}
.answer-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; margin: 0; }
.answer-yd {
  font-family: var(--display);
  font-variation-settings: "wdth" 125, "wght" 830;
  font-size: clamp(3.9rem, 17vw, 7.4rem);
  line-height: 0.84; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums; display: block;
}
.answer-unit {
  font-family: var(--display);
  font-variation-settings: "wdth" 125, "wght" 620;
  font-size: clamp(1.1rem, 3.6vw, 1.5rem);
  line-height: 1; text-transform: lowercase;
}
.answer-sub {
  margin: 16px 0 0; padding-top: 14px;
  border-top: 2px solid var(--edge);
  font-size: 0.97rem; color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.answer-sub b { color: var(--ink); font-weight: 600; }

.buy {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  margin: 16px 0 0; background: var(--edge); border: 2px solid var(--edge);
}
.buy-cell { background: var(--surface); padding: 12px 13px; }
.buy-v {
  font-family: var(--display);
  font-variation-settings: "wdth" 122, "wght" 780;
  font-size: clamp(1.4rem, 5vw, 1.85rem); line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  display: block; overflow-wrap: anywhere;
}
.buy-l { font: 400 0.82rem/1.25 var(--body); color: var(--slate); display: block; margin-top: 5px; }
/* bags_waste, stated beside the headline count: stacked so it costs height, not column width */
.waste { display: block; font: 400 0.74rem/1.2 var(--body); color: var(--slate); font-variant-numeric: tabular-nums; }
.buy-cell--cost .buy-v { font-size: clamp(1.05rem, 3.6vw, 1.3rem); }

/* ---------- signature: the crossover blade ---------- */

.cross { margin: 22px 0 0; overflow: hidden; }
.cross-head {
  display: flex; justify-content: space-between; gap: 12px;
  font: 600 0.72rem/1.2 var(--body); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate); margin: 0 0 16px;
}
.cross-head span:last-child { text-align: right; }
.cross-blade {
  position: relative; height: 44px;
  background-color: var(--blade);
  background-image:
    repeating-linear-gradient(to right, var(--ink) 0 2px, transparent 2px 8.33333%),
    repeating-linear-gradient(to right, var(--ink) 0 2px, transparent 2px 16.66666%);
  background-size: 100% 11px, 100% 20px;
  background-position: left top, left top;
  background-repeat: no-repeat;
  border: 2px solid var(--ink);
}
.cross-bag {
  position: absolute; inset: 0 auto 0 0;
  background-image: repeating-linear-gradient(135deg, rgba(20,24,26,.34) 0 2px, transparent 2px 7px);
  border-right: 2px solid var(--ink);
}
.cross-needle {
  position: absolute; top: -10px; bottom: 0; left: 0;
  width: 4px; margin-left: -2px; background: var(--chalk);
  transition: left .5s cubic-bezier(.2,.7,.2,1);
}
.cross-needle::after {
  content: ""; position: absolute; left: -6px; top: 0;
  width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 11px solid var(--chalk);
}
.cross-scale {
  display: flex; justify-content: space-between; margin: 8px 0 0; padding: 0; list-style: none;
  font: 500 0.72rem/1 var(--body); color: var(--slate); font-variant-numeric: tabular-nums;
}
.cross-call {
  margin: 14px 0 0; padding: 13px 15px;
  background: var(--surface); border-left: 6px solid var(--chalk);
  font-size: 0.98rem;
}
.cross-call b {
  font-family: var(--display); font-variation-settings: "wdth" 118, "wght" 780;
  font-size: 1.12em; letter-spacing: -0.01em;
}

/* ---------- section drawing / gravel trap ---------- */

.trap {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center;
  background: var(--surface); border: 2px solid var(--edge);
  border-left: 6px solid var(--blade); padding: 16px;
}
.trap h2 { margin-bottom: 8px; }
.trap p { margin-bottom: 0; font-size: 0.97rem; }
.trap-fig { width: 100%; max-width: 350px; }

/* ---------- advertising ---------- */

.ad-slot {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--ad-reserve, 250px);
  background-color: #D0D5D4;
  background-image: repeating-linear-gradient(135deg, rgba(20,24,26,.05) 0 6px, transparent 6px 13px);
  border: 2px dashed var(--edge-hi);
  color: var(--slate); text-align: center;
  font: 600 0.7rem/1.4 var(--body); letter-spacing: 0.09em; text-transform: uppercase;
  padding: 6px;
}
.ad-slot--in_content, .ad-slot--footer { margin: 0 0 30px; }
.ad-slot--rail { display: none; }
.rail { display: none; }
.ad-slot--anchor {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  min-height: var(--anchor-h);
  margin: 0; border-width: 2px 0 0; border-style: solid; border-color: var(--ink);
  background-color: var(--ground);
}

/* ---------- data tables ---------- */

.scroller {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 2px solid var(--ink); background: var(--surface);
  -webkit-overflow-scrolling: touch;
  background-image: linear-gradient(to left, rgba(20, 24, 26, .17), rgba(20, 24, 26, 0));
  background-repeat: no-repeat; background-position: right center; background-size: 22px 100%;
}
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
caption {
  text-align: left; font: 600 0.78rem/1.3 var(--body);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); padding: 0 0 8px;
}
th, td {
  text-align: right; padding: 11px 5px; border-bottom: 1px solid var(--edge);
  white-space: nowrap; font-size: 0.95rem;
}
/* a column head is two or three words; letting it wrap on a phone is what keeps
   the narrow tables inside their box instead of a few dozen pixels over it */
thead th { white-space: normal; }
thead th {
  background: var(--ink); color: var(--surface);
  font: 600 0.76rem/1.2 var(--body); letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: none;
}
th.l, td.l { text-align: left; }
th.wrap-cell, td.wrap-cell { white-space: normal; min-width: 11ch; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: none; }
tbody tr td, tbody tr th { transition: background .15s ease; }
tbody tr:hover td, tbody tr:hover th { background: var(--tint); }
.row-here th, .row-here td { background: var(--blade); font-weight: 600; }
.row-here:hover th, .row-here:hover td { background: var(--blade); }
/* slate on tape yellow is 3.5:1 and pa11y failed it on the highlighted row; ink on the same
   yellow is the only pair in the palette that clears AA at this size */
.row-here .waste { color: var(--ink); }
/* the second line of a bag column head, naming what the second figure in each cell is. The
   figure is the same count with waste, not the difference, so the cell writes an arrow and
   never a plus */
.th-sub {
  display: block; font-weight: 400; letter-spacing: 0.03em; text-transform: none;
  font-size: 0.92em; color: #C2C9C8; margin-top: 3px;
  /* th, td is nowrap from 620px up; the sub-line has to be allowed to wrap or it sets the
     column width and pushes the eight-column thickness table further past its box */
  white-space: normal; max-width: 11ch;
}
.scroller--after-fig { margin-top: 16px; }
/* an area band on the slab hub: a heading, its count and one line saying what the band means */
.band-h { margin: 26px 0 8px; }
.band-h span { font-weight: 400; color: var(--slate); }
.band-note { font-size: 0.9rem; color: var(--slate); margin: 0 0 10px; }
.cell-link { display: block; min-height: var(--tap); padding: 13px 0; margin: -13px 0; font-weight: 600; }
.tag {
  display: inline-block; font: 600 0.72rem/1 var(--body);
  letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 6px;
}
.tag--bags { background: var(--ink); color: var(--surface); }
.tag--mix { background: var(--chalk); color: #fff; }
.delta--up { color: var(--chalk); font-weight: 600; }
.delta--dn { color: var(--slate); }

/* ---------- shape / calculator index ---------- */

.shapes {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
  background: var(--edge); border: 2px solid var(--ink);
}
.shape {
  background: var(--surface); display: flex; gap: 13px; align-items: flex-start;
  padding: 15px; text-decoration: none; color: var(--ink); min-height: var(--tap);
}
.shape { transition: background .15s ease; }
.shape:hover { background: var(--blade); }
.shape svg { width: 34px; height: 34px; flex: none; }
.shape > span { min-width: 0; }
.shape-n {
  display: block; font: 600 1rem/1.2 var(--body);
  text-decoration: underline; text-decoration-color: var(--chalk);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.shape-d { display: block; font-size: 0.86rem; color: var(--slate); margin-top: 3px; }
.shape--here, .shape--here:hover { background: var(--ground); }
.shape--here .shape-n { text-decoration: none; }

/* ---------- questions ---------- */

.qa { border: 2px solid var(--ink); background: var(--surface); }
.qa details + details { border-top: 1px solid var(--edge); }
.qa summary {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 14px 15px; cursor: pointer;
  font: 600 1rem/1.35 var(--body); list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before {
  content: ""; flex: none; width: 14px; height: 14px;
  border-right: 3px solid var(--chalk); border-bottom: 3px solid var(--chalk);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.qa details[open] summary::before { transform: rotate(-135deg) translateY(-2px); }
.qa summary:hover { background: var(--tint); }
.qa-a { padding: 0 15px 16px 41px; }
.qa-a p { font-size: 0.97rem; }
.qa-a p:last-child { margin-bottom: 0; }

/* ---------- prose, procedure, formula ---------- */

.prose { background: var(--surface); border: 2px solid var(--edge); padding: 18px var(--gut); }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin-top: 26px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { max-width: 68ch; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }

.steps { list-style: none; counter-reset: st; margin: 0; padding: 0; }
.steps--spaced { margin-top: 20px; }
.steps > li {
  counter-increment: st; position: relative;
  padding: 0 0 20px 52px; margin: 0;
}
.steps > li::before {
  content: counter(st);
  position: absolute; left: 0; top: 0;
  width: 38px; height: 38px; display: grid; place-content: center;
  background: var(--ink); color: var(--surface);
  font-family: var(--display); font-variation-settings: "wdth" 118, "wght" 780;
  font-size: 1.1rem;
  box-shadow: inset 0 -5px 0 var(--blade);
}
.steps h3 { margin-bottom: 4px; }
.steps p { font-size: 0.97rem; margin-bottom: 0; }

.formula {
  background: var(--surface); border: 2px solid var(--ink);
  border-left: 6px solid var(--blade); padding: 15px var(--gut);
  font-variant-numeric: tabular-nums;
}
.formula dl { margin: 0; display: grid; gap: 4px 14px; grid-template-columns: minmax(0,1fr); }
.formula dt {
  font: 600 0.74rem/1.2 var(--body); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate);
}
.formula dd {
  margin: 0 0 12px;
  font-family: var(--display); font-variation-settings: "wdth" 112, "wght" 620;
  font-size: 1.06rem; overflow-wrap: anywhere;
}
.formula dd:last-child { margin-bottom: 0; }

/* the shape being measured, riding beside the lede under the h1 — it answers "am I on the right
   calculator", which is a question asked at the top of the page or not at all. It costs no height
   below 620px because the lede is three lines there and the glyph is 44px */
.hd-shape { display: flex; align-items: flex-start; gap: 13px; margin: 0 0 14px; }
.hd-shape .lede { margin: 0; }
.fig--profile { flex: none; margin: 2px 0 0; color: var(--ink); }
.fig--profile svg { display: block; }
.error-card {
  background: var(--surface); border: 2px solid var(--ink);
  border-left: 6px solid var(--chalk); padding: 16px; margin: 0 0 16px;
}
.error-card h3 { margin-bottom: 6px; }
.error-card p:last-child { margin-bottom: 0; }
.error-cost {
  display: inline-block; margin-top: 10px; padding: 7px 10px;
  background: var(--blade); color: var(--ink);
  font: 600 0.8rem/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- 404 ---------- */

.gone { padding: 34px 0 10px; }
.gone-code {
  font-family: var(--display); font-variation-settings: "wdth" 125, "wght" 830;
  font-size: clamp(3.4rem, 15vw, 6rem); line-height: 0.86;
  letter-spacing: -0.045em; margin: 0 0 6px; display: block;
}
.ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; background: var(--edge); border: 2px solid var(--ink); }
.way {
  background: var(--surface); display: block; padding: 16px;
  text-decoration: none; color: var(--ink); min-height: var(--tap);
}
.way { transition: background .15s ease; }
.way:hover { background: var(--blade); }
.way-n {
  display: block; font-family: var(--display);
  font-variation-settings: "wdth" 115, "wght" 720; font-size: 1.12rem;
  text-decoration: underline; text-decoration-color: var(--chalk);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.way-d { display: block; font-size: 0.9rem; color: var(--slate); margin-top: 4px; }

/* ---------- footer ---------- */

.foot { background: var(--ink); color: #C9D0CF; margin-top: 40px; border-top: 4px solid var(--blade); }
.foot-in { padding: 30px 0 34px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.foot-in > * { min-width: 0; }
.foot-brand {
  display: flex; align-items: center; gap: 11px; color: var(--surface);
  text-decoration: none; min-height: 46px; padding: 7px 0;
}
.foot-tag { margin: 14px 0 0; font-size: 0.93rem; max-width: 34ch; color: #A8B2B1; }
.foot h2 {
  font-size: 0.78rem; font-family: var(--body); font-weight: 600;
  font-variation-settings: normal;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blade); margin-bottom: 4px;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot a { color: #D9DEDD; }
.foot li a { display: inline-block; max-width: 100%; padding: 11px 0; line-height: 22px; overflow-wrap: anywhere; }
/* the legal set — Contact, Privacy, Terms — lives in this strip rather than as a fourth column.
   It is meta, not navigation, and three content columns keep their width at 768px, which is the
   band where the footer's own overflow used to live */
.foot-legal { border-top: 1px solid #2C3336; padding: 6px 0 22px; font-size: 0.84rem; color: #8D9796; }
.foot-legal p { margin: 0; }
.foot-legal-links {
  list-style: none; margin: 0 0 4px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 22px;
}
.foot-legal-links a {
  display: inline-block; padding: 11px 0; line-height: 22px;
  font-weight: 600; font-size: 0.95rem;
}

/* ---------- breadcrumb / backlink ---------- */

.crumb {
  margin: 0 0 6px; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; align-items: center;
  font-size: 0.85rem; color: var(--slate);
}
.crumb li { display: flex; align-items: center; }
.crumb li + li::before { content: "/"; color: var(--gravel); padding: 0 8px; }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.crumb [aria-current="page"] { font-weight: 600; color: var(--ink); }
.backlink-row { margin: 0 0 30px; }
.backlink {
  display: inline-flex; align-items: center; gap: 10px;
  flex-wrap: wrap; max-width: 100%;
  min-height: 56px; padding: 14px 18px; margin: 0;
  background: var(--ink); color: var(--surface); text-decoration: none;
  font: 600 1rem/1.2 var(--body);
  box-shadow: inset 0 -5px 0 var(--blade);
}
.backlink { transition: background .18s ease; }
.backlink:hover { background: var(--chalk); }
.backlink span[aria-hidden] { font-size: 1.2em; line-height: 1; }

/* ---------- drawings ---------- */

.sec text, .ladder text, .plan text {
  font-family: var(--body); font-weight: 600; fill: var(--ink);
}
.sec .lab-sm, .ladder .lab-sm, .plan .lab-sm { font-size: 12px; font-weight: 600; fill: var(--slate); }
/* a label sitting on the gravel or the subsoil band, not on the panel: CSS beats a
   presentation attribute, so an inline fill="" on one of these is dead and it measured 2.75:1 */
.sec .lab-base, .ladder .lab-base, .plan .lab-base { font-size: 12px; font-weight: 600; fill: var(--ink); }
.sec .dim, .plan .dim { font-size: 13px; }
.sec-slab, .sec-edge {
  transition: y .25s cubic-bezier(.2,.7,.2,1), height .25s cubic-bezier(.2,.7,.2,1);
}
.ladder, .plan { width: 100%; max-width: 560px; display: block; }
.ladder-wrap, .fig-wrap { background: var(--surface); border: 2px solid var(--ink); padding: 16px var(--gut); }

/* ---------- widths ---------- */

@media (min-width: 620px) {
  :root { --gut: 24px; }
  th, td { padding: 11px 12px; }
  thead th { white-space: nowrap; }
  .wrap-cell, td.wrap-cell { min-width: 15ch; }
  .stepper button { width: 46px; }
  .stepper .unit { display: grid; }
  .buy { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-in { grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
  .formula dl { grid-template-columns: 13rem minmax(0, 1fr); }
  .formula dt { padding-top: 5px; }
}

@media (min-width: 900px) {
  .trap { grid-template-columns: minmax(280px, 350px) minmax(0, 1fr); padding: 22px; gap: 24px; }
  .answer { padding: 26px 30px 30px; }
  .shapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .cols { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; }
  .rail { display: block; }
  .ad-slot--rail { display: flex; position: sticky; top: 22px; }
  .ad-slot--anchor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}