/*
 * The project pages (/work/…, /games/…): the homepage's header and type, the project's own
 * colours in its hero. Copy marked TEMP is a placeholder.
 */
.proj-page body {
  background:
    radial-gradient(1px 1px at 12% 18%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 42% 32%, rgb(243 239 226 / 0.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 74% 12%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 54%, rgb(243 239 226 / 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 72%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 81%, rgb(243 239 226 / 0.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 88%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 44%, rgb(243 239 226 / 0.5) 50%, transparent 51%),
    radial-gradient(70% 50% at 70% 0%, rgb(230 234 150 / 0.06), transparent 70%),
    var(--space);
  background-attachment: fixed;
}
.proj { --lk-ink: #0c0c0a; --lk-olive: #e6ea96; position: relative; max-width: var(--wrap); margin: 0 auto; padding: clamp(5rem, 11vh, 7rem) var(--gutter) var(--gap-section); }
.proj-crumbs { margin-bottom: clamp(1.2rem, 3vh, 2rem); }
.proj-back { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; font: 400 0.68rem/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.25s ease; }
.proj-back:hover { color: var(--gold); }
.proj-back span { font-size: 1rem; transition: transform 0.25s ease; }
.proj-back:hover span { transform: translateX(-3px); }

.proj-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.proj-hero__media { min-width: 0; }
.proj-screen { --scr-r: 1.1rem; box-shadow: 0 0 0 1px rgb(2 3 10), 0 60px 120px -50px #000, 0 0 90px -30px rgb(230 234 150 / 0.25); }
.proj-hero__text { display: grid; gap: 1.1rem; justify-items: start; }
.proj-title { font: 200 clamp(2.6rem, 6vw, 5.4rem)/0.95 var(--font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--star); }
.proj-title--long { font-size: clamp(2.1rem, 3vw, 2.8rem); overflow-wrap: anywhere; } /* one long word: WildAboutFilm, kept on one line beside the picture */
.proj-lede { max-width: 34ch; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: rgb(243 239 226 / 0.86); }
.proj-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.proj-cta .btn { background: var(--site-accent, var(--lk-olive)); border-color: var(--site-accent, var(--lk-olive)); color: var(--site-ink, var(--lk-ink)); }
.proj-cta .btn:hover { background: transparent; color: var(--site-accent, var(--lk-olive)); }
.proj-link { margin-top: 1rem; }
.proj-link a { color: var(--gold); text-underline-offset: 0.2em; }

.proj-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: clamp(2.5rem, 7vh, 4.5rem) 0 0; border-block: 1px solid var(--line); }
.proj-facts div { padding: 1rem 1.1rem 1.1rem 0; }
.proj-facts div + div { padding-left: 1.1rem; border-left: 1px solid var(--line); }
.proj-facts dt { font: 400 0.6rem/1.3 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--hud-dim); }
.proj-facts dd { margin: 0.45rem 0 0; font-size: 0.98rem; }

.proj-sec { margin-top: var(--gap-section); }
.proj-h { margin-top: 0.4rem; max-width: 22ch; font: 300 clamp(1.7rem, 3.4vw, 2.8rem)/1.08 var(--font); letter-spacing: 0.03em; text-transform: uppercase; }
.proj-sec > p:not(.cat) { max-width: 62ch; margin-top: 1rem; color: rgb(243 239 226 / 0.86); }
.proj-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-item); margin-top: var(--gap-item); }
.proj-card { display: grid; align-content: start; gap: 0.7rem; padding: 1.3rem 1.3rem 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); }
.proj-card__n { font: 400 0.62rem/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--hud); }
.proj-card h3 { font: 400 1.25rem/1.2 var(--font); letter-spacing: 0.04em; text-transform: uppercase; }
.proj-card p { color: rgb(243 239 226 / 0.82); font-size: 0.98rem; }
.proj-card pre { margin: 0.3rem 0 0; padding: 0.9rem 1rem; overflow-x: auto; border-radius: 0.6rem; background: rgb(2 3 10 / 0.7); font: 400 0.74rem/1.55 var(--mono); color: var(--lk-olive); }

.proj-end { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-item); margin-top: var(--gap-section); }
.proj-next, .proj-hire { display: grid; align-content: start; gap: 0.8rem; padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 1.2rem; }
.proj-next { text-decoration: none; transition: border-color 0.25s ease; }
.proj-next:hover { border-color: var(--gold); }
.proj-next b { font: 200 clamp(1.8rem, 3.6vw, 3rem)/1 var(--font); letter-spacing: 0.04em; text-transform: uppercase; }
.proj-hire { background: radial-gradient(circle at 100% 0, rgb(242 196 109 / 0.16), transparent 14rem), var(--panel); }
.proj-hire p:first-child { font: 300 clamp(1.4rem, 2.6vw, 2rem)/1.15 var(--font); letter-spacing: 0.03em; }
.proj-hire .btn { justify-self: start; }
.proj-foot { max-width: var(--wrap); margin: 0 auto; padding: 1.5rem var(--gutter) 3rem; font: 400 0.62rem/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 56rem) {
  .proj-hero { grid-template-columns: minmax(0, 1fr); }
  .proj-title--long { font-size: clamp(2.1rem, 7.6vw, 4rem); }
  .proj-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proj-facts div, .proj-facts div + div { padding: 0.9rem 0.8rem 0.9rem 0; border-left: 0; border-top: 1px solid var(--line); }
  .proj-facts div:nth-child(-n+2) { border-top: 0; }
  .proj-facts div:nth-child(even) { padding-left: 0.9rem; border-left: 1px solid var(--line); }
  .proj-how, .proj-end { grid-template-columns: minmax(0, 1fr); }
}

/* the record you can play, in "The record" (when the hero shows the real site) */
.proj-vinyl { width: min(12rem, 70%); margin-top: 0.4rem; }
.proj-vinyl .vinyl__readout { margin-top: 0.6rem; font: 400 0.62rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hud-dim); }

/* five links in the nav: on phones they sit closer, as on the homepage (style.css), so Contact fits */
@media (max-width: 30em) {
  .proj-page .top__nav { gap: 0.6rem; letter-spacing: 0.04em; font-size: 0.62rem; }
  .proj-page .top__brand { letter-spacing: 0.08em; font-size: 0.68rem; }
}