/* Self-hosted fonts (files in assets/fonts/) */
@font-face {
  font-family: "Monolith";
  src: url("../fonts/Monolith.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM 3270";
  src: url("../fonts/IBM3270-Medium.ttf") format("truetype");
  size-adjust: 110%; /* 3270 draws small for its size; scale it up everywhere */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================
   Aleksandra Georgieva — portfolio
   Editorial type over a PS2-era void: deep indigo dark,
   phosphor white, console blue. One accent, used sparingly.
   ========================================================== */

:root {
  /* Three colours, from the Y2K poster: cream paper, black ink, cobalt */
  --cream: #ece3d0;
  --black: #121214;
  --blue: #3a57c4;

  /* everything else is a tint of those three */
  --cream-2: #e2d7c0;
  --void: var(--cream);
  --void-2: var(--cream-2);
  --panel: var(--black);
  --ink: var(--black);
  --soft: rgba(18, 18, 20, 0.92);
  --mute: rgba(18, 18, 20, 0.78);
  --faint: rgba(18, 18, 20, 0.62);
  --phos: var(--blue);
  --ps2: var(--blue);
  --glow: rgba(58, 87, 196, 0.28);
  --line: rgba(18, 18, 20, 0.16);
  --line-2: rgba(18, 18, 20, 0.5);
  --rec: var(--blue);

  --f-display: "Monolith", ui-monospace, monospace;  /* titles */
  --f-body: "IBM 3270", ui-monospace, monospace;    /* everything else */
  --f-mono: var(--f-body);
  --f-osd: var(--f-body);

  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 64px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--void);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  /* keep content clear of notches / rounded corners in landscape */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--ps2); color: #fff; }

:focus-visible {
  outline: 1px solid var(--phos);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(58, 87, 196, 0.35);
}

.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;
}

/* ---------- Atmosphere: the console void ---------- */

.void {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(120% 65% at 50% 112%, rgba(58, 87, 196, 0.30), transparent 62%),
    radial-gradient(70% 45% at 50% -8%, rgba(120, 140, 220, 0.10), transparent 70%),
    var(--void);
}

.void__towers {
  position: absolute;
  left: -4%; right: -4%; bottom: 0;
  height: 62vh;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  filter: blur(0.6px);
}

.void__towers span {
  flex: 0 0 auto;
  width: var(--w);
  height: var(--h);
  background: linear-gradient(to top, rgba(150, 175, 255, var(--a)), rgba(150, 175, 255, 0));
  border-top: 1px solid rgba(190, 205, 255, calc(var(--a) * 1.4));
  animation: tower-breathe 11s ease-in-out infinite alternate;
  animation-delay: var(--d);
}

@keyframes tower-breathe {
  to { transform: translateY(-14px); opacity: 0.55; }
}

/* scanlines + moving grain over everything */
.crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(18, 18, 20, 0.022) 0 1px, transparent 1px 3px);
}

.crt-overlay::after {
  content: "";
  position: absolute;
  inset: -50%;
  background-image: var(--noise, none);
  opacity: 0.012;
  animation: grain 0.6s steps(4) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-1%, -2%); }
}

/* ---------- Tube: page power on / off ---------- */

.tube { animation: tube-on 0.55s var(--ease) backwards; }
.page-home .tube { animation: none; }

@keyframes tube-on {
  0%   { transform: scaleY(0.006); filter: brightness(3); opacity: 0.6; }
  55%  { transform: scaleY(1); filter: brightness(1.6); opacity: 1; }
  100% { filter: brightness(1); }
}

body.is-leaving .tube {
  animation: tube-off 0.38s ease-in forwards;
}

@keyframes tube-off {
  0%   { transform: scale(1, 1); filter: brightness(1); }
  60%  { transform: scale(1, 0.006); filter: brightness(3); }
  100% { transform: scale(0, 0.006); filter: brightness(4); opacity: 0; }
}

/* ---------- Header / HUD ---------- */

.hud {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--gutter);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(5, 6, 12, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.page-home .hud { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }

.hud__mark {
  color: var(--mute);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s, text-shadow 0.25s;
}

.hud__mark:hover,
.hud__mark[aria-current="page"] {
  color: var(--phos);
  text-shadow: 0 0 14px var(--glow);
}

.hud__nav { display: flex; gap: clamp(18px, 3vw, 36px); }

.hud__nav a {
  position: relative;
  padding: 6px 0;
  color: var(--mute);
  text-decoration: none;
  transition: color 0.25s, text-shadow 0.25s;
}

.hud__nav a:hover,
.hud__nav a[aria-current="page"] {
  color: var(--phos);
  text-shadow: 0 0 14px var(--glow);
}

.hud__nav a[aria-current="page"]::before {
  content: "▸";
  position: absolute;
  left: -12px;
  color: var(--ps2);
}

@keyframes blink { 50% { opacity: 0.2; } }

@media (max-width: 400px) {
  .hud { font-size: 11px; letter-spacing: 0.04em; gap: 10px; }
  .hud__nav { gap: 14px; }
  .hud__nav a[aria-current="page"]::before { left: -10px; }
}

/* ---------- Shared type ---------- */

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.eyebrow b { color: var(--phos); font-weight: 500; }

.page-title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(56px, 10vw, 148px);
  line-height: 0.88;
  letter-spacing: -0.04em;
}

.page-title em {
  font-style: normal;
  color: var(--phos);
  text-shadow: 0 0 28px transparent;
}

.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(28px, 7vh, 80px) var(--gutter) 96px;
}

.page-head {
  display: grid;
  grid-template-columns: 1fr minmax(0, 360px);
  align-items: end;
  gap: 32px;
  padding-bottom: clamp(32px, 6vh, 64px);
  margin-bottom: clamp(32px, 6vh, 64px);
  border-bottom: 1px solid var(--line);
}

