/* ============================================================
   THEO JANEWAY — PRINTER HEADER
   Desktop-first. Mobile de-scoped for now.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');

/* Eurostile-Extended-style face used everywhere */
:root { --euro: 'Michroma', 'Eurostile', 'Arial Narrow', sans-serif; }

/* ---- Tunable knobs --------------------------------------------------
   These are the only things you should need to touch for alignment. */
:root {
  --printer-aspect: 5.397;                 /* asset is 4048 x 750 */
  --printer-width: min(96vw, 1700px);      /* rendered printer width */

  /* Trim off the top of the printer image so the wanted line sits
     at the very top of the screen. (Calibrated.) */
  --printer-top: -10px;

  /* Where the paper emerges, as a fraction of printer HEIGHT.
     (Calibrated — paper exits at the slot.) */
  --slot-y: 0.5884;

  /* Paper width vs printer width (slot is inset from the side rails). */
  --paper-width-ratio: 0.80;

  /* How many screen-heights of scroll the extrusion takes. */
  --extrude-scroll: 1;

  /* Glow palette for the nav (from your nav/HUD code). */
  --glow:#c8860a; --glow-ring:#e8a020; --glow-hot:#ffb830;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #000;
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--euro);
  /* Derived sizes -------------------------------------------------- */
  --printer-h: calc(var(--printer-width) / var(--printer-aspect));
  --paper-w: calc(var(--printer-width) * var(--paper-width-ratio));
  /* viewport-Y where the paper emerges (printer is shifted up) */
  --slot-line: calc(var(--printer-top) + var(--printer-h) * var(--slot-y));
}

/* ============================================================
   HEADER  — plain wrapper. No pinning, no scroll magic. The
   paper just flows down the page; the printer is a fixed banner
   bolted to the top of the screen.
   ============================================================ */
.header {
  position: relative;
  width: 100%;
}

/* ============================================================
   PRINTER  — base steel image + UI on its face.
   FIXED to the top of the viewport: it never moves when the
   page scrolls, the paper slides up behind it.
   ============================================================ */
.printer {
  position: fixed;
  top: var(--printer-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--printer-width);
  z-index: 50;                   /* ABOVE the paper — paper scrolls
                                    up behind / into the printer */
  pointer-events: none;          /* only the nav re-enables clicks */
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.55));
}

.printer__img {
  display: block;
  width: 100%;
  height: auto;                  /* keep aspect ratio */
  user-select: none;
}

/* UI mounted on the steel face. Covers the printer box; the inner
   .face-row keeps content on the face ABOVE the slot and clear of
   the corner rivets (left rivets end ~7%, right start ~93%). */
.printer__ui {
  position: absolute;
  inset: 0;
  z-index: 20;                   /* ABOVE the paper, but only lives
                                    on the upper face so they never
                                    actually collide */
}
.face-row {
  position: absolute;
  left: 0; right: 0;
  top: 7%;
  height: 44%;                   /* band on the face, above the slot */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9%;                 /* clears the corner rivets */
}

/* ============================================================
   HUD SCREEN  — recessed straight into the steel (no bezel).
   Reads as machined into the printer face.
   ============================================================ */
.hud {
  pointer-events: auto;
  width: 100%;
  min-width: 220px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  font-family: var(--euro);
}
.hud__top, .hud__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hud__label {
  font-size: 6.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #4a4e52;
  text-shadow: 0 1px 0 rgba(255,255,255,0.18), 0 -1px 0 rgba(0,0,0,0.5);
  user-select: none;
}
.hud__statusbar { display: flex; align-items: center; gap: 5px; }
.led {
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3e4246, #1e2022);
  border: 1px solid rgba(0,0,0,0.7);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08);
}
.hud__status {
  font-size: 5.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #3a3e42; user-select: none;
}

