/* Puppn: "the health record".
   Records set like the pet health booklet a new dog comes home with. White
   pages inside a teal cover: a band across the top and a spine down the left
   that carries the running head. Archivo, wide for headings and condensed for
   labels, over Public Sans (the US federal design system face) for reading. Ruled record tables; the
   number one entry alone prints reversed. */

@font-face{font-family:'Archivo';src:url('../fonts/archivo-var.woff2') format('woff2-variations');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('../fonts/publicsans-var.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --paper:#FFFFFF; --paper-deep:#F2F4F3; --rule:#DCE2E0; --rule-strong:#9AA8A6;
  --ink:#1B2B34; --ink-soft:#43545C; --ink-mute:#5A6970;
  --alert:#B5340E;
  --cover:#0F7B83; --cover-deep:#0A5A60; --cover-wash:#E3F1F1;
  /* older names, kept so every template keeps resolving */
  --olive:var(--ink); --olive-deep:var(--ink); --olive-soft:var(--ink-soft); --olive-mute:var(--ink-mute);
  --brass:var(--cover); --brass-dark:var(--cover-deep); --brass-wash:var(--cover-wash);
  --display:'Archivo','Helvetica Neue',Helvetica,sans-serif;
  --body:'Public Sans','Helvetica Neue',Helvetica,sans-serif;
  --mono:var(--display);
  --dw:800; --dls:-.02em;
  --spine:34px; --band:8px;
  --page:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scrollbar-color:var(--rule-strong) var(--paper)}
body{position:relative;min-height:100vh;overflow-x:clip;font-family:var(--body);font-size:18px;line-height:1.7;color:var(--ink);
  background:var(--paper);
  border-top:var(--band) solid var(--cover);padding-left:var(--spine)}
::selection{background:var(--cover);color:#fff}
:focus-visible{outline:2px solid var(--cover);outline-offset:3px}
a{color:var(--cover-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(15,123,131,.35);transition:text-decoration-color .2s ease,color .2s ease}
a:hover{color:var(--ink);text-decoration-color:var(--cover)}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--page);margin:0 auto;padding-inline:48px}

/* the spine: running head printed down the cover edge */
.runhead{position:absolute;z-index:5;left:0;top:calc(-1 * var(--band));bottom:0;width:var(--spine);margin:0;background:var(--cover);color:#fff;
  writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:flex-end;padding:36px 0;
  font-family:var(--display);font-stretch:75%;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
@media (max-width:760px){
  body{padding-left:0;border-top-width:30px;font-size:17px}
  .runhead{position:absolute;bottom:auto;height:30px;width:100%;writing-mode:horizontal-tb;transform:none;justify-content:flex-start;
    top:-30px;padding:0 16px;font-size:11px;align-items:center}
  .wrap{padding-inline:20px}
}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes press{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.r1{animation:rise .6s .05s cubic-bezier(.16,1,.3,1) both}
.r2{animation:rise .6s .15s cubic-bezier(.16,1,.3,1) both}
.r3{animation:rise .6s .25s cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion:reduce){.r1,.r2,.r3{animation:none}}

/* masthead */
header{padding-top:32px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:3px solid var(--ink)}
.brand{display:flex;align-items:baseline;gap:14px;color:inherit;text-decoration:none}
.brand img{display:none}
.brand .stack{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.brand .name{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:26px;letter-spacing:-.01em;color:var(--ink)}
.brand .tag{font-family:var(--display);font-stretch:75%;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.bar nav{display:flex;flex-wrap:wrap;gap:4px}
.bar nav a{font-family:var(--display);font-stretch:85%;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:7px 12px;border:1px solid transparent}
.bar nav a:hover{border-color:var(--rule-strong)}
.bar nav a[aria-current]{background:var(--cover);color:#fff}
@media (max-width:760px){ .bar{flex-wrap:wrap;gap:10px} .bar nav{width:100%} .bar nav a{padding:6px 9px;font-size:13px} .brand .tag{display:none} }

.crumbs{padding-top:24px;font-size:13px;color:var(--ink-mute)}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{color:var(--rule-strong);padding:0 8px}

/* source label: attached like a vaccine sticker, flat, with a perforated tear edge */
.stamp{display:inline-block;max-width:60ch;font-size:13px;line-height:1.45;color:var(--ink-soft);padding:6px 12px 6px 14px;
  border:1px solid var(--rule-strong);border-left:0;padding-left:20px;
  background:radial-gradient(circle,var(--ink-soft) 1.5px,transparent 2px) 6px 3px/6px 7px repeat-y}
.stamp b{font-weight:700;color:var(--ink-soft)}

/* the record header: title left, the entry that answers the question right */
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px 88px;align-items:start;padding:80px 0 72px}
h1{margin:0 0 32px;font-family:var(--display);font-stretch:112%;font-weight:var(--dw);font-size:clamp(34px,4.8vw,62px);line-height:1;letter-spacing:var(--dls);color:var(--ink);text-wrap:balance}
.lede{margin:0 0 32px;font-size:20px;line-height:1.65;color:var(--ink-soft);max-width:52ch;text-wrap:pretty}
.big{position:relative;padding:28px 0 0;border-top:3px solid var(--ink)}
.big::before{content:"On record";position:absolute;top:0;left:0;transform:translateY(-100%);padding:3px 8px;background:var(--ink);color:#fff;
  font-family:var(--display);font-stretch:75%;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.big:has(.word)::before{content:"No. 1"}
.big .n{display:block;font-family:var(--display);font-stretch:100%;font-weight:900;font-size:clamp(68px,9vw,124px);line-height:.88;letter-spacing:-.04em;color:var(--ink)}
.big .n.word{font-stretch:112%;font-size:clamp(72px,10.5vw,140px)}
.big .l{display:block;margin-top:20px;font-size:15px;color:var(--ink-soft);max-width:34ch}
@media (max-width:860px){ .hero{grid-template-columns:minmax(0,1fr);gap:64px;padding:48px 0 56px} }

/* the ledger: form fields with labels over ruled lines */
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:0 40px;margin-bottom:128px;border-top:1px solid var(--ink)}
.ledger div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:20px 0 18px;border-bottom:1px solid var(--rule-strong)}
.ledger .k{font-size:13.5px;line-height:1.35;color:var(--ink-mute)}
.ledger .v{font-family:var(--display);font-stretch:100%;font-weight:700;font-size:26px;line-height:1.15;color:var(--ink)}
@media (max-width:640px){ .ledger{grid-template-columns:1fr 1fr;gap:0 20px;margin-bottom:88px} .ledger .v{font-size:22px} }

/* sections: heading left, record right */
.sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px 96px;padding:0 0 136px}
.sec > header{padding:0}
.sec h2{margin:0 0 18px;font-family:var(--display);font-stretch:110%;font-weight:var(--dw);font-size:clamp(24px,2.6vw,32px);line-height:1.1;letter-spacing:var(--dls);color:var(--ink);text-wrap:balance}
.sec .note{margin:0;font-size:16px;line-height:1.7;color:var(--ink-soft);max-width:42ch}
.sec .body > p{margin:0 0 16px;max-width:66ch}
.sec header > p:last-child:has(a){margin:22px 0 0;font-weight:700}
@media (max-width:860px){ .sec{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:96px} }
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* record tables */
table.rec{width:100%;border-collapse:collapse;font-size:16px}
table.rec caption{caption-side:bottom;text-align:left;margin-top:12px;padding:4px 10px 4px 12px;border:1px solid var(--rule-strong);border-left:0;padding-left:20px;background:radial-gradient(circle,var(--ink-soft) 1.5px,transparent 2px) 6px 3px/6px 7px repeat-y;width:max-content;max-width:100%;font-family:var(--display);font-stretch:80%;font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
table.rec th{font-family:var(--display);font-stretch:75%;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-align:left;border-bottom:3px solid var(--ink);padding:10px 16px 10px 0}
table.rec td{border-bottom:1px solid var(--rule);padding:16px 16px 16px 0;vertical-align:top}
table.rec td.num,table.rec th.num{text-align:right;white-space:nowrap}
table.rec td.num,.namelist .ct,.lift .x,.dir span,.events .when small{font-family:var(--display);font-stretch:90%;font-variant-numeric:tabular-nums}
table.rec td.code{font-family:var(--display);font-stretch:85%;font-weight:700;white-space:nowrap;color:var(--ink)}
table.rec tr.mark td{background:var(--cover);color:#fff;font-weight:700;border-bottom-color:var(--cover)}
table.rec tr.mark td:first-child{padding-left:8px}
table.rec tr.mark td a{color:#fff}
table.rec .barcell{width:32%}
.hbar{display:block;height:8px;background:var(--cover)}
tr.mark .hbar{background:#fff}
@media (max-width:640px){ table.rec .barcell,table.rec .opt{display:none} table.rec{font-size:14.5px} table.rec td.code{font-size:13px;white-space:normal;width:30%} }

/* charts */
figure.chart{margin:0}
figure.chart .plot{overflow-x:auto;-webkit-overflow-scrolling:touch}
figure.chart svg{display:block;width:100%;min-width:560px;height:auto;overflow:visible}
figure.chart figcaption{margin-top:20px;font-size:14.5px;color:var(--ink-soft);max-width:66ch}
.chart text{font-family:var(--display);font-stretch:85%}
.chart .axis text{font-size:11px;fill:var(--ink-mute)}
.chart .grid line{stroke:var(--rule);stroke-width:1}
.chart .bar path{fill:var(--ink);transition:fill .15s ease}
.chart .bar:hover path{fill:var(--cover)}
.chart .bar .hit{fill:transparent}
.chart .band{fill:var(--cover-wash)}
.chart .band-l{font-size:10.5px;fill:var(--cover-deep);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.chart .val{font-size:12px;font-weight:700;fill:var(--ink)}
details.tableview{margin-top:12px;font-size:14px}
details.tableview summary,.events summary{cursor:pointer;font-family:var(--display);font-stretch:80%;font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cover-deep)}

/* the caveat: set apart by space and a full rule box */
.caveat{background:var(--cover-wash);padding:32px 36px;max-width:64ch}
.caveat h3{margin:0 0 12px;font-family:var(--display);font-stretch:105%;font-weight:800;font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.caveat p{margin:0;font-size:16.5px;line-height:1.7;color:var(--ink-soft)}

/* license lookup: a form field, not a banner */
.lookup{padding:0;margin:0 auto 136px;max-width:var(--page);padding-inline:48px}
.lookup .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px 96px;align-items:end;background:var(--paper);border:1px solid var(--rule-strong);border-top:3px solid var(--ink);padding:48px 56px;max-width:none}
.lookup h2{margin:0 0 12px;font-family:var(--display);font-stretch:110%;font-weight:var(--dw);font-size:clamp(24px,2.6vw,32px);line-height:1.1;letter-spacing:var(--dls);color:var(--ink)}
.lookup p{margin:0;color:var(--ink-soft);font-size:16px}
.lookup form{display:flex;flex-wrap:wrap}
.lookup input{flex:1 1 220px;min-width:0;font-family:var(--display);font-stretch:100%;font-weight:700;font-size:24px;letter-spacing:.04em;padding:12px 2px;border:0;border-bottom:3px solid var(--ink);background:transparent;color:var(--ink);text-transform:uppercase;border-radius:0}
.lookup input::placeholder{color:var(--ink-mute)}
.lookup input:focus{outline:none;border-bottom-color:var(--cover)}
.lookup button{font-family:var(--display);font-stretch:85%;font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:0 26px;min-height:56px;border:0;background:var(--cover);color:#fff;cursor:pointer;transition:background .2s ease}
.lookup button:hover{background:var(--cover-deep)}
.lookup .hint{flex-basis:100%;margin-top:12px;font-size:13.5px;color:var(--ink-mute)}
.lookup label.hint{font-family:var(--display);font-stretch:75%;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
@media (max-width:860px){ .lookup{padding-inline:20px;margin-bottom:96px} .lookup .wrap.in{grid-template-columns:minmax(0,1fr);padding:32px 24px} }

/* sources and footer */
.sources{border-top:3px solid var(--ink);padding:40px 0 56px;font-size:15px;line-height:1.7;color:var(--ink-soft)}
.sources h2,.mini{margin:0 0 12px;font-family:var(--display);font-stretch:75%;font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.sources ul{margin:0;padding-left:18px}
.sources li{margin-bottom:12px;max-width:92ch}
footer.foot{border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding:28px 0 56px;font-size:14px;color:var(--ink-mute)}
footer.foot nav{display:flex;gap:20px;flex-wrap:wrap}
footer.foot a{color:var(--ink-soft)}

/* name lists: ranked entries, the first one reversed */
.namelist{list-style:none;margin:0;padding:0;columns:3 200px;column-gap:48px;column-rule:1px solid var(--rule)}
.namelist li{break-inside:avoid;display:grid;grid-template-columns:2.2em 1fr auto;align-items:baseline;gap:10px;padding:12px 10px;border-bottom:1px solid var(--rule)}
.namelist .rk{font-family:var(--display);font-stretch:75%;font-weight:700;font-size:12.5px;color:var(--ink-mute)}
.namelist .nm{font-family:var(--display);font-stretch:105%;font-weight:700;font-size:19px;color:var(--ink)}
.namelist .ct{font-size:13.5px;color:var(--ink-soft)}
.namelist li:first-child{background:var(--cover);border-bottom-color:var(--cover);animation:press .7s .35s cubic-bezier(.16,1,.3,1) backwards}
.namelist li:first-child .rk,.namelist li:first-child .nm,.namelist li:first-child .ct{color:#fff}
.namelist li:first-child .nm{font-weight:900}
@media (prefers-reduced-motion:reduce){ .namelist li:first-child{animation:none} }
.namelist.one{columns:1}
@media (max-width:640px){ .namelist{columns:2;column-gap:20px} .namelist .nm{font-size:17px} .namelist.one{columns:1} }

.pair{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.pair.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 48px}
.pair.five{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:56px 48px}
@media (max-width:640px){ .pair.four,.pair.five{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){ .pair{gap:20px} .pair .nm{font-size:16px!important} .pair.stackm{grid-template-columns:minmax(0,1fr)} }

/* names a breed gets more than other dogs */
.lift{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 40px;border-top:1px solid var(--ink)}
.lift li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0;border-bottom:1px solid var(--rule)}
.lift .nm{font-family:var(--display);font-stretch:105%;font-weight:700;font-size:19px;color:var(--ink)}
.lift .x{font-size:13px;color:var(--ink-soft);text-align:right}
@media (max-width:640px){ .lift{grid-template-columns:minmax(0,1fr)} }

/* portraits inside data pages */
.portrait{margin:0 auto 136px;max-width:var(--page);padding-inline:48px}
.portrait .in{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:32px 96px;align-items:center;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);padding:48px 0;max-width:none}
.portrait figure{margin:0;max-width:260px;border:1px solid var(--rule)}
.portrait h2{margin:0 0 8px;font-family:var(--display);font-stretch:110%;font-weight:var(--dw);font-size:clamp(24px,2.6vw,32px);line-height:1.1;letter-spacing:var(--dls);color:var(--ink)}
.portrait p{margin:0 0 18px;color:var(--ink-soft);font-size:15.5px;max-width:52ch}
.portrait .btn,.ask .btn{display:inline-block;font-family:var(--display);font-stretch:85%;font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:14px 22px;background:var(--cover);color:#fff;text-decoration:none;transition:background .2s ease}
.portrait .btn:hover,.ask .btn:hover{background:var(--cover-deep);color:#fff}
@media (max-width:760px){ .portrait{padding-inline:20px;margin-bottom:96px} .portrait .in{grid-template-columns:minmax(0,1fr)} .portrait figure{max-width:200px} }

.others{padding:0 0 96px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{border:1px solid var(--rule-strong);padding:9px 15px;font-size:14px;color:var(--ink);text-decoration:none;transition:background .15s ease,color .15s ease}
.chips a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* recall entries */
.events{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink)}
.events > li{display:grid;grid-template-columns:9em minmax(0,1fr);gap:10px 40px;padding:36px 0 40px;border-bottom:1px solid var(--rule)}
.events .when{font-family:var(--display);font-stretch:100%;font-weight:800;font-size:19px;line-height:1.2;color:var(--ink)}
.events .when small{display:block;margin-top:4px;font-family:var(--body);font-weight:400;font-size:13px;color:var(--ink-mute)}
.events h3{margin:0 0 12px;font-family:var(--display);font-stretch:100%;font-weight:700;font-size:19px;line-height:1.25;color:var(--ink)}
.events .tags{display:flex;flex-wrap:wrap;gap:10px 20px;margin:0 0 16px;font-size:14px;color:var(--ink-soft)}
.events .tags b{color:var(--ink)}
.events .cls,.cls{font-family:var(--display);font-stretch:85%;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;padding:1px 7px;border:1.5px solid var(--ink);color:var(--ink)}
.events p{margin:0 0 14px;font-size:16.5px;max-width:66ch}
.events details{font-size:14.5px}
.events .prod{list-style:none;margin:10px 0 0;padding:0}
.events .prod li{padding:8px 0;border-top:1px solid var(--rule);color:var(--ink-soft)}
.events .prod li span{display:block;font-size:13px;color:var(--ink-mute)}
@media (max-width:640px){ .events > li{grid-template-columns:minmax(0,1fr)} }

.dir{list-style:none;margin:0;padding:0;columns:3 220px;column-gap:48px;border-top:1px solid var(--ink)}
.dir li{break-inside:avoid;padding:14px 0;border-bottom:1px solid var(--rule)}
.dir a{display:block;font-weight:700;font-size:16px;text-decoration:none;color:var(--ink)}
.dir a:hover{color:var(--cover-deep);text-decoration:underline}
.dir span{font-size:13px;color:var(--ink-mute)}

/* license lookup results */
.lk-result{padding:0 0 64px;max-width:860px}
.lk-result h2{margin:0 0 8px;font-family:var(--display);font-stretch:110%;font-weight:var(--dw);letter-spacing:var(--dls);font-size:32px;color:var(--ink)}
.lk-result .lk-msg{font-size:17px;color:var(--ink-soft);max-width:64ch}
.lk-status{display:inline-block;margin:0 0 22px;font-family:var(--display);font-stretch:85%;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:13px;padding:5px 10px;border:1.5px solid var(--ink)}
.lk-status.on{background:var(--ink);color:#fff}
.lk-status.off{border-style:dashed;color:var(--ink-soft)}
.lk-result .ledger{margin-bottom:36px}
.lk-result .note{font-size:14px;color:var(--ink-soft)}
.lk-reports{margin:0;padding-left:18px}
.lk-reports li{margin-bottom:6px}

/* portrait pages */
.hero figure{margin:0}
.hero .frame{max-width:440px;margin-left:auto;border:1px solid var(--rule)}
.hero figcaption{margin-top:10px;font-family:var(--display);font-stretch:75%;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);text-align:right}
@media (max-width:860px){ .hero .frame{margin-left:0} .hero figcaption{text-align:left} }
.prints{padding:0 0 136px}
.prints .head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:3px solid var(--ink);padding-bottom:16px;margin-bottom:44px}
.prints h2{margin:0;font-family:var(--display);font-stretch:110%;font-weight:var(--dw);letter-spacing:var(--dls);font-size:clamp(24px,2.6vw,32px);color:var(--ink)}
.prints .head span{font-family:var(--display);font-stretch:75%;font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:56px 36px}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{display:block;color:inherit;text-decoration:none}
.card .mat{border:1px solid var(--rule);transition:border-color .2s ease}
.card:hover .mat{border-color:var(--ink)}
.card .cap{display:flex;flex-direction:column;gap:2px;padding:10px 0 0}
.card .th{font-family:var(--display);font-stretch:100%;font-weight:700;font-size:16px;color:var(--ink)}
.card .go{font-family:var(--display);font-stretch:80%;font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cover-deep)}
@media (max-width:640px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px} }
.teaser{border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);padding:36px 0;margin:0 0 120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px 48px;align-items:center}
.teaser h2{margin:0;font-family:var(--display);font-stretch:105%;font-weight:var(--dw);letter-spacing:var(--dls);font-size:22px;color:var(--ink)}
.teaser p{margin:0;font-size:16px;color:var(--ink-soft)}
.teaser p b{font-family:var(--display);font-weight:800;color:var(--ink);font-size:18px}
@media (max-width:760px){ .teaser{grid-template-columns:minmax(0,1fr)} }
.ask{margin:0 auto 120px;max-width:var(--page);padding-inline:48px}
.ask .in{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);padding:44px 0;max-width:none}
.ask h2{margin:0;font-family:var(--display);font-stretch:110%;font-weight:var(--dw);letter-spacing:var(--dls);font-size:clamp(22px,2.4vw,28px);color:var(--ink)}
.ask p{margin:8px 0 0;color:var(--ink-soft);font-size:15.5px;max-width:56ch}
@media (max-width:760px){ .ask{padding-inline:20px} }
.longform{max-width:68ch;padding:8px 0 96px}
.longform h2{margin:0 0 20px;font-family:var(--display);font-stretch:110%;font-weight:var(--dw);letter-spacing:var(--dls);font-size:clamp(24px,2.6vw,30px);color:var(--ink)}
.longform section{margin-bottom:40px}
.longform h3{margin:0 0 6px;font-family:var(--display);font-stretch:100%;font-weight:700;font-size:18px;color:var(--ink)}
.longform p{margin:0;color:var(--ink-soft);font-size:17px;line-height:1.75}

/* homepage */
.hero.home{align-items:stretch}
.trio{display:flex;flex-direction:column;border-top:3px solid var(--ink)}
.trio a{display:grid;grid-template-columns:minmax(0,auto) 1fr;gap:6px 24px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--rule-strong);color:inherit;text-decoration:none}
.trio .v{font-family:var(--display);font-stretch:100%;font-weight:900;letter-spacing:-.03em;font-size:clamp(40px,5vw,60px);line-height:1;color:var(--ink);min-width:3.6ch}
.trio .k{font-size:15px;color:var(--ink-soft)}
.trio a:hover .v{color:var(--cover)}
.findings{margin:0 0 136px;border-top:3px solid var(--ink)}
.findings .mini{margin:12px 0 18px}
.findings ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px 64px}
.findings .no{display:none}
.findings p{margin:0;font-size:15.5px;color:var(--ink-soft)}
.findings p b{display:block;margin-bottom:6px;font-family:var(--display);font-stretch:105%;font-weight:800;font-size:21px;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.findings li:first-child p b{font-size:28px}
.findings p a{display:inline-block;margin-top:6px;font-weight:700}
@media (max-width:860px){ .findings ol{grid-template-columns:1fr} }
.portrait .wrap,.ask .wrap{padding-inline:0}

/* Class I: vermilion with a drawn warning mark, never color alone */
.cls{display:inline-flex;align-items:center;gap:5px}
.cls.i{background:var(--alert);border-color:var(--alert)!important;color:#fff!important}
.cls .mk{flex:none}
table.rec td.code .cls{font-size:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.findings{padding-top:44px}

/* charts fit a phone: no sideways scroll, every other year labeled */
@media (max-width:640px){
  figure.chart svg{min-width:0}
  .chart text{font-size:22px!important}
  .chart .yr.alt{display:none}
  .chart .band-l{font-size:17px!important}
}

/* four nav items on one row at 390 */
@media (max-width:760px){ .bar nav{gap:2px;flex-wrap:nowrap} .bar nav a{padding:6px 7px;font-size:12.5px;font-stretch:75%;letter-spacing:.02em} }

/* portraits fill their mats: no second box inside the frame */
.card .mat{border:0}
.portrait figure{border:0}
.hero .frame{border:0}
@media (max-width:640px){ figure.chart .plot{overflow:visible;padding-left:18px} }

/* the prints carry an off-white square of watercolor paper; lift it to the page white */
.card .mat img,.portrait figure img,.hero .frame img{filter:brightness(1.05)}

/* open recalls: vermilion with the warning mark */
.alert{display:inline-flex;align-items:center;gap:6px;color:#fff;background:var(--alert);padding:0 8px}
.ledger .v.alert{width:max-content}
@media (max-width:640px){ .lookup button{flex:1 1 100%;margin-top:16px} }

/* breed portrait in the names hero: the dog sits above its most common name */
.heroside{display:flex;flex-direction:column;gap:36px}
.heroside .plate{margin:0;max-width:360px}
.heroside .plate img{filter:brightness(1.05)}
.heroside .plate + .big .n.word{font-size:clamp(64px,8vw,112px)}
@media (max-width:860px){ .heroside .plate{max-width:280px} }
@media (max-width:860px){
  .heroside{flex-direction:row;align-items:flex-end;gap:20px}
  .heroside .plate{flex:0 0 40%;max-width:none}
  .heroside .plate + .big .n.word{font-size:clamp(44px,13vw,72px)}
}
.plate.quad{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-width:380px}
.plate.quad a{display:block}
.plate.quad img{filter:brightness(1.05);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.plate.quad a:hover img{transform:scale(1.04)}

/* photos */
.plate.photo{max-width:none}
.plate.photo img{width:100%;height:auto;filter:none}
.plate figcaption{margin-top:8px;font-size:12.5px;color:var(--ink-mute)}
.plate figcaption a{color:var(--ink-mute)}
.homephoto{align-self:stretch;margin:0}
.homephoto img{aspect-ratio:4/5;object-fit:cover}
.trio.row{flex-direction:row;margin:0 0 120px}
.trio.row a{flex:1;grid-template-columns:1fr;padding:24px 28px 26px 0;border-bottom:1px solid var(--rule-strong)}
.trio.row a + a{padding-left:28px;border-left:1px solid var(--rule)}
@media (max-width:860px){ .trio.row{flex-direction:column;margin-bottom:88px} .trio.row a + a{padding-left:0;border-left:0} .homephoto img{aspect-ratio:4/3} }