/* Stretch Wrap Co. Hand-written, in cascade layers. Rules and white space separate
   things, as on a technical data sheet: nothing boxed, glowing or rounded.
   The embedded 1DB quote form is styled at the end of the file, outside the layers,
   so its rules win over any unlayered styles the form script brings with it. */

@layer reset, tokens, base, layout, parts, pages;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ul[class], ol[class] { padding: 0; list-style: none; }
  img, picture, svg { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  table { border-collapse: collapse; }
}

@layer tokens {
  :root {
    /* palette: the faint grey-green of clear film edge-on, and kraft from the core and the case */
    --ground: #e4ece9;
    --surface: #f7faf9;
    --ink: #16211f;
    --muted: #45524e;
    --kraft: #6f4518;
    --on-kraft: #ffffff;
    --kraft-deep: #5a3712;
    --kraft-pale: #e9dccb;
    --hair: color-mix(in srgb, var(--muted) 45%, transparent);
    --hair-strong: var(--muted);

    --font-head: "Fjalla One", "Oswald", "Arial Narrow", sans-serif-condensed, sans-serif;
    --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

    /* type: 1.25 from an 18px body */
    --t-0: 1.125rem;      /* 18 */
    --t-sm: 0.9rem;       /* 14.4 */
    --t-xs: 0.8rem;
    --t-1: 1.406rem;      /* 22.5 */
    --t-2: 1.758rem;      /* 28.1 */
    --t-3: 2.197rem;      /* 35.2 */
    --t-4: 2.747rem;      /* 43.9 */
    --t-h1: clamp(2.375rem, 1.2rem + 3.6vw, 4rem); /* 38 phone, 64 desktop */

    /* 8px step */
    --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 2.5rem; --s6: 3rem; --s8: 4rem; --s10: 5rem; --s12: 6rem;

    --page: 77.5rem;     /* 1,240px */
    --gutter: 1rem;      /* phone gutter: one value everywhere */
  }
  @media (min-width: 48em) { :root { --gutter: 2rem; } }
}

@layer base {
  html { background: var(--ground); color: var(--ink); scroll-padding-top: 5rem; }
  body {
    font-family: var(--font-body);
    font-size: var(--t-0);
    line-height: 1.6;
    background: var(--ground);
    color: var(--ink);
    overflow-x: clip;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: 0.005em;
    text-wrap: balance;
  }
  h1 { font-size: var(--t-h1); }
  h2 { font-size: clamp(var(--t-2), 1.4rem + 1.6vw, var(--t-4)); }
  h3 { font-size: var(--t-1); line-height: 1.2; }
  p, li, dd { text-wrap: pretty; }
  a { color: var(--kraft); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  a:hover { color: var(--kraft-deep); text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--kraft); outline-offset: 3px; }
  strong { font-weight: 700; }
  small { font-size: var(--t-sm); }
  abbr[title] { text-decoration: none; }
  ::selection { background: var(--kraft); color: var(--on-kraft); }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  }
}

@layer layout {
  .wrap { width: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; }
  .skip { position: absolute; left: -999px; top: 0; background: var(--kraft); color: var(--on-kraft); padding: var(--s1) var(--s2); z-index: 20; }
  .skip:focus { left: var(--gutter); }

  /* the data-sheet grid: a wide left margin for headings, content to the right */
  .sheet { display: grid; gap: var(--s2) var(--s4); padding-block: var(--s8); border-top: 1px solid var(--hair); }
  .sheet > .sheet-head { max-width: 22rem; }
  .sheet > .sheet-head h2 { margin-bottom: var(--s1); }
  .sheet > .sheet-head p { color: var(--muted); }
  @media (min-width: 60em) {
    .sheet { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: var(--s10); }
    .sheet > .sheet-head { grid-column: 1 / span 4; }
    .sheet > .sheet-body { grid-column: 5 / -1; }
  }
  .sheet-body > * + * { margin-top: var(--s3); }

  /* one 68-character column for articles */
  .column { max-width: 68ch; }
  .prose > * + * { margin-top: 1em; }
  .prose h2 { margin-top: var(--s6); font-size: var(--t-3); }
  .prose h3 { margin-top: var(--s4); }
  .prose ul, .prose ol { padding-left: 1.25em; }
  .prose li + li { margin-top: 0.35em; }
}

