/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --bg:    #f5f3ef;
  --bg2:   #edeae4;
  --surf:  #e5e1d9;
  --surf2: #dedad1;
  --bord:  rgba(0,0,0,0.07);
  --bord2: rgba(0,0,0,0.13);
  --text:  #1a1814;
  --dim:   #6b6760;
  --dimr:  #a8a39b;
  --red:   #aa2217;
  --reds:  #cc3828;
  --grn:   #3d7a5e;
  --fc:    'DM Serif Display', serif;   /* display / headings */
  --fb:    'DM Sans', sans-serif;       /* body / UI          */
}

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--fb); font-weight:400; font-size:17px; line-height:1.65;
  overflow-x:hidden; cursor:none;
}
a { color:inherit; text-decoration:none; cursor:none }
button { cursor:none; font-family:var(--fb); border:none; background:none }
img { max-width:100%; display:block }

/* ── CURSOR ─────────────────────────────────────────────── */
#cur  { position:fixed; width:5px; height:5px; background:var(--red); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:transform .1s }
#curR { position:fixed; width:26px; height:26px; border:1px solid rgba(170,34,23,.25); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:all .15s ease }
body:hover #cur { opacity:1 }

/* ── NAV ────────────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 52px; height:60px;
  background:rgba(245,243,239,.96);
  border-bottom:1px solid var(--bord);
  backdrop-filter:blur(10px);
}
.nav-logo {
  font-family:var(--fb); font-size:15px; font-weight:500;
  letter-spacing:.04em; color:var(--red);
  transition:opacity .2s;
}
.nav-logo:hover { opacity:.7 }
.nav-links { display:flex; list-style:none; height:100% }
.nav-links li { height:100%; display:flex; align-items:center }
.nav-links a {
  display:flex; align-items:center; height:100%; padding:0 18px;
  font-family:var(--fb); font-size:13px; font-weight:500; letter-spacing:.02em;
  color:var(--dimr); transition:color .2s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:18px; right:18px;
  height:1px; background:var(--red);
  transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.nav-links a:hover { color:var(--text) }
.nav-links a.on { color:var(--text) }
.nav-links a.on::after { transform:scaleX(1) }
.nav-resume { color:var(--red) !important }
.nav-resume::after { display:none !important }
.nav-resume:hover { opacity:.7 }

/* ── SHARED ─────────────────────────────────────────────── */
.wrap { padding:100px 8vw; max-width:1320px; margin:0 auto }

.sh {
  display:flex; align-items:baseline; gap:20px; margin-bottom:52px;
  padding-bottom:20px; border-bottom:1px solid var(--bord2);
}
.sh-num { font-family:var(--fb); font-size:12px; font-weight:400; letter-spacing:.06em; color:var(--dimr) }
.sh-title { font-family:var(--fc); font-size:clamp(24px,3vw,38px); letter-spacing:.01em; line-height:1 }
.sh-title em { font-style:italic; color:var(--red) }

.pill {
  font-family:var(--fb); font-size:11px; font-weight:400;
  color:var(--dim); border:1px solid var(--bord2); padding:3px 10px; white-space:nowrap;
}

/* ── REVEAL ─────────────────────────────────────────────── */
.rv { opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease }
.rv.vis { opacity:1; transform:translateY(0) }

/* ── FOOTER ─────────────────────────────────────────────── */
footer {
  border-top:1px solid var(--bord); padding:28px 8vw;
  display:flex; align-items:center; justify-content:space-between;
}
.f-logo { font-family:var(--fb); font-size:13px; font-weight:500; color:var(--dimr) }
.f-copy { font-family:var(--fb); font-size:13px; font-weight:400; color:var(--dimr) }

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
#sec-hero {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:100vh; padding-top:60px;
  border-bottom:1px solid var(--bord2);
  position:relative; overflow:hidden;
}

/* background glow sits behind both columns */
.hg {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 50% 60% at 55% 40%, rgba(170,34,23,.04), transparent 70%);
}

/* ── left column ── */
.h-left {
  padding:56px 8vw 48px;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; z-index:1;
}

.h-eyebrow {
  font-family:var(--fb); font-size:10px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red); margin-bottom:22px;
  display:flex; align-items:center; gap:12px;
  opacity:0; animation:fu .6s ease .1s forwards;
}
.h-eyebrow::before { content:''; width:20px; height:1px; background:var(--red); flex-shrink:0 }

.h-name {
  font-family:var(--fc); font-size:clamp(64px,9vw,118px);
  letter-spacing:-.02em; line-height:.9;
  color:var(--text); margin-bottom:4px;
  opacity:0; animation:fu .7s ease .2s forwards;
}

