/* ============================================================
   scriptodom.com — shared stylesheet
   Design language is fixed (see PROJECT_BRIEF.md). Do not
   redesign; extend by adding page-specific rules at the bottom
   of this file or in a per-page <style> block.

   Fonts:   Fraunces (serif, headings) + IBM Plex Sans (body/UI)
   Palette: ink #12100E · parchment #EDE6DA · gold #C9A24B
   ============================================================ */

/* Fonts are loaded via <link> in each page's <head> (with preconnect) —
   faster than an @import here. Faces used: Fraunces 400/500/600 + Fraunces
   italic 400, IBM Plex Sans 400/500/600. */

:root{
  --ink:#12100E;
  --panel:#1C1916;
  --panel-2:#221F1B;
  --line:#38332B;
  --parchment:#EDE6DA;
  --muted:#A79C8C;
  --gold:#C9A24B;
  --gold-dim:#8C7638;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--parchment);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:17px;
  line-height:1.6;
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  margin:0;
  color:var(--parchment);
}
a{ color:inherit; }
img{ max-width:100%; display:block; }

/* ---------- Nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px;
  background:linear-gradient(to bottom, rgba(18,16,14,0.75), rgba(18,16,14,0.35) 70%, transparent);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.brand{
  font-family:'Fraunces', serif;
  font-size:20px;
  letter-spacing:0.02em;
}
nav ul{
  list-style:none; display:flex; gap:34px; margin:0; padding:0;
}
nav > ul > li{ position:relative; font-size:15px; }
nav a{ text-decoration:none; }
nav a:hover{ color:var(--gold); }
.has-drop:hover .dropdown{ display:block; }
.dropdown{
  display:none;
  position:absolute; top:100%; left:0;
  background:var(--panel); border:1px solid var(--line);
  min-width:220px; padding:12px 0 8px;
}
/* transparent bridge over the trigger/menu seam so hover can't drop out
   while the pointer travels from the nav item down into the list */
.dropdown::before{
  content:"";
  position:absolute; left:0; right:0; top:-8px;
  height:8px;
}
.dropdown li{ padding:0; }
.dropdown a{
  display:block; padding:10px 16px; font-size:14px; color:var(--muted);
}
.dropdown a:hover{ color:var(--gold); background:var(--panel-2); }

/* ---------- Fixed video backdrop (stays put behind the whole page) ---------- */
.video-backdrop{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  overflow:hidden;
}
.video-backdrop video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(0.85) brightness(0.72);
}
.video-backdrop::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(18,16,14,0.35) 0%, rgba(18,16,14,0.5) 40%, rgba(18,16,14,0.7) 100%);
}

/* Everything else scrolls on top of the fixed video */
.page{
  position:relative;
  z-index:2;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  height:100vh;
  min-height:560px;
  display:flex;
  align-items:flex-end;
}
.hero-content{
  position:relative; z-index:2;
  padding:0 40px 72px;
  max-width:760px;
  opacity:0;
  animation:rise 900ms ease-out 200ms forwards;
}
@keyframes rise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero-content .role{
  font-size:15px; color:var(--gold); margin-bottom:14px; font-family:'IBM Plex Sans', sans-serif;
}
.hero-content h1{
  font-size:clamp(40px, 6vw, 68px);
  line-height:1.05;
  margin-bottom:18px;
}
.hero-content p{
  font-size:19px; color:var(--muted); max-width:520px;
}

@media (prefers-reduced-motion: reduce){
  .hero-content{ animation:none; opacity:1; }
}

/* ---------- Sections ---------- */
section{
  padding:64px 40px;
  max-width:760px;
  margin:0 auto;
  background:rgba(18,16,14,0.62);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
section.wide{ max-width:1040px; }

.about p{ margin:0 0 20px; color:var(--parchment); font-size:18px; }
.about p.lede{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:23px;
  color:var(--parchment);
  line-height:1.5;
  margin-bottom:28px;
}

/* ---------- Awards ---------- */
.awards h2{ font-size:28px; margin-bottom:32px; }
.award-row{
  display:flex; flex-wrap:wrap; gap:16px;
}
.badge{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line);
  padding:14px 18px;
  background:var(--panel);
  min-width:280px; flex:1;
}
.badge svg{ flex-shrink:0; width:28px; height:28px; color:var(--gold); }
.badge .b-title{ font-size:14.5px; color:var(--parchment); font-weight:500; }
.badge .b-sub{ font-size:13px; color:var(--muted); margin-top:2px; }

