/* 2Awesome — main theme styles. Tokens come from theme.json presets so the
   editor palette and the front end share one source of truth. Dark, blue-tinted
   presentation is the committed art direction. */

:root{
  --brand:var(--wp--preset--color--brand,#00b7ff);
  --brand-hi:var(--wp--preset--color--brand-hover,#5cd2ff);
  --brand-active:var(--wp--preset--color--brand-active,#0090cc);
  --ink:var(--wp--preset--color--ink,#04486e);
  --ground:var(--wp--preset--color--base,#070c14);
  --surface:var(--wp--preset--color--surface,#0e1723);
  --surface-2:var(--wp--preset--color--surface-2,#16222f);
  --text:var(--wp--preset--color--contrast,#eaf1f8);
  --muted:var(--wp--preset--color--muted,#93a6b8);
  --brand-fg:var(--ground);
  --line:rgba(210,230,245,.12);
  --line-strong:rgba(210,230,245,.24);
  --brand-soft:color-mix(in srgb,var(--brand) 12%,transparent);
  --focus:var(--brand-hi);
  --game:var(--wp--preset--color--game-alma,#22d3ee); /* per-game override via inline --game */

  --sans:"Helvetica Neue",Helvetica,Arial,ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --maxw:1180px; --pad:clamp(20px,5vw,80px); --measure:64ch;
  --s1:1.2rem; --s2:1.5rem; --s3:1.95rem;
  --s4:clamp(2.1rem,4vw,3.1rem); --s5:clamp(2.8rem,6.5vw,4.8rem); --s6:clamp(3.2rem,10vw,7.2rem);
}

/* base */
body.ta{background:var(--ground);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;margin:0;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
.ta h1,.ta h2,.ta h3,.ta h4,.ta h5{margin:0;line-height:1.05;letter-spacing:-.02em;font-weight:800;text-wrap:balance;color:var(--text);}
.ta p{margin:0;} .ta a{color:inherit;text-decoration:none;} .ta img{max-width:100%;height:auto;display:block;}
.ta ::selection{background:var(--brand);color:var(--brand-fg);}
.ta :focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:3px;}
.ta .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
.ta .measure{max-width:var(--measure);} .ta .muted{color:var(--muted);}
.ta .skip-link{position:absolute;left:-999px;top:0;z-index:999;background:var(--brand);color:var(--brand-fg);padding:10px 16px;border-radius:0 0 8px 0;}
.ta .skip-link:focus{left:0;}
@media (prefers-reduced-motion: reduce){.ta *{animation-duration:.001ms!important;transition-duration:.001ms!important;}}

/* mono utility labels — platforms, genres, status, small labels only, ~14px */
.ta .label{font-family:var(--mono);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);}
.ta .label.g{color:var(--game);}
.ta .badges{display:flex;gap:7px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.ta .badge{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-strong);color:var(--muted);padding:5px 11px;border-radius:100px;white-space:nowrap;}
.ta .badge.on{border-color:var(--game);color:var(--game);}
.ta .status{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--game);}
.ta .status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--game);}

/* buttons — sans-serif */
.ta .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:.98rem;font-weight:600;padding:13px 22px;border-radius:100px;border:1.5px solid transparent;cursor:pointer;transition:transform .16s ease,background .16s,border-color .16s,color .16s;min-height:44px;}
.ta .btn:hover{transform:translateY(-1px);}
.ta .btn-primary{background:var(--brand);color:var(--brand-fg);}
.ta .btn-primary:hover{background:var(--brand-hi);}
.ta .btn-primary:active{background:var(--brand-active);}
.ta .btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong);}
.ta .btn-ghost:hover{border-color:var(--brand);color:var(--brand);}
.ta .btn-sm{padding:9px 15px;font-size:.9rem;min-height:40px;}
.ta .btn .ar{transition:transform .16s;} .ta .btn:hover .ar{transform:translateX(3px);}
.ta .link-more{font-weight:600;color:var(--brand);display:inline-flex;gap:7px;align-items:center;}

/* media wells */
.ta .well{position:relative;background:#0a1420 center/cover no-repeat;overflow:hidden;
  background-image:radial-gradient(120% 110% at 68% 12%,color-mix(in srgb,var(--game) 48%,transparent),transparent 55%),linear-gradient(160deg,#06121f,#0a1a2b);}
.ta .well[style*="background-image:url"]{background-blend-mode:normal;}
.ta .well::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--ground) 80%,transparent));}
.ta .well .cap{position:absolute;left:14px;bottom:12px;z-index:2;font-family:var(--mono);font-size:.74rem;color:rgba(255,255,255,.85);}

/* ---------- header ---------- */
.ta .site-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:26px;padding:14px var(--pad);
  background:color-mix(in srgb,var(--ground) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.ta .brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.03em;font-size:1.05rem;color:var(--text);}
.ta .brand .mark{width:34px;height:34px;border:1.5px solid var(--text);display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:.82rem;border-radius:7px;}
.ta .brand .mark b{color:var(--brand);}
.ta .brand .mark-img{height:34px;width:auto;display:block;}
.ta .nav-links{display:flex;gap:24px;list-style:none;margin:0;padding:0;}
.ta .nav-links a{font-size:.98rem;color:var(--muted);padding:4px 0;border-bottom:2px solid transparent;}
.ta .nav-links a:hover,.ta .nav-links .current-menu-item>a{color:var(--text);}
.ta .nav-links .current-menu-item>a{border-bottom-color:var(--brand);}
.ta .header-right{margin-left:auto;display:flex;align-items:center;gap:14px;}
.ta .hamburger{display:none;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:10px;background:transparent;color:var(--text);cursor:pointer;align-items:center;justify-content:center;}
.ta .hamburger svg{width:22px;height:22px;}

/* mobile menu */
.ta .mobile-menu{position:fixed;inset:0;z-index:300;background:color-mix(in srgb,var(--ground) 97%,transparent);backdrop-filter:blur(6px);display:none;flex-direction:column;padding:16px var(--pad) 40px;}
.ta .mobile-menu.open{display:flex;}
.ta .mobile-menu-top{display:flex;align-items:center;justify-content:space-between;}
.ta .mobile-menu-close{width:44px;height:44px;border:1px solid var(--line-strong);border-radius:10px;background:transparent;color:var(--text);cursor:pointer;font-size:1.2rem;}
.ta .mobile-menu ul{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;}
.ta .mobile-menu li a{display:block;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;padding:14px 0;border-bottom:1px solid var(--line);min-height:44px;}
.ta .mobile-menu .btn{margin-top:22px;justify-content:center;}
body.ta.menu-open{overflow:hidden;}

/* ---------- sections ---------- */
.ta .sect{padding:clamp(54px,8vw,104px) 0;}
.ta .sect.alt{background:var(--surface);}
.ta .sect-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-bottom:38px;}
.ta .sect-head h2,.ta .sect-head h3{font-size:var(--s4);max-width:20ch;}

