/* Extras (/beyond/) — aligned with Homepage (home.css) and About (about.css):
   Dark grid hero and full-bleed 0px sharp picture cards with 10px seam. */

.ex-page{
  --ex-ink-link:var(--t-ink-link,#2ee6b8);
  --ex-seam:10px;
  background:var(--t-page);
  color:var(--fg);
  font:400 1.0625rem/1.55 var(--disp);
  overflow-x:clip;
}
.ex-wrap{max-width:1160px;margin:0 auto;position:relative}
.ex-band{position:relative;padding:clamp(3.5rem,7vw,6rem) 1.25rem}

.ex-cta{display:flex;flex-wrap:wrap;gap:12px;margin:2rem 0 0}
.ex-btn{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1.65rem;border-radius:999px;background:var(--t-link);border:1px solid var(--t-link);color:#fff;font:600 1.02rem/1.2 var(--disp);text-decoration:none;cursor:pointer;transition:filter .2s,transform .2s}
[data-theme=neon] .ex-btn{color:#06100d}
.ex-btn.alt{background:transparent;color:var(--t-link);border-color:color-mix(in srgb,var(--fg) 32%,transparent)}
.ex-btn:hover{filter:brightness(1.1);transform:translateY(-1px);text-decoration:none}

/* 1. Hero: matches About & Work dark grid header */
.ex-hero{
  position:relative;
  background:#08090d;
  color:#f2f4f8;
  padding:clamp(4rem,9vw,7rem) 1.25rem clamp(3.5rem,7vw,5.5rem);
  overflow:hidden;
  isolation:isolate;
}
.ex-hero::before{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:-1;
  background:
    radial-gradient(60% 50% at 76% 36%,color-mix(in srgb,var(--ex-ink-link) 20%,transparent),transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px;
  pointer-events:none;
}
.ex-hero-in{max-width:1160px;margin:0 auto}
.ex-prompt{margin:0 0 1.1rem;font:500 1.05rem/1.2 var(--mono);color:#9aa3b2}
.ex-prompt span{color:#2ee6b8;margin-right:.5rem}
.ex-title{margin:0;max-width:16ch;font:700 clamp(2.8rem,6.6vw,5.6rem)/1.0 var(--disp);letter-spacing:-.048em;text-wrap:balance}
.ex-lede{margin:1.4rem 0 0;max-width:38ch;font:400 clamp(1.15rem,1.85vw,1.45rem)/1.45 var(--disp);color:#c4cad6}
.ex-hero .ex-btn{background:var(--ex-ink-link);border-color:var(--ex-ink-link);color:#06100d}
.ex-hero .ex-btn.alt{background:transparent;color:#f2f4f8;border-color:rgba(255,255,255,.35)}

/* 2. Two primary picture cards: exact About (.ab-card) & Homepage (.hm-door) visual style */
.ex-cards-band{
  background:var(--t-page);
  padding:var(--ex-seam) var(--ex-seam) 0;
}
.ex-cards-band .ex-wrap{max-width:none}
.ex-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--ex-seam);
}
.ex-card{
  position:relative;
  min-height:clamp(480px,54vw,660px);
  border-radius:0;
  overflow:hidden;
  background:#10131c;
  isolation:isolate;
}
.ex-card-link{
  position:absolute;
  inset:0;
  display:block;
  color:#fff;
  text-decoration:none;
}
.ex-card-link:hover{text-decoration:none}
.ex-card-link:focus-visible{outline:3px solid var(--ex-ink-link);outline-offset:-3px}

.ex-card-pics{
  position:absolute;
  inset:0;
  z-index:-2;
  display:block;
}
.ex-card-games .ex-card-pics{
  display:grid;
  grid-template-rows:repeat(3,1fr);
}
.ex-card-pics img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1) brightness(.92);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.ex-card:hover .ex-card-pics img,.ex-card-link:focus-visible .ex-card-pics img{
  transform:scale(1.04);
}
.ex-card-link::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(60% 45% at 92% 8%,rgba(7,8,12,.55) 0%,transparent 70%),
    linear-gradient(180deg,rgba(7,8,12,.28) 0%,rgba(7,8,12,.08) 32%,rgba(7,8,12,.68) 62%,rgba(7,8,12,.95) 100%);
}
.ex-card-tag{
  position:absolute;
  z-index:2;
  top:clamp(1.25rem,2.4vw,1.9rem);
  left:clamp(1.4rem,2.8vw,2.4rem);
  font:500 .95rem/1.2 var(--mono);
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 10px rgba(0,0,0,.85);
}
.ex-card-body{
  position:absolute;
  z-index:2;
  left:clamp(1.4rem,2.8vw,2.4rem);
  right:clamp(1.4rem,2.8vw,2.4rem);
  bottom:clamp(1.5rem,3vw,2.4rem);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.45rem;
}
.ex-card-body strong{
  font:700 clamp(2.6rem,4.8vw,4.2rem)/1 var(--disp);
  letter-spacing:-.045em;
  color:#fff;
}
.ex-card-body em{
  max-width:34ch;
  font:400 clamp(1.08rem,1.5vw,1.28rem)/1.4 var(--disp);
  font-style:normal;
  color:rgba(255,255,255,.9);
}
.ex-card-pills{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:.85rem;
}
.ex-pill{
  display:inline-flex;
  align-items:center;
  padding:.7rem 1.5rem;
  border-radius:999px;
  background:#f5f5f7;
  color:#111;
  font:500 1rem/1.2 var(--disp);
  transition:background .2s,transform .2s;
}
.ex-card:hover .ex-pill{
  background:var(--ex-ink-link);
  color:#06100d;
}
.ex-demo-trigger{
  position:absolute;
  z-index:3;
  right:clamp(1.4rem,2.8vw,2.4rem);
  top:clamp(1.15rem,2.2vw,1.75rem);
  padding:.55rem 1.15rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(8,9,13,.68);
  backdrop-filter:blur(8px);
  color:#f2f4f8;
  font:500 .9rem/1.2 var(--mono);
  cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.ex-demo-trigger:hover{
  border-color:var(--ex-ink-link);
  color:var(--ex-ink-link);
  background:rgba(8,9,13,.9);
}

/* 3. Interactive tools feature band (matches Work .wk-proj split) */
.ex-showcase{
  background:var(--t-soft);
  margin-top:var(--ex-seam);
  padding:clamp(3.5rem,7vw,5.5rem) 1.25rem;
}
.ex-split{
  display:grid;
  grid-template-columns:minmax(0,4.5fr) minmax(0,6.5fr);
  gap:clamp(1.8rem,4.5vw,4rem);
  align-items:center;
}
.ex-meta{margin:0 0 .6rem;font:500 1rem/1.3 var(--disp);color:var(--muted)}
.ex-n{font-family:var(--mono);margin-right:.5rem;color:var(--t-link)}
.ex-split-copy h2{margin:0;font:700 clamp(2.2rem,4.4vw,3.4rem)/1.03 var(--disp);letter-spacing:-.04em;text-wrap:balance}
.ex-line{margin:1rem 0 0;font:400 clamp(1.08rem,1.55vw,1.25rem)/1.48 var(--disp);color:color-mix(in srgb,var(--fg) 86%,transparent)}
.ex-spec{display:grid;gap:.85rem;margin:1.5rem 0 0;padding-top:1.1rem;border-top:1px dotted color-mix(in srgb,var(--fg) 30%,transparent)}
.ex-spec div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.75rem;align-items:baseline}
.ex-spec dt{font:600 .95rem/1.3 var(--mono);color:var(--muted)}
.ex-spec dd{margin:0;font:500 1.02rem/1.4 var(--disp)}
.ex-split-fig{margin:0}
.ex-fig-link{display:block;overflow:hidden;border-radius:0;border:1px solid color-mix(in srgb,var(--fg) 16%,transparent);background:#08090d;box-shadow:0 24px 60px -26px rgba(0,0,0,.55)}
.ex-fig-link img{display:block;width:100%;height:auto;border-radius:0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ex-fig-link:hover img{transform:scale(1.02)}
.ex-split-fig figcaption{margin-top:.75rem;font:400 .95rem/1.4 var(--disp);color:var(--muted)}

@media (max-width:920px){
  .ex-grid,.ex-split{grid-template-columns:1fr}
  .ex-card{min-height:clamp(380px,72vw,480px)}
}
@media (max-width:560px){
  .ex-spec div{grid-template-columns:1fr;gap:.15rem}
  .ex-demo-trigger{top:auto;bottom:1.55rem;right:1.4rem}
}