/* last name row */
.h-name-row2 {
  display:flex; align-items:baseline;
  margin-bottom:36px;
  opacity:0; animation:fu .7s ease .3s forwards;
}
.h-name-sub {
  font-family:var(--fc); font-size:clamp(64px,9vw,118px);
  letter-spacing:-.02em; line-height:.9; font-style:italic;
  color:var(--red); flex-shrink:0;
}
.h-bio {
  display:flex; flex-direction:column; gap:6px;
  max-width:460px; margin-bottom:44px;
  opacity:0; animation:fu .7s ease .4s forwards;
}
.h-bio-l1, .h-bio-l2 {
  font-family:var(--fb); font-size:clamp(16px,1.5vw,20px);
  font-weight:300; line-height:1.6; color:var(--text); letter-spacing:.01em;
}
.h-bio-kw {
  font-weight:500;
  text-decoration:underline; text-decoration-color:var(--red);
  text-underline-offset:3px; text-decoration-thickness:1.5px;
}

/* divider + buttons block */
.h-statement {
  border-top:1px solid var(--bord2); padding-top:28px; margin-bottom:0;
  opacity:0; animation:fu .7s ease .45s forwards;
}

/* nav buttons replacing CTA */
.h-nav-btns {
  display:flex; gap:10px; flex-wrap:wrap;
  opacity:0; animation:fu .7s ease .6s forwards;
}
.h-nav-btn {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--fb); font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--red);
  border:1.5px solid var(--red); padding:8px 18px;
  transition:border-color .2s, color .2s, background .2s;
  cursor:none;
}
.h-nav-btn:hover { background:var(--red); color:#fff }
.h-nav-btn::after { content:'↓'; font-size:10px; opacity:.5; transition:opacity .2s, transform .2s }
.h-nav-btn:hover::after { opacity:1; transform:translateY(2px) }

/* ── right column — collage ── */
.h-right {
  position:relative; z-index:1; overflow:hidden;
  background:var(--bg);
  opacity:0; animation:fi .8s ease .5s forwards;
  min-height:100%;
  margin-left:-6vw; padding-left:6vw;
}
.h-collage {
  position:relative; width:100%; height:100%; min-height:500px;
}
@keyframes col-in {
  from { opacity:0; transform:var(--col-rot) translateY(18px); }
  to   { opacity:1; transform:var(--col-rot) translateY(0); }
}
/* each collage item is absolutely positioned with a slight random rotation */
.h-col-item {
  position:absolute;
  background:var(--surf);
  overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.1);
  pointer-events:none;
  opacity:0;
  animation:col-in .6s cubic-bezier(.22,.8,.36,1) forwards;
}
.h-col-item img {
  width:100%; height:auto; display:block;
}
/* placeholder when no image set */
.h-col-ph {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surf2); color:var(--dimr);
  font-family:var(--fc); font-size:28px;
}
.h-col-item.has-link { pointer-events:auto; cursor:pointer; }
.h-col-item.has-link a { display:block; }


