/* studio.css — Elada Studios shell theme (home page).
   Brand palette from the logo: cyan #29ABE2 + magenta #EC1E79 on a dark base.
   The home page is a split-screen portal: each half is themed as one game's
   world (LetterFire terminal / STAR FISH space) with the studio mark on the seam. */

:root{
  --ink-bg:#0B0D12;        /* studio dark base */
  --ink-panel:#121620;
  --cyan:#29ABE2;          /* logo rule-marks */
  --cyan-dim:#1B7299;
  --magenta:#EC1E79;       /* logo gem */
  --text:#EDF1F5;
  --text-dim:#97A1B0;
  --line:rgba(41,171,226,.18);
  --focus:var(--magenta);
  /* game worlds, sampled from real screenshots */
  --lf-abyss:#080B11;
  --lf-amber:#E89A33;
  --lf-amber-deep:#B26818;
  --lf-glow:#FF9A3D;
  --sf-lime:#A8E22A;
  --sf-blue:#52A8E8;
}

body{background:var(--ink-bg);color:var(--text)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- overlay top bar ---- */
header{position:absolute;inset:0 0 auto 0;z-index:5;padding:20px 26px}
.bar{display:flex;align-items:center;justify-content:space-between}
.bar .word{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--text);text-shadow:0 1px 6px rgba(0,0,0,.8)}
.bar .word b{color:var(--cyan)}
nav a{
  color:var(--text);text-decoration:none;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;margin-left:22px;text-shadow:0 1px 6px rgba(0,0,0,.8);
}
nav a:hover{color:var(--cyan)}

/* ---- the split portal ---- */
.split{display:flex;min-height:100svh;position:relative}
@media(max-width:760px){.split{flex-direction:column}}
.panel{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
  padding:96px 7vw;transition:flex-grow .4s ease;
}
.panel:hover,.panel:focus-visible{flex-grow:1.25}
@media(prefers-reduced-motion:reduce){.panel:hover,.panel:focus-visible{flex-grow:1}}
@media(max-width:760px){.panel{min-height:62svh;padding:80px 8vw}}
.panel-inner{position:relative;z-index:2;max-width:430px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
/* keep content clear of the centre seam (the emblem lives there) */
.panel--lf{justify-content:flex-start}
.panel--sf{justify-content:flex-end}
@media(max-width:760px){.panel--lf,.panel--sf{justify-content:center}}
.panel .tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase}
.panel .pitch{font-size:1.02rem;max-width:38ch}
.panel .pitch b{font-weight:600}
.panel .chips{display:flex;flex-wrap:wrap;gap:8px}
.panel .chip{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid;padding:5px 9px;
}
.panel .go{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.12em;margin-top:8px;transition:transform .25s ease}
.panel:hover .go{transform:translateX(6px)}

/* LetterFire half — the intel terminal */
.panel--lf{background:var(--lf-abyss)}
.panel--lf::before{ /* faint amber chart grid */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(232,154,51,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,154,51,.07) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 80% at 60% 40%,#000 30%,transparent 100%);
}
.panel--lf .tag{color:#8FA3B8}
.panel--lf .pitch{color:#9DB1C0}
.panel--lf .pitch b{color:#E7EEF2}
.panel--lf .chip{color:var(--lf-amber);border-color:rgba(232,154,51,.45)}
.panel--lf .chip.soon{color:#8FA3B8;border-color:rgba(143,163,184,.35)}
.panel--lf .go{color:var(--lf-glow)}

/* mini intercept-buffer tiles spelling the title, stacked LETTER / FIRE */
.tilestack{display:flex;flex-direction:column;gap:6px}
.tiles{display:flex;gap:5px}
.tile{
  width:clamp(27px,3.2vw,40px);aspect-ratio:1;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:clamp(.95rem,1.6vw,1.35rem);
  background:linear-gradient(180deg,var(--lf-amber),var(--lf-amber-deep));
  color:#241303;box-shadow:0 2px 0 rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22);
}
.tile.hit{
  background:linear-gradient(180deg,#FFB45E,var(--lf-glow));
  box-shadow:0 0 18px rgba(255,154,61,.55),0 2px 0 rgba(0,0,0,.55);
}

/* STAR FISH half — open space */
.panel--sf{background:#050608 url(/assets/starfish/bg-planet.png) center/cover no-repeat}
.panel--sf::before{ /* legibility scrim */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,8,.55),rgba(5,6,8,.18) 45%,rgba(5,6,8,.62));
}
.panel--sf .logo-img{width:min(330px,72%);height:auto;filter:drop-shadow(0 4px 18px rgba(0,0,0,.6))}
.panel--sf .tag{color:#BFD9EE}
.panel--sf .pitch{color:#D9E6F2}
.panel--sf .pitch b{color:#fff}
.panel--sf .chip{color:var(--sf-lime);border-color:rgba(168,226,42,.5);background:rgba(5,6,8,.45)}
.panel--sf .chip.soon{color:#F2E33D;border-color:rgba(242,227,61,.45)}
.panel--sf .go{color:var(--sf-lime)}

/* ---- studio emblem on the seam ---- */
.emblem{
  position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--ink-bg);border:1px solid var(--line);
  padding:20px 26px;display:flex;flex-direction:column;align-items:center;gap:10px;
  box-shadow:0 0 0 6px rgba(11,13,18,.55),0 0 44px rgba(236,30,121,.22);
  pointer-events:none;
}
.emblem img{height:44px;width:auto}
.emblem .gem{pointer-events:none}
/* mid widths: smaller emblem + a reserved centre channel so text never sits under it */
@media(max-width:1160px) and (min-width:761px){
  .emblem{padding:12px 16px}
  .emblem img{height:28px}
  .panel--lf{padding-right:calc(4vw + 70px)}
  .panel--sf{padding-left:calc(4vw + 70px)}
}
@media(max-width:760px){.emblem{padding:14px 18px}.emblem img{height:34px}}

/* Gem motif — small magenta diamond */
.gem{
  display:inline-block;width:13px;height:11px;background:var(--magenta);
  clip-path:polygon(50% 100%,0 32%,18% 0,82% 0,100% 32%);
}

/* ---- below the fold: studio strip ---- */
.sec-head{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:26px;display:flex;align-items:center;gap:12px;
}
section.about{padding:72px 0}
.about p{color:var(--text-dim);max-width:62ch;font-size:1.05rem}
.about p b{color:var(--text);font-weight:600}
.about .links{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.about .links a{
  color:var(--text-dim);text-decoration:none;font-family:var(--font-mono);font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:10px 14px;
}
.about .links a:hover{color:var(--cyan);border-color:var(--cyan)}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:46px 0 60px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;align-items:flex-start}
.foot .brand img{height:30px;width:auto;margin-bottom:12px}
.foot .brand p{color:var(--text-dim);font-size:.9rem;max-width:34ch}
.foot .col h4{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:10px;
}
.foot a{color:var(--text-dim);text-decoration:none;font-size:.9rem;display:block;margin:6px 0}
.foot a:hover{color:var(--cyan)}
.legal{
  margin-top:36px;font-family:var(--font-mono);font-size:.68rem;
  color:var(--cyan-dim);letter-spacing:.04em;
}