/* Gemlign website. Gemlign Night look (docs/design/night/direction.md): deep violet night, gold trims, one green action.
   Dark is the default theme, the light variant is called "daylight". No third-party anything: fonts are self-hosted woff2. */

@font-face{font-family:'Baloo 2';font-weight:400 800;font-style:normal;font-display:swap;src:url(/assets/fonts/Baloo2.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:100 900;font-style:normal;font-display:swap;src:url(/assets/fonts/Inter-400.woff2) format('woff2')}

/* ---------- tokens ---------- */
:root,[data-theme=night]{
  --bg-sunken:#0E0326;--bg-base:#160838;--bg-raised:#1E0B4A;
  --surface-1:#26105F;--surface-2:#331777;--surface-3:#43209B;
  --border-subtle:#4B2AA6;--border-strong:#8B63F0;
  --text-primary:#FFF6E0;--text-secondary:#DACFF5;--text-tertiary:#B2A1DF;
  --link:#FFD24D;--accent:#FFC93C;--accent-text:#FFD24D;
  --gold:#FFC93C;--gold-light:#FFF1B0;--gold-shadow:#B9741A;
  --violet:#7B3FE0;--pink:#FF4FA8;--green:#2FB52A;
  --hl-from:#FFF1B0;--hl-to:#FF9A1F;
  --glow-1:#7B3FE0;--glow-2:#FF4FA8;--glow-3:#FFC93C;--glow-a:.30;--stars:.9;
  --on-green:#0B3B0E;--focus:#FFD24D;
  --shadow-ink:rgba(8,2,30,.55);
  color-scheme:dark}
[data-theme=daylight]{
  --bg-sunken:#EBE2FF;--bg-base:#F7F2FF;--bg-raised:#FFFFFF;
  --surface-1:#FFFFFF;--surface-2:#F0E8FF;--surface-3:#E3D6FF;
  --border-subtle:#D5C4F5;--border-strong:#8A63E0;
  --text-primary:#2A0E5C;--text-secondary:#4A3A7E;--text-tertiary:#675A92;
  --link:#5A1FC9;--accent:#6A35D8;--accent-text:#6A35D8;
  --gold:#C98A00;--gold-light:#FFE9A0;--gold-shadow:#8A5200;
  --hl-from:#6A35D8;--hl-to:#D1308C;
  --glow-a:.16;--stars:0;
  --shadow-ink:rgba(58,22,136,.22);
  color-scheme:light}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
:root{
  --font-ui:'Inter',-apple-system,'SF Pro Text',system-ui,sans-serif;
  --font-display:'Baloo 2','Inter',-apple-system,system-ui,sans-serif;
  --gutter:20px;--maxw:1120px;--r-m:14px;--r-l:22px;--r-xl:30px;--header-h:68px;
  --gold-grad:linear-gradient(180deg,#FFF1B0 0%,#FFC93C 48%,#B9741A 100%);
  --green-grad:linear-gradient(180deg,#9CF55D 0%,#2FB52A 62%,#1E8A1F 100%);
  --purple-grad:linear-gradient(180deg,#8B57F0 0%,#5B2BC8 100%)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{font:400 17px/25px var(--font-ui);color:var(--text-primary);background:var(--bg-base);min-height:100vh;display:flex;flex-direction:column;position:relative;overflow-x:hidden}
main{flex:1}
img,svg{display:block;max-width:100%}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:var(--gutter);top:-80px;z-index:100;background:var(--surface-3);color:var(--text-primary);padding:12px 16px;border-radius:var(--r-m);font-weight:600}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the night sky: soft glows and a sparse star tile, fading out down the page */
body::before{content:"";position:absolute;inset:0 0 auto 0;height:1000px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 46% at 14% 4%,color-mix(in srgb,var(--glow-1) calc(var(--glow-a)*100%),transparent),transparent 70%),
    radial-gradient(52% 44% at 92% 12%,color-mix(in srgb,var(--glow-2) calc(var(--glow-a)*70%),transparent),transparent 70%),
    radial-gradient(60% 40% at 50% 58%,color-mix(in srgb,var(--glow-3) calc(var(--glow-a)*34%),transparent),transparent 70%)}
body::after{content:"";position:absolute;inset:0 0 auto 0;height:1300px;z-index:-1;pointer-events:none;opacity:var(--stars);
  background:url(/assets/stars.svg) 0 0/640px 640px repeat;
  -webkit-mask-image:linear-gradient(#000 0,#000 40%,transparent 100%);mask-image:linear-gradient(#000 0,#000 40%,transparent 100%)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ---------- type ---------- */
.t-display-xl{font:800 clamp(46px,8.4vw,86px)/.98 var(--font-display);letter-spacing:-.005em;text-wrap:balance}
.t-display-l{font:800 clamp(34px,5vw,50px)/1.02 var(--font-display);letter-spacing:0}
.t-title-l{font:700 28px/1.1 var(--font-display)}
.t-title-m{font:700 22px/1.15 var(--font-display)}
.hl{background:linear-gradient(180deg,var(--hl-from),var(--hl-to));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding:0 .04em}
.lead{font:400 clamp(17px,2.2vw,20px)/1.55 var(--font-ui);color:var(--text-secondary);max-width:34em}
.overline{display:inline-flex;align-items:center;gap:8px;font:700 12px/16px var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.overline::before{content:"";width:9px;height:9px;background:var(--pink);transform:rotate(45deg) scale(.9);border-radius:2px;box-shadow:0 0 8px color-mix(in srgb,var(--pink) 80%,transparent)}
.sec{color:var(--text-secondary)}.ter{color:var(--text-tertiary)}
h1,h2,h3{text-wrap:balance}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);background:color-mix(in srgb,var(--bg-base) 76%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border-bottom:1px solid color-mix(in srgb,var(--border-subtle) 70%,transparent)}
.site-header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.brand img{height:38px;width:auto;filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--shadow-ink) 90%,transparent))}
.site-footer .brand img{height:34px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-m);color:var(--text-secondary);text-decoration:none;font:700 15px/20px var(--font-display);letter-spacing:.01em}
.nav a:hover{color:var(--text-primary);background:var(--surface-1)}
.nav a[aria-current=page]{color:var(--text-primary);box-shadow:inset 0 -3px 0 var(--gold);border-radius:0}
.theme-toggle{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--border-strong);background:var(--surface-2);color:var(--text-primary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.theme-toggle:hover{background:var(--surface-3)}
.theme-toggle svg{width:22px;height:22px}
.theme-toggle .i-moon{display:none}
[data-theme=daylight] .theme-toggle .i-moon{display:block}
[data-theme=daylight] .theme-toggle .i-sun{display:none}
@media (max-width:420px){.nav a{padding:0 8px}.brand img{height:32px}}

/* ---------- buttons: glossy candy with a foot ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;font:800 18px/20px var(--font-display);letter-spacing:.01em;border-radius:var(--r-l);cursor:pointer;text-decoration:none;color:var(--text-primary);min-height:44px;position:relative;transition:transform .12s cubic-bezier(.2,0,0,1),box-shadow .12s}
.btn-primary{height:60px;padding:0 30px;color:var(--on-green);background:var(--green-grad);
  box-shadow:inset 0 0 0 2px #D9FF9A,inset 0 12px 0 rgba(255,255,255,.22),0 6px 0 #145F17,0 14px 26px rgba(47,181,42,.35)}
.btn-primary:hover{text-decoration:none;transform:translateY(-2px);box-shadow:inset 0 0 0 2px #D9FF9A,inset 0 12px 0 rgba(255,255,255,.22),0 8px 0 #145F17,0 18px 30px rgba(47,181,42,.4)}
.btn-primary:active{transform:translateY(4px);box-shadow:inset 0 0 0 2px #D9FF9A,inset 0 12px 0 rgba(255,255,255,.22),0 2px 0 #145F17,0 6px 14px rgba(47,181,42,.3)}
.btn-secondary{height:54px;padding:0 24px;color:#fff;background:var(--purple-grad);
  box-shadow:inset 0 0 0 2px #B792FF,inset 0 10px 0 rgba(255,255,255,.16),0 5px 0 #2A0E66,0 12px 22px rgba(60,20,150,.35)}
.btn-secondary:hover{text-decoration:none;transform:translateY(-2px)}
.btn-secondary:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px #B792FF,inset 0 10px 0 rgba(255,255,255,.16),0 2px 0 #2A0E66}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn svg{width:20px;height:20px;flex:none}
.store-badge{display:inline-block;padding:12px;line-height:0;border-radius:var(--r-m)}
.store-badge img{display:block;height:48px;width:auto}
.store-note{margin-top:0;font:500 13px/18px var(--font-ui);color:var(--text-tertiary)}
@media (prefers-reduced-motion:no-preference){
  .btn-primary.pulse{animation:breathe 3.2s ease-in-out infinite}
  @keyframes breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12) saturate(1.1)}}}

/* ---------- chips, cards ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 14px;border-radius:999px;font:700 14px/18px var(--font-display);background:var(--surface-2);border:1px solid var(--border-subtle);color:var(--text-primary)}
.chip b{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:999px;background:var(--gold-grad);color:#3A1466;font:800 12px/1 var(--font-display)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.tag{display:inline-block;padding:2px 9px;border-radius:7px;background:var(--surface-3);font:700 11px/16px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-primary)}
.card{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--r-l);padding:20px}
.glass-card{background:color-mix(in srgb,var(--surface-1) 82%,transparent);border:1px solid color-mix(in srgb,var(--border-subtle) 80%,transparent);border-radius:var(--r-xl);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent),0 16px 38px color-mix(in srgb,var(--shadow-ink) 80%,transparent)}
.gold-edge{border:2px solid transparent;background:linear-gradient(var(--surface-1),var(--surface-1)) padding-box,var(--gold-grad) border-box}

/* ---------- phone frame: a gold bezel like the game's panels ---------- */
.phone{position:relative;display:block;padding:7px;border-radius:42px;background:linear-gradient(160deg,#FFF1B0 0%,#FFC93C 42%,#B9741A 100%);box-shadow:0 30px 60px var(--shadow-ink),0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.5)}
.phone img{width:100%;height:auto;border-radius:35px;background:#160838}
.phone-note{margin-top:10px}

/* ---------- hero ---------- */
.hero{padding:36px 0 24px}
.hero .wrap{display:grid;gap:44px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:20px}
.facts{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin-top:4px;color:var(--text-secondary);font:500 14px/20px var(--font-ui)}
.facts li{display:inline-flex;align-items:center;gap:8px}
.facts li::before{content:"";width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--gold-grad)}
.hero-art{position:relative;max-width:470px;width:100%;margin:0 auto;padding:6px 0 40px}
.hero-art .phone.main{width:66%;margin-left:auto;transform:rotate(2.5deg)}
.hero-art .phone.alt{position:absolute;left:0;bottom:6px;width:46%;transform:rotate(-5deg);z-index:2}
.hero-art .float{position:absolute;z-index:3;pointer-events:none;filter:drop-shadow(0 6px 10px var(--shadow-ink))}
.hero-art .f1{width:62px;left:36%;top:-8px;transform:rotate(-12deg)}
.hero-art .f2{width:44px;right:-6px;top:46%;transform:rotate(14deg)}
.hero-art .f3{width:36px;left:2%;top:22%;transform:rotate(-18deg)}
.hero-art .caption{position:absolute;left:0;right:0;bottom:-6px;text-align:center}
.caption{font:500 12px/16px var(--font-ui);color:var(--text-tertiary);margin-top:10px;text-align:center}
@media (min-width:900px){
  .hero{padding:68px 0 48px}
  .hero .wrap{grid-template-columns:1.05fr .95fr;gap:56px}
  .hero-art{margin:0 0 0 auto}}
@media (prefers-reduced-motion:no-preference){
  .hero-art .float{animation:bob 5s ease-in-out infinite}
  .hero-art .f2{animation-delay:-1.6s}.hero-art .f3{animation-delay:-3.1s}
  @keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}}}

/* ---------- sections and features ---------- */
.section{padding:56px 0}
.section.tight{padding-top:24px;padding-bottom:40px}
.section-head{max-width:40em;margin-bottom:32px;display:flex;flex-direction:column;gap:12px}
.feature{display:grid;gap:28px;align-items:center;padding:30px 0}
.feature + .feature{border-top:1px solid var(--border-subtle)}
.feature-copy{display:flex;flex-direction:column;gap:14px}
.feature-copy p{color:var(--text-secondary)}
.feature-copy ul:not(.chips){list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--text-secondary)}
.feature-copy ul:not(.chips)>li{padding-left:28px;position:relative}
.feature-copy ul:not(.chips)>li::before{content:"";position:absolute;left:5px;top:.5em;width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:var(--gold-grad);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold-shadow) 60%,transparent)}
.feature-art{width:100%;justify-self:center}
.feature-art.one{max-width:320px}
.feature-art.duo{max-width:480px;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.feature-art.duo .phone:nth-child(2){margin-top:34px}
@media (min-width:860px){
  .feature{grid-template-columns:1fr 1fr;gap:64px;padding:46px 0}
  .feature:nth-of-type(even) .feature-art{order:-1}}
@media (max-width:420px){.feature-art.duo{gap:12px}.phone{padding:5px;border-radius:32px}.phone img{border-radius:27px}}

.steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:14px;margin-top:6px}
.steps li{counter-increment:s;display:flex;gap:14px;align-items:flex-start}
.steps li::before{content:counter(s);flex:none;width:34px;height:34px;border-radius:50%;background:var(--gold-grad);display:flex;align-items:center;justify-content:center;font:800 17px/1 var(--font-display);color:#3A1466;box-shadow:0 3px 0 var(--gold-shadow)}
.steps strong{display:block;font:700 18px/24px var(--font-display);color:var(--text-primary)}
.steps span{color:var(--text-secondary);font-size:15px;line-height:21px}

.grid-3{display:grid;gap:16px}
.grid-2{display:grid;gap:16px}
@media (min-width:720px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}}
.know{display:flex;flex-direction:column;gap:10px}
.know .ico{width:44px;height:44px;border-radius:14px;background:var(--surface-3);color:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
[data-theme=daylight] .know .ico{color:var(--accent)}
.know .ico svg{width:24px;height:24px}
.know h3{font:700 22px/1.1 var(--font-display)}
.know p{color:var(--text-secondary);font-size:15px;line-height:22px}
.twist{display:flex;flex-direction:column;gap:8px}
.twist .n{align-self:flex-start}
.twist h3{font:700 21px/1.1 var(--font-display)}
.twist p{color:var(--text-secondary);font-size:15px;line-height:22px}
.cta-band{margin:24px 0 64px;padding:44px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.cta-band p{color:var(--text-secondary);max-width:32em}

/* ---------- inner pages ---------- */
.page-head{padding-top:48px;padding-bottom:28px;display:flex;flex-direction:column;gap:14px}
.page-body{padding-bottom:72px}
.prose{max-width:46rem}
.prose h2{font:800 30px/1.08 var(--font-display);margin:42px 0 12px}
.prose h3{font:700 22px/1.15 var(--font-display);margin:28px 0 8px}
.prose p{margin:12px 0;color:var(--text-secondary)}
.prose ul,.prose ol{margin:12px 0 12px 22px;color:var(--text-secondary)}
.prose li{margin:6px 0}
.prose strong{color:var(--text-primary)}
.prose code{font:500 .9em ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);padding:1px 6px;border-radius:6px;color:var(--text-primary)}
.prose blockquote{margin:16px 0;padding:14px 18px;border-radius:var(--r-m);background:var(--surface-1);border:1px solid var(--border-subtle);border-left:4px solid var(--gold);color:var(--text-secondary)}
.prose hr{border:0;border-top:1px solid var(--border-subtle);margin:32px 0}
.table-wrap{overflow-x:auto;margin:16px 0;border:1px solid var(--border-subtle);border-radius:var(--r-m)}
.table-wrap:focus-visible{outline-offset:0}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px;line-height:21px}
th,td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--border-subtle)}
th{background:var(--surface-2);color:var(--text-primary);font-weight:700}
td{color:var(--text-secondary)}
tr:last-child td{border-bottom:0}
.toc{max-width:46rem;margin-top:8px;padding:18px 20px}
.toc summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;font:700 12px/16px var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--text-tertiary);border-bottom:2px solid var(--text-tertiary);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.toc details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.toc ol{list-style:none;columns:2;column-gap:24px;margin-top:8px}
.toc li{break-inside:avoid}
.toc a{display:inline-flex;align-items:center;min-height:36px;color:var(--text-secondary);text-decoration:none;font-size:15px}
.toc a:hover{color:var(--link);text-decoration:underline}
@media (max-width:600px){.toc ol{columns:1}}
.contact-card{display:flex;flex-direction:column;gap:12px;padding:24px;max-width:46rem}
.contact-card .mail{font:800 clamp(22px,4.4vw,32px)/1.15 var(--font-display);word-break:break-word}
.quick{max-width:46rem;margin-top:16px;padding:20px 24px}
.quick ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px}
.quick a{display:inline-flex;align-items:center;min-height:44px}
.faq{max-width:46rem;display:flex;flex-direction:column;gap:10px;margin-top:8px}
.faq details{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--r-l)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 18px;font:700 18px/1.2 var(--font-display);border-radius:var(--r-l)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
[data-theme=daylight] .faq summary::after{border-color:var(--accent)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq .answer{padding:0 18px 18px;color:var(--text-secondary);font-size:16px;line-height:24px}
.faq .answer p+p,.faq .answer ol,.faq .answer ul{margin-top:10px}
.faq .answer ol,.faq .answer ul{margin-left:22px}
.faq .answer li{margin:4px 0}
.faq-group{margin:40px 0 4px;font:800 28px/1.1 var(--font-display);max-width:46rem}

/* press */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;list-style:none}
.swatch{border:1px solid var(--border-subtle);border-radius:var(--r-m);overflow:hidden;background:var(--surface-1)}
.swatch .chipc{height:56px;border-bottom:1px solid var(--border-subtle)}
.swatch div:last-child{padding:8px 12px;font:600 13px/18px var(--font-ui)}
.swatch code{display:block;font:500 12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-secondary)}
.sw-night{background:#160838}.sw-violet{background:#7B3FE0}.sw-gold{background:#FFC93C}.sw-green{background:#2FB52A}.sw-cream{background:#FFF6E0}.sw-pink{background:#FF4FA8}
.asset-grid{display:grid;gap:16px}
@media (min-width:720px){.asset-grid{grid-template-columns:1fr 1fr}}
.asset{display:flex;flex-direction:column;gap:12px;padding:0;overflow:hidden}
.asset .stage{display:flex;align-items:center;justify-content:center;min-height:180px;padding:24px;border-bottom:1px solid var(--border-subtle)}
.asset .stage img{max-height:120px;width:auto;max-width:100%}
.asset .stage img.app-icon{width:160px;height:160px;max-height:none;border-radius:22.37%}
.force-night{background:#160838}.force-daylight{background:#F7F2FF}
.asset .meta{padding:0 20px 20px;display:flex;flex-direction:column;gap:8px}
.asset .meta h3{font:700 20px/1.1 var(--font-display)}
.asset .meta p{font-size:14px;line-height:20px;color:var(--text-secondary)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;max-width:46rem}
.kv dt{color:var(--text-tertiary);font:600 14px/22px var(--font-ui)}
.kv dd{color:var(--text-primary);font-size:16px;line-height:22px;word-break:break-word}
@media (max-width:520px){.kv{grid-template-columns:1fr;gap:2px 0}.kv dd{margin-bottom:12px}}
.shots{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (min-width:720px){.shots{grid-template-columns:repeat(3,1fr)}}
.shots figure{display:flex;flex-direction:column;gap:8px}
.shots a{display:block;border:1px solid var(--border-subtle);border-radius:var(--r-l);overflow:hidden;background:var(--surface-1)}
.shots img{display:block;width:100%;height:auto}
.shots figcaption{font:600 14px/20px var(--font-ui);color:var(--text-secondary)}
.copy-block{max-width:46rem;padding:18px 20px;color:var(--text-secondary)}
.copy-block + .copy-block{margin-top:12px}
.copy-block h3{font:600 14px/20px var(--font-ui);color:var(--text-tertiary);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.tile-wrap{margin:0 0 16px;max-width:320px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--border-subtle);background:color-mix(in srgb,var(--bg-sunken) 70%,transparent);padding:32px 0 40px;color:var(--text-secondary);font-size:15px}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between}
.site-footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 8px}
.site-footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--text-secondary);text-decoration:none}
.site-footer a:hover{color:var(--link);text-decoration:underline}
.site-footer .brand{padding:0}
.site-footer .fine{flex-basis:100%;color:var(--text-tertiary);font-size:13px;line-height:19px;max-width:52rem}
.nf{padding-top:96px;padding-bottom:96px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}

@media (forced-colors:active){.btn-primary,.btn-secondary{border:2px solid ButtonText}}
@media print{.site-header,.site-footer,.theme-toggle{display:none}body::before,body::after{display:none}body{background:#fff;color:#000}}

/* helpers */
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}
.gap-top{margin-top:20px}.gap-top-16{margin-top:16px}
.readable{max-width:46rem}