/* Layout overrides so the 1440px mockup scales to real screens. */
html { scroll-behavior: smooth; }
.board { width: 100%; max-width: 1440px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
img { max-width: 100%; }
.card { text-decoration: none; }
.mark { font-size: 20px; text-wrap: balance; }
.chart { min-width: 0; }
.chart svg { display: block; width: 100%; }

@media (max-width: 1100px) {
  .sec { padding: 80px 40px 0 40px; }
  .board > div[style*="padding: 28px 88px"],
  .board > div[style*="padding: 84px 88px"],
  .board > div[style*="padding: 56px 88px"],
  .board > div[style*="padding: 96px 88px"],
  .board > div[style*="padding: 36px 88px"] { padding-left: 40px !important; padding-right: 40px !important; }
  .disp[style*="font-size: 80px"] { font-size: 56px !important; }
  .disp[style*="font-size: 56px"] { font-size: 44px !important; }
  .disp[style*="font-size: 46px"] { font-size: 36px !important; }
  .disp[style*="font-size: 40px"] { font-size: 32px !important; }
  /* two-column grids collapse */
  .board div[style*="grid-template-columns: minmax(0, 5fr) minmax(0, 6fr)"],
  .board div[style*="grid-template-columns: minmax(0, 7fr) minmax(0, 4fr)"],
  .board div[style*="grid-template-columns: 640px minmax(0, 1fr)"],
  .board div[style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)"],
  .board div[style*="grid-template-columns: minmax(0, 1fr) 360px"] { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .board div[style*="grid-template-columns: repeat(5, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .photo[style*="height: 480px"] { height: 360px !important; }
}

@media (max-width: 720px) {
  .sec { padding: 64px 20px 0 20px; }
  .board > div[style*="padding: 28px 88px"],
  .board > div[style*="padding: 84px 88px"],
  .board > div[style*="padding: 56px 88px"],
  .board > div[style*="padding: 96px 88px"],
  .board > div[style*="padding: 36px 88px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .board > div[style*="padding: 28px 88px"] { flex-wrap: wrap; gap: 18px; }
  .board > div[style*="padding: 28px 88px"] > div:last-child { gap: 16px !important; flex-wrap: wrap; }
  .disp[style*="font-size: 80px"] { font-size: 38px !important; }
  .disp[style*="font-size: 56px"] { font-size: 32px !important; }
  .disp[style*="font-size: 46px"] { font-size: 28px !important; }
  .disp[style*="font-size: 40px"] { font-size: 26px !important; }
  .disp[style*="font-size: 38px"] { font-size: 28px !important; }
  .body[style*="font-size: 22px"] { font-size: 18px !important; }
  .body { font-size: 17px; }
  .sw[style*="width: 18px"] { width: 12px !important; height: 12px !important; }
  /* the chart keeps a readable size and scrolls sideways */
  .board div[style*="padding: 40px 44px 30px 44px"] { padding: 20px 20px 16px 20px !important; }
  .chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chart svg { min-width: 640px; }
  .chart::after { content: 'swipe to see the whole chart →'; display: block; position: sticky; left: 0; margin-top: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #5C5A54; }
  /* the matrix stacks: each row becomes a labelled block */
  .board div[style*="grid-template-columns: 190px repeat(3, minmax(0, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; }
  .cell.head { display: none; }
  .cell { border-right: none !important; min-height: 0; padding: 14px 18px; }
  .cell.rowhead { padding-top: 20px; border-bottom: none !important; }
  .cell:not(.rowhead)::before { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; }
  .cell:nth-child(4n+2)::before { content: 'Mostly a model'; color: #3D4F8A; }
  .cell:nth-child(4n+3)::before { content: 'Where they meet'; color: #2A5F53; }
  .cell:nth-child(4n+4)::before { content: 'Mostly atoms'; color: #9E4A31; }
  .cell:not(.rowhead) { border-bottom: none !important; }
  .cell:nth-child(4n+4) { border-bottom: 1.5px solid rgba(27,26,23,0.16) !important; }
  .cell:last-child { border-bottom: none !important; }
  .board div[style*="grid-template-columns: repeat(5, minmax(0, 1fr))"],
  .board div[style*="grid-template-columns: repeat(2, minmax(0, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; }
  .board div[style*="grid-template-columns: 150px minmax(0, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; }
  .photo[style*="height: 200px"] { width: 150px; }
  .photo[style*="height: 480px"] { height: 260px !important; }
  .ms { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ms .y { padding-top: 0; }
  .chip { font-size: 11px; letter-spacing: 0.05em; padding: 5px 8px; }
  #contact > div { padding: 40px 24px !important; }
  #contact a[href^="mailto"] { font-size: 15px !important; word-break: break-all; }
  .board > div[style*="padding: 36px 88px"] { flex-direction: column; gap: 8px; }
}