/* hero */
.ta .hero{position:relative;min-height:clamp(520px,82vh,800px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;}
.ta .hero .well{position:absolute;inset:0;z-index:-1;}
.ta .hero-in{padding:0 var(--pad) clamp(38px,6vw,76px);width:100%;position:relative;z-index:2;}
.ta .hero h1{font-size:var(--s6);text-transform:uppercase;letter-spacing:-.04em;color:#fff;text-shadow:0 10px 60px color-mix(in srgb,var(--game) 45%,transparent);}
.ta .hero .lede{color:#eaf2fb;max-width:44ch;margin-top:20px;font-size:var(--s1);}
.ta .cluster{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px;align-items:center;}
.ta .hero .specs{margin-top:26px;}
.ta .hero .specs .badge{border-color:rgba(255,255,255,.28);color:#dceaf6;}

/* portfolio / catalogue */
.ta .portfolio{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.ta .pcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;}
.ta .pcard .art,.ta .update .art{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;}
.ta .pcard .art .well,.ta .update .art .well{position:absolute;inset:0;}
.ta .pcard .art .badge{position:absolute;right:12px;top:12px;z-index:2;background:rgba(4,10,18,.5);border-color:rgba(255,255,255,.28);color:#fff;}
.ta .pcard .art .logo{position:absolute;left:16px;bottom:14px;z-index:2;font-weight:800;font-size:1.6rem;text-transform:uppercase;letter-spacing:-.03em;color:#fff;}
.ta .pcard .body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1;}
.ta .pcard .body h3{font-size:var(--s2);}
.ta .pcard .row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;}

/* trajectory */
.ta .tl{border-top:1px solid var(--line);}
.ta .tl-row{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline;}
.ta .tl-row .yr{font-family:var(--mono);font-size:1.05rem;letter-spacing:.04em;color:var(--game);font-weight:600;display:flex;align-items:center;gap:9px;}
.ta .tl-row .yr::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--game);}
.ta .tl-row h3{font-size:var(--s2);margin-bottom:6px;}

/* studio intro band */
.ta .intro-band{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;}
.ta .intro-band h2{font-size:var(--s4);}
.ta .intro-band .sub{font-family:var(--mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:18px;}

/* updates */
.ta .updates{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.ta .update{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;}
.ta .update .art{aspect-ratio:16/9;}
.ta .update .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;}
.ta .update .d{font-family:var(--mono);font-size:.78rem;color:var(--muted);letter-spacing:.04em;}
.ta .update h3{font-size:1.12rem;font-weight:700;letter-spacing:-.01em;}

/* CTA band */
.ta .band{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.ta .bcard{border:1px solid var(--line);border-radius:14px;padding:32px;background:var(--surface);}
.ta .bcard.brandy{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 16%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--brand) 30%,var(--line));}
.ta .bcard h2{font-size:var(--s3);margin-bottom:10px;}
.ta .nl{display:flex;margin-top:18px;max-width:400px;border:1.5px solid var(--line-strong);border-radius:100px;overflow:hidden;}
.ta .nl input{flex:1;background:transparent;border:0;color:var(--text);padding:12px 18px;font-family:var(--sans);font-size:.95rem;}
.ta .nl input:focus{outline:none;}
.ta .nl button{background:var(--brand);color:var(--brand-fg);border:0;padding:0 20px;font-weight:600;cursor:pointer;}

/* footer */
.ta .site-footer{border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,var(--ground));padding:clamp(46px,6vw,84px) 0 38px;}
.ta .foot-top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:32px;}
.ta .foot-top h2{font-size:var(--s3);letter-spacing:-.03em;max-width:16ch;}
.ta .foot-col h3{margin:0 0 13px;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400;}
.ta .foot-col ul{list-style:none;margin:0;padding:0;}
.ta .foot-col a{display:block;color:var(--muted);padding:5px 0;}
.ta .foot-col a:hover{color:var(--brand);}
.ta .foot-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:50px;padding-top:20px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted);}