/* scroll indicator */
.h-scroll {
  position:fixed; bottom:36px; right:52px;
  font-family:var(--fb); font-size:11px; font-weight:400; letter-spacing:.1em;
  color:var(--dimr); writing-mode:vertical-rl; display:flex; align-items:center; gap:10px;
  animation:fi 1.2s ease 1s both; z-index:10;
}
.h-scroll::before { content:''; width:1px; height:36px; background:var(--dimr); animation:gd 2.2s ease 1.2s infinite }
@keyframes gd{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes fu { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes fi { from{opacity:0} to{opacity:1} }

/* ═══════════════════════════════════════════════════════════
   GAMES — minimal list rows with thumbnail
═══════════════════════════════════════════════════════════ */
#sec-games { background:var(--bg) }

.g-subsection { margin-bottom:48px }
.g-subsection:last-child { margin-bottom:0 }

.g-sub-heading {
  font-family:var(--fb); font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--red); padding-bottom:14px;
  border-bottom:1px solid var(--bord2);
  display:flex; align-items:center; gap:10px;
}
.g-sub-heading::before { content:''; width:20px; height:1.5px; background:var(--red) }

.games-list { display:flex; flex-direction:column }

.g-row {
  border-bottom:1px solid var(--bord);
  cursor:none; position:relative;
}
.g-row::before {
  content:''; position:absolute; left:-8vw; right:-8vw; top:0; bottom:0;
  background:var(--bg2); opacity:0; transition:opacity .2s; z-index:0; pointer-events:none;
}
.g-row:hover::before { opacity:1 }
.g-row > * { position:relative; z-index:1 }

/* one-line summary */
.g-main {
  display:flex; align-items:center; gap:20px; padding:24px 0;
}
.g-year {
  font-family:var(--fb); font-size:13px; color:var(--dimr); font-weight:400;
  flex-shrink:0; width:40px;
}
.g-title {
  font-family:var(--fc); font-size:28px; letter-spacing:.01em;
  color:var(--text); line-height:1; transition:color .2s; flex-shrink:0;
}
.g-row:hover .g-title { color:var(--red) }
.g-sep { color:var(--dimr); font-size:16px; flex-shrink:0 }
.g-genre {
  font-family:var(--fb); font-size:14px; color:var(--dimr); flex:1;
}
.g-roles { display:flex; gap:6px; flex-wrap:wrap; flex-shrink:0 }
.g-row:hover .pill-role {
  color:var(--red); border-color:var(--red);
}
.g-arr {
  font-size:18px; color:var(--dimr); flex-shrink:0;
  transition:color .25s, transform .25s;
}
.g-row:hover .g-arr { color:var(--red); transform:translateX(4px) }

/* expanding preview */
.g-expand {
  display:flex; gap:28px; align-items:flex-start;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .38s cubic-bezier(.4,0,.2,1), opacity .28s ease, padding .38s;
}
.g-row:hover .g-expand {
  max-height:280px; opacity:1; padding-bottom:28px;
}
.g-expand-img { flex-shrink:0; width:220px }
.g-expand-img img { width:100%; display:block }
.g-expand-body { display:flex; flex-direction:column; gap:14px; padding-top:4px }
.g-expand-desc {
  font-family:var(--fb); font-size:18px; line-height:1.7; color:var(--dim);
}
.g-expand-meta { display:flex; flex-direction:column; gap:10px }
.g-meta-item {
  display:flex; gap:14px; align-items:baseline;
}
.g-meta-label {
  font-family:var(--fb); font-size:11px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dimr); flex-shrink:0; width:38px;
}
.g-meta-pills { display:flex; gap:6px; flex-wrap:wrap }
.g-meta-val {
  font-family:var(--fb); font-size:14px; color:var(--dim);
}

/* role pills */
.pill-role {
  font-family:var(--fb); font-size:11px; font-weight:500; letter-spacing:.03em;
  color:var(--dim); border:1px solid var(--bord2); padding:4px 10px; white-space:nowrap;
  transition:color .2s, border-color .2s;
}
/* tools / mode pills — used on detail pages and expand panel */
.pill-tool {
  font-family:var(--fb); font-size:13px; font-weight:400;
  color:var(--dim); border:1px solid var(--bord2); padding:6px 14px; white-space:nowrap;
}
.pill-mode {
  font-family:var(--fb); font-size:13px; font-weight:500;
  color:var(--red); border:1.5px solid var(--red); padding:4px 12px; white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════
   WRITINGS
═══════════════════════════════════════════════════════════ */
#sec-writings { background:var(--bg2) }

.w-list { display:flex; flex-direction:column }
.w-row {
  display:grid; grid-template-columns:140px 1fr 36px;
  gap:28px; padding:28px 0; border-bottom:1px solid var(--bord);
  position:relative; cursor:none;
}
.w-pdf-wrap {
  grid-column:1 / -1;
  max-height:0; overflow:hidden;
  transition:max-height .4s ease;
}
.w-row.w-pdf-open .w-pdf-wrap { max-height:700px }
.w-pdf { width:100%; height:680px; border:none; display:block }
.w-row::before {
  content:''; position:absolute; left:-8vw; right:-8vw; top:0; bottom:0;
  background:var(--surf); opacity:0; transition:opacity .2s; z-index:0; pointer-events:none;
}
.w-row:hover::before { opacity:1 }
.w-row > * { position:relative; z-index:1 }
.w-meta { padding-top:3px }
.w-game { font-family:var(--fb); font-size:12px; font-weight:500; letter-spacing:.02em; color:var(--grn) }
.w-type { font-family:var(--fb); font-size:12px; font-weight:400; color:var(--dimr); margin-top:4px }
.w-title { font-family:var(--fc); font-size:20px; letter-spacing:.01em; color:var(--text); line-height:1.15; margin-bottom:10px; transition:color .2s }
.w-row:hover .w-title { color:var(--red) }
.w-excerpt { font-size:14px; color:var(--dim); line-height:1.7 }
.w-arrow { display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--dimr); transition:all .25s }
.w-row:hover .w-arrow { color:var(--red); transform:translateX(4px) }

/* ═══════════════════════════════════════════════════════════
   MUSIC
═══════════════════════════════════════════════════════════ */
#sec-music { background:var(--bg) }