@layer parts {
  /* ---------- header ---------- */
  .site-head {
    position: sticky; top: 0; z-index: 10;
    background: var(--ground);
    border-bottom: 1px solid var(--hair);
    transition: transform 220ms ease;
  }
  .site-head.is-hidden { transform: translateY(-100%); }
  .head-row { display: flex; align-items: center; gap: var(--s3); min-height: 4rem; }
  .brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; }
  .brand:hover { color: var(--ink); }
  .brand svg { width: 2rem; height: 2rem; flex: none; }
  .brand-name { font-family: var(--font-head); font-size: 1.45rem; letter-spacing: 0.04em; line-height: 1; }
  .brand-short { display: none; font-family: var(--font-head); font-size: 1.45rem; letter-spacing: 0.06em; }
  .nav { display: none; margin-left: auto; }
  .nav ul, .phone-menu ul { list-style: none; padding: 0; margin: 0; }
  .nav > ul { display: flex; gap: var(--s3); align-items: center; }
  .nav-item { position: relative; }
  .nav-item > a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem; padding-block: 1.3rem; display: inline-block; }
  .nav-item > a:hover, .nav-item > a[aria-current] { color: var(--kraft); box-shadow: inset 0 -2px 0 var(--kraft); }
  .drop {
    position: absolute; top: 100%; left: -1rem; width: 23rem;
    background: var(--surface); border-top: 2px solid var(--kraft); border-bottom: 1px solid var(--hair);
    padding: var(--s2); display: none; z-index: 12;
  }
  .nav-item:hover .drop, .nav-item:focus-within .drop { display: grid; grid-template-columns: 5rem 1fr; gap: 0 var(--s2); }
  .drop img { grid-row: 1 / span 6; width: 5rem; height: 5rem; object-fit: cover; }
  .drop ul { grid-column: 2; }
  .drop li + li { border-top: 1px solid var(--hair); }
  .drop a { display: block; padding: 0.45rem 0; color: var(--ink); text-decoration: none; font-size: 0.95rem; }
  .drop a:hover { color: var(--kraft); }
  .head-quote { margin-left: auto; }
  .menu-btn {
    margin-left: var(--s1); background: none; border: 0; padding: 0.5rem 0; font-weight: 700;
    font-size: 1rem; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em;
  }
  @media (max-width: 30em) {
    .brand-name { display: none; }
    .brand-short { display: inline; }
    .head-quote.btn { padding: 0.45rem 0.8rem; font-size: 0.95rem; }
  }
  @media (min-width: 64em) {
    .nav { display: block; }
    .head-quote { margin-left: 0; }
    .menu-btn { display: none; }
  }

  /* phone menu: a full-height list, the quote link at its top */
  .phone-menu { position: fixed; inset: 0; z-index: 30; background: var(--ground); overflow-y: auto; padding: var(--s2) var(--gutter) var(--s8); }
  .phone-menu[hidden] { display: none; }
  .phone-menu-top { display: flex; justify-content: space-between; align-items: center; min-height: 3rem; margin-bottom: var(--s2); }
  .phone-menu .btn { width: 100%; justify-content: center; margin-bottom: var(--s3); }
  .phone-menu h2 { font-size: var(--t-1); margin-top: var(--s3); }
  .phone-menu ul { margin-top: var(--s1); }
  .phone-menu li { border-top: 1px solid var(--hair); }
  .phone-menu li a { display: block; padding: 0.7rem 0; color: var(--ink); text-decoration: none; }

  /* ---------- buttons: square blocks with a 2px border, like a printed case panel ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-head); font-size: 1.15rem; letter-spacing: 0.03em; line-height: 1.1;
    padding: 0.8rem 1.4rem; border: 2px solid var(--kraft); border-radius: 0;
    background: var(--kraft); color: var(--on-kraft); text-decoration: none; cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
  }
  .btn:hover { background: var(--kraft-deep); border-color: var(--kraft-deep); color: var(--on-kraft); text-decoration: none; }
  .btn-line { background: transparent; color: var(--kraft); }
  .btn-line:hover { background: var(--kraft); color: var(--on-kraft); }
  .btn-on-kraft { background: var(--surface); border-color: var(--surface); color: var(--kraft); }
  .btn-on-kraft:hover { background: transparent; color: var(--on-kraft); border-color: var(--on-kraft); }

  /* ---------- breadcrumbs ---------- */
  .crumbs { padding-top: var(--s3); font-size: var(--t-sm); color: var(--muted); }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
  .crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--hair-strong); }
  .crumbs a { color: var(--muted); }

  /* ---------- the spec line and spec table, typeset like a case label ---------- */
  .spec-line { font-family: var(--font-head); font-size: 1.15rem; letter-spacing: 0.04em; white-space: nowrap; }
  .spec-wrap { white-space: normal; }
  .spec {
    width: 100%; font-size: 1rem; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  }
  .spec th, .spec td { text-align: left; padding: 0.55rem 0; border-top: 1px solid var(--hair); vertical-align: top; }
  .spec tr:first-child th, .spec tr:first-child td { border-top: 0; }
  .spec th { font-family: var(--font-head); font-weight: 400; letter-spacing: 0.04em; width: 38%; padding-right: var(--s2); color: var(--muted); }
  .spec td { font-weight: 600; }
  .nowrap { white-space: nowrap; }

  /* ---------- ruled rows (never cards) ---------- */
  .rows { border-top: 2px solid var(--ink); }
  .row { display: grid; gap: var(--s2); padding-block: var(--s2); border-bottom: 1px solid var(--hair); grid-template-columns: 1fr; align-items: start; }
  .row.has-photo { grid-template-columns: 5.5rem 1fr; }
  .row img, .row .mini-roll { width: 5.5rem; height: 5.5rem; object-fit: cover; }
  .row h3 { font-size: var(--t-1); }
  .row h3 a { color: var(--ink); text-decoration: none; }
  .row h3 a:hover { color: var(--kraft); text-decoration: underline; }
  .row .spec-line { display: block; color: var(--kraft); font-size: 1rem; margin-top: 0.15rem; white-space: normal; }
  .row p { margin-top: 0.35rem; color: var(--ink); }
  @media (min-width: 48em) {
    .row.has-photo { grid-template-columns: 8rem 1fr; gap: var(--s3); }
    .row img, .row .mini-roll { width: 8rem; height: 8rem; }
  }
  .rows-plain .row { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .rows-plain .row .figure { font-family: var(--font-head); font-size: 1.15rem; white-space: nowrap; }
  .link-rows { border-top: 2px solid var(--ink); }
  .link-rows li { border-bottom: 1px solid var(--hair); }
  .link-rows a { display: flex; justify-content: space-between; gap: var(--s2); padding: 0.75rem 0; color: var(--ink); text-decoration: none; }
  .link-rows a:hover { color: var(--kraft); }
  .link-rows a span:last-child { color: var(--muted); text-align: right; }
  .link-rows a::after { content: "→"; color: var(--kraft); flex: none; }
  .link-rows.cols { columns: 2 14rem; column-gap: var(--s4); border-top: 0; }
  .link-rows.cols li { break-inside: avoid; }

  /* ---------- photographs: edge to edge or to the column, never framed ---------- */
  figure.photo img { width: 100%; }
  figure.photo figcaption, .credit { font-size: var(--t-xs); color: var(--muted); margin-top: 0.4rem; line-height: 1.45; }
  figure.photo figcaption .what { display: block; font-size: var(--t-sm); color: var(--ink); }
  .credit a, figure.photo figcaption a { color: var(--muted); }
  .band-photo { margin-top: var(--s4); }
  .band-photo img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
  @media (max-width: 47.99em) { .band-photo img { aspect-ratio: 4 / 3; } }

  /* ---------- footnotes and sources ---------- */
  .fn { font-size: 0.7em; vertical-align: super; line-height: 0; margin-left: 0.1em; }
  .fn a { text-decoration: none; font-weight: 700; }
  .notes { font-size: var(--t-sm); color: var(--muted); border-top: 1px solid var(--hair); padding-top: var(--s2); }
  .notes ol { padding-left: 1.25em; }
  .notes li + li { margin-top: 0.35rem; }
  .notes a { color: var(--muted); word-break: break-word; }
  .reviewed { font-size: var(--t-sm); color: var(--muted); }

  /* ---------- the request on a kraft ground ---------- */
  .request { background: var(--kraft); color: var(--on-kraft); padding-block: var(--s8) var(--s10); margin-top: var(--s8); }
  .request a { color: var(--on-kraft); }
  .request-grid { display: grid; gap: var(--s4); }
  .request h2 { font-size: clamp(var(--t-3), 1.6rem + 2vw, 3.4rem); }
  .request-copy p { margin-top: var(--s2); max-width: 34rem; color: #f3e9dd; }
  .request-copy .asks { margin-top: var(--s3); border-top: 1px solid rgba(255, 255, 255, 0.35); }
  .request-copy .asks li { border-bottom: 1px solid rgba(255, 255, 255, 0.35); padding: 0.55rem 0; line-height: 1.45; }
  .request-copy .asks b { font-family: var(--font-head); font-weight: 400; letter-spacing: 0.04em; margin-right: 0.3em; }
  .request-form { background: var(--surface); color: var(--ink); padding: var(--s3) var(--s2); }
  .request-form .noscript { color: var(--ink); }
  @media (min-width: 48em) { .request-form { padding: var(--s4); } }
  @media (min-width: 60em) {
    .request-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .request-copy { grid-column: 1 / span 5; }
    .request-form { grid-column: 6 / -1; }
  }
  .request-zip .request-copy { order: 0; }

  /* ---------- the margin note on guides ---------- */
  .margin-note { border-left: 3px solid var(--kraft); padding: 0.25rem 0 0.25rem var(--s2); font-size: 1rem; }
  .margin-note strong { font-family: var(--font-head); font-weight: 400; font-size: var(--t-1); display: block; letter-spacing: 0.02em; }
  .margin-note a { font-weight: 700; }

  /* ---------- footer on the kraft ground ---------- */
  .wrap-rule { height: 10px; margin-top: var(--s10); background: repeating-linear-gradient(-28deg, var(--kraft) 0 2px, transparent 2px 9px); opacity: 0.55; }
  .request + .wrap-rule { margin-top: 0; }
  .site-foot { background: var(--kraft); color: var(--on-kraft); padding-block: var(--s8) var(--s4); }
  .site-foot a { color: var(--on-kraft); text-decoration: none; }
  .site-foot a:hover { text-decoration: underline; }
  .foot-cols { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
  @media (min-width: 40em) { .foot-cols { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 64em) { .foot-cols { grid-template-columns: 1fr 1fr 1fr 1.4fr; } }
  .site-foot h2 { font-size: var(--t-1); margin-bottom: var(--s1); border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding-bottom: 0.35rem; }
  .site-foot li { padding: 0.18rem 0; font-size: 0.95rem; }
  .site-foot .states { columns: 2; column-gap: var(--s2); }
  .foot-line { margin-top: var(--s6); padding-top: var(--s2); border-top: 1px solid rgba(255, 255, 255, 0.4); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); justify-content: space-between; font-size: var(--t-sm); }
  .foot-line .brand { color: var(--on-kraft); }
  /* on the kraft footer the kraft ring would vanish, leaving only the core: draw the
     whole mark in the light colour, ring and core */
  .site-foot .brand svg circle { stroke: var(--on-kraft); }
  .site-foot .brand svg circle[data-core] { fill: var(--on-kraft); stroke: none; }

  /* ---------- drawings ---------- */
  .drawing { width: 100%; height: auto; }
  .drawing text { font-family: var(--font-body); }
  .drawing:not(.gauge-scale) text { fill: var(--ink); }
  .drawing:not(.gauge-scale) .lab { font-size: 13px; }
  .drawing .lab-h { font-family: var(--font-head); letter-spacing: 0.04em; }
  .drawing:not(.gauge-scale) .lab-h { font-size: 15px; }
  /* the gauge scale sets its own colours and sizes as attributes (the page's gauge in kraft,
     larger type on a phone); an author rule would override them, so it only inherits ink */
  .gauge-scale { fill: var(--ink); }

  /* ---------- small utilities ---------- */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .h3 { font-size: var(--t-1); line-height: 1.2; }
  .h4 { font-size: 1.15rem; line-height: 1.2; letter-spacing: 0.02em; }
  ul.plain, ol.plain { padding: 0; list-style: none; }
  .muted { color: var(--muted); }
  .lead { font-size: var(--t-1); line-height: 1.45; }
  .scale-wrap .only-narrow { display: none; }
  @media (max-width: 39.99em) { .scale-wrap .only-wide { display: none; } .scale-wrap .only-narrow { display: block; } }
  .figure-drawing { border-top: 2px solid var(--ink); padding-top: var(--s2); }
  .figure-drawing figcaption { font-size: var(--t-sm); color: var(--muted); margin-top: 0.5rem; }
  /* the gauge header already ends on a rule: no second one over its scale */
  .figure-drawing.gauge-figure { border-top: 0; padding-top: 0; }
  .ticks { padding-left: 1.1em; }
  .ticks li + li { margin-top: 0.45rem; }
  .top-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s3); }
  .facts-line { font-family: var(--font-head); letter-spacing: 0.04em; color: var(--kraft); }
  .qa dt { font-weight: 700; margin-top: var(--s3); max-width: 60ch; }
  .qa dt:first-child { margin-top: 0; }
  .qa dd { margin-top: 0.35rem; max-width: 64ch; }
}