/* ---------- game single ---------- */
.ta .gp-hero{position:relative;padding:clamp(54px,8vw,110px) 0 clamp(36px,5vw,64px);overflow:hidden;}
.ta .gp-hero .bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 90% at 82% 0%,color-mix(in srgb,var(--game) 34%,transparent),transparent 55%),linear-gradient(180deg,#06101c,var(--ground));}
.ta .gp-hero h1{font-size:var(--s6);text-transform:uppercase;letter-spacing:-.04em;}
.ta .gp-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:38px;align-items:start;margin-top:28px;}
.ta .gp-main{display:flex;flex-direction:column;gap:34px;}
.ta .gp-side{border:1px solid var(--line);border-radius:12px;padding:24px;background:var(--surface);display:flex;flex-direction:column;gap:16px;}
.ta .kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);}
.ta .kv:last-child{border-bottom:0;}
.ta .kv .k{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.ta .kv .v{text-align:right;}
.ta .prose{max-width:var(--measure);}
.ta .prose p{margin-bottom:1em;} .ta .prose h2{font-size:var(--s3);margin:1.4em 0 .5em;}
.ta .trailer{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--line);}
.ta .trailer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.ta .featgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ta .fitem{border:1px solid var(--line);border-radius:10px;padding:20px;background:var(--surface);}
.ta .fitem h3{margin:10px 0 6px;font-size:1.12rem;}
.ta .gallery{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px)/3);gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:6px;}
.ta .gallery>*{scroll-snap-align:start;}
.ta .gallery:focus-visible{outline:2px solid var(--game);outline-offset:3px;}
.ta .gallery .shot{aspect-ratio:16/9;border-radius:8px;border:1px solid var(--line);}