.m-list { display:flex; flex-direction:column }
.m-row {
  display:grid; grid-template-columns:1fr auto;
  gap:24px; padding:20px 0; border-bottom:1px solid var(--bord);
  align-items:center; position:relative;
}
.m-row::before {
  content:''; position:absolute; left:-8vw; right:-8vw; top:0; bottom:0;
  background:var(--bg2); opacity:0; transition:opacity .2s; z-index:0; pointer-events:none;
}
.m-row:hover::before { opacity:1 }
.m-row > * { position:relative; z-index:1 }
.m-info { display:flex; align-items:baseline; gap:20px; flex-wrap:wrap }
.m-title { font-family:var(--fc); font-size:17px; letter-spacing:.01em; color:var(--text) }
.m-game { font-family:var(--fb); font-size:12px; font-weight:500; color:var(--grn) }
.m-desc-row { font-size:14px; color:var(--dim); margin-top:4px }
.m-controls { display:flex; align-items:center; gap:12px; flex-shrink:0 }
.pbtn {
  width:32px; height:32px; border:1px solid var(--bord2); border-radius:50%;
  background:none; color:var(--dim); cursor:none;
  display:flex; align-items:center; justify-content:center; font-size:9px;
  transition:all .2s; flex-shrink:0;
}
.pbtn:hover { border-color:var(--red); color:var(--red) }
.pbtn.playing { border-color:var(--red); color:var(--red) }
.m-bar { width:120px; height:1px; background:var(--bord2); position:relative }
.m-fill { position:absolute; left:0; top:0; bottom:0; background:var(--grn); width:0%; transition:width .1s }
.m-dur { font-family:var(--fb); font-size:12px; color:var(--dimr); min-width:32px; text-align:right }
.m-ext-link {
  font-family:var(--fb); font-size:13px; font-weight:500;
  color:var(--dimr); transition:color .2s; display:flex; align-items:center; gap:5px;
}
.m-ext-link:hover { color:var(--red) }

/* ═══════════════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════════════ */
#sec-about { background:var(--bg2) }
.ab-grid { display:grid; grid-template-columns:1fr 300px; gap:72px; align-items:start }
.ab-text { font-size:clamp(16px,1.6vw,19px); line-height:1.8; color:var(--text) }
.ab-text em { font-style:italic; color:var(--red) }
.ab-kw { font-weight:500; color:var(--text); text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:3px; text-decoration-thickness:1px }
.ab-text p+p { margin-top:20px }
.ab-block { padding:16px 0; border-bottom:1px solid var(--bord) }
.ab-lbl { font-family:var(--fb); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--red); margin-bottom:6px }
.ab-val { font-size:14px; color:var(--dim); line-height:1.6 }
.ab-tools { display:flex; flex-wrap:wrap; gap:6px }
.ab-edu { display:flex; flex-direction:column; gap:10px }
.ab-edu-item { display:flex; flex-direction:column; gap:2px }
.ab-edu-deg { font-size:14px; color:var(--text); font-weight:500 }
.ab-edu-school { font-size:13px; color:var(--dim) }
.ab-edu-year { font-size:12px; color:var(--dimr) }
.ab-socials { margin-top:24px; display:flex; flex-direction:column; gap:8px }
.soc { display:flex; align-items:center; gap:12px; color:var(--dim); font-family:var(--fb); font-size:13px; font-weight:500; transition:color .2s }
.soc:hover { color:var(--red) }
.soc-line { width:16px; height:1px; background:currentColor; transition:width .25s; flex-shrink:0 }
.soc:hover .soc-line { width:28px }

/* ═══════════════════════════════════════════════════════════
   GAME DETAIL PAGE
═══════════════════════════════════════════════════════════ */
.back-bar {
  position:sticky; top:0; z-index:10;
  background:rgba(245,243,239,.97); border-bottom:1px solid var(--bord);
  backdrop-filter:blur(10px);
  padding:0 8vw; height:48px;
  display:flex; align-items:center;
}
.back-btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--fb); font-size:13px; font-weight:500; letter-spacing:.02em;
  color:var(--dim); transition:color .2s;
}
.back-btn:hover { color:var(--red) }
.b-arr { width:22px; height:1px; background:currentColor; position:relative; transition:width .25s }
.back-btn:hover .b-arr { width:34px }
.b-arr::before { content:''; position:absolute; left:0; top:-3px; width:6px; height:6px; border-left:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:rotate(-45deg) }

.d-hero { width:100%; aspect-ratio:3/1; max-height:320px; overflow:hidden; position:relative; background:var(--surf) }
.d-hero img { width:100%; height:100%; object-fit:cover; filter:brightness(.8) saturate(.85) }
.d-hero-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--surf2) }
.d-hero-ph span { font-family:var(--fc); font-size:clamp(40px,7vw,100px); color:var(--dimr); opacity:.15; user-select:none }
.d-hero-ov { position:absolute; inset:0; background:linear-gradient(to top, var(--bg) 0%, transparent 50%) }