/* ---------- Work grid ---------- */
.work h2{ font-size:28px; margin-bottom:36px; }
.work > p{ color:var(--muted); margin:0 0 40px; font-size:16px; }
.grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
@media (max-width:980px){ .grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .grid{ grid-template-columns:1fr; } }
.card{
  border:1px solid var(--line);
  background:var(--panel);
  text-decoration:none;
  display:block;
}
.card .thumb{
  height:170px;
  display:flex; align-items:flex-end;
  padding:16px;
  background-color:var(--ink);
  background-size:cover;            /* fill the frame; per-card focal point set inline */
  background-position:center;
  background-repeat:no-repeat;
  /* uniform bottom scrim so the category chip always reads on the same base,
     whatever the underlying art looks like */
  box-shadow:inset 0 -70px 45px -35px rgba(18,16,14,0.95);
}
.card .thumb span{
  font-family:'Fraunces', serif; font-size:13px; color:var(--gold);
  background:rgba(18,16,14,0.75); padding:3px 9px;
}
/* .thumb.aaa / .mobile / .mobile2 / .indie were colour-gradient placeholders
   in the mockup. Every card now has a real image, so the tints are gone; the
   category class stays on the div only as a hook. Each card sets its own
   `background-image` and `background-position` inline (the focal point of that
   game's key art). NOTE: never use the `background:` shorthand for a .thumb —
   it silently resets background-size and undoes the `cover` on `.card .thumb`. */
.card .body{ padding:18px 18px 22px; }
.card h3{ font-size:19px; margin-bottom:6px; }
.card p{ font-size:14.5px; color:var(--muted); margin:0; }

/* ---------- Footer ---------- */
footer{
  padding:60px 40px 80px;
  text-align:left;
  max-width:760px;
  margin:0 auto;
  border-top:1px solid var(--line);
  background:rgba(18,16,14,0.62);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
footer p{ color:var(--muted); font-size:15px; margin:0 0 6px; }
footer a{ color:var(--gold); text-decoration:none; }

.btn-linkedin{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:16px;
  padding:10px 18px;
  border:1px solid var(--line);
  color:var(--parchment);
  font-size:14.5px;
  letter-spacing:0.01em;
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
.btn-linkedin svg{ width:17px; height:17px; flex-shrink:0; }
.btn-linkedin:hover{
  border-color:var(--gold);
  color:var(--gold);
  background:var(--panel);
}

/* ---------- Mobile navigation ---------- */
/* Desktop is unchanged: the toggle is hidden, the nav row behaves as before.
   Below 880px the row is replaced by a hamburger button that opens a
   full-width panel under the header, with the AA/Mobile/Indie sub-menus
   shown expanded (no hover on touch). */

.nav-toggle{
  display:none;                 /* shown only in the media query below */
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px; height:40px;
  padding:8px;
  background:none;
  border:none;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:100%; height:2px;
  background:var(--parchment);
  transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:880px){
  header{ padding:18px 24px; }

  .nav-toggle{ display:flex; }

  nav#site-nav{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    max-height:80vh;
    overflow-y:auto;
    background:var(--panel);           /* solid, matching the desktop dropdown */
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  nav#site-nav.open{ display:block; }

  nav#site-nav ul{ flex-direction:column; gap:0; }
  nav#site-nav > ul > li{
    font-size:16px;
    border-top:1px solid var(--line);
  }
  nav#site-nav > ul > li:first-child{ border-top:none; }
  nav#site-nav a{ display:block; padding:14px 24px; }

  /* parent of a sub-menu becomes a gold group label */
  .has-drop > a{ color:var(--gold); }

  /* sub-menus: always visible, statically stacked and indented */
  .dropdown{
    display:block;
    position:static;
    min-width:0;
    padding:0;
    border:none;
    background:transparent;
  }
  .dropdown a{ padding:12px 24px 12px 40px; color:var(--muted); }
}

/* ============================================================
   Project pages (projects/*.html)
   Shares the fixed video backdrop, frosted panels, and nav
   with the homepage. Adds: a shorter hero, a prose column,
   and the click-to-load video facade used for scene clips.
   ============================================================ */

.brand a{ text-decoration:none; color:inherit; }

/* Static backdrop for project pages: a single fixed, darkened still that the
   frosted panels scroll over — same idea as the homepage video backdrop, but
   one distinct key image per project rather than a second looping video. */
.image-backdrop{
  position:fixed; inset:0;
  z-index:0;
  overflow:hidden;
}
.image-backdrop img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(0.85) brightness(0.6);
  /* very slow zoom in and out for a little life behind the static panels.
     Scale only ever goes >= 1 so the image never pulls away from the edges. */
  will-change:transform;
  animation:backdrop-drift 44s ease-in-out infinite;
}
@keyframes backdrop-drift{
  from{ transform:scale(1); }
  50%{ transform:scale(1.08); }
  to{ transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .image-backdrop img{ animation:none; }
}
.image-backdrop::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(18,16,14,0.4) 0%, rgba(18,16,14,0.58) 40%, rgba(18,16,14,0.78) 100%);
}

