/* ============================================================
   Verity Pest Management — pest control demo template
   Identity: "The Collection". See verity-brand.md.

   Sixth in the trade set. Every visible axis differs:

     collision  cool gray  / torch red      / Anton caps      / 1 page
     mechanical green-white/ petrol+yellow  / Saira caps      / 1 page   dialect-ok: recorded palette id
     vet        oatmeal    / burgundy+sage  / Gabarito + serif/ 6 pages
     remodel    graphite   / brass          / Archivo EXPANDED/ 9 pages
     tree       stone+loden/ marking orange / Aleo slab       / 6 pages
     THIS       DEEP INDIGO/ scarlet        / Petrona serif   / 8 pages
                + bone mounts  + severity     + DM Mono labels
                                 chips

   The category default is a cartoon roach under a red X. This is
   the opposite: an entomological collection. Seventeen identified
   specimens, each mounted on a bone card inside a double rule,
   with a typeset label carrying species, photographer and license.

   The label system IS the design. It also happens to be the legal
   requirement — most of these images are CC BY or CC BY-SA and
   attribution is not optional — so the obligation and the concept
   are the same object.

   IMAGES ARE NEVER CROPPED OR RE-COLORED. object-fit:contain on a
   bone mount, full color, always. On a page whose entire job is
   identification, cropping can remove the diagnostic feature and
   a color grade can make a species unrecognizable. §12.0's "keep
   artwork colors accurate" is load-bearing here, not decorative.

   SCARLET HAS THREE ROLES AND THREE VALUES, declared before
   anything was drawn — the practice the two previous builds
   arrived at the hard way. Fill, text-on-bone, text-on-indigo.
   ============================================================ */

:root{
  /* the ground — deep indigo, the inside of a specimen cabinet */
  --ink:hsl(220 46% 11%);
  --ink-2:hsl(220 40% 16%);
  --ink-3:hsl(220 30% 24%);
  --rule:hsl(220 24% 32%);
  /* the mount — bone card stock */
  --bone:hsl(42 30% 95%);
  --bone-2:hsl(40 20% 90%);
  --bone-line:hsl(40 12% 78%);
  --on-bone:hsl(220 30% 14%);
  --on-bone-2:hsl(220 12% 36%);
  /* type on indigo */
  --on-ink:hsl(42 24% 94%);
  --on-ink-2:hsl(220 14% 70%);
  /* the signal — scarlet, in its three roles */
  --act:hsl(4 76% 44%);        /* FILL. Bone type sits on it */
  --act-ink:hsl(4 72% 38%);    /* TEXT on bone */
  --act-lit:hsl(4 80% 66%);    /* TEXT on indigo */
  /* severity chips: dark type on a light tint, always */
  --sev-bad-bg:hsl(4 70% 89%);   --sev-bad-fg:hsl(4 72% 27%);
  --sev-mid-bg:hsl(38 78% 86%);  --sev-mid-fg:hsl(28 82% 24%);
  --sev-ok-bg:hsl(166 38% 86%);  --sev-ok-fg:hsl(170 62% 18%);
  --r:5px;
  --pad:clamp(56px,7vw,110px);
  --gut:clamp(18px,2.2vw,30px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--on-ink);
  font:400 17px/1.62 Onest,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Petrona,Georgia,serif;font-weight:600;margin:0;line-height:1.13;
  letter-spacing:-.008em}
p{margin:0 0 1em}
img{max-width:100%}
a{color:inherit}
ul,ol{list-style:none;margin:0;padding:0}
.wrap{max-width:1300px;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Any component that sets its own display beats the UA sheet's [hidden]{display:none}
   on specificity. .plate is display:flex, so the specimen filter set the attribute on
   fourteen plates and hid none of them. This restores the attribute's meaning for the
   whole document rather than for the one component where it was caught. */
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--act-lit);outline-offset:3px}
.paper :focus-visible{outline-color:var(--act-ink)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--act);color:var(--bone);
  padding:12px 18px;font-weight:600;text-decoration:none}
.skip:focus{left:8px;top:8px}

/* ---------- the label voice ----------
   DM Mono is the determination label on a pinned specimen. It is used
   for labels and data only, never for reading copy. */
.lab{font-family:"DM Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--on-ink-2)}
.paper .lab{color:var(--on-bone-2)}
.eyebrow{display:block;font-family:"DM Mono",ui-monospace,monospace;font-size:12px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--act-lit);
  margin-bottom:18px}
.paper .eyebrow{color:var(--act-ink)}

