/* Breakpoints: 1080 (tablet landscape), 900 (navigation switches), 720 (phone), 380 (small phone) */
@media (max-width: 1080px) {
  .card-grid, .card-grid--3, .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; max-width: 46ch; }
  .pattern-layout, .article-layout { grid-template-columns: 1fr; }
  .pattern-layout .sidebar { position: static; grid-template-columns: 1fr 1fr; }
  .sidebar--rail { position: static; margin-top: 1rem; }
  .article-main { max-width: none; }
  .contents a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 96px; }
  .contents-count { display: none; }
  .knowledge { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .menu-btn { display: inline-grid; }
  .header-link { display: none; }
  .nav { position: fixed; inset: var(--header-h) 0 0 0; background: var(--cs-ivory); padding: 1.5rem var(--gutter) 3rem; overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; margin: 0; }
  .nav[data-open="true"] { opacity: 1; transform: none; visibility: visible; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li { border-bottom: 1px solid var(--cs-line-soft); }
  .nav a { display: block; font-family: var(--font-display); font-weight: 500; font-size: 2.2rem; padding: .8rem 0; background: none; color: var(--cs-green); }
  .nav .nav-extra { display: block; }
  .nav .nav-extra a { font-family: var(--font-ui); font-weight: 600; font-size: 1.05rem; }
  body[data-nav-open="true"] { overflow: hidden; }
  .hero-grid, .feature, .split, .newsletter-grid, .pattern-hero, .journal-lead { grid-template-columns: 1fr; }
  .hero h1 { max-width: 12ch; }
  .hero-figure { max-width: 460px; }
  .feature figure { aspect-ratio: 5 / 4; }
  .pattern-hero figure { max-width: 460px; }
}
@media (max-width: 720px) {
  :root { --fs-body: 1rem; --header-h: 64px; }
  .brand img { width: 34px; height: 34px; }
  .brand-name { font-size: 1.5rem; }
  .header-inner { gap: 1rem; }
  .header-actions { margin-left: auto; }
  .rail--swipe { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .rail--swipe::-webkit-scrollbar { display: none; }
  .rail--swipe > * { scroll-snap-align: start; }
  .contents a { grid-template-columns: minmax(0, 1fr) 64px; grid-template-areas: "name thumb" "desc thumb"; gap: .4rem 1rem; padding: 1.25rem 0; }
  .contents-name { grid-area: name; }
  .contents-desc { grid-area: desc; }
  .contents-thumb { grid-area: thumb; width: 64px; align-self: start; }
  .entry a { grid-template-columns: minmax(0, 1fr) 88px; grid-template-areas: "date date" "title fig"; gap: .4rem 1.1rem; padding: 1.4rem 0; align-items: start; }
  .entry time { grid-area: date; }
  .entry div { grid-area: title; }
  .entry figure { grid-area: fig; aspect-ratio: 1; }
  .entry p { display: none; }
  .path a { grid-template-columns: 2.4rem 1fr; }
  .path .time { grid-column: 2; }
  .hero-actions .btn { width: 100%; }
  .nl-row { flex-direction: column; }
  .pattern-layout .sidebar, .pros-cons, .prev-next, .knowledge { grid-template-columns: 1fr; }
  .prev-next .next { text-align: left; }
  .prose .rounds li { grid-template-columns: 4.6rem 1fr; }
  .rounds .rc { grid-column: 2; }
  .abbr { columns: 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .filters .grow { margin-left: 0; width: 100%; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .card-grid, .card-grid--3, .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem .9rem; }
  .card h2, .card h3 { font-size: 1.3rem; }
  .card p { display: none; }
  .card--wide p { display: block; }
  .card-grid--3 .card--wide, .card-grid .card--wide { grid-column: 1 / -1; }
  .search-box { flex-direction: column; }
  .spec-list { grid-template-columns: max-content 1fr; }
}
@media (max-width: 380px) {
  .card-grid, .card-grid--3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .brand-name { font-size: 1.35rem; }
}