/* Dino Loco website V4: prehistoric meets cosmic */
@font-face{font-family:"Rammetto One";src:url(assets/fonts/rammetto-one-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Figtree;src:url(assets/fonts/figtree-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:Figtree;src:url(assets/fonts/figtree-latin-wght-italic.woff2) format("woff2");font-weight:300 900;font-style:italic;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(assets/fonts/courier-prime-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(assets/fonts/courier-prime-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--void:#120833;--deep:#1d0f55;--cyan:#38e4ee;--lava:#ff5a2c;--gold:#ffc531;--fern:#8fe34a;--pink:#ff5fa8;--cream:#fff3d6;--gut:clamp(16px,5vw,72px);--disp:"Rammetto One",Impact,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;background:var(--void)}
body{margin:0;background:var(--void);color:var(--cream);font:400 clamp(17px,1.25vw,19px)/1.6 Figtree,system-ui,sans-serif;overflow-x:clip}
img{display:block;max-width:100%;height:auto;-webkit-user-drag:none}
a{color:inherit}:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:60;background:var(--cream);color:var(--void);padding:8px 12px}
h1,h2{font-family:var(--disp);font-weight:400;line-height:1.04;margin:0;text-wrap:balance}
h2{font-size:clamp(34px,5vw,74px);max-width:17em}
h3{margin:0 0 .3em;line-height:1.2}
p{margin:0 0 1em}
section{padding:clamp(70px,10vw,140px) var(--gut);position:relative}
.lead{max-width:40em;font-size:1.14em;margin-top:1em}
.btn{display:inline-block;font:700 16px/1.2 Figtree,sans-serif;padding:12px 20px;border-radius:10px;border:2.5px solid var(--cream);background:transparent;color:var(--cream);text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--cream);transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--cream)}
.btn-lava{background:var(--lava);border-color:var(--void);color:#fff;box-shadow:4px 4px 0 var(--void)}
.btn-lava:hover{box-shadow:2px 2px 0 var(--void)}
.links{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 1em}
.top{position:fixed;inset:0 0 auto;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:8px var(--gut);background:linear-gradient(rgba(18,8,51,.9),rgba(18,8,51,0))}
.logo img{width:58px}
#nav{display:flex;gap:clamp(12px,1.5vw,22px);font-weight:600;font-size:15px}#nav a{text-decoration:none}#nav a:hover{color:var(--gold)}
.menu{display:none;background:none;border:2px solid var(--cream);color:var(--cream);font:700 15px Figtree;padding:6px 12px;border-radius:8px}
/* mushrooms */
.shroom{display:inline-flex;align-items:center;gap:10px;background:var(--fern);color:var(--void);border:3px solid var(--void);border-radius:14px;padding:8px 14px 8px 10px;box-shadow:5px 5px 0 var(--void);transform:rotate(-2.5deg);max-width:300px;margin-top:14px}
.shroom svg{width:40px;flex:none}
.shroom .stars{display:block;font-size:17px;letter-spacing:1px;line-height:1.1;color:#2a1270}
.shroom p{margin:0;font:700 15.5px/1.2 Figtree}
.shroom:nth-of-type(even){transform:rotate(2deg)}
/* hero */
.hero{min-height:100svh;display:flex;align-items:flex-end;padding-top:90px;padding-bottom:clamp(24px,4vw,48px);background:#0a1338;overflow:hidden}
.hero-art{position:absolute;right:0;top:0;width:min(100%,100svh + 240px);height:100%;object-fit:cover;object-position:50% 0}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#0b1239 0,#0b1239 34%,rgba(11,18,57,.55) 58%,rgba(11,18,57,0) 78%)}
.hero-copy{position:relative;z-index:2;max-width:760px}
.eyebrow{color:var(--cyan);font-weight:700;margin-bottom:.5em;font-size:1.05em}
h1{font-size:clamp(38px,min(5.5vw,9.4svh),92px)}
.sub{font-size:1.2em;margin:.8em 0 .6em;max-width:30em}
.voice,.voice-line{font-style:italic}
.voice{margin:0 0 1em;color:var(--cyan);font-size:1.08em}
cite{display:block;font-style:normal;font-size:14.5px;opacity:.85;margin-top:.2em}
.swing{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.swing p{margin:0;font-weight:700;color:var(--gold);min-height:1.6em}
.small{font-size:15px;margin:0;opacity:.9}
.at-hero{position:absolute;right:var(--gut);bottom:40px;z-index:2;transform:rotate(3deg)}
.ticker{background:var(--fern);color:var(--void);font-weight:700;margin:0;padding:10px var(--gut);text-align:center;font-size:15.5px}
/* party */
.party{background:linear-gradient(170deg,#ff5fa8,#ff8a3c 45%,#ffc531);color:var(--void)}
.party-art{margin:clamp(24px,4vw,48px) 0;border:4px solid var(--void);border-radius:14px;width:100%;box-shadow:10px 10px 0 var(--void)}
.party-copy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);font-weight:500}
.talk{display:grid;grid-template-columns:max-content 1fr;gap:.3em 1em;margin:0}.talk dt{font-weight:800}.talk dd{margin:0}
.party .shroom{position:absolute;right:var(--gut);top:clamp(30px,5vw,70px)}
.stop{background:#05030f;text-align:center;padding-block:clamp(110px,16vw,240px)}
.q1{font:400 clamp(32px,6vw,90px)/1.08 var(--disp);max-width:15em;margin:0 auto .4em;text-wrap:balance}
.q2{font-size:clamp(20px,2.6vw,34px);color:var(--cyan);font-style:italic;margin-bottom:3em}
.stop-copy{max-width:38em;margin:auto;text-align:left}
.grin{font:400 clamp(24px,3vw,42px)/1.15 var(--disp);color:var(--cyan);text-align:center;margin-top:1.5em}
/* superdinos */
.dinos{background:var(--deep)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,44px);margin-top:clamp(30px,5vw,60px)}
.trio article img{border:4px solid var(--c);border-radius:14px;box-shadow:8px 8px 0 var(--c);margin-bottom:22px;width:100%}
.trio h3,.cast h3{font:400 clamp(30px,3vw,46px)/1 var(--disp)}
.trio h3{color:var(--c)}
.line{font-weight:700;font-size:1.1em;line-height:1.3}
q{display:block;quotes:none;font-style:italic}q::before{content:"\201C"}q::after{content:"\201D"}
/* form */
.form27{background:var(--cyan);color:var(--void);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(24px,5vw,70px);align-items:center}
.sheet{background:var(--cream);padding:clamp(22px,4vw,54px);border:3px solid var(--void);box-shadow:12px 12px 0 var(--void);font-family:"Courier Prime",monospace;position:relative;transform:rotate(-.6deg)}
.form-id{font-weight:700;border-bottom:3px double var(--void);padding-bottom:.4em}
.sheet h2{font:700 clamp(26px,3.3vw,46px)/1.12 "Courier Prime",monospace;margin:.5em 0 .7em}
.sheet ol{padding-left:1.6em;font-size:1.08em;margin:0 0 1.2em}.sheet li{margin-bottom:.4em}
.sheet blockquote{margin:0;font-weight:700}
.stamp{position:absolute;right:6%;bottom:9%;font:400 clamp(18px,2vw,28px)/1 var(--disp);color:var(--lava);border:4px solid var(--lava);padding:8px 12px;transform:rotate(-11deg);opacity:.85}
.form-art{position:relative}.form-art img{border:4px solid var(--void);border-radius:12px}
.form-art .shroom{position:absolute;left:-18px;bottom:-22px}
/* baloi */
.dinolocia{background:linear-gradient(#ffe3a6,#ffcb6b);color:var(--void)}
.wide-art{width:100%;border:4px solid var(--void);border-radius:14px;margin:clamp(24px,4vw,44px) 0}
.dinolocia-copy{columns:2;column-gap:clamp(24px,5vw,70px)}.dinolocia-copy p{break-inside:avoid}
.merch{font:400 clamp(30px,4.6vw,68px)/1.08 var(--disp);color:#b52d0b;margin:clamp(36px,6vw,70px) 0;max-width:17em;text-wrap:balance}
.cast{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,44px)}
.cast img{border:4px solid var(--void);border-radius:14px;margin-bottom:18px;width:100%}
.dinolocia .shroom{box-shadow:5px 5px 0 var(--void)}
.about{background:var(--void)}
.ages{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);margin-top:clamp(30px,5vw,60px)}
.ages h3{font:400 clamp(25px,2.7vw,38px)/1.12 var(--disp);color:var(--gold);margin-bottom:.5em}
.eras{background:var(--deep)}
.era-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px);margin-top:clamp(30px,5vw,56px)}
.era-grid img{border-radius:14px;margin-bottom:16px;aspect-ratio:1;object-fit:cover}
.era-grid h3{font-size:1.2em}
.classified img{filter:blur(14px) brightness(.6);transform:scale(.98);clip-path:inset(0 round 14px)}
.season{background:var(--lava);color:#fff}
.season-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(24px,5vw,70px);margin-top:clamp(28px,4vw,50px);align-items:center}
.season-grid img{border:4px solid var(--void);border-radius:14px;box-shadow:10px 10px 0 var(--void)}
.eps{font:400 clamp(21px,2.3vw,32px)/1.25 var(--disp);padding-left:1.4em;margin:0 0 .6em}
.clear{font-family:"Courier Prime",monospace;font-weight:700}
.season h3{font-size:1.25em;margin-top:1em}
.told{font:400 clamp(30px,3.6vw,52px)/1 var(--disp);margin:0}
.album{background:#0e3f2a;background:linear-gradient(135deg,#17a34a,#8fe34a 70%);color:var(--void);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,70px);align-items:center}
.album h2{margin-bottom:.45em}
.album blockquote{font:400 clamp(21px,2.4vw,34px)/1.2 var(--disp);margin:1em 0}
.album cite{font:600 15px Figtree;margin-top:.7em}
.album .shroom{background:var(--cream)}
.fine{font-size:14.5px;margin:1em 0 0}
.deck img{border:4px solid var(--void);border-radius:14px;box-shadow:10px 10px 0 var(--void)}
.sp{margin-top:20px}.sp iframe{width:100%;height:352px;border:0;border-radius:12px;display:block}
.game{background:var(--void)}
.phones{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:30px var(--gut) 18px;margin:0 calc(var(--gut)*-1)}
.phones figure{margin:0;flex:0 0 clamp(190px,17vw,240px);scroll-snap-align:center}
.phones img{border-radius:20px;border:3px solid #fff3;margin-bottom:10px}
.phones b{display:block;color:var(--gold)}.phones figcaption{font-size:15px;line-height:1.35}
.game-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center}
.creator{background:var(--deep);display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);gap:clamp(28px,6vw,80px);align-items:center}
.voice-line{font-size:1.3em;color:var(--gold);margin:.5em 0}
.partners{background:var(--cream);color:var(--void)}
.at-partners{margin:0 0 22px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.2vw,46px);margin-top:clamp(30px,4vw,56px)}
.facts h3{font:400 clamp(21px,2vw,28px)/1.1 var(--disp);color:#b52d0b;margin-bottom:.4em}
.look{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,22px);margin-top:clamp(30px,5vw,60px)}
.look img{border-radius:12px}
.contact{background:var(--void)}
.foot{background:#05030f;padding:40px var(--gut);display:flex;gap:30px;align-items:center;font-size:15px}
.foot img{width:80px}
@media (max-width:1040px){
 #nav{position:fixed;inset:0;background:var(--void);flex-direction:column;justify-content:center;align-items:center;font:400 26px var(--disp);transform:translateY(-100%);visibility:hidden;transition:transform .25s}
 .open #nav{transform:none;visibility:visible}.menu,.logo{display:block;position:relative;z-index:2}
 .facts{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
 .hero{flex-direction:column;justify-content:flex-end;align-items:flex-start;padding-top:50svh}
 .hero-art{width:100%;height:62svh;object-position:50% 0}
 .hero::before{background:linear-gradient(0deg,#0b1239 52%,rgba(11,18,57,0) 74%)}
 h1{font-size:clamp(34px,10vw,56px)}
 .at-hero{position:static;margin-top:16px}
 .party .shroom{position:static;margin-bottom:14px}
 .party-copy,.trio,.form27,.dinolocia-copy-x,.cast,.ages,.era-grid,.season-grid,.album,.creator,.facts{grid-template-columns:minmax(0,1fr)}
 .dinolocia-copy{columns:1}
 .talk{grid-template-columns:minmax(0,1fr);gap:0}.talk dd{margin-bottom:.5em}
 .form-art{max-width:300px;margin-bottom:24px}.form-art .shroom{left:0}
 .stamp{position:static;display:inline-block;margin-top:14px}
 .creator img{max-width:250px}
 .foot{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}