/* ==========================================================
   pjrealm.com: one stylesheet, no framework, no external requests.
   Brand base: navy #12203a, cavalry gold #f2b544, cream #f4ece0, Lato.
   Each game section on the home page brings its own palette.
   ========================================================== */

@font-face{font-family:Lato;src:url(../fonts/lato-light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url(../fonts/lato-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url(../fonts/lato-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Lato;src:url(../fonts/lato-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url(../fonts/lato-black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  --navy:#12203a;
  --navy-deep:#0b1526;
  --gold:#f2b544;
  --cream:#f4ece0;
  --ink:#1b2028;
  --muted:#5c636e;
  --line:#e2d9c9;
  --bg:#fbf8f2;
  --wrap:1120px;
  --text:720px;
  --gutter:clamp(16px,4vw,40px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--navy-deep)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:17px/1.65 Lato,"Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:#1f4e79;text-decoration:none;border-bottom:1px solid rgba(31,78,121,.35)}
a:hover{border-bottom-color:currentColor}
p{margin:.8rem 0}
strong{font-weight:700;color:#0f1723}
h1,h2,h3{line-height:1.15}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
figure{margin:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
picture{display:contents}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--gold);color:var(--navy);font-weight:900;padding:.6rem 1rem;border-radius:4px;border:0;transition:top .15s}
.skip:focus{top:12px}

/* ---------- masthead ---------- */
.home .masthead{background:transparent;position:absolute;left:0;right:0;top:0}
.home .shelf{padding-top:calc(clamp(2.4rem,6vw,4.5rem) + 62px)}
.masthead{background:var(--navy);color:var(--cream);position:relative;z-index:5}
.masthead .bar{max-width:var(--wrap);margin:0 auto;padding:.7rem var(--gutter);display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.masthead a{color:var(--cream);border:0}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:900;letter-spacing:.14em;font-size:.95rem}
.brand img{width:36px;height:36px}
.masthead nav{margin-left:auto;display:flex;gap:1.5rem;font-size:.9rem;font-weight:700;letter-spacing:.05em}
.masthead nav a{color:#c3ccda;padding:.25rem 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.masthead nav a:hover,.masthead nav a[aria-current]{color:var(--gold);border-bottom-color:var(--gold)}

/* ==========================================================
   HOME: the shelf
   ========================================================== */
.shelf{
  background:
    radial-gradient(1200px 500px at 85% -10%,rgba(242,181,68,.16),transparent 60%),
    linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:var(--cream);padding:clamp(2.4rem,6vw,4.5rem) 0 0;overflow:hidden;
}
.shelf-head{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.shelf h1{font-weight:900;font-size:clamp(2.2rem,5.6vw,4.2rem);letter-spacing:-.02em;line-height:1.02;margin:0;color:#fff}
.shelf h1 span{color:var(--gold)}
.shelf-head p{color:#aab6c8;margin:1rem 0 0;font-size:1.05rem}
.boxes{list-style:none;margin:2.6rem auto 0;padding:0 var(--gutter) clamp(2.5rem,5vw,4rem);max-width:var(--wrap);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,2.4rem);align-items:end}
.boxes li{margin:0}
.box{display:block;border:0;color:var(--cream)}
.box img{width:100%;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.45);
  transform:rotate(var(--tilt,0deg));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.box-dt{--tilt:-1.6deg}.box-vg{--tilt:.8deg}.box-cm{--tilt:-.6deg}
.box:hover img,.box:focus-visible img{transform:translateY(-12px) rotate(0deg);box-shadow:0 30px 60px rgba(0,0,0,.55)}
.box b{display:block;margin-top:1.1rem;font-weight:900;font-size:1.15rem;color:#fff}
.box span{display:block;color:#aab6c8;font-size:.92rem}
.box:hover b{color:var(--gold)}

/* ==========================================================
   HOME: shared game-section bits
   ========================================================== */
.game{position:relative}
.game .facts{font-size:.93rem;max-width:62em;margin:1.6rem 0 .4rem}
.game .soon{display:inline-block;margin:.6rem 0 0;font-weight:900;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;padding:.45rem .8rem;border-radius:3px}
.game h2{margin:0}

/* ---------- Double Take: bright and homely ---------- */
.dt{
  --dt-sun:#ffcf33;--dt-sky:#36c9ee;--dt-pink:#ec4f86;--dt-brown:#3b2a1c;--dt-cream:#fff7e6;
  background:var(--dt-cream);color:var(--dt-brown);padding-bottom:clamp(3rem,7vw,5.5rem)}
.dt-banner{position:relative;max-height:520px;overflow:hidden}
.dt-banner img{width:100%;height:clamp(220px,32vw,440px);object-fit:cover;object-position:50% 40%}
.dt-banner::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,rgba(255,247,230,0),var(--dt-cream))}
.dt-body{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,5vw,4rem);margin-top:clamp(-5rem,-6vw,-2rem);position:relative}
.dt-logo{width:min(520px,100%);filter:drop-shadow(0 3px 0 rgba(59,42,28,.25))}
.dt-lead{font-weight:900;font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.25;margin:1.4rem 0 1rem;color:var(--dt-brown)}
.dt-copy p{max-width:34em}
.dt-chips{list-style:none;padding:0;margin:1.1rem 0 1.2rem;display:flex;flex-wrap:wrap;gap:.5rem}
.dt-chips li{margin:0;font-weight:700;font-size:.88rem;padding:.35rem .85rem;border-radius:999px;background:#fff;border:2px solid var(--dt-brown);box-shadow:3px 3px 0 var(--dt-brown)}
.dt-chips li:nth-child(1){background:var(--dt-sun)}
.dt-chips li:nth-child(2){background:#bfeefb}
.dt-chips li:nth-child(3){background:#ffd6e5}
.dt-chips li:nth-child(4){background:#d9f2c4}
.dt-chips li:nth-child(5){background:#ffe3b8}
.dt-quote{font-style:italic;font-size:1.08rem;border-left:5px solid var(--dt-pink);padding:.2rem 0 .2rem 1rem;margin-top:1.4rem}
.dt-photos{position:relative;min-height:600px;margin-top:3rem}
.dt-photos img{position:absolute;width:64%;background:#fff;padding:10px 10px 34px;border-radius:3px;
  box-shadow:0 14px 30px rgba(59,42,28,.22),0 1px 3px rgba(59,42,28,.2);
  transform:rotate(var(--r));transition:transform .4s cubic-bezier(.2,.8,.2,1),z-index 0s .1s}
.dt-photos .p1{--r:-4deg;left:0;top:0;z-index:2}
.dt-photos .p2{--r:3.5deg;right:0;top:90px;z-index:3}
.dt-photos .p3{--r:2.5deg;left:3%;top:300px;z-index:1}
.dt-photos .p4{--r:-3deg;right:4%;top:390px;z-index:4}
.dt-photos img:hover{transform:rotate(0deg) scale(1.06);z-index:9;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.dt-stickers{list-style:none;padding:0;margin:clamp(2rem,4vw,3rem) 0 0;display:flex;flex-wrap:wrap;gap:1rem}
.dt-stickers li{margin:0;display:flex;align-items:baseline;gap:.45rem;background:#fff;border:2px solid var(--dt-brown);border-radius:14px;
  padding:.55rem 1.1rem;font-weight:700;box-shadow:4px 4px 0 var(--dt-brown);transition:transform .2s}
.dt-stickers li:hover{transform:translate(-2px,-2px)}
.dt-stickers b{font-weight:900;font-size:1.9rem;line-height:1;color:var(--dt-pink)}
.dt-stickers li:nth-child(2) b{color:#0d9cc4}
.dt-stickers li:nth-child(3) b{color:#d49800}
.dt-stickers li:nth-child(4) b{color:#5a9a2d}
.dt-trailer{margin-top:clamp(2rem,4vw,3rem)}
.dt-trailer video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;border:2px solid var(--dt-brown);border-radius:14px;box-shadow:5px 5px 0 var(--dt-brown)}
.dt-trailer p{font-size:.85rem;color:#6b5643;margin:.7rem 0 0}
.dt .facts{color:#6b5643}
.dt .soon{background:var(--dt-sun);color:var(--dt-brown);border:2px solid var(--dt-brown)}

/* ---------- Vignette: dark canvas, painterly reveal ---------- */
.vg{--vg-dark:#111318;--vg-gold:#d8a645;--vg-text:#d9d4c8;
  background:var(--vg-dark);color:var(--vg-text);padding:clamp(3rem,7vw,6rem) 0}
.vg-reveal{position:relative;border:1px solid rgba(216,166,69,.55);overflow:hidden;background:#000}
.vg-reveal>picture>img{width:100%;aspect-ratio:1280/836;object-fit:cover}
.vg-darkwrap{position:absolute;inset:0;pointer-events:none;
  filter:drop-shadow(1.5px 0 0 var(--vg-gold)) drop-shadow(-1.5px 0 0 var(--vg-gold)) drop-shadow(0 1.5px 0 var(--vg-gold)) drop-shadow(0 -1.5px 0 var(--vg-gold))}
.vg-dark{position:absolute;inset:0;background:
   radial-gradient(circle at 70% 30%,rgba(255,255,255,.03),transparent 50%),var(--vg-dark);
  clip-path:polygon(0% 0%,48% 0%,48% 52%,33% 52%,33% 74%,0% 74%)}
.vg-reveal h2{position:absolute;left:3.5%;top:7%;width:36%;z-index:2}
.vg-logo{width:100%}
@keyframes vg-cut{
  0%  {clip-path:polygon(0% 0%,100% 0%,100% 100%,100% 100%,100% 100%,0% 100%)}
  35% {clip-path:polygon(0% 0%,100% 0%,100% 64%,72% 64%,72% 100%,0% 100%)}
  70% {clip-path:polygon(0% 0%,70% 0%,70% 64%,46% 64%,46% 88%,0% 88%)}
  100%{clip-path:polygon(0% 0%,48% 0%,48% 52%,33% 52%,33% 74%,0% 74%)}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .vg-dark{animation:vg-cut linear both;animation-timeline:view();animation-range:entry 30% cover 50%}
  }
  @supports not (animation-timeline:view()){
    .vg-reveal:hover .vg-dark{animation:vg-cut 2.4s cubic-bezier(.5,0,.2,1) both}
  }
}
.vg-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(1.5rem,5vw,4.5rem);margin-top:clamp(2rem,5vw,3.5rem)}
.vg-lead{font-weight:300;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.3;color:#f3eee3;margin-top:0}
.vg-cols p{max-width:36em}
.vg-ledger{margin:0;border-top:1px solid rgba(216,166,69,.5);align-self:start}
.vg-ledger div{display:flex;justify-content:space-between;align-items:baseline;padding:.7rem 0;border-bottom:1px solid rgba(216,166,69,.22)}
.vg-ledger dt{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#a69e8c}
.vg-ledger dd{margin:0;font-weight:300;font-size:1.9rem;line-height:1;color:var(--vg-gold);font-variant-numeric:lining-nums}
.vg-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.4rem);margin-top:clamp(2.4rem,5vw,4rem)}
.vg-strip figure{position:relative;overflow:hidden;border:1px solid rgba(216,166,69,.35)}
.vg-strip img{width:100%;aspect-ratio:1280/836;object-fit:cover;filter:saturate(.75) brightness(.8);transition:filter .6s,transform .8s cubic-bezier(.2,.8,.2,1)}
.vg-strip figure:hover img{filter:none;transform:scale(1.04)}
.vg-strip figcaption{position:absolute;left:.7rem;bottom:.5rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--vg-gold);text-shadow:0 1px 3px #000}
.vg-trailer{margin-top:clamp(2.4rem,5vw,4rem)}
.vg-trailer video{width:100%;aspect-ratio:16/9;background:#000;border:1px solid rgba(216,166,69,.55)}
.vg-trailer p{font-size:.85rem;color:#8d877a;margin:.5rem 0 0}
.vg .facts{color:#a69e8c}
.vg .soon{border:1px solid var(--vg-gold);color:var(--vg-gold)}

/* ---------- Countermeasure: night city, neon, fire ---------- */
.cm{--cm-night:#05080f;--cm-cyan:#62e6ff;--cm-fire:#ff8b2c;--cm-text:#c6d2e2;
  background:var(--cm-night);color:var(--cm-text);padding-bottom:clamp(3rem,7vw,6rem);overflow:hidden}
.cm-hero{position:relative}
.cm-sky{width:100%;height:clamp(300px,46vw,640px);object-fit:cover;object-position:40% 50%}
.cm-hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,var(--cm-night) 0%,rgba(5,8,15,0) 18%,rgba(5,8,15,0) 55%,var(--cm-night) 100%)}
.cm-title{position:absolute;left:0;right:0;bottom:clamp(1rem,4vw,3rem);z-index:2}
.cm-logo{width:min(620px,88%);filter:drop-shadow(0 0 18px rgba(98,230,255,.45))}
.cm-tag{font-weight:900;text-transform:uppercase;letter-spacing:.18em;font-size:clamp(.85rem,1.5vw,1.05rem);color:var(--cm-fire);margin:.9rem 0 0;text-shadow:0 0 14px rgba(255,139,44,.55)}
.cm-tag em{font-style:normal;color:#fff}
.cm-body{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(1.5rem,5vw,4.5rem);margin-top:clamp(1.5rem,4vw,3rem)}
.cm-lead{font-weight:700;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.35;color:#fff;margin-top:0}
.cm-copy p{max-width:36em}
.cm-hud{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(98,230,255,.25);border:1px solid rgba(98,230,255,.45);align-self:start;
  box-shadow:0 0 30px rgba(98,230,255,.08) inset}
.cm-hud div{background:var(--cm-night);padding:.85rem 1rem}
.cm-hud dt{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#7f93ad}
.cm-hud dd{margin:.15rem 0 0;font-weight:900;font-size:2rem;line-height:1;color:var(--cm-cyan);font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(98,230,255,.5)}
.cm-shots{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:clamp(.8rem,2vw,1.2rem);margin-top:clamp(2.4rem,5vw,4rem)}
.cm-shots .big{grid-row:span 2}
.cm-trailer{margin-top:clamp(2.4rem,5vw,4rem)}
.cm-trailer video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;border:1px solid rgba(98,230,255,.45);box-shadow:0 0 24px rgba(98,230,255,.15)}
.cm-trailer p{font-size:.85rem;color:#7f93ad;margin:.5rem 0 0}
.cm-shots figure{position:relative;background:#000;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.cm-shots img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.cm-shots figure::before,.cm-shots figure::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--cm-cyan);z-index:2;transition:all .3s}
.cm-shots figure::before{left:-4px;top:-4px;border-right:0;border-bottom:0}
.cm-shots figure::after{right:-4px;bottom:-4px;border-left:0;border-top:0}
.cm-shots figure:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(98,230,255,.5),0 16px 40px rgba(255,139,44,.18)}
.cm-shots figure:hover::before{left:-8px;top:-8px}
.cm-shots figure:hover::after{right:-8px;bottom:-8px}
.cm-shots figcaption{position:absolute;left:0;bottom:0;padding:.45rem .8rem;background:linear-gradient(90deg,rgba(5,8,15,.92),rgba(5,8,15,.6));font-size:.7rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--cm-cyan);text-shadow:0 0 8px #000,0 1px 2px #000}
.cm .facts{color:#7f93ad}
.cm .soon{border:1px solid var(--cm-cyan);color:var(--cm-cyan);box-shadow:0 0 14px rgba(98,230,255,.25)}

/* ---------- studio + contact ---------- */
.studio{background:var(--cream);color:var(--navy);padding:clamp(3rem,7vw,5.5rem) 0;border-top:6px solid var(--gold)}
.studio-in{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.studio-seal{width:clamp(120px,18vw,210px);height:auto}
.studio h2{font-weight:900;font-size:clamp(1.8rem,3.6vw,2.6rem);letter-spacing:-.01em;margin:0 0 .6rem}
.studio p{font-size:1.15rem;max-width:32em;color:#24324d}
.reach{background:var(--navy);color:var(--cream);padding:clamp(3rem,7vw,5rem) 0}
.reach h2{font-weight:900;font-size:clamp(1.8rem,3.6vw,2.6rem);margin:0;color:#fff}
.reach-sub{color:#aab6c8;margin:.4rem 0 2rem}
.reach-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(242,181,68,.4)}
.reach-list li{margin:0;padding:1.3rem 1.5rem 1.3rem 0;display:flex;flex-direction:column;gap:.3rem}
.reach-list li+li{padding-left:1.5rem;border-left:1px solid rgba(242,181,68,.2)}
.reach-list span{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#93a1b6;font-weight:700}
.reach-list>li>a{color:var(--gold);font-weight:900;font-size:clamp(1.05rem,1.7vw,1.3rem);border:0;overflow-wrap:anywhere;transition:color .2s}
.reach-list>li>a:hover{color:#fff}
.reach-list small{font-size:.88rem;color:#93a1b6}
.reach-list small a{color:#c3ccda;border-bottom-color:rgba(195,204,218,.35)}

/* ==========================================================
   Inner pages: Support, Press, Privacy, 404
   ========================================================== */
.page-head{background:linear-gradient(180deg,var(--navy),var(--navy-deep));color:var(--cream);padding:clamp(2.4rem,6vw,4rem) 0 clamp(2rem,5vw,3rem);border-bottom:6px solid var(--gold)}
.page-head .wrap{max-width:calc(var(--text) + 2 * var(--gutter) + 240px)}
.page-head h1{font-weight:900;font-size:clamp(2.4rem,6vw,3.8rem);letter-spacing:-.02em;margin:0;color:#fff}
.page-head p{color:#c3ccda;font-size:1.1rem;max-width:36em;margin:.8rem 0 0}
.page-head p a{color:var(--gold);border-bottom-color:rgba(242,181,68,.4)}
.page-head .when{font-size:.9rem;color:#93a1b6}

.doc{max-width:calc(var(--text) + 2 * var(--gutter) + 240px);margin:0 auto;padding:clamp(2rem,5vw,3.5rem) var(--gutter) clamp(3rem,6vw,5rem);
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:start}
.toc{position:sticky;top:1.5rem;font-size:.88rem;border-left:2px solid var(--line);padding-left:1rem}
.toc b{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.toc a{display:block;color:var(--navy);border:0;padding:.22rem 0;font-weight:700}
.toc a:hover{color:#b07a10}
.doc-body{min-width:0;max-width:var(--text)}
.doc-body section{margin:0 0 2.8rem;scroll-margin-top:1rem}
.doc-body h2{font-size:1.55rem;font-weight:900;color:var(--navy);margin:0 0 .8rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.7rem}
.doc-body h2::before{content:"";width:14px;height:14px;background:var(--gold);border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(242,181,68,.25)}
.doc-body h3{font-size:1.15rem;font-weight:900;color:var(--navy);margin:1.6rem 0 .4rem}
.doc-body ul,.doc-body ol{padding-left:1.25rem}
.doc-body li{margin:.4rem 0}
.lead{font-size:1.12rem;color:var(--muted);line-height:1.6}
.muted{color:var(--muted);font-size:.93rem}
code{font-family:Consolas,Menlo,monospace;background:#fff;border:1px solid var(--line);border-radius:3px;padding:.05rem .35rem;font-size:.86em;overflow-wrap:anywhere}

.callout{background:var(--navy);color:#dfe5ee;border-radius:10px;padding:1.3rem 1.5rem;margin:0 0 2.6rem}
.callout h2::before{display:none}
.callout h3,.callout h2{display:block;color:var(--gold);margin:0 0 .4rem;font-size:1.05rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.callout p{margin:.4rem 0 0}
.callout a{color:var(--gold);border-bottom-color:rgba(242,181,68,.4)}
.callout strong{color:#fff}
.callout .big-mail{font-size:1.5rem;font-weight:900}

.tw{overflow-x:auto;margin:1.2rem 0}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--navy);font-weight:900;font-size:.85rem;width:30%;white-space:nowrap}
tr:first-child th,tr:first-child td{border-top:2px solid var(--navy)}

.dl{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.dl li{margin:0}
.dl a{display:block;border:1px solid var(--line);border-radius:8px;padding:.75rem .95rem;background:#fff;
  font-weight:900;color:var(--navy);transition:transform .2s,border-color .2s,box-shadow .2s}
.dl a:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 6px 16px rgba(18,32,58,.08)}
.dl small{display:block;font-weight:400;color:var(--muted);font-size:.82rem}

.press-game{border-radius:12px;overflow:hidden;margin:1.6rem 0;background:#fff;border:1px solid var(--line)}
.press-game .pg-art{display:block;width:100%;aspect-ratio:920/430;object-fit:cover}
.press-game .pg-in{padding:1.2rem 1.4rem 1.4rem}
.press-game h3{margin-top:0;font-size:1.4rem}
.press-game.pg-dt{border-top:6px solid #ffcf33}
.press-game.pg-vg{border-top:6px solid #d8a645}
.press-game.pg-cm{border-top:6px solid #62e6ff}
video.trailer{width:100%;aspect-ratio:16/9;background:#000;border-radius:6px;margin:.8rem 0}

.mid{min-height:max(56vh,calc(100vh - 300px));display:flex;align-items:center;justify-content:center;text-align:center;padding:3rem var(--gutter);
  background:radial-gradient(600px 300px at 50% 40%,rgba(242,181,68,.12),transparent 70%),var(--navy);color:var(--cream)}
.mid img{width:150px;margin:0 auto 1.4rem}
.mid h1{font-size:clamp(2rem,6vw,3rem);font-weight:900;margin:0 0 .5rem;color:#fff}
.mid p{color:#c3ccda;font-size:1.1rem}
.mid a{color:var(--gold);border-bottom-color:rgba(242,181,68,.4);font-weight:700}

/* ---------- footer ---------- */
footer{background:var(--navy-deep);color:#8593a8;padding:2.4rem 0 2.8rem;font-size:.88rem}
footer .inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);display:flex;gap:2rem;flex-wrap:wrap;align-items:flex-start}
footer img{width:44px;height:44px}
footer a{color:#c3ccda;border:0}
footer a:hover{color:var(--gold)}
.foot-brand{border:0}
footer nav{display:flex;gap:1.3rem;font-weight:700;padding-top:.6rem}
footer .legal{margin-left:auto;text-align:right;max-width:38em;font-size:.8rem;line-height:1.7}

/* ==========================================================
   Phone and tablet
   ========================================================== */
@media (max-width:900px){
  .dt-body,.vg-cols,.cm-body{grid-template-columns:1fr}
  .dt-photos{min-height:0;margin-top:1rem;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 22px;margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)}
  .dt-photos img{position:static;flex:0 0 72%;width:72%;scroll-snap-align:center;padding:7px 7px 24px}
  .doc{grid-template-columns:1fr;gap:0}
  .toc{display:none}
}
@media (max-width:700px){
  body{font-size:16px}
  .home .shelf{padding-top:calc(2rem + 96px)}
  .masthead .bar{padding-top:.6rem;padding-bottom:.5rem}
  .masthead nav{gap:1.1rem;font-size:.85rem;width:100%;margin-left:0;justify-content:flex-start}
  .boxes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:6px;margin-top:2rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .boxes::-webkit-scrollbar{display:none}
  .boxes li{flex:0 0 66%;scroll-snap-align:center}
  .vg-strip{grid-template-columns:1fr}
  .vg-strip figure:nth-child(n+2){display:none}
  .vg-reveal h2{width:40%;left:3%;top:6%}
  .vg-ledger dd{font-size:1.6rem}
  .cm-shots{grid-template-columns:1fr}
  .cm-shots .big{grid-row:auto}
  .cm-title{position:relative;bottom:auto;margin-top:-3.5rem}
  .cm-sky{height:280px}
  .studio-in{grid-template-columns:1fr;justify-items:start}
  .reach-list{grid-template-columns:1fr}
  .reach-list li,.reach-list li+li{padding:1.1rem 0;border-left:0;border-bottom:1px solid rgba(242,181,68,.2)}
  footer .legal{margin-left:0;text-align:left}
  th,td{display:block;width:100%;border:0;padding:.15rem 0}
  th{padding-top:.75rem;white-space:normal}
  tr{display:block;border-bottom:1px solid var(--line);padding-bottom:.6rem}
  tr:first-child th,tr:first-child td{border-top:0}
  table,tbody{display:block}
  .tw{border-top:2px solid var(--navy)}
}

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

@media print{
  .masthead,footer,.page-head{background:#fff;color:#000}
  .masthead nav,.toc{display:none}
  .doc{display:block}
  body{font-size:11pt}
  a{color:#000;border:0}
}