.d-overview { padding:40px 8vw 0; max-width:1320px; margin:0 auto }
.d-ov-inner { display:grid; grid-template-columns:1fr 280px; gap:60px; align-items:start }
.d-genre-tag { font-family:var(--fb); font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--red); display:flex; align-items:center; gap:10px; margin-bottom:14px }
.d-genre-tag::before { content:''; width:20px; height:1px; background:var(--red) }
.d-title { font-family:var(--fc); font-size:clamp(32px,5vw,68px); line-height:.95; margin-bottom:36px; color:var(--text) }
.d-title span { color:var(--red) }
.d-tagline { font-size:18px; color:var(--dim); line-height:1.75; margin-bottom:28px; max-width:560px }
.d-links-ov { display:flex; gap:10px; flex-wrap:wrap }
.dlnk { display:inline-flex; align-items:center; padding:11px 22px; font-family:var(--fb); font-size:13px; font-weight:500; border:1px solid; transition:all .2s }
.dlnk.primary { background:var(--red); border-color:var(--red); color:#fff }
.dlnk.primary:hover { background:var(--reds); border-color:var(--reds) }
.dlnk.secondary { background:transparent; border-color:var(--bord2); color:var(--dim) }
.dlnk.secondary:hover { border-color:var(--red); color:var(--red) }

/* trailer embed in overview */
.ov-trailer { margin:24px 0 28px }
.ov-trailer-wrap { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; background:var(--surf); max-width:560px }
.ov-trailer-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0 }

.ov-trailer-audio { margin:24px 0 28px }
.ov-trailer-audio audio { width:100%; max-width:560px; display:block }
.ov-trailer-audio-cap { margin-bottom:8px; font-size:13px; color:var(--dim); line-height:1.5 }

.d-sb-item { padding:16px 0; border-bottom:1px solid var(--bord) }
.d-sb-item:first-child { padding-top:0 }
.d-sb-lbl { font-family:var(--fb); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--red); margin-bottom:8px }
.d-sb-val { font-size:15px; color:var(--dim); line-height:1.5 }
.d-sb-pills { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px }
.d-sb-pills .pill { font-size:13px; padding:4px 12px }

.sections-wrap { max-width:1320px; margin:0 auto; padding:0 8vw 100px }
.sec-divider { height:1px; background:var(--bord); margin:60px 0 }
.sec-title-el {
  font-family:var(--fc); font-size:clamp(18px,2vw,26px);
  color:var(--text); margin-bottom:24px; display:flex; align-items:center; gap:14px;
}
.sec-title-el::before { content:''; width:16px; height:2px; background:var(--red); flex-shrink:0 }
.sec-body { font-size:16px; color:var(--dim); line-height:1.85; max-width:720px }
.sec-body p+p { margin-top:20px }

/* subsections inside a text section */
.sec-subs { margin-top:36px; display:flex; flex-direction:column; gap:40px; max-width:720px }
.sec-sub-title {
  font-family:var(--fb); font-size:15px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text);
  margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.sec-sub-title::before { content:''; width:8px; height:8px; border:1.5px solid var(--red); flex-shrink:0 }