.page-head__intro {
  margin: 0;
  color: var(--mute);
  font-size: 15px;
  max-width: 36ch;
}

@media (max-width: 760px) {
  .page-head { grid-template-columns: 1fr; }
}

.site-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px var(--gutter) calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.site-foot a { text-decoration: none; color: var(--mute); }
.site-foot a:hover { color: var(--phos); }

/* corner brackets */
.brackets { position: relative; }
.brackets::before,
.brackets::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--phos);
  opacity: 0.7;
  pointer-events: none;
}
.brackets::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.brackets::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ==========================================================
   HOME — three CRTs, stacked
   ========================================================== */

.home {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(300px, 540px) minmax(190px, 1fr);
  align-items: center;
  gap: 24px;
  min-height: calc(100svh - var(--header-h));
  padding: 0 var(--gutter) 24px;
}

.home__name {
  margin: 0 0 22px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.home__name em {
  display: block;
  font-style: normal;
  color: var(--phos);
  text-shadow: 0 0 30px transparent;
}

.home__note {
  grid-column: 3;
  align-self: center;
  justify-self: end;
  max-width: 30ch;
  color: var(--mute);
  font-size: 15px;
}

.home__note p { margin: 0 0 20px; }

.stage {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  height: calc(100svh - var(--header-h) - 24px);
  min-height: 520px;
}

.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
}

/* Real links behind the 3D: keyboard + screen readers, and the fallback */
.stage__links {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  pointer-events: none;
}

.stage__links a {
  pointer-events: auto;
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.stage__links a:focus-visible {
  /* the hovered TV glows instead; keep a small visible label too */
  clip: auto;
  width: auto; height: auto;
  left: 50%; bottom: 8px;
  transform: translateX(-50%);
  padding: 4px 10px;
  font-family: var(--f-osd);
  font-size: 20px;
  color: var(--phos);
  background: var(--black);
}

/* No WebGL: show the channels as plain screens */
.stage.no-webgl canvas { display: none; }
.stage.no-webgl .stage__links { position: static; padding-top: 6vh; }
.stage.no-webgl .stage__links a {
  position: static;
  width: auto; height: auto;
  clip: auto;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  max-width: 340px;
  margin: 0 auto;
  border-radius: 18px / 22px;
  background: radial-gradient(ellipse at 50% 45%, #5873ff, #0c1460);
  font-family: var(--f-display);
  font-size: 36px;
  text-decoration: none;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.3s, filter 0.3s;
}
.stage.no-webgl .stage__links a:hover { filter: brightness(1.2); box-shadow: inset 0 0 30px rgba(0,0,0,.4), 0 0 40px var(--glow); }

@media (min-width: 600px) and (max-width: 900px) {
  .home {
    grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
    gap: 16px;
  }
  .home__note { grid-column: 1; grid-row: 1; justify-self: start; }
  .stage { grid-column: 2; grid-row: 1; min-height: 440px; }
}

@media (max-width: 599px) {
  .home {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 12px;
  }
  .home__note { grid-column: 1; grid-row: 1; justify-self: start; padding: 4vh 0 8px; }
  .stage { grid-column: 1; grid-row: 2; }
  .stage { height: min(calc(100svh - var(--header-h)), 150vw); min-height: 460px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .home { min-height: 0; }
  .stage { height: calc(100svh - var(--header-h)); min-height: 280px; }
  .home__note { padding: 0; }
}

/* ==========================================================
   ABOUT — the record card
   ========================================================== */

.idcard {
  position: relative;
  border: 1px solid var(--line-2);
  background-color: var(--panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 40px 80px -40px rgba(58, 87, 196, 0.45);
}

.idcard__body {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(20px, 3vw, 36px);
}

.idcard__photo {
  position: relative;
  margin: 0;
  align-self: start;
}

.idcard__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--black);
}

.idcard__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.idcard__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.4));
  pointer-events: none;
}


.idcard__name {
  margin: 0 0 6px;
  font-family: var(--f-display);
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.idcard__name em { font-style: normal; color: var(--phos); }

.idcard__role {
  display: inline-block;
  margin: 10px 0 28px;
  padding: 3px 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ps2);
}

.fields {
  display: grid;
  grid-template-columns: 130px 1fr;
  margin: 0;
}

.fields dt,
.fields dd {
  margin: 0;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.fields dt {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 14px;
}

.fields dd { font-size: 15px; }

.idcard__stamp {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--line-2);
  font-size: 14px;
}

.idcard__stamp svg { width: 26px; height: 26px; color: var(--phos); flex: none; }
.idcard__stamp small {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.signal { display: inline-flex; align-items: center; gap: 8px; }
.signal i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--phos);
  box-shadow: 0 0 10px var(--phos);
  animation: blink 2.4s steps(1) infinite;
}

@media (max-width: 1000px) {
  .idcard__body { grid-template-columns: minmax(180px, 0.8fr) 1fr; }
  .fields { grid-template-columns: 1fr; }
  .fields dt { padding: 12px 0 2px; }
  .fields dd { border-top: 0; padding-top: 0; }
}

@media (max-width: 600px) {
  .idcard__body { grid-template-columns: 1fr; }
  .idcard__photo { max-width: 320px; }
}

