/* ==========================================================================
   katherinareiche.com — responsive rules
   Desktop 1920/1440/1280/1024 · Tablet 834/820/768 · Mobile 430–360
   ========================================================================== */

@media (min-width: 1600px) {
  :root { --wrap: 1440px; }
}

@media (max-width: 1180px) {
  .primary-trigger, .primary-link { padding-inline: .6rem; font-size: .9rem; }
  .primary-trigger::after, .primary-link::after { left: .6rem; right: .6rem; }
  .brand-sub { display: none; }
  .chapter { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
  .chapter > :last-child:not(.prose):empty { display: none; }
  .case-head, .case-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, 7fr) minmax(0, 3.2fr); }
}

/* switch to drawer navigation */
@media (max-width: 1000px) {
  :root { --head-h: 64px; }
  .utility { display: none; }
  .masthead { min-height: 64px; }
  .primary { display: none; }
  .menu-toggle { display: inline-flex; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: 1.25rem; }
}
@media (min-width: 1001px) {
  .nav-drawer, .nav-drawer.is-open { display: none !important; }
}

/* tablet */
@media (max-width: 1024px) {
  .sec-head { grid-template-columns: 1fr; gap: 1rem; }
  .ph--split .ph-grid, .ph--index .ph-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .split, .split--5-7, .split--7-5, .split--4-8 { grid-template-columns: 1fr; gap: var(--space-4); }
  .sticky-col { position: static; }
  .topic { grid-template-columns: 1fr; gap: var(--space-3); }
  .case-head { grid-template-columns: auto minmax(0, 1fr); }
  .case-head > :last-child:not(:nth-child(2)) { grid-column: 1 / -1; }
  .case-body { grid-template-columns: 1fr; }
  .case-body > .prose, .case-facts { grid-column: 1; }
  .case-facts { border-top: 1px solid var(--rule); padding-top: .5rem; }
  .case-facts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
  .doc { grid-template-columns: minmax(0, 1.4fr) minmax(0, 5fr); }
  .doc-meta { grid-column: 2; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas .area { grid-column: span 6; }
  .area:nth-child(3n+2), .area:nth-child(3n+3) { padding-left: 0; border-left: 0; }
  .area:nth-child(even) { padding-left: 1.6rem; border-left: 1px solid var(--rule); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
  .flow::before { display: none; }
  .flow li { border-top: 2px solid var(--petrol-700); padding-top: 2.6rem; }
  .flow li::before { top: -11px; }
  .lab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-node:nth-child(odd) { border-left: 0; }
  .system-node:nth-child(n+3) { border-top: 1px solid var(--petrol-800); }
  .system-node:nth-child(odd)::before { display: none; }
  .continue-grid { grid-template-columns: 1fr; }
  .continue-link + .continue-link { padding-left: 0; border-left: 0; }
  .dispute-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .chapter { grid-template-columns: 1fr; gap: 1rem; }
  .chapter-side { position: static; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
  .chapter-side .figure-num { font-size: 2.4rem; }
  .chapter-side h2 { margin: 0; }
  .facets { grid-template-columns: 1fr; }
  .period-head { grid-template-columns: 1fr; }
  .period-span { white-space: normal; }
  .dispute-cols { grid-template-columns: 1fr; }
  .dispute-col + .dispute-col { border-left: 0; border-top: 1px solid var(--rule); }
  .topic-grid, .case-fields { grid-template-columns: 1fr; }
}

/* mobile */
@media (max-width: 640px) {
  :root { --fs-base: 1.03rem; }
  body { line-height: 1.64; }
  .brand-name { font-size: 1.12rem; }
  .brand { gap: .6rem; }
  .menu-toggle { padding: 0 .85rem; }
  .menu-toggle .txt { display: none; }
  .menu-toggle { width: 48px; justify-content: center; padding: 0; }
  .ph h1 { max-width: none; }
  .ph--index h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .ledger > div { grid-template-columns: 1fr; gap: .2rem; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 1.2rem .9rem 1.2rem 0; }
  .stat + .stat { padding-left: .9rem; }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat .figure-num { font-size: 2.4rem; }
  .areas .area { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; }
  .flow { grid-template-columns: 1fr; }
  .lab { grid-template-columns: 1fr; }
  .system { grid-template-columns: 1fr; }
  .system-node + .system-node { border-left: 0; border-top: 1px solid var(--petrol-800); }
  .system-node + .system-node::before { display: block; left: 1.3rem; top: -7px; }
  .doc { grid-template-columns: 1fr; gap: .8rem; }
  .doc-meta { grid-column: 1; }
  .doc-meta dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .doc-meta dt:nth-of-type(2) { margin-top: 0; }
  .case-head { grid-template-columns: 1fr; gap: .5rem; }
  .case-facts dl { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 1fr 3.6rem; gap: .35rem .8rem; }
  .bar-row > :first-child { grid-column: 1 / -1; }
  .form { grid-template-columns: 1fr; }
  .foot-map { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .dispute-steps { grid-template-columns: 1fr; }
  .contact-lines li { grid-template-columns: 1fr; gap: .2rem; }
  .mosaic { columns: 1; }
  .vquote p { font-size: 1.2rem; }
  .sources ol { columns: 1; }
  .tag { white-space: normal; }
  .fig--frame::after { display: none; }
  .period-head, .period-body { padding: 1.2rem; }
  .menu-head { display: none; }
}

/* vertical timeline on mobile + small tablets */
@media (max-width: 760px) {
  .htl-controls { display: none; }
  .htl-scroller { overflow: visible; padding: 0; }
  .htl-list { flex-direction: column; min-width: 0; border-left: 2px solid var(--petrol-800); margin-left: 6px; }
  .htl-list::before { display: none; }
  .htl-era { flex-direction: column; }
  .htl-era-label { width: auto; height: auto; padding: 1.2rem 0 .8rem 1.4rem; }
  .htl-era-label::before { left: -2px; top: 1.15rem; width: 18px; height: 2px; }
  .htl-era-label span { position: static; writing-mode: horizontal-tb; transform: none; }
  .htl-item { width: auto; padding: 0 0 1.8rem 1.4rem; }
  .htl-item::before { left: -9px; top: .55rem; }
  .htl-year { height: auto; font-size: 2rem; margin-bottom: .3rem; }
  .htl-body { padding-top: 0; }
}

@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-name { font-size: 1.02rem; }
  .stats { grid-template-columns: 1fr; }
  .stat, .stat + .stat { padding-left: 0; border-left: 0; }
  .foot-map { grid-template-columns: 1fr; }
}

/* long section labels may wrap on small phones */
@media (max-width: 640px) {
  .bus .label { white-space: normal; }
  .bus::after { min-width: 24px; }
}