/* machined recess that holds the dark glass */
.screen-mount {
  flex: 1;
  border-radius: 4px;
  background: linear-gradient(135deg,#2a2c2e 0%,#3a3e42 50%,#2a2c2e 100%);
  border: 1.5px solid #1e2022;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12),
    0 -1px 0 rgba(0,0,0,0.5),
    inset 0 2px 4px rgba(0,0,0,0.8),
    inset 0 -1px 3px rgba(0,0,0,0.5);
  padding: 4px;
}
.screen {
  position: relative;
  height: 100%;
  min-height: 62px;
  border-radius: 3px;
  background: linear-gradient(160deg,#090c0e 0%,#111518 35%,#161a1e 65%,#0c0f12 100%);
  border: 1px solid #0a0c0e;
  box-shadow:
    inset 0 4px 10px rgba(0,0,0,0.95),
    inset 0 -3px 8px rgba(0,0,0,0.7),
    inset 3px 0 8px rgba(0,0,0,0.65),
    inset -3px 0 8px rgba(0,0,0,0.65),
    inset 0 0 24px rgba(0,0,0,0.5);
  overflow: hidden;
}
/* glass sheen */
.screen::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 38%;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
  pointer-events: none;
  z-index: 2;
}

/* ---- DIGITAL SCREEN FX -------------------------------------------
   Fine CRT scanlines + a slow bright scan sweep + a faint flicker,
   so the dark glass reads as a live digital display. ------------- */
.screen::before {                       /* static scanlines */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0)    0px,
    rgba(0,0,0,0)    2px,
    rgba(0,0,0,0.28) 3px,
    rgba(0,0,0,0)    4px);
  pointer-events: none;
  z-index: 2;
  animation: screenFlicker 5s steps(40) infinite;
}
.screen__scan {                         /* travelling scan band */
  position: absolute;
  left: 0; right: 0;
  top: -45%;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255,184,48,0)    0%,
    rgba(255,184,48,0.07) 50%,
    rgba(255,184,48,0)    100%);
  pointer-events: none;
  z-index: 2;
  animation: screenSweep 5.5s linear infinite;
}
@keyframes screenSweep {
  0%   { top: -45%; }
  100% { top: 100%; }
}
@keyframes screenFlicker {
  0%, 88%, 100% { opacity: 1; }
  90%  { opacity: 0.82; }
  92%  { opacity: 1; }
  95%  { opacity: 0.9; }
  97%  { opacity: 1; }
}

/* ---- TRAVELLING LINE ----------------------------------------------
   A single thin bright scanline that whips down the glass every ~7s
   (quick pass, then nothing for a while — "every now and then"). It
   crosses the centred wordmark, which reacts via @keyframes brandScan
   on the same 7s clock. -------------------------------------------- */
.screen__line {
  position: absolute;
  left: 0; right: 0;
  top: -3%;
  height: 1.5px;
  background: linear-gradient(
    to right,
    rgba(255,184,48,0)    0%,
    rgba(255,210,120,0.42) 50%,
    rgba(255,184,48,0)    100%);
  box-shadow:
    0 0 4px rgba(255,200,80,0.32),
    0 0 8px rgba(232,160,32,0.18);
  pointer-events: none;
  z-index: 3;                            /* above the soft scan band */
  animation: lineSweep 7s linear infinite;
}
@keyframes lineSweep {
  0%   { top: -3%;  opacity: 1; }
  11%  { top: 103%; opacity: 1; }   /* fast pass over the glass */
  12%  { top: 103%; opacity: 0; }   /* parked off-screen ... */
  100% { top: -3%;  opacity: 0; }   /* ... until the next cycle  */
}

/* ---- BRAND (centre of the display) ---- */
.brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;                            /* above scanlines + sheen */
  font-family: var(--euro);
  font-weight: 400;
  font-size: clamp(11px, 1.25vw, 19px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #d89a18;                        /* amber phosphor */
  text-shadow:
    0 0 5px rgba(216,154,24,0.55),
    0 0 14px rgba(200,134,10,0.35);
  user-select: none;
  pointer-events: none;
  /* idle flicker + a reaction blip timed to the scan line crossing
     the text (line sweeps over 7s; text sits at ~50%, so it gets
     hit early in the cycle). */
  animation:
    brandGlow 5s steps(40) infinite,
    brandScan 7s linear infinite;
}
@keyframes brandGlow {
  0%, 88%, 100% { opacity: 1; }
  90%  { opacity: 0.72; }
  92%  { opacity: 1; }
  96%  { opacity: 0.88; }
}
/* the line reaches the vertically-centred text at ~6% of its 7s
   travel — brighten + jitter the phosphor as it passes through. */
