.day-night-section { padding-block:3rem; scroll-margin-top:6rem; }
  .day-night-section .section-heading { max-width:800px; margin-inline:auto; margin-bottom:1.75rem; gap:.75rem; }
  .day-night-section h2 { font-size:clamp(1.8rem,3vw,2.65rem); }
  .day-night-section .section-heading > p:last-child { font-size:1rem; }
  .day-night-scene { position:relative; width:100%; max-width:min(800px,calc((100vh - 220px) * 16 / 9)); margin:0 auto; overflow:hidden; aspect-ratio:16/9; border-radius:var(--radius); background:var(--deep); box-shadow:var(--shadow); }
  .day-night-scene img { display:block; width:100%; height:100%; object-fit:contain; }
  .day-night-scene .day-night-night { position:absolute; inset:0; opacity:0; pointer-events:none; }
  .day-night-scene figcaption { position:absolute; left:1rem; bottom:1rem; padding:.35rem .75rem; border-radius:2rem; color:#fff; background:#082d34e6; font-size:.75rem; }
  .day-night-controls { position:relative; display:flex; flex-wrap:wrap; align-items:flex-start; align-content:start; justify-content:space-between; gap:1rem; max-width:800px; min-height:3.5rem; margin:1rem auto 0; }
  .day-night-controls p { color:var(--ink-soft); }
  .day-night-controls button { color:var(--ink); border:1px solid var(--ink-soft); cursor:pointer; }
  .day-night-controls button[hidden] { display:none; }
  @media (max-width:640px) { .day-night-controls { min-height:6rem; } .day-night-controls button { position:absolute; left:0; top:3rem; } }
  @media (max-width:480px) { .day-night-scene figcaption { left:.5rem; bottom:.5rem; font-size:.65rem; } }