.sec-sub-body { font-size:16px; color:var(--dim); line-height:1.85; padding-left:20px; border-left:1px solid var(--bord) }
.sec-sub-body p+p { margin-top:16px }
.sec-sub-body .sec-sub-img { margin-top:20px }
.sec-sub-img { margin-top:24px; margin-bottom:28px }
.sec-sub-img img { max-width:100%; border-radius:4px; display:block }
.sec-body ul, .sec-sub-body ul { margin:4px 0; padding-left:18px; display:flex; flex-direction:column; gap:10px; list-style:none }
.sec-body li, .sec-sub-body li { position:relative; padding-left:14px; line-height:1.6 }
.sec-body li::before, .sec-sub-body li::before { content:'–'; position:absolute; left:0; color:var(--dimr) }
.sec-body strong, .sec-sub-body strong { color:var(--text); font-weight:600 }
.kw { color:var(--text); font-weight:500; text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:3px; text-decoration-thickness:1px }
.sec-body em, .sec-sub-body em { font-style:italic }
.sec-sub-body a, .sec-body a {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border:1.5px solid var(--red);
  color:var(--red); font-family:var(--fb); font-size:13px; font-weight:500;
  text-decoration:none; letter-spacing:.03em;
  transition:background .18s, color .18s;
}
.sec-sub-body a::before, .sec-body a::before { content:'↗'; font-size:14px }
.sec-sub-body a:hover, .sec-body a:hover { background:var(--red); color:#fff }

.blocks-wrap { display:flex; flex-direction:column; gap:48px }

/* youtube embed */
.sec-video { max-width:860px }
.doc-link-group { display:inline-flex; flex-direction:column; gap:4px }
.doc-link-wrap { display:flex; flex-direction:column; gap:0 }
.doc-link {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:12px 20px; border:1.5px solid var(--red);
  text-decoration:none; color:var(--red);
  font-family:var(--fb); font-size:13px; font-weight:500; letter-spacing:.06em;
  transition:background .18s, color .18s;
}
.doc-link:hover { background:var(--red); color:#fff }
.doc-link-icon { font-size:15px; transition:inherit }
.doc-link-caption {
  font-family:var(--fb); font-size:11px; color:var(--dimr);
  padding:0 4px; margin-top:4px;
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .2s, max-height .2s;
}

.ev-list { display:flex; flex-direction:column; gap:0; max-width:720px }
.ev-row {
  display:flex; align-items:baseline; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--bord);
  font-family:var(--fb); font-size:14px;
}
.ev-row:first-child { border-top:1px solid var(--bord) }
.ev-name { color:var(--red); font-weight:500; flex-shrink:0 }
.ev-note { color:var(--dim); font-size:13px; flex:1 }
.ev-date { color:var(--dimr); font-size:12px; margin-left:auto; flex-shrink:0 }
.doc-link-wrap:hover .doc-link-caption { opacity:1; max-height:40px }

.yt-wrap { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; background:var(--surf) }
.yt-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0 }
.sit-caption { margin-top:10px; font-family:var(--fb); font-size:13px; color:var(--dim); line-height:1.5 }

.sec-imgtxt { display:block }
.sit-cols { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start }
.sit-cols.img-left  .sit-text { order:1 }
.sit-cols.img-left  .sit-img  { order:0 }
.sit-cols.img-right .sit-text { order:0 }
.sit-cols.img-right .sit-img  { order:1 }
.sit-img-inner { overflow:hidden; background:var(--surf); border:1px solid var(--bord) }
.sit-img-inner img { width:100%; height:100%; object-fit:cover }
.sit-img-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--surf2); color:var(--dimr); font-size:28px }
.sit-caption { margin-top:8px; font-family:var(--fb); font-size:13px; color:var(--dim); line-height:1.5 }

/* video-text: same two-column layout but with YouTube embed */
.sec-vidtxt { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start }
.sec-vidtxt.vid-left  .sit-text { order:1 }
.sec-vidtxt.vid-left  .sit-vid  { order:0 }
.sec-vidtxt.vid-right .sit-text { order:0 }
.sec-vidtxt.vid-right .sit-vid  { order:1 }
.sec-video-stack { display:flex; flex-direction:column; gap:20px }
.sit-yt-wrap { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; background:var(--surf) }
.sit-yt-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0 }

/* ── GALLERY SLIDESHOW ───────────────────────────────────── */
.gal-empty { padding:60px 40px; text-align:center; font-family:var(--fb); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dimr); border:1px dashed var(--bord2) }
.gal-slideshow { position:relative; user-select:none }
.gal-track-wrap { overflow:hidden; position:relative; width:100% }
.gal-track { display:flex; align-items:stretch; will-change:transform; transition:transform .55s cubic-bezier(.4,0,.2,1) }
.gal-slide { flex-shrink:0; box-sizing:border-box; transition:opacity .4s, transform .4s }
.gal-slide img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.gal-slide-ph { width:100%; aspect-ratio:16/9; background:var(--surf); display:flex; align-items:center; justify-content:center; color:var(--dimr) }
.gal-slide.s-active { opacity:1; transform:scale(1) }
.gal-slide.s-prev, .gal-slide.s-next { opacity:.3; transform:scale(.96); cursor:pointer }
.gal-slide.s-hidden { opacity:0; pointer-events:none }
.gal-caption-el { font-family:var(--fb); font-size:15px; color:var(--dim); min-height:20px; text-align:center; margin-top:16px; line-height:1.5 }
.gal-info { display:flex; align-items:center; justify-content:space-between; margin-top:10px }
.gal-dots { display:flex; gap:12px; align-items:center }
.gal-dot { width:6px; height:6px; border-radius:50%; background:var(--bord2); border:none; padding:0; cursor:none; transition:background .25s, transform .25s }
.gal-dot.on { background:var(--red); transform:scale(1.3) }
.gal-arrows { display:flex; gap:8px }
.gal-arr { width:36px; height:36px; border:1px solid var(--bord2); background:var(--bg); display:flex; align-items:center; justify-content:center; cursor:none; transition:border-color .2s, color .2s; color:var(--dimr) }
.gal-arr:hover { border-color:var(--red); color:var(--red) }
.gal-arr svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.5 }
.gal-progress { height:2px; background:var(--bord2); margin-top:12px; overflow:hidden }
.gal-progress-bar { height:100%; background:var(--red); width:0% }