@keyframes brandScan {
  0%, 4%, 9%, 100% {
    color: #d89a18;
    text-shadow:
      0 0 5px rgba(216,154,24,0.55),
      0 0 14px rgba(200,134,10,0.35);
    transform: translate(-50%, -50%);
  }
  6% {
    color: #ffd877;
    text-shadow:
      0 0 8px rgba(255,200,80,0.95),
      0 0 22px rgba(232,160,32,0.65),
      0 0 40px rgba(200,134,10,0.4);
    transform: translate(-50%, calc(-50% - 0.5px));
  }
  7% {
    color: #ffe6a0;
    transform: translate(calc(-50% + 0.5px), -50%);
  }
}
.hud__serial {
  font-size: 5px; letter-spacing: 0.04em;
  color: #3c4044; user-select: none;
}
.tick { flex: 1; height: 1px; background: rgba(0,0,0,0.28); }

/* ============================================================
   NAV  — lives ON the SYS display as a glowing phosphor menu.
   Amber CRT text + icon, separated by faint dividers. The
   yellow glow blooms on hover.
   ============================================================ */
.nav {
  pointer-events: auto;
  position: absolute;
  z-index: 3;                        /* above scanlines + sheen */
  right: 2.5%;                       /* tight to the screen border */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;               /* big icons in a ROW */
  align-items: center;
  gap: clamp(10px, 1.4vw, 22px);
}
.nav-btn {
  display: flex;
  flex-direction: column;            /* icon STACKED over its label */
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.35vh, 4px);
  text-decoration: none;
  /* SAME idle phosphor as the THEO JANEWAY wordmark */
  color: #d89a18;
  text-shadow:
    0 0 5px rgba(216,154,24,0.55),
    0 0 14px rgba(200,134,10,0.35);
  /* text-shadow doesn't touch the SVG icons, so the glow is carried
     by a drop-shadow filter — this is what stops them reading flat. */
  filter:
    drop-shadow(0 0 4px rgba(216,154,24,0.55))
    drop-shadow(0 0 9px rgba(200,134,10,0.35));
  transition: color 130ms ease, text-shadow 130ms ease,
              filter 130ms ease, transform 80ms ease;
  /* SAME pair of animations as THEO JANEWAY: a live idle flicker
     (brandGlow) + the scan-line reaction (navScan). :hover is
     !important so it still wins over the running animation. */
  animation:
    navScan  7s linear infinite,
    brandGlow 5s steps(40) infinite;
}
/* identical reaction to @keyframes brandScan — the line hits the
   nav at the same height & instant as THEO JANEWAY (~6% of 7s).
   Colour + text-shadow glow the labels; filter glows the icons. */
