/* Independent square grid with a static CSS fallback. */
.editorial .interactive-grid {margin:2rem 0 0;width:min(100%,360px);}
.editorial .grid-surface {display:block;position:relative;width:100%;aspect-ratio:1;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background-color:var(--paper-deep);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:20px 20px;touch-action:pan-y pinch-zoom;}
.editorial .grid-canvas {position:absolute;inset:0;display:block;width:100%;height:100%;}
.editorial .grid-canvas[hidden] {display:none;}
.editorial .interactive-grid figcaption {margin-top:.65rem;color:var(--muted);font-size:.75rem;line-height:1.5;}
.editorial .grid-controls {display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;}
.editorial .grid-controls button {min-height:44px;padding:.55rem .85rem;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font-size:.75rem;transition:background-color .18s,border-color .18s;}
.editorial .grid-controls button[aria-pressed="true"] {background:var(--ink);border-color:var(--ink);color:var(--paper);}
.editorial .grid-controls button[hidden] {display:none;}
@media(hover:hover) and (pointer:fine) {.editorial .grid-controls button:hover {border-color:var(--muted);} .editorial .grid-controls button:not([aria-pressed="true"]):hover {background:var(--paper-deep);}}
.editorial .grid-controls button:active {transform:translateY(1px);}
@media(prefers-reduced-motion:reduce) {.editorial .grid-controls button:active {transform:none;}}
.editorial .case-arc-description {max-width:32rem;margin:.65rem auto 0;color:var(--muted);font-size:.9rem;line-height:1.5;}
.editorial .film-hero h1 {font-size:clamp(3rem,5.5vw,5.5rem);line-height:1.04;max-width:12ch;}
.editorial .workflow-instruction {margin:.75rem 0;color:var(--muted);font-size:.9rem;}
@media (max-width:1100px) and (min-width:761px) {
 .editorial .site-header {flex-wrap:wrap;gap:1rem;}
 .editorial .site-nav {order:3;width:100%;justify-content:center;gap:1.3rem;}
 .editorial .theme-toggle {margin-left:auto;}
}
@media (max-width:760px) {
 .editorial .film-hero h1 {font-size:clamp(2.7rem,11vw,4.8rem);}
 .editorial .theme-toggle {font-size:.65rem;max-width:5.4rem;padding:.55rem;}
 .editorial .menu-toggle {font-size:.7rem;padding:.55rem;}
 .editorial .film-caption p {font-size:1rem;}
}