/* ============================================================
   LAYERS OF REALITY — Immersive Exhibition Website · CANON v2.1
   DINOSAURIUM re-skin (www.dinosauriumexperience.com)
   ------------------------------------------------------------
   One stylesheet for every LoR exhibition site.
   RE-SKIN = edit ONLY the :root block (colours, fonts, metrics)
   and regenerate the FONTS block. Every component reads from
   tokens: no colour is written outside :root.

   DINOSAURIUM follows its brand book (Manual de marca D):
   · Colours: Lime #CED646 (primary), Anthracite #2E2E2E (base),
     Ivory #F1ECD9 (text), Pink #FF537B (CTAs, limited use).
     Teal #36A696 is NOT used: the brand book forbids it next to lime.
   · Type: Barlow Condensed Medium (headlines, UPPERCASE only),
     Roboto (body), Roboto Mono (highlights, subtitles, quotes).
     All three self-hosted (SIL OFL), fallbacks = the brand book's
     Microsoft set (Bahnschrift Condensed, Arial, Lucida Console).

   Section rhythm rule: every section STARTS and ENDS on --black
   (flat, or .bg-glow = black → panel → black).

   Modules: partner · games · trailer (self-hosted <video> variant)
   · contacts · facts · game page.
   ============================================================ */

:root{
  /* --- Surfaces (brand anthracite, deepened for dark room photos) --- */
  --black:#161616;                 /* page background */
  --black-rgb:22,22,22;            /* same colour as RGB triplet */
  --ink:#0d0d0d;                   /* footer / deepest */
  --panel:#2e2e2e;                 /* glow partner of --black = brand Anthracite */
  --header-h:72px;

  /* --- Text tones (brand Ivory) --- */
  --heading:#f1ecd9;               /* titles */
  --text:#ece7d6;                  /* body */
  --text-soft:#d2cdbc;             /* leads, paragraphs */
  --text-dim:#b3ae9e;              /* secondary copy */
  --text-faint:#a19c8d;            /* fine print — 4.95:1 on --panel (WCAG AA) */

  /* --- Accents --- */
  --accent:#ced646;                /* PRIMARY = brand Lime (logo, main CTA, active dots) */
  --accent-bright:#dde36f;         /* lime, brighter (tags, hover) */
  --accent2:#9fa62c;               /* lime, deeper (gradient partner) */
  --accent3:#ff537b;               /* TERTIARY = brand Pink (2nd CTA, kickers, cites) */
  --accent3-bright:#ff7f9c;        /* pink, brighter (text on dark: 5.7:1) */
  --accent3-deep:#f5476f;          /* pink, deeper (2nd CTA gradient) */
  --on-accent:#1c1c1c;             /* text on lime buttons (10.8:1) */
  --on-accent3:#1c1c1c;            /* text on pink buttons (5.5:1) */
  --accent-rgb:206,214,70;
  --accent3-rgb:255,83,123;

  /* --- Optional duality (two sides / two artists) --- */
  --side-a:var(--accent);
  --side-b:var(--accent3);

  /* --- Neutrals & metrics --- */
  --muted:#9a9686;
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.05);
  --shadow:0 30px 80px rgba(0,0,0,.5);
  --radius:6px;
  --maxw:1200px;

  /* --- Typography (brand book) --- */
  --font-display:"Barlow Condensed","Bahnschrift Condensed","Arial Narrow","Roboto Condensed",Arial,sans-serif;
  --font-body:"Roboto","Helvetica Neue",Arial,sans-serif;
  --font-accent:"Roboto Mono","Lucida Console",Menlo,Consolas,monospace;
  --font-quote:var(--font-accent);
  --quote-style:normal;
  --display-weight:500;
  --display-word-spacing:0;
  --display-transform:uppercase;   /* brand book: headlines in capitals only */
  --display-tracking:.01em;

  /* --- Back-compat aliases (v1 sites: LvsM) --- */
  --magenta:var(--accent); --magenta-bright:var(--accent-bright); --purple:var(--accent2);
  --cyan:var(--accent3); --cyan-bright:var(--accent3-bright); --leo:var(--side-a); --mic:var(--side-b);
}