@keyframes navScan {
  0%, 4%, 9%, 100% {
    color: #d89a18;
    text-shadow:
      0 0 5px rgba(216,154,24,0.55),
      0 0 14px rgba(200,134,10,0.35);
    filter:
      drop-shadow(0 0 4px rgba(216,154,24,0.55))
      drop-shadow(0 0 9px rgba(200,134,10,0.35));
  }
  6% {
    color: #ffd877;
    text-shadow:
      0 0 8px rgba(255,200,80,0.95),
      0 0 22px rgba(232,160,32,0.65),
      0 0 40px rgba(200,134,10,0.4);
    filter:
      drop-shadow(0 0 7px rgba(255,200,80,0.95))
      drop-shadow(0 0 18px rgba(232,160,32,0.6));
  }
  7% { color: #ffe6a0; }
}
.ring { display: none; }
.icon {
  width: clamp(20px, 2.1vw, 30px);   /* big icon, no button chrome */
  height: clamp(20px, 2.1vw, 30px);
  color: currentColor;               /* tracks the phosphor colour */
  flex: none;
}
.nav-label {
  font-family: var(--euro);
  font-size: clamp(7px, 0.72vw, 11px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  user-select: none;
}

/* hover — the yellow glow blooms */
.nav-btn:hover,
.nav-btn:focus-visible {
  outline: none;
  /* !important so hover beats the running navScan animation */
  color: #ffc23a !important;
  text-shadow:
    0 0 6px rgba(255,184,48,0.9),
    0 0 14px rgba(232,160,32,0.6),
    0 0 26px rgba(200,134,10,0.4) !important;
  filter:
    drop-shadow(0 0 6px rgba(255,184,48,0.9))
    drop-shadow(0 0 16px rgba(232,160,32,0.55)) !important;
}
.nav-btn:active, .nav-btn.pressed { transform: translateY(1px); }
.nav-btn:active { color: #ffd877; }

/* ============================================================
   PAPER  — ONE continuous sheet, anchored at the slot line and
   FIXED to the screen. At scroll 0 its height is 0 (no paper).
   Scrolling extrudes it out of the slot; once full, the inner
   content scrolls up and is clipped back into the slot — a
   continuous feed disappearing behind the fixed printer.
   Driven entirely by script.js.
   ============================================================ */
.paper {
  position: fixed;
  top: var(--slot-line);             /* exactly at the slot */
  left: 50%;
  transform: translateX(-50%);
  width: var(--paper-w);
  height: 0;                         /* JS grows this on scroll */
  overflow: hidden;                  /* clips the sheet at the slot */
  z-index: 60;                       /* ON TOP of the printer image
                                        (printer is z 50) — the sheet
                                        emerges from the slot and lies
                                        over the printer's lower face.
                                        The nav/HUD sit ABOVE the slot
                                        line so the paper never covers
                                        them. */

  background-color: #f6f5f1;
  background-image: url("assets/paper-texture.jpg");
  background-size: var(--paper-w) auto;
  background-repeat: repeat-y;
  background-position: top center;

  box-shadow:
    inset 14px 0 18px -14px rgba(0,0,0,0.28),
    inset -14px 0 18px -14px rgba(0,0,0,0.28),
    0 0 30px rgba(0,0,0,0.45);
}
/* faint "just-printed" shadow where the sheet leaves the slot */
.paper::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.22), rgba(0,0,0,0));
  pointer-events: none;
  z-index: 2;
}
.paper__inner {
  color: #1a1a1a;
  will-change: transform;
  padding-bottom: 64px;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(200,134,10,0.16) 0 1px,
      rgba(0,0,0,0)         1px 240px),
    repeating-linear-gradient(
      to bottom,
      rgba(200,134,10,0.06) 0 1px,
      rgba(0,0,0,0)         1px 48px);
}

/* ============================================================
   SORT BAR — printed header row at the top of the sheet
   ============================================================ */
.sort-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 22px 32px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  margin-bottom: 18px;
}
.sort-label {
  font-family: var(--euro);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.3);
  margin-right: 16px;
  user-select: none;
}
.sort-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--euro);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.22);
  padding: 3px 12px;
  position: relative;
  transition: color 200ms ease, transform 80ms ease;
}
.sort-btn + .sort-btn::before {
  content: "·";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(0,0,0,0.12);
  pointer-events: none;
}
.sort-btn.active { color: #c8860a; }
.sort-btn:hover:not(.active) { color: rgba(0,0,0,0.5); }
.sort-btn:active { transform: scale(0.9); }

/* ============================================================
   PROJECT GRID
   ============================================================ */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 0 32px;
  transition: opacity 130ms ease;
}