.lede {
  font-weight: 500;
  max-width: 980px;
  margin: clamp(56px, 10vh, 120px) 0;
  font-family: var(--f-body);
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.lede em { font-style: normal; color: var(--phos); }

.modules {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.module {
  padding: 28px clamp(20px, 2.6vw, 36px) 32px;
  border: 1px solid var(--line-2);
  background-color: var(--cream-2);
}

.module--wide { grid-column: 1 / -1; }

.module h2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  color: var(--ink);
}

.module h2 span {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.log { margin: 0; padding: 0; list-style: none; }

.log li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.log li:first-child { border-top: 0; padding-top: 0; }

.log time {
  font-family: var(--f-osd);
  font-size: 19px;
  line-height: 1.2;
  color: var(--phos);
}

.log h3 { margin: 0; font-size: 16px; font-weight: 600; }
.log .org { margin: 2px 0 6px; color: var(--mute); font-size: 14px; }
.log p { margin: 0; font-size: 14px; color: var(--soft); }

.edu { margin: 0; padding: 0; list-style: none; }
.edu li { padding: 14px 0; border-top: 1px solid var(--line); }
.edu li:first-child { border-top: 0; padding-top: 0; }
.edu strong { display: block; font-weight: 600; font-size: 15px; }
.edu span { color: var(--mute); font-size: 14px; }

/* interests: channel buttons on a tuner */
.tuner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tuner li {
  position: relative;
  padding: 18px 16px 16px;
  border: 1px solid var(--line-2);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.1;
  transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
}

.tuner li::before {
  content: "";
  display: block;
  width: 7px; height: 7px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--faint);
  transition: background 0.3s, box-shadow 0.3s;
}

.tuner li:hover { background-color: rgba(58, 87, 196, 0.18); color: var(--phos); box-shadow: 0 0 30px -6px var(--glow); }
.tuner li:hover::before { background: var(--phos); box-shadow: 0 0 10px var(--phos); }

.tuned {
  max-width: 68ch;
  margin: 0;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.75;
  color: var(--soft);
}

.tuned em { font-style: normal; color: var(--phos); }

/* tools with their logos */
.tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, calc(50% - 5px)), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tools li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px clamp(10px, 2vw, 16px);
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--soft);
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}

.tools svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: currentColor;
  color: var(--phos);
  transition: color 0.3s, filter 0.3s;
}

/* Procreate + Audacity: logo shapes used as masks, so they take the same colour as the other logos */
.tool-mark {
  flex: none;
  width: 22px;
  height: 22px;
  background: var(--phos);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  transition: filter 0.3s;
}

.tool--procreate .tool-mark {
  -webkit-mask-image: url("../img/icons/procreate-mask.png");
  mask-image: url("../img/icons/procreate-mask.png");
}

.tool--audacity .tool-mark {
  -webkit-mask-image: url("../img/icons/audacity-mask.png");
  mask-image: url("../img/icons/audacity-mask.png");
}

/* hover shows the real, full-colour Audacity logo */
.tool--audacity:hover .tool-mark {
  background: url("../img/icons/audacity-color.png") center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.55));
}

.tool--procreate:hover .tool-mark {
  background: linear-gradient(200deg, #9b5cff 10%, #ff2bd6 35%, #ff3b3b 55%, #ffb000 70%, #2bd94b 85%, #19b5ff);
  filter: drop-shadow(0 0 8px rgba(255, 43, 214, 0.6));
}

/* vibe coding: three small logos grouped as one icon */
.tool-stack { flex: none; display: grid; grid-template-columns: repeat(2, 13px); gap: 2px; width: 28px; }
.tool-stack svg { width: 13px; height: 13px; }
.tool-stack svg:last-child { grid-column: 1 / -1; justify-self: center; }
.tool--vibe:hover .tool-stack svg { color: var(--brand); filter: drop-shadow(0 0 6px var(--brand)); }

.tools li:hover { border-color: var(--line-2); background-color: rgba(58, 87, 196, 0.12); color: #fff; }
.tools li:hover svg { color: var(--brand, var(--phos)); filter: drop-shadow(0 0 8px var(--brand, var(--glow))); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.tags:last-child { margin-bottom: 0; }

.tags li {
  padding: 5px 10px;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--soft);
}

.tags--tools li { font-family: var(--f-mono); font-size: 12px; border-style: dashed; }

.module h3.sub {
  margin: 0 0 10px;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

@media (max-width: 760px) {
  .modules { grid-template-columns: 1fr; }
  .log li { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================
   ABOUT — editorial sections, each with its own rhythm
   ========================================================== */

.ab-section { margin-top: clamp(80px, 13vh, 150px); }

.ab-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(20px, 4vh, 36px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
}

.ab-head h2 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1;
}

.ab-head span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}

/* intro: one big line + a friendly paragraph, no frame */
.ab-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-top: clamp(64px, 11vh, 130px);
}

.ab-intro__line {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(34px, 4.8vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.ab-intro__line em { font-style: normal; color: var(--phos); text-shadow: 0 0 26px transparent; }

.ab-intro__text {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.7;
  color: var(--ink);
  -webkit-text-stroke: 0.35px currentColor; /* the 3270 only has one weight — thicken it a touch */
}

/* experience: open rows, company name leads */
.ab-exp { margin: 0; padding: 0; list-style: none; }

.ab-exp li {
  padding: clamp(24px, 4vh, 38px) 0;
  border-bottom: 1px solid var(--line);
}

.ab-exp li:first-child { padding-top: 4px; }

.ab-exp__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.ab-exp h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.05;
}

.ab-exp time {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}

.ab-exp__role {
  margin: 10px 0 14px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--phos);
}

.ab-exp__role span { color: var(--mute); text-transform: none; letter-spacing: 0.02em; font-size: 13px; }

.ab-exp__desc { margin: 0; max-width: 72ch; font-size: 15px; line-height: 1.75; color: var(--soft); }

.ab-exp__link {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--phos);
}

.ab-exp__link:hover { text-shadow: 0 0 12px var(--glow); }

/* education: compact, almost a table */
.ab-edu { margin: 0; padding: 0; list-style: none; }

.ab-edu li {
  display: grid;
  grid-template-columns: 170px minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 8px 24px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px dashed var(--line);
}

.ab-edu__degree { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.ab-edu__field { font-size: 17px; }
.ab-edu__school { font-size: 14px; color: var(--mute); }

/* toolkit: logo tiles with what each tool is for */
.tools li > span:not(.tool-mark) { display: flex; flex-direction: column; min-width: 0; }
.tools small { margin-top: 3px; font-size: 11px; letter-spacing: 0.02em; color: var(--mute); }

.ab-skills { max-width: 90ch; margin: 28px 0 0; font-size: 14px; line-height: 1.9; color: var(--mute); }
.ab-skills b {
  margin-right: 6px;
  padding: 2px 8px;
  font-weight: 400;
  color: var(--cream);
  background: var(--blue);
  -webkit-text-stroke: 0.4px currentColor; /* a touch thicker than the list */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* side quests: two entries with an accent rule */
.ab-quests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }

.ab-quest { padding: 2px 0 2px 22px; border-left: 2px solid var(--ps2); }
.ab-quest__label { margin: 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--phos); }

.ab-quest h3 {
  margin: 10px 0 4px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
}

.ab-quest__meta { margin: 0 0 14px; font-size: 13px; color: var(--mute); }
.ab-quest p:not([class]) { margin: 0; font-size: 15px; line-height: 1.7; color: var(--soft); }

/* tuned in to: bigger, standalone text */
.ab-offscreen {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px clamp(24px, 4vw, 56px);
  margin-top: clamp(80px, 13vh, 150px);
}

.ab-offscreen__label {
  align-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 0;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.ab-offscreen p {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.6;
  color: var(--ink);
  -webkit-text-stroke: 0.4px currentColor;
}

.ab-offscreen em { font-style: normal; color: var(--phos); text-shadow: 0 0 18px transparent; }

/* tiny equaliser */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; height: 100%; background: var(--phos); transform-origin: bottom; animation: eq 1.1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -0.35s; }
.eq i:nth-child(3) { animation-delay: -0.7s; }
@keyframes eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }

/* closing line */
.ab-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: clamp(80px, 13vh, 150px);
  padding-top: clamp(32px, 6vh, 56px);
  border-top: 1px solid var(--line-2);
}

.ab-cta p {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.1;
}

.ab-cta em { font-style: normal; color: var(--phos); }
.pill--lg { padding: 14px 24px; font-size: 13px; }

@media (max-width: 860px) {
  .ab-intro { grid-template-columns: 1fr; }
  .ab-edu li { grid-template-columns: 1fr; gap: 4px; }
  .ab-quests { grid-template-columns: 1fr; }
  .ab-offscreen { grid-template-columns: 1fr; }
}

/* ==========================================================
   WORK — clean project index
   ========================================================== */

.projects { display: grid; gap: 0; }

.project {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(32px, 6vh, 56px) 0;
  border-top: 1px solid var(--line);
}

.project:first-child { border-top: 0; padding-top: 0; }

.project__media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--black);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: box-shadow 0.4s var(--ease), border-color 0.4s;
}

.project__media img,
.project__media video { width: 100%; height: 100%; object-fit: cover; }

/* placeholder until a cover image is added: muted colour bars */
.project__bars {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--blue) 0 25%, var(--black) 0 50%, var(--cream-2) 0 75%, var(--blue) 0);
  filter: none;
  opacity: 0.9;
  transition: filter 0.5s var(--ease);
}

.project__bars::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px);
}

.project__plate {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 14px;
  background: var(--black);
  font-family: var(--f-osd);
  font-size: clamp(12px, 3.4vw, 18px);
  letter-spacing: 0.04em;
  color: var(--phos);
  text-align: center;
  max-width: calc(100% - 32px);
}

.project:hover .project__media { border-color: var(--line-2); box-shadow: 0 0 60px -12px var(--glow); }
.project:hover .project__bars { opacity: 1; }

.project__meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}

.project__meta time { color: var(--phos); }

.project__title {
  margin: 0 0 10px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.project__title em { font-style: normal; color: var(--phos); }

.project__context { margin: 0 0 18px; color: var(--mute); font-size: 15px; }

.project__summary { margin: 0 0 22px; max-width: 46ch; font-size: 15px; color: var(--soft); }

.project__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.project__status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1px solid currentColor;
}

.project__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--phos);
}
.project__link:hover { text-shadow: 0 0 12px var(--glow); }

@media (max-width: 860px) {
  .project { grid-template-columns: 1fr; }
}

/* trusted clients */
.clients {
  margin-top: clamp(48px, 8vh, 88px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.clients__title {
  margin: 0 0 22px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--ink);
}

.clients__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.client {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 170px;
  padding: 28px 20px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.3s;
}

/* logos sit in black like the rest of the palette; hover shows their real colours */
.client__logo {
  width: 100%;
  max-width: 220px;
  height: 78px;
  background: var(--ink);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  transition: background 0.3s;
}

.client--orco .client__logo { -webkit-mask-image: url("../img/clients/orco-mask.png"); mask-image: url("../img/clients/orco-mask.png"); }
.client--luminousbees .client__logo { -webkit-mask-image: url("../img/clients/luminousbees-mask.png"); mask-image: url("../img/clients/luminousbees-mask.png"); height: 64px; }
.client--munaf .client__logo { -webkit-mask-image: url("../img/clients/munaf-mask.png"); mask-image: url("../img/clients/munaf-mask.png"); height: 84px; }

.client__name {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
}

.client:hover { background-color: rgba(58, 87, 196, 0.08); }
.client--orco:hover .client__logo { background: url("../img/clients/orco-color.png") center / contain no-repeat; }
.client--luminousbees:hover .client__logo { background: url("../img/clients/luminousbees-color.png") center / contain no-repeat; }
.client--munaf:hover .client__logo { background: var(--blue); }

@media (max-width: 560px) {
  .clients__list { grid-template-columns: 1fr; }
  .client { min-height: 140px; }
}

/* ==========================================================
   CONTACT — the badge
   ========================================================== */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
  min-height: calc(100svh - var(--header-h) - 120px);
}