/* ▼ FONTS (self-hosted from npm @fontsource · SIL OFL 1.1 — licences in fonts/) */
@font-face {font-family:'Barlow Condensed';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/barlow-condensed-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face {font-family:'Barlow Condensed';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/barlow-condensed-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family:'Barlow Condensed';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/barlow-condensed-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face {font-family:'Barlow Condensed';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family:'Roboto';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/roboto-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face {font-family:'Roboto';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/roboto-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family:'Roboto';font-style:italic;font-display:swap;font-weight:100 900;src:url(fonts/roboto-latin-ext-wght-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face {font-family:'Roboto';font-style:italic;font-display:swap;font-weight:100 900;src:url(fonts/roboto-latin-wght-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family:'Roboto Mono';font-style:normal;font-display:swap;font-weight:100 700;src:url(fonts/roboto-mono-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face {font-family:'Roboto Mono';font-style:normal;font-display:swap;font-weight:100 700;src:url(fonts/roboto-mono-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family:'Roboto Mono';font-style:italic;font-display:swap;font-weight:100 700;src:url(fonts/roboto-mono-latin-ext-wght-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face {font-family:'Roboto Mono';font-style:italic;font-display:swap;font-weight:100 700;src:url(fonts/roboto-mono-latin-wght-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ▲ END FONTS */
/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--black);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
section[id]{scroll-margin-top:var(--header-h)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
:where(a,button,video):focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:3px;font-weight:700}
.skip:focus{left:8px}

/* ---------- Header ---------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(var(--black-rgb),.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:background .3s}
header.site.scrolled{background:rgba(var(--black-rgb),.94)}
header.site .bar{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:24px}
.brand{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:.1em;text-transform:uppercase;font-size:1.08rem;color:var(--heading);line-height:1.1;white-space:nowrap}
.brand span{color:var(--accent-bright)}
.brand img{height:24px;width:auto}
.brand small{display:block;font-size:.5rem;letter-spacing:.2em;color:var(--accent3-bright);font-family:var(--font-accent);font-weight:600;margin-top:6px}
nav.main{display:flex;gap:20px;align-items:center}
nav.main a{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);font-weight:500;transition:color .2s;white-space:nowrap}
nav.main a:hover{color:var(--accent-bright)}
.nav-toggle{display:none;background:none;border:0;color:var(--heading);font-size:1.5rem;cursor:pointer;line-height:1;padding:6px}
/* Compact (hamburger) nav: below 1080 px, or whenever the links don't fit
   (site.js adds .nav-compact to the header — robust to any number of items). */
@media(max-width:1080px){
  nav.main{position:fixed;top:var(--header-h);left:0;right:0;flex-direction:column;gap:0;background:rgba(var(--black-rgb),.98);border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .35s ease}
  nav.main.open{max-height:520px}
  nav.main a{padding:16px 24px;width:100%;border-top:1px solid var(--line)}
  .nav-toggle{display:block}
}
header.site.nav-compact nav.main{position:fixed;top:var(--header-h);left:0;right:0;flex-direction:column;gap:0;background:rgba(var(--black-rgb),.98);border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .35s ease}
header.site.nav-compact nav.main.open{max-height:520px}
header.site.nav-compact nav.main a{padding:16px 24px;width:100%;border-top:1px solid var(--line)}
header.site.nav-compact .nav-toggle{display:block}

/* ---------- Hero (key art, logo baked in — no typography over it) ---------- */
.hero{position:relative;background:var(--black);padding:var(--header-h) 0 40px}
.hero .art{position:relative;width:100%}
.hero .art img{width:100%;height:auto}
.hero .art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,rgba(var(--black-rgb),0),var(--black));pointer-events:none}
.hero-band{position:relative;z-index:2;text-align:center;padding:10px 24px 12px;margin-top:-5%}
.hero-band .tag{font-size:clamp(1.05rem,2.3vw,1.45rem);color:var(--text);font-weight:300;max-width:780px;margin:0 auto;letter-spacing:.01em;line-height:1.5}
.hero-band .tag strong{font-weight:600;color:var(--heading)}
.hero-band .cta-row{margin-top:30px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-band .cta-row .btn{width:236px;justify-content:center;padding-left:16px;padding-right:16px}
@media(max-width:560px){.hero-band .cta-row .btn{width:100%;max-width:300px}}
@media(max-width:640px){.hero-band{margin-top:0;padding-top:30px}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 32px;border-radius:3px;font-family:var(--font-body);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;cursor:pointer;border:1px solid transparent;transition:all .25s}
.btn-primary{background:linear-gradient(135deg,var(--accent-bright),var(--accent) 55%,var(--accent2));color:var(--on-accent)}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 10px 30px rgba(var(--accent-rgb),.35)}
.btn-secondary,.btn-play,.btn-cyan{background:linear-gradient(135deg,var(--accent3),var(--accent3-deep));color:var(--on-accent3)}
.btn-secondary:hover,.btn-play:hover,.btn-cyan:hover{filter:brightness(1.15);transform:translateY(-2px);box-shadow:0 10px 30px rgba(var(--accent3-rgb),.35)}
.btn-ghost{background:transparent;color:var(--heading);border-color:rgba(255,255,255,.38)}
.btn-ghost:hover{border-color:var(--accent-bright);color:var(--accent-bright)}
.btn-disabled{background:var(--line-soft);color:var(--text-faint);border-color:var(--line);cursor:not-allowed;pointer-events:none}
.btn-sm{padding:11px 22px;font-size:.7rem}

/* ---------- Sections ---------- */
section{padding:100px 0;position:relative;background:var(--black)}
.bg-glow{background:linear-gradient(180deg,var(--black),var(--panel) 50%,var(--black))}
.section-tag{font-family:var(--font-accent);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-bright);font-weight:600;margin-bottom:18px;text-align:center}
.section-title{font-family:var(--font-display);font-weight:var(--display-weight);text-transform:var(--display-transform);letter-spacing:var(--display-tracking);font-size:clamp(2.1rem,4.8vw,3.5rem);line-height:1.04;word-spacing:var(--display-word-spacing);text-align:center;color:var(--heading);max-width:880px;margin:0 auto 24px}
.section-lead{text-align:center;max-width:780px;margin:0 auto;font-size:1.06rem;color:var(--text-soft);font-weight:300}
.section-lead + .section-lead{margin-top:18px}
.section-lead strong{color:var(--heading);font-weight:600}
.experience{padding-top:34px}

/* ---------- MODULE: Facts strip (optional · inside The Experience) ---------- */
.facts{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:56px auto 0;max-width:1080px}
.fact{border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--radius);padding:24px 22px;background:rgba(255,255,255,.02);font-family:var(--font-accent);font-size:.9rem;line-height:1.55;color:var(--heading)}
@media(max-width:900px){.facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.facts{grid-template-columns:1fr}}

/* ---------- MODULE: Partner / endorsement (optional) ---------- */
.hero-support{display:inline-flex;flex-direction:column;align-items:center;gap:12px;margin-top:40px;transition:opacity .25s}
.hero-support span{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim);font-weight:600}
.hero-support img{height:84px;width:auto}
.hero-support .names,.foot-support .names{font-family:var(--font-accent);font-size:.8rem;letter-spacing:.04em;text-transform:none;color:var(--text-soft);font-weight:400;line-height:1.6}
.hero-support .names--minor,.foot-support .names--minor{font-size:.66rem;color:var(--text-dim);margin-top:-6px}
.hero-support:hover{opacity:.85}
.partner-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}
.partner-logo{border:1px solid rgba(var(--accent3-rgb),.45);border-radius:var(--radius);padding:56px 44px;background:radial-gradient(ellipse at center,rgba(var(--accent3-rgb),.12),rgba(var(--accent3-rgb),0) 72%),var(--line-soft);display:flex;align-items:center;justify-content:center}
.partner-logo img{width:100%;max-width:460px;height:auto}
.partner-names{display:flex;flex-direction:column;gap:30px;text-align:center}
.partner-names .pn{font-family:var(--font-display);font-weight:var(--display-weight);text-transform:var(--display-transform);letter-spacing:var(--display-tracking);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.08;color:var(--heading)}
.partner-names .pn small{display:block;font-family:var(--font-accent);font-size:.62rem;letter-spacing:.2em;color:var(--accent3-bright);margin-top:10px;font-weight:600}
.partner-names .pn--minor{font-family:var(--font-accent);text-transform:none;letter-spacing:.02em;font-size:.8rem;font-weight:400;color:var(--text-dim)}
.partner-names hr{border:0;border-top:1px solid var(--line);width:60px;margin:0 auto}
.partner-txt .section-tag,.partner-txt .section-title{text-align:left;margin-left:0}
.partner-txt p:not(.section-tag){color:var(--text-soft);font-weight:300;font-size:1.04rem;margin-bottom:16px}
.partner-txt p strong{color:var(--heading);font-weight:600}
.partner-links{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:28px}
.partner-txt p.partner-minor{font-size:.86rem;color:var(--text-dim)}
.partner-link-minor{font-size:.78rem;color:var(--text-dim);border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .2s,border-color .2s}
.partner-link-minor:hover{color:var(--accent-bright);border-color:var(--accent-bright)}
.partner-quote{border-left:3px solid var(--accent);padding:4px 0 4px 22px;margin:28px 0 32px}
.partner-quote blockquote{font-family:var(--font-quote);font-style:var(--quote-style);font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--heading);font-weight:400;line-height:1.5}
.partner-quote cite{display:block;margin-top:12px;font-style:normal;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent3-bright);font-weight:600}
@media(max-width:900px){.partner-grid{grid-template-columns:1fr;gap:40px}.partner-logo{padding:40px 28px}}

/* ---------- Journey ---------- */
.step{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;margin-top:26px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.02)}
.step:first-of-type{margin-top:56px}
.step .media{position:relative;min-height:340px;overflow:hidden}
.step .media img{position:absolute;top:-1px;left:0;width:100%;height:calc(100% + 2px);object-fit:cover;transition:transform .9s ease}
.step:hover .media img{transform:scale(1.05)}
.step .media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--black-rgb),0) 60%,rgba(var(--black-rgb),.5))}
.step .txt{padding:52px 48px;display:flex;flex-direction:column;justify-content:center}
.step .idx{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--accent-bright);letter-spacing:.12em;margin-bottom:6px}
.step .kick{font-family:var(--font-accent);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent3-bright);font-weight:600;margin-bottom:14px}
.step h3{font-family:var(--font-display);text-transform:var(--display-transform);letter-spacing:var(--display-tracking);font-size:clamp(1.7rem,2.9vw,2.4rem);color:var(--heading);font-weight:var(--display-weight);margin-bottom:16px;line-height:1.05;word-spacing:var(--display-word-spacing)}
.step p{color:var(--text-soft);font-weight:300;font-size:1rem}
.step .worlds{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:7px}
.step .worlds li{font-size:.86rem;color:var(--text-dim);font-weight:400;padding-left:18px;position:relative;line-height:1.45}
.step .worlds li::before{content:"\25C6";position:absolute;left:0;top:.05em;font-size:.6rem;color:var(--accent)}
.step .worlds li b{color:var(--heading);font-weight:600;letter-spacing:.04em}
.step .worlds.chapters{display:grid;grid-template-columns:1fr 1fr;gap:7px 18px}
.step:nth-child(even) .media{order:2}
.step:nth-child(even) .media::after{background:linear-gradient(270deg,rgba(var(--black-rgb),0) 60%,rgba(var(--black-rgb),.5))}
@media(max-width:820px){
  .step,.step:nth-child(even){grid-template-columns:1fr}
  .step .media,.step:nth-child(even) .media{order:0;min-height:220px}
  .step .txt{padding:36px 30px}
}
@media(max-width:560px){.step .worlds.chapters{grid-template-columns:1fr}}

