/* TibereJ — vitrine des apps. Fond sombre : les cadrans AMOLED y sont chez eux. */
:root {
  --bg: #0c0d10; --panel: #14161b; --panel-2: #1a1d24; --line: #272b35;
  --ink: #eeebe3; --muted: #9aa0ab; --accent: #f0c35a; --accent-ink: #1d1606;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--body); }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }

.top { position: sticky; top: 0; z-index: 5; background: rgba(12, 13, 16, .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; font: 800 21px/1 var(--display); font-stretch: 85%; letter-spacing: .01em; }
.brand small { font: 400 13px var(--body); color: var(--muted); }
.brand-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); align-self: center; }
.top nav { display: flex; gap: 6px; flex-wrap: wrap; }
.top nav a { text-decoration: none; color: var(--muted); font: 600 14px var(--display); letter-spacing: .04em; text-transform: uppercase; padding: 6px 10px; border-radius: 8px; }
.top nav a:hover, .top nav a:focus-visible { color: var(--ink); background: var(--panel-2); outline: none; }

.intro { padding-block: 64px 28px; max-width: 860px; }
.intro.tight { padding-block: 34px 8px; }
.eyebrow { font: 700 13px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
h1 { font: 800 clamp(38px, 6vw, 70px)/.98 var(--display); font-stretch: 80%; letter-spacing: -.005em; margin: 0 0 16px; text-wrap: balance; }
.lede { font-size: 20px; color: #c9c6be; max-width: 62ch; margin: 0 0 22px; }
.intro-links, .btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-block; text-decoration: none; background: var(--accent); color: var(--accent-ink); font: 700 15px var(--display); letter-spacing: .03em; padding: 12px 20px; border-radius: 999px; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn:hover { filter: brightness(1.08); } .btn.ghost:hover { border-color: var(--accent); }

.heroes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-block: 10px 30px; }
.heroes img { border-radius: 14px; border: 1px solid var(--line); width: 100%; height: auto; }
@media (max-width: 760px) { .heroes { grid-template-columns: minmax(0, 1fr); } }

.block { padding-block: 26px; }
.sec { font: 800 30px/1 var(--display); font-stretch: 85%; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 18px; display: flex; align-items: baseline; gap: 12px; }
.sec span, aside h2 span { font: 600 15px var(--body); color: var(--muted); letter-spacing: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.card { text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px 16px 16px; display: grid; gap: 6px; transition: border-color .15s, transform .15s; }
.card:hover, .card:focus-visible { border-color: #3a3f4b; transform: translateY(-2px); outline: none; }
.cover { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 1; margin: -4px -2px 10px; box-shadow: 0 12px 26px rgba(0,0,0,.45); }
.cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover .cover img { transform: scale(1.05); }
.dial { display: block; border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 0 0 5px #23262e, 0 0 0 6px #343844, 0 14px 30px rgba(0,0,0,.5); margin: 4px auto 12px; width: 78%; aspect-ratio: 1; }
.dial img { width: 100%; height: 100%; object-fit: cover; }
.dial.big { width: min(300px, 70vw); }
.card-name { font: 800 21px/1.1 var(--display); font-stretch: 85%; letter-spacing: .01em; }
.card-tag { color: var(--muted); font-size: 15px; line-height: 1.35; min-height: 2.7em; }
.card-meta { display: flex; align-items: center; gap: 8px; font: 700 14px var(--display); color: var(--ink); }
.badge { font: 700 11px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 3px 8px; }

.crumbs { color: var(--muted); font-size: 14px; margin: 26px 0 0; }
.crumbs a { color: var(--muted); }
.app-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; padding-block: 20px 26px; }
@media (max-width: 760px) { .app-head { grid-template-columns: minmax(0, 1fr); } }
.app-hero { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); }
.shots { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 260px); gap: 14px; overflow-x: auto; padding-block: 18px; }
.shots img { border-radius: 14px; background: #000; width: 100%; height: auto; }
.app-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; padding-block: 10px 30px; }
@media (max-width: 900px) { .app-body { grid-template-columns: minmax(0, 1fr); } }
.prose { max-width: 70ch; }
.prose h2 { font: 800 22px/1.15 var(--display); font-stretch: 88%; letter-spacing: .01em; margin: 30px 0 8px; }
.prose p, .prose li { color: #d6d3cb; }
.prose ul, .prose ol { padding-left: 22px; }
.prose a { color: var(--accent); }
aside { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px; align-self: start; }
aside h2 { font: 800 19px var(--display); margin: 0 0 12px; display: flex; gap: 8px; align-items: baseline; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { text-decoration: none; font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: #d6d3cb; }
.chip:hover { border-color: var(--accent); color: var(--ink); }
.small { color: var(--muted); font-size: 14px; margin: 14px 0 0; }

.watches { list-style: none; padding: 0; margin: 10px 0 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.watches li { display: flex; justify-content: space-between; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.watches a { text-decoration: none; font-weight: 700; }
.watches span { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.guides { list-style: none; padding: 0; margin: 0 0 40px; display: grid; gap: 10px; }
.guides li { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: grid; gap: 4px; }
.guides a { font: 800 20px var(--display); font-stretch: 88%; text-decoration: none; }
.guides span { color: var(--muted); font-size: 15px; }
.guide { padding-bottom: 40px; } .guide h1 { margin-top: 18px; font-size: clamp(32px, 5vw, 52px); }

.foot { border-top: 1px solid var(--line); margin-top: 40px; padding-block: 28px 40px; color: var(--muted); font-size: 15px; }
.foot a { color: var(--accent); }
.fine { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .card { transition: none; } }

/* ── chaque page d'app dans son univers (couleurs de la cover, police et texture de la famille) ── */
body[class^="u-"] { background: var(--u-deep); }
.uni { position: relative; isolation: isolate; background: var(--u-bg); color: var(--u-ink); overflow: hidden; padding-bottom: 34px; }
.uni::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.uni::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; z-index: -1; background: linear-gradient(transparent, var(--u-deep)); }
.uni .crumbs, .uni .crumbs a { color: var(--u-ink); opacity: .72; }
.uni .eyebrow { color: var(--u-ink); opacity: .78; }
.uni h1, body[class^="u-"] .sec, body[class^="u-"] .prose h2, body[class^="u-"] aside h2 { font-family: var(--u-font); }
.uni .lede { color: var(--u-ink); opacity: .92; }
.app-cover { width: min(380px, 80vw); height: auto; border-radius: 26px; box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); }
body[class^="u-"] .btn { background: var(--u-accent); color: var(--u-accent-ink); }
.uni .btn.ghost { background: transparent; color: var(--u-ink); border-color: currentColor; }
body[class^="u-"] .prose h2 { color: var(--u-accent); }
body[class^="u-"] .prose a, body[class^="u-"] .foot a { color: var(--u-accent); }
body[class^="u-"] aside, body[class^="u-"] .card { background: color-mix(in srgb, var(--u-deep) 86%, #ffffff); border-color: color-mix(in srgb, var(--u-deep) 70%, #ffffff); }
body[class^="u-"] .chip { background: color-mix(in srgb, var(--u-deep) 78%, #ffffff); }
body[class^="u-"] .chip:hover { border-color: var(--u-accent); }
body[class^="u-"] .top { background: color-mix(in srgb, var(--u-deep) 88%, transparent); }

/* textures par famille */
.u-pixel .uni::before { background-image: linear-gradient(rgba(0,0,0,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.07) 1px, transparent 1px); background-size: 12px 12px; }
.u-pixel .uni h1 { text-transform: uppercase; text-shadow: 4px 4px 0 rgba(0,0,0,.35); font-size: clamp(34px, 5vw, 58px); }
.u-pixel .btn { border-radius: 0; box-shadow: 4px 4px 0 rgba(0,0,0,.4); }
.u-pixel .app-hero, .u-pixel .shots img, .u-pixel .app-cover { image-rendering: pixelated; }
.u-classic .uni::before { background-image: radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,240,200,.75), transparent), radial-gradient(1px 1px at 58% 12%, rgba(255,255,255,.6), transparent),
  radial-gradient(1.2px 1.2px at 82% 64%, rgba(255,240,200,.6), transparent), radial-gradient(1px 1px at 34% 78%, rgba(200,215,255,.55), transparent),
  radial-gradient(160% 90% at 80% 0%, rgba(255,255,255,.10), transparent 60%); background-size: 230px 230px, 170px 170px, 260px 260px, 190px 190px, 100% 100%; }
.u-classic .uni h1 { font-weight: 600; letter-spacing: .14em; font-size: clamp(44px, 6.5vw, 82px); }
.u-hud .uni::before { background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 2px, transparent 2px 4px), radial-gradient(90% 70% at 75% 40%, rgba(255,255,255,.08), transparent 70%); }
.u-hud .uni h1 { text-transform: uppercase; letter-spacing: .04em; }
.u-board .uni::before { background: repeating-linear-gradient(180deg, transparent 0 45px, rgba(0,0,0,.28) 45px 47px); }
.u-board .uni h1 { text-transform: uppercase; letter-spacing: .03em; }
.u-map .uni::before { background: repeating-radial-gradient(ellipse at 28% 70%, transparent 0 26px, rgba(0,0,0,.10) 26px 28px), repeating-radial-gradient(ellipse at 85% 20%, transparent 0 20px, rgba(0,0,0,.08) 20px 22px); }
.u-paper .uni::before { background-image: linear-gradient(rgba(40,80,160,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(40,80,160,.13) 1px, transparent 1px); background-size: 22px 22px; }
.u-chalk .uni::before { background: radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,.07), transparent 70%); }
.u-chalk .uni h1 { font-size: clamp(54px, 8vw, 96px); font-weight: 600; }
.u-bauhaus .uni::before { background: radial-gradient(circle at 88% 30%, rgba(0,0,0,.14) 0 150px, transparent 151px), radial-gradient(circle at 70% 115%, rgba(255,255,255,.14) 0 180px, transparent 181px); }
.u-mono .uni h1 { letter-spacing: .08em; }
.u-default .uni::before { background: radial-gradient(100% 80% at 80% 30%, rgba(255,255,255,.12), transparent 65%); }

/* ── best-sellers : trois tranches en biais, celle qu'on survole prend la place ── */
.best-head { padding-block: 34px 14px; }
.best { display: flex; height: min(680px, 78vh); min-height: 520px; margin: 8px 0 36px; overflow: hidden; }
.bp { --slant: 70px; position: relative; flex: 1 1 0; min-width: 0; text-decoration: none; color: #fff; overflow: hidden;
      transition: flex .7s cubic-bezier(.2, .8, .2, 1); isolation: isolate; }
.bp + .bp { margin-left: calc(-1 * var(--slant)); }
.bp:nth-child(1) { clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
.bp:nth-child(2) { clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
.bp:nth-child(3) { clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%); }
.best.has-open .bp, .best:focus-within .bp { flex-grow: .5; }
.best .bp.open, .best .bp:focus-visible { flex-grow: 6; outline: none; }
.bp::before { content: ""; position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform 1.2s; }
.bp.open::before { transform: scale(1.04); }
.bp::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.bp-mini, .bp-full, .bp-vert { position: absolute; inset: 0; transition: opacity .35s; }
.bp-mini { display: grid; place-content: center; justify-items: center; gap: 14px; padding: 0 calc(var(--slant) + 10px); text-align: center; }
.bp-face { width: min(250px, 72%); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 6px rgba(0,0,0,.55), 0 0 0 8px rgba(255,255,255,.12), 0 24px 50px rgba(0,0,0,.6); }
.bp-name { font-size: 34px; line-height: 1; }
.bp-hint { font: 700 12px var(--display); letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.bp-vert { display: grid; place-items: center; opacity: 0; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 26px; letter-spacing: .12em; }
.bp-full { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 4%; padding: 40px calc(var(--slant) + 50px);
           opacity: 0; pointer-events: none; }
.best.has-open .bp:not(.open) .bp-mini, .best:focus-within .bp:not(:focus-visible):not(.open) .bp-mini { opacity: 0; }
.best.has-open .bp:not(.open) .bp-vert { opacity: 1; transition-delay: .2s; }
.bp.open .bp-mini, .bp:focus-visible .bp-mini { opacity: 0; }
.bp.open .bp-full, .bp:focus-visible .bp-full { opacity: 1; transition-delay: .3s; }
.bp-stage { justify-self: center; width: min(440px, 100%); }
.cyc { position: relative; display: block; aspect-ratio: 1; }
.cyc img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.cyc.round img { border-radius: 50%; box-shadow: 0 0 0 7px rgba(0,0,0,.6), 0 0 0 9px rgba(255,255,255,.14), 0 30px 70px rgba(0,0,0,.6); }
.cyc-5 img { animation: cyc5 10s infinite; } .cyc-6 img { animation: cyc6 12s infinite; }
.cyc img:first-child { opacity: 1; }
@keyframes cyc5 { 0%, 18% { opacity: 1 } 22%, 96% { opacity: 0 } 100% { opacity: 1 } }
@keyframes cyc6 { 0%, 15% { opacity: 1 } 18.5%, 96.5% { opacity: 0 } 100% { opacity: 1 } }
.bp-copy { display: grid; gap: 12px; max-width: 460px; }
.bp-eyebrow { font: 700 12px var(--display); letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.bp-title { font-size: clamp(44px, 5vw, 76px); line-height: .95; }
.bp-tag { font-size: 20px; opacity: .92; }
.bp-copy ul { margin: 4px 0 8px; padding-left: 20px; display: grid; gap: 6px; font-size: 16px; }
.bp-copy .btn { justify-self: start; }
.bp-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* LUNA : ciel d'aventurine, arc des phases, serif de cadran habillé */
.bp-luna::before { background-image: url(../img/home/luna-sky.webp); }
.bp-luna::after { background: linear-gradient(90deg, rgba(4,8,26,.15), rgba(4,8,26,.55)); }
.bp-luna .bp-name, .bp-luna .bp-title, .bp-luna .bp-vert { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; letter-spacing: .32em; }
.bp-luna .bp-title { letter-spacing: .22em; }
.bp-luna .bp-eyebrow, .bp-luna .bp-hint { color: #e8c98a; }
.bp-luna .btn { background: #e8c98a; color: #12182f; }

/* Flapboard : le tableau des départs, palettes jaunes sur noir */
.bp-flap::before { background: radial-gradient(120% 90% at 70% 30%, #26262a, #0d0d0f 70%); }
.bp-flap .bp-name, .bp-flap .bp-title, .bp-flap .bp-vert { font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.bp-flap .bp-eyebrow, .bp-flap .bp-hint { color: #f5c400; }
.bp-flap .btn { background: #f5c400; color: #111; }
.board { position: absolute; top: 34px; right: calc(var(--slant) + 26px); display: grid; gap: 5px; padding: 14px; background: #0a0a0b;
         border: 1px solid #2a2a2e; border-radius: 6px; box-shadow: 0 20px 50px rgba(0,0,0,.6); opacity: .22; transition: opacity .5s; }
.bp-flap.open .bp-deco .board { opacity: 0; }
.board.inflow { position: static; opacity: 1; justify-self: start; margin-top: 8px; }
.board-head { font: 600 13px "Oswald", sans-serif; letter-spacing: .3em; color: #f5c400; padding-bottom: 4px; }
.frow { display: flex; gap: 2px; } .frow i { width: 10px; }
.flap { position: relative; width: 17px; height: 25px; display: grid; place-items: center; background: linear-gradient(#1f1f22 50%, #18181a 50%);
        border-radius: 2px; font: 600 16px/1 "Oswald", sans-serif; color: #f5c400; }
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #000; }
.bp-flap.open .flap { animation: flipin .5s calc(var(--i) * 18ms) both; }
@keyframes flipin { 0% { transform: rotateX(90deg); filter: brightness(.4) } 100% { transform: rotateX(0); filter: none } }

/* Step Garden : la prairie au pixel, des plantes qui poussent, des pièces qui montent */
.bp-sg::before { background-image: url(../img/home/sg-meadow.png); image-rendering: pixelated; background-position: center 30%; }
.bp-sg::after { background: linear-gradient(90deg, rgba(20,16,40,.05), rgba(20,16,40,.45)); }
.bp-sg .bp-name, .bp-sg .bp-title, .bp-sg .bp-vert { font-family: "Silkscreen", monospace; font-weight: 700; text-transform: uppercase; text-shadow: 3px 3px 0 #1a1a2e; }
.bp-sg .bp-title { font-size: clamp(36px, 4.2vw, 62px); }
.bp-sg .bp-eyebrow, .bp-sg .bp-hint { color: #ffd640; text-shadow: 2px 2px 0 #1a1a2e; }
.bp-sg .bp-copy, .bp-sg .bp-mini { text-shadow: 2px 2px 0 rgba(26,26,46,.85); }
.bp-sg .btn { background: #ffd640; color: #1a1a2e; border-radius: 0; box-shadow: 4px 4px 0 #1a1a2e; text-shadow: none; }
.bp-sg .cyc.round img { image-rendering: pixelated; }
.sg-plants { position: absolute; left: calc(var(--slant) + 20px); right: calc(var(--slant) + 20px); bottom: 18px; display: flex; justify-content: space-around; align-items: flex-end; }
.sg-plants img { width: 60px; image-rendering: pixelated; transform-origin: bottom; opacity: .0; transform: scaleY(.1); }
.bp-sg.open .sg-plants img { animation: grow .6s steps(4) calc(.25s + var(--i) * 90ms) both; }
@keyframes grow { from { opacity: 1; transform: scaleY(.1) } to { opacity: 1; transform: scaleY(1) } }
.sg-coins img { position: absolute; width: 30px; image-rendering: pixelated; bottom: 70px; left: calc(14% + var(--i) * 11%); opacity: 0; }
.bp-sg.open .sg-coins img { animation: coin 1.6s steps(8) calc(.6s + var(--i) * .22s) infinite; }
@keyframes coin { 0% { opacity: 0; transform: translateY(0) } 15% { opacity: 1 } 100% { opacity: 0; transform: translateY(-160px) } }

@media (max-width: 860px) {
  .best { flex-direction: column; height: auto; min-height: 0; overflow: visible; gap: 14px; padding-inline: 16px; }
  .bp { --slant: 0px; clip-path: none !important; margin: 0 !important; border-radius: 18px; flex: none !important; }
  .bp-mini, .bp-vert { display: none; }
  .bp-full { position: relative; opacity: 1; grid-template-columns: minmax(0, 1fr); padding: 28px 22px; pointer-events: auto; }
  .bp-stage { width: min(280px, 80%); }
  .bp-deco .board { display: none; } .board.inflow { transform: scale(.72); transform-origin: left top; margin-bottom: -60px; }
  .sg-plants img { opacity: 1; transform: none; width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .bp, .bp::before { transition: none; } .cyc img { animation: none !important; } .cyc img:first-child { opacity: 1; }
  .flap, .sg-plants img, .sg-coins img { animation: none !important; } .sg-plants img { opacity: 1; transform: none; }
}

/* ── collections : même geste que les best-sellers, plus compact ── */
.cols { display: grid; gap: 0; padding-block: 10px 0; }
.cols > .col { width: 100%; }                 /* une grille rétrécit un élément à marges auto : pleine largeur */
/* chaque collection sur sa bande, accordée à son type, bords fondus dans la page */
.col { position: relative; isolation: isolate; padding-block: 64px; }
.col::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.col-type-and-graphics::before { background:
  radial-gradient(circle at 10% 35%, rgba(226, 85, 52, 0.48) 0 150px, transparent 151px),
  radial-gradient(circle at 93% 70%, rgba(240, 190, 40, 0.38) 0 200px, transparent 201px),
  radial-gradient(circle at 93% 70%, #131316 0 120px, transparent 121px),
  linear-gradient(90deg, transparent 64%, rgba(40, 90, 170, 0.38) 64% 70%, transparent 70%), #131316; }
.col-dress-watches::before { background:
  repeating-radial-gradient(circle at 78% 45%, rgba(232, 190, 106, 0.13) 0 1px, transparent 1px 9px),
  radial-gradient(55% 80% at 78% 45%, rgba(232, 190, 106, 0.26), transparent 70%), linear-gradient(160deg, #0d1734, #070b18); }
.col-run-ride-walk::before { background:
  repeating-linear-gradient(-14deg, transparent 0 70px, rgba(255, 255, 255, 0.1) 70px 73px),
  radial-gradient(50% 70% at 20% 60%, rgba(122, 181, 42, 0.35), transparent 70%),
  radial-gradient(45% 70% at 85% 40%, rgba(192, 71, 63, 0.32), transparent 70%), #0d120b; }
.col-pixel-worlds::before { background: linear-gradient(rgba(14, 12, 34, 0.6), rgba(14, 12, 34, 0.6)), url(../img/home/sg-meadow.png) center 35% / cover; image-rendering: pixelated; }
.col-living-scenes::before { background:
  radial-gradient(60% 70% at 25% 10%, rgba(80, 200, 220, 0.42), transparent 65%),
  radial-gradient(50% 60% at 85% 90%, rgba(170, 110, 200, 0.32), transparent 65%), linear-gradient(180deg, #0a2a3c, #0b1c2b 60%, #191329); }
.col-mission-control::before { background:
  repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0 2px, transparent 2px 4px),
  radial-gradient(55% 70% at 60% 50%, rgba(255, 176, 46, 0.32), transparent 68%), #130c04; }
.col-retro-objects::before { background:
  linear-gradient(168deg, transparent 0 52%, rgba(226, 120, 40, 0.35) 52% 57%, rgba(240, 180, 60, 0.32) 57% 62%, rgba(190, 70, 50, 0.32) 62% 67%, transparent 67%), #17120d; }
.col-maps-and-paper::before { background:
  repeating-radial-gradient(ellipse at 22% 62%, transparent 0 18px, rgba(214, 190, 140, 0.21) 18px 20px),
  repeating-radial-gradient(ellipse at 82% 28%, transparent 0 22px, rgba(214, 190, 140, 0.16) 22px 24px), #15130e; }
.col-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.col-head .sec { margin: 0; }
.col-head p { margin: 0; color: var(--muted); }
.col-acc { display: flex; height: 400px; border-radius: 22px; overflow: hidden; }
.cp { --s: 28px; position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; isolation: isolate; text-decoration: none;
      color: var(--u-ink); background: var(--u-bg); transition: flex .6s cubic-bezier(.2, .8, .2, 1); }
.cp + .cp { margin-left: calc(-1 * var(--s)); }
.cp:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - var(--s)) 100%, 0 100%); }
.cp:not(:first-child):not(:last-child) { clip-path: polygon(var(--s) 0, 100% 0, calc(100% - var(--s)) 100%, 0 100%); }
.cp:last-child:not(:first-child) { clip-path: polygon(var(--s) 0, 100% 0, 100% 100%, 0 100%); }
.cp-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s, transform .6s; z-index: -1; }
.cp::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 55%, rgba(0,0,0,.65)); transition: opacity .3s; }
.cp-name { position: absolute; left: calc(var(--s) + 10px); right: calc(2 * var(--s) + 6px); bottom: 16px; color: #fff; font: 800 19px/1.05 var(--u-font, var(--display)); overflow-wrap: anywhere;
           text-shadow: 0 2px 10px rgba(0,0,0,.7); transition: opacity .3s; }
.cp-full { color: #fff; position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; align-items: center;
           padding: 26px calc(var(--s) + 34px) 26px calc(var(--s) + 26px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.cp-full > img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; box-shadow: 0 22px 50px rgba(0,0,0,.4); }
.cp-copy { display: grid; gap: 10px; max-width: 440px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.cp-copy .btn { text-shadow: none; }
.cp::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: linear-gradient(90deg, rgba(0,0,0,.05) 0 30%, rgba(0,0,0,.55) 62%); }
.cp.open::before, .cp:focus-visible::before { opacity: 1; }
.cp-title { font: 800 clamp(30px, 3.2vw, 46px)/1 var(--u-font, var(--display)); }
.cp-tag { font-size: 18px; opacity: .9; }
.cp-copy ul { margin: 2px 0 4px; padding-left: 20px; display: grid; gap: 4px; }
.cp-meta { display: flex; align-items: center; gap: 8px; font: 700 15px var(--display); }
.cp .btn { justify-self: start; background: var(--u-accent); color: var(--u-accent-ink); }
.col-acc.has-open .cp { flex-grow: .45; }
.col-acc .cp.open { flex-grow: 5; }
.cp.open .cp-cover, .cp.open .cp-name, .cp.open::after { opacity: 0; }
.cp.open .cp-full { opacity: 1; transition-delay: .25s; }
.col-acc.has-open .cp:not(.open) .cp-name { left: 50%; bottom: 20px; right: auto; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font-size: 17px; }
.cp:focus-visible { outline: none; } .col-acc .cp:focus-visible { flex-grow: 5; } .cp:focus-visible .cp-full { opacity: 1; }
.cp:focus-visible .cp-cover, .cp:focus-visible .cp-name { opacity: 0; }
html:not(.js) .col-acc .cp:hover { flex-grow: 5; } html:not(.js) .cp:hover .cp-full { opacity: 1; } html:not(.js) .cp:hover .cp-cover { opacity: 0; }

.all { columns: 4 200px; gap: 30px; padding: 0; list-style: none; margin: 0 0 30px; }
.all li { break-inside: avoid; padding: 3px 0; } .all a { color: var(--ink); text-decoration: none; } .all a:hover { color: var(--accent); }
.all span { color: var(--muted); font-size: 14px; }

@media (max-width: 860px) {
  .col-acc { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; border-radius: 0; }
  .cp { --s: 0px; clip-path: none !important; margin: 0 !important; border-radius: 18px; scroll-snap-align: start; }
  .cp-cover, .cp-name, .cp::after { display: none; }
  .cp-full { position: relative; opacity: 1; grid-template-columns: minmax(0, 1fr); padding: 16px; pointer-events: auto; }
  .cp::before { opacity: 1; background: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.6) 55%); }
  .col { padding-block: 40px; }
}
@media (prefers-reduced-motion: reduce) { .cp, .cp-cover { transition: none; } }