/*
THESIS: birminghamdirt.com is an extension bulletin for dirt. It teaches and
prices before it sells, and it refuses the category page: a stock excavator
photo, a slogan and an orange button. The page itself is the proof.

OWN-WORLD: bright white paper, near-black ink, one clay-red spot ink for rules,
table numbers, worksheet marks and the primary action, a pale clay tint for
worksheet fields. Overpass (Highway Gothic for the web, the lettering on every
dump truck door) at 800 for headings and tabular numbers, 400 for text.
Hairline rules, numbered tables and worksheets, square corners, no shadows, no
gradients. Remove every word and it still reads as a printed circular.

STORY: the visitor learns what material they need, sees a typical price, works
out how many yards, and sends a request they trust because the page taught them.

FIRST VIEWPORT: a clay masthead strip with the wordmark, the counties and the
nav. Under it, left: the headline, one line of lede, and Worksheet 1, four
lettered material cards that start the quote. Right: Table 1 and Table 2,
typical prices with the as-of date. On a phone: strip, headline, cards, tables.

FORM: Extension bulletin, candidate 7 of 7 on the grounded list, assigned by
concept seed c4672d8c (persuade). Staging: standard reading order; no dealt
staging kept.
*/

:root {
  --paper: #ffffff;
  --ink: #1a1714;
  --ink-2: #5f5850;
  --rule: #d8d2c9;
  --rule-ink: #1a1714;
  --clay: #b3471b;
  --clay-ink: #8f3511;
  --clay-tint: #fbeee6;
  --clay-tint-2: #f6dccd;
  --ok: #1f6f43;
  --bad: #a4261a;
  --bad-tint: #fbe3e0;

  --font: 'Overpass', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  --fs-0: 0.8125rem;
  --fs-1: 0.9375rem;
  --fs-2: 1.0625rem;
  --fs-3: 1.25rem;
  --fs-4: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  --fs-5: clamp(2.1rem, 1.3rem + 3.4vw, 3.9rem);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --sec: clamp(2.75rem, 7vw, 5.5rem);
  --wrap: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font: 400 var(--fs-2)/1.55 var(--font);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: 'tnum' 1, 'kern' 1;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--clay-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--clay); }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