/* ── PRESS & EVENTS SECTION ──────────────────────────────── */
.pe-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:60px; align-items:start }
@media(max-width:860px) {
  .pe-grid { grid-template-columns:1fr; gap:48px }
  .press-row { grid-template-columns:1fr auto; gap:12px }
  .press-pub { display:none }
  .press-date { display:none }
}

/* ── ABOUT SUBSECTIONS ───────────────────────────────────── */
.ab-sub-title {
  font-family:var(--fc); font-size:clamp(16px,1.6vw,22px); font-weight:400;
  color:var(--text); margin-bottom:28px;
}


/* ── PRESS ───────────────────────────────────────────────── */
.press-row {
  display:grid; grid-template-columns:160px 1fr auto auto;
  align-items:center; gap:24px;
  padding:18px 0; border-bottom:1px solid var(--bord);
  text-decoration:none; color:inherit;
  transition:background .15s;
}
.press-row:first-child { border-top:1px solid var(--bord) }
.press-row:hover { background:var(--surf) }
.press-pub { font-family:var(--fb); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--red) }
.press-title { font-family:var(--fb); font-size:15px; color:var(--text) }
.press-date { font-family:var(--fb); font-size:12px; color:var(--dimr); white-space:nowrap }
.press-arr { font-size:14px; color:var(--dimr); transition:color .15s }
.press-row:hover .press-arr { color:var(--red) }

/* ── EXHIBITIONS ─────────────────────────────────────────── */
.exh-row {
  display:flex; align-items:baseline; justify-content:space-between;
  padding:18px 0; border-bottom:1px solid var(--bord);
}
.exh-row:first-child { border-top:1px solid var(--bord) }
.exh-main { display:flex; flex-direction:column; gap:2px }
.exh-title { font-family:var(--fb); font-size:15px; color:var(--text) }
.exh-game { font-family:var(--fb); font-size:12px; color:var(--red) }
.exh-right { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0 }
.exh-location { font-family:var(--fb); font-size:12px; color:var(--dimr) }
.exh-date { font-family:var(--fb); font-size:12px; color:var(--dimr) }

/* ── GAME LOOP DIAGRAM ───────────────────────────────────── */
.gl-wrap { width:100%; overflow-x:auto; padding-bottom:8px }
.gl-wrap svg { display:block; font-family:'DM Sans',sans-serif; overflow:visible }

.credits-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); border:1px solid var(--bord) }
.credit-item { padding:16px 20px; border-bottom:1px solid var(--bord); border-right:1px solid var(--bord) }
.credit-role { font-family:var(--fc); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin-bottom:4px }
.credit-name { font-size:13px; color:var(--text) }

/* ── DETAIL SIDE NAV ─────────────────────────────────────── */
.d-layout { display:flex; align-items:flex-start }
.d-sidenav {
  width:220px; flex-shrink:0;
  position:sticky; top:64px;
  align-self:flex-start;
  padding:28px 16px 32px 40px;
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
}
.d-body { flex:1; min-width:0 }

.dnav-section { width:100%; margin-bottom:0 }
.dnav-item {
  display:flex; align-items:center; gap:10px;
  width:100%;
  font-family:var(--fb); font-size:13px; font-weight:500; letter-spacing:.03em;
  color:var(--dimr);
  padding:7px 0; text-align:left;
  background:none; border:none; cursor:none;
  transition:color .2s;
  white-space:nowrap;
}
.dnav-item::before {
  content:''; width:16px; height:1px; flex-shrink:0;
  background:var(--bord2); transition:background .2s;
}
.dnav-item:hover { color:var(--text) }
.dnav-item:hover::before { background:var(--dim) }
.dnav-item.active { color:var(--text) }
.dnav-item.active::before { background:var(--red) }