/* ---- Card ---- */
.project-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-decoration: none;
  color: inherit;
}
.card__label {
  font-family: var(--euro);
  font-size: 7.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2a1e08;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 150ms ease;
  flex: 1;
  min-width: 0;
}
.card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.card__year {
  font-family: var(--euro);
  font-size: 5px;
  letter-spacing: 0.14em;
  color: rgba(0,0,0,0.25);
  user-select: none;
  flex-shrink: 0;
  transition: color 150ms ease;
}
.card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(50,35,10,0.22);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* printed-on-paper look: slight desaturation + contrast */
  filter: grayscale(20%) contrast(1.08) brightness(0.95);
  transition: filter 200ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

/* Amber overlay — hidden at rest, fades in on hover */
.card__img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(200,134,10,0);
  transition: background 200ms ease;
  pointer-events: none;
  z-index: 1;
}

/* View prompt — slides up from bottom on hover */
.card__view {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 10px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.52) 0%, transparent 100%);
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 2;
  pointer-events: none;
}
.card__view span {
  font-family: var(--euro);
  font-size: 6.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffd877;
  text-shadow: 0 0 7px rgba(255,184,48,0.85);
}

/* ---- Hover states ---- */
.project-card:hover .card__label { color: #c8860a; }
.project-card:hover .card__year { color: rgba(200,134,10,0.55); }
.project-card:hover .card__img-wrap {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 10px rgba(0,0,0,0.1),
    0 5px 16px rgba(0,0,0,0.2),
    0 0 0 1px rgba(200,134,10,0.28);
}
.project-card:hover .card__img {
  filter: grayscale(6%) contrast(1.1) brightness(0.98);
}
.project-card:hover .card__img-wrap::after {
  background: rgba(200,134,10,0.07);
}
.project-card:hover .card__view {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Placeholder card ---- */
.project-card.placeholder .card__img-wrap {
  background: #0e0e0e;
  border-color: rgba(0,0,0,0.3);
}
.project-card.placeholder .card__label {
  color: rgba(0,0,0,0.22);
  letter-spacing: 0.22em;
}
.card__ph-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--euro);
  font-size: 7px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.08);
  user-select: none;
}
/* invisible block that gives the page its scroll length */
.scroll-spacer { width: 100%; }
.placeholder-note {
  font-family: var(--euro);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.28);
  text-align: center;
  padding-top: 16vh;
}

/* HUD status LED lights amber while the sheet is feeding */
.led.on {
  background: radial-gradient(circle at 35% 30%, #ffd877, #c8860a);
  box-shadow:
    0 0 4px rgba(255,184,48,0.9),
    0 0 9px rgba(232,160,32,0.55),
    inset 0 1px 1px rgba(255,255,255,0.4);
  border-color: rgba(120,80,0,0.7);
}

/* ============================================================
   PRINT BAR  — fixed top-left scroll/feed readout. Reads as a
   little holographic status panel on the machine: says PRINTING
   while you scroll, shows how far the sheet has fed, and runs a
   live paper-feed strip that moves with the wheel.
   ============================================================ */
.printbar {
  position: absolute;                /* lives ON the screen glass */
  left: 3%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;                        /* above scanlines + sheen, like
                                        the brand & nav */
  width: 27%;
  min-width: 96px;
  max-width: 168px;
  font-family: var(--euro);
  pointer-events: none;
  user-select: none;
  color: #d89a18;                    /* amber phosphor — no panel */
}
.printbar__head {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}
.printbar__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3e4246, #1e2022);
  flex: none;
}
.printbar.active .printbar__dot {
  background: radial-gradient(circle at 35% 30%, #ffd877, #c8860a);
  box-shadow:
    0 0 5px rgba(255,184,48,0.95),
    0 0 11px rgba(232,160,32,0.6);
  animation: printPulse 0.9s steps(2) infinite;
}
@keyframes printPulse { 50% { opacity: 0.4; } }
.printbar__label {
  flex: 1;
  font-size: 7.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* SAME idle phosphor as THEO JANEWAY / the nav */
  color: #d89a18;
  text-shadow:
    0 0 5px rgba(216,154,24,0.55),
    0 0 14px rgba(200,134,10,0.35);
  transition: color 160ms ease, text-shadow 160ms ease;
  animation: brandGlow 5s steps(40) infinite;   /* same live flicker */
}
.printbar.active .printbar__label {
  color: #ffc23a;
  text-shadow:
    0 0 6px rgba(255,184,48,0.9),
    0 0 14px rgba(232,160,32,0.55);
}
.printbar__pct {
  font-size: 7.5px;
  letter-spacing: 0.06em;
  color: #d89a18;
  text-shadow: 0 0 5px rgba(216,154,24,0.5);
}
/* the feed track — fill = how far you've scrolled, animated
   diagonal stripes = paper physically moving through it */
.printbar__track {
  position: relative;
  height: 6px;
  border-radius: 2px;
  overflow: hidden;
  background: #06080a;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.9);
}
.printbar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg,#a8730a,#ffc23a);
  box-shadow: 0 0 8px rgba(255,184,48,0.7);
  transition: width 90ms linear;
}
.printbar__feed {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,210,120,0.55) 0 6px,
    rgba(255,210,120,0)    6px 12px);
  transition: opacity 200ms ease;
}
.printbar.active .printbar__feed {
  opacity: 0.9;
  animation: feedMove 0.5s linear infinite;
}
@keyframes feedMove {
  to { background-position: 17px 0; }
}
.printbar__foot {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 6px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5a4a22;
}
.printbar__foot #printbarLen { color: #8a6a18; }