b, strong { font-weight: 700; }
small { font-size: var(--fs-0); }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap--form { max-width: 760px; }
.formcol { max-width: 720px; }
.h2--rule { font-size: var(--fs-3); border-top: 1px solid var(--ink); padding-top: .9rem; margin-top: 0; }

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-5); letter-spacing: -0.03em; line-height: 1; }
h2 { font-size: var(--fs-4); }
h3 { font-size: var(--fs-3); letter-spacing: -0.01em; }
p, ul, ol { margin: 0 0 1em; }
.lede { font-size: var(--fs-3); line-height: 1.45; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.fine { font-size: var(--fs-0); color: var(--ink-2); line-height: 1.5; }
.note { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: .7rem 0; color: var(--ink-2); }
.prose .note { border-bottom: 0; margin-bottom: 0; }
.err { background: var(--bad-tint); color: var(--bad); padding: .7rem 1rem; border-left: 1px solid var(--bad); }
.plain { list-style: none; padding: 0; }
.plain li { padding: .35rem 0; border-top: 1px solid var(--rule); }
.plain li:first-child { border-top: 0; }

/* kicker: only ever "Worksheet N", "Table N." or a breadcrumb-like place line */
.kicker, .sheet__num, .tbl__num {
  font-size: var(--fs-0);
  font-weight: 800;
  color: var(--clay);
  letter-spacing: .02em;
  margin: 0 0 .4rem;
}
.tbl__num { margin: 0 .35rem 0 0; }

/* ------------------------------------------------------------------ masthead */
.mast { background: var(--clay); color: var(--paper); }
.mast__in {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "mark line cta" "nav nav nav";
  align-items: center;
  gap: .25rem 1.5rem;
  padding-top: .8rem;
  padding-bottom: 0;
}
.wordmark {
  grid-area: mark;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--paper);
  text-decoration: none;
  font-weight: 800;
  font-size: var(--fs-3);
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.wordmark__mark {
  width: 22px; height: 22px;
  background: var(--paper);
  clip-path: polygon(0 100%, 100% 100%, 100% 82%, 82% 82%, 70% 40%, 50% 20%, 30% 40%, 18% 82%, 0 82%);
}
.mast__line { grid-area: line; margin: 0; font-size: var(--fs-1); color: var(--clay-tint); }
.btn--mast { grid-area: cta; background: var(--paper); color: var(--clay-ink); white-space: nowrap; }
.btn--mast:hover { background: var(--clay-tint); color: var(--clay-ink); }
.nav { grid-area: nav; border-top: 1px solid rgba(255, 255, 255, .35); margin-top: .6rem; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.nav a {
  display: inline-block;
  padding: .6rem 0 .65rem;
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-1);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--paper); color: var(--paper); }
.navtoggle { display: none; }
@media (max-width: 760px) {
  .mast__in { grid-template-columns: 1fr auto auto; grid-template-areas: "mark cta toggle" "nav nav nav"; gap: .5rem .75rem; padding-bottom: .75rem; }
  .mast__line { display: none; }
  .navtoggle {
    display: inline-block; grid-area: toggle;
    font: 600 var(--fs-1) var(--font); color: var(--paper); background: transparent;
    border: 1px solid rgba(255, 255, 255, .6); padding: .45rem .7rem; cursor: pointer;
  }
  .nav { display: none; margin-top: .25rem; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding: .6rem 0; border-bottom: 1px solid rgba(255, 255, 255, .25); margin: 0; }
  .btn--mast { padding: .45rem .55rem; font-size: var(--fs-0); }
  .wordmark { font-size: var(--fs-1); gap: .4rem; }
  .wordmark__mark { width: 18px; height: 18px; }
  .navtoggle { padding: .4rem .5rem; font-size: var(--fs-0); }
  .mast__in { gap: .5rem .5rem; }
}

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-block;
  font: 700 var(--fs-2)/1.2 var(--font);
  color: var(--paper);
  background: var(--clay);
  border: 1px solid var(--clay);
  padding: .75rem 1.25rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.btn:hover { background: var(--clay-ink); border-color: var(--clay-ink); color: var(--paper); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--big { font-size: var(--fs-3); padding: .95rem 1.6rem; }
button.link { font: inherit; color: var(--clay-ink); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* ------------------------------------------------------------------ opening */
.open { padding: clamp(1.75rem, 5vw, 4rem) 0 var(--sec); }
.open__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.open__lead h1 { margin-bottom: .6rem; max-width: 16ch; }
.open__side { border-top: 3px solid var(--ink); padding-top: 1rem; }
.side__more { margin: .5rem 0 0; font-size: var(--fs-1); }
@media (max-width: 900px) {
  .open__grid { grid-template-columns: 1fr; }
  .open__lead h1 { max-width: none; }
}

/* worksheet: the material picker */
.sheet { border-top: 3px solid var(--clay); padding-top: .9rem; margin-top: 1.75rem; }
.sheet h2 { font-size: var(--fs-3); margin-bottom: .9rem; }
.mcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.mcard {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "n name" "n hint" "n go";
  gap: .1rem .8rem;
  padding: .9rem 1rem .9rem .9rem;
  min-height: 100%;
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.mcard:hover, .mcard:focus-visible { border-color: var(--clay); background: var(--clay-tint); color: var(--ink); }
.mcard__n {
  grid-area: n;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  background: var(--clay); color: var(--paper);
  font-weight: 800; font-size: var(--fs-2); line-height: 1;
  padding-top: .15em;
}
.mcard__name { grid-area: name; font-weight: 800; font-size: var(--fs-3); line-height: 1.1; letter-spacing: -0.01em; }
.mcard__hint { grid-area: hint; font-size: var(--fs-1); color: var(--ink-2); line-height: 1.35; }
.mcard__go { grid-area: go; margin-top: .5rem; font-size: var(--fs-1); font-weight: 700; color: var(--clay-ink); }
.mcard__go::after { content: ' \2192'; }
@media (max-width: 520px) { .mcards { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ tables */
.tbl { margin: 0 0 1.5rem; }
.tbl figcaption { font-weight: 800; font-size: var(--fs-1); padding: 0 0 .4rem; border-bottom: 2px solid var(--ink); }
.tbl table { width: 100%; border-collapse: collapse; font-size: var(--fs-1); }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.tbl th { font-weight: 400; color: var(--ink-2); padding-right: 1rem; }
.tbl td { font-weight: 600; }
.tbl thead th { font-weight: 800; color: var(--ink); font-size: var(--fs-0); border-bottom: 1px solid var(--ink); padding-top: .4rem; }
.tbl td.num, .tbl th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: .75rem; }
.tbl td.unit { color: var(--ink-2); font-weight: 400; padding-left: .75rem; }
.tbl__src { margin: .35rem 0 0; font-size: var(--fs-0); color: var(--ink-2); }
.tbl__note { margin: .5rem 0 0; font-size: var(--fs-0); color: var(--ink-2); line-height: 1.5; }
.prose .tbl { max-width: 40rem; }

/* ------------------------------------------------------------------ sections */
.sec { padding: var(--sec) 0; }
.sec--rule { border-top: 1px solid var(--rule); }
.sec--form { padding-top: 1.5rem; }
.sec h2 { margin-top: 0; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.cols--wide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.cols > div > h2:first-child, .cols > aside > h2:first-child { margin-top: 0; }
@media (max-width: 820px) { .cols, .cols--wide { grid-template-columns: 1fr; } }

.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: s; position: relative; padding: .6rem 0 .6rem 2.4rem; border-top: 1px solid var(--rule); }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: .7rem;
  width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  background: var(--clay); color: var(--paper); font-weight: 800; font-size: var(--fs-0); padding-top: .1em;
}
.steps li:first-child { border-top: 0; }

.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2rem; }
.areas--page { gap: 2rem 3rem; }
.areas__col h2, .areas__col h3 { font-size: var(--fs-3); border-bottom: 2px solid var(--ink); padding-bottom: .35rem; margin-bottom: .5rem; }
.areas .links--rows li { display: flex; flex-wrap: wrap; gap: 0 .5rem; align-items: baseline; }
.areas .links--rows small { color: var(--ink-2); }
@media (max-width: 760px) { .areas { grid-template-columns: 1fr; } }

.links { list-style: none; padding: 0; margin: 0; }
.links li { border-top: 1px solid var(--rule); }
.links li:first-child { border-top: 0; }
.links a { display: inline-block; padding: .4rem 0; text-decoration: none; font-weight: 600; }
.links a:hover { text-decoration: underline; }
.links--cols { columns: 3; column-gap: 2rem; }
.links--cols li { break-inside: avoid; }
@media (max-width: 760px) { .links--cols { columns: 2; } }
@media (max-width: 480px) { .links--cols { columns: 1; } }

/* material rows on city and index pages */
.mrows { list-style: none; padding: 0; margin: 0; counter-reset: m; }
.mrow {
  counter-increment: m;
  display: grid; grid-template-columns: 2rem 1fr auto; grid-template-areas: "n name price" "n desc price";
  gap: .1rem .9rem; align-items: baseline;
  padding: .9rem 0; border-top: 1px solid var(--rule);
  color: var(--ink); text-decoration: none;
}
.mrows li:first-child .mrow { border-top: 0; }
.mrow::before { content: counter(m, upper-alpha); grid-area: n; align-self: start; width: 2rem; height: 2rem; display: grid; place-items: center; background: var(--clay); color: var(--paper); font-weight: 800; padding-top: .15em; }
.mrow b { grid-area: name; font-size: var(--fs-3); font-weight: 800; letter-spacing: -0.01em; }
.mrow span { grid-area: desc; color: var(--ink-2); font-size: var(--fs-1); }
.mrow em { grid-area: price; font-style: normal; font-weight: 600; white-space: nowrap; font-size: var(--fs-1); }
.mrow:hover b { color: var(--clay-ink); text-decoration: underline; }
.mrows--big .mrow { padding: 1.25rem 0; }
.mrows--big .mrow b { font-size: var(--fs-4); }
@media (max-width: 600px) {
  .mrow { grid-template-columns: 2rem 1fr; grid-template-areas: "n name" "n desc" "n price"; }
  .mrow em { white-space: normal; }
}

/* page head */
.phead { padding: clamp(1.75rem, 5vw, 3.5rem) 0 clamp(1rem, 3vw, 2rem); border-bottom: 1px solid var(--rule); }
.phead--tight { border-bottom: 0; padding-bottom: 0; }
.phead h1 { max-width: 20ch; }
.dateline { font-size: var(--fs-0); color: var(--ink-2); margin: -.25rem 0 .75rem; }
.fig { margin: 1.5rem 0; }
.fig svg { width: 100%; height: auto; max-width: 36rem; display: block; }
.fig figcaption { font-size: var(--fs-1); color: var(--ink-2); margin-top: .4rem; }
.fig figcaption b { color: var(--clay); font-weight: 800; }
.crumbs ol { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0 .4rem; font-size: var(--fs-0); color: var(--ink-2); }
.crumbs li + li::before { content: '/'; margin-right: .4rem; color: var(--rule); }
.crumbs a { color: var(--ink-2); }

/* prose */
.prose { max-width: 66ch; }
.prose--doc { max-width: 70ch; }
.prose h2 { margin-top: 2.2rem; padding-top: .9rem; border-top: 1px solid var(--ink); font-size: var(--fs-3); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.5rem; font-size: var(--fs-2); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin: .3rem 0; }
.prose .tbl th { width: auto; }
.prose .tbl tbody th { font-weight: 600; color: var(--ink); }
.prose .tbl thead th { color: var(--ink-2); }
.prose .byline { font-size: var(--fs-0); color: var(--ink-2); border-bottom: 1px solid var(--rule); padding-bottom: .6rem; }
.prose .plain li b { display: block; }
.side__h { font-size: var(--fs-1); border-bottom: 2px solid var(--ink); padding-bottom: .3rem; margin: 1.75rem 0 .5rem; }
.side__cta { margin: 0 0 1.5rem; }
.side__cta .btn { width: 100%; text-align: center; }
aside .sheet { margin-top: 0; }
aside .mcards { grid-template-columns: 1fr; }
.toc h2 { font-size: var(--fs-1); border-bottom: 2px solid var(--ink); padding-bottom: .3rem; margin: 0 0 .5rem; }
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc li { border-top: 1px solid var(--rule); }
.toc li:first-child { border-top: 0; }
.toc a { display: block; padding: .35rem 0; text-decoration: none; font-size: var(--fs-1); }
.toc a:hover { text-decoration: underline; }

/* FAQ */
.faqs { padding: 0 0 var(--sec); }
.faqs h2, .faqs .faq { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.faqs h2 { padding-top: .9rem; border-top: 1px solid var(--ink); margin: 0 auto .5rem; font-size: var(--fs-3); }
.faqs .faq { max-width: calc(66ch + var(--gutter) * 2); margin-left: 0; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: .8rem 1.8rem .8rem 0; font-weight: 700; position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: .2rem; top: .65rem; color: var(--clay); font-weight: 800; font-size: var(--fs-3); }
.faq details[open] summary::after { content: '\2212'; }
.faq details > div { padding: 0 0 1rem; color: var(--ink-2); max-width: 66ch; }
.faq details > div p:last-child { margin-bottom: 0; }

/* close */
.close { background: var(--clay-tint); border-top: 3px solid var(--clay); padding: var(--sec) 0; }
.close__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.close h2 { max-width: 22ch; }
.close p { color: var(--ink-2); max-width: 50ch; }

/* ------------------------------------------------------------------ forms */
.field { display: block; margin: 0 0 1rem; }
.field > span { display: block; font-weight: 600; font-size: var(--fs-1); margin-bottom: .3rem; }
.field input, .field select, .field textarea {
  display: block; width: 100%;
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink); border-radius: 0;
  padding: .65rem .75rem;
}
.field textarea { resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231a1714' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .8rem center; padding-right: 2.4rem; }
.field small { display: block; color: var(--ink-2); font-size: var(--fs-0); margin-top: .25rem; }
.field--short { max-width: 10rem; }
.row { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.row .field { flex: 1 1 14rem; }
.row .btn { margin-right: 1rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.funnel { position: relative; }
.step { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.step > legend { font-size: var(--fs-4); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 1rem; padding: 0; display: flex; gap: .7rem; align-items: baseline; }
.step__n { display: inline-grid; place-items: center; width: 2rem; height: 2rem; background: var(--clay); color: var(--paper); font-size: var(--fs-2); padding-top: .15em; flex: none; }
.funnel:not(.is-stepped) .step { padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.funnel:not(.is-stepped) .step__nav .btn:not([type=submit]) { display: none; }
.funnel:not(.is-stepped) .progress { display: none; }
.sub { border: 0; padding: 0; margin: 0 0 1.25rem; }
.sub > legend { font-weight: 600; font-size: var(--fs-1); margin-bottom: .5rem; padding: 0; }
.step__nav { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }

.progress { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; counter-reset: p; border-bottom: 1px solid var(--rule); }
.progress li { counter-increment: p; flex: 1; font-size: var(--fs-0); color: var(--ink-2); padding: 0 0 .5rem; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.progress li::before { content: counter(p) ' '; font-weight: 800; }
.progress li.is-current { color: var(--ink); border-bottom-color: var(--clay); font-weight: 700; }
.progress li.is-done { color: var(--clay-ink); }
@media (max-width: 560px) { .progress li { font-size: 0; } .progress li::before { font-size: var(--fs-0); } }

.choices { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.choices--row { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.choice { display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; align-items: start; padding: .8rem .9rem; border: 1px solid var(--rule); cursor: pointer; background: var(--paper); transition: border-color .15s var(--ease), background .15s var(--ease); }
.choice:hover { border-color: var(--ink); }
.choice input { grid-row: 1 / span 2; margin: .2rem 0 0; width: 1.1rem; height: 1.1rem; accent-color: var(--clay); }
.choice__name { font-weight: 700; line-height: 1.2; }
.choice__hint { grid-column: 2; font-size: var(--fs-1); color: var(--ink-2); line-height: 1.35; }
.choice:has(input:checked) { border-color: var(--clay); background: var(--clay-tint); box-shadow: inset 0 0 0 1px var(--clay); }
.choice--small { padding: .6rem .8rem; }
.choice--small input { grid-row: 1; }
.choice--inline { display: inline-grid; border: 0; padding: .3rem 0; gap: .5rem; }
.choice--inline:has(input:checked) { background: none; box-shadow: none; }
@media (max-width: 520px) { .choices { grid-template-columns: 1fr; } }
.variants { border: 0; padding: 0; margin: .25rem 0 1rem; }
.variants > legend { font-weight: 600; font-size: var(--fs-1); margin-bottom: .5rem; padding: 0; }
.variants ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 520px) { .variants ul { grid-template-columns: 1fr; } }

.qty { display: flex; flex-wrap: wrap; gap: 0 1.5rem; align-items: end; }
.qty .field { flex: 0 1 14rem; }
.calc { border: 1px solid var(--ink); margin: .25rem 0 1rem; }
.calc summary { cursor: pointer; padding: .7rem .9rem; font-weight: 700; list-style: none; position: relative; }
.calc summary::-webkit-details-marker { display: none; }
.calc summary::after { content: '+'; position: absolute; right: .9rem; top: .5rem; color: var(--clay); font-weight: 800; font-size: var(--fs-3); }
.calc[open] summary::after { content: '\2212'; }
.calc__in { padding: 0 .9rem .9rem; border-top: 1px solid var(--rule); }
.calc__in > p:first-child { margin-top: .75rem; font-size: var(--fs-1); color: var(--ink-2); }
.calc__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.calc__out { background: var(--clay-tint); padding: .7rem .9rem; margin: 0 0 .75rem; }
.calc__formula { display: block; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin-bottom: .25rem; }
.summary { background: var(--clay-tint); padding: .7rem .9rem; margin: 0 0 1.25rem; }
.summary p { margin: 0; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .35rem .75rem; }
.checks--zones { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.check { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
.check input { accent-color: var(--clay); width: 1.05rem; height: 1.05rem; margin: 0; }
.funnel--flat .sub { border-top: 1px solid var(--rule); padding-top: 1rem; }

/* calculator page */
.calcpage .calc__row { margin-bottom: .25rem; }
.result { border-top: 3px solid var(--clay); padding: 1rem 0; margin: 1rem 0; }
.result__big { font-size: var(--fs-4); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 .25rem; }
.result__big b { font-size: var(--fs-5); }

/* posts */
.posts { list-style: none; padding: 0; margin: 0; }
.posts li { border-top: 1px solid var(--rule); }
.posts li:first-child { border-top: 0; }
.posts a { display: grid; grid-template-columns: 9rem 1fr; gap: .25rem 1.5rem; padding: 1.1rem 0; text-decoration: none; color: var(--ink); }
.posts time { grid-row: 1 / span 2; font-size: var(--fs-0); color: var(--ink-2); padding-top: .4rem; }
.posts__title { font-size: var(--fs-3); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.posts__sum { color: var(--ink-2); font-size: var(--fs-1); }
.posts a:hover .posts__title { color: var(--clay-ink); text-decoration: underline; }
@media (max-width: 560px) { .posts a { grid-template-columns: 1fr; } .posts time { grid-row: auto; padding: 0; } }

/* ------------------------------------------------------------------ footer */
.foot { background: var(--clay); color: var(--paper); margin-top: 0; padding: 2.5rem 0 2rem; }
.foot a { color: var(--paper); }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.foot__name { font-weight: 800; font-size: var(--fs-3); margin: 0 0 .4rem; }
.foot p { color: var(--clay-tint); font-size: var(--fs-1); max-width: 40ch; }
.foot h2 { font-size: var(--fs-0); letter-spacing: .04em; margin: 0 0 .5rem; color: var(--clay-tint); }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li a { display: inline-block; padding: .2rem 0; text-decoration: none; font-weight: 600; }
.foot li a:hover { text-decoration: underline; }
.foot__legal { padding-top: 1.25rem; }
.foot__legal p { font-size: var(--fs-0); max-width: 90ch; margin: 0 0 .4rem; }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ------------------------------------------------------------------ motion: rules print in once */
@media (prefers-reduced-motion: no-preference) {
  .open__side, .sheet, .prose h2, .faqs h2, .close { animation: none; }
  .js .open__side, .js .sheet { background-image: linear-gradient(var(--clay), var(--clay)); background-repeat: no-repeat; background-size: 0 3px; background-position: 0 0; animation: rule-in .6s var(--ease) forwards; }
  .js .open__side { background-image: linear-gradient(var(--ink), var(--ink)); animation-delay: .15s; border-top-color: transparent; }
  .js .sheet { animation-delay: .35s; border-top-color: transparent; }
  @keyframes rule-in { to { background-size: 100% 3px; } }
}

/* ------------------------------------------------------------------ print */
@media print {
  .mast, .foot, .close, .btn, .navtoggle, .step__nav, .progress { display: none !important; }
  body { font-size: 11pt; }
  a { color: inherit; text-decoration: none; }
}