/* ===========================================================================
   malarkeyroofingstl.com  //  THE SPECIMEN SHEET
   ---------------------------------------------------------------------------
   NON-AFFILIATION. Keys Roofing is an independent roofing contractor in greater
   St. Louis that installs Malarkey products. Keys is not affiliated with,
   endorsed by, sponsored by or authorised to speak for Malarkey Roofing
   Products, and holds no certification, tier or dealer status from that company
   or any other. Nothing in this stylesheet may be used to
   imitate a manufacturer's visual identity: no manufacturer logo, wordmark,
   brand colour or product photograph appears anywhere on this desk, and the
   palette below was chosen specifically so that this reads as a contractor's
   own page rather than as a manufacturer microsite.

   CONCEPT. A materials specimen sheet, the kind pinned above a bench where
   somebody is deciding what to put on a roof. Not a brochure, not a ledger,
   not a magazine. Every section is a numbered specimen with a hanging key in
   the margin, every product statement carries a visible attribution panel
   naming whose claim it is, and the one decorative device on the site is a
   drawn cross section rather than a photograph of a product.

   TYPE. The chain is deliberate, because we ship no web fonts and roughly half
   of visitors will never see the first link in it.
     Display: "Book Antiqua", Palatino, "Palatino Linotype", Georgia, serif.
       Book Antiqua is a Windows face. A WINDOWS visitor sees Book Antiqua, the
       intended old style serif with its calligraphic axis and open counters.
       A macOS visitor sees Palatino, which is the same design lineage at very
       nearly the same width and colour, so headline wrapping does not change.
       An ANDROID visitor has none of the four named faces, including Georgia,
       and lands on the generic serif, which is Noto Serif: taller x-height,
       narrower, slightly darker on the page. Every display size below was
       checked in Noto Serif as well, which is why the h1 clamp tops out at
       46px rather than the 54px the Palatino cut would carry.
     Body: "Candara", Optima, "Gill Sans", "Trebuchet MS", sans-serif.
       Candara is also a Windows face. A WINDOWS visitor sees Candara, a
       humanist sans with flared stems that sits beside an old style serif
       without arguing with it. A macOS visitor sees Optima, the closest thing
       the Apple system library holds to that brief. An ANDROID visitor lands
       on the generic sans, which is Roboto: neutral, a little wider in the
       figures, and noticeably less warm. Body size is 17px with 1.72 leading
       and a 68ch measure so that all three read at the same rhythm.
     Register: a generic monospace stack, letterspaced and capitalised, carries
       specimen keys, chips, captions and the citation lines. It never carries
       running prose.

   PALETTE. Cool, not cream. The four finished desks at this bar are all warm
   paper with a copper or red accent, so this one is built on a grey blue
   drawing board with cold water for its signal colour:
     board   #e4e9ea  the ground, the colour of a zinc bench top
     sheet   #fdfefe  the specimen card itself
     ink     #12181c  near black with a blue cast
     asphalt #161c20  the dark bands: masthead rule, contact block, footer
     ice     #1d6b80  the single link and key colour. Cold water on a roof.
     brass   #9a7318  used for exactly one job: marking a statement whose
                      authority belongs to somebody else, that is, a
                      manufacturer's published specification or a source note.
   Warm colour is therefore never decorative here. It always means "this claim
   is not ours".

   SIGNATURE DEVICE. The stratum bar. A drawn cross section of a laminate
   shingle, granule surface over asphalt over fibreglass mat over asphalt,
   rendered as hard stop gradient bands. It is the section divider at 8px, it
   is the rule under the masthead, and once per site it opens out into a fully
   labelled cross section diagram built from list items, with no image file.
   Second device: the attribution panel, a brass ruled block that quarantines
   any statement whose source is the manufacturer rather than us.

   RESPONSIVE. Authored at 390px first. Hanging keys fold inline below 1080px,
   two column figure rows and the form band collapse below 860px, the nav
   scrolls horizontally below 700px. Checked at 390px and 1440px.

   HOUSE RULES. No web fonts, no external stylesheet, no third party request of
   any kind. No em dashes and no en dashes anywhere, including in this comment.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* ground and card */
  --board:        #e4e9ea;
  --board-2:      #dae1e3;
  --board-3:      #ccd5d8;
  --sheet:        #fdfefe;
  --sheet-2:      #f3f7f8;
  --sheet-3:      #eaf0f1;

  /* ink */
  --ink:          #12181c;
  --ink-2:        #38434a;
  --ink-3:        #5a656d;
  --ink-4:        #616f76;

  /* rules */
  --rule:         #cbd5d8;
  --rule-2:       #dfe7e9;
  --rule-3:       #b6c3c7;
  --rule-dark:    rgba(238,243,244,0.18);

  /* dark bands */
  --asphalt:      #161c20;
  --asphalt-2:    #202a2f;
  --asphalt-3:    #2b373d;
  --on-dark:      #eef3f4;
  --on-dark-2:    #a6b6bd;
  --on-dark-3:    #809299;

  /* the one signal colour */
  --ice:          #1d6b80;
  --ice-deep:     #14515f;
  --ice-hi:       #4fa5bc;
  --ice-wash:     #e0eef1;
  --ice-wash-2:   #cee5ea;

  /* borrowed authority only */
  --brass:        #9a7318;
  --brass-deep:   #75570f;
  --brass-wash:   #f6f0dd;
  --brass-rule:   #ddcb9d;

  /* the drawn cross section */
  --lay-granule:  #78838a;
  --lay-asphalt:  #23292c;
  --lay-mat:      #cdbf9a;
  --lay-back:     #2f383c;

  /* type */
  --font-display: "Book Antiqua", Palatino, "Palatino Linotype", Georgia, serif;
  --font-body:    "Candara", Optima, "Gill Sans", "Trebuchet MS", sans-serif;
  --font-reg:     ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* metrics */
  --shell:        1060px;
  --measure:      68ch;
  --pad:          clamp(18px, 5vw, 40px);
  --gap:          clamp(26px, 4vw, 46px);
  --radius:       3px;
}