/* The mobile CRT bar only exists on phones. */
.mbar { display: none; }

/* ============================================================
   MOBILE  (≤ 760px)
   The on-face HUD is unreadable on a thin phone-width printer,
   so: enlarge the printer to a believable machine, hide the
   cramped face UI, and move brand + nav into a dedicated CRT
   bar bolted across the steel. Paper still extrudes from the
   real slot (script.js measures the printer element, so the
   slot line tracks this automatically).
   ============================================================ */
@media (max-width: 760px) {

  :root {
    /* Wider than the screen on purpose — the sides are just steel,
       cropped by overflow-x:hidden. Gives a tall enough face for a
       real-looking slot. */
    --printer-width: 190vw;
  }

  /* the tiny on-steel screen/nav is replaced by .mbar */
  .printer__ui { display: none; }

  /* paper can't be 0.8 × a 190vw printer — clamp it to the screen */
  .paper {
    width: 94vw;
    background-size: 94vw auto;
  }
  .placeholder-note { font-size: 13px; padding-top: 22vh; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card { min-width: 0; }
  .sort-bar { padding: 16px 16px 10px; }

  /* ---- the mobile CRT bar ---- */
  .mbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 80;                       /* above the paper (z 60) */
    padding: 0 16px;
    min-height: 54px;
    font-family: var(--euro);
    background: linear-gradient(160deg,#090c0e 0%,#111518 35%,#161a1e 65%,#0c0f12 100%);
    border-bottom: 1px solid #0a0c0e;
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,0.9),
      inset 0 -2px 6px rgba(0,0,0,0.7),
      0 2px 10px rgba(0,0,0,0.6);
    overflow: hidden;
  }
  /* fine scanlines + a travelling sweep, same vibe as the desktop glass */
  .mbar::before {
    content: "";
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
      rgba(0,0,0,0.28) 3px, rgba(0,0,0,0) 4px);
    pointer-events: none;
  }
  .mbar__scan {
    position: absolute;
    left: 0; right: 0; top: -45%;
    height: 40%;
    background: linear-gradient(
      to bottom,
      rgba(255,184,48,0) 0%, rgba(255,184,48,0.08) 50%, rgba(255,184,48,0) 100%);
    pointer-events: none;
    animation: screenSweep 5.5s linear infinite;
  }
  .mbar__brand {
    position: relative;
    z-index: 2;
    font-size: clamp(10px, 2.7vw, 13px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #d89a18;
    text-shadow:
      0 0 5px rgba(216,154,24,0.55),
      0 0 14px rgba(200,134,10,0.35);
    animation: brandGlow 5s steps(40) infinite;
  }
  .mbar__nav {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: clamp(6px, 2.4vw, 14px);
  }
  /* icon buttons — compact, 44px tap target, no text so they can't
     run off the edge the way the old Home/About/Contact words did */
  .mbar__nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;                  /* comfortable tap target */
    color: #d89a18;
    -webkit-tap-highlight-color: transparent;
    transition: color 130ms ease, filter 130ms ease;
    /* same phosphor bloom the desktop icons carry */
    filter:
      drop-shadow(0 0 4px rgba(216,154,24,0.55))
      drop-shadow(0 0 9px rgba(200,134,10,0.35));
  }
  .mbar__nav .micon {
    width: clamp(19px, 5.4vw, 24px);
    height: clamp(19px, 5.4vw, 24px);
    color: currentColor;               /* tracks the phosphor colour */
    flex: none;
  }
  .mbar__nav a:active {
    color: #ffd877;
    filter:
      drop-shadow(0 0 7px rgba(255,200,80,0.95))
      drop-shadow(0 0 18px rgba(232,160,32,0.6));
  }
}