/* ---------- surfaces ---------- */
.section{padding:var(--pad) 0}
.paper{background:var(--bone);color:var(--on-bone)}
.paper h1,.paper h2,.paper h3,.paper h4{color:var(--on-bone)}
.section.tint{background:var(--ink-2)}
.paper.tint{background:var(--bone-2)}
h1{font-size:clamp(34px,4.6vw,62px);letter-spacing:-.02em}
h2{font-size:clamp(26px,3.2vw,42px);letter-spacing:-.014em}
h3{font-size:clamp(19px,1.5vw,23px)}
.lede{font-size:clamp(17px,1.5vw,21px);line-height:1.58;color:var(--on-ink-2);max-width:58ch;margin:20px 0 0}
.paper .lede{color:var(--on-bone-2)}
.head{margin-bottom:clamp(32px,3.8vw,54px)}
.head h2{max-width:19ch}
.head p{color:var(--on-ink-2);max-width:60ch;margin:16px 0 0;font-size:18px}
.paper .head p{color:var(--on-bone-2)}

/* ---------- masthead ---------- */
.mast{background:var(--ink);border-bottom:1px solid var(--rule);position:relative;z-index:40}
.mast .wrap{display:flex;align-items:center;gap:22px;min-height:76px}
.logo{display:flex;align-items:baseline;gap:9px;text-decoration:none;margin-right:auto;padding:8px 0}
.logo b{font-family:Petrona,Georgia,serif;font-size:25px;font-weight:600;letter-spacing:-.015em}
.logo small{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-ink-2)}
.nav{display:flex;gap:24px}
.nav a{text-decoration:none;font-size:15px;color:var(--on-ink-2);padding:7px 0;position:relative}
.nav a:hover{color:var(--on-ink)}
.nav a.here{color:var(--on-ink)}
.nav a.here::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--act-lit)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:13px 24px;
  border-radius:var(--r);border:1.5px solid transparent;text-decoration:none;font-weight:600;
  font-size:16px;cursor:pointer;font-family:inherit;
  transition:transform .07s ease,background-color .16s ease,border-color .16s ease,color .16s ease}
.btn-1{background:var(--act);color:var(--bone);border-color:var(--act)}
.btn-1:hover{background:hsl(4 76% 38%);border-color:hsl(4 76% 38%)}
.btn-2{background:transparent;color:var(--on-ink);border-color:var(--rule)}
.btn-2:hover{border-color:var(--on-ink-2)}
.paper .btn-2{color:var(--on-bone);border-color:var(--bone-line)}
.paper .btn-2:hover{border-color:var(--on-bone-2)}
.btn:active{transform:translateY(1px)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- THE PLATE ----------
   A specimen mount: bone card, double hairline rule, image contained
   (never cropped), typeset label below. This is the whole identity. */
.plate{background:var(--bone);border:1px solid var(--bone-line);
  outline:1px solid var(--bone-line);outline-offset:4px;
  display:flex;flex-direction:column;color:var(--on-bone)}
.plate-img{margin:0;background:var(--bone);padding:14px;aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.plate-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.plate-body{padding:16px 18px 20px;border-top:1px solid var(--bone-line);flex:1;
  display:flex;flex-direction:column;gap:7px}
.plate-body h3{font-size:20px;line-height:1.2}
.plate-sci{font-family:Petrona,Georgia,serif;font-style:italic;font-size:15px;color:var(--on-bone-2)}
.plate-body p{font-size:14.5px;line-height:1.55;color:var(--on-bone-2);margin:0}
.plate-cred{font-family:"DM Mono",monospace;font-size:10.5px;line-height:1.5;
  color:var(--on-bone-2);margin-top:auto;padding-top:10px;border-top:1px solid var(--bone-line)}
.plate-cred a{color:var(--on-bone-2)}
.plates{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--gut) + 10px)}
.plates.wide-3{grid-template-columns:repeat(3,1fr)}

/* severity chip */
.sev{display:inline-block;font-family:"DM Mono",monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;padding:4px 9px;border-radius:2px;align-self:flex-start}
.sev.bad{background:var(--sev-bad-bg);color:var(--sev-bad-fg)}
.sev.mid{background:var(--sev-mid-bg);color:var(--sev-mid-fg)}
.sev.ok{background:var(--sev-ok-bg);color:var(--sev-ok-fg)}

