/* Barebyte / 2026 homepage — editorial arcade meets original storybook.
   Local assets, system fonts, static HTML, no cookies or tracking. */
:root {
  color-scheme: dark;
  --ink: #11151a;
  --ink-soft: #191f25;
  --ink-raise: #20272e;
  --line: #343c42;
  --text: #f7f4ec;
  --text-dim: #a7adb0;
  --yellow: #ffc83d;
  --paper: #eadfc3;
  --paper-ink: #28241c;
  --radius: 18px;
  --page: min(1216px, calc(100% - 56px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--ink); color: var(--text); font: 400 16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--yellow); color: var(--ink); }
.skip-link { position: absolute; left: 15px; top: -80px; z-index: 999; padding: 10px 18px; background: var(--yellow); color: var(--ink); }
.skip-link:focus { top: 12px; }
.site-shell { max-width: 1920px; margin: auto; overflow: hidden; }
.site-header { min-height: 88px; width: var(--page); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; z-index: 5; }
.site-brand { display: inline-flex; align-items: center; gap: 11px; font-size: 21px; font-weight: 900; letter-spacing: -.065em; white-space: nowrap; }
.site-brand img { border-radius: 50%; }
.brand-dot,.signal-period { color: var(--yellow); }
.site-nav { display: flex; gap: clamp(20px,4vw,48px); align-items: center; }
.site-nav a { padding: 12px 0; color: #c3c8c9; font-size: 13px; font-weight: 650; letter-spacing: .02em; transition: color .2s; }
.site-nav a:hover { color: var(--yellow); }
.header-follow { padding: 10px 0 10px 15px; border-bottom: 1px solid var(--yellow); color: var(--yellow); font-size: 12px; font-weight: 800; white-space: nowrap; }
.header-follow span { margin-left: 10px; }
.hero { min-height: 640px; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(340px,.85fr); align-items: center; padding: 80px max(calc((100% - 1216px)/2),28px) 72px; background: radial-gradient(ellipse at 84% 38%, #2e3132 0, #1c252b 24%, #11151a 63%); }
.hero:before { content:""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 74px 74px; mask-image:linear-gradient(90deg,transparent 12%,black 100%); opacity:.47; z-index:-1; }
.hero-content { position: relative; z-index: 2; max-width: 760px; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: #c2c9c7; font-size: 10px; font-weight: 900; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; margin: 0 0 27px; }
.eyebrow-index { margin-left: 5px; color: #647176; }
.status-point { width: 8px; height: 8px; background: var(--yellow); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,200,61,.09); }
.hero h1,.section-heading h2,.story-section h2,.follow-band h3 { font-weight: 850; letter-spacing: -.072em; }
.hero h1 { position: relative; margin:0; font-size: clamp(48px,6.2vw,94px); line-height: .99; white-space: nowrap; }
.hero-accent { color: var(--yellow); }
.hero-copy { max-width: 530px; margin: 30px 0 26px; color: #b8bfc1; font-size: clamp(15px,1.3vw,18px); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn { min-height: 49px; display: inline-flex; align-items: center; justify-content: space-between; gap: 23px; padding: 12px 19px; border:1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 850; line-height: 1.2; transition: transform .2s, background .2s,border-color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-yellow { background:var(--yellow); color:var(--ink); }
.btn-yellow:hover { background:#ffdb77; }
.btn-outline { border-color: #515a5d; background: rgba(255,255,255,.03); color:#eff0ed; }
.btn-outline:hover { border-color: var(--yellow); }
.hero-proof { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top: 59px; color: #929b9e; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing:.06em; }
.hero-proof strong { color:#f9f7f0; font-size: 17px; letter-spacing:-.04em; margin-right:6px; }
.proof-sep { width:1px; height:14px; background:#50585c; }
.hero-visual { min-height: 520px; position:relative; display:flex; align-items:center; justify-content:center; }
.orbit { position:absolute; border: 1px solid rgba(255,200,61,.18); border-radius: 50%; transform: rotate(-19deg); z-index:0; pointer-events:none; }
.orbit-one { width: 445px; height: 265px; }
.orbit-two { width: 540px; height: 355px; opacity: .6; }
.orbit-three { width: 670px; height: 430px; opacity: .25; }
.orbit-dot { position:absolute; width:11px; height:11px; border-radius:50%; background:var(--yellow); box-shadow:0 0 23px rgba(255,200,61,.5); z-index:2; }
.orbit-dot-a { top:85px; right:8%; }
.orbit-dot-b { bottom:100px; left:13%; width:7px; height:7px; background: #92e4e5; }
.phone { overflow:hidden; background:#111; border: 7px solid #060b0f; border-radius: 31px; padding: 4px; box-shadow: 0 30px 76px rgba(0,0,0,.6),0 0 0 1px #626a72, inset 0 0 0 1px rgba(255,255,255,.1); position:relative; }
.phone:after { content:""; position:absolute; inset:8px; border-radius:22px; box-shadow:inset 0 0 18px rgba(0,0,0,.18); pointer-events:none; }
.phone img { border-radius:21px; width:100%; height:100%; object-fit:cover; }
.phone-camera { position:absolute; width:32%; height:8px; border-radius:0 0 9px 9px; background:#06090a; left:34%; top:6px; z-index:2; }
.phone-hero { width:224px; height:446px; transform: rotate(8deg) translate(-3px,-12px); z-index:1; box-shadow:0 34px 90px #000b, 0 0 0 1px #58646b; }
.hero-sticker { position:absolute; z-index:3; bottom:40px; left:0; width:240px; padding:17px 19px 16px; background:#eae6d7; color:#15191c; transform:rotate(-6deg); box-shadow:0 18px 40px #0005; }
.sticker-label { display:block; color:#59605e; font:800 9px/1.3 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.08em; }
.hero-sticker strong { display:block; font-size:36px; letter-spacing:-.065em; line-height:1.1; margin:7px 0 3px; }
.hero-sticker>span:not(.sticker-label) { display:block; font-size:12px; margin:0 0 13px; }
.hero-sticker a { border-top:1px solid #bcc0b8; display:flex; justify-content:space-between; padding-top:10px; font-size:11px; font-weight:800; }
.hero-visual-note { position:absolute; right:10px; bottom:-18px; margin:0; color:#778184; font:800 9px/1.2 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.1em; }
.hero-visual-note span { color:var(--yellow); margin:0 4px; }
.ticker { background:var(--yellow); color:#13171a; padding:13px 18px; font-size:11px; font-weight:900; letter-spacing:.09em; white-space:nowrap; overflow:hidden; }
.ticker-group { display:flex; justify-content:space-around; align-items:center; gap:20px; }
.ticker-group span:nth-child(even){ font-size:14px; }
/* Static ticker (reduced motion): one group, no trailing separator. */
.ticker-group span:last-child,.ticker-group+.ticker-group { display:none; }
.section { width:var(--page); margin:auto; padding:110px 0 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:38px; }
.eyebrow-bright { color:var(--yellow); margin-bottom:19px; }
.section-heading h2,.story-section h2 { font-size:clamp(41px,5.2vw,72px); line-height:1.02; margin:0; }
.section-heading h2 em,.story-section h2 em { font-weight:400; font-family:Georgia,"Times New Roman",serif; letter-spacing:-.055em; }
.section-heading>p { margin:0 0 4px; max-width:340px; color:var(--text-dim); font-size:15px; line-height:1.75; }
.feature-panel { display:grid; grid-template-columns: 1fr 1fr; min-height:540px; border:1px solid #434940; border-radius:var(--radius); overflow:hidden; background:#242b2d; }
.feature-info { display:flex; flex-direction:column; justify-content:space-between; gap:34px; padding:31px clamp(24px,4vw,56px) 26px; }
.feature-topline,.feature-bottomline { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.feature-number,.feature-bottomline { color:#95a3a0; font:800 10px/1.4 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.09em; }
.pill { border-radius:50px; padding:7px 12px; font-size:9px; font-weight:900; letter-spacing:.1em; }
.pill-yellow { background:var(--yellow); color:#151719; }
.feature-category { margin:0 0 10px; color:#c4cdbf; font-size:11px; font-weight:800; letter-spacing:.11em; }
.feature-info h3 { font-size:clamp(70px,8.8vw,118px); line-height:.87; letter-spacing:-.086em; font-weight:900; margin:0 0 22px; }
.feature-tagline { max-width:475px; font-size:clamp(21px,2.3vw,30px); font-weight:760; letter-spacing:-.045em; line-height:1.2; margin:0 0 14px; }
.feature-description { max-width:466px; color:#b8c0be; font-size:14px; line-height:1.75; margin:0 0 19px; }
.chips { display:flex; flex-wrap:wrap; gap:7px; }
.chips span { border:1px solid #69716c; color:#bccac6; padding:5px 10px; border-radius:100px; font:800 9px/1.35 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.035em; }
.feature-buttons { display:flex; align-items:center; gap:23px; flex-wrap:wrap; margin-top:25px; }
.text-link { padding:12px 0 2px; color:#c0c9c5; border-bottom:1px solid #778481; font-size:11px; font-weight:700; }
.feature-bottomline span:last-child { font-size:23px; color:var(--yellow); }
.feature-gallery { display:flex; align-items:center; justify-content:center; min-height:540px; position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 45% 58%,#4d6363,#284548 55%,#1c3136); }
.feature-gallery:before { content:""; inset:0; position:absolute; background:url("/media/polar-feature.png") center/cover; opacity:.22; filter:blur(12px); transform:scale(1.08); z-index:-1; }
.gallery-glow { position:absolute; border:1px solid #7cbec064; width:400px; height:400px; border-radius:50%; box-shadow:0 0 0 80px #b9dde608,0 0 0 170px #b9dde604; }
.phone-feature { height:390px; width:198px; flex:none; box-shadow:0 24px 65px #0008; position:absolute; }
.phone-feature-front { transform:rotate(-10deg) translate(-70px,-3px); z-index:2; }
.phone-feature-back { transform:rotate(11deg) translate(87px,23px) scale(.94); z-index:1; }
.screenshot-caption { position:absolute; bottom:13px; left:25px; font:800 9px/1.2 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.06em; color:#b3d1d1; }
.screenshot-caption span { color:var(--yellow); }
.collection-heading { display:flex; align-items:end; justify-content:space-between; margin:72px 0 22px; gap:20px; }
.collection-heading h3 { margin:0; font-size:27px; font-weight:780; letter-spacing:-.05em; }
.collection-heading h3 span { margin-left:12px; color:var(--yellow); font:800 10px/1.2 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.08em; white-space:nowrap; }
.collection-heading p { margin:0; color:#8c989b; font-size:12px; }
.game-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.game-card { border:1px solid #394146; border-radius:14px; overflow:hidden; background:#1a2026; display:flex; flex-direction:column; transition: transform .24s,border-color .24s,box-shadow .24s; }
.game-card:hover { transform:translateY(-5px); border-color:#69716d; box-shadow:0 14px 35px #0005; }
.game-card-media { min-height:250px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate; background:#202e34; }
.game-card-media:after {content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 72%,rgba(0,0,0,.33)); z-index:0; pointer-events:none;}
.game-backdrop {position:absolute; inset:0; filter:blur(13px); transform:scale(1.2); opacity:.30; }
.wake-card .game-backdrop { background:linear-gradient(145deg,#484c72,#131c32,#1a1d31); }
.ripple-card .game-backdrop { background:url("/media/ripple-feature.png") center/cover; }
.thread-card .game-backdrop { background:url("/media/thread-feature.png") center/cover; }
.zero-card .game-backdrop { background:url("/media/zero-feature.png") center/cover; }
.game-card-number,.game-card-genre { z-index:3; position:absolute; color:#fff; font:800 9px/1.2 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.06em; background:#101719b0; padding:5px 8px; border-radius:4px; }
.game-card-number { left:13px; top:13px; }
.game-card-genre { bottom:12px; left:13px; }
.mini-phone { height:230px; width:113px; overflow:hidden; margin:24px auto 10px; background:#111; border-radius:17px; border:4px solid #0a0c0e; box-shadow: 0 20px 35px #0008; transform:rotate(-5deg); position:relative; z-index:1; }
.mini-phone img { width:100%; height:100%; object-fit:cover; }
.ripple-card .mini-phone { transform:rotate(5deg); }
.thread-card .mini-phone { transform:rotate(-4deg); }
.zero-card .mini-phone { transform:rotate(4deg); }
.game-card-body { padding:18px 19px 15px; display:flex; flex-direction:column; flex:1; }
.game-card-body h4 { font-size:27px; line-height:1.13; letter-spacing:-.055em; margin:0 0 11px; font-weight:900; }
.game-hook { color:#f1ede5!important; font-weight:720; font-size:13px!important; min-height:41px; margin-bottom:10px!important; }
.game-card-body>p { margin:0 0 17px; color:#aeb7b9; font-size:12px; line-height:1.6; }
.game-card-actions { margin-top:auto; border-top:1px solid #394148; padding-top:2px; display:flex; gap:10px; justify-content:space-between; align-items:center; }
.game-card-actions a { min-height:44px; display:inline-flex; align-items:center; }
.game-card-actions a:first-child { color:var(--yellow); font-size:12px; font-weight:850; }
.game-card-actions a:last-child { font-size:11px; color:#98a3a7; text-decoration:underline; text-underline-offset:3px; }
.game-card-actions a:hover { color:#fff; }
.games-footer { display:flex; justify-content:space-between; gap:20px; margin-top:27px; color:#929c9e; font:800 10px/1.5 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.06em; }
.games-footer a {padding:10px 0; color:var(--yellow); text-decoration:underline; text-underline-offset:4px; }
.story-section { min-height:650px; margin-top:110px; display:grid; grid-template-columns: 1fr minmax(340px,.9fr); background:var(--paper); color:var(--paper-ink); overflow:hidden; }
.story-content { padding:75px 45px 75px max(calc((100vw - 1216px)/2),28px); }
.eyebrow-dark { color:#7b6840; }
.story-section h2 { max-width:640px; font-size:clamp(43px,5.6vw,77px); }
.story-content>p:not(.eyebrow):not(.story-note) {max-width:525px; font-size:17px; line-height:1.72; color:#534e44; margin:28px 0 15px;}
.story-note {font-size:12px; color:#332a17; font-weight:900; margin:20px 0 28px; }
.story-note span {font-weight:450;}
.story-actions {display:flex; gap:11px; flex-wrap:wrap;}
.btn-dark {background:#1c211f; color:#faf8f0;}
.btn-dark:hover {background:#393f3a;}
.btn-paper {border-color:#a4a089; color:#29251e;}
.btn-paper:hover {border-color:#24231d;}
.story-links { margin-top:41px; border-top:1px solid #c2b89d; max-width:575px; }
.story-links a { display:grid; grid-template-columns:75px 1fr 20px; align-items:center; gap:12px; padding:13px 3px; font-size:13px; font-weight:740; border-bottom:1px solid #c2b89d; transition:background .2s; }
.story-links a span:first-child {font:800 9px/1.3 ui-monospace,Menlo,Consolas,monospace; color:#837b66; letter-spacing:.06em;}
.story-links a:hover {background:#f5eddc;}
.story-art {position:relative; overflow:hidden; min-height:650px; background:#ccbfa1; isolation:isolate;}
.story-art:before {content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,#ffffff20 1px,transparent 1px),linear-gradient(0deg,#ffffff20 1px,transparent 1px);background-size:48px 48px;z-index:2;pointer-events:none;}
.story-sun {position:absolute;width:390px;height:390px;border-radius:50%;left:24%;top:3%;background:#f5dc97;box-shadow:0 0 0 30px #e7d19b5a,0 0 0 80px #e7d19b33;}
.story-hill {position:absolute;bottom:-105px;width:135%;height:390px;left:-17%;border-radius:50% 65% 0 0;transform:rotate(-10deg);}
.story-hill-back {background:#8e9d89;bottom:-15px;left:4%;transform:rotate(13deg);}
.story-hill-front {background:#405b55;bottom:-210px;transform:rotate(-12deg);box-shadow:inset 0 40px 70px #182b2855;}
.story-path {position:absolute;bottom:-15px;left:37%;width:150px;height:400px;border-radius:70% 55% 0 0;background:#d4cda7;transform:rotate(40deg);opacity:.8;}
.story-letter {position:absolute;z-index:3;top:26%;left:18%;height:180px;width:270px;transform:rotate(-13deg);background:#f4ebd8;box-shadow:9px 14px 30px #3d423d55, inset 0 0 0 1px #c8bfa8;padding:35px 25px;border-radius:3px;}
.story-letter:before {content:"";position:absolute;left:0;right:0;top:0;height:64px;clip-path:polygon(0 0,50% 100%,100% 0);background:#dcd1b9;}
.story-letter span {position:relative;display:block;margin-top:52px;color:#584e3e;font:800 11px/1.55 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.025em;}
.story-letter i {position:absolute;right:30px;bottom:30px;width:28px;height:28px;background:#aa5d4d;border-radius:50%;box-shadow:0 0 0 4px #aa5d4d35;}
.story-map-mark {position:absolute;z-index:4;right:15%;top:9%;font:italic 170px/1 Georgia,serif;color:#536d676b;transform:rotate(15deg);}
.story-art-label {position:absolute;z-index:4;right:24px;bottom:19px;color:#f6ecdb;font:800 10px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;}
.story-art-label span {margin-left:20px;}
.studio-section {padding-bottom:0;}
.section-heading-tight {align-items:start;}
.studio-tiles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:30px 0 64px;}
.studio-tile {background:#1c2227;border:1px solid #353c41;border-radius:12px;padding:27px 28px 30px;min-height:200px;}
.tile-symbol {display:block;color:var(--yellow);font-size:33px;line-height:1;margin-bottom:17px;}
.studio-tile h3 {font-size:20px;letter-spacing:-.045em;line-height:1.25;margin:0 0 10px;}
.studio-tile p {font-size:13px;line-height:1.7;color:#aeb7b9;margin:0;max-width:250px;}
.follow-band {display:grid;grid-template-columns:1fr 1fr;gap:25px;background:var(--yellow);border-radius:16px;color:#1d211f;padding:43px clamp(24px,4vw,53px);align-items:center;margin-bottom:108px;}
.follow-band .eyebrow {margin-bottom:13px;}
.follow-band h3 {font-size:clamp(33px,4.5vw,55px);line-height:1.03;margin:0;}
.follow-band h3 .signal-period {color:#fff;}
.follow-links {display:grid;gap:10px;}
.follow-links a {display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 17px;background:#171b1d;color:#f8f2e1;border-radius:9px;font-size:20px;font-weight:820;letter-spacing:-.04em;transition:transform .2s;}
.follow-links a:hover {transform:translateX(3px);}
.follow-links a span {display:flex;align-items:center;gap:14px;color:#adb3ae;font-size:11px;font-weight:500;letter-spacing:normal;}
.follow-links a b {color:var(--yellow);font-size:19px;}
.site-footer {border-top:1px solid #384047;background:#141a1f;padding:56px max(calc((100% - 1216px)/2),28px) 23px;}
.footer-main {display:flex;justify-content:space-between;gap:50px;}
.footer-brand {font-size:32px;letter-spacing:-.075em;font-weight:900;line-height:1.1;}
.footer-brand span {color:var(--yellow);}
.footer-main>div:first-child p {margin-top:11px;font-size:12px;color:#899497;}
.footer-columns {display:grid;grid-template-columns:repeat(3,minmax(100px,1fr));gap:55px;}
.footer-columns>div {display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.footer-columns h2 {font-size:11px;color:#f4f2e8;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;}
.footer-columns a {font-size:12px;color:#9da9ac;}
.footer-columns a:hover {color:var(--yellow);}
.footer-bottom {border-top:1px solid #343c42;padding-top:20px;margin-top:55px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:15px;color:#818e93;font-size:10px;line-height:1.6;}
.footer-bottom a {padding:6px 0;text-decoration:underline;text-underline-offset:3px;}
@media (min-width:1500px){.hero { padding-left:max(calc((100% - 1216px)/2),28px);padding-right:max(calc((100% - 1216px)/2),28px); } .story-content {padding-left:max(calc((100% - 1216px)/2),28px);} }
@media (max-width:1140px){
 .hero {grid-template-columns:minmax(0,1.12fr) minmax(290px,.88fr);padding-top:55px;padding-bottom:50px;}
 .hero h1 {font-size:clamp(47px,6.1vw,75px);}
 .hero-visual {min-height:500px;}
 .hero-sticker {left:1%;bottom:32px;width:203px;}
 .proof-sep {display:none;}
 .hero-proof {column-gap:22px;}
 .feature-info h3 {font-size:88px;}
 .game-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
 .game-card-media {min-height:270px;}
 .game-card-body>p {max-width:300px;}
 .story-content {padding-left:28px;}
 .footer-columns {gap:35px;}
}
@media (min-width:901px) and (max-width:1140px){
 .game-card {display:grid;grid-template-columns:42% 58%;}
 .game-card-media {min-height:0;}
}
/* Tablet portrait: two columns leave the hero copy too narrow, so stack it early. */
@media (max-width:900px){
 .hero {display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:56px 28px 44px;}
 .hero-content {max-width:640px;}
 .hero-visual {width:100%;max-width:540px;min-height:460px;margin:16px auto 0;}
}
@media (max-width:760px){
 :root {--page:calc(100% - 32px);}
 html {scroll-padding-top:25px;}
 .site-header {min-height:73px;gap:13px;flex-wrap:wrap;padding:15px 0;}
 .site-brand {font-size:19px;}
 .site-brand img {width:30px;height:30px;}
 .site-nav {margin-left:auto;gap:16px;}
 .site-nav a {font-size:12px;}
 .header-follow {display:none;}
 .hero {padding:54px 16px 40px;}
 .hero-content {max-width:none;}
 .hero h1 {white-space:normal;font-size:clamp(48px,10vw,76px);line-height:1.01;}
 .hero-copy {font-size:15px;max-width:520px;margin:22px 0;}
 .hero-proof {margin-top:30px;gap:12px;font-size:9px;}
 .hero-proof strong {font-size:14px;}
 .hero-visual {min-height:400px;margin-top:10px;}
 .phone-hero {height:342px;width:175px;transform:rotate(8deg) translate(40px,-4px);}
 .hero-sticker {bottom:16px;left:5%;width:210px;}
 .orbit-one{width:345px;height:202px;}
 .orbit-two{width:450px;height:280px;}
 .orbit-three{width:510px;height:345px;}
 .hero-visual-note {right:0;}
 /* Two centred rows; the middle separator becomes the line break. */
 .ticker {font-size:9px;padding:10px 11px;}
 .ticker-group {flex-wrap:wrap;justify-content:center;gap:5px 14px;}
 .ticker-group span:nth-child(4) {flex-basis:100%;height:0;overflow:hidden;}
 .footer-columns>div {gap:0;}
 .footer-columns a {padding:6px 0;}
 .section {padding-top:75px;}
 .section-heading {display:block;margin-bottom:28px;}
 .section-heading h2,.story-section h2 {font-size:clamp(43px,8.2vw,61px);}
 .section-heading>p {margin:18px 0 0;max-width:550px;font-size:14px;}
 .feature-panel {grid-template-columns:1fr;}
 .feature-info {padding:25px 24px 24px;min-height:500px;}
 .feature-info h3 {font-size:82px;}
 .feature-gallery {min-height:390px;}
 .phone-feature {height:315px;width:157px;}
 .phone-feature-front{transform:rotate(-10deg) translate(-59px,-3px);}
 .phone-feature-back{transform:rotate(10deg) translate(71px,17px) scale(.94);}
 .collection-heading {margin-top:46px;}
 .story-section {grid-template-columns:1fr;margin-top:75px;}
 .story-content{padding:70px 20px;}
 .story-art {min-height:420px;}
 .story-letter {top:15%;left:20%;}
 .story-sun{top:-25%;left:24%;}
 .story-hill{bottom:-190px;}
 .story-hill-back{bottom:-130px;}
 .story-path{bottom:-100px;}
 .studio-tiles{grid-template-columns:1fr;gap:10px;margin-bottom:65px;}
 .studio-tile {min-height:0;}
 .follow-band {grid-template-columns:1fr;margin-bottom:72px;gap:26px;}
 .site-footer {padding:45px 16px 25px;}
 .footer-main {display:block;}
 .footer-columns {margin-top:40px;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
 .footer-bottom {margin-top:42px;justify-content:start;}
}
@media (max-width:450px){
 .site-brand {font-size:17px;gap:6px;}
 .site-nav {gap:10px;}
 .site-nav a {font-size:11px;}
 .hero {padding-top:43px;}
 .hero h1 {font-size:clamp(43px,10.6vw,59px);}
 .eyebrow-index {display:none;}
 .hero-actions .btn {width:100%;justify-content:space-between;}
 .hero-proof {gap:9px;}
 .hero-proof strong {margin-right:3px;}
 .proof-sep {height:12px;}
 .hero-sticker {left:0;width:185px;padding:12px;}
 .hero-sticker strong {font-size:31px;}
 .hero-sticker>span:not(.sticker-label){font-size:11px;}
 .hero-visual {min-height:385px;}
 .phone-hero {transform:rotate(8deg) translate(60px,-4px);}
 .collection-heading {display:block;}
 .collection-heading h3 span {display:block;margin:7px 0 0;}
 .collection-heading p {margin-top:8px;}
 .game-grid{grid-template-columns:1fr;}
 .game-card {display:grid;grid-template-columns:40% 60%;min-height:226px;}
 .game-card-media{min-height:226px;}
 .mini-phone{width:95px;height:194px;margin:17px auto 9px;}
 .game-card-genre {font-size:7px;left:7px;bottom:9px;}
 .game-card-number {top:9px;left:7px;font-size:7px;}
 .game-card-body {padding:15px 14px 12px;}
 .game-card-body h4 {font-size:24px;}
 .game-hook{font-size:12px!important;min-height:0;}
 .game-card-body>p{font-size:11px;margin-bottom:11px;line-height:1.5;}
 .game-card-actions a:first-child{font-size:11px;}
 .games-footer {display:block;font-size:9px;}
 .games-footer a{display:block;margin-top:2px;}
 .story-content {padding:63px 16px;}
 .story-actions .btn{width:100%;}
 .story-links a {grid-template-columns:48px 1fr 14px;font-size:12px;gap:9px;}
 .story-letter {width:235px;height:170px;left:15%;}
 .follow-links a {display:block;}
 .follow-links a span {display:flex;margin-top:4px;}
 .footer-columns {grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px;}
}
/* Motion: slow, small, transform/opacity only, and only for viewers who have not asked for less.
   home.js adds pointer tilt through --tilt-x/--tilt-y; without it everything below still works. */
@media (prefers-reduced-motion:no-preference){
 .hero-visual { transform-style:preserve-3d; transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
 .phone-hero { animation:float 6.5s ease-in-out infinite; }
 .hero-sticker { translate:0 0 50px; animation:sway 8s ease-in-out infinite; }
 .orbit-two { animation:spin 140s linear infinite; }
 .orbit-three { animation:spin 200s linear infinite reverse; }
 .orbit-dot { animation:pulse 3.2s ease-in-out infinite; }
 .orbit-dot-b { animation-delay:-1.6s; }
 .story-letter { animation:drift 9s ease-in-out infinite; }
 .story-sun { animation:breathe 10s ease-in-out infinite; }
 .game-card:hover { transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-5px); }
 .game-card .mini-phone { transition:scale .35s cubic-bezier(.2,.7,.2,1); }
 .game-card:hover .mini-phone { scale:1.06; }
 .ticker-track { display:flex; width:max-content; animation:ticker 42s linear infinite; }
 .ticker:hover .ticker-track { animation-play-state:paused; }
 .ticker .ticker-group { display:flex; flex-wrap:nowrap; justify-content:space-around; gap:28px; min-width:min(100vw,1920px); padding-right:28px; }
 .ticker .ticker-group span:last-child { display:inline; }
 .ticker .ticker-group span:nth-child(4) { flex-basis:auto; height:auto; overflow:visible; }
 @supports (animation-timeline: view()) {
  .section-heading,.feature-panel,.collection-heading,.game-card,.story-content>*,.studio-tile,.follow-band { animation:reveal linear both; animation-timeline:view(); animation-range:entry 0% entry 45%; }
  .phone-feature-front { animation:depth-near linear both; animation-timeline:view(); }
  .phone-feature-back { animation:depth-far linear both; animation-timeline:view(); }
  .story-hill-back { animation:depth-far linear both; animation-timeline:view(); }
  .story-hill-front { animation:depth-near linear both; animation-timeline:view(); }
 }
}
@keyframes float { 0%,100% { translate:0 0 25px; } 50% { translate:0 -12px 25px; } }
@keyframes sway { 0%,100% { rotate:-1.2deg; } 50% { rotate:1.2deg; } }
@keyframes spin { to { rotate:360deg; } }
@keyframes pulse { 0%,100% { scale:1; opacity:1; } 50% { scale:1.5; opacity:.7; } }
@keyframes drift { 0%,100% { translate:0 0; } 50% { translate:6px -10px; } }
@keyframes breathe { 0%,100% { scale:1; } 50% { scale:1.04; } }
@keyframes ticker { to { transform:translateX(-50%); } }
@keyframes reveal { from { opacity:0; translate:0 32px; } }
@keyframes depth-near { from { translate:0 36px; } to { translate:0 -36px; } }
@keyframes depth-far { from { translate:0 -14px; } to { translate:0 14px; } }
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto;}
 *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}