/* ---------- Cities ---------- */
.cities-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:60px}
@media(max-width:900px){.cities-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cities-grid{grid-template-columns:1fr}}
.city{border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:16px;transition:border-color .3s,transform .3s}
.city:hover{border-color:var(--accent);transform:translateY(-3px)}
.city .top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.city h3{font-family:var(--font-display);text-transform:var(--display-transform);letter-spacing:var(--display-tracking);font-size:1.8rem;line-height:1.05;color:var(--heading);font-weight:var(--display-weight);word-spacing:var(--display-word-spacing)}
.city .status{font-family:var(--font-accent);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:3px;white-space:nowrap}
.status.live{background:rgba(var(--accent-rgb),.16);color:var(--accent-bright);border:1px solid rgba(var(--accent-rgb),.5)}
.status.soon{background:rgba(var(--accent3-rgb),.12);color:var(--accent3-bright);border:1px solid rgba(var(--accent3-rgb),.45)}
.status.ended{background:var(--line-soft);color:var(--text-faint);border:1px solid var(--line)}
.city .venue{color:var(--text-dim);font-size:.9rem;font-weight:300;min-height:2.6em}
.city .btn{margin-top:auto;align-self:flex-start}

/* ---------- MODULE: Games (optional) ---------- */
.games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:60px}
@media(max-width:820px){.games-grid{grid-template-columns:1fr}}
.game-card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:rgba(255,255,255,.02);transition:border-color .3s,transform .3s;display:flex;flex-direction:column}
.game-card:hover{transform:translateY(-4px)}
.game-card.side-a:hover,.game-card.leo:hover{border-color:var(--side-a)}
.game-card.side-b:hover,.game-card.mic:hover{border-color:var(--side-b)}
.game-card .thumb{aspect-ratio:16/9;overflow:hidden;background:var(--ink);position:relative}
.game-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.game-card:hover .thumb img{transform:scale(1.04)}
.game-card .body{padding:28px 26px;display:flex;flex-direction:column;gap:12px}
.game-card .eyebrow{font-size:.67rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.game-card.side-a .eyebrow,.game-card.leo .eyebrow{color:var(--side-a)}
.game-card.side-b .eyebrow,.game-card.mic .eyebrow{color:var(--side-b)}
.game-card h3{font-family:var(--font-display);text-transform:var(--display-transform);font-size:1.7rem;color:var(--heading);font-weight:var(--display-weight)}
.game-card p{color:var(--text-soft);font-size:.94rem;font-weight:300}
.game-card .meta{display:flex;gap:14px;font-size:.72rem;color:var(--text-faint);letter-spacing:.05em;margin-top:2px;flex-wrap:wrap}
.game-card .btn{margin-top:8px;align-self:flex-start}

/* ---------- Gallery (lorc) ---------- */
.carousel-sec:has(+ .trailer-sec){padding-bottom:64px}   /* gallery sits closer to the trailer band */
.lorc{position:relative;width:100%;margin:60px auto 0;aspect-ratio:16/9;background:var(--ink);border-radius:8px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);-webkit-user-select:none;user-select:none;touch-action:pan-y}
@supports not (aspect-ratio:16/9){.lorc::before{content:"";display:block;padding-top:56.25%}.lorc__track{position:absolute;inset:0}}
.lorc__track{display:flex;height:100%;width:100%;transition:transform .6s cubic-bezier(.25,.8,.25,1);will-change:transform}
@media (prefers-reduced-motion:reduce){.lorc__track{transition-duration:.01ms}}
.lorc__slide{position:relative;flex:0 0 100%;width:100%;height:101%;background-position:center;background-size:cover;background-repeat:no-repeat}
.lorc__arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(var(--black-rgb),.45);color:var(--heading);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;transition:background .25s,border-color .25s,transform .1s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lorc__arrow:hover{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:var(--on-accent)}
.lorc__arrow:active{transform:translateY(-50%) scale(.92)}
.lorc__arrow svg{width:22px;height:22px;display:block}
.lorc__arrow--prev{left:16px} .lorc__arrow--next{right:16px}
.lorc__dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;flex-wrap:wrap;gap:9px;z-index:3;padding:0 60px}
.lorc__dot{width:10px;height:10px;border-radius:50%;border:none;padding:0;background:rgba(255,255,255,.5);cursor:pointer;transition:background .25s,transform .25s}
.lorc__dot:hover{transform:scale(1.25)}
.lorc__dot.is-active{background:var(--heading);box-shadow:0 0 0 2px var(--accent);transform:scale(1.15)}
.lorc__pause{position:absolute;left:16px;bottom:12px;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(var(--black-rgb),.45);color:var(--heading);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.75;transition:opacity .25s,background .25s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lorc__pause:hover,.lorc__pause:focus-visible{opacity:1;background:rgba(var(--black-rgb),.7)}
.lorc__pause svg{width:15px;height:15px;display:block}
@media(max-width:560px){.lorc__arrow{width:40px;height:40px}.lorc__arrow--prev{left:8px}.lorc__arrow--next{right:8px}.lorc__dots{gap:6px;bottom:10px}.lorc__dot{width:7px;height:7px}.lorc__pause{left:8px;bottom:6px;width:30px;height:30px}}

/* ---------- MODULE: Trailer (optional) ----------
   Variant A (canon): .trailer link-out band (opens YouTube, no embed).
   Variant B (DINOSAURIUM): self-hosted <video> — same origin, so no cookies,
   no third-party request; needs media-src 'self' in the CSP. */
.trailer-sec{padding:0 0 100px}
.trailer{position:relative;display:block;overflow:hidden;isolation:isolate;aspect-ratio:21/8;min-height:280px;border-radius:8px;border:1px solid var(--line);box-shadow:var(--shadow)}
@supports not (aspect-ratio:1){.trailer{height:440px}}
.trailer__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;z-index:-2;transition:transform 1.2s ease}
.trailer::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,rgba(var(--black-rgb),.3) 0%,rgba(var(--black-rgb),.84) 78%)}
.trailer:hover .trailer__bg{transform:scale(1.04)}
.trailer__body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
.trailer__tag{font-family:var(--font-accent);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-bright);font-weight:600}
.trailer__play{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent-bright),var(--accent) 55%,var(--accent2));color:var(--on-accent);box-shadow:0 0 0 8px rgba(var(--accent-rgb),.18),0 12px 40px rgba(0,0,0,.55);transition:transform .3s,box-shadow .3s}
.trailer__play svg{width:34px;height:34px;margin-left:4px;display:block}
.trailer:hover .trailer__play{transform:scale(1.08);box-shadow:0 0 0 14px rgba(var(--accent-rgb),.14),0 12px 40px rgba(0,0,0,.55)}
.trailer__title{font-family:var(--font-display);font-weight:var(--display-weight);text-transform:var(--display-transform);letter-spacing:var(--display-tracking);font-size:clamp(1.6rem,3.4vw,2.6rem);color:var(--heading);line-height:1.05;word-spacing:var(--display-word-spacing)}
.trailer__note{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);font-weight:500}
@media(max-width:560px){.trailer{aspect-ratio:auto;min-height:300px}.trailer__play{width:68px;height:68px}.trailer__play svg{width:28px;height:28px}}
.trailer-sec .section-tag{margin-bottom:28px}
.trailer-video{position:relative;width:100%;aspect-ratio:16/9;background:var(--ink);border-radius:8px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
@supports not (aspect-ratio:16/9){.trailer-video{height:0;padding-top:56.25%}.trailer-video video{position:absolute;inset:0}}
.trailer-video video{width:100%;height:100%;object-fit:contain;background:var(--ink)}

/* ---------- Press quotes (lqc) ---------- */
.lqc{--lqc-quote-size:clamp(1.35rem,.95rem + 1.9vw,2.4rem);--lqc-cite-ratio:0.36;position:relative;max-width:62rem;margin:44px auto 0;padding:clamp(.5rem,2vw,1rem) 0;color:var(--text)}
.lqc-viewport{position:relative;overflow:hidden}
.lqc-track{display:flex;margin:0;padding:0;list-style:none;transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
@media (prefers-reduced-motion:reduce){.lqc-track{transition:none}}
.lqc-slide{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9em;text-align:center;padding-inline:clamp(1rem,5vw,3.5rem)}
.lqc-slide blockquote{position:relative;margin:0;font-family:var(--font-quote);font-size:var(--lqc-quote-size);line-height:1.3;font-weight:400;font-style:var(--quote-style);color:var(--heading);text-wrap:balance}
.lqc-slide blockquote::before{content:"\201C";position:absolute;top:-.42em;left:50%;transform:translateX(-50%);font-family:var(--font-display);font-size:2.6em;line-height:1;color:var(--accent);opacity:.22;pointer-events:none;z-index:-1}
.lqc-slide blockquote p{margin:0}
.lqc-slide blockquote p::before{content:"\201C"} .lqc-slide blockquote p::after{content:"\201D"}
.lqc-slide cite{display:block;font-family:var(--font-body);font-size:calc(var(--lqc-quote-size) * var(--lqc-cite-ratio));font-style:normal;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--accent3-bright)}
.lqc-controls{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:clamp(1.2rem,2.5vw,2rem)}
.lqc-arrow{appearance:none;background:none;border:none;padding:.4em;margin:0;cursor:pointer;color:var(--text-soft);opacity:.6;line-height:0;border-radius:999px;transition:opacity .25s,color .25s,transform .25s}
.lqc-arrow:hover,.lqc-arrow:focus-visible{opacity:1;color:var(--accent-bright)}
.lqc-arrow:active{transform:scale(.9)}
.lqc-arrow svg{width:1.4em;height:1.4em;display:block}
.lqc-pause svg{width:1.1em;height:1.1em}
.lqc-dots{display:flex;align-items:center;gap:.6rem}
.lqc-dot{appearance:none;padding:0;margin:0;width:.55rem;height:.55rem;border-radius:999px;border:1px solid var(--muted);background:transparent;cursor:pointer;opacity:.5;transition:opacity .25s,transform .25s,background .25s,border-color .25s}
.lqc-dot:hover{opacity:.85}
.lqc-dot[aria-current="true"]{opacity:1;background:var(--accent);border-color:var(--accent);transform:scale(1.2)}

/* ---------- Producer (Layers of Reality) ---------- */
.producer{text-align:center;padding:90px 0}
.producer .lor-logo{font-family:var(--font-display);font-size:2.2rem;color:var(--heading);letter-spacing:.1em;font-weight:var(--display-weight);margin-bottom:14px}
.producer .wrap > p:not(.section-tag){max-width:660px;margin:0 auto 28px;color:var(--text-soft);font-weight:300}

/* ---------- MODULE: Contacts (optional · inside Producer) ---------- */
.contacts{max-width:860px;margin:6px auto 40px}
.contacts__title{font-family:var(--font-accent);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-bright);font-weight:600;margin-bottom:22px}
.contacts__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.contact{border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px 26px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .3s}
.contact:hover{border-color:var(--accent)}
.contact__name{font-family:var(--font-display);font-weight:var(--display-weight);text-transform:var(--display-transform);letter-spacing:var(--display-tracking);font-size:1.6rem;line-height:1.1;color:var(--heading);word-spacing:var(--display-word-spacing)}
.contact__area{font-family:var(--font-accent);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent3-bright);font-weight:600;line-height:1.7}
.contact__btn{margin-top:12px;padding:9px 18px;font-size:.56rem}   /* canon v2.3 §4d routing button: ~20% smaller than .btn-sm */
/* legacy clear-text mail link (pre-v2.3 sites) */
.contact__mail{margin-top:6px;color:var(--text-soft);font-size:.9rem;overflow-wrap:anywhere;border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .2s,border-color .2s}
.contact__mail:hover{color:var(--accent-bright);border-color:var(--accent-bright)}
@media(max-width:640px){.contacts__grid{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
footer.site{background:var(--ink);border-top:1px solid var(--line);padding:70px 0 40px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:50px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr;gap:34px}}
.foot-brand .name{font-family:var(--font-display);font-size:1.25rem;color:var(--heading);font-weight:var(--display-weight);letter-spacing:.1em;text-transform:uppercase}
.foot-brand .name span{color:var(--accent-bright)}
.foot-brand .name img{height:34px;width:auto}
.foot-brand p{color:var(--text-dim);font-size:.9rem;margin-top:12px;font-weight:300;max-width:360px}
.foot-support{display:inline-flex;flex-direction:column;gap:10px;margin-top:26px}
.foot-support span{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--text-faint);font-weight:600}
.foot-support img{height:52px;width:auto}
.foot-col h4{font-family:var(--font-accent);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-bright);margin-bottom:18px;font-weight:600}
.foot-col a{display:block;color:var(--text-soft);font-size:.9rem;margin-bottom:11px;font-weight:300;transition:color .2s}
.foot-col a:hover{color:var(--accent-bright)}
.foot-bottom{border-top:1px solid var(--line);padding-top:28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-bottom p{color:var(--text-faint);font-size:.8rem;font-weight:300}
.foot-social{display:flex;gap:18px}
.foot-social a{color:var(--text-dim);font-size:.82rem;letter-spacing:.05em;transition:color .2s}
.foot-social a:hover{color:var(--accent-bright)}

/* ---------- Legal pages, 404 ---------- */
.page-hero{padding:150px 0 60px;background:linear-gradient(180deg,var(--panel),var(--black));border-bottom:1px solid var(--line);text-align:center}
.page-hero h1{font-family:var(--font-display);text-transform:var(--display-transform);letter-spacing:var(--display-tracking);font-size:clamp(2.4rem,6vw,3.6rem);line-height:1.04;color:var(--heading);font-weight:var(--display-weight);word-spacing:var(--display-word-spacing)}
.page-hero .kicker{font-family:var(--font-accent);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-bright);font-weight:600;margin-bottom:16px}
.page-hero .lead{color:var(--text-soft);font-weight:300;max-width:560px;margin:18px auto 0}
.page-hero .btn{margin-top:30px}
.page-hero.notfound{min-height:70vh;display:flex;align-items:center;justify-content:center}
.legal{padding:70px 0 100px}
.legal .wrap{max-width:820px}
.legal h2{font-family:var(--font-display);text-transform:var(--display-transform);letter-spacing:var(--display-tracking);font-size:1.7rem;line-height:1.1;color:var(--heading);font-weight:var(--display-weight);word-spacing:var(--display-word-spacing);margin:44px 0 16px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.02rem;color:var(--accent3-bright);margin:28px 0 10px;font-weight:600}
.legal p{color:var(--text-soft);margin-bottom:16px;font-weight:300}
.legal ul{margin:0 0 18px 22px;color:var(--text-soft);font-weight:300}
.legal li{margin-bottom:9px}
.legal a{color:var(--accent-bright);text-decoration:underline}
.legal strong{color:var(--heading);font-weight:600}
.legal table{width:100%;border-collapse:collapse;margin:18px 0 26px;font-size:.92rem}
.legal th,.legal td{border:1px solid var(--line);padding:11px 14px;text-align:left;color:var(--text-soft);font-weight:300;vertical-align:top}
.legal th{background:rgba(255,255,255,.03);color:var(--heading);font-weight:600}
.legal .updated{color:var(--text-faint);font-size:.85rem;font-style:italic;margin-bottom:34px}
.legal .box{border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;background:rgba(255,255,255,.02);margin:24px 0}
.legal .box p{margin:0}
.legal .summary{border-left:3px solid var(--accent);padding-left:18px}