/* archive / filters */
.ta .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;list-style:none;padding:0;}
.ta .chip{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;padding:9px 16px;border-radius:100px;border:1px solid var(--line-strong);color:var(--muted);}
.ta .chip.active,.ta .chip[aria-current]{background:var(--brand);color:var(--brand-fg);border-color:var(--brand);}

/* page prose default */
.ta .page-wrap{padding:clamp(48px,7vw,96px) 0;}
.ta .page-wrap h1{font-size:var(--s5);margin-bottom:.4em;}

/* well responsive image */
.ta .well-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.ta .well .well-img~*{position:relative;z-index:2;}

/* header wishlist responsive label */
.ta .wishlist-cta .wl-short{display:none;}
@media (max-width:360px){
  .ta .wishlist-cta .wl-full{display:none;}
  .ta .wishlist-cta .wl-short{display:inline;}
}

/* hero intro label + hero art layer */
.ta .eyebrow-intro{font-family:var(--mono);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:#cfe6f5;opacity:.85;margin-bottom:14px;}
.ta .gp-hero-art{position:absolute;inset:0;z-index:-1;opacity:.5;}
.ta .gp-hero-art .well{position:absolute;inset:0;}
.ta .gp-hero-art .well::after{background:linear-gradient(180deg,color-mix(in srgb,var(--ground) 40%,transparent),var(--ground));}

/* pcard title link */
.ta .pcard-title a{color:var(--text);}
.ta .pcard-title a:hover{color:var(--brand);}

/* studio manifesto */
.ta .manifesto{padding-block:clamp(40px,6vw,72px);}
.ta .manifesto-in{border:1px solid var(--line);border-radius:16px;padding:clamp(28px,4vw,48px);background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,var(--surface)),var(--surface));display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.ta .manifesto-head{font-size:var(--s4);font-weight:800;letter-spacing:-.02em;max-width:20ch;color:var(--text);line-height:1.06;}
.ta .manifesto-sub{max-width:60ch;}

/* principles */
.ta .principles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.ta .principle{border:1px solid var(--line);border-radius:12px;padding:24px;background:var(--surface);}
.ta .principle h3{font-size:1.2rem;margin:12px 0 8px;}

/* team */

/* store links */
.ta .store-links{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.ta .store-link{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line-strong);border-radius:8px;padding:11px 14px;font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text);min-height:44px;}
.ta .store-link:hover{border-color:var(--game);color:var(--game);}