.contact .page-title { margin-bottom: 32px; }

.contact__intro { max-width: 40ch; margin: 0 0 40px; color: var(--mute); font-size: 16px; }

.contact__email {
  display: inline-block;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: clamp(16px, 5.2vw, 38px);
  line-height: 1.1;
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 6px;
  overflow-wrap: anywhere;
  transition: color 0.3s, text-shadow 0.3s, border-color 0.3s;
}

.contact__email:hover { color: var(--phos); text-shadow: 0 0 24px var(--glow); border-color: var(--phos); }

.badge-wrap { perspective: 1100px; justify-self: center; width: 100%; max-width: 380px; }

.badge {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%;
  position: relative;
  padding: 0 0 0;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background-color: var(--black);
  box-shadow: 0 50px 90px -40px rgba(58, 87, 196, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease);
  overflow: hidden;
}

.badge.is-tilting { transition: transform 0.08s linear; }

/* holographic sheen that follows the pointer */
.badge::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(200, 215, 255, 0.16), transparent 45%);
  mix-blend-mode: screen;
}

.badge__slot {
  width: 64px; height: 10px;
  margin: 18px auto 0;
  border-radius: 6px;
  background: var(--void);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.08);
}

.badge__head {
  display: flex;
  justify-content: space-between;
  padding: 18px 22px 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  border-bottom: 1px solid var(--line);
}

.badge__body { padding: 28px 22px 8px; }

.badge__mono {
  display: grid;
  place-items: center;
  width: 92px; height: 92px;
  margin-bottom: 22px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 4px rgba(58, 87, 196, 0.25);
}

.badge__mono img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.9); transform-origin: 53% 31%; filter: grayscale(1) contrast(1.1); }

.badge__name { margin: 0; font-family: var(--f-display); font-size: 30px; line-height: 1; }
.badge__name em { font-style: normal; color: var(--phos); }
.badge__role { margin: 8px 0 22px; font-size: 14px; color: var(--mute); }

.badge__copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px dashed var(--line-2);
  background: transparent;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s;
}

.badge__copy span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge__copy:hover { border-color: var(--phos); background-color: rgba(58, 87, 196, 0.14); }
.badge__copy span:last-child { font-family: var(--f-osd); font-size: 17px; color: var(--phos); }

.badge__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.icon-btn svg { width: 26px; height: 26px; transition: filter 0.3s; }

.icon-btn:hover,
.icon-btn:focus-visible {
  color: #fff;
  border-color: var(--phos);
  background-color: var(--ps2);
  box-shadow: 0 0 34px -4px var(--glow);
}

.icon-btn:hover svg { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)); }

.badge__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
  font-family: var(--f-osd);
  font-size: 17px;
  color: var(--mute);
}


@media (max-width: 860px) {
  .contact { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 56px; }
}

/* ==========================================================
   PROJECT PAGE — Zathura
   ========================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.25s, border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
}

.pill:hover,
.pill:focus-visible {
  color: #fff;
  border-color: var(--phos);
  background-color: var(--ps2);
  box-shadow: 0 0 28px -6px var(--glow);
}

.project__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.project__title a { text-decoration: none; }
.project__title a:hover { text-shadow: 0 0 24px var(--glow); }
.project__media img { transition: transform 0.6s var(--ease), filter 0.6s var(--ease); }
.project:hover .project__media img { transform: scale(1.02); filter: brightness(1.08); }

.back-link {
  display: inline-block;
  margin-bottom: clamp(24px, 4vh, 40px);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mute);
}
.back-link:hover { color: var(--phos); }

.project-hero { margin-bottom: clamp(32px, 6vh, 56px); }
.project-hero .page-title { margin-bottom: 24px; }

.project-hero__lede {
  max-width: 62ch;
  margin: 0 0 36px;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--soft);
}

.project-facts {
  display: grid;
  grid-template-columns: repeat(var(--facts, 3), minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line-2);
}

.project-facts div { padding: 16px 20px 16px 0; }
.project-facts div + div { padding-left: 20px; border-left: 1px solid var(--line); }

.project-facts dt {
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.project-facts dd { margin: 0; font-size: 15px; }
.project-facts a { color: var(--phos); text-decoration: none; }
.project-facts a:hover { text-shadow: 0 0 12px var(--glow); }

.project-cover {
  margin: 0 0 clamp(40px, 7vh, 72px);
  border: 1px solid var(--line);
  overflow: hidden;
}

.project-cover img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 58% 50%; }

/* a side proposal on a project page */
.proposal {
  margin: 0 0 clamp(40px, 7vh, 72px);
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--black);
  border-left: 6px solid var(--blue);
  background: var(--cream-2);
}
.proposal .eyebrow { margin-bottom: 12px; color: var(--blue); }
.proposal__title { margin: 0 0 14px; font-family: var(--f-display); font-size: clamp(24px, 3vw, 34px); font-weight: 400; line-height: 1.1; }
.proposal__title em { font-style: normal; color: var(--blue); }
.proposal__text { max-width: 70ch; margin: 0; font-size: 15px; line-height: 1.75; color: var(--soft); }