/* ---------------------------------------------------------------------------
   2. RESET AND BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--board);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  letter-spacing: 0.005em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ice-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ice); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--asphalt); color: var(--on-dark);
  padding: 10px 16px; z-index: 40;
}
.skip:focus { left: 8px; top: 8px; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--pad);
}

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.008em;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(30px, 6vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.018em;
}

h2 {
  font-size: clamp(24px, 3.4vw, 33px);
  line-height: 1.2;
  margin-top: 0;
}

h3 {
  font-size: clamp(19px, 2.2vw, 22px);
  line-height: 1.3;
}

h4 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

p { margin: 0 0 1.05em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

.lede {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.6vw, 23px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 58ch;
}

.pull {
  font-family: var(--font-display);
  font-size: clamp(21px, 3vw, 27px);
  line-height: 1.34;
  color: var(--ice-deep);
  border-top: 2px solid var(--ice);
  border-bottom: 1px solid var(--rule);
  padding: 0.7em 0;
  margin: 1.6em 0;
  max-width: 44ch;
}

/* register face: keys, chips, captions, citations. Never prose. */
.reg {
  font-family: var(--font-reg);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.5em;
}
.reg.ice   { color: var(--ice-deep); }
.reg.brass { color: var(--brass-deep); }
.reg.pale  { color: var(--on-dark-2); }

/* ---------------------------------------------------------------------------
   4. THE STRATUM BAR, signature device
   A drawn cross section of a laminate shingle used as a rule.
   --------------------------------------------------------------------------- */
.strata {
  height: 8px;
  width: 100%;
  background: linear-gradient(
    to bottom,
    var(--lay-granule) 0 34%,
    var(--lay-asphalt) 34% 58%,
    var(--lay-mat)     58% 70%,
    var(--lay-back)    70% 100%
  );
}
.strata.thin { height: 5px; }
.strata.short { width: 132px; }
.strata.tall { height: 14px; }