/* ---------- the lookalike pair ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);align-items:start}
.tells{border-top:1px solid var(--rule);margin-top:clamp(26px,3vw,40px)}
.tells li{display:grid;grid-template-columns:170px 1fr 1fr;gap:10px 26px;
  padding:18px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.tells .k{font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-ink-2)}
.tells b{font-weight:600}
.tells span.v{color:var(--on-ink-2);font-size:15.5px}

/* ---------- filter bar (identify page) ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(26px,3vw,40px)}
.filters button{font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;min-height:44px;padding:10px 16px;border-radius:var(--r);
  border:1px solid var(--rule);background:transparent;color:var(--on-ink-2);cursor:pointer;
  transition:border-color .15s,color .15s,background-color .15s}
.filters button:hover{color:var(--on-ink);border-color:var(--on-ink-2)}
.filters button[aria-pressed=true]{background:var(--bone);color:var(--on-bone);border-color:var(--bone)}

/* ---------- ground safety ----------
   Every component below reads a dark-ground token by default. Each one needs a
   light-ground counterpart or it silently fails contrast the first time it is
   dropped into a .paper section — which is exactly what happened to .zones on
   the home page here (measured 2.0:1), and to a button on the loden call bar in
   the previous build, and to a hero CTA in the one before that.

   Three builds, one bug. So this is now a single audited block rather than an
   override added wherever the failure happened to show up, and the tokens are
   listed together so a new component can be checked against the list. */
.paper .pair-vs span,
.paper .tells .k,
.paper .tells span.v,
.paper .filters button,
.paper .zones span,
.paper .steps p{color:var(--on-bone-2)}
.paper .zones b .n,
.paper .steps li::before{color:var(--act-ink)}
.paper .tells li,
.paper .zones li,
.paper .facts li,
.paper .facts,
.paper .steps li,
.paper .filters button{border-color:var(--bone-line)}
.paper .house{background:var(--bone-2);border-color:var(--bone-line)}
.paper .filters button[aria-pressed=true]{background:var(--on-bone);color:var(--bone);
  border-color:var(--on-bone)}

/* ---------- rows ---------- */
.rows li{display:grid;grid-template-columns:160px 1fr;gap:8px 32px;padding:24px 0;
  border-top:1px solid var(--rule)}
.rows li:last-child{border-bottom:1px solid var(--rule)}
.paper .rows li{border-color:var(--bone-line)}
.rows .k{font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--act-lit);padding-top:4px}
.paper .rows .k{color:var(--act-ink)}
.rows h3{margin-bottom:7px}
.rows p{color:var(--on-ink-2);max-width:64ch;margin:0 0 .7em}
.rows p:last-child{margin-bottom:0}
.paper .rows p{color:var(--on-bone-2)}
.rows a{color:var(--act-lit);font-weight:500}
.paper .rows a{color:var(--act-ink)}

/* ---------- the house section drawing ---------- */
.house{background:var(--ink-2);border:1px solid var(--rule);padding:clamp(18px,2.4vw,30px)}
.house svg{display:block;width:100%;height:auto}
.zones{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 26px;margin-top:22px}
.zones li{border-top:1px solid var(--rule);padding-top:11px}
.zones b{display:block;font-size:15px;margin-bottom:3px}
.zones b .n{font-family:"DM Mono",monospace;color:var(--act-lit);margin-right:8px}
.zones span{font-size:14.5px;line-height:1.55;color:var(--on-ink-2)}

/* ---------- source panel ---------- */
.source{background:var(--ink-2);border-left:4px solid var(--act);padding:clamp(24px,3vw,38px)}
.paper .source{background:var(--bone-2);border-left-color:var(--act-ink)}
.source h3{margin-bottom:12px;font-size:clamp(21px,2vw,28px)}
.source p{color:var(--on-ink-2);max-width:60ch}
.paper .source p{color:var(--on-bone-2)}
.source cite{display:block;font-family:"DM Mono",monospace;font-style:normal;font-size:12.5px;
  line-height:1.65;color:var(--on-ink-2);border-top:1px solid var(--rule);padding-top:14px;margin-top:6px}
.paper .source cite{color:var(--on-bone-2);border-color:var(--bone-line)}
.source cite a{color:var(--act-lit)}
.paper .source cite a{color:var(--act-ink)}

