:root { color-scheme: dark; --ink:#0b0c0d; --ivory:#e9e3d5; --gold:#bb9a60; --muted:#a8a59e; --rule:#34332f; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ink); color:var(--ivory); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-weight:400; font-optical-sizing:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; background:transparent; border:1px solid var(--rule); padding:.7rem 1rem; min-height:44px; border-radius:2px; }
button:hover { border-color:var(--gold); }
button:disabled { opacity:.6; cursor:default; }
a:focus-visible,button:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
[hidden] { display:none !important; }
.skip-link { position:fixed; top:-100px; left:1rem; background:var(--ink); padding:1rem; z-index:10; }
.skip-link:focus { top:1rem; }
.masthead,main,footer { width:min(1280px,calc(100% - 96px)); margin:auto; }
.masthead { padding:30px 0 0; display:flex; justify-content:space-between; align-items:center; }
.home-link { font-size:15px; letter-spacing:.03em; }
.eyebrow { font-size:10px; letter-spacing:.22em; color:var(--gold); font-weight:500; }
.introduction { padding:40px 0 32px; }
.eyebrow { margin:0 0 23px; }
h1 { font-size:clamp(36px,4.2vw,56px); line-height:1; letter-spacing:-.04em; font-weight:300; margin:0; }
h1 em { font-style:normal; font-weight:300; color:var(--gold); }
.gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px 28px; padding:0 0 50px; }
.gallery-card { min-width:0; scroll-margin-top:20px; }
.card-link { position:relative; display:block; width:100%; background:var(--ink); border-radius:8px; transition:transform .25s ease; }
/* Each card shows a still of its WebGL composition inside the frame; the SVG keeps
   drawing the frame and lettering on top, and its own motif stays hidden. */
.card-thumb { position:absolute; inset:0; width:100%; height:100%; clip-path:inset(1.6667% 2.5% round 3% / 2%); }
.card-link .card-art, .viewer-art .card-art { position:relative; z-index:1; }
.card-link .card-art > rect, .viewer-art .card-art > rect { fill:transparent; }
.card-link .motif, .viewer-art .motif { visibility:hidden; }
.card-link:hover { transform:translateY(-4px); }
.card-art { display:block; width:100%; height:auto; aspect-ratio:2/3; }
footer { border-top:1px solid var(--rule); display:flex; justify-content:space-between; padding:27px 0 40px; color:var(--muted); font-size:11px; }
footer a span { color:var(--gold); }
dialog { color:var(--ivory); background:var(--ink); border:1px solid var(--rule); padding:24px 30px 32px; width:min(1040px,calc(100% - 40px)); max-height:calc(100dvh - 40px); overscroll-behavior:contain; }
dialog::backdrop { background:rgba(0,0,0,.85); }
body:has(dialog[open]) { overflow:hidden; }
.viewer-top { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:11px; letter-spacing:.08em; margin-bottom:20px; }
.viewer-top #close { border:0; min-width:44px; padding:0; }
.viewer-top #close span { font-size:26px; font-weight:300; line-height:1; }
.viewer-body { display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:56px; align-items:center; }
.viewer-art { position:relative; width:min(100%,calc((100dvh - 150px) * 2 / 3)); aspect-ratio:2/3; justify-self:center; }
/* The WebGL scene fills the card's inner rectangle; the SVG frame and lettering stay on top. */
.viewer-art canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; clip-path:inset(1.6667% 2.5% round 3% / 2%); }
.viewer-info h2 { font-size:clamp(28px,4vw,44px); line-height:1.15; font-weight:300; letter-spacing:-.03em; margin:0 0 12px; }
.viewer-info .eyebrow { margin:0 0 14px; }
.viewer-rule { width:40px; height:1px; background:var(--gold); margin:32px 0; }
#viewer-symbols { color:var(--gold); font-size:12px; line-height:1.8; }
#viewer-meaning { font-size:14px; line-height:2; margin:24px 0 30px; }
/* Square icon buttons: the motion toggle shows pause while moving and play while paused. */
.icon-button { display:inline-grid; place-items:center; min-width:44px; padding:0; }
#motion { width:44px; margin:0 0 24px; }
#motion svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#motion .icon-play { fill:currentColor; stroke-width:1; }
#motion[data-paused="true"] .icon-pause, #motion:not([data-paused="true"]) .icon-play { display:none; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.viewer-navigation { display:flex; gap:12px; }
.viewer-navigation button { flex:1; font-size:12px; }
@media (min-width:1450px) { .gallery { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:1000px) { .gallery { grid-template-columns:repeat(3,minmax(0,1fr)); } .masthead,main,footer { width:calc(100% - 56px); } .viewer-body { gap:32px; } }
@media (max-width:650px) {
  .masthead,main,footer { width:calc(100% - 32px); }
  .masthead { padding:24px 0 0; }
  .introduction { padding:28px 0 22px; }
  .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px; }
  dialog { padding:12px 16px 24px; width:calc(100% - 20px); max-height:calc(100dvh - 20px); }
  .viewer-body { display:flex; flex-direction:column; gap:26px; }
  .viewer-art { width:min(100%,340px,calc((100dvh - 110px) * 2 / 3)); }
  .viewer-info { width:100%; } .viewer-info h2 { font-size:32px; }
  .viewer-rule { margin:22px 0; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; } .card-link:hover { transform:none; } }