/* the labelled version, once per site, built with no image file */
.model {
  margin: 1.8em 0;
  border: 1px solid var(--rule);
  background: var(--sheet-2);
  padding: 20px;
}
.model ol { list-style: none; margin: 0; padding: 0; counter-reset: lay; }
.model li {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 16px;
  align-items: stretch;
  padding: 12px 0;
  border-bottom: 1px dotted var(--rule);
}
.model li:last-child { border-bottom: 0; padding-bottom: 0; }
.model .swatch {
  height: auto;
  min-height: 46px;
  border: 1px solid rgba(18,24,28,0.25);
}
.model .swatch.granule { background: var(--lay-granule); }
.model .swatch.asphalt { background: var(--lay-asphalt); }
.model .swatch.mat     { background: var(--lay-mat); }
.model .swatch.back    { background: var(--lay-back); }
.model dt {
  font-family: var(--font-reg);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ice-deep);
  margin-bottom: 4px;
}
.model dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.model dl { margin: 0; }

/* ---------------------------------------------------------------------------
   5. MASTHEAD AND NAVIGATION
   --------------------------------------------------------------------------- */
.masthead {
  background: var(--sheet);
  border-bottom: 1px solid var(--rule);
}
.masthead .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
  padding-block: 20px 18px;
}

.wordmark {
  display: block;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(20px, 3.2vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.wordmark span {
  display: block;
  font-family: var(--font-reg);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 7px;
}

.masthead-call { text-align: right; }
.masthead-call a {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.6vw, 22px);
  color: var(--ice-deep);
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  padding: 7px 0;
}
.masthead-call a:hover { text-decoration: underline; }

.nav {
  background: var(--asphalt);
  border-bottom: 3px solid var(--ice-deep);
}
.nav .shell {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-block: 0;
}
.nav a {
  flex: 0 0 auto;
  color: var(--on-dark-2);
  text-decoration: none;
  font-family: var(--font-reg);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 13px 12px 12px;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  white-space: nowrap;
}
.nav a:hover { color: var(--on-dark); background: var(--asphalt-2); }
.nav a[aria-current="page"] {
  color: var(--on-dark);
  border-bottom-color: var(--ice-hi);
}

/* ---------------------------------------------------------------------------
   6. HERO
   --------------------------------------------------------------------------- */
.hero {
  background: var(--sheet);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(34px, 6vw, 62px) clamp(30px, 5vw, 52px);
}
.hero .lede { margin-bottom: 1.1em; }
.hero .shell { display: grid; grid-template-columns: 1fr; gap: 32px; }

/* the summary panel: the specimen's own label, set as a specification block */
.hero-facts {
  background: var(--sheet-2);
  border: 1px solid var(--rule);
  align-self: start;
}
.hero-facts dl { margin: 0; padding: 14px 18px 4px; }
.hero-facts dl > div {
  padding: 10px 0;
  border-bottom: 1px dotted var(--rule);
}
.hero-facts dl > div:last-child { border-bottom: 0; }
.hero-facts dt {
  font-family: var(--font-reg);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ice-deep);
  margin-bottom: 4px;
}
.hero-facts dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.hero-facts > p { margin: 0; padding: 4px 18px 16px; }
/* the panel's call line is a control, so the number carries the tap area
   and the paragraph gives its own padding back to it */
.hero-facts > p.reg { padding-top: 0; padding-bottom: 4px; }
.hero-facts > p.reg a { display: inline-block; padding: 13px 0; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-bottom: 18px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 26px;
}

.btn {
  display: inline-block;
  background: var(--ice-deep);
  color: #ffffff;
  text-decoration: none;
  font-family: var(--font-reg);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid var(--ice-deep);
  border-radius: var(--radius);
}
.btn:hover { background: var(--ice); color: #ffffff; }
.btn.ghost {
  background: transparent;
  color: var(--ice-deep);
  border-color: var(--rule-3);
}
.btn.ghost:hover { background: var(--ice-wash); color: var(--ice-deep); }

.callnum {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.6vw, 23px);
  color: var(--ice-deep);
  text-decoration: none;
  display: inline-block;
  padding: 7px 0;
}
.callnum:hover { text-decoration: underline; }