/* ---------- misc ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,52px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
.facts li{padding:22px 20px 22px 0;border-right:1px solid var(--rule)}
.facts li:last-child{border-right:0}
.facts .n{display:block;font-family:Petrona,Georgia,serif;font-size:clamp(26px,2.6vw,34px);
  font-weight:600;color:var(--act-lit);line-height:1}
.paper .facts .n{color:var(--act-ink)}
.facts .l{display:block;font-size:14px;line-height:1.5;color:var(--on-ink-2);margin-top:8px;max-width:27ch}
.paper .facts .l{color:var(--on-bone-2)}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:18px;
  padding:20px 0;border-top:1px solid var(--rule)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:"DM Mono",monospace;
  font-size:13px;color:var(--act-lit);padding-top:5px}
.steps{counter-reset:s}
.steps h3{margin-bottom:6px}
.steps p{color:var(--on-ink-2);margin:0;max-width:62ch;font-size:15.5px}

/* ---------- form ---------- */
.form{background:var(--bone);color:var(--on-bone);padding:clamp(24px,3vw,38px)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{display:flex;flex-direction:column;gap:6px}
.f.full{grid-column:1/-1}
.f label{font-size:14px;font-weight:600}
.f input,.f textarea,.f select{font:inherit;font-size:16px;padding:12px 13px;
  border:1px solid var(--bone-line);border-radius:var(--r);background:var(--bone-2);
  color:var(--on-bone);min-height:48px}
.f textarea{min-height:118px;resize:vertical}
.f .hint{font-size:13px;color:var(--on-bone-2)}
.f .err{display:none;font-size:13.5px;font-weight:600;color:var(--act-ink)}
.f.bad input,.f.bad textarea{border-color:var(--act-ink);border-width:2px}
.f.bad .err{display:block}
fieldset{border:0;padding:0;margin:0}
legend{font-size:14px;font-weight:600;padding:0 0 9px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts label{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 13px;
  border:1px solid var(--bone-line);border-radius:var(--r);background:var(--bone-2);
  font-size:15px;font-weight:400;cursor:pointer}
.opts input{width:20px;height:20px;min-height:0;accent-color:var(--act-ink)}
.sent{display:none;background:var(--bone);color:var(--on-bone);
  border-left:4px solid var(--act-ink);padding:clamp(24px,3vw,36px)}
.sent h3{margin-bottom:10px}
.sent p{color:var(--on-bone-2);margin:0}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--on-ink-2);border-top:1px solid var(--rule);
  padding:clamp(46px,5vw,72px) 0 40px;font-size:15px}
.foot .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px var(--gut)}
.foot .wrap>*{min-width:0}
.foot h2{font-family:"DM Mono",monospace;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-ink);margin-bottom:14px;font-weight:500}
.foot ul li{margin-bottom:9px;line-height:1.5;overflow-wrap:anywhere}
.foot a{color:var(--on-ink-2)}
.foot a:hover{color:var(--act-lit)}
.foot .logo{margin-bottom:15px}
.foot .logo b{color:var(--on-ink)}
.demo{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:22px;margin:8px 0 0;
  font-size:13.5px;line-height:1.65;max-width:104ch}
.demo b{color:var(--on-ink)}
.demo a{color:var(--act-lit)}

.callbar{display:none}

@media(max-width:1150px){
  .plates{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1040px){
  .facts{grid-template-columns:1fr 1fr}
  .facts li:nth-child(2n){border-right:0}
  .grid-3,.zones{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .nav{display:none}
  .plates,.plates.wide-3{grid-template-columns:repeat(2,1fr)}
  .grid-2,.pair,.form-grid,.opts{grid-template-columns:1fr}
  .rows li{grid-template-columns:1fr;gap:4px}
  .rows .k{padding-top:0}
  .tells li{grid-template-columns:1fr;gap:4px}
  .head h2,h1{max-width:none}
  .foot .wrap{grid-template-columns:1fr}
  body{padding-bottom:76px}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink-2);
    border-top:1px solid var(--rule);padding:10px;gap:9px}
  .callbar .btn{flex:1;min-height:52px;justify-content:center;font-size:14px;
    white-space:nowrap;padding:13px 12px}
  .callbar .btn-2{color:var(--on-ink);border-color:var(--rule)}
}
@media(max-width:560px){
  .plates,.plates.wide-3{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .facts li{border-right:0;border-bottom:1px solid var(--rule)}
  .facts li:last-child{border-bottom:0}
  h1{font-size:clamp(30px,8.6vw,44px)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .btn:active{transform:none}
}

/* ---------- Built by Iron Digital MI ----------
   currentColor throughout so the line inherits whatever the footer already is.
   The mark itself is never recolored. */
.id-by { margin: 1.6em 0 0; }
.id-by a { display: inline-flex; align-items: center; gap: .6em;
  color: inherit; text-decoration: none; font-size: .8125rem; line-height: 1.3; }
.id-by a:hover span, .id-by a:focus-visible span { text-decoration: underline; }
.id-by img { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.id-by b { font-weight: 700; }

/* September UI refinement */
.specimen-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}.specimen-hero h1{max-width:13ch}.specimen-preview{display:grid;grid-template-columns:1fr 1fr;gap:16px}.specimen-preview figure{margin:0}.specimen-preview img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff}.specimen-preview figcaption{padding:12px 0;font-size:16px}.specimen-preview .plate-cred{display:block;font-size:12px;margin-top:8px}@media(max-width:860px){.specimen-hero{grid-template-columns:1fr;gap:24px}.specimen-preview img{max-height:170px}}
.specimen-preview .plate-cred,.specimen-preview .plate-cred a{color:#b8c0ce}