/* two-section switch */
.switch__list {
  display: grid;
  grid-template-columns: repeat(var(--tabs, 2), minmax(0, 1fr));
  gap: 16px;
  margin-bottom: clamp(32px, 6vh, 56px);
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.switch__tab {
  display: grid;
  gap: 6px;
  padding: 22px 24px 24px;
  border: 1px solid var(--line-2);
  text-decoration: none;
  color: var(--ink);
  background-color: var(--cream-2);
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}

.switch__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.switch__title {
  font-family: var(--f-display);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.05;
}

.switch__desc { font-size: 14px; color: var(--mute); }

.switch__tab:hover { border-color: var(--phos); box-shadow: 0 0 40px -12px var(--glow); }

.switch__tab[aria-selected="true"] {
  border-color: var(--phos);
  background-color: rgba(58, 87, 196, 0.22);
  box-shadow: 0 0 50px -14px var(--glow);
}

.switch__tab[aria-selected="true"] .switch__label { color: var(--phos); }
.switch__tab[aria-selected="true"] .switch__label::before { content: "▸ "; }

.panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
}

.panel__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 40px);
}

.panel__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.panel__meta { margin: 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }

.slides { display: grid; gap: clamp(12px, 2vw, 24px); }
.slides--doc { max-width: 860px; margin: 0 auto; }
.doc-note { max-width: 860px; margin: 18px auto 0; font-size: 13px; color: var(--mute); }

.slide { margin: 0; border: 1px solid var(--line); background: #000; }
.slide img { width: 100%; height: auto; }

.event-intro__lede {
  max-width: 54ch;
  margin: 0 0 32px;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
}

.event-video { margin: 0 0 clamp(36px, 6vh, 56px); }
.event-video video { display: block; width: 100%; height: auto; background: #000; border: 1px solid var(--line); }

.event-video figcaption,
.shot figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--mute);
}

.event-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin-bottom: clamp(40px, 7vh, 72px);
}

.event-notes h3 {
  margin: 0 0 12px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
}

.event-notes p { margin: 0; font-size: 15px; color: var(--soft); }

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(280px, 34vw, 500px);
  gap: clamp(12px, 2vw, 24px);
  margin: clamp(12px, 2vw, 24px) 0;
}

.shot { display: grid; grid-template-rows: minmax(0, 1fr) auto; margin: 0; }

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  border: 1px solid var(--line);
  background: #000;
}

.shot--landscape { grid-column: span 2; }

/* the two wide wall shots sit above and below the grid */
.shot--wide { display: block; }
.shot--wide img { height: auto; aspect-ratio: 2.4 / 1; }

/* live site in a browser window */
.browser {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  overflow: hidden;
  background: var(--black);
  box-shadow: 0 40px 90px -40px rgba(58, 87, 196, 0.6);
}

.browser__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--black);
}

.browser__dots { display: flex; gap: 6px; }
.browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); }
.browser__dots i:first-child { background: var(--rec); }

.browser__url {
  flex: 1;
  min-width: 0;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 12px;
  color: var(--mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser__frame {
  display: block;
  width: 100%;
  height: min(78vh, 820px);
  border: 0;
  position: relative;
  background: transparent;
}

/* shown until the embedded site has loaded */
.browser__loading {
  position: absolute;
  z-index: 0;
  left: 0; right: 0; top: 50%;
  margin: 0;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--phos);
  animation: blink 1.4s steps(1) infinite;
  pointer-events: none;
}

/* the frame is transparent until the site paints, so this message shows through */
.browser.is-loaded .browser__loading { display: none; }

.browser__fallback { display: none; position: relative; text-decoration: none; }
.browser__fallback img { display: block; width: 100%; height: auto; }
.browser__fallback .pill { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--cream); color: var(--black); border-color: var(--black); }
.browser.is-blocked .browser__frame,
.browser.is-blocked .browser__loading { display: none; }
.browser.is-blocked .browser__fallback { display: block; }

/* games are built for a 1280×800 touch screen: render them at that size and scale to fit */
.browser--kiosk { --k: 1; }
.browser--kiosk .browser__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; z-index: 1; }
.browser--kiosk .browser__frame { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; transform: scale(var(--k)); transform-origin: 0 0; }
.game-intro { max-width: 68ch; margin: 0 0 24px; font-size: 15px; line-height: 1.75; color: var(--soft); }
button.pill { cursor: pointer; background: transparent; color: var(--ink); font-family: var(--f-body); }

.browser__note { margin: 12px 0 0; font-size: 13px; color: var(--mute); }

/* behind-the-scenes steps: each one laid out differently */
.prep {
  margin-top: clamp(48px, 9vh, 96px);
  padding-top: clamp(28px, 5vh, 44px);
  border-top: 1px solid var(--line);
}

.prep--split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}

.prep--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
.prep--reverse .prep__photo { order: 2; }

.prep__step {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--phos);
}

.prep__text h3 {
  margin: 0 0 14px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.05;
}

.prep__text p:not(.prep__step) { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.75; color: var(--soft); }
.prep__text--wide { margin-bottom: 28px; }
.prep__text--wide p:not(.prep__step) { max-width: 70ch; }

.prep figure { margin: 0; }
.prep figcaption { margin-top: 10px; font-size: 13px; color: var(--mute); }

.prep img,
.prep video {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  background: #000;
}

.prep__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  max-width: 880px;
}