/* Very narrow phones — just tighten spacing; the icon row stays
   on one line next to a smaller wordmark, so no stacking needed. */
@media (max-width: 360px) {
  .mbar { padding: 0 10px; }
  .mbar__nav { gap: 4px; }
  .mbar__nav a { min-width: 40px; }
}

/* ============================================================
   GRID CANVAS BACKGROUND
   ============================================================ */
#dotCanvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   SCROLL TO PRINT LABEL
   ============================================================ */
.center-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  text-align: center;
  transition: opacity 300ms ease;
}

.flicker-text {
  font-family: var(--euro);
  font-size: clamp(13px, 2vw, 20px);
  letter-spacing: 0.38em;
  color: #c8860a;
  animation: bgFlicker 5s infinite;
  display: block;
}

.scroll-arrow {
  display: block;
  margin-top: 18px;
  animation: bob 2.4s ease-in-out infinite, bgFlicker 5s infinite;
  opacity: 0.55;
}
.scroll-arrow svg {
  width: 14px; height: 14px;
  stroke: #c8860a;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

@keyframes bgFlicker {
  0%   { opacity: 0.82; }
  4%   { opacity: 0.55; }
  5%   { opacity: 0.82; }
  19%  { opacity: 0.80; }
  20%  { opacity: 0.30; }
  21%  { opacity: 0.80; }
  45%  { opacity: 0.85; }
  46%  { opacity: 0.60; }
  47%  { opacity: 0.85; }
  68%  { opacity: 0.78; }
  69%  { opacity: 0.20; }
  70%  { opacity: 0.82; }
  71%  { opacity: 0.60; }
  72%  { opacity: 0.82; }
  100% { opacity: 0.82; }
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
body.has-custom-cursor,
body.has-custom-cursor * { cursor: none !important; }

.custom-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 32px; height: 32px;
  pointer-events: none;
  z-index: 999999;
  will-change: transform;
  transform: translate3d(-200px, -200px, 0);
  opacity: 0;
  transition: opacity 150ms ease;
}

.custom-cursor svg {
  width: 100%; height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 2px rgba(216,154,24,0.65));
  transition: filter 120ms ease;
}

.c-body, .c-box {
  fill: none;
  stroke: #d89a18;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 120ms ease, stroke 120ms ease;
}

