/* ==========================================================================
   Glide 2048, landing pages (index.html, bn/index.html). Written by the app
   repo's tool/shots/site_pages.py; the privacy pages keep site.css.
   Seven looks, seven materials: every part of the page is set on one of the
   game's looks (Wood, Paper, Leather, Onyx, Chalk, Pop, Kintsugi), with the
   look's own colours (lib/app/skins.dart). Type: Jersey 25 and Inter, the
   game's fonts; Hind Siliguri for Bangla. One request plus images: no CDN,
   no trackers. Every text colour here is 4.5 : 1 or more on its ground.
   ========================================================================== */

@font-face { font-family: "Jersey 25"; src: url("fonts/jersey-25.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 500; src: url("fonts/inter-500.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 600; src: url("fonts/inter-600.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 800; src: url("fonts/inter-800.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Hind Siliguri"; font-weight: 500; src: url("fonts/hind-siliguri-500.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Hind Siliguri"; font-weight: 700; src: url("fonts/hind-siliguri-700.woff2") format("woff2"); font-display: swap; }

:root {
  --gold: #f2c95d;          /* Wood's 2048 tile */
  --walnut: #2a1b0e;
  --pad: clamp(16px, 5vw, 40px);
  --maxw: 1160px;
  --r: 18px;
  --sans: "Inter", "Hind Siliguri", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Jersey 25", "Hind Siliguri", "Inter", sans-serif;
}
:lang(bn) { --sans: "Hind Siliguri", "Inter", sans-serif; --display: "Jersey 25", "Hind Siliguri", sans-serif; }

/* the looks: ground, text, quiet text, accent */
.m-wood     { --bg: #26180f; --fg: #f0e2cf; --muted: #cdb89e; --accent: #f2c95d; --line: rgba(240,226,207,.16); }
.m-deep     { --bg: #1d120b; }
.m-paper    { --bg: #f4efe4; --fg: #3d3731; --muted: #5f574e; --accent: #a83a22; --line: rgba(61,55,49,.14); }
.m-soft     { --bg: #ece5d6; }
.m-leather  { --bg: #1c2836; --fg: #efe4cf; --muted: #c4b6a0; --accent: #d9a86a; --line: rgba(239,228,207,.16); }
.m-onyx     { --bg: #0c0c0f; --fg: #f2f2f5; --muted: #b5b7c0; --accent: #debd5a; --line: rgba(242,242,245,.14); }
.m-chalk    { --bg: #1f3b33; --fg: #f1eee4; --muted: #c5d3cb; --accent: #f1dd8d; --line: rgba(241,238,228,.18); }
.m-pop      { --bg: #f6e7b0; --fg: #1a1a1a; --muted: #4a3d10; --accent: #a3135f; --line: rgba(26,26,26,.2); }
.m-kintsugi { --bg: #dcd4c3; --fg: #2f2b26; --muted: #4f4840; --accent: #9a2b20; --line: rgba(47,43,38,.16); }

.m-wood, .m-paper, .m-leather, .m-onyx, .m-chalk, .m-pop, .m-kintsugi { background-color: var(--bg); color: var(--fg); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-weight: 500; font-size: 17px; line-height: 1.6;
  background: #26180f; color: #f0e2cf; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent, #f2c95d); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 99; background: #f2c95d; color: #2a1b0e; padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 8px; }
section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: .98; letter-spacing: -.01em; margin: 0 0 .4em; }
:lang(bn) h1, :lang(bn) h2, :lang(bn) h3 { font-weight: 700; line-height: 1.2; letter-spacing: 0; }
h1 { font-size: clamp(3.4rem, 9vw, 6.6rem); }
h2 { font-size: clamp(2.4rem, 5.6vw, 4rem); }
h3 { font-size: clamp(1.6rem, 2.6vw, 2rem); }
:lang(bn) h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
:lang(bn) h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
:lang(bn) h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.06rem, 1.6vw, 1.22rem); color: var(--muted); max-width: 60ch; }
.gold { color: var(--accent); }
.center { text-align: center; }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head.center .lead { margin-left: auto; margin-right: auto; }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split > * { min-width: 0; }

/* ------------------------------------------------------------------ header */
.site-head { position: sticky; top: 0; z-index: 40; background: rgba(29, 18, 11, .94);
  border-bottom: 1px solid rgba(240, 226, 207, .12); color: #f0e2cf; }
@supports (backdrop-filter: blur(1px)) { .site-head { backdrop-filter: blur(10px); background: rgba(29, 18, 11, .82); } }
.site-head .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.crumb { color: #cdb89e; font-size: .88rem; font-weight: 600; text-decoration: none; padding-right: 16px;
  border-right: 1px solid rgba(240, 226, 207, .16); }
.brand { display: flex; align-items: center; gap: 10px; color: #f0e2cf; text-decoration: none;
  font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: .94rem; }
.nav a { color: #cdb89e; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: #f0e2cf; border-bottom-color: #f2c95d; }
.head-actions { display: flex; gap: 10px; align-items: center; }
@media (max-width: 960px) { .nav { display: none; } .head-actions { margin-left: auto; } }
@media (max-width: 620px) { .crumb span { display: none; } .crumb { padding-right: 10px; } }
@media (max-width: 440px) {
  .site-head .wrap { gap: 10px; }
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ----------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 14px;
  font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1.1; border: 2px solid transparent;
  transition: transform .15s ease, background-color .15s ease; }
.btn svg { width: 18px; height: 18px; }
.btn-sm { padding: 9px 15px; font-size: .9rem; border-radius: 11px; }
.btn-gold { background: #f2c95d; color: #2a1b0e; box-shadow: 0 5px 0 #a8802c; }
.btn-gold:hover { transform: translateY(-2px); }
.btn-ghost { color: var(--fg, #f0e2cf); border-color: var(--line, rgba(240,226,207,.3)); }
.site-head .btn-ghost { color: #f0e2cf; border-color: rgba(240, 226, 207, .3); }
.btn-ghost:hover { border-color: var(--accent, #f2c95d); }
.btn-ink { background: var(--fg); color: var(--bg); }
.site-head .btn-gold { box-shadow: none; }

/* -------------------------------------------------------------------- hero */
.hero { padding: clamp(40px, 7vw, 96px) 0 clamp(64px, 8vw, 110px);
  background: radial-gradient(60% 55% at 72% 50%, rgba(242, 201, 93, .18), transparent 70%),
              url("art/material-wood.webp") center / cover, #26180f; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.store-name { font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.hero h1 { color: var(--fg); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 22px; }
.dots { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; color: var(--muted); font-weight: 600; font-size: .95rem; }
.dots li:not(:last-child)::after { content: "·"; margin: 0 10px; }
.hero-art { position: relative; aspect-ratio: 1; perspective: 1600px; }
.key { position: absolute; inset: 10% 4% 6%; transform: rotateX(48deg) rotateZ(-12deg); transform-style: preserve-3d; }
.key::before { content: ""; position: absolute; inset: 6% 0 -6% 6%; background: rgba(0, 0, 0, .6); filter: blur(30px); border-radius: 8%; }
.key img { position: relative; width: 100%; border-radius: 3%; }
.key-tile { position: absolute; width: 46%; left: 20%; top: 2%; transform: rotate(-7deg);
  filter: drop-shadow(0 30px 28px rgba(0, 0, 0, .5)); }
.toy { position: absolute; width: 18%; padding: 0; border: 0; background: none; cursor: pointer;
  transform: rotate(var(--r)); filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .45)); }
.toy img { width: 100%; }
.toy.pop { animation: merge-pop .32s ease-out; }
@keyframes merge-pop { 0% { transform: rotate(var(--r)) scale(.8); } 60% { transform: rotate(var(--r)) scale(1.2); } 100% { transform: rotate(var(--r)) scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .toy { animation: bob 5s ease-in-out infinite; }
  .toy:nth-of-type(2) { animation-delay: -1.2s; } .toy:nth-of-type(3) { animation-delay: -2.4s; } .toy:nth-of-type(4) { animation-delay: -3.6s; }
}
@keyframes bob { 50% { translate: 0 -10px; } }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-art { max-width: 520px; width: 100%; margin: 0 auto; }
}

/* ------------------------------------------------------------------- video */
.video { max-width: 960px; margin: 0 auto; }
.video-poster, .video iframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.video-poster img { width: 100%; height: 100%; object-fit: cover; }
.video-play { position: absolute; left: clamp(12px, 3vw, 28px); bottom: clamp(12px, 3vw, 28px); display: inline-flex;
  align-items: center; gap: 10px; padding: 14px 24px 14px 18px; border-radius: 999px; background: #f2c95d; color: #2a1b0e;
  font-weight: 700; white-space: nowrap; transition: transform .18s ease; }
.video-play svg { width: 24px; height: 24px; fill: currentColor; }
.video-poster:hover .video-play { transform: scale(1.05); }
.video figcaption { margin-top: 12px; text-align: center; font-size: .9rem; color: var(--muted); }
@media (max-width: 600px) {
  .video-play { padding: 13px; }
  .video-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ------------------------------------------------------------------- phone */
.phone { width: min(300px, 78vw); aspect-ratio: 9 / 16; margin: 0 auto; padding: 9px; border-radius: 42px;
  background: #121212; box-shadow: 0 0 0 2px #3a3a3a, 0 40px 80px rgba(0, 0, 0, .35); }
.phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 34px; background: #26180f; }

/* ------------------------------------------------- how it plays: the story */
.story-steps { display: grid; gap: clamp(48px, 8vw, 72px); }
.step h3 { color: var(--fg); }
.step p { color: var(--muted); max-width: 54ch; }
.step-phone { margin: 24px 0 0; }
.story-phone { display: none; }
.rules { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.rules li { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; align-items: center; }
.rules img { width: 64px; grid-row: span 2; }
.rules b { font-size: 1.08rem; }
.rules span { color: var(--muted); }
.glyphs { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.glyphs li { display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 999px;
  background: #f6e7b0; color: #1a1a1a; font-weight: 700; border: 2px solid #1a1a1a; }
.glyphs img { width: 34px; height: 34px; padding: 4px; border-radius: 50%; background: #ffc400; border: 2px solid #1a1a1a; }
@media (min-width: 960px) {
  .story-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 80px; }
  .story-steps { gap: 0; }
  .step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; }
  .step h3 { transition: color .3s ease; }
  .step.is-on h3 { color: var(--accent); }
  .step-phone { display: none; }
  .story-phone { display: block; position: sticky; top: calc(50vh - 290px); align-self: start; height: max-content; }
  .story-phone .phone { width: 320px; }
}

/* -------------------------------------------------------------------- demo */
.demo { background: #e4dccb; border-radius: 22px; padding: 18px; border: 1px solid var(--line); }
.demo-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.demo-title { font-weight: 700; color: var(--muted); margin-right: auto; }
.stat { min-width: 76px; text-align: center; background: #f4efe4; border-radius: 10px; padding: 6px 12px; line-height: 1.2; }
.stat span { display: block; font-size: .72rem; font-weight: 700; color: var(--muted); }
.stat b { font-variant-numeric: tabular-nums; }
.board { position: relative; aspect-ratio: 1; background: #3e2a1c; border-radius: 20px; touch-action: none;
  overflow: hidden; container-type: inline-size; box-shadow: inset 0 2px 10px rgba(0, 0, 0, .35); }
.board .cell, .board .tile { position: absolute; width: 21.25%; height: 21.25%; border-radius: 12px; }
.board .cell { background: #4f382a; opacity: .55; }
.board .tile { display: grid; place-items: center; font-weight: 800; font-family: "Inter", sans-serif; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; font-size: 7.4cqw; box-shadow: 0 2px 0 rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: left .13s ease-in-out, top .13s ease-in-out; }
.board .tile.len3 { font-size: 6cqw; } .board .tile.len4 { font-size: 4.9cqw; } .board .tile.len5 { font-size: 4.1cqw; }
.tile-new { animation: pop-in .18s ease-out backwards; }
.tile-merged { animation: pop .18s ease-out; }
@keyframes pop-in { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pop { 55% { transform: scale(1.16); } }
.demo-hint { margin: 13px 2px 0; font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.demo-hint button { margin-left: auto; background: #f4efe4; border: 1px solid var(--line); color: var(--fg);
  border-radius: 8px; padding: 6px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.demo-won { color: var(--accent); font-weight: 700; }

/* ------------------------------------------------------------------- looks */
.looks { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.looks .look { flex: 0 1 calc(25% - 14px); }
.look { border-radius: 22px; padding: 18px 18px 20px; background-size: cover; background-position: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .3); color: #f0e2cf; position: relative; overflow: hidden; }
.look::after { content: ""; position: absolute; inset: auto 0 0; height: 62%; background: linear-gradient(transparent, rgba(12, 10, 8, .86)); }
.look > * { position: relative; z-index: 1; }
.look img { border-radius: 12px; margin-bottom: 14px; box-shadow: 0 12px 24px rgba(0, 0, 0, .35); }
.look h3 { margin-bottom: 4px; color: #fff4df; }
.look p { margin: 0; font-size: .92rem; color: #e6d6bd; }
.look .price { margin-top: 8px; font-weight: 700; color: #f2c95d; }
.after { margin-top: 28px; color: var(--muted); max-width: 70ch; }
@media (max-width: 960px) { .looks .look { flex-basis: calc(50% - 9px); } }
@media (max-width: 480px) { .looks { gap: 12px; } .looks .look { flex-basis: calc(50% - 6px); padding: 12px 12px 14px; } .look p { font-size: .84rem; } }

/* ------------------------------------------------------------------ stages */
.m-onyx { background: radial-gradient(70% 60% at 80% 40%, rgba(222, 189, 90, .1), transparent 70%),
  url("art/material-onyx.webp") center / cover, #0c0c0f; }
#stages .shot { margin-top: 28px; border-radius: 22px; max-width: min(420px, 100%); box-shadow: 0 30px 60px rgba(0, 0, 0, .6); }
.ladder { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; justify-items: start; }
.ladder li { display: flex; align-items: center; gap: 16px; margin-left: calc(var(--i) * 9%);
  font-family: var(--display); font-size: 1.5rem; color: var(--muted); }
.ladder img { width: calc(80px + var(--i) * 10px); filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .6)); }
@media (max-width: 600px) { .ladder li { margin-left: calc(var(--i) * 7%); font-size: 1.2rem; gap: 10px; } .ladder img { width: calc(58px + var(--i) * 8px); } }
.ladder { flex-direction: column-reverse; display: flex; }

/* ------------------------------------------------------------------- daily */
.m-chalk { background: url("art/material-chalk.webp") center / cover, #1f3b33; }
.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.facts li { color: var(--muted); }
.facts b { color: var(--fg); }
.page-card { background: #f7f3ea; padding: 44px 18px 18px; border-radius: 14px 14px 22px 22px; position: relative;
  transform: rotate(2deg); box-shadow: 0 40px 80px rgba(0, 0, 0, .45), 12px 14px 0 -4px #dcd6c6; max-width: 460px; margin: 0 auto; }
.page-card::before { content: ""; position: absolute; left: 12%; right: 12%; top: -14px; height: 34px;
  background: radial-gradient(circle at 8px 17px, #9a9a9a 7px, transparent 8px) 0 0 / 48px 34px repeat-x; }
.page-card img { border-radius: 16px; }

/* ----------------------------------------------------------------- screens */
.m-pop { background: url("art/material-pop.webp") center bottom / cover, #f6e7b0; }
.shots { display: flex; gap: 18px; overflow-x: auto; padding: 8px max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad))) 24px;
  scrollbar-width: thin; }
.shots figure { margin: 0; flex: 0 0 auto; }
.shots img { width: clamp(200px, 22vw, 270px); border-radius: 18px; box-shadow: 0 18px 36px rgba(26, 26, 26, .25); cursor: zoom-in; }

/* -------------------------------------------------------------- play games */
.m-kintsugi { background: linear-gradient(rgba(220, 212, 195, .74), rgba(220, 212, 195, .74)), url("art/material-kintsugi.webp") center / cover, #dcd4c3; }
.panel { background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 3vw, 32px); }
.panel h3 { color: var(--fg); }
.panel h3 + .chips { margin-bottom: 26px; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 7px 14px; border-radius: 999px; background: #f6f3ec; border: 1px solid var(--line); font-weight: 600; font-size: .92rem; }
.panel p { color: var(--muted); margin: 0; }
.more { font-weight: 700; }

/* ---------------------------------------------------------------- promises */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 36px; }
.tile { background: #fff; border-radius: 20px; padding: 24px 18px; text-align: center; border: 1px solid var(--line); }
.tile svg { width: 40px; height: 40px; color: var(--accent); margin: 0 auto 12px; display: block; }
.tile b { display: block; font-size: 1.08rem; }
.tile span { color: var(--muted); font-size: .92rem; }
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------- faq */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-weight: 700; font-size: 1.05rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-70%) rotate(45deg); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { color: var(--muted); margin: 0 0 20px; max-width: 68ch; }

/* --------------------------------------------------------------- cta, foot */
.cta { text-align: center; background: url("art/material-wood.webp") center / cover, #26180f; }
.cta img { width: 96px; height: 96px; border-radius: 24px; margin: 0 auto 22px; }
.cta .lead { margin: 0 auto; }
.cta .hero-cta { justify-content: center; }
.site-foot { padding: 34px 0 40px; border-top: 1px solid var(--line); }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.studio { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 700; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-foot nav a { color: var(--muted); }
.fine { flex-basis: 100%; font-size: .84rem; color: var(--muted); margin: 0; }

/* ------------------------------------------------------------------ viewer */
html:has(.shot-viewer[open]) { overflow: hidden; }
.shot-viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  padding: 0; border: 0; background: #0c0c0e; color: #ededf0; }
.shot-viewer::backdrop { background: #0c0c0e; }
.shot-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.sv-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px clamp(16px, 4vw, 32px);
  border-bottom: 1px solid rgba(255, 255, 255, .12); }
.sv-count { margin: 0; font-size: .95rem; color: #b6b6c0; }
.shot-viewer button { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; background: none; color: #ededf0; font: inherit; font-weight: 600; cursor: pointer; }
.sv-arrow { padding: 0 !important; }
.sv-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sv-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 16px clamp(16px, 4vw, 32px); min-height: 0; }
.sv-stage img { margin: auto; max-width: min(100%, 540px); max-height: calc(100dvh - 190px); border-radius: 12px; }
.sv-cap { margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px) 22px; max-width: 64ch; min-height: 3.2em; text-align: center; color: #b6b6c0; font-size: .95rem; }
@media (max-width: 620px) {
  .sv-stage { grid-template-columns: 1fr 1fr; }
  .sv-stage img { grid-column: 1 / -1; grid-row: 1; max-height: calc(100dvh - 250px); }
  .sv-arrow { grid-row: 2; width: 100%; }
}

/* ------------------------------------------------------- reveal on scroll */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal, .look, .ladder li, .tile, .shots figure {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%;
    }
  }
}
@keyframes rise { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}