/* Dark Quest 3's shot needed noticeably more lift than the others to read clearly. */
.image-backdrop.brighter img{ filter:saturate(0.85) brightness(0.85); }
.image-backdrop.brighter::after{
  background:linear-gradient(to bottom, rgba(18,16,14,0.22) 0%, rgba(18,16,14,0.38) 40%, rgba(18,16,14,0.58) 100%);
}

/* shorter hero for interior pages — still shows the backdrop before content */
.hero.compact{ height:auto; min-height:64vh; }

/* "bare" project page: no backdrop image (e.g. an unreleased concept).
   Give the panel a solid card fill + hairlines so it reads as a deliberate
   single block rather than an unstyled page. */
.prose.bare{
  background:var(--panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.hero-content .meta{
  font-size:15px;
  color:var(--muted);
  margin-top:14px;
  line-height:1.5;
}

.crumb{
  display:inline-block;
  color:var(--gold);
  text-decoration:none;
  font-size:14px;
}
.crumb:hover{ text-decoration:underline; }

/* ---------- Prose column ---------- */
.prose p{ margin:0 0 20px; color:var(--parchment); font-size:18px; }
.prose p:last-child{ margin-bottom:0; }
.prose p a{ color:var(--gold); text-decoration:none; }
.prose p a:hover{ text-decoration:underline; }
.prose p.lede{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:23px;
  line-height:1.5;
  margin:6px 0 64px;
}
.prose h2{ font-size:26px; margin:52px 0 28px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:19px; margin:36px 0 14px; }
.prose h3:first-child{ margin-top:0; }
.prose figure{ margin:32px 0; }
.prose figure img{ width:100%; border:1px solid var(--line); }
.prose figcaption{ font-size:13px; color:var(--muted); margin-top:8px; }

/* ---------- Design-doc term blocks (Core Themes, stats, etc.) ---------- */
.term-block{ margin:0 0 28px; }
.term-block dt{
  font-family:'Fraunces', serif; font-size:17px; font-weight:600;
  color:var(--gold); margin:20px 0 6px;
}
.term-block dt:first-child{ margin-top:0; }
.term-block dd{ margin:0; font-size:17px; color:var(--parchment); line-height:1.6; }

/* ---------- Character bio fields ---------- */
.bio-card{ margin:0 0 44px; }
.bio-card + .bio-card{ border-top:1px solid var(--line); padding-top:44px; }
.bio-card h3{ font-size:21px; margin:0 0 16px; }
.bio-fields dt{
  font-size:13px; color:var(--muted); text-transform:uppercase;
  letter-spacing:0.04em; margin-top:14px;
}
.bio-fields dt:first-child{ margin-top:0; }
.bio-fields dd{ margin:2px 0 0; font-size:17px; color:var(--parchment); }

/* ---------- Scrolling document box ---------- */
/* Bounds a long reference doc (tables, dense text) to a fixed height inside
   a Samples entry instead of it pushing the whole page down. */
.scroll-box{
  max-height:440px;
  overflow-y:auto;
  border:1px solid var(--line);
  background:var(--panel);
  padding:24px 28px;
  margin:20px 0;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.scroll-box::-webkit-scrollbar{ width:8px; }
.scroll-box::-webkit-scrollbar-track{ background:transparent; }
.scroll-box::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
.scroll-box::-webkit-scrollbar-thumb:hover{ background:var(--gold); }
.scroll-box > :first-child{ margin-top:0; }
.scroll-box > :last-child{ margin-bottom:0; }

/* ---------- Trigger/line tables (barks etc.) ---------- */
.prose table{ width:100%; border-collapse:collapse; margin:0 0 28px; font-family:'IBM Plex Sans', sans-serif; }
.prose th{
  text-align:left; font-size:13px; color:var(--muted); text-transform:uppercase;
  letter-spacing:0.04em; font-weight:500; padding:0 16px 10px 0; border-bottom:1px solid var(--line);
}
.prose td{ padding:10px 16px 10px 0; border-bottom:1px solid var(--line); color:var(--parchment); font-size:16px; vertical-align:top; }
.prose tr:last-child td{ border-bottom:none; }
.prose td:first-child, .prose th:first-child{ color:var(--muted); white-space:nowrap; width:1%; }

/* ---------- Script excerpt ---------- */
.script-block{ margin:28px 0; }
.script-block .slug{
  font-weight:600; letter-spacing:0.02em; color:var(--gold);
  margin:0 0 16px; font-size:15px;
}
.script-block .action{ margin:0 0 14px; font-style:italic; color:var(--muted); }
.script-block .character{
  font-weight:600; text-transform:uppercase; font-size:14px;
  letter-spacing:0.03em; margin:18px 0 4px;
}
.script-block .dialogue{ margin:0 0 4px; }
.script-block .branch{
  font-weight:600; color:var(--gold); text-transform:uppercase;
  font-size:14px; letter-spacing:0.03em; margin:28px 0 16px;
  border-top:1px solid var(--line); padding-top:20px;
}

/* a hairline where two stacked panels meet */
.prose + .prose{ border-top:1px solid var(--line); }

/* ---------- Screenplays list ---------- */
.screenplay{ margin:0 0 36px; }
.screenplay + .screenplay{
  border-top:1px solid var(--line);
  padding-top:36px;
}
.screenplay:last-child{ margin-bottom:0; }
.screenplay h2{ font-size:21px; margin-bottom:4px; }
.screenplay .format{ font-size:14px; color:var(--muted); margin:0 0 14px; }
.screenplay p{ font-size:17px; margin:0 0 12px; }
.screenplay .award{ font-size:14px; color:var(--gold); margin:0 0 12px; }
.screenplay .reads{ font-size:14px; margin:0; }
.screenplay .reads a{ color:var(--gold); text-decoration:none; }
.screenplay .reads a:hover{ text-decoration:underline; }
.screenplay .reads .sep{ color:var(--muted); margin:0 9px; }

/* ---------- Interactive Fiction ---------- */
.if-game{ margin:0 0 44px; }
.if-game + .if-game{
  border-top:1px solid var(--line);
  padding-top:44px;
}
.if-game:last-child{ margin-bottom:0; }
.if-game h2{ font-size:21px; margin-bottom:6px; }
.if-game p{ font-size:17px; margin:0 0 16px; }

/* holds a self-contained Twine export played inline. Portrait-ish by
   default (text games read well in a narrow column); override the
   aspect-ratio per game if one needs a different shape. */
.if-embed{
  position:relative;
  width:100%;
  aspect-ratio:4 / 5;
  border:1px solid var(--line);
  background:#000;
  margin-bottom:14px;
}
.if-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.if-actions{ font-size:14px; margin:0; }
.if-actions a{ color:var(--gold); text-decoration:none; }
.if-actions a:hover{ text-decoration:underline; }

.if-game .stats{ font-size:14px; color:var(--muted); margin:0 0 16px; }

/* Full-width reading pane for a game with its own dedicated page, rather
   than a portrait tile inside a list (see interactive-fiction/streetlife). */
.if-embed.full{ aspect-ratio:auto; height:78vh; min-height:560px; max-height:900px; }

/* ---------- Scene breakdowns ---------- */
.scene{ margin-bottom:52px; }
.scene:last-child{ margin-bottom:0; }
.scene h3{ font-size:21px; margin-bottom:16px; }
.scene p{ font-size:17px; margin:0 0 16px; }
.prose .scene-script{ font-size:14px; margin:14px 0 0; }
.prose .scene-script a{ color:var(--gold); text-decoration:none; }
.prose .scene-script a:hover{ text-decoration:underline; }

/* click-to-load video facade */
.scene-video{
  position:relative;
  aspect-ratio:16 / 9;
  margin-bottom:20px;
  border:1px solid var(--line);
  background:#000;
  overflow:hidden;
  cursor:pointer;
}
.scene-video img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease, filter .4s ease;
}
.scene-video:hover img{ transform:scale(1.03); filter:brightness(1.08); }
.scene-video__play{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  width:60px; height:60px;
  border-radius:50%;
  border:1px solid var(--parchment);
  background:rgba(18,16,14,0.5);
  color:var(--parchment);
  display:grid; place-items:center;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.scene-video__play svg{ width:24px; height:24px; margin-left:2px; }
.scene-video:hover .scene-video__play{
  background:var(--gold); border-color:var(--gold); color:var(--ink);
}
.scene-video.playing{ cursor:default; }
.scene-video.playing img,
.scene-video.playing .scene-video__play{ display:none; }
.scene-video iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