@layer pages {
  /* ---------- home: band, then the triptych ---------- */
  .home-band { display: grid; gap: var(--s2); padding-block: var(--s4) var(--s3); }
  .home-band h1 { max-width: 15em; }
  .home-band .tagline { font-size: var(--t-1); line-height: 1.4; color: var(--muted); max-width: 40rem; }
  .home-band .btn { justify-content: center; }
  @media (min-width: 60em) {
    .home-band { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--s6); padding-block: var(--s5) var(--s4); }
    .home-band h1, .home-band .tagline { grid-column: 1; }
    .home-band .btn { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  }
  .triptych { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--ground); }
  .triptych figure { margin: 0; display: flex; flex-direction: column; }
  .triptych img { width: 100%; object-fit: cover; flex: 1; }
  .triptych .t-centre { grid-column: 1 / -1; order: -1; }
  .triptych .t-centre img { aspect-ratio: 4 / 3; }
  .triptych .t-side img { aspect-ratio: 3 / 4; flex: none; }
  .triptych figcaption { padding: 0.6rem var(--gutter) 0.2rem; }
  .triptych figcaption a { color: var(--ink); text-decoration: none; }
  .triptych figcaption a:hover .spec-line { color: var(--kraft); }
  .triptych figcaption .spec-line { display: block; font-size: 1.05rem; white-space: normal; }
  .triptych figcaption .what { display: block; font-size: var(--t-sm); color: var(--muted); }
  .triptych .credit { padding-inline: var(--gutter); margin-top: 0.1rem; }
  @media (min-width: 60em) {
    .triptych { grid-template-columns: 1fr 2fr 1fr; height: max(30rem, calc(100svh - 4rem - 15rem)); }
    .triptych .t-centre { grid-column: auto; order: 0; }
    .triptych img, .triptych .t-centre img, .triptych .t-side img { aspect-ratio: auto; min-height: 0; height: 100%; flex: 1; }
    .triptych figure { min-height: 0; }
    .triptych figcaption .spec-line { font-size: 1.2rem; }
  }

  .gauge-table { width: 100%; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
  .gauge-table th, .gauge-table td { padding: 0.6rem 0.5rem 0.6rem 0; text-align: left; border-top: 1px solid var(--hair); }
  .gauge-table thead th { font-family: var(--font-head); font-weight: 400; color: var(--muted); letter-spacing: 0.04em; border-top: 0; }
  .gauge-table td:first-child { font-family: var(--font-head); font-size: 1.15rem; white-space: nowrap; }
  .gauge-table td:first-child a { color: var(--ink); }

  .pair { display: grid; gap: var(--s3); }
  @media (min-width: 40em) { .pair { grid-template-columns: 1fr 1fr; } }
  .pair img { aspect-ratio: 4 / 3; object-fit: cover; }

  .split { display: grid; gap: var(--s4); align-items: start; }
  @media (min-width: 60em) { .split { grid-template-columns: repeat(12, minmax(0, 1fr)); } .split > :first-child { grid-column: 1 / span 6; } .split > :last-child { grid-column: 7 / -1; } }

  /* ---------- product page: the roll left, the spec block right ---------- */
  .product-top { display: grid; gap: var(--s4); padding-top: var(--s3); }
  .product-top .photo img { aspect-ratio: 1 / 1; object-fit: cover; }
  .product-top h1 { margin-bottom: var(--s3); font-size: clamp(2.375rem, 1.4rem + 2.6vw, 3.6rem); }
  .product-top .holds { margin-top: var(--s3); }
  .product-top .btn { margin-top: var(--s3); }
  @media (min-width: 60em) {
    .product-top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s4); }
    .product-top > .photo { grid-column: 1 / span 6; }
    .product-top > .spec-block { grid-column: 7 / -1; padding-top: var(--s2); }
  }
  .product-top.no-photo > .spec-block { grid-column: 1 / -1; }
  .product-top.no-photo .spec-block-inner { display: grid; gap: var(--s4); }
  @media (min-width: 60em) { .product-top.no-photo .spec-block-inner { grid-template-columns: 1fr 1fr; } }
  .verdicts { display: grid; gap: var(--s4); }
  @media (min-width: 48em) { .verdicts { grid-template-columns: 1fr 1fr; } }
  .verdicts h3 { border-bottom: 2px solid var(--ink); padding-bottom: 0.4rem; margin-bottom: var(--s1); }
  .verdicts ul { padding-left: 1.1em; }
  .verdicts li + li { margin-top: 0.5rem; }

  /* ---------- gauge page: the number set very large ---------- */
  .gauge-top { display: grid; gap: var(--s3); padding-top: var(--s3); align-items: end; border-bottom: 2px solid var(--ink); padding-bottom: var(--s3); }
  .gauge-num { font-family: var(--font-head); font-size: clamp(7rem, 4rem + 14vw, 15rem); line-height: 0.82; letter-spacing: -0.01em; color: var(--kraft); }
  .gauge-num small { font-size: 0.22em; letter-spacing: 0.06em; color: var(--ink); margin-left: 0.15em; }
  .gauge-top h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); }
  .gauge-top .thick { display: flex; gap: var(--s4); margin-top: var(--s2); }
  .gauge-top .thick div { border-top: 1px solid var(--hair-strong); padding-top: 0.4rem; }
  .gauge-top .thick b { display: block; font-family: var(--font-head); font-weight: 400; font-size: var(--t-3); }
  .gauge-top .thick span { font-size: var(--t-sm); color: var(--muted); }
  @media (min-width: 60em) { .gauge-top { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s6); } }

  /* ---------- guide: an article in one column with a margin note ---------- */
  .article { padding-top: var(--s3); }
  .article h1 { max-width: 18em; }
  .article .answer { font-size: var(--t-1); line-height: 1.5; margin-top: var(--s3); }
  .article-grid { display: grid; gap: var(--s4); margin-top: var(--s4); }
  .article-grid .margin-note.on-phone { order: 0; }
  @media (min-width: 64em) {
    .article-grid { grid-template-columns: minmax(0, 68ch) minmax(14rem, 1fr); column-gap: var(--s8); }
    .article-grid > .prose { grid-column: 1; }
    .article-grid > aside { grid-column: 2; }
    .margin-note.on-phone { display: none; }
  }
  @media (max-width: 63.99em) { .article-grid > aside .margin-note { display: none; } }
  .article .prose figure { margin-block: var(--s4); }
  .article .prose .pair figure { margin: 0; }
  .article .lede-photo { margin-top: var(--s4); }
  .article .lede-photo img { aspect-ratio: 16 / 8; object-fit: cover; width: 100%; }

  /* ---------- place pages ---------- */
  .place-top { display: grid; gap: var(--s4); padding-top: var(--s3); align-items: start; }
  .place-top .outline { max-width: 26rem; width: 100%; }
  @media (min-width: 60em) { .place-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s6); } }
  .place-top .lede { margin-top: var(--s3); font-size: 1.15rem; }
  .place-top .lede + p { margin-top: var(--s2); }
  .zips { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-family: var(--font-head); letter-spacing: 0.04em; }

  /* ---------- hub: catalogue section page ---------- */
  .hub-top { padding-top: var(--s3); }
  .hub-top h1 { max-width: 16em; }
  .hub-top .intro { font-size: var(--t-1); line-height: 1.45; max-width: 46rem; margin-top: var(--s3); }
  .hub-top > .btn { margin-top: var(--s3); }
  .hub-photo { margin-top: var(--s4); }
  .hub-photo img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }
  @media (max-width: 47.99em) { .hub-photo img { aspect-ratio: 4 / 3; } }
  /* a whole load in frame: a taller crop, set a little low so the top tier isn't cut */
  @media (min-width: 48em) { .hub-photo-tall img { aspect-ratio: 16 / 9; object-position: 50% 62%; } }

  .us-map { width: 100%; height: auto; }
  .us-map .st { fill: var(--surface); stroke: var(--muted); stroke-width: 0.6; }
  .us-map a .st { fill: var(--kraft-pale); }
  .us-map a:hover .st, .us-map a:focus .st { fill: var(--kraft); }

  .faq dt { font-family: var(--font-head); font-size: var(--t-1); margin-top: var(--s4); }
  .faq dd { margin-top: var(--s1); }
  .contact-top { display: grid; gap: var(--s4); padding-block: var(--s3) var(--s6); }
  @media (min-width: 60em) { .contact-top { grid-template-columns: repeat(12, minmax(0, 1fr)); } .contact-top > :first-child { grid-column: 1 / span 4; } .contact-top > :last-child { grid-column: 5 / -1; } }
  .not-found { padding-block: var(--s10); }
}