/* trailer placeholder */
.ta .trailer-placeholder{display:grid;place-items:center;background:radial-gradient(80% 100% at 50% 40%,color-mix(in srgb,var(--game) 34%,transparent),transparent 60%),linear-gradient(160deg,#08111d,var(--surface));}
.ta .trailer-placeholder .playbtn{width:74px;height:74px;border-radius:50%;border:1.5px solid #fff;display:grid;place-items:center;color:#fff;font-size:1.3rem;background:rgba(0,0,0,.25);}
.ta .presskit{border-top:1px solid var(--line);padding-top:16px;}
.ta .gp-main>section+section{margin-top:8px;}
.ta .gp-main{gap:40px;}

/* contact */
/* Every form control on the site, not just the contact page's .field wrappers:
   the newsletter, the search box and anything a block adds. -webkit-text-fill-color
   is set alongside color because when a browser or a UA stylesheet paints field
   text — autofill, some focus states — that property wins and `color` is ignored. */
.ta input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.ta textarea,
.ta select{color:var(--text);-webkit-text-fill-color:var(--text);caret-color:var(--brand);}
.ta input:focus,.ta input:focus-visible,
.ta textarea:focus,.ta textarea:focus-visible,
.ta select:focus,.ta select:focus-visible{color:var(--text);-webkit-text-fill-color:var(--text);}

/* Inputs and textareas were inheriting the parent theme's dark-on-light colour,
   which on this page's near-black background measured 2.32:1 — unreadable while
   typing. They now share the select's treatment. */
.ta .field input,.ta .field textarea,.ta .field select{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:12px 14px;font-family:var(--sans);font-size:.98rem;min-height:44px;}
.ta .field textarea{min-height:140px;line-height:1.55;resize:vertical;}
.ta .field input:focus,.ta .field textarea:focus,.ta .field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
.ta .field ::placeholder,.ta .nl ::placeholder{color:var(--muted);opacity:1;}
/* Chrome paints autofilled fields with its own light background and dark text,
   which would reintroduce the same problem on a returning visitor. */
.ta .field input:-webkit-autofill,.ta .nl input:-webkit-autofill{-webkit-text-fill-color:var(--text);caret-color:var(--text);box-shadow:0 0 0 1000px var(--surface-2) inset;}
.ta .form-feedback{min-height:1.2em;font-size:.92rem;color:var(--muted);}
.ta .form-feedback.error{color:#ff6b6b;} .ta .form-feedback.ok{color:var(--brand);}
.ta .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.ta .field-error{display:block;color:#ff6b6b;font-size:.82rem;margin-top:6px;}
.ta .field-error:empty{margin:0;}
.ta [aria-invalid="true"]{border-color:#ff6b6b!important;}
.ta .nl-form .form-feedback{margin-top:8px;}
.ta .contact-cols{display:flex;flex-direction:column;gap:16px;}

/* footer legal links */
.ta .foot-legal{list-style:none;display:flex;gap:16px;margin:0;padding:0;}
.ta .foot-legal a{color:var(--muted);} .ta .foot-legal a:hover{color:var(--brand);}

/* two-column layout (studio intro, careers header, contact) */
.ta .two{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start;}
.ta .lead-p{font-size:var(--s2);font-weight:600;letter-spacing:-.01em;line-height:1.32;}

/* careers roles */
.ta .roles{border-top:1px solid var(--line);}
.ta .role{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);}
.ta .role h3{font-size:var(--s2);letter-spacing:-.01em;}
.ta .role .loc{font-family:var(--mono);font-size:.82rem;color:var(--muted);}

/* contact direct-contact boxes */
.ta .cbox{border:1px solid var(--line);border-radius:10px;padding:20px;background:var(--surface);}
/* These are real headings now, so the browser's h2 size and margins have to be
   reset for them to keep looking like the eyebrow labels they replaced. */
.ta .cbox .k{display:block;margin:0 0 6px;font-family:var(--mono);font-size:.8rem;font-weight:400;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.ta .cbox a{color:var(--brand);font-size:1.05rem;font-weight:600;}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .ta .principles{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .ta .portfolio,.ta .updates,.ta .intro-band,.ta .band,.ta .gp-grid,.ta .foot-top,.ta .featgrid,.ta .two{grid-template-columns:1fr;}
  .ta .gallery{grid-auto-columns:calc((100% - 12px)/2);}
  .ta .tl-row{grid-template-columns:88px 1fr;gap:14px;}
  .ta .role{grid-template-columns:1fr;gap:9px;align-items:start;}
  .ta .nav-links{display:none;}
  .ta .hamburger{display:inline-flex;}
}
@media (max-width:560px){
  .ta .gallery{grid-auto-columns:100%;}
  .ta .principles{grid-template-columns:1fr;}
  .ta .foot-bar{flex-direction:column;gap:12px;}
}
@media (max-width:440px){
  /* newsletter: stack field + button so nothing is cramped at 320px */
  .ta .nl{flex-direction:column;border:0;gap:8px;max-width:none;}
  .ta .nl input{border:1.5px solid var(--line-strong);border-radius:100px;}
  .ta .nl button{border-radius:100px;padding:12px 20px;min-height:44px;}
}
@media (max-width:400px){
  .ta .brand span.name{display:none;}
}

/* [hidden] must win over any display the components set, or hiding an element
   in script does nothing — the class rules below outrank the browser's own
   [hidden] { display: none }. This bit the catalogue filter. */
.ta [hidden]{display:none!important;}

/* Controls are 44x44: WCAG 2.5.8 asks for 24, but a slideshow arrow, a dot and
   a filter chip are all things people jab at on a phone, and 44 is the size a
   thumb actually hits. The painted dot stays 9px inside its target. */
/* homepage banner slideshow (Settings → Homepage banner) */
.ta .hero .well.banner{z-index:-1;}
.ta .hero .well.banner .banner-slide{position:absolute;inset:0;opacity:0;}
.ta .hero .well.banner .banner-slide.is-current{opacity:1;}
.ta .hero .well.banner.can-fade .banner-slide{transition:opacity .9s ease;}
.ta .hero .banner-controls{position:absolute;right:var(--pad);bottom:16px;z-index:3;display:flex;align-items:center;gap:8px;}
.ta .banner-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.34);background:rgba(6,14,24,.55);color:#fff;font-size:.9rem;line-height:1;cursor:pointer;}
.ta .banner-btn:hover{background:rgba(6,14,24,.8);}
.ta .banner-dots{display:flex;gap:0;margin-left:0;}
/* The button is a 24px target (WCAG 2.2 target size); the dot people see is the ::before. */
.ta .banner-dot{position:relative;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;}
.ta .banner-dot::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.6);}
.ta .banner-dot.is-current::before{background:#fff;border-color:#fff;}
.ta .banner-dot:hover::before{background:rgba(255,255,255,.6);}
@media (max-width:520px){
  .ta .banner-controls{right:auto;left:var(--pad);bottom:10px;}
}

/* trailers: one player + thumbnail strip (no third-party iframe until asked for) */
.ta .trailers .trailer.is-current{display:block;}
.ta .trailer-poster{position:absolute;inset:0;display:grid;place-items:center;text-decoration:none;background:#08111d;}
.ta .trailer-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ta .trailer-poster .playbtn{position:relative;z-index:2;width:74px;height:74px;border-radius:50%;border:1.5px solid #fff;display:grid;place-items:center;color:#fff;font-size:1.3rem;background:rgba(0,0,0,.38);transition:background .2s ease,transform .2s ease;}
.ta .trailer-poster:hover .playbtn,.ta .trailer-poster:focus-visible .playbtn{background:color-mix(in srgb,var(--game) 70%,transparent);transform:scale(1.06);}
.ta .trailer-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.ta .trailer-thumb{position:relative;width:132px;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:none;cursor:pointer;line-height:0;}
.ta .trailer-thumb img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.62;transition:opacity .2s ease;}
.ta .trailer-thumb:hover img,.ta .trailer-thumb:focus-visible img{opacity:1;}
.ta .trailer-thumb.is-current{border-color:var(--game);}
.ta .trailer-thumb.is-current img{opacity:1;}
@media (max-width:560px){
  .ta .trailer-thumb{width:104px;}
}

/* gallery lightbox */
.ta .gallery .shot{display:block;cursor:zoom-in;}
html.has-lightbox{overflow:hidden;}
.lightbox{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(4,9,16,.92);padding:clamp(16px,4vw,48px);}
.lightbox[hidden]{display:none;}
.lightbox-figure{margin:0;max-width:min(1200px,92vw);max-height:82vh;display:flex;flex-direction:column;gap:10px;}
.lightbox-figure img{max-width:100%;max-height:74vh;width:auto;height:auto;object-fit:contain;border-radius:10px;background:#08111d;}
.lightbox-figure figcaption{color:#cfe0f0;font-size:.86rem;text-align:center;max-width:70ch;margin:0 auto;}
.lightbox-count{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;margin:0;color:#9fb4c8;font-family:var(--mono);font-size:.76rem;}
.lightbox button{position:absolute;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.34);background:rgba(10,20,32,.7);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;}
.lightbox button:hover{background:rgba(10,20,32,.95);}
.lightbox button[hidden]{display:none;}
.lightbox-close{top:16px;right:16px;}
.lightbox-prev{left:16px;top:50%;transform:translateY(-50%);}
.lightbox-next{right:16px;top:50%;transform:translateY(-50%);}
@media (max-width:560px){
  .lightbox-prev{left:10px;}
  .lightbox-next{right:10px;}
}

/* gallery scroller controls (revealed by script only when it overflows) */
.ta .gallery-controls{display:flex;gap:8px;flex:0 0 auto;}
.ta .gallery-controls[hidden]{display:none;}
.ta .gallery-controls .banner-btn{border-color:var(--line-strong);background:var(--surface);color:var(--text);}
.ta .gallery-controls .banner-btn:hover:not([disabled]){border-color:var(--game);}
.ta .gallery-controls .banner-btn[disabled]{opacity:.35;cursor:default;}

/* join the community */
.ta .community{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;}
.ta .community-icons{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:0;}
/* 48px targets: comfortably past the 24px WCAG 2.5.8 minimum, and thumb-sized. */
.ta .soc-link{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);text-decoration:none;transition:color .2s ease,border-color .2s ease,transform .2s ease;}
.ta .soc-link:hover,.ta .soc-link:focus-visible{color:#fff;border-color:var(--game);transform:translateY(-2px);}
.ta .soc-link.is-text{font-weight:700;font-size:.95rem;letter-spacing:-.02em;}
.ta .soc-icon{display:block;}
.ta .community-icons.is-compact{margin-top:10px;gap:8px;}
.ta .community-icons.is-compact .soc-link{width:44px;height:44px;border-radius:10px;}
.ta .community-icons.is-compact .soc-link.is-text{font-size:.9rem;}
/* The footer column is narrow, so the icons shrink to fit a single line while
   staying well past the 24px minimum target. */
.ta .community-icons.is-footer{margin-top:4px;gap:6px;}
.ta .community-icons.is-footer .soc-link{width:34px;height:34px;border-radius:9px;}
.ta .community-icons.is-footer .soc-link.is-text{font-size:.82rem;}
@media (max-width:900px){
  .ta .community{grid-template-columns:1fr;gap:22px;}
}

/* funding acknowledgement strip (grant publicity), above the footer */
.ta .funding{padding:26px 0 6px;}
.ta .funding .wrap{display:flex;justify-content:center;}
.ta .funding-img{width:100%;max-width:820px;height:auto;opacity:.9;}
@media (max-width:640px){
  .ta .funding-img{max-width:100%;}
}

/* search results — the site links to no search form, but ?s= is reachable */
.ta .ta-search{display:flex;gap:10px;flex-wrap:wrap;max-width:560px;}
.ta .ta-search input[type="search"]{flex:1 1 240px;min-height:44px;padding:10px 16px;border-radius:100px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font:inherit;font-size:1rem;-webkit-text-fill-color:var(--text);}
.ta .ta-search input[type="search"]::placeholder{color:var(--muted);}
.ta .search-results{display:grid;gap:26px;}
.ta .search-result{border-top:1px solid var(--line);padding-top:20px;}

/* news article hero — a real image, so it can pick a sub-size */
.ta .post-hero{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:12px;margin-bottom:28px;background:var(--surface);}