/* page header for inner sheets */
.pagehead {
  background: var(--sheet);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(28px, 5vw, 46px) clamp(24px, 4vw, 38px);
}
.pagehead h1 { max-width: 20ch; }
.crumb {
  font-family: var(--font-reg);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.crumb a { color: var(--ink-3); }

/* ---------------------------------------------------------------------------
   7. THE SHEET AND ITS SPECIMENS
   --------------------------------------------------------------------------- */
.sheetwrap { padding-block: clamp(26px, 4vw, 44px) clamp(30px, 5vw, 54px); }

.sheet {
  background: var(--sheet);
  border: 1px solid var(--rule);
  max-width: var(--shell);
  margin: 0 auto;
}

.spec {
  position: relative;
  padding: clamp(26px, 4vw, 44px) var(--pad);
  border-bottom: 1px solid var(--rule-2);
}
.spec:last-child { border-bottom: 0; }
.spec.tint { background: var(--sheet-2); }

.spec > .key {
  font-family: var(--font-reg);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ice-deep);
  display: block;
  margin-bottom: 10px;
}

.spec-body { max-width: 72ch; }

/* ---------------------------------------------------------------------------
   8. CHIPS AND MARKS
   --------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-reg);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ice-deep);
  background: var(--ice-wash);
  border: 1px solid var(--ice-wash-2);
  padding: 5px 10px;
  border-radius: var(--radius);
}
.chip::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--ice);
  flex: 0 0 auto;
}
.chip.brass {
  color: var(--brass-deep);
  background: var(--brass-wash);
  border-color: var(--brass-rule);
}
.chip.brass::before { background: var(--brass); }
.chip.plain {
  color: var(--ink-2);
  background: var(--sheet-3);
  border-color: var(--rule);
}
.chip.plain::before { background: var(--ink-4); }

.chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

/* ---------------------------------------------------------------------------
   9. THE ATTRIBUTION PANEL
   Any statement whose authority is somebody else's lives inside one of these.
   --------------------------------------------------------------------------- */
.attrib {
  border-left: 4px solid var(--brass);
  background: var(--brass-wash);
  padding: 18px 20px;
  margin: 1.5em 0;
}
.attrib .reg { color: var(--brass-deep); }
.attrib p { max-width: 62ch; color: var(--ink-2); }
.attrib p:last-child { margin-bottom: 0; }

/* the independent installer notice */
.stamp {
  border: 1px solid var(--brass-rule);
  border-top: 3px solid var(--brass);
  background: var(--brass-wash);
  padding: 20px 22px;
  margin: 1.6em 0;
}
.stamp h2, .stamp h3 {
  font-family: var(--font-reg);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 12px;
}
.stamp p {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 74ch;
}

/* footer variant, on the dark band */
.foot .stamp {
  background: transparent;
  border-color: rgba(154,115,24,0.5);
  border-top-color: var(--brass);
}
.foot .stamp h3 { color: #d8b969; }
.foot .stamp p { color: var(--on-dark-2); }

/* ---------------------------------------------------------------------------
   10. LISTS, DEFINITIONS, TABLES
   --------------------------------------------------------------------------- */
.spec-body ul, .spec-body ol { max-width: var(--measure); padding-left: 1.25em; }
.spec-body li { margin-bottom: 0.55em; }

.numbered {
  list-style: none;
  padding: 0;
  margin: 1.3em 0;
  counter-reset: n;
  max-width: var(--measure);
}
.numbered li {
  counter-increment: n;
  position: relative;
  padding: 0 0 16px 46px;
  margin: 0 0 16px;
  border-bottom: 1px dotted var(--rule);
}
.numbered li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.numbered li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0; top: 2px;
  font-family: var(--font-reg);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ice);
  border-bottom: 1px solid var(--ice-wash-2);
  padding-bottom: 2px;
}