.prep__trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  max-width: 980px;
}
.prep__trio img, .prep__trio video { aspect-ratio: 9 / 16; height: auto; object-fit: cover; }
@media (max-width: 600px) { .prep__trio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.prep__pair img { aspect-ratio: 3 / 4; height: auto; object-fit: cover; }
.prep__video video { aspect-ratio: 9 / 16; height: auto; object-fit: cover; }
.prep__video--tall { max-width: 380px; justify-self: center; width: 100%; }
.prep__photo img { aspect-ratio: 1; height: auto; object-fit: cover; }

@media (max-width: 760px) {
  .prep--split, .prep--reverse { grid-template-columns: 1fr; }
  .prep--reverse .prep__photo { order: 0; }
  .prep__video--tall { max-width: 300px; justify-self: start; }
}

/* full wall loop */
.loop {
  margin-top: clamp(48px, 8vh, 88px);
  padding-top: 32px;
  border-top: 1px solid var(--line-2);
}

.loop__head { max-width: 60ch; margin-bottom: 24px; }

.loop__head h3 {
  margin: 0 0 10px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
}

.loop__head p { margin: 0; font-size: 15px; color: var(--mute); }

.loop__video { margin: 0; }

.loop__video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2560 / 576;
  background: #000;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px -40px rgba(58, 87, 196, 0.6);
}

.loop__video figcaption { margin-top: 10px; font-size: 13px; color: var(--mute); }

