/* ---------- model page additions ---------- */
.crumbs{font-size:1rem;color:var(--ink-3);margin:12px 0 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.crumbs li{display:flex;align-items:center;min-height:44px}
.crumbs li+li::before{content:"›";margin-right:4px}
.crumbs a{color:var(--ink-2);display:inline-flex;align-items:center;min-height:44px}
.mhero{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding-top:4px}
@media(min-width:1000px){.mhero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}}
.mhero h1{margin:4px 0 8px;font:800 clamp(2rem,5.6vw,3.25rem)/1 var(--display);font-stretch:110%;letter-spacing:-.03em;text-wrap:balance}
/* keyword-only H1 + a styled subtitle paragraph (not a heading: H2s are the page's sections) */
.mhero h1.kw{margin:4px 0 4px;font-size:clamp(2.5rem,7vw,4.5rem);line-height:.98}
.mhero .sub{margin:0 0 12px;font:italic 400 clamp(1.5rem,3.8vw,2rem)/1.18 var(--serif);color:var(--shu);text-wrap:balance}
.mhero h1 em{font:italic 400 1.05em var(--serif);font-stretch:normal;color:var(--shu)}
.mhero .lede{margin:0 0 4px}
.qf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
@media(min-width:43.75em){.qf{grid-template-columns:repeat(4,minmax(0,1fr))}} /* em: 700px at normal text, later when the reader sets bigger text */
.qf div{background:var(--white);border:2px solid var(--paper-3);border-radius:16px;padding:8px 12px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.qf small{display:block;font:700 .875rem var(--body);color:var(--ink-3)}
.qf b{display:block;font:800 1.25rem/1.15 var(--display);font-stretch:104%}
/* year tool */
.yeartool{background:var(--ink);color:var(--white);border-radius:16px;padding:20px 16px}
@media(min-width:700px){.yeartool{padding:28px}}
.yeartool h2{margin:0 0 4px;font:800 1.5rem/1.15 var(--display);font-stretch:106%;color:var(--white)}
.yeartool > p{margin:0 0 12px;color:#E6DFCD}
.years{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(min-width:700px){.years{grid-template-columns:repeat(8,1fr)}}
.years button{min-height:50px;border-radius:10px;border:2px solid #4a4436;background:#24211a;color:var(--white);font:800 1rem var(--body);cursor:pointer}
.years button[aria-pressed=true]{background:var(--plate);border-color:var(--plate);color:var(--ink)}
@media(hover:hover){.years button:hover{border-color:var(--plate)}}
.yres{display:none;margin-top:12px;background:var(--white);color:var(--ink);border-radius:16px;padding:16px;border-top:8px solid var(--yes);scroll-margin-top:96px}
.yres.show{display:block;animation:pop .3s ease}
.yres.wait{border-top-color:var(--some-fill)}
.yres .yh{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.yres .yh .ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:#fff;background:var(--yes)}
.yres.wait .yh .ic{background:var(--some-fill);color:var(--ink)}
.yres .yh .ic svg{width:26px;height:26px}
.yres .yh small{display:block;font:700 1rem var(--body);color:var(--ink-3)}
.yres .yh b{display:block;font:800 1.5rem/1.1 var(--display);font-stretch:104%}
.yres dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 8px;font-size:1rem}
.yres dt{font-weight:800;color:var(--ink-2)}
.yres dd{margin:0}
.yres .yfoot{display:flex;flex-wrap:wrap;gap:8px}
.yres .yfoot .btn{min-height:52px;font-size:1rem;padding:0 16px}
/* generation cards */
.gens{display:grid;gap:16px}
@media(min-width:900px){.gens{grid-template-columns:repeat(3,1fr)}}
.gen{display:flex;flex-direction:column;background:var(--white);border:3px solid var(--ink);border-radius:16px;overflow:hidden}
.gen img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.gen .gb{padding:16px;display:flex;flex-direction:column;flex:1}
.gen h3{margin:0 0 2px;font:800 1.25rem/1.1 var(--display);font-stretch:104%}
.gen .yrs{font-weight:800;color:var(--ink-2);margin:0 0 8px}
.gen ul{margin:0 0 12px;padding-left:20px;display:grid;gap:4px;font-size:1rem}
.chip2{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:auto;padding:4px 12px;border-radius:999px;font:800 1rem var(--body);color:#fff}
.chip2.ok{background:var(--yes)} .chip2.part{background:var(--some-fill);color:var(--ink)} .chip2.no{background:var(--unsure)}
.gen .credit{margin:8px 0 0}
/* specs table */
.spec-table{width:100%;border-collapse:collapse;background:var(--white);border:3px solid var(--ink);border-radius:16px;overflow:hidden;font-size:1rem}
.spec-table th,.spec-table td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--paper-3);vertical-align:top}
.spec-table thead th{background:var(--ink);color:var(--plate);font:800 1rem var(--body)}
.spec-table tbody th{font-weight:800;width:32%}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table small{display:block;color:var(--ink-3);font-size:.875rem}
.tablewrap{overflow-x:auto;border-radius:16px}
@media(max-width:599px){
  /* rows become grids on phones; a block table keeps its border, white card and rounded corners */
  .spec-table{display:block;border-collapse:separate}
  .spec-table tbody{display:block}
  .spec-table tr:last-child{border-bottom:0}
  .spec-table thead{display:none}
  .spec-table tr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--paper-3)}
  .spec-table tbody th{grid-column:1/-1;width:auto;padding:12px 12px 2px;border:0;background:var(--paper)}
  .spec-table td{border:0;padding:4px 12px 12px}
  .spec-table td::before{content:attr(data-gen);display:block;font:700 .875rem var(--body);color:var(--ink-3)}
  .spec-table td[colspan]{grid-column:1/-1}
}
/* listings */
.listings{list-style:none;margin:0 0 16px;padding:0;background:var(--white);border:3px solid var(--ink);border-radius:16px;overflow:hidden}
.listings li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 16px}
.listings li+li{border-top:1px solid var(--paper-3)}
.listings b{font:800 1.125rem var(--body)}
.listings .pr{font:800 1.25rem var(--display);text-align:right}
.listings span{color:var(--ink-2);font-size:1rem}
/* checklist */
.checks{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
@media(min-width:900px){.checks{grid-template-columns:1fr 1fr}}
.checks li{display:flex;gap:12px;background:var(--white);border:3px solid var(--ink);border-radius:16px;padding:12px 16px}
.checks .n{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--plate);border:2px solid var(--ink);font:800 1rem var(--display)}
.checks b{display:block;font:800 1.125rem/1.3 var(--body)}
.checks span{color:var(--ink-2);font-size:1rem}
/* compare */
.cmp td,.cmp th{font-size:1rem}
.cmp .us{background:#FFF6D6}
/* tablets: side-by-side generation cards and a smaller hero photo, so the page isn't a stack of huge photos */
@media(min-width:600px) and (max-width:899px){
  .gen{flex-direction:row}
  .gen img{width:42%;flex:none;height:auto;aspect-ratio:4/3;object-fit:cover;align-self:center}
}
@media(min-width:600px) and (max-width:999px){
  .mhero .photo{max-width:600px}
}