.deflist { margin: 1.4em 0; }
.deflist > div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 6px 24px;
  padding: 13px 0;
  border-top: 1px solid var(--rule-2);
}
.deflist > div:last-child { border-bottom: 1px solid var(--rule-2); }
.deflist dt {
  font-family: var(--font-reg);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ice-deep);
  padding-top: 3px;
}
.deflist dd { margin: 0; color: var(--ink-2); font-size: 16px; }

.tablewrap { overflow-x: auto; margin: 1.5em 0; }
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: 15px;
}
caption {
  caption-side: bottom;
  text-align: left;
  font-family: var(--font-reg);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 10px;
  line-height: 1.7;
}
th, td {
  text-align: left;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--rule-2);
  vertical-align: top;
}
th {
  font-family: var(--font-reg);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule-3);
  font-weight: 400;
}
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   11. PLATES
   --------------------------------------------------------------------------- */
.plate {
  margin: 0;
  background: var(--sheet-2);
  border: 1px solid var(--rule);
  padding: 12px;
}
.plate img { width: 100%; border: 1px solid var(--rule-3); }
.plate figcaption {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  padding: 12px 2px 2px;
  max-width: 66ch;
}
.plate figcaption .reg { display: block; margin-bottom: 5px; }

.plate-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 1.6em 0;
}
.plate-wide { margin: 1.6em 0; }

/* a plate that is a direct child of the sheet is a full width panel between
   specimens, not a figure floating inside a text column */
.sheet > .plate,
.sheet > .plate-row {
  margin: 0;
  padding: clamp(20px, 3vw, 34px) var(--pad);
  background: var(--sheet-3);
  border: 0;
  border-bottom: 1px solid var(--rule-2);
}
.sheet > .plate > figcaption { max-width: 74ch; }

/* ---------------------------------------------------------------------------
   12. CARDS AND THE INDEX
   --------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
  margin: 1.5em 0 0;
}
.card {
  background: var(--sheet-2);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ice-deep);
  padding: 18px 18px 20px;
}
.card a {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.24;
  display: block;
  padding: 6px 0;
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--ink);
}
.card a:hover { color: var(--ice-deep); text-decoration: underline; }
.card p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.card .reg { margin-bottom: 8px; }

.faq > div {
  padding: 16px 0;
  border-top: 1px solid var(--rule-2);
}
.faq > div:last-child { border-bottom: 1px solid var(--rule-2); }
.faq h3 { margin-bottom: 0.35em; }
.faq p { color: var(--ink-2); }

/* ---------------------------------------------------------------------------
   13. THE ASK BAND AND THE FORM
   --------------------------------------------------------------------------- */
.band {
  background: var(--asphalt);
  color: var(--on-dark);
  border-top: 3px solid var(--ice-deep);
  padding-block: clamp(32px, 5vw, 56px);
}
.band h2 { color: var(--on-dark); }
.band p { color: var(--on-dark-2); }
.band .lede { color: var(--on-dark); }
.band a { color: var(--ice-hi); }
.band .callnum { color: var(--ice-hi); }
.band form p { color: var(--ink-2); }
.band form .formnote { color: var(--ink-3); }
.band form .privacy { color: var(--ink-4); }
.band form .ok { color: var(--ink); }

.band-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}

form {
  background: var(--sheet);
  border: 1px solid var(--rule-3);
  padding: clamp(18px, 3vw, 26px);
}
form label {
  display: block;
  font-family: var(--font-reg);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
form input, form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--sheet-2);
  border: 1px solid var(--rule-3);
  border-radius: var(--radius);
  padding: 11px 12px;
  letter-spacing: normal;
  text-transform: none;
}
form textarea { resize: vertical; min-height: 78px; }
form input:focus, form textarea:focus { background: #ffffff; border-color: var(--ice); }

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

form button {
  width: 100%;
  font-family: var(--font-reg);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--ice-deep);
  border: 1px solid var(--ice-deep);
  border-radius: var(--radius);
  padding: 15px 18px;
  cursor: pointer;
}
form button:hover { background: var(--ice); }
form button:disabled { background: var(--ink-4); border-color: var(--ink-4); cursor: default; }