@media (max-width: 1100px) and (min-width: 861px) {
  .project-facts[style*="--facts: 4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-facts[style*="--facts: 4"] div:nth-child(3) { padding-left: 0; border-left: 0; }
  .project-facts[style*="--facts: 4"] div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .switch__list { grid-template-columns: 1fr; gap: 10px; }
  .project-facts { grid-template-columns: 1fr; }
  .project-facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .event-notes { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(260px, 52vw, 460px); }
}

@media (max-width: 560px) {
  .switch__list { grid-template-columns: 1fr; gap: 10px; }
  .switch__tab { padding: 16px 18px 18px; }
  .gallery { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .shot--landscape { grid-column: auto; }
  .shot img { height: auto; aspect-ratio: 4 / 5; }
  .shot--landscape img { aspect-ratio: 4 / 3; }
  .shot--wide img, .project-cover img { aspect-ratio: 16 / 9; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .badge { transform: none; }
}


/* ==========================================================
   Y2K PRINT LAYER — from the "welcome to the 2000s" poster:
   cream paper, black blocks with cream type, one cobalt accent,
   sparkles, star rows, oval badges and hard offset shadows.
   ========================================================== */

/* paper with a faint print grid */
.void {
  background-color: var(--cream);
  background-image:
    linear-gradient(rgba(18, 18, 20, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 20, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
}
.void__towers { display: none; }

::selection { background: var(--blue); color: var(--cream); }
:focus-visible { outline-color: var(--blue); box-shadow: 0 0 0 4px rgba(58, 87, 196, 0.25); }

/* black blocks: same components, inverted — cream type, lighter cobalt accent */
.hud,
.idcard,
.badge,
.ab-cta,
.browser,
.switch__tab[aria-selected="true"],
.project__plate {
  --ink: var(--cream);
  --soft: rgba(236, 227, 208, 0.94);
  --mute: rgba(236, 227, 208, 0.8);
  --faint: rgba(236, 227, 208, 0.64);
  --line: rgba(236, 227, 208, 0.16);
  --line-2: rgba(236, 227, 208, 0.4);
  --phos: #8ea3f2;
  color: var(--ink);
}

.hud,
.page-home .hud {
  background: var(--black);
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* cards sit on the paper with a hard cobalt shadow */
.idcard,
.badge {
  background-color: var(--black);
  border: 0;
  box-shadow: 10px 10px 0 var(--blue);
}
.badge { border-radius: 14px; }
.brackets::before, .brackets::after { border-color: var(--blue); opacity: 1; }

.ab-cta {
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding: clamp(32px, 6vh, 56px) var(--gutter);
  background: var(--black);
  border-top: 0;
}

/* titles: cobalt with a black offset edge, like the poster's "2000s" */
.page-title em,
.home__name em {
  color: var(--blue);
  text-shadow: 0.05em 0.05em 0 var(--black);
}
.ab-intro__line em, .idcard__name em, .project__title em, .badge__name em, .ab-cta em, .lede em { color: var(--phos); text-shadow: none; }

/* oval badges */
.pill {
  border: 2px solid var(--ink);
  font-weight: 400;
}
.pill:hover,
.pill:focus-visible {
  color: var(--cream);
  background-color: var(--blue);
  border-color: var(--blue);
  box-shadow: 4px 4px 0 var(--black);
}

.ab-cta .pill { border-color: var(--cream); }
.ab-cta .pill:hover { box-shadow: 4px 4px 0 var(--cream); }

/* section switch: outlined tiles, the open one goes black */
.switch__tab {
  background-color: transparent;
  border: 2px solid var(--black);
}
.switch__tab:hover { box-shadow: 6px 6px 0 var(--blue); border-color: var(--black); }
.switch__tab[aria-selected="true"] { background-color: var(--black); box-shadow: 6px 6px 0 var(--blue); }

/* tool tiles and other hovers: flat cobalt instead of glow */
.tools li:hover { background-color: rgba(58, 87, 196, 0.1); color: var(--ink); }
.tools li:hover svg { filter: none; }
.icon-btn:hover, .icon-btn:focus-visible { color: var(--cream); background-color: var(--blue); box-shadow: 4px 4px 0 var(--cream); border-color: var(--blue); }
.hud__nav a:hover, .hud__nav a[aria-current="page"], .hud__mark:hover, .hud__mark[aria-current="page"] { color: var(--cream); text-shadow: none; }
.hud__nav a[aria-current="page"]::before { content: none; }
.hud__nav a[aria-current="page"] { text-decoration: underline 2px var(--phos); text-underline-offset: 7px; }

.project-cover, .project__media, .slide, .shot img, .event-video video, .loop__video video, .prep img, .prep video { border-color: var(--black); }
.project:hover .project__media { box-shadow: 8px 8px 0 var(--blue); border-color: var(--black); }

.site-foot { border-top: 2px solid var(--black); color: var(--mute); }
.site-foot a { color: var(--ink); }

.contact__email:hover { color: var(--blue); text-shadow: none; }
.signal i { background: var(--phos); box-shadow: none; }
.idcard__frame::after { background: radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.35)); }

/* ==========================================================
   READABLE LABELS — nothing smaller than 12px
   ========================================================== */
.site-foot, .idcard__role, .fields dt, .module h2 span, .ab-head span, .ab-edu__degree,
.tools small, .ab-quest__label, .project__meta, .project__status, .client__name,
.project-facts dt, .switch__label { font-size: 12px; }
.idcard__stamp small, .module h3.sub, .badge__head, .icon-btn { font-size: 11.5px; }

/* ==========================================================
   TABLETS (561–860px)
   ========================================================== */
@media (min-width: 561px) and (max-width: 860px) {
  /* tabs stay side by side instead of three tall tiles */
  .switch__list { grid-template-columns: repeat(var(--tabs, 2), minmax(0, 1fr)); gap: 12px; }
  .switch__tab { padding: 16px 16px 18px; }
  .switch__title { font-size: clamp(20px, 3vw, 26px); }
  .switch__desc { font-size: 13px; }
  .project-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-facts div + div { border-top: 0; }
  .project-facts div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .project-facts div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
  .project-facts div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ab-section, .ab-offscreen, .ab-cta { margin-top: clamp(64px, 9vh, 96px); }
}

/* ==========================================================
   PHONES (≤560px) — calmer spacing, nothing cut off
   ========================================================== */
@media (max-width: 560px) {
  .hud { font-size: 12px; letter-spacing: 0.03em; }
  .hud__nav { gap: 14px; }

  /* home: name on top, all three TVs fit in the same screen */
  .home { display: flex; flex-direction: column; align-items: stretch; min-height: calc(100svh - var(--header-h)); padding-bottom: 8px; }
  .home__note { order: -1; padding: 3vh 0 0; max-width: none; }
  .home__note p { margin-bottom: 12px; }
  .home__name { margin-bottom: 12px; font-size: 32px; }
  .stage { flex: 1 1 auto; height: auto; min-height: 380px; }

  .page { padding-top: 28px; padding-bottom: 64px; }
  .page-title { font-size: clamp(48px, 15vw, 64px); }

  /* about: shorter gaps, one tool per row */
  .ab-section, .ab-offscreen, .ab-cta { margin-top: 64px; }
  .ab-intro { margin-top: 56px; }
  .ab-offscreen { gap: 16px; }
  .ab-head { flex-wrap: wrap; }
  .tools { grid-template-columns: 1fr; gap: 8px; }
  .tools li { padding: 12px 14px; }
  .tools li > span:not(.tool-mark) { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
  .ab-cta { padding-top: 28px; }

  /* project pages: tabs become one compact row */
  .switch__list { grid-template-columns: repeat(var(--tabs, 2), minmax(0, 1fr)); gap: 8px; }
  .switch__tab { align-content: center; padding: 12px 10px; text-align: center; }
  .switch__label, .switch__desc { display: none; }
  .switch__title { font-size: 16px; line-height: 1.15; }
  .switch__tab:hover, .switch__tab[aria-selected="true"] { box-shadow: 4px 4px 0 var(--blue); }
  .project-hero__lede { font-size: 15px; }
  .project-facts div { padding: 12px 0; }
  .project-facts dd { font-size: 14px; }
  .project-cover, .proposal { margin-bottom: 32px; }
  .proposal { padding: 20px 18px; border-left-width: 4px; }
  .panel__head { margin-bottom: 20px; }
  .panel__actions { width: 100%; }
  .slides { gap: 10px; }

  .project__meta { gap: 4px 12px; letter-spacing: 0.06em; }

  .site-foot { padding-top: 22px; }
}

/* ==========================================================
   ABOUT — Experience, Education and Side quests on a tinted panel
   ========================================================== */
.ab-panel {
  padding: clamp(24px, 3.5vw, 44px) clamp(20px, 3.5vw, 48px);
  background: var(--cream-2);
  border: 1px solid var(--line-2);
}
.ab-panel .ab-head { border-bottom-color: var(--black); }
.ab-panel .ab-exp li:last-child,
.ab-panel .ab-edu li:last-child { border-bottom: 0; padding-bottom: 0; }

@media (max-width: 560px) {
  /* phones: every entry gets its own light card, with air between them */
  .ab-panel { padding: 22px 14px 14px; }
  .ab-panel .ab-head { margin-bottom: 16px; }
  .ab-exp, .ab-edu, .ab-quests { display: grid; gap: 12px; }
  .ab-exp li, .ab-edu li, .ab-panel .ab-exp li:first-child, .ab-panel .ab-exp li:last-child, .ab-panel .ab-edu li:last-child {
    padding: 18px 16px;
    background: var(--cream);
    border: 1px solid var(--line);
  }
  .ab-edu li { gap: 6px; }
  .ab-exp__role { margin: 8px 0 12px; line-height: 1.5; }
  .ab-exp__role span { display: block; margin-top: 4px; }
  .ab-exp__desc, .ab-quest p:not([class]) { font-size: 14.5px; line-height: 1.7; }
  .ab-exp__link { margin-top: 14px; }
  .ab-quest { padding: 18px 16px 18px 18px; background: var(--cream); border: 1px solid var(--line); border-left: 3px solid var(--blue); }
}