/* Sprint 4 gallery miniatures: every new concept uses CSS-only artwork. */
.concept-visual--echo-room,
.concept-visual--civic-press,
.concept-visual--kora-journeys,
.concept-visual--fold-unit,
.concept-visual--grain-35,
.concept-visual--helix-grid,
.concept-visual--vigne-8,
.concept-visual--apex-14,
.concept-visual--signal-atlas,
.concept-visual--nigiri-next,
.concept-visual--mono-made,
.concept-visual--kibo-r1,
.concept-visual--veil-02,
.concept-visual--focus-field {
  font-family: Arial, sans-serif;
}

.concept-visual--echo-room {
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.035) 3px 4px), #080808;
}
.visual-record {
  position: absolute; width: 72%; aspect-ratio: 1; left: 14%; top: 13%; border-radius: 50%;
  background: repeating-radial-gradient(circle, #111 0 5px, #393939 6px, #090909 8px);
  box-shadow: 0 0 0 1px #777, 0 30px 55px #000;
}
.visual-record::after { position:absolute; inset:42%; border-radius:50%; background:#f03425; content:""; }
.visual-wave { position:absolute; right:6%; bottom:11%; left:6%; height:16%; background:repeating-linear-gradient(90deg,#f03425 0 2px,transparent 2px 8px); clip-path:polygon(0 45%,5% 32%,10% 70%,15% 5%,20% 86%,25% 30%,30% 66%,35% 15%,40% 84%,45% 38%,50% 60%,55% 4%,60% 91%,65% 42%,70% 65%,75% 19%,80% 73%,85% 8%,90% 62%,95% 35%,100% 52%,100% 100%,0 100%); }

.concept-visual--civic-press { background:#efe7d2; color:#143cdb; }
.concept-visual--civic-press::before { position:absolute; inset:6%; background:repeating-linear-gradient(90deg,transparent 0 30%,#143cdb 30% 30.5%,transparent 30.5% 34%); border-block:8px solid #e33425; content:""; }
.visual-paper { position:absolute; inset:16% 11% 20%; border:2px solid #151515; background:repeating-linear-gradient(#151515 0 2px,transparent 2px 18px); transform:rotate(-4deg); }
.visual-paper::after { position:absolute; width:58%; height:35%; right:4%; top:7%; background:#143cdb; content:""; }
.visual-slug { position:absolute; left:8%; bottom:6%; font-size:clamp(1rem,2vw,1.8rem); font-weight:900; letter-spacing:-.04em; }

.concept-visual--kora-journeys { background:linear-gradient(145deg,#ff6c24 0 45%,#124ccb 45% 72%,#ffd438 72%); }
.concept-visual--kora-journeys::before { position:absolute; inset:0; background:radial-gradient(circle at 16% 18%,transparent 0 11%,#ffd438 11.5% 12.5%,transparent 13%),linear-gradient(28deg,transparent 48%,rgba(255,255,255,.55) 49% 51%,transparent 52%); content:""; }
.visual-ticket { position:absolute; left:9%; top:22%; width:72%; padding:11% 8%; background:#fff5d8; color:#171714; border:2px dashed #171714; font-weight:900; letter-spacing:.12em; transform:rotate(-9deg); }
.visual-stamp { position:absolute; right:8%; bottom:14%; display:grid; place-items:center; width:36%; aspect-ratio:1; border:5px double #f53030; border-radius:50%; color:#f53030; font-size:2.5rem; font-weight:900; transform:rotate(14deg); }

.concept-visual--fold-unit { background:#111; color:#c8ff18; }
.visual-fold { position:absolute; left:-5%; top:15%; font-size:clamp(4.5rem,10vw,9rem); font-weight:1000; letter-spacing:-.14em; line-height:.75; transform:rotate(-90deg) translateX(-100%); transform-origin:left top; -webkit-text-stroke:1px #c8ff18; }
.visual-fold::after { position:absolute; inset:43% -20% 23%; background:#f4f1e8; content:""; mix-blend-mode:difference; }
.visual-unit { position:absolute; right:8%; bottom:7%; border-top:2px solid #c8ff18; padding-top:8px; font-size:.75rem; font-weight:900; letter-spacing:.18em; }

.concept-visual--grain-35 { background:radial-gradient(circle at 60% 35%,#674b32,#17120f 60%); color:#f1d7ad; }
.concept-visual--grain-35::before { position:absolute; inset:0; opacity:.28; background-image:radial-gradient(#fff 0 .7px,transparent .8px); background-size:5px 5px; content:""; }
.visual-film { position:absolute; inset:9% 13%; border:14px dotted #d9b586; background:linear-gradient(100deg,transparent 0 46%,#a5261e 47% 51%,transparent 52%),#1b1713; box-shadow:0 0 0 3px #0b0908; }
.visual-film::after { position:absolute; inset:14%; border:1px solid #c9aa7a; background:linear-gradient(145deg,#2a2118,#9b422d); content:""; }
.visual-frame { position:absolute; right:9%; bottom:7%; color:#ef3b2d; font-size:4rem; font-weight:900; line-height:1; }

.concept-visual--helix-grid { background-color:#03080c; background-image:linear-gradient(rgba(0,222,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(0,222,255,.09) 1px,transparent 1px); background-size:28px 28px; color:#48f7ff; }
.visual-network { position:absolute; inset:13%; background:radial-gradient(circle at 20% 25%,#48f7ff 0 4px,transparent 5px),radial-gradient(circle at 73% 18%,#ff3ad4 0 5px,transparent 6px),radial-gradient(circle at 56% 58%,#48f7ff 0 7px,transparent 8px),radial-gradient(circle at 18% 80%,#ff3ad4 0 4px,transparent 5px); filter:drop-shadow(0 0 8px #48f7ff); }
.visual-network::before,.visual-network::after { position:absolute; left:12%; top:44%; width:72%; height:1px; background:#48f7ff; content:""; transform:rotate(28deg); }
.visual-network::after { transform:rotate(-42deg); background:#ff3ad4; }
.visual-terminal { position:absolute; left:7%; bottom:6%; padding:6px 8px; border:1px solid #48f7ff; font-family:monospace; font-size:.68rem; letter-spacing:.08em; }

.concept-visual--vigne-8 { background:#641b31; color:#e4c17f; }
.visual-contour { position:absolute; inset:8%; border:1px solid currentColor; border-radius:51% 49% 43% 57%; box-shadow:0 0 0 18px #641b31,0 0 0 19px currentColor,0 0 0 40px #641b31,0 0 0 41px currentColor,0 0 0 64px #641b31,0 0 0 65px currentColor; transform:rotate(-18deg); }
.visual-contour::after { position:absolute; inset:26% 37%; border:2px solid currentColor; border-radius:50% 50% 12% 12%; background:#390a1d; content:""; }
.visual-vintage { position:absolute; right:7%; bottom:6%; text-align:right; font-family:Georgia,serif; font-size:.68rem; letter-spacing:.12em; }

.concept-visual--apex-14 { background:linear-gradient(120deg,#ee3226 0 54%,#111 54%); color:white; }
.concept-visual--apex-14::before { position:absolute; inset:0; background:repeating-linear-gradient(115deg,transparent 0 18px,rgba(255,255,255,.13) 19px 21px); content:""; }
.visual-speed { position:absolute; left:4%; top:5%; font-size:clamp(7rem,15vw,13rem); font-style:italic; font-weight:1000; line-height:1; letter-spacing:-.13em; text-shadow:8px 8px 0 #111; }
.visual-lap { position:absolute; right:5%; bottom:7%; padding:6px; background:#dfff00; color:#111; font-family:monospace; font-size:.65rem; font-weight:800; }

.concept-visual--signal-atlas { background:#e8f1ff; color:#08264e; }
.concept-visual--signal-atlas::before { position:absolute; inset:0; background:linear-gradient(90deg,transparent 49.5%,rgba(8,38,78,.15) 50%,transparent 50.5%),linear-gradient(transparent 49.5%,rgba(8,38,78,.15) 50%,transparent 50.5%); background-size:36px 36px; content:""; }
.visual-report { position:absolute; left:13%; top:12%; width:60%; height:70%; padding:10%; background:#1354e8; color:#fff; font-size:4.5rem; font-weight:900; letter-spacing:-.1em; line-height:.72; box-shadow:18px 18px 0 #ff6b36; }
.visual-index { position:absolute; right:6%; bottom:7%; writing-mode:vertical-rl; font-family:monospace; font-size:.65rem; letter-spacing:.12em; }

.concept-visual--nigiri-next { background:linear-gradient(#071b3a 0 72%,#d8c397 72%); color:#fff; }
.visual-plate { position:absolute; width:72%; height:25%; left:14%; top:42%; border-radius:50%; background:radial-gradient(ellipse,#ed6b4f 0 24%,#f3ede2 25% 48%,#b79864 49% 52%,#f3ede2 53%); box-shadow:0 18px 25px #0008; }
.visual-plate::before,.visual-plate::after { position:absolute; width:32%; height:46%; top:24%; border-radius:50%; background:#f2c08c; content:""; }
.visual-plate::before { left:8%; }.visual-plate::after { right:8%; background:#d84d42; }
.visual-course { position:absolute; left:8%; top:8%; font-family:serif; font-size:1.15rem; letter-spacing:.24em; writing-mode:vertical-rl; }

.concept-visual--mono-made { background:#f4f2eb; color:#111; }
.concept-visual--mono-made::before { position:absolute; inset:0; background:linear-gradient(#111 1px,transparent 1px),linear-gradient(90deg,#111 1px,transparent 1px); background-size:25% 20%; content:""; }
.visual-days { position:absolute; left:5%; top:8%; font-size:clamp(7rem,16vw,14rem); font-weight:1000; letter-spacing:-.16em; line-height:.8; mix-blend-mode:multiply; }
.visual-grid-label { position:absolute; right:0; bottom:10%; padding:8px 12px; background:#111; color:#fff; font-size:.66rem; font-weight:900; letter-spacing:.16em; }

.concept-visual--kibo-r1 { background:linear-gradient(145deg,#cbeeff,#fff0c4); color:#24425d; }
.visual-bot { position:absolute; width:64%; aspect-ratio:.85; left:18%; top:14%; border:3px solid #24425d; border-radius:44% 44% 34% 34%; background:#f8fbf8; box-shadow:inset 0 -18px 0 #8ad1d1,0 22px 50px #4b82973d; }
.visual-bot::before { position:absolute; width:68%; height:36%; left:16%; top:17%; border-radius:46%; background:#24425d; content:""; }
.visual-bot i { position:absolute; z-index:1; width:9%; aspect-ratio:1; top:31%; border-radius:50%; background:#baff67; box-shadow:0 0 12px #baff67; }
.visual-bot i:first-child { left:35%; }.visual-bot i:last-child { right:35%; }
.visual-hello { position:absolute; left:7%; bottom:6%; font-size:.7rem; font-weight:900; letter-spacing:.16em; }

.concept-visual--veil-02 { background:linear-gradient(150deg,#dadce0,#777d83 55%,#202428); color:#f6ff49; }
.visual-jacket { position:absolute; width:58%; height:70%; left:21%; top:10%; background:#222a2f; clip-path:polygon(28% 0,72% 0,100% 20%,85% 42%,76% 34%,76% 100%,24% 100%,24% 34%,15% 42%,0 20%); box-shadow:inset 0 0 0 2px #f6ff49; }
.visual-jacket::after { position:absolute; left:49%; top:0; width:2px; height:100%; background:#f6ff49; content:""; }
.visual-edition { position:absolute; right:5%; bottom:6%; font-family:monospace; font-size:.72rem; letter-spacing:.14em; }

.concept-visual--focus-field { background:#efe9ff; color:#32265a; }
.concept-visual--focus-field::before { position:absolute; width:40%; height:18%; left:11%; top:15%; border-radius:12px; background:#ffb6b0; box-shadow:78px 66px 0 #a8dcce,18px 145px 0 #ffd56b,95px 215px 0 #a8b8ff; content:""; }
.visual-orbit { position:absolute; width:68%; aspect-ratio:1; right:-22%; top:7%; border:2px dashed #6a58a1; border-radius:50%; }
.visual-orbit::after { position:absolute; width:13%; aspect-ratio:1; left:7%; top:55%; border-radius:50%; background:#6a58a1; box-shadow:0 0 0 8px #efe9ff; content:""; }
.visual-week { position:absolute; left:7%; bottom:6%; font-size:.7rem; font-weight:900; letter-spacing:.16em; }

@media (min-width: 851px) {
  .concept-card:nth-child(2) { margin-top: 0; }
  .concept-card:nth-child(3n + 2) { margin-top: clamp(24px, 4vw, 58px); }
}

@media (max-width: 850px) {
  .concept-card:last-child { grid-column: span 6; }
}

@media (max-width: 600px) {
  .concept-card:last-child { grid-column: 1; }
  .gallery-nav a { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .concept-visual *, .concept-visual *::before, .concept-visual *::after { animation: none !important; }
}