/* ==========================================================================
   johannwadephul.com — responsive layer
   Breakpoints: 1240 / 1100 / 960 / 820 / 640 / 420
   ========================================================================== */

@media (max-width: 1240px) {
  .nav-trigger, .nav-direct { padding: 0 10px; font-size: .9rem; }
  .nav-trigger::after, .nav-direct::after { left: 10px; right: 10px; }
  .article { grid-template-columns: minmax(0, 13rem) minmax(0, var(--w-text)); }
}

/* Primary groups give way to the Contents overlay */
@media (max-width: 1100px) {
  .primary-nav { display: none; }
  .masthead-actions { margin-left: auto; }
  .contents-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cover-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .related li a { grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr) 2rem; }
  .related .r-dek { display: none; }
}

@media (max-width: 960px) {
  :root { --head-h: 68px; }
  .article, .article--norail { grid-template-columns: minmax(0, 1fr); padding-inline: var(--gutter); }
  .article > .prose, .article > .rail { grid-column: 1; }
  .article > .rail { grid-row: auto; }
  .rail-inner { position: static; }
  .toc { padding: 20px; background: var(--paper); border: 1px solid var(--line); }

  .h-folio .wrap, .h-folio--rev .wrap { grid-template-columns: minmax(0, 1fr); }
  .h-folio--rev .h-text, .h-folio--rev .h-media { order: 0; }
  .h-folio .h-media { max-width: 560px; }
  .h-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .h-split .h-text, .h-split--rev .h-text { padding: clamp(40px, 8vw, 72px) var(--gutter); order: 0; }
  .h-split .h-media, .h-split--rev .h-media { order: 1; padding: clamp(28px, 6vw, 56px) var(--gutter); }
  .h-ledger .wrap { grid-template-columns: minmax(0, 1fr); }
  .h-band .wrap { grid-template-columns: minmax(0, 1fr); }
  .h-band::before { height: 58%; }
  .h-band .h-text { padding-bottom: 0; }
  .h-type .h-foot { grid-template-columns: minmax(0, 1fr); }
  .h-wide .h-text { grid-template-columns: minmax(0, 1fr); }

  .cover-grid { grid-template-columns: minmax(0, 1fr); }
  .cover-portrait { max-width: 560px; }
  .cover-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cover-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .cover-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .intro-grid, .current, .feature, .stories, .contact-layout, .case-body { grid-template-columns: minmax(0, 1fr); }
  .feature--rev .feature-media { order: 0; }
  .stories .lead-story { grid-row: auto; padding-right: 0; }
  .contact-person { position: static; }
  .glance > div { grid-column: span 6; }
  .glance > div:nth-child(3n+2), .glance > div:nth-child(3n) { padding-left: 0; border-left: 0; }
  .glance > div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
  .areas a, .areas a:nth-child(1), .areas a:nth-child(2) { grid-column: span 3; }
  .cols-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .position { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .position-head { position: static; }
  .colophon-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .colophon-intro { grid-column: 1 / -1; }

  /* timeline becomes a single vertical line */
  .tl::before { left: 6px; }
  .tl-era { text-align: left; padding-left: 28px; }
  .tl-item, .tl-item:nth-of-type(even) { width: auto; margin-left: 0; padding: 14px 0 14px 34px; text-align: left; }
  .tl-item::before, .tl-item:nth-of-type(even)::before { left: 1px; right: auto; top: 26px; }
  .tl-card { display: block; max-width: none; }

  /* stacked matrix */
  .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; width: 100%; }
  .matrix tr { padding: 18px 0; border-bottom: 1px solid var(--line-strong); }
  .matrix tbody th { width: 100%; padding: 0 0 8px; border: 0; }
  .matrix td { padding: 8px 0; border: 0; }
  .matrix td[data-label]::before { content: attr(data-label); display: block; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--plum); margin-bottom: 2px; }
}

@media (max-width: 820px) {
  .contents-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .record { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .record-meta { grid-auto-flow: row; }
  .chrono > li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .twosides { grid-template-columns: minmax(0, 1fr); }
  .twosides > div + div { border-left: 0; border-top: 1px solid var(--line-strong); }
  .twosides::after { top: 50%; }
  .topic-index { grid-template-columns: minmax(0, 1fr); }
  .mini-tl { grid-template-columns: minmax(0, 1fr); }
  .mini-tl::before { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .mini-tl li { padding: 0 0 24px 32px; }
  .related li a { grid-template-columns: minmax(0, 1fr) 2rem; gap: 6px 16px; }
  .related .r-kicker { grid-column: 1 / -1; }
  .h-type .wrap { grid-template-columns: minmax(0, 1fr); }
  .h-type .vlabel { writing-mode: horizontal-tb; transform: none; border-right: 0; border-bottom: 1px solid var(--champagne); padding: 0 0 10px; text-align: left; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .wordmark-name { font-size: 1.28rem; }
  .wordmark-tag { font-size: .56rem; letter-spacing: .16em; }
  .contents-toggle { padding: 0 12px; gap: 10px; }
  .contents-toggle .label-full { display: none; }
  .hero-meta { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-meta > div, .hero-meta > div + div { padding: 12px 0; margin: 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .h-split .hero-meta > div { border-color: var(--line-light); }
  .h-ledger .file-card dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ledger > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .position-rows > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .glance > div, .glance > div:nth-child(even) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .areas a, .areas a:nth-child(1), .areas a:nth-child(2) { grid-column: 1 / -1; min-height: 0; }
  .cols-2, .cols-3 { grid-template-columns: minmax(0, 1fr); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .contact-lines > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .colophon-top { grid-template-columns: minmax(0, 1fr); }
  .figures { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .figures > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .figures > div:nth-child(even) { padding-left: 16px; }
  .cover-portrait { padding-left: 34px; }
  .cover-portrait .frame-inner::before { left: -18px; top: 18px; bottom: -18px; }
  .cover-portrait .frame-inner::after { right: -8px; top: -8px; }
  .frame-offset { padding: 0 12px 12px 0; }
  .frame-offset .frame-inner::before { inset: 12px -12px -12px 12px; }
  .frame-offset--left { padding: 0 0 12px 12px; }
  .frame-offset--left .frame-inner::before { inset: 12px 12px -12px -12px; }
  .case-head { grid-template-columns: minmax(0, 1fr); }
  .case-no { grid-row: auto; }
  .lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; }
  .gallery { columns: 1; }
  .g-item:nth-child(4n+2) { padding-top: 0; }
}

@media (max-width: 420px) {
  .wordmark-tag { display: none; }
  .cover-facts { grid-template-columns: minmax(0, 1fr); }
  .cover-facts > div, .cover-facts > div + div { padding: 14px 0; border-left: 0; border-top: 1px solid var(--line); }
  .cover-facts > div:first-child { border-top: 0; }
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figures > div, .figures > div + div, .figures > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .btn { width: 100%; }
  .cover-actions .arrow-link { width: 100%; justify-content: center; }
}

@media print {
  .masthead, .contents, .colophon, .crumbs, .related, .lightbox { display: none !important; }
  body { background: #fff; }
}

/* ---- audit fixes ---- */
@media (max-width: 960px) {
  .h-band::before { bottom: 0; height: auto; }
  .h-band { padding-bottom: 40px; }
  .h-band .h-text { padding-bottom: 0; }
}
@media (max-width: 640px) {
  .frame-offset .frame-inner { margin-bottom: 12px; }
  .frame-offset figcaption { margin-top: 24px; }
}
@media (max-width: 820px) {
  .twosides::after { display: none; }
}