.dnav-subs { display:flex; flex-direction:column; padding-left:26px; margin-top:1px; margin-bottom:2px }
.dnav-sub-item {
  font-family:var(--fb); font-size:12px; font-weight:400;
  color:var(--dimr);
  padding:3px 0 3px 12px; text-align:left;
  background:none; border:none; border-left:1px solid var(--bord2); cursor:none;
  transition:color .2s, border-color .2s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dnav-sub-item:hover { color:var(--text) }
.dnav-sub-item.active { color:var(--red); border-left-color:var(--red) }

/* ── WRITING DETAIL PAGE ─────────────────────────────────── */
.wp-hero {
  padding:80px 8vw 60px; max-width:1320px; margin:0 auto;
}
.wp-type { font-family:var(--fb); font-size:12px; font-weight:500; letter-spacing:.06em; color:var(--red); display:flex; align-items:center; gap:10px; margin-bottom:20px }
.wp-type::before { content:''; width:20px; height:1px; background:var(--red) }
.wp-game { font-family:var(--fb); font-size:13px; font-weight:500; color:var(--grn); margin-bottom:28px }
.wp-title { font-family:var(--fc); font-size:clamp(28px,5vw,60px); line-height:1; margin-bottom:28px; color:var(--text) }
.wp-excerpt {
  font-size:18px; color:var(--dim); line-height:1.8; max-width:640px;
  padding:28px 0 28px 28px; border-left:3px solid var(--bord2);
  margin-bottom:36px;
}
.wp-divider { height:1px; background:var(--bord); margin:0 8vw 60px }
.wp-content { max-width:720px; margin:0 auto; padding:0 8vw 100px }

/* ── Yarn embed ───────────────────────────────────────────── */
.yarn-embed { display:flex; flex-direction:column; gap:48px }
.yarn-loading { font-family:var(--fb); font-size:15px; color:var(--dimr); padding:20px 0 }
.yn-node { border:1px solid var(--bord); overflow:hidden }
.yn-node-title { font-family:var(--fb); font-size:14px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--red); background:var(--surf); padding:14px 28px; border-bottom:1px solid var(--bord) }
.yn-body { margin:0; padding:32px 28px; font-family:'Courier New',monospace; font-size:16px; line-height:2; overflow-x:auto; white-space:pre-wrap; word-break:break-word }
.yn-line    { color:var(--text) }
.yn-option  { color:var(--red); font-weight:500 }
.yn-command { color:#6b83aa }
.yn-comment { color:var(--dimr); font-style:italic }
.yn-tag     { color:#8a6a2a }
.yn-cond    { color:#6b83aa; font-style:italic }
.yn-blank   { display:block }
.wp-content p { font-size:17px; color:var(--text); line-height:1.85; margin-bottom:24px }
.wp-content h2 { font-family:var(--fc); font-size:clamp(20px,2.5vw,30px); color:var(--text); margin:48px 0 20px; display:flex; align-items:center; gap:14px }
.wp-content h2::before { content:''; width:16px; height:2px; background:var(--red); flex-shrink:0 }
.wp-content h3 { font-family:var(--fb); font-size:15px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text); margin:32px 0 12px }
.wp-file-link { display:inline-flex; align-items:center; gap:10px; padding:12px 24px; font-family:var(--fb); font-size:13px; font-weight:500; border:1px solid var(--red); color:var(--red); transition:all .2s }
.wp-file-link:hover { background:var(--red); color:#fff }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:1100px) { .d-sidenav { display:none } }
@media(max-width:960px) {
  nav { padding:0 24px }
  .wrap { padding:80px 5vw }
  #sec-hero { grid-template-columns:1fr; padding:0 }
  .h-right { display:none }
  .h-left { padding:80px 5vw 48px }
  .h-name, .h-name-sub { font-size:clamp(52px,12vw,80px) }
.d-ov-inner { grid-template-columns:1fr }
  .d-overview { padding:32px 5vw 0 }
  .sections-wrap { padding:0 5vw 80px }
  .sit-cols { grid-template-columns:1fr }
  .sit-cols .sit-text, .sit-cols .sit-img { order:unset !important }
  .sec-vidtxt { grid-template-columns:1fr }
  .sec-vidtxt .sit-text, .sec-vidtxt .sit-vid { order:unset !important }
  .ab-grid { grid-template-columns:1fr; gap:40px }
  .w-row { grid-template-columns:120px 1fr; gap:20px }
  .w-arrow { display:none }
  .back-bar { padding:0 5vw }
  .wp-hero { padding:60px 5vw 40px }
  .wp-content { padding:0 5vw 80px }
  .wp-divider { margin:0 5vw 40px }
}
@media(max-width:640px) {
  nav { height:52px; padding:0 16px }
  .nav-links a { padding:0 10px; font-size:9px }
  .h-scroll { display:none }
  footer { flex-direction:column; gap:8px; text-align:center; padding:24px 5vw }
  .g-year { display:none }
  .g-arr { display:none }
  .g-roles { display:none }
  .g-expand { display:none }
  .w-row { grid-template-columns:1fr }
  .w-meta { display:none }
  .m-row { grid-template-columns:1fr }
  .m-controls { margin-top:8px }
  .d-hero { aspect-ratio:16/9 }
}