/* Model field guide: existing Archivo/mono, cream, field green and red. */
.md-page { min-height: 100dvh; }
.md-crumbs { display:flex; flex-wrap:wrap; gap:.65rem; padding-block:2.5rem 1.5rem; font: .68rem var(--mono); color:var(--muted); }
.md-crumbs a { text-decoration:underline; text-underline-offset:4px; color:var(--green-deep); }
.md-hero { padding-bottom:3rem; }
.md-hero-grid { display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.md-eyebrow { display:block; font: .7rem var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep); }
.md-hero h1 { font-size:clamp(4rem,8vw,7rem); line-height:.95; letter-spacing:-.05em; margin:.8rem 0; }
.md-subtitle { font-weight:650; font-size:clamp(1.25rem,2vw,1.65rem); margin-bottom:1rem; }
.md-intro { color:var(--muted); max-width:38rem; font-size:1rem; line-height:1.7; }
.md-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }
.md-back { display:inline-block; margin-top:1.2rem; font: .72rem var(--mono); text-decoration:underline; text-underline-offset:4px; }
.md-photo { margin:0; background:var(--bone-2); border:1px solid var(--line); }
/* Override the HTML intrinsic height, not just object-fit: a fixed height
   defeats aspect-ratio and produced the reported cream bands on ND-120.
   Width/height attributes remain useful intrinsic metadata before CSS loads. */
.md-photo img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.md-photo img[src="/images/models/nd60t.jpg"] { object-position:70% center; }
.md-photo img[src="/images/models/nd72.jpg"] { object-position:left center; }
/* Preserve the desktop's 512px-tall frame; crop rather than letterbox within it. */
.md-photo img[src="/images/models/nd60.jpg"] { height:512px; aspect-ratio:auto; object-fit:cover; object-position:right center; }
.md-photo figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; padding:.8rem 1rem; border-top:1px solid var(--line); font: .65rem var(--mono); color:var(--muted); }
.md-facts { display:grid; grid-template-columns:repeat(4,1fr); margin-top:2.7rem; border-block:1px solid var(--line); }
.md-facts div { padding:1.2rem 1.3rem; border-right:1px solid var(--line); }
.md-facts div:first-child { padding-left:0; }
.md-facts div:last-child { border-right:0; }
.md-facts dt { font: .65rem var(--mono); color:var(--muted); margin-bottom:.4rem; }
.md-facts dd { margin:0; font-size:1.45rem; font-weight:750; color:var(--green-deep); }
.md-details { background:var(--bone-2); padding-bottom:clamp(3rem,6vw,6rem); }
.md-tabs { display:flex; border-bottom:1px solid var(--line); margin-bottom:2.6rem; }
.md-tabs a { padding:1.3rem 1.6rem; font: .78rem var(--mono); text-transform:uppercase; text-align:center; border-bottom:3px solid transparent; }
.md-tabs a:hover { background:var(--bone); }
.md-tabs a[aria-selected="true"] { border-bottom-color:var(--red); color:var(--bone); background:var(--green-deep); }
.md-page :focus-visible { outline:3px solid var(--green-deep); outline-offset:4px; }
.md-panel { scroll-margin-top:140px; }
.md-panel[hidden] { display:none; }
.md-panel + .md-panel { margin-top:3rem; }
.md-details[data-tabs-ready] .md-panel { margin-top:0; }
.md-section-head { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:end; margin-bottom:2rem; }
.md-section-head h2 { font-size:clamp(1.7rem,3vw,2.7rem); margin-top:.65rem; }
.md-section-head p { color:var(--muted); max-width:35rem; font-size:.95rem; line-height:1.65; }
.md-feature { display:grid; grid-template-columns:3rem minmax(0,.8fr) minmax(0,1.2fr); gap:1.4rem; padding:1.8rem 0; border-top:1px solid var(--line); }
.md-feature-num { font: .72rem var(--mono); color:var(--muted); padding-top:.2rem; }
.md-feature h3 { font-size:1.2rem; line-height:1.25; max-width:22ch; }
.md-feature p { color:var(--muted); line-height:1.75; font-size:.95rem; }
.md-feature p + p { margin-top:.8rem; }
.md-option { display:block; width:fit-content; font: .6rem var(--mono); letter-spacing:.08em; color:var(--green-deep); border:1px solid var(--line); padding:.25rem .45rem; margin-bottom:.7rem; text-transform:uppercase; }
.md-feature-photo { margin-top:1rem; max-width:100%; height:auto; }
.md-spec-table { border-collapse:collapse; width:100%; background:var(--bone); font-size:.95rem; }
.md-spec-table caption { text-align:left; padding:1rem 1.3rem; background:var(--green-deep); color:var(--bone); font: .75rem var(--mono); }
.md-spec-table th,.md-spec-table td { padding:.85rem 1.3rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.md-spec-table th { width:55%; font-weight:500; color:var(--muted); }
.md-spec-table tr:nth-child(even) { background:var(--bone-2); }
.md-spec-table td { font-family:var(--mono); font-size:.85rem; }
.md-notes { margin-top:1.25rem; color:var(--muted); font-size:.85rem; max-width:62rem; }
.md-notes p + p { margin-top:.6rem; }
.md-cta { background:var(--green-deep); color:var(--bone); padding-block:3rem; }
.md-cta-in { display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.md-cta h2 { font-size:clamp(1.6rem,3vw,2.5rem); margin-bottom:.8rem; }
.md-cta p { max-width:42rem; color:var(--bone); opacity:.85; }
.md-cta .btn { flex:none; }
@media(max-width:767px) {
  .md-photo img[src="/images/models/nd60.jpg"] { height:auto; }
  .md-crumbs { padding-top:1.5rem; font-size:.6rem; }
  .md-hero-grid,.md-section-head { grid-template-columns:minmax(0,1fr); gap:1.5rem; }
  .md-hero h1 { font-size:4.5rem; }
  .md-facts { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:1.5rem; }
  .md-facts div,.md-facts div:first-child { padding:1rem .7rem; }
  .md-facts div:nth-child(2) { border-right:0; }
  .md-facts div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .md-facts dd { font-size:1.25rem; }
  .md-tabs a { padding:1.1rem .5rem; font-size:.65rem; flex:1; display:flex; justify-content:center; align-items:center; }
  .md-feature { grid-template-columns:1.6rem minmax(0,1fr); gap:.8rem; padding:1.5rem 0; }
  .md-feature > .md-feature-copy { grid-column:2; }
  .md-feature h3 { max-width:none; }
  .md-spec-table th,.md-spec-table td { padding:.8rem .65rem; overflow-wrap:anywhere; }
  .md-spec-table th { width:53%; font-size:.85rem; }
  .md-spec-table td { font-size:.75rem; }
  .md-cta-in { display:block; }
  .md-cta .btn { margin-top:1.5rem; }
}