/* ---------- MODULE: Game page (optional) ---------- */
.game-page{padding:130px 0 90px;min-height:100vh}
.game-page .back{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-bright);margin-bottom:26px;display:inline-flex;gap:8px;font-weight:600}
.game-page h1{font-family:var(--font-display);text-transform:var(--display-transform);font-size:clamp(2.2rem,5vw,3.4rem);color:var(--heading);font-weight:var(--display-weight);margin-bottom:10px}
.game-page .sub{color:var(--text-soft);font-weight:300;margin-bottom:8px;font-size:1.05rem}
.game-page .meta-row{display:flex;gap:20px;flex-wrap:wrap;color:var(--text-faint);font-size:.78rem;letter-spacing:.06em;margin:20px 0 34px}
.embed-shell{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--ink);box-shadow:var(--shadow)}
.embed-shell iframe{width:100%;display:block;border:0;background:var(--ink)}
.game-note{color:var(--text-faint);font-size:.86rem;font-weight:300;margin-top:20px;text-align:center}
.game-desc{max-width:760px;margin:50px auto 0}
.game-desc h2{font-family:var(--font-display);text-transform:var(--display-transform);font-size:1.5rem;color:var(--heading);font-weight:var(--display-weight);margin-bottom:14px}
.game-desc p{color:var(--text-soft);font-weight:300;margin-bottom:16px}

/* ---------- Reveal (only when JS runs: content is never hidden without JS) ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}