/* ---------- the embedded 1DB quote form (unlayered on purpose: see the top of the file) ---------- */
lead-form { display: block; color: var(--ink); background: var(--surface); --lf-gap: 1rem; --lf-radius: 0; --lf-accent: #6f4518; --lf-error: #a32a14; font-family: var(--font-body); }
lead-form .lf-title { font-family: var(--font-head); font-weight: 400; font-size: 1.75rem; line-height: 1.1; color: var(--ink); margin: 0 0 1rem; }
lead-form .lf-progress { font-size: 0.85rem; color: var(--muted); }
lead-form .lf-field { margin: 0 0 1rem; border: 0; padding: 0; min-width: 0; }
lead-form .lf-label, lead-form legend { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 0.35rem; color: var(--ink); padding: 0; }
lead-form .lf-req { color: var(--kraft); }
lead-form .lf-input { width: 100%; padding: 0.7rem 0.75rem; border: 1px solid var(--muted); border-radius: 0; background: #fff; color: var(--ink); font-size: 1rem; }
lead-form .lf-input:focus { outline: 3px solid var(--kraft); outline-offset: 1px; border-color: var(--kraft); }
lead-form .lf-group { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
lead-form .lf-group legend { width: 100%; }
lead-form .lf-check-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1rem; cursor: pointer; }
lead-form .lf-check, lead-form input[type="radio"], lead-form input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: none; accent-color: #6f4518; margin: 0; }
lead-form .lf-error { color: #a32a14; font-size: 0.9rem; margin-top: 0.3rem; }
lead-form .lf-status { font-size: 0.95rem; margin-top: 0.5rem; }
lead-form .lf-button { font-family: var(--font-head); font-size: 1.2rem; letter-spacing: 0.03em; padding: 0.85rem 1.5rem; border: 2px solid #6f4518; border-radius: 0; background: #6f4518; color: #fff; cursor: pointer; }
lead-form .lf-button:hover { background: #5a3712; border-color: #5a3712; }
lead-form .lf-secondary { font-size: 1rem; padding: 0.7rem 1.2rem; border: 2px solid #6f4518; border-radius: 0; background: transparent; color: #6f4518; cursor: pointer; }
lead-form .lf-success { font-size: 1.1rem; color: var(--ink); }
lead-form .addr-suggest { background: #fff; border: 1px solid var(--muted); border-radius: 0; color: var(--ink); }