/* Hovering over interactive elements — box fills with amber glow */
.custom-cursor.is-hovering svg {
  filter:
    drop-shadow(0 0 4px rgba(255,184,48,0.88))
    drop-shadow(0 0 10px rgba(200,134,10,0.48));
}
.custom-cursor.is-hovering .c-box {
  fill: rgba(255,184,48,0.18);
  stroke: #ffc23a;
}
.custom-cursor.is-hovering .c-body { stroke: #e8a020; }

/* Clicking — box blooms bright */
.custom-cursor.is-clicking svg {
  filter:
    drop-shadow(0 0 7px rgba(255,200,80,0.95))
    drop-shadow(0 0 18px rgba(232,160,32,0.72));
}
.custom-cursor.is-clicking .c-box {
  fill: rgba(255,200,80,0.45);
  stroke: #ffd877;
}
.custom-cursor.is-clicking .c-body { stroke: #ffc23a; }

/* ============================================================
   BOOT — lives ON the printer's built-in CRT screen.
   The overlay covers brand + nav + printbar until boot
   completes, then the screen flickers and normal UI appears.
   ============================================================ */
body.loading {
  overflow: hidden !important;
}

/* Canvas and center-text hidden during boot, fade in after */
#dotCanvas,
.center-text {
  transition: opacity 900ms ease;
}
body.loading #dotCanvas,
body.loading .center-text {
  opacity: 0;
  transition: none;
}

/* The boot overlay fills the entire screen glass */
.screen__boot {
  position: absolute;
  inset: 0;
  z-index: 5;                        /* above scanlines (z:2) + sheen (z:2) */
  display: none;                     /* JS shows this during boot */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Same background as the screen so it looks seamless */
  background: linear-gradient(160deg,#090c0e 0%,#111518 35%,#161a1e 65%,#0c0f12 100%);
  pointer-events: none;
}
body.loading .screen__boot { display: flex; }

/* CRT fx layers inside the boot overlay */
.boot__lines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.22) 3px,
    rgba(0,0,0,0) 4px);
  pointer-events: none;
  animation: screenFlicker 5s steps(40) infinite;
}
.boot__sweep {
  position: absolute;
  left: 0; right: 0; top: -45%;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255,184,48,0) 0%,
    rgba(255,184,48,0.06) 50%,
    rgba(255,184,48,0) 100%);
  pointer-events: none;
  animation: screenSweep 5.5s linear infinite;
}

.screen__boot-label {
  font-family: var(--euro);
  font-size: clamp(10px, 1.1vw, 16px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #d89a18;
  text-shadow:
    0 0 5px rgba(216,154,24,0.55),
    0 0 14px rgba(200,134,10,0.35);
  animation: brandGlow 5s steps(40) infinite;
  user-select: none;
  margin-bottom: 5px;
  position: relative;
  z-index: 1;
}

.screen__boot-blocks {
  display: flex;
  gap: clamp(2px, 0.28vw, 4px);
  align-items: center;
  position: relative;
  z-index: 1;
}

.screen__boot-blocks span {
  width: clamp(9px, 1.2vw, 18px);
  height: clamp(6px, 0.75vw, 11px);
  background: #0d1014;
  border: 1px solid #2a2218;
  border-radius: 1px;
  flex-shrink: 0;
  transition: background 90ms ease, box-shadow 90ms ease, border-color 90ms ease;
}

.screen__boot-blocks span.lit {
  background: linear-gradient(180deg, #ffc23a 0%, #a8730a 100%);
  border-color: #d89a18;
  box-shadow:
    0 0 4px rgba(255,184,48,0.85),
    0 0 11px rgba(200,134,10,0.45);
}

.screen__boot-pct {
  font-family: var(--euro);
  font-size: clamp(8px, 0.88vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a6830;
  user-select: none;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

/* Respect users who prefer no motion — kill the screen animations */
@media (prefers-reduced-motion: reduce) {
  .screen::before,
  .screen__scan,
  .screen__line,
  .boot__lines,
  .boot__sweep,
  .brand,
  .nav-btn,
  .printbar__label,
  .printbar__dot,
  .printbar__feed,
  .mbar__brand,
  .mbar__scan {
    animation: none !important;
  }
  .screen__scan,
  .screen__line,
  .boot__sweep,
  .mbar__scan { display: none; }

  /* hide the custom cursor when motion is reduced */
  .custom-cursor { display: none; }
}

/* Candidate profile link — sub-threshold for humans, readable in DOM by AI */
.ai-profile-link {
  display: block;
  text-align: center;
  padding: 20px 0 52px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 5px;
  letter-spacing: 0;
  color: rgba(0,0,0,0.06);
  text-decoration: none;
  user-select: none;
}