.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

.formnote {
  font-family: var(--font-reg);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin: 12px 0 0;
  min-height: 1.2em;
}
.formnote a { color: var(--ice-deep); }
.ok {
  font-size: 16px;
  color: var(--ink);
  margin: 0;
}
.privacy {
  font-family: var(--font-reg);
  font-size: 10px;
  letter-spacing: 0.09em;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 14px 0 0;
}

/* ---------------------------------------------------------------------------
   14. FOOTER
   --------------------------------------------------------------------------- */
.foot {
  background: var(--asphalt-2);
  color: var(--on-dark-2);
  padding-block: clamp(30px, 4vw, 46px);
  font-size: 15px;
}
.foot a { color: var(--ice-hi); }
.foot p { max-width: 78ch; }
.footmark {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--on-dark);
  margin-bottom: 0.4em;
}
.foot-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 0;
  margin: 20px 0;
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  padding-block: 16px;
}
.foot-links a {
  font-family: var(--font-reg);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-dark-2);
}
.foot-links a:hover { color: var(--on-dark); text-decoration: underline; }
.legal {
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--on-dark-3);
  margin-top: 18px;
}

/* ---------------------------------------------------------------------------
   15. RESPONSIVE
   --------------------------------------------------------------------------- */

/* hanging keys in the margin, wide screens only */
@media (min-width: 1080px) {
  .spec { padding-left: calc(var(--pad) + 96px); }
  .spec > .key {
    position: absolute;
    left: var(--pad);
    top: clamp(26px, 4vw, 46px);
    width: 76px;
    margin: 0;
    text-align: right;
    border-right: 2px solid var(--ice-wash-2);
    padding-right: 12px;
    line-height: 1.5;
  }
  .sheetwrap .shell { padding-inline: var(--pad); }
}

@media (min-width: 1000px) {
  /* eleven nav items have to sit inside the same 1060px measure as the sheet,
     so the wide breakpoint tightens the gutters rather than scrolling the bar */
  .nav a { padding-inline: 10px; }
  .hero .shell {
    grid-template-columns: minmax(0, 1fr) 312px;
    gap: 56px;
    align-items: start;
  }
}

@media (max-width: 1000px) {
  .band-grid { grid-template-columns: 1fr; }
  .hero-facts { max-width: 460px; }
}

@media (max-width: 860px) {
  .plate-row { grid-template-columns: 1fr; }
  .deflist > div { grid-template-columns: 1fr; gap: 4px; }
  .model li { grid-template-columns: 52px 1fr; gap: 12px; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; line-height: 1.68; }
  /* a scrolling table hides its own caption off the right edge, so below this
     width the table wraps in place instead and the scroller becomes a fallback */
  table { min-width: 0; font-size: 14.5px; }
  th, td { padding-right: 10px; }
  .masthead .shell { align-items: flex-start; flex-direction: column; }
  .masthead-call { text-align: left; }
  .pair { grid-template-columns: 1fr; }
  .hero-actions { gap: 12px; }
  .btn { width: 100%; text-align: center; }
  .pull { margin: 1.3em 0; }
  .plate { padding: 8px; }
  .foot-links { gap: 4px 14px; }
}

@media (max-width: 420px) {
  :root { --pad: 16px; }
  .nav a { padding: 11px 10px 10px; font-size: 10.5px; }
  .model li { grid-template-columns: 40px 1fr; }
  .numbered li { padding-left: 38px; }
}

/* ---------------------------------------------------------------------------
   16. MOTION, SELECTION, PRINT
   --------------------------------------------------------------------------- */
::selection { background: var(--ice-wash-2); color: var(--ink); }

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

@media print {
  body { background: #ffffff; font-size: 11pt; }
  .nav, .band, .skip, form { display: none; }
  .sheet, .spec, .hero { border: 0; background: #ffffff; }
  .strata { height: 3px; }
  a { color: #000000; text-decoration: underline; }
  .foot { background: #ffffff; color: #000000; }
}