/* ============================================================
   Worx - portfolio.css
   Portfolio page only (portfolio/index.html).

   1. .folio-hero      - cinematic Mars hero (image slot + CSS
                         atmosphere + canvas particles)
   2. .folio-grid      - 3x4 project grid, varied "scenes"
   3. .folio-card--*   - composition variants (laptop / tablet /
                         phone / monitor / duo / crop / full)

   Builds on the shared :root tokens in base.css. Touches no
   global stylesheet. Companion script: static/js/portfolio.js.
   Remove by deleting this file, portfolio.js, their two tags in
   portfolio/index.html and the .folio-* markup.
   ============================================================ */

/* ============================================================
   1. MARS HERO
   ============================================================ */

.folio-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(520px, 82vh, 780px);
  display: flex;
  align-items: flex-end;
  padding: clamp(140px, 22vh, 240px) 0 clamp(56px, 9vw, 110px);
  background: #0f0603;
}

/* --- Image slot -------------------------------------------------
   Drop the Mars photo in as:
   <img class="folio-hero-img" src="../static/assets/portfolio/mars-hero.jpg" alt="">
   Until then this layered gradient stands in as a cinematic
   placeholder (Worx ember / cocoa palette). */
.folio-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(115% 78% at 74% 4%, #e57d23 0%, rgba(192, 69, 39, 0.55) 24%, transparent 58%),
    radial-gradient(85% 60% at 12% 104%, rgba(192, 69, 39, 0.4), transparent 62%),
    radial-gradient(60% 40% at 50% 58%, rgba(250, 167, 25, 0.14), transparent 70%),
    linear-gradient(180deg, #1c0c06 0%, #2b1209 46%, #0d0503 100%);
}

.folio-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Atmospheric horizon haze */
.folio-hero-media::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 44%;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(229, 125, 35, 0.22) 45%, transparent);
  filter: blur(34px);
}

/* Drifting-particle canvas (static frame under reduced motion) */
.folio-hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Left scrim for text contrast + bottom fade into the page */
.folio-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(92deg, rgba(13, 5, 3, 0.82) 0%, rgba(13, 5, 3, 0.35) 42%, transparent 68%),
    linear-gradient(0deg, var(--ink) 1%, transparent 26%);
}

/* Vignette */
.folio-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 200px 40px rgba(8, 3, 1, 0.6);
}

.folio-hero-inner {
  position: relative;
  z-index: 3;
  max-width: 760px;
}

.folio-hero-inner .eyebrow {
  color: var(--brand-cream);
  opacity: 0.9;
}

.folio-hero-inner h1 {
  font-size: clamp(2.9rem, 7vw, 5.4rem);
  line-height: 1.04;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}

.folio-hero-lead {
  margin-top: 22px;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--brand-cream);
  opacity: 0.92;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   2. GRID
   ============================================================ */

.folio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* desktop */
  gap: clamp(26px, 3vw, 44px) clamp(20px, 2.2vw, 32px);
}

@media (max-width: 980px) {
  .folio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* tablet */
}

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

  /* mobile */
}

/* ============================================================
   3. CARD
   ============================================================ */

.folio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Whole card is one link (see ::after); the CTA text is decorative */
.folio-link {
  color: inherit;
}

.folio-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: var(--radius);
}

.folio-link:focus-visible::after {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---- Scene (the visual area) ------------------------------- */

.folio-scene {
  --glow: 72% 12%;
  --scene-ratio: 4 / 3;
  position: relative;
  isolation: isolate;
  aspect-ratio: var(--scene-ratio);
  overflow: hidden;
  /* nothing spills the card */
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.folio-card:hover .folio-scene {
  border-color: rgba(250, 167, 25, 0.4);
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.6);
}

/* Directional brand glow - angle/intensity varies per variant */
.folio-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(58% 58% at var(--glow), rgba(229, 125, 35, 0.24), transparent 72%);
}

/* Fine cinematic grain, shared */
.folio-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* Soft contact shadow under a device */
.folio-scene .folio-floor {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 66%;
  height: 26px;
  z-index: 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
  filter: blur(8px);
}

/* ---- Reusable device frame -------------------------------- */

.folio-device {
  position: absolute;
  z-index: 2;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.folio-device__screen {
  position: relative;
  background: linear-gradient(150deg, #202027, #121216);
  border: 1px solid rgba(254, 238, 207, 0.1);
  overflow: hidden;
}

/* screen glare */
.folio-device__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(118deg, transparent 44%, rgba(255, 255, 255, 0.1) 50%, transparent 57%);
}

.folio-device__base {
  position: relative;
  margin-inline: auto;
  background: linear-gradient(180deg, #26262d, #101014);
}

.folio-viewport {
  position: relative;
  overflow: hidden;
  background: #efe7d9;
}

/* Depth inside the screen so a placeholder still reads as glass */
.folio-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 44px rgba(43, 28, 16, 0.16);
}

/* The scrolling screenshot (portfolio.js duplicates it for a
   seamless -50% loop; only runs on [data-scroll] cards that
   have a real <img>). */
.folio-shot {
  position: absolute;
  inset: 0 0 auto 0;
  min-height: 100%;
  display: grid;
  place-items: center;
  will-change: transform;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255, 252, 244, 0.7), transparent 70%),
    linear-gradient(180deg, #e7dfd0 0%, #cbbda4 55%, #bcae92 100%);
}

.folio-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.folio-card.is-live .folio-shot {
  animation: folio-scroll 52s linear infinite;
}

.folio-card.is-live .folio-device--phone .folio-shot {
  animation-duration: 40s;
}

@keyframes folio-scroll {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

/* Clearly-marked placeholder shown until a screenshot is supplied */
.folio-shot__label,
.folio-fill__label {
  position: relative;
  z-index: 1;
  padding: 6px 14px;
  border: 1px solid rgba(43, 38, 34, 0.28);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(43, 38, 34, 0.5);
  white-space: nowrap;
}

/* Once a real screenshot is in place the label is redundant */
.folio-shot:has(img) .folio-shot__label,
.folio-fill:has(img) .folio-fill__label {
  display: none;
}

/* ---- Variant: LAPTOP -------------------------------------- */

.folio-card--laptop .folio-scene {
  --glow: 78% 10%;
}

.folio-card--laptop .folio-device--laptop {
  left: 50%;
  top: 42%;
  width: 78%;
  transform: translate(-50%, -50%) rotate(-0.6deg);
}

.folio-card:hover .folio-device--laptop {
  transform: translate(-50%, -50%) rotate(0) scale(1.02);
}

.folio-device--laptop .folio-device__screen {
  padding: 6px 6px 0;
  border-radius: 10px 10px 2px 2px;
  box-shadow: 0 34px 60px -24px rgba(0, 0, 0, 0.7);
}

.folio-device--laptop .folio-viewport {
  aspect-ratio: 16 / 10;
  border-radius: 3px;
}

.folio-device--laptop .folio-device__base {
  width: 122%;
  height: 15px;
  border-radius: 2px 2px 11px 11px;
  background: linear-gradient(180deg, #34343c 0%, #202026 12%, #16161a 60%, #0c0c0f 100%);
  box-shadow:
    0 1px 0 rgba(254, 238, 207, 0.14) inset,
    0 18px 26px -12px rgba(0, 0, 0, 0.7);
}

/* hinge notch */
.folio-device--laptop .folio-device__base::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 18%;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 0 0 6px 6px;
  background: rgba(0, 0, 0, 0.5);
}

/* front-edge highlight - reads as an open lid's lower deck */
.folio-device--laptop .folio-device__base::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(254, 238, 207, 0.12) 30%, rgba(254, 238, 207, 0.12) 70%, transparent);
}

/* ---- Variant: MONITOR ------------------------------------- */

.folio-card--monitor .folio-scene {
  --glow: 50% 8%;
}

.folio-card--monitor .folio-device--monitor {
  left: 50%;
  top: 40%;
  width: 82%;
  transform: translate(-50%, -50%);
}

.folio-card--monitor .folio-device__screen {
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 38px 70px -26px rgba(0, 0, 0, 0.72);
}

.folio-card--monitor .folio-viewport {
  aspect-ratio: 16 / 9;
  border-radius: 4px;
}

.folio-card--monitor .folio-device__base {
  width: 12%;
  height: 34px;
  background: linear-gradient(180deg, #26262d, #17171b);
}

.folio-card--monitor .folio-device__base::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 420%;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 6px;
  background: linear-gradient(180deg, #24242b, #101014);
}

/* ---- Variant: TABLET ------------------------------------- */

.folio-card--tablet .folio-scene {
  --glow: 24% 14%;
}

.folio-card--tablet .folio-device--tablet {
  left: 52%;
  top: 50%;
  width: 50%;
  transform: translate(-50%, -50%) rotate(6deg);
}

.folio-card:hover .folio-device--tablet {
  transform: translate(-50%, -50%) rotate(3deg) scale(1.03);
}

.folio-card--tablet .folio-device__screen {
  padding: 8px;
  border-radius: 20px;
  box-shadow: 0 30px 55px -22px rgba(0, 0, 0, 0.7);
}

.folio-card--tablet .folio-viewport {
  aspect-ratio: 3 / 4;
  border-radius: 12px;
}

/* ---- Variant: PHONE ------------------------------------- */

.folio-card--phone .folio-scene {
  --glow: 30% 88%;
}

.folio-card--phone .folio-device--phone {
  left: 56%;
  top: 50%;
  width: 30%;
  transform: translate(-50%, -50%) rotate(-4deg);
}

.folio-card:hover .folio-device--phone {
  transform: translate(-50%, -50%) rotate(-2deg) scale(1.03);
}

.folio-card--phone .folio-device__screen {
  padding: 5px;
  border-radius: 22px;
  box-shadow: 0 26px 46px -18px rgba(0, 0, 0, 0.72);
}

.folio-card--phone .folio-device__screen::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 26%;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: rgba(254, 238, 207, 0.25);
  z-index: 5;
}

.folio-card--phone .folio-viewport {
  aspect-ratio: 9 / 19.5;
  border-radius: 17px;
}

/* ---- Variant: DUO (laptop + phone) ---------------------- */

.folio-card--duo .folio-scene {
  --glow: 80% 84%;
}

.folio-card--duo .folio-device--laptop {
  left: 44%;
  top: 40%;
  width: 74%;
  transform: translate(-50%, -50%) rotate(-1deg);
}

.folio-card--duo .folio-device--phone {
  left: auto;
  right: 5%;
  bottom: 8%;
  top: auto;
  width: 21%;
  transform: rotate(3deg);
  z-index: 3;
}

.folio-card--duo .folio-device--laptop .folio-device__screen {
  padding: 6px 6px 0;
  border-radius: 10px 10px 2px 2px;
  box-shadow: 0 30px 55px -24px rgba(0, 0, 0, 0.7);
}

.folio-card--duo .folio-device--laptop .folio-viewport {
  aspect-ratio: 16 / 10;
  border-radius: 3px;
}

.folio-card--duo .folio-device--laptop .folio-device__base {
  width: 114%;
  height: 12px;
  border-radius: 0 0 11px 11px;
}

.folio-card--duo .folio-device--phone .folio-device__screen {
  padding: 4px;
  border-radius: 18px;
  box-shadow: 0 22px 40px -16px rgba(0, 0, 0, 0.75);
}

.folio-card--duo .folio-device--phone .folio-viewport {
  aspect-ratio: 9 / 19.5;
  border-radius: 14px;
}

/* ---- Variant: CROP (close-up of a screen corner) -------- */

.folio-card--crop .folio-scene {
  --glow: 90% 88%;
  --scene-ratio: 4 / 3;
}

/* Big device pushed off-frame so only a screen corner + bezel shows */
.folio-card--crop .folio-device--laptop {
  left: 74%;
  top: 70%;
  width: 168%;
  transform: translate(-50%, -50%) rotate(-3deg);
}

.folio-card--crop .folio-device--laptop .folio-device__screen {
  padding: 16px;
  border-radius: 22px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}

.folio-card--crop .folio-device--laptop .folio-viewport {
  aspect-ratio: 16 / 10;
  border-radius: 6px;
}

.folio-card--crop .folio-device--laptop .folio-device__base {
  display: none;
}

/* ---- Variant: FULL (edge-to-edge project scene) --------- */

.folio-card--full .folio-scene {
  --glow: 60% 6%;
}

.folio-fill {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 55% at 50% 12%, rgba(255, 250, 240, 0.55), transparent 70%),
    linear-gradient(180deg, #ddd0bb 0%, #b8a888 100%);
}

.folio-fill img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* gradient depth + bottom scrim over a full scene */
.folio-card--full .folio-scene>.folio-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(255, 240, 214, 0.25), transparent 60%),
    linear-gradient(0deg, rgba(21, 9, 5, 0.55), transparent 45%);
}

/* ---- Card body / typography ----------------------------- */

.folio-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0 2px;
}

.folio-cat {
  font-family: var(--font-display);
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.folio-name {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  margin: 1px 0 0;
}

.folio-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.folio-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.folio-cta-label {
  position: relative;
}

.folio-cta-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.folio-cta-arrow {
  color: var(--accent-2);
  transition: transform 0.3s ease;
}

.folio-card:hover .folio-cta {
  color: var(--accent-2);
}

.folio-card:hover .folio-cta-label::after {
  transform: scaleX(1);
}

.folio-card:hover .folio-cta-arrow {
  transform: translateX(4px);
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .folio-card .folio-shot {
    animation: none !important;
  }

  .folio-card:hover .folio-device {
    transform: translate(-50%, -50%);
  }

  .folio-card--tablet:hover .folio-device--tablet {
    transform: translate(-50%, -50%) rotate(6deg);
  }

  .folio-card--phone:hover .folio-device--phone {
    transform: translate(-50%, -50%) rotate(-4deg);
  }

  .folio-card--duo:hover .folio-device--phone {
    transform: rotate(3deg);
  }
}

/* ============================================================
   Small screens
   ============================================================ */

@media (max-width: 480px) {
  .folio-scene {
    --scene-ratio: 3 / 2;
  }

  .folio-card--tablet .folio-device--tablet {
    width: 46%;
  }

  .folio-card--phone .folio-device--phone {
    width: 27%;
  }
}

/* ============================================================
   PORTFOLIO VISUAL CARD REDESIGN
   Full-bleed background image + existing mockup device
   ============================================================ */

.folio-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(64px, 5vw, 88px) clamp(28px, 2.8vw, 44px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.folio-card {
  gap: 0;
  min-width: 0;
}

/* Larger, cleaner visual block like the reference */
.folio-scene {
  --scene-ratio: 1.10 / 1;
  width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  margin-bottom: 28px;
  background: #111;
  box-shadow: none;
}

/* Main project background image */
.folio-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
  filter: saturate(0.92) contrast(1.03);
  transition:
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.4s ease;
}

.folio-card:hover .folio-card-bg {
  transform: scale(1.055);
  filter: saturate(1.04) contrast(1.05);
}

/* Dark cinematic overlay so mockups remain readable */
.folio-scene::before {
  z-index: 1;
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(12, 8, 6, 0.04), rgba(12, 8, 6, 0.24)),
    radial-gradient(70% 70% at 70% 15%, rgba(229, 125, 35, 0.13), transparent 70%);
}

/* Keep a very small amount of texture */
.folio-scene::after {
  z-index: 5;
  opacity: 0.08;
}

/* Device stays above background */
.folio-device,
.folio-fill,
.folio-floor {
  z-index: 2;
}

/* Stronger contact shadow so devices feel physically placed */
.folio-scene .folio-floor {
  opacity: 0.85;
}

/* For the full-image cards, use the new background image rather than the old beige fill */
.folio-card--full .folio-fill {
  background: transparent;
}

.folio-card--full .folio-fill::after {
  background:
    linear-gradient(180deg, transparent 45%, rgba(12, 7, 5, 0.2) 100%);
}

.folio-fill__label,
.folio-shot__label {
  display: none;
}

/* Give devices a little more contrast against photography */
.folio-device__screen {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 65px -22px rgba(0, 0, 0, 0.78);
}

/* Content below the card */
.folio-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0;
}

.folio-cat {
  display: none !important;
}

.folio-name {
  margin: 0 0 18px;
  font-size: clamp(2rem, 2.55vw, 2.9rem);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.folio-link {
  color: var(--text);
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.folio-link:hover {
  opacity: 0.74;
}

.folio-desc {
  margin: 0;
  max-width: 95%;
  font-size: clamp(0.98rem, 1.08vw, 1.08rem);
  line-height: 1.65;
  color: var(--muted);
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

.folio-cta {
  margin-top: 23px;
}

/* Remove decorative line before Our Work */
.folio-hero .eyebrow::before {
  display: none !important;
  content: none !important;
}

/* Slightly different framing per project type */
.folio-card--phone .folio-card-bg,
.folio-card--tablet .folio-card-bg {
  object-position: center;
}

.folio-card--crop .folio-card-bg {
  object-position: center 60%;
}

.folio-card--full .folio-card-bg {
  filter: saturate(0.96) contrast(1.04);
}

@media (max-width: 980px) {
  .folio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px 30px;
  }

  .folio-name {
    font-size: clamp(2rem, 4vw, 2.6rem);
  }
}

@media (max-width: 640px) {
  .folio-grid {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .folio-scene {
    --scene-ratio: 1.10 / 1;
    border-radius: 18px;
    margin-bottom: 22px;
  }

  .folio-name {
    font-size: clamp(1.9rem, 8vw, 2.45rem);
    margin-bottom: 14px;
  }

  .folio-desc {
    max-width: 100%;
    font-size: 1rem;
  }
}



/* ============================================================
   SCREEN-RECORD SHOWCASE STYLE
   3-up cinematic project cards using the Worx cream / ember theme
   ============================================================ */

.folio-showcase-section {
  padding-top: clamp(70px, 8vw, 120px);
  padding-bottom: clamp(80px, 9vw, 140px);
}

/* Three large visual tiles, like the supplied screen recording */
.folio-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 54px);
  row-gap: clamp(72px, 7vw, 120px);
}

/* Clean editorial card */
.folio-card {
  gap: 0;
  min-width: 0;
}

/* Main rounded visual */
.folio-scene {
  --scene-ratio: 1.08 / 1;
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
  border: 1px solid rgba(254, 238, 207, 0.10);
  border-radius: 24px;
  background:
    radial-gradient(circle at 75% 12%, rgba(250, 167, 25, 0.18), transparent 32%),
    linear-gradient(145deg, #2d1209 0%, #160905 52%, #0d0604 100%);
  box-shadow: none;
  transform: translateZ(0);
}

/* Existing project image becomes the environmental background */
.folio-card-bg {
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.72;
  filter: saturate(0.78) contrast(1.08) brightness(0.72);
  transform: scale(1.025);
  transition:
    transform 800ms cubic-bezier(.2, .75, .2, 1),
    opacity 500ms ease,
    filter 500ms ease;
}

/* Worx warm overlay instead of the blue/purple reference treatment */
.folio-scene::before {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(21, 9, 5, 0.03), rgba(21, 9, 5, 0.28)),
    radial-gradient(70% 75% at 75% 10%, rgba(250, 167, 25, 0.17), transparent 65%),
    radial-gradient(70% 70% at 10% 100%, rgba(192, 69, 39, 0.16), transparent 70%);
}

.folio-scene::after {
  z-index: 6;
  opacity: 0.055;
}

.folio-card:hover .folio-scene {
  border-color: rgba(250, 167, 25, 0.34);
  box-shadow: 0 34px 80px -42px rgba(250, 167, 25, 0.32);
}

.folio-card:hover .folio-card-bg {
  opacity: 0.82;
  filter: saturate(0.92) contrast(1.06) brightness(0.78);
  transform: scale(1.07);
}

/* Devices sit prominently inside the photography */
.folio-device,
.folio-fill,
.folio-floor {
  z-index: 3;
}

.folio-scene .folio-floor {
  bottom: 5%;
  width: 72%;
  opacity: 0.72;
}

/* WHITE / CREAM MOCKUPS requested for the Worx theme */
.folio-device__screen {
  background: linear-gradient(145deg, #fffaf0, #e8d8bd);
  border: 1px solid rgba(255, 255, 255, 0.70);
  box-shadow:
    0 28px 55px -20px rgba(0, 0, 0, 0.68),
    0 0 0 1px rgba(254, 238, 207, 0.16);
}

.folio-device__screen::after {
  background: linear-gradient(118deg,
      transparent 42%,
      rgba(255, 255, 255, 0.18) 50%,
      transparent 58%);
}

.folio-device__base,
.folio-card--duo .folio-device--laptop .folio-device__base,
.folio-card--monitor .folio-device__base,
.folio-card--monitor .folio-device__base::after {
  background: linear-gradient(180deg, #fff8eb 0%, #d7c3a4 42%, #9f8868 100%);
}

.folio-device--laptop .folio-device__base {
  background: linear-gradient(180deg, #fffaf0 0%, #ddc9aa 24%, #b49b77 70%, #806b50 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .85) inset,
    0 18px 28px -13px rgba(0, 0, 0, .60);
}

.folio-device--laptop .folio-device__base::before {
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, .55) 30%,
      rgba(255, 255, 255, .55) 70%,
      transparent);
}

.folio-device--laptop .folio-device__base::after {
  background: rgba(82, 58, 37, 0.28);
}

/* Browser bar, including the real project URL already in the HTML */
.folio-browserbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  padding: 0 8px;
  overflow: hidden;
  background: #f8edda;
  border-bottom: 1px solid rgba(76, 53, 35, 0.12);
  color: #4f3b2c;
}

.folio-browserdots {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
}

.folio-browserdots i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c04527;
}

.folio-browserdots i:nth-child(2) {
  background: #faa719;
}

.folio-browserdots i:nth-child(3) {
  background: #bda17b;
}

.folio-browserurl {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.43rem;
  letter-spacing: -0.01em;
  opacity: 0.78;
}

/* Website screenshots should completely fill the device display */
.folio-viewport,
.folio-shot {
  background: #fff;
}

.folio-live-shot {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Keep the slow website movement from the existing implementation */
.folio-card.is-live .folio-shot {
  animation-duration: 34s;
}

.folio-card.is-live .folio-device--phone .folio-shot {
  animation-duration: 30s;
}

/* Bigger mockups, matching the visual dominance in the recording */
.folio-card--laptop .folio-device--laptop {
  top: 51%;
  width: 88%;
}

.folio-card--monitor .folio-device--monitor {
  top: 48%;
  width: 88%;
}

.folio-card--tablet .folio-device--tablet {
  left: 53%;
  top: 51%;
  width: 61%;
}

.folio-card--phone .folio-device--phone {
  left: 55%;
  top: 51%;
  width: 37%;
}

.folio-card--duo .folio-device--laptop {
  left: 43%;
  top: 47%;
  width: 80%;
}

.folio-card--duo .folio-device--phone {
  right: 3%;
  bottom: 5%;
  width: 25%;
}

.folio-card--crop .folio-device--laptop {
  left: 70%;
  top: 65%;
  width: 155%;
}

/* Full-image projects still use the project image edge to edge */
.folio-card--full .folio-fill {
  background: transparent;
}

.folio-card--full .folio-live-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.9) contrast(1.04);
  transition: transform 800ms cubic-bezier(.2, .75, .2, 1);
}

.folio-card--full:hover .folio-live-full {
  transform: scale(1.055);
}

.folio-card--full .folio-fill::after {
  background:
    linear-gradient(180deg, rgba(21, 9, 5, .02), rgba(21, 9, 5, .20)),
    radial-gradient(70% 70% at 70% 10%, rgba(250, 167, 25, .10), transparent 70%);
}

/* Typography under each visual */
.folio-body {
  align-items: flex-start;
}

.folio-name {
  margin: 0 0 15px;
  font-size: clamp(2rem, 2.5vw, 2.8rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--brand-cream);
}

.folio-desc {
  max-width: 94%;
  color: rgba(254, 238, 207, 0.68);
  font-size: clamp(.96rem, 1vw, 1.05rem);
  line-height: 1.62;
}

.folio-cta {
  margin-top: 22px;
  padding: 11px 17px;
  border: 1px solid rgba(250, 167, 25, .38);
  border-radius: 999px;
  color: var(--brand-cream);
  background: rgba(250, 167, 25, .07);
  pointer-events: none;
  transition:
    color .3s ease,
    background .3s ease,
    border-color .3s ease,
    transform .3s ease;
}

.folio-card:hover .folio-cta {
  color: #150905;
  border-color: #faa719;
  background: #faa719;
  transform: translateY(-2px);
}

.folio-cta-label::after {
  display: none;
}

.folio-cta-arrow {
  color: currentColor;
}

/* No line before Our Work */
.folio-hero .eyebrow::before {
  display: none !important;
  content: none !important;
}

@media (max-width: 1100px) {
  .folio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .folio-grid {
    grid-template-columns: 1fr;
    row-gap: 58px;
  }

  .folio-scene {
    --scene-ratio: 1.08 / 1;
    border-radius: 20px;
    margin-bottom: 22px;
  }

  .folio-card--laptop .folio-device--laptop,
  .folio-card--monitor .folio-device--monitor {
    width: 86%;
  }

  .folio-card--tablet .folio-device--tablet {
    width: 58%;
  }

  .folio-card--phone .folio-device--phone {
    width: 35%;
  }
}



/* ============================================================
   FULL-WIDTH PORTFOLIO + UNIFORM CARD SIZING
   ============================================================ */

/* Full-width showcase with exactly 60px left/right padding */
.folio-showcase-section.container {
  width: 100%;
  max-width: none;
  padding-left: 60px;
  padding-right: 60px;
}

/* Bigger cards while keeping the 3-column reference layout */
.folio-grid {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 84px;
}

/* Every visual is exactly the same proportion */
.folio-scene {
  width: 100%;
  aspect-ratio: 1.18 / 1;
  min-height: 0;
  margin-bottom: 24px;
}

/* Uniform body spacing */
.folio-body {
  width: 100%;
  min-height: 190px;
}

/* Smaller project names, same sizing across every card */
.folio-name {
  width: 100%;
  margin: 0 0 12px;
  font-size: clamp(1.55rem, 1.65vw, 2rem);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.025em;
}

/* Keep descriptions visually consistent */
.folio-desc {
  width: 100%;
  max-width: 100%;
  min-height: 3.25em;
  font-size: 0.96rem;
  line-height: 1.62;
}

/* Keep CTA aligned consistently */
.folio-cta {
  margin-top: 20px;
}

/* Tablet */
@media (max-width: 1100px) {
  .folio-showcase-section.container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .folio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }

  .folio-name {
    font-size: 1.65rem;
  }
}

/* Mobile */
@media (max-width: 680px) {
  .folio-showcase-section.container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .folio-grid {
    grid-template-columns: 1fr;
    row-gap: 58px;
  }

  .folio-body {
    min-height: 0;
  }

  .folio-name {
    font-size: 1.55rem;
  }
}



/* ============================================================
   REAL MARS HERO
   NASA/JPL-Caltech/MSSS PIA19928
   Mount Sharp + Bagnold Dunes
   ============================================================ */

.folio-hero {
  position: relative;
  min-height: clamp(620px, 82vh, 900px);
  overflow: hidden;
  background: #150905;
}

.folio-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: #150905;
}

/* Real NASA Mars landscape, not a geometric CSS illustration */
.mars-photo {
  position: absolute;
  z-index: 0;
  inset: -3%;
  background-image:
    url("https://assets.science.nasa.gov/content/dam/science/psd/photojournal/pia/pia19/pia19928/PIA19928.jpg");
  background-size: cover;
  background-position: center 54%;
  background-repeat: no-repeat;
  filter:
    saturate(.88) contrast(1.08) brightness(.72) sepia(.08);
  transform: scale(1.035);
}

/* Worx color grading only. The landscape itself remains photographic. */
.mars-photo-grade {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(21, 9, 5, .74) 0%,
      rgba(21, 9, 5, .42) 38%,
      rgba(21, 9, 5, .14) 68%,
      rgba(21, 9, 5, .26) 100%),
    linear-gradient(180deg,
      rgba(21, 9, 5, .28) 0%,
      transparent 36%,
      rgba(21, 9, 5, .16) 70%,
      rgba(21, 9, 5, .58) 100%),
    radial-gradient(ellipse at 68% 54%,
      rgba(229, 125, 35, .08),
      transparent 52%);
}

/* Existing subtle animation remains above the photograph */
.folio-hero-particles {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .42;
}

/* Hero copy remains above the landscape */
.folio-hero-inner {
  position: relative;
  z-index: 4;
}

/* Remove the old artificial sun / mountain / dune layers completely */
.mars-sun,
.mars-sky,
.mars-mountain,
.mars-sand,
.mars-haze {
  display: none !important;
}

/* No extra geometric overlay */
.folio-hero::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 900px) {
  .mars-photo {
    background-position: 61% 52%;
  }
}

@media (max-width: 680px) {
  .folio-hero {
    min-height: 650px;
  }

  .mars-photo {
    inset: 0;
    background-position: 64% center;
    transform: scale(1.02);
  }

  .mars-photo-grade {
    background:
      linear-gradient(90deg,
        rgba(21, 9, 5, .72),
        rgba(21, 9, 5, .30)),
      linear-gradient(180deg,
        rgba(21, 9, 5, .18),
        transparent 42%,
        rgba(21, 9, 5, .62));
  }
}



/* ============================================================
   MARS HERO COVER + WORX ORANGE ATMOSPHERE
   ============================================================ */

/* Hero begins directly under the transparent site header */
.folio-hero {
  min-height: clamp(680px, 100vh, 980px);
  margin-top: 0;
  padding-top: 0;
  background: #150905;
}

/* Fill every pixel of the hero. No exposed strip at the top. */
.folio-hero-media {
  inset: 0;
  width: 100%;
  height: 100%;
  background: #150905;
}

/* Force the NASA landscape to behave exactly like a full-bleed cover image */
.mars-photo {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  filter:
    sepia(.30) saturate(1.35) contrast(1.08) brightness(.74);
}

/* Restore the richer Worx orange / cocoa treatment */
.mars-photo-grade {
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(21, 9, 5, .74) 0%,
      rgba(39, 13, 5, .46) 36%,
      rgba(84, 29, 8, .18) 68%,
      rgba(21, 9, 5, .28) 100%),
    linear-gradient(180deg,
      rgba(21, 9, 5, .24) 0%,
      rgba(79, 25, 7, .04) 32%,
      rgba(192, 69, 39, .12) 66%,
      rgba(21, 9, 5, .64) 100%);
}

/* Soft atmospheric orange light, organic rather than geometric */
.mars-ember-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 48% at 72% 58%,
      rgba(250, 167, 25, .20) 0%,
      rgba(229, 125, 35, .11) 34%,
      transparent 72%),
    radial-gradient(ellipse 62% 45% at 28% 74%,
      rgba(192, 69, 39, .18),
      transparent 70%);
  mix-blend-mode: screen;
}

/* Bring the original moving particle / dust animation back over the photo */
.folio-hero-particles {
  z-index: 3;
  opacity: .88;
  mix-blend-mode: screen;
}

/* Text above all effects */
.folio-hero-inner {
  z-index: 5;
}

/* Prevent the old hero pseudo layers from creating the dark diagonal cap */
.folio-hero::before,
.folio-hero::after {
  content: none !important;
  display: none !important;
}

/* Add breathing room because header now overlays the hero */
.folio-hero-inner {
  padding-top: clamp(155px, 18vh, 220px);
  padding-bottom: clamp(70px, 9vh, 110px);
}

@media (max-width: 900px) {
  .mars-photo {
    background-position: 58% center;
  }
}

@media (max-width: 680px) {
  .folio-hero {
    min-height: 760px;
  }

  .mars-photo {
    background-position: 62% center;
  }

  .folio-hero-inner {
    padding-top: 145px;
  }

  .mars-photo-grade {
    background:
      linear-gradient(90deg,
        rgba(21, 9, 5, .68),
        rgba(73, 24, 7, .22)),
      linear-gradient(180deg,
        rgba(21, 9, 5, .18),
        transparent 40%,
        rgba(21, 9, 5, .68));
  }
}



/* ============================================================
   HERO TOP GAP FIX
   Make the Mars photograph cover behind the navigation
   ============================================================ */

/* The shared header (layout.css) is transparent over every hero now
   and floats as a glass pill once scrolled, so the portfolio no longer
   needs its own header overrides here. */

/* Hero starts at the absolute top of the page */
body[data-page="portfolio"] main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body[data-page="portfolio"] .folio-hero {
  position: relative;
  margin: 0 !important;
  padding-top: 0 !important;
  min-height: 100vh;
  overflow: hidden;
}

/* Photograph fills the ENTIRE hero rectangle */
body[data-page="portfolio"] .folio-hero-media,
body[data-page="portfolio"] .mars-photo,
body[data-page="portfolio"] .mars-photo-grade,
body[data-page="portfolio"] .mars-ember-glow {
  position: absolute;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* No rotation, skew, clipping or diagonal edge */
body[data-page="portfolio"] .folio-hero-media,
body[data-page="portfolio"] .mars-photo {
  transform: none !important;
  clip-path: none !important;
}

/* Full bleed NASA image */
body[data-page="portfolio"] .mars-photo {
  z-index: 0;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Keep the Worx orange treatment but let the image remain visible */
body[data-page="portfolio"] .mars-photo-grade {
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(21, 9, 5, .63) 0%,
      rgba(55, 18, 6, .34) 38%,
      rgba(114, 39, 10, .12) 68%,
      rgba(21, 9, 5, .20) 100%),
    linear-gradient(180deg,
      rgba(21, 9, 5, .34) 0%,
      rgba(192, 69, 39, .05) 40%,
      rgba(229, 125, 35, .10) 70%,
      rgba(21, 9, 5, .56) 100%);
}

/* Preserve the warm animated atmosphere */
body[data-page="portfolio"] .mars-ember-glow {
  z-index: 2;
}

body[data-page="portfolio"] .folio-hero-particles {
  z-index: 3;
}

/* Remove old folio hero masks that were producing the diagonal shape */
body[data-page="portfolio"] .folio-hero::before,
body[data-page="portfolio"] .folio-hero::after,
body[data-page="portfolio"] .folio-hero-media::before,
body[data-page="portfolio"] .folio-hero-media::after {
  content: none !important;
  display: none !important;
}

/* Navigation gets a subtle readable shadow instead of a dark header block */
body[data-page="portfolio"] .nav-bar {
  position: relative;
  z-index: 101;
}

/* on the links themselves, not their container: a filter on
   .nav-links would become the mega menu's positioning box */
body[data-page="portfolio"] .site-header .brand,
body[data-page="portfolio"] .site-header .nav-links > a,
body[data-page="portfolio"] .site-header .nav-mega-trigger {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .28));
}

@media (max-width: 680px) {
  body[data-page="portfolio"] .mars-photo {
    background-position: 60% center !important;
  }
}



/* ============================================================
   EDITORIAL PORTFOLIO
   Full-bleed work, asymmetric grid, hover-only page movement
   ============================================================ */

.folio-showcase-section.container {
  width: 100%;
  max-width: none;
  padding-left: 60px;
  padding-right: 60px;
}

.folio-editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 92px 30px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Default 3-up */
.folio-editorial-grid .folio-card {
  grid-column: span 4;
  min-width: 0;
}

/* Editorial rhythm */
.folio-editorial-grid .folio-card:nth-child(1),
.folio-editorial-grid .folio-card:nth-child(4),
.folio-editorial-grid .folio-card:nth-child(8) {
  grid-column: span 8;
}

.folio-editorial-grid .folio-card:nth-child(2),
.folio-editorial-grid .folio-card:nth-child(3),
.folio-editorial-grid .folio-card:nth-child(5),
.folio-editorial-grid .folio-card:nth-child(9) {
  grid-column: span 4;
}

/* Start new rows where the composition needs it */
.folio-editorial-grid .folio-card:nth-child(3),
.folio-editorial-grid .folio-card:nth-child(6),
.folio-editorial-grid .folio-card:nth-child(8),
.folio-editorial-grid .folio-card:nth-child(10) {
  grid-column-start: 1;
}

.folio-editorial-grid .folio-card:nth-child(3) {
  grid-column-end: span 4;
}

.folio-editorial-grid .folio-card:nth-child(4) {
  grid-column-start: 5;
  grid-column-end: span 8;
}

.folio-editorial-grid .folio-card:nth-child(8) {
  grid-column-end: span 8;
}

.folio-editorial-grid .folio-card:nth-child(9) {
  grid-column-start: 9;
  grid-column-end: span 4;
}

/* Clean cinematic image canvas */
.folio-editorial-grid .folio-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 0 0 24px;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: #150905;
  box-shadow: none;
}

/* Taller framing for the smaller cards */
.folio-editorial-grid .folio-card:nth-child(2) .folio-scene,
.folio-editorial-grid .folio-card:nth-child(3) .folio-scene,
.folio-editorial-grid .folio-card:nth-child(5) .folio-scene,
.folio-editorial-grid .folio-card:nth-child(9) .folio-scene {
  aspect-ratio: 4 / 5;
}

/* Remove all fake device hardware */
.folio-editorial-grid .folio-floor,
.folio-editorial-grid .folio-browserbar,
.folio-editorial-grid .folio-device__base,
.folio-editorial-grid .folio-device__screen::after {
  display: none !important;
}

.folio-editorial-grid .folio-device,
.folio-editorial-grid .folio-card--laptop .folio-device--laptop,
.folio-editorial-grid .folio-card--monitor .folio-device--monitor,
.folio-editorial-grid .folio-card--tablet .folio-device--tablet,
.folio-editorial-grid .folio-card--phone .folio-device--phone,
.folio-editorial-grid .folio-card--duo .folio-device--laptop,
.folio-editorial-grid .folio-card--duo .folio-device--phone,
.folio-editorial-grid .folio-card--crop .folio-device--laptop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  border: 0 !important;
}

/* On duo cards use only the main website view */
.folio-editorial-grid .folio-card--duo .folio-device--phone {
  display: none !important;
}

.folio-editorial-grid .folio-device__screen,
.folio-editorial-grid .folio-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #150905;
  box-shadow: none !important;
  aspect-ratio: auto !important;
}

/* Background image acts as a soft fallback while the live shot is loading */
.folio-editorial-grid .folio-card-bg {
  z-index: 0;
  opacity: .72;
  filter: saturate(.88) contrast(1.04) brightness(.80);
  transform: scale(1.01);
}

/* Actual project page sits edge to edge */
.folio-editorial-grid .folio-shot {
  z-index: 3;
  width: 100%;
  min-height: 100%;
  background: #150905;
  transform: translateY(0);
  animation: none !important;
  will-change: transform;
}

.folio-editorial-grid .folio-shot img {
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Full-image variants also become simple editorial canvases */
.folio-editorial-grid .folio-fill {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  background: #150905;
}

.folio-editorial-grid .folio-live-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: scale(1.01);
  transition: transform 1.2s cubic-bezier(.2, .75, .2, 1);
}

/* Warm Worx treatment. No geometric overlay. */
.folio-editorial-grid .folio-scene::before {
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(21, 9, 5, .02), rgba(21, 9, 5, .15)),
    radial-gradient(80% 70% at 82% 12%, rgba(250, 167, 25, .10), transparent 70%);
  opacity: 1;
  transition: opacity .45s ease;
}

.folio-editorial-grid .folio-scene::after {
  z-index: 5;
  opacity: .04;
  pointer-events: none;
}

/* IMPORTANT: no automatic scrolling */
.folio-editorial-grid .folio-card.is-live .folio-shot {
  animation: none !important;
}

/* Scroll the full screenshot ONLY while hovering/focusing.
   portfolio.js already creates the repeated image needed for the full loop. */
.folio-editorial-grid .folio-card.preview-active .folio-shot {
  animation: folio-hover-scroll 14s linear forwards !important;
}

@keyframes folio-hover-scroll {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

/* Return smoothly to the top after hover */
.folio-editorial-grid .folio-card:not(.preview-active) .folio-shot {
  transition: transform .7s cubic-bezier(.2, .75, .2, 1);
}

/* Static full cards get a restrained hover zoom */
.folio-editorial-grid .folio-card.preview-active .folio-live-full {
  transform: scale(1.055);
}

.folio-editorial-grid .folio-card.preview-active .folio-scene::before {
  opacity: .55;
}

/* Compact, uniform project information */
.folio-editorial-grid .folio-body {
  width: 100%;
  min-height: 0;
  padding: 0;
  gap: 0;
}

.folio-editorial-grid .folio-name {
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 1.55vw, 1.75rem);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -.025em;
}

.folio-editorial-grid .folio-desc {
  max-width: 680px;
  margin: 0;
  min-height: 0;
  font-size: .94rem;
  line-height: 1.6;
  color: rgba(254, 238, 207, .66);
}

.folio-editorial-grid .folio-cta {
  margin-top: 18px;
  padding: 10px 15px;
  border: 1px solid rgba(250, 167, 25, .34);
  border-radius: 999px;
  background: rgba(250, 167, 25, .05);
  font-size: .72rem;
}

.folio-editorial-grid .folio-card:hover .folio-cta {
  color: #150905;
  background: #faa719;
  border-color: #faa719;
}

/* Tablet */
@media (max-width: 1100px) {
  .folio-showcase-section.container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .folio-editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 70px 28px;
  }

  .folio-editorial-grid .folio-card,
  .folio-editorial-grid .folio-card:nth-child(n) {
    grid-column: auto !important;
    grid-column-start: auto !important;
    grid-column-end: auto !important;
  }

  .folio-editorial-grid .folio-scene,
  .folio-editorial-grid .folio-card:nth-child(n) .folio-scene {
    aspect-ratio: 4 / 3;
  }
}

/* Mobile */
@media (max-width: 680px) {
  .folio-showcase-section.container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .folio-editorial-grid {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .folio-editorial-grid .folio-scene,
  .folio-editorial-grid .folio-card:nth-child(n) .folio-scene {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
  }

  /* Touch devices do not have hover, so keep previews static. */
  .folio-editorial-grid .folio-card.preview-active .folio-shot {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .folio-editorial-grid .folio-card.preview-active .folio-shot {
    animation: none !important;
  }
}



/* ============================================================
   UNIFORM LIVE-SITE PREVIEW GRID
   Same-size cards, 60px page padding, hover-only slow scroll
   ============================================================ */

.folio-showcase-section.container {
  width: 100%;
  max-width: none;
  padding-left: 60px;
  padding-right: 60px;
}

.folio-editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 76px 30px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Override all previous asymmetric sizing */
.folio-editorial-grid .folio-card,
.folio-editorial-grid .folio-card:nth-child(n) {
  grid-column: auto !important;
  grid-column-start: auto !important;
  grid-column-end: auto !important;
  width: 100%;
  min-width: 0;
}

/* Every project visual is exactly the same size.
   2.05/1: the supplied recordings are all ~2.07-2.11:1 (wide
   screen captures), matching the media viewport closely to that
   ratio means object-fit:cover on the real video below crops at
   most ~3% off either side, instead of the ~23% a 16:10 box forced. */
.folio-editorial-grid .folio-scene,
.folio-editorial-grid .folio-card:nth-child(n) .folio-scene {
  width: 100%;
  aspect-ratio: 2.05 / 1 !important;
  margin: 0 0 22px;
  overflow: hidden;
  border-radius: 22px;
  background: #150905;
}

/* Remove device chrome, keep only the website preview */
.folio-editorial-grid .folio-floor,
.folio-editorial-grid .folio-browserbar,
.folio-editorial-grid .folio-device__base,
.folio-editorial-grid .folio-device__screen::after {
  display: none !important;
}

.folio-editorial-grid .folio-device,
.folio-editorial-grid .folio-card--laptop .folio-device--laptop,
.folio-editorial-grid .folio-card--monitor .folio-device--monitor,
.folio-editorial-grid .folio-card--tablet .folio-device--tablet,
.folio-editorial-grid .folio-card--phone .folio-device--phone,
.folio-editorial-grid .folio-card--duo .folio-device--laptop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

.folio-editorial-grid .folio-card--duo .folio-device--phone {
  display: none !important;
}

.folio-editorial-grid .folio-device__screen,
.folio-editorial-grid .folio-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
  background: #150905;
  box-shadow: none !important;
}

/* Website image starts at the top and remains completely still normally */
.folio-editorial-grid .folio-shot {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  width: 100%;
  min-height: 100%;
  transform: translateY(0);
  animation: none !important;
  will-change: transform;
}

.folio-editorial-grid .folio-shot img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Disable the previous automatic is-live animation */
.folio-editorial-grid .folio-card.is-live .folio-shot,
.folio-editorial-grid .folio-card.is-live .folio-device--phone .folio-shot {
  animation: none !important;
}

/* Hover only:
   top -> bottom slowly -> bottom -> top slowly -> repeat while hovered */
@media (hover: hover) and (pointer: fine) {
  .folio-editorial-grid .folio-card:hover .folio-shot {
    animation: folio-preview-pingpong 26s ease-in-out infinite alternate !important;
  }
}

@keyframes folio-preview-pingpong {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

/* Full-image cards use the same restrained hover motion */
.folio-editorial-grid .folio-fill {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
}

.folio-editorial-grid .folio-fill img {
  width: 100%;
  height: 115%;
  object-fit: cover;
  object-position: top center;
  transform: translateY(0);
  animation: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .folio-editorial-grid .folio-card:hover .folio-fill img {
    animation: folio-full-preview-pingpong 26s ease-in-out infinite alternate !important;
  }
}

@keyframes folio-full-preview-pingpong {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-13%);
  }
}

/* Uniform text block */
.folio-editorial-grid .folio-body {
  width: 100%;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.folio-editorial-grid .folio-name {
  width: 100%;
  margin: 0 0 7px;
  font-size: clamp(1.35rem, 1.45vw, 1.65rem);
  line-height: 1.15;
}

/* Show the exact live URL on every card */
.folio-site-url {
  position: relative;
  z-index: 8;
  display: block;
  width: 100%;
  margin: 0 0 13px;
  overflow: hidden;
  color: #faa719;
  font-family: var(--font-mono);
  font-size: .69rem;
  line-height: 1.4;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  opacity: .82;
  transition: opacity .25s ease;
}

.folio-site-url:hover {
  opacity: 1;
}

.folio-editorial-grid .folio-desc {
  width: 100%;
  max-width: 100%;
  min-height: 3.1em;
  margin: 0;
  font-size: .92rem;
  line-height: 1.58;
}

.folio-editorial-grid .folio-cta {
  margin-top: auto;
  transform: translateY(18px);
}

/* Touch devices stay static, because there is no hover */
@media (max-width: 1100px) {
  .folio-showcase-section.container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .folio-editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .folio-showcase-section.container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .folio-editorial-grid {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .folio-editorial-grid .folio-body {
    min-height: 0;
  }

  .folio-editorial-grid .folio-cta {
    margin-top: 18px;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .folio-editorial-grid .folio-card:hover .folio-shot,
  .folio-editorial-grid .folio-card:hover .folio-fill img {
    animation: none !important;
  }
}



/* ============================================================
   LIVE WEBSITE CARD PREVIEWS
   URL labels removed. The actual site is shown inside each card.
   ============================================================ */

.folio-site-url {
  display: none !important;
}

/* Keep every card equal size (2.05/1, see note above) */
.folio-editorial-grid .folio-scene,
.folio-editorial-grid .folio-card:nth-child(n) .folio-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 2.05 / 1 !important;
  overflow: hidden;
  border-radius: 22px;
  background: #150905;
}

/* Real live website viewport */
.folio-live-preview {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  background: #fff;
  pointer-events: none;
}

/*
  The iframe is rendered as a desktop webpage and scaled down to fit the card.
  This prevents the website from switching to its mobile layout.
*/
.folio-live-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 1800px;
  border: 0;
  background: #fff;
  transform-origin: top left;
  transform: scale(var(--live-scale, .30));
  pointer-events: none;
}

/* Scale the desktop iframe to the actual card width */
@media (min-width: 1101px) {
  .folio-live-frame {
    --live-scale: .30;
  }
}

@media (min-width: 1500px) {
  .folio-live-frame {
    --live-scale: .36;
  }
}

@media (min-width: 1900px) {
  .folio-live-frame {
    --live-scale: .42;
  }
}

/*
  Hover movement:
  the live page itself moves downward inside the card, then reverses.
  It does not animate until the card is hovered.
*/
/*
  Automatic live website preview scrolling.
  Starts without hover and continuously moves down and back up.
*/
.folio-editorial-grid .folio-card .folio-live-frame {
  animation: live-page-scroll 32s ease-in-out infinite alternate;
}

@keyframes live-page-scroll {
  0% {
    top: 0;
  }

  100% {
    top: -1050px;
  }
}

/* Disable the old screenshot animation because the live iframe is now visible */
.folio-editorial-grid .folio-card:hover .folio-shot,
.folio-editorial-grid .folio-card:hover .folio-fill img,
.folio-editorial-grid .folio-card.is-live .folio-shot {
  animation: none !important;
}

/* Keep the warm Worx overlay extremely light so the real site stays readable */
.folio-editorial-grid .folio-scene::before {
  z-index: 20;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(21, 9, 5, .01), rgba(21, 9, 5, .05)),
    radial-gradient(70% 60% at 85% 5%, rgba(250, 167, 25, .055), transparent 75%);
}

/* Tablet: still render the website as desktop, only scale it further */
@media (max-width: 1100px) {
  .folio-live-frame {
    --live-scale: .30;
  }
}

/* Mobile cards use a narrower live viewport */
@media (max-width: 680px) {
  .folio-live-frame {
    width: 1000px;
    height: 1500px;
    --live-scale: .34;
  }
}

@media (prefers-reduced-motion: reduce) {
  .folio-editorial-grid .folio-card .folio-live-frame {
    animation: none !important;
  }
}

/* ============================================================
   MARS DISTANCE TREATMENT
   Terrain is atmospheric and secondary to the hero content.
   ============================================================ */

body[data-page="portfolio"] .mars-photo {
  background-image: url("../assets/portfolio/mars-landscape-hero.png.jpg") !important;
  background-size: cover !important;
  background-position: center 54% !important;
  background-repeat: no-repeat !important;
  opacity: .48 !important;
  transform: scale(1.01) !important;
  filter: saturate(.58) contrast(.82) brightness(.60) blur(.35px) !important;
}

body[data-page="portfolio"] .mars-photo-grade {
  opacity: 1 !important;
  background:
    linear-gradient(180deg,
      rgba(45, 13, 4, .48) 0%,
      rgba(92, 28, 7, .58) 42%,
      rgba(150, 50, 10, .68) 72%,
      rgba(67, 18, 5, .80) 100%),
    linear-gradient(90deg,
      rgba(21, 9, 5, .58) 0%,
      rgba(88, 25, 6, .28) 46%,
      rgba(125, 39, 8, .22) 100%) !important;
}

body[data-page="portfolio"] .mars-3d-canvas {
  z-index: 2 !important;
  opacity: .58 !important;
}

body[data-page="portfolio"] .mars-ember-glow {
  z-index: 3 !important;
  opacity: .72 !important;
}

body[data-page="portfolio"] .folio-hero-particles {
  z-index: 4 !important;
  opacity: 1 !important;
}

body[data-page="portfolio"] .folio-hero-inner {
  z-index: 5 !important;
}

@media (max-width: 900px) {
  body[data-page="portfolio"] .mars-photo {
    background-position: 56% 54% !important;
  }
}

@media (max-width: 600px) {
  body[data-page="portfolio"] .mars-photo {
    background-position: 60% 54% !important;
    opacity: .42 !important;
  }
}


/* ============================================================
   HERO COPY POSITION, raised for stronger visual balance
   ============================================================ */
body[data-page="portfolio"] .folio-hero-inner {
  justify-content: flex-end !important;
  padding-bottom: clamp(120px, 16vh, 190px) !important;
}

@media (max-width: 900px) {
  body[data-page="portfolio"] .folio-hero-inner {
    padding-bottom: clamp(95px, 13vh, 145px) !important;
  }
}

@media (max-width: 600px) {
  body[data-page="portfolio"] .folio-hero-inner {
    padding-bottom: 90px !important;
  }
}


/* ============================================================
   SUMMIT SCENE, canvases drawn by static/js/rover-scene.js
   (rover drives up, astronaut plants the flag, rover drives off).
   Same layer slot and grade as the old CSS astronaut: the dusty,
   warm suit/rover grade on the main canvas, the flag kept closer to
   the brand orange on its own canvas behind it, and the lamps on an
   ungraded canvas screened over the top so they read as light.
   ============================================================ */

body[data-page="portfolio"] .rover-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

body[data-page="portfolio"] .rover-scene__main {
  filter: sepia(.18) saturate(.8) brightness(.8) contrast(.95);
}

body[data-page="portfolio"] .rover-scene__flag {
  filter: saturate(1.1) brightness(.92) contrast(1.04);
}

body[data-page="portfolio"] .rover-scene__glow {
  mix-blend-mode: screen;
}


/* ============================================================
   HERO CAPTION CARD, the About page's chapter caption (about.css
   .story-text .hud-card / .hud-panel / .story-status / .story-title
   / .story-subtitle, compact caption format): a smoked-glass field
   that dissolves into the shot at its edges, tilted in 3D as if hung
   in the scene, bottom-left. Same type, sizes and --hud-scale steps.
   ============================================================ */

body[data-page="portfolio"] .folio-hero {
  --hud-scale: 1;
}

body[data-page="portfolio"] .folio-hero-caption {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

body[data-page="portfolio"] .folio-hud-card {
  position: absolute;
  left: clamp(20px, 5vw, 72px);
  bottom: clamp(40px, 8vh, 96px);
  isolation: isolate;
  max-width: min(calc(460px * var(--hud-scale)), calc(100% - 40px));
  padding: 1.125em 1.625em 1.375em 1.375em;
  font-size: calc(1rem * var(--hud-scale));
  pointer-events: auto;
  transform: perspective(1000px) rotateY(14deg);
  transform-origin: left center;
  animation: folio-hud-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both, folio-hud-boot 0.7s steps(1, end) 0.2s both;
}

/* the glass lives behind the content, so only the glass dissolves */
body[data-page="portfolio"] .folio-hud-card::before {
  content: "";
  position: absolute;
  inset: -26px -40px;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(254, 238, 207, 0.03) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 120% 110% at 20% 40%, rgba(20, 9, 5, 0.66), rgba(20, 9, 5, 0.32) 60%, rgba(20, 9, 5, 0) 100%);
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 34%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 50%, #000 34%, transparent 100%);
}

body[data-page="portfolio"] .folio-hud-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  padding-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
}

body[data-page="portfolio"] .folio-hud-status::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 6px 1px rgba(250, 167, 25, 0.65);
}

body[data-page="portfolio"] .folio-hud-title {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(clamp(1.5rem, 2.2vw, 2.1rem) * var(--hud-scale));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--text);
}

body[data-page="portfolio"] .folio-hud-subtitle {
  max-width: 34ch;
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: calc(clamp(0.88rem, 1.1vw, 1rem) * var(--hud-scale));
  line-height: 1.6;
  color: var(--muted);
}

@keyframes folio-hud-in {
  from { transform: perspective(1000px) rotateY(14deg) translateX(-12px); }
  to   { transform: perspective(1000px) rotateY(14deg); }
}

@keyframes folio-hud-boot {
  0%   { opacity: 0; }
  12%  { opacity: 0.8; }
  20%  { opacity: 0.1; }
  34%  { opacity: 1; }
  46%  { opacity: 0.45; }
  60%, 100% { opacity: 1; }
}

@media (max-width: 600px) and (orientation: portrait) {
  body[data-page="portfolio"] .folio-hud-title { max-width: 20ch; }
}

@media (orientation: landscape) and (max-height: 540px) {
  body[data-page="portfolio"] .folio-hero { --hud-scale: 0.8; }
}

@media (min-width: 1800px) and (min-height: 950px) {
  body[data-page="portfolio"] .folio-hero { --hud-scale: 1.15; }
}

@media (min-width: 2300px) and (min-height: 1250px) {
  body[data-page="portfolio"] .folio-hero { --hud-scale: 1.4; }
}

@media (min-width: 3200px) and (min-height: 1800px) {
  body[data-page="portfolio"] .folio-hero { --hud-scale: 1.85; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="portfolio"] .folio-hud-card { animation: none; }
}


/* ============================================================
   PORTFOLIO CARD VIDEO PREVIEWS, FINAL
   Local MP4 recordings replace the external live iframes.
   Each video autoplays muted and loops from the beginning.

   Fit: the media viewport itself (.folio-scene, above) is set to
   2.05/1 to closely match the supplied recordings' own ~2.07-
   2.11:1 aspect ratio, so object-fit:cover here only trims a few
   percent off either edge instead of a quarter of the frame. The
   video is the ONLY visual layer, no blurred duplicate, no
   canvas capture, no second copy of the footage.
   ============================================================ */

body[data-page="portfolio"] .folio-video-preview {
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: #150905;
  pointer-events: none;
}

body[data-page="portfolio"] .folio-card-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  background: #150905;
  pointer-events: none;
}

/* The video itself is deliberately NOT transformed/scaled on
   hover: any animated transform on a playing <video> forces the
   compositor to resample it every frame of the transition, which
   softens it right when hover draws the eye to it. The video
   stays completely static; only the CTA/overlay (.folio-cta,
   .folio-scene's border/shadow) transitions on :hover. */

/* The local recording is now the visible card preview.
   Existing screenshot/device layers remain in the HTML as fallback,
   but sit underneath the video and are not changed. */
body[data-page="portfolio"] .folio-video-preview+*,
body[data-page="portfolio"] .folio-card-video+* {
  pointer-events: none;
}

/* No iframe movement is needed once local videos are used. */
body[data-page="portfolio"] .folio-video-preview .folio-live-frame {
  display: none !important;
  animation: none !important;
}



/* ============================================================
   PREMIUM POLISH PASS
   Final layer over everything above: calm, cinematic reveals, one
   hover language (the site's gradient hairline), honest
   placeholders, and a hero that dissolves into the work grid.
   ============================================================ */

/* ---- Hero: fade the shot into the page ink, no hard edge ---- */
body[data-page="portfolio"] .folio-hero-caption {
  will-change: transform, opacity;
}

body[data-page="portfolio"] .folio-hero-caption::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(90px, 16vh, 200px);
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(21, 9, 5, 0) 0%,
    rgba(21, 9, 5, .55) 58%,
    #150905 100%);
}

/* Short landscape screens (phones on their side): keep the caption
   on the first screen instead of below a 650px minimum. */
@media (orientation: landscape) and (max-height: 540px) {
  html body[data-page="portfolio"] .folio-hero {
    min-height: 100svh !important;
  }
}

/* ---- Grid rhythm -------------------------------------------- */
.folio-showcase-section.container {
  padding-top: clamp(56px, 8vw, 120px);
  padding-left: clamp(20px, 4.2vw, 60px);
  padding-right: clamp(20px, 4.2vw, 60px);
}

.folio-editorial-grid {
  gap: clamp(52px, 5.4vw, 76px) clamp(20px, 2.1vw, 30px);
}

/* Ultra-wide: a fourth column instead of ever-larger cards */
@media (min-width: 2200px) {
  .folio-editorial-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Every card is a column: the CTA sits on one line across a row,
   without the old fixed min-height gap under short descriptions. */
.folio-editorial-grid .folio-card,
.folio-editorial-grid .folio-card:nth-child(n) {
  display: flex;
  flex-direction: column;
}

.folio-editorial-grid .folio-body {
  flex: 1 1 auto;
  min-height: 0;
}

.folio-editorial-grid .folio-desc {
  min-height: 0;
  margin-bottom: 20px;
}

.folio-editorial-grid .folio-cta {
  margin-top: auto;
  min-height: 40px;
  transform: none;
}

/* ---- Media fit ---------------------------------------------- */
body[data-page="portfolio"] .folio-editorial-grid .folio-scene {
  margin-bottom: clamp(16px, 1.6vw, 22px);
  border-radius: clamp(16px, 1.5vw, 22px);
  transform: translateZ(0);
  transition: box-shadow .5s ease;
}

/* Videos fade up from the ink once they have a frame, never a pop
   from black or a half-decoded first frame. */
body[data-page="portfolio"] .folio-card-video {
  opacity: 0;
  transition: opacity .8s ease;
}

body[data-page="portfolio"] .folio-card-video.is-ready {
  opacity: 1;
}

/* ---- One hover language: the gradient hairline ------------- */
/* .folio-scene::after was the (now hidden) grain; it becomes the
   masked gradient ring, above the video. */
.folio-editorial-grid .folio-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient);
  background-size: auto;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mix-blend-mode: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

.folio-editorial-grid .folio-card:hover .folio-scene,
.folio-editorial-grid .folio-card:focus-within .folio-scene {
  border-color: transparent;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .75);
}

.folio-editorial-grid .folio-card:hover .folio-scene::after,
.folio-editorial-grid .folio-card:focus-within .folio-scene::after {
  opacity: 1;
}

/* CTA: stays dark on hover and keeps only the gradient edge */
.folio-editorial-grid .folio-cta {
  position: relative;
  border-color: rgba(254, 238, 207, .16);
  background: rgba(21, 9, 5, .35);
  color: var(--brand-cream);
}

.folio-editorial-grid .folio-cta::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.folio-editorial-grid .folio-card:hover .folio-cta,
.folio-editorial-grid .folio-card:focus-within .folio-cta {
  color: var(--brand-cream);
  border-color: transparent;
  background: rgba(21, 9, 5, .6);
  transform: none;
}

.folio-editorial-grid .folio-card:hover .folio-cta::before,
.folio-editorial-grid .folio-card:focus-within .folio-cta::before {
  opacity: 1;
}

.folio-editorial-grid .folio-cta-arrow {
  color: var(--accent-2);
  transition: transform .35s ease;
}

.folio-editorial-grid .folio-card:hover .folio-cta-arrow,
.folio-editorial-grid .folio-card:focus-within .folio-cta-arrow {
  transform: translateX(4px);
}

/* Keyboard: the whole card is the link (.folio-link::after), so the
   focus ring is the scene's gradient ring above plus a clear outline
   around the card. */
.folio-editorial-grid .folio-link:focus-visible {
  outline: none;
}

.folio-editorial-grid .folio-link:focus-visible::after {
  outline: 2px solid var(--accent-2);
  outline-offset: 6px;
  border-radius: clamp(16px, 1.5vw, 22px);
}

/* ---- "Coming soon" cards: a calm branded plate, no fake CTA -- */
.folio-editorial-grid .folio-fill--pending {
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 80% at 50% 110%, rgba(229, 125, 35, .16), transparent 70%),
    radial-gradient(50% 60% at 85% 0%, rgba(250, 167, 25, .07), transparent 70%),
    linear-gradient(160deg, #211009 0%, #150905 70%);
}

.folio-editorial-grid .folio-fill--pending::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(254, 238, 207, .12), rgba(254, 238, 207, .03));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.folio-editorial-grid .folio-fill--pending .folio-pending-mark {
  width: clamp(40px, 3.4vw, 56px);
  height: auto;
  min-height: 0;
  border-radius: 12px;
  object-fit: contain;
  opacity: .78;
  transform: none;
  animation: none !important;
  filter: saturate(.9);
  transition: opacity .45s ease;
}

.folio-editorial-grid .folio-card:hover .folio-pending-mark {
  opacity: .95;
}

.folio-editorial-grid .folio-card[data-pending-asset] .folio-cta {
  color: var(--muted);
  border-style: dashed;
  border-color: rgba(254, 238, 207, .2);
}

.folio-editorial-grid .folio-card[data-pending-asset] .folio-cta-arrow {
  display: none;
}

/* ---- Entrance choreography (portfolio.js initReveal) --------
   Each card rises and its media unveils from a soft inset as it
   enters; cards in one row follow each other by --i. Only active
   once the script has armed the grid, so no-JS stays visible. */
.folio-reveal-armed .folio-card[data-folio-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity .9s cubic-bezier(.2, .7, .2, 1),
    transform 1.1s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
}

.folio-reveal-armed .folio-card[data-folio-reveal] .folio-scene {
  clip-path: inset(6% 4% 6% 4% round clamp(16px, 1.5vw, 22px));
  transition:
    clip-path 1.2s cubic-bezier(.2, .7, .2, 1),
    box-shadow .5s ease;
  transition-delay: calc(var(--i, 0) * 110ms), 0s;
}

.folio-reveal-armed .folio-card[data-folio-reveal] .folio-body > * {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}

.folio-reveal-armed .folio-card[data-folio-reveal] .folio-name { transition-delay: calc(var(--i, 0) * 110ms + 220ms); }
.folio-reveal-armed .folio-card[data-folio-reveal] .folio-desc { transition-delay: calc(var(--i, 0) * 110ms + 300ms); }
.folio-reveal-armed .folio-card[data-folio-reveal] .folio-cta  { transition-delay: calc(var(--i, 0) * 110ms + 380ms); }

.folio-reveal-armed .folio-card[data-folio-reveal].is-in {
  opacity: 1;
  transform: none;
}

.folio-reveal-armed .folio-card[data-folio-reveal].is-in .folio-scene {
  clip-path: inset(0 0 0 0 round clamp(16px, 1.5vw, 22px));
}

.folio-reveal-armed .folio-card[data-folio-reveal].is-in .folio-body > * {
  opacity: 1;
  transform: none;
}

/* once in, hovers respond immediately (no inherited delays) */
.folio-reveal-armed .folio-card.is-settled .folio-body > *,
.folio-reveal-armed .folio-card.is-settled .folio-scene {
  transition-delay: 0s;
}

/* ---- Small phones ------------------------------------------- */
@media (max-width: 380px) {
  .folio-editorial-grid .folio-name {
    font-size: 1.3rem;
  }

  .folio-editorial-grid .folio-desc {
    font-size: .9rem;
  }
}

/* ---- Reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .folio-reveal-armed .folio-card[data-folio-reveal],
  .folio-reveal-armed .folio-card[data-folio-reveal] .folio-scene,
  .folio-reveal-armed .folio-card[data-folio-reveal] .folio-body > * {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }

  body[data-page="portfolio"] .folio-card-video {
    transition: none;
  }

  body[data-page="portfolio"] .folio-hero-caption {
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ============================================================
   MISSION ARCHIVE
   The page's second act. The About sky carries on behind the work
   (a fixed deep-sky canvas that fades in with it), the home page's
   comms tracker slides in at its left edge, a limb of atmosphere announces it, and every project is a
   screen in the habitat: angled like the About page's HUD panels
   (left screens face right, right ones face left), turning to face
   you as they reach the middle of the view, their films running
   through a Mars grade that lifts to true colour when you point at
   one. portfolio.js ("mission archive") drives --turn, the sides,
   the films, the timecodes, the filter and the trackers.
   ============================================================ */

/* the pointer-driven "look at me" amount, animatable */
@property --hov {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* ---- the hero's HUD panel, the About log recipe --------------- */
/* on the right, clear of the rover's track across the left of the
   frame, turned toward the middle like the About page's right logs */
body[data-page="portfolio"] .pf-hud {
  left: auto;
  right: clamp(20px, 5vw, 72px);
  transform: perspective(900px) rotateY(-20deg) rotateX(2deg);
  transform-origin: right center;
  animation: pf-hud-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both, folio-hud-boot 0.7s steps(1, end) 0.2s both;
}

@keyframes pf-hud-in {
  from { transform: perspective(900px) rotateY(-20deg) rotateX(2deg) translateX(14px); }
  to { transform: perspective(900px) rotateY(-20deg) rotateX(2deg); }
}


.pf-hud-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(254, 238, 207, 0.3), transparent) 1;
  font-family: var(--font-mono);
  font-size: 0.62em;
  letter-spacing: 0.16em;
  color: rgba(254, 238, 207, 0.7);
}

.pf-hud-call { flex: 1; }
.pf-hud-clock { font-variant-numeric: tabular-nums; color: var(--accent-2); }

.pf-rec {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff4a32;
  box-shadow: 0 0 8px rgba(255, 74, 50, 0.8);
  animation: pf-blink 1.2s steps(2, jump-none) infinite;
}

@keyframes pf-blink { 50% { opacity: 0.15; } }

/* the archive log boots one line at a time */
.pf-hud-log {
  display: grid;
  gap: 5px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.66em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pf-hud-log li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: rgba(254, 238, 207, 0.55);
  opacity: 0;
  animation: pf-line 0.35s steps(1, end) both;
}

.pf-hud-log li:nth-child(1) { animation-delay: 0.8s; }
.pf-hud-log li:nth-child(2) { animation-delay: 1.05s; }
.pf-hud-log li:nth-child(3) { animation-delay: 1.3s; }
.pf-hud-log li:nth-child(4) { animation-delay: 1.55s; }
.pf-hud-log li:nth-child(5) { animation-delay: 1.85s; }

.pf-hud-log b { font-weight: 500; color: var(--text); }
.pf-hud-log li[data-key] b { color: var(--accent-2); }

@keyframes pf-line { from { opacity: 0; } to { opacity: 1; } }

.pf-hud-go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.66em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.pf-hud-go i {
  font-style: normal;
  animation: pf-nudge 1.8s ease-in-out infinite;
}

@keyframes pf-nudge { 50% { transform: translateY(4px); } }

/* ---- the limb of atmosphere into the archive ------------------ */
.pf-limb {
  position: relative;
  z-index: 1;
  height: clamp(90px, 14vw, 220px);
  margin: clamp(10px, 3vw, 40px) 0 calc(clamp(20px, 4vw, 60px) * -1);
  pointer-events: none;
}

.pf-limb svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.pf-limb path { fill: none; vector-effect: non-scaling-stroke; }

.pf-limb-line {
  stroke-width: 1.2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 2.4s var(--nav-ease);
}

.pf-limb-glow {
  stroke-width: 26;
  opacity: 0;
  filter: blur(18px);
  transition: opacity 2.4s ease 0.6s;
}

.pf-limb.is-in .pf-limb-line { stroke-dashoffset: 0; }
.pf-limb.is-in .pf-limb-glow { opacity: 0.22; }

.pf-limb-tag {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  white-space: nowrap;
  color: rgba(254, 238, 207, 0.45);
  opacity: 0;
  transition: opacity 1s ease 1.4s;
}

.pf-limb.is-in .pf-limb-tag { opacity: 1; }

/* ---- the deep sky behind the archive -------------------------- */
/* It is fixed to the screen, so it can't simply end where the archive
   ends: a mask that rides with the page (portfolio.js writes where the
   limb and the archive's end are on screen) fades the stars in below
   the limb and out before the closing band. Nothing switches on or off,
   so there is never a strip or an edge mid-scroll. */
.pf-deep-sky {
  --a: 100vh;
  --b: 160vh;
  --c: 200vh;
  --d: 240vh;
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent var(--a), #000 var(--b), #000 var(--c), transparent var(--d));
  mask-image: linear-gradient(180deg, transparent var(--a), #000 var(--b), #000 var(--c), transparent var(--d));
}

body[data-page="portfolio"] .pf-archive,
body[data-page="portfolio"] main > .section:last-child {
  position: relative;
  z-index: 1;
}

/* ---- the archive's head --------------------------------------- */
.pf-archive { padding: clamp(40px, 6vw, 90px) 0 clamp(60px, 8vw, 120px); }

.pf-reel-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: clamp(40px, 6vw, 88px);
}

.pf-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.pf-kicker i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(250, 167, 25, 0.14), 0 0 10px rgba(250, 167, 25, 0.8);
}

.pf-kicker span { color: rgba(254, 238, 207, 0.4); letter-spacing: 0.18em; }

.pf-reel-title {
  max-width: 16ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5.4vw, 4.6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
}

.pf-reel-lede {
  max-width: 52ch;
  margin: 22px 0 0;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: var(--muted);
}

/* ---- the sector scanner ------------------------------------------
   The archive, charted by industry: a smoked-glass console of sector
   chips with a live readout. Under the title it sits in the page; once
   the reel is under way it docks as a floating console at the foot of
   the screen, entering like a craft through an atmosphere (a heat glow
   that cools as it settles), and lifts away when the archive ends.
   portfolio.js ("sector scanner") runs the docking and the scan. */
.pf-scan-slot { align-self: stretch; min-width: 0; margin-top: 30px; }

.pf-scan {
  --scan-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding: 14px 16px 14px 20px;
  border: 1px solid rgba(254, 238, 207, 0.14);
  border-radius: 22px;
  background:
    repeating-linear-gradient(0deg, rgba(254, 238, 207, 0.025) 0 1px, transparent 1px 3px),
    rgba(12, 5, 3, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  isolation: isolate;
}

.pf-scan-read {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(254, 238, 207, 0.5);
}

.pf-scan-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-2);
}

.pf-scan-tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 8px rgba(250, 167, 25, 0.8);
  animation: pf-scan-blink 1.6s steps(1, end) infinite;
}

@keyframes pf-scan-blink { 50% { opacity: 0.25; } }

.pf-scan-out b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.pf-scan-out [data-scan-name] { color: rgba(254, 238, 207, 0.78); }

.pf-scan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  /* beside the readout, wrapping within its own column */
  flex: 1 1 0;
  min-width: min(100%, 320px);
}

.pf-scan-chips button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(254, 238, 207, 0.16);
  border-radius: 999px;
  background: rgba(12, 5, 3, 0.4);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(254, 238, 207, 0.68);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.pf-scan-chips button b { font-weight: 500; color: var(--accent-2); font-variant-numeric: tabular-nums; }

/* the lit sector: the brand gradient drawn round the chip */
.pf-scan-chips button::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.pf-scan-chips button.is-on { color: var(--text); border-color: transparent; background: rgba(229, 125, 35, 0.12); }
.pf-scan-chips button.is-on::after { opacity: 1; }

@media (hover: hover) {
  .pf-scan-chips button:hover { color: var(--text); border-color: transparent; }
  .pf-scan-chips button:hover::after { opacity: 1; }
}

.pf-scan-chips button:focus-visible { outline: none; }
.pf-scan-chips button:focus-visible::after { opacity: 1; }

/* the scan: a beam crosses the console when a sector is picked */
.pf-scan-sweep {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(250, 167, 25, 0.22) 49%, rgba(255, 226, 170, 0.5) 50%, rgba(250, 167, 25, 0.22) 51%, transparent 60%) no-repeat;
  background-size: 60% 100%;
  background-position: -120% 0;
  opacity: 0;
}

.pf-scan.is-scanning .pf-scan-sweep { animation: pf-scan-sweep 0.9s var(--scan-ease); }

@keyframes pf-scan-sweep {
  0%   { opacity: 1; background-position: -120% 0; }
  80%  { opacity: 1; }
  100% { opacity: 0; background-position: 260% 0; }
}

/* phones: one swipeable row of sectors */
@media (max-width: 767px) {
  .pf-scan {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    padding: 14px 0;
    border-radius: 18px;
  }
  .pf-scan-read { flex-direction: row; justify-content: space-between; padding-inline: 16px; }
  .pf-scan-chips {
    flex: none;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent);
  }
  .pf-scan-chips::-webkit-scrollbar { display: none; }
}

/* ---- the sector tuner --------------------------------------------
   The archive tuned like a radio: the sectors are stations on a
   frequency band, a needle stands fixed at its centre, and the band
   glides the tuned station under it (or is swiped there, on touch).
   Above, the tuned sector's name decodes as it locks, with its
   frequency; behind the band a live signal flares on every lock.
   portfolio.js ("the tuner") drives it. */
.pf-scan.pf-tuner {
  display: grid;
  /* one column, held to the console (the band's long scroll must not widen it) */
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 20px 0 16px;
  border-radius: 24px;
}

.pf-tuner-top {
  display: grid;
  gap: 6px;
  padding-inline: clamp(18px, 2.4vw, 28px);
}

.pf-tuner .pf-scan-read {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.pf-tuner-freq { color: rgba(254, 238, 207, 0.5); }
.pf-tuner-freq b { font-weight: 500; color: var(--accent-2); font-variant-numeric: tabular-nums; }

.pf-tuner-display {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 0;
}

.pf-tuner-name {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(229, 125, 35, 0.3));
}

.pf-tuner .pf-scan-out {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(254, 238, 207, 0.5);
}

/* the dial: the band, its signal and the needle */
.pf-tuner-dial {
  position: relative;
  min-width: 0;
  height: 114px;
}

.pf-tuner-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

.pf-tuner-band {
  position: relative;
  display: flex;
  height: 100%;
  padding-inline: 50%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* the frequency scale: fine ticks, a major one every fifth, riding
     with the band as it scrolls */
  background:
    repeating-linear-gradient(90deg, rgba(254, 238, 207, 0.34) 0 1px, transparent 1px 60px) 0 100% / 100% 16px no-repeat,
    repeating-linear-gradient(90deg, rgba(254, 238, 207, 0.16) 0 1px, transparent 1px 12px) 0 100% / 100% 8px no-repeat;
  background-attachment: local, local;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.pf-tuner-band::-webkit-scrollbar { display: none; }

.pf-station {
  flex: none;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  width: clamp(124px, 13vw, 168px);
  height: 100%;
  padding: 12px 8px 34px;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(254, 238, 207, 0.4);
  cursor: pointer;
  scroll-snap-align: center;
  transform: scale(0.86);
  opacity: 0.6;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, color 0.3s ease;
}

.pf-station-name {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  text-wrap: balance;
}

.pf-station b { font-weight: 500; color: rgba(250, 167, 25, 0.65); font-variant-numeric: tabular-nums; }
.pf-station small { font-size: 0.56rem; letter-spacing: 0.14em; color: rgba(254, 238, 207, 0.32); }

/* under the needle (while swiping), and tuned in */
.pf-station.is-near { opacity: 0.9; transform: scale(0.95); color: rgba(254, 238, 207, 0.75); }
.pf-station.is-on {
  opacity: 1;
  transform: scale(1.04);
  color: var(--text);
  text-shadow: 0 0 18px rgba(250, 167, 25, 0.45);
}
.pf-station.is-on b { color: var(--accent-2); }
.pf-station.is-on small { color: var(--accent-2); }

@media (hover: hover) {
  .pf-station:hover { opacity: 1; color: var(--text); }
}

.pf-station:focus-visible { outline: none; color: var(--text); opacity: 1; text-decoration: underline; text-underline-offset: 6px; }

/* the needle, fixed at the centre of the band */
.pf-tuner-needle {
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  pointer-events: none;
}

/* the line itself stands in the scale zone only, clear of the names */
.pf-tuner-needle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  background: linear-gradient(180deg, rgba(250, 167, 25, 0), var(--accent-2) 40%, #ffe2aa);
  box-shadow: 0 0 12px rgba(250, 167, 25, 0.8), 0 0 30px rgba(229, 125, 35, 0.45);
}

.pf-tuner-needle::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(250, 167, 25, 0.35), transparent);
}

.pf-tuner-needle i {
  position: absolute;
  left: 50%;
  top: -6px;
  width: 10px;
  height: 7px;
  margin-left: -5px;
  background: var(--accent-2);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 0 6px rgba(250, 167, 25, 0.9));
}

/* a station locks: the needle flares */
.pf-tuner.is-scanning .pf-tuner-needle::after { animation: pf-needle-lock 0.8s ease-out; }

@keyframes pf-needle-lock {
  0% { box-shadow: 0 0 22px rgba(255, 226, 170, 1), 0 0 60px rgba(250, 167, 25, 0.9); }
  100% { box-shadow: 0 0 12px rgba(250, 167, 25, 0.8), 0 0 30px rgba(229, 125, 35, 0.45); }
}

/* desktop: the stations read larger (and get the room for it) */
@media (min-width: 1025px) {
  .pf-tuner-dial { height: clamp(128px, 9vw, 134px); }
  .pf-station { font-size: 0.8em; width: clamp(200px, 15vw, 232px); }
}

@media (max-width: 767px) {
  .pf-scan.pf-tuner { padding: 16px 0 12px; border-radius: 18px; }
  .pf-tuner-top { padding-inline: 16px; }
  .pf-tuner-name { font-size: clamp(1.5rem, 7.5vw, 2rem); }
  .pf-tuner-dial { height: 92px; }
  .pf-station { width: 116px; padding: 6px 6px 28px; gap: 2px; }
  .pf-tuner-needle::after { height: 20px; }
}

/* ---- the rail, livelier: magnetic ticks, a carrier, a lock ring --- */
.pf-rail-list button:not(.is-on) .pf-rail-tick { width: calc(14px + var(--m, 0) * 16px); background: rgba(254, 238, 207, calc(0.3 + var(--m, 0) * 0.5)); }

/* the carrier: a point of light running down the track, always */
.pf-rail-track::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffe2aa;
  box-shadow: 0 0 8px rgba(250, 167, 25, 0.9);
  animation: pf-rail-carrier 3.4s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

@keyframes pf-rail-carrier {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* a sector picked: a ring locks on round its tick */
.pf-rail-tick { position: relative; }
.pf-rail-list button.is-on .pf-rail-tick::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 1px solid var(--accent-2);
  border-radius: 50%;
  opacity: 0;
}

.pf-rail.is-scanning .pf-rail-list button.is-on .pf-rail-tick::after { animation: pf-rail-lock 1s ease-out; }

@keyframes pf-rail-lock {
  0% { opacity: 1; transform: scale(2.4); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-station { transition: none; }
  .pf-tuner.is-scanning .pf-tuner-needle::after,
  .pf-rail-track::after,
  .pf-rail.is-scanning .pf-rail-list button.is-on .pf-rail-tick::after { animation: none; }
}

/* ---- the sector rail ---------------------------------------------
   The comms rail's twin on the right edge: it slides in once the reel
   is under way. A tuner: one tick per sector, the lit sector named and
   glowing, a beam filling down its track as the sector plays; aimed
   at, a glass panel slides out naming every frequency. On touch
   screens and tablets it folds to a tab on the edge that opens the
   same panel as a drawer. portfolio.js ("sector scanner") runs it. */
.pf-rail {
  --rail-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: fixed;
  z-index: 60;
  right: clamp(12px, 1.6vw, 26px);
  top: 50%;
  font-family: var(--font-mono);
  transform: translate(calc(100% + 60px), -50%);
  opacity: 0;
  pointer-events: none;
  transition: transform 1s var(--rail-ease), opacity 0.6s ease;
}

.pf-rail.is-on {
  transform: translate(0, -50%);
  opacity: 1;
  pointer-events: auto;
}

.pf-rail-tab { display: none; }

.pf-rail-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: end;
  gap: 10px;
  padding: 16px 16px 16px 14px;
}

/* the glass slides out from the edge when the rail is aimed at */
.pf-rail-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid rgba(254, 238, 207, 0.14);
  border-radius: 18px;
  background:
    repeating-linear-gradient(0deg, rgba(254, 238, 207, 0.025) 0 1px, transparent 1px 3px),
    rgba(12, 5, 3, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.95);
  clip-path: inset(0 0 0 100% round 18px);
  opacity: 0;
  transition: clip-path 0.55s var(--rail-ease), opacity 0.4s ease;
}

/* atmospheric entry: a heat glow on the leading edge, cooling off */
.pf-rail-panel::after {
  content: "";
  position: absolute;
  inset: -30px -10px -30px 40%;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(60% 50% at 100% 50%, rgba(255, 170, 70, 0.4), transparent 70%);
  opacity: 0;
}

.pf-rail.is-on .pf-rail-panel::after { animation: pf-rail-entry 1.6s ease-out; }

@keyframes pf-rail-entry {
  0%, 20% { opacity: 1; }
  100% { opacity: 0; }
}

.pf-rail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent-2);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.pf-rail-head i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 8px rgba(250, 167, 25, 0.8);
  animation: pf-scan-blink 1.6s steps(1, end) infinite;
}

.pf-rail-head b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }

.pf-rail-list {
  display: grid;
  justify-items: end;
  gap: 2px;
  margin: 0;
  padding: 0 14px 0 0;
  list-style: none;
}

.pf-rail-list button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(254, 238, 207, 0.62);
  cursor: pointer;
}

.pf-rail-label,
.pf-rail-n {
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.35s ease, transform 0.5s var(--rail-ease), color 0.3s ease;
  transition-delay: calc(var(--i) * 25ms);
}

.pf-rail-n { color: var(--accent-2); font-variant-numeric: tabular-nums; }

.pf-rail-tick {
  flex: none;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: rgba(254, 238, 207, 0.3);
  transition: width 0.5s var(--rail-ease), background 0.3s ease, box-shadow 0.3s ease;
}

/* the lit sector: its tick long and glowing, its name always showing */
.pf-rail-list button.is-on { color: var(--text); }
.pf-rail-list button.is-on .pf-rail-tick {
  width: 30px;
  background: var(--gradient);
  box-shadow: 0 0 10px rgba(250, 167, 25, 0.7);
}
/* collapsed, the lit sector reads down the screen's edge instead, so
   the rail never reaches over the reel */
.pf-rail-now {
  position: absolute;
  right: -6px;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  writing-mode: vertical-rl;
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(254, 238, 207, 0.6);
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.pf-rail-now b { font-weight: 500; color: var(--text); }
.pf-rail-now span { color: var(--accent-2); }
.pf-rail:hover .pf-rail-now,
.pf-rail:focus-within .pf-rail-now { opacity: 0; }

/* aimed at: the glass slides out and every frequency is named */
.pf-rail:hover .pf-rail-panel::before,
.pf-rail:focus-within .pf-rail-panel::before { clip-path: inset(0 0 0 0 round 18px); opacity: 1; }
.pf-rail:hover .pf-rail-head,
.pf-rail:focus-within .pf-rail-head { opacity: 1; }
.pf-rail:hover .pf-rail-label,
.pf-rail:hover .pf-rail-n,
.pf-rail:focus-within .pf-rail-label,
.pf-rail:focus-within .pf-rail-n { opacity: 1; transform: none; }
.pf-rail-list button:hover,
.pf-rail-list button:focus-visible { color: var(--text); outline: none; }
.pf-rail-list button:hover .pf-rail-tick,
.pf-rail-list button:focus-visible .pf-rail-tick { width: 22px; background: rgba(254, 238, 207, 0.8); }

/* the track: a hairline beside the ticks, filling as the sector plays */
.pf-rail-track {
  position: absolute;
  top: 44px;
  bottom: 18px;
  right: 16px;
  width: 1px;
  background: rgba(254, 238, 207, 0.12);
}

.pf-rail-track i {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--p, 0) * 100%);
  background: linear-gradient(180deg, rgba(250, 167, 25, 0), var(--accent-2));
  box-shadow: 0 0 8px rgba(250, 167, 25, 0.6);
}

/* a sector picked: a beam runs down the tuner */
.pf-rail-beam {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  height: 40px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(250, 167, 25, 0.28), transparent);
  opacity: 0;
}

.pf-rail.is-scanning .pf-rail-beam { animation: pf-rail-beam 0.9s var(--rail-ease); }

@keyframes pf-rail-beam {
  0% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(320px); }
}

/* Collapsed, the rail answers only at its ticks (the hidden names
   would otherwise sit over the reel's right edge); aimed at, the whole
   of each row is live */
.pf-rail.is-on { pointer-events: none; }
.pf-rail-list button { position: relative; pointer-events: none; }
.pf-rail-list button::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -14px;
  width: 64px;
  pointer-events: auto;
}
.pf-rail:hover .pf-rail-list button,
.pf-rail:focus-within .pf-rail-list button { pointer-events: auto; }
.pf-rail:hover .pf-rail-panel,
.pf-rail:focus-within .pf-rail-panel { pointer-events: auto; }

/* laptops with room to spare keep clear of the reel's right edge */
@media (min-width: 1101px) and (max-width: 1280px) {
  .pf-rail { right: 8px; }
}

/* ---- touch screens and tablets: a tab on the edge, a drawer ----- */
@media (max-width: 1100px), (hover: none) {
  .pf-rail { right: 0; }

  .pf-rail-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    min-width: 44px;
    padding: 16px 11px;
    border: 1px solid rgba(254, 238, 207, 0.16);
    border-left: 0;
    border-radius: 0 14px 14px 0;
    background:
      repeating-linear-gradient(90deg, rgba(254, 238, 207, 0.025) 0 1px, transparent 1px 3px),
      rgba(12, 5, 3, 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.95);
    font-family: inherit;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(254, 238, 207, 0.6);
    cursor: pointer;
  }
  .pf-rail-tab b { font-weight: 500; color: var(--text); }
  .pf-rail-tab-n { color: var(--accent-2); }
  .pf-rail-tab-k { color: var(--accent-2); }

  /* the drawer: out from the edge, beside the tab */
  .pf-rail-panel {
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    width: max-content;
    max-width: calc(100vw - 72px);
    padding: 16px 16px 14px 18px;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .pf-rail-panel::before { clip-path: inset(0 0 0 100% round 18px); opacity: 0; }
  .pf-rail-head { opacity: 0; }
  .pf-rail-list { padding-right: 0; gap: 0; }
  .pf-rail-list button { min-height: 42px; font-size: 0.66rem; }
  .pf-rail-label,
  .pf-rail-n,
  .pf-rail-tick { opacity: 0; transform: translateX(14px); }
  .pf-rail-track { display: none; }
  .pf-rail-now { display: none; }

  .pf-rail.is-on .pf-rail-tab { pointer-events: auto; }
  .pf-rail-list button::after { display: none; }
  .pf-rail.is-open .pf-rail-panel,
  .pf-rail.is-open .pf-rail-list button { pointer-events: auto; }
  .pf-rail.is-open .pf-rail-panel::before { clip-path: inset(0 0 0 0 round 18px); opacity: 1; }
  .pf-rail.is-open .pf-rail-head { opacity: 1; }
  .pf-rail.is-open .pf-rail-label,
  .pf-rail.is-open .pf-rail-n,
  .pf-rail.is-open .pf-rail-tick {
    opacity: 1;
    transform: none;
    transition: opacity 0.35s ease calc(var(--i) * 30ms), transform 0.5s var(--rail-ease) calc(var(--i) * 30ms), width 0.5s var(--rail-ease), color 0.3s ease;
  }
  /* no hover on touch: the drawer only opens from the tab */
  .pf-rail:hover .pf-rail-panel::before { clip-path: inset(0 0 0 100% round 18px); opacity: 0; }
  .pf-rail.is-open:hover .pf-rail-panel::before { clip-path: inset(0 0 0 0 round 18px); opacity: 1; }
}

/* ---- the hand-off: a sector's reel ends on the next frequency ---- */
.pf-next {
  grid-column: 1 / -1;
  list-style: none;
  opacity: 0;
  translate: 0 40px;
  transition: opacity 0.9s ease, translate 1.1s var(--nav-ease);
}

.pf-next.is-in { opacity: 1; translate: 0 0; }
.pf-next[hidden] { display: none; }
/* after a lowered right-hand screen, it waits below it */
.pf-next.is-after-right { margin-top: var(--drop); }
.pf-reel.has-next { padding-bottom: 0; }

.pf-next-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(40px, 6vw, 72px) clamp(22px, 4vw, 48px);
  border: 1px solid rgba(254, 238, 207, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(ellipse 70% 90% at 50% 120%, rgba(229, 125, 35, 0.22), transparent 70%),
    repeating-linear-gradient(0deg, rgba(254, 238, 207, 0.025) 0 1px, transparent 1px 3px),
    rgba(12, 5, 3, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
}

/* warp streaks: the jump to the next frequency, under the copy */
.pf-next-streaks {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.pf-next-streaks i {
  position: absolute;
  left: -30%;
  height: 1px;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(250, 167, 25, 0.7), transparent);
  opacity: 0;
}

.pf-next-streaks i:nth-child(1) { top: 22%; }
.pf-next-streaks i:nth-child(2) { top: 38%; width: 45%; }
.pf-next-streaks i:nth-child(3) { top: 55%; }
.pf-next-streaks i:nth-child(4) { top: 71%; width: 38%; }
.pf-next-streaks i:nth-child(5) { top: 84%; }

.pf-next.is-in .pf-next-streaks i { animation: pf-next-warp 3.6s cubic-bezier(0.6, 0, 0.4, 1) infinite; }
.pf-next.is-in .pf-next-streaks i:nth-child(2) { animation-delay: 0.5s; }
.pf-next.is-in .pf-next-streaks i:nth-child(3) { animation-delay: 1.1s; }
.pf-next.is-in .pf-next-streaks i:nth-child(4) { animation-delay: 1.7s; }
.pf-next.is-in .pf-next-streaks i:nth-child(5) { animation-delay: 2.3s; }

@keyframes pf-next-warp {
  0% { opacity: 0; transform: translateX(0); }
  15% { opacity: 1; }
  60%, 100% { opacity: 0; transform: translateX(460%); }
}

.pf-next-k {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.pf-next-k i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(250, 167, 25, 0.14), 0 0 10px rgba(250, 167, 25, 0.8);
}

.pf-next-k span { color: rgba(254, 238, 207, 0.55); }

.pf-next-title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

.pf-next-sub {
  margin: 0;
  max-width: 44ch;
  color: var(--muted);
}

.pf-next-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 22px;
  margin-top: 14px;
}

.pf-next-go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--gradient);
  box-shadow: 0 18px 40px -18px rgba(229, 125, 35, 0.85), inset 0 1px 0 rgba(254, 238, 207, 0.45);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--on-accent, #150905);
  cursor: pointer;
  transition: transform 0.4s var(--nav-ease), box-shadow 0.4s ease;
}

.pf-next-go i { font-style: normal; transition: transform 0.4s var(--nav-ease); }
.pf-next-go:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -18px rgba(229, 125, 35, 0.95), inset 0 1px 0 rgba(254, 238, 207, 0.45); }
.pf-next-go:hover i { transform: translateX(4px); }

.pf-next-all {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(254, 238, 207, 0.3);
  background: none;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(254, 238, 207, 0.75);
  cursor: pointer;
}

.pf-next-all:hover { color: var(--text); border-color: var(--accent-2); }

@media (prefers-reduced-motion: reduce) {
  .pf-scan-tag i,
  .pf-rail-head i { animation: none; }
  .pf-scan.is-scanning .pf-scan-sweep,
  .pf-rail.is-on .pf-rail-panel::after,
  .pf-rail.is-scanning .pf-rail-beam,
  .pf-next.is-in .pf-next-streaks i { animation: none; }
  .pf-rail { transition: opacity 0.2s ease; }
  .pf-next { opacity: 1; translate: 0 0; transition: none; }
}

/* ---- the reel -------------------------------------------------- */
body[data-page="portfolio"] .pf-reel.container { width: min(1380px, 100% - 40px); }

/* room at the edges for the trackers wherever they show */
@media (min-width: 1101px) and (hover: hover) {
  body[data-page="portfolio"] .pf-reel.container,
  body[data-page="portfolio"] .pf-reel-head.container { width: min(1320px, 100% - 220px); }
}

.pf-reel {
  --drop: clamp(60px, 9vw, 170px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(64px, 8vw, 132px) clamp(36px, 6vw, 110px);
  margin: 0 auto;
  padding: 0 0 var(--drop);
  list-style: none;
}

.pf-file {
  --side: 1;
  --turn: 1;
  --ox: 0%;
  position: relative;
  perspective: 1500px;
  opacity: 0;
  translate: 0 60px;
  transition: opacity 0.9s ease, translate 1.2s var(--nav-ease);
}

/* the right-hand screens sit lower, a staggered bank of displays */
.pf-file.is-right { --ox: 100%; }
.pf-file.is-in { opacity: 1; translate: 0 0; }
.pf-file.is-right.is-in { translate: 0 var(--drop); }
.pf-file.is-right:not(.is-in) { translate: 0 calc(var(--drop) + 60px); }
.pf-file[hidden] { display: none; }

.pf-card {
  --hov: 0;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: var(--ox) 50%;
  transform:
    rotateY(calc(var(--side) * var(--turn) * (1 - var(--hov)) * 14deg))
    rotateX(calc(var(--turn) * (1 - var(--hov)) * 2.5deg))
    translateZ(calc(var(--hov) * 30px));
  transition: --hov 0.7s var(--nav-ease);
}

@media (hover: hover) {
  .pf-file:hover .pf-card,
  .pf-file:focus-within .pf-card { --hov: 1; }
}

.pf-file:focus-within .pf-card { --hov: 1; }

/* the screen throws its light down onto the floor below it */
.pf-card::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 58%;
  height: 40%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(229, 125, 35, 0.26), transparent);
  filter: blur(26px);
  opacity: calc(0.55 + var(--hov) * 0.45);
  pointer-events: none;
}

.pf-screen {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(254, 238, 207, 0.12);
  border-radius: 18px;
  background: rgba(12, 5, 3, 0.82);
  box-shadow:
    0 50px 90px -46px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(254, 238, 207, 0.06);
  transition: border-color 0.5s ease;
}

.pf-file:hover .pf-screen,
.pf-file:focus-within .pf-screen { border-color: rgba(250, 167, 25, 0.4); }

.pf-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(254, 238, 207, 0.08);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: rgba(254, 238, 207, 0.55);
}

.pf-bar .pf-rec { opacity: 0.35; animation: none; box-shadow: none; }
.pf-screen.is-live .pf-bar .pf-rec { opacity: 1; animation: pf-blink 1.2s steps(2, jump-none) infinite; box-shadow: 0 0 8px rgba(255, 74, 50, 0.8); }

.pf-call {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pf-tc { font-variant-numeric: tabular-nums; color: var(--accent-2); }

/* the film, at its own frame (the recordings are ~2.1 : 1) */
.pf-frame {
  position: relative;
  aspect-ratio: 1904 / 906;
  overflow: hidden;
  background: #0b0503;
}

.pf-poster,
.pf-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(calc(0.7 + var(--hov) * 0.3)) sepia(calc(0.22 - var(--hov) * 0.22)) contrast(1.04);
  transform: scale(calc(1.035 - var(--hov) * 0.035));
  transition: transform 1.2s var(--nav-ease);
}

.pf-video { opacity: 0; transition: opacity 0.9s ease, transform 1.2s var(--nav-ease); }
.pf-video.is-playing { opacity: 1; }

/* the Mars grade: warm light and a vignette, lifted on hover */
.pf-grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, rgba(10, 4, 2, 0.62) 100%),
    linear-gradient(180deg, rgba(229, 125, 35, 0.2), rgba(192, 69, 39, 0.28));
  mix-blend-mode: multiply;
  opacity: calc(1 - var(--hov) * 0.85);
}

/* scanlines and a breath of grain over the glass */
.pf-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(254, 238, 207, 0.035) 0 1px, transparent 1px 3px);
  opacity: calc(1 - var(--hov) * 0.7);
}

/* viewfinder corners: they close in on the film you point at */
.pf-vf {
  --c: rgba(254, 238, 207, 0.6);
  position: absolute;
  inset: calc(14px + var(--hov) * 8px);
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 16px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 0 / 1px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 16px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 1px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 16px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 1px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 16px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px 16px no-repeat;
}

/* files still in countdown: a screen waiting for its signal */
.pf-static {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(229, 125, 35, 0.14), transparent 70%),
    repeating-linear-gradient(90deg, rgba(254, 238, 207, 0.025) 0 2px, transparent 2px 5px),
    #100604;
}

.pf-static::before {
  content: "";
  position: absolute;
  inset: -50%;
  background-image: radial-gradient(rgba(254, 238, 207, 0.12) 0.6px, transparent 0.8px);
  background-size: 3px 3px;
  animation: pf-snow 0.9s steps(6) infinite;
  opacity: 0.6;
}

@keyframes pf-snow { to { transform: translate(-6px, 4px); } }

.pf-static img { position: relative; width: 56px; height: 56px; border-radius: 12px; opacity: 0.85; }

.pf-static b {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--accent-2);
  animation: pf-blink 1.6s ease-in-out infinite;
}

/* readouts under the film */
.pf-read {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid rgba(254, 238, 207, 0.08);
}

.pf-read div {
  min-width: 0;
  padding: 11px 16px 12px;
  border-left: 1px solid rgba(254, 238, 207, 0.06);
}

.pf-read div:first-child { border-left: 0; }

.pf-read dt {
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(254, 238, 207, 0.38);
}

.pf-read dd {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text);
}

.pf-read dd.is-live,
.pf-read dd.is-soon { display: flex; align-items: center; gap: 7px; text-transform: uppercase; letter-spacing: 0.18em; }
.pf-read dd.is-live { color: var(--accent-2); }
.pf-read dd.is-soon { color: var(--brand-orange); }

.pf-read dd.is-live::before,
.pf-read dd.is-soon::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* the copy under each screen */
.pf-copy { padding: 24px 6px 0; }

.pf-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text);
}

.pf-name a { color: inherit; }

/* the whole card (screen and copy) is the link */
.pf-name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
}

.pf-desc {
  max-width: 48ch;
  margin: 10px 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}

.pf-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.pf-cta i { font-style: normal; transition: transform 0.5s var(--nav-ease); }
.pf-file:hover .pf-cta i,
.pf-file:focus-within .pf-cta i { transform: translateX(6px); }
.pf-cta--soon { color: rgba(254, 238, 207, 0.4); }

.pf-name a:focus-visible { outline: none; }
.pf-file:focus-within .pf-screen { box-shadow: 0 0 0 2px rgba(250, 167, 25, 0.6), 0 50px 90px -46px rgba(0, 0, 0, 0.95); }

/* ---- the comms tracker (the home page's) ----------------------- */
.pf-comms {
  position: fixed;
  left: clamp(12px, 1.6vw, 26px);
  top: 50%;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: rgba(254, 238, 207, 0.55);
  transform: translate(calc(-100% - 40px), -50%);
  transition: transform 0.9s var(--nav-ease);
}

body.pf-in-archive .pf-comms { transform: translate(0, -50%); }

.pf-comms-tag,
.pf-comms-freq { writing-mode: vertical-rl; transform: rotate(180deg); }
.pf-comms-tag { color: var(--accent-2); }
.pf-comms-freq b { font-weight: 500; color: var(--text); }

.pf-comms-signal { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.pf-comms-signal i { width: 3px; background: var(--accent-2); animation: pf-signal 1.6s ease-in-out infinite; }
.pf-comms-signal i:nth-child(1) { height: 30%; }
.pf-comms-signal i:nth-child(2) { height: 50%; animation-delay: 0.15s; }
.pf-comms-signal i:nth-child(3) { height: 70%; animation-delay: 0.3s; }
.pf-comms-signal i:nth-child(4) { height: 85%; animation-delay: 0.45s; }
.pf-comms-signal i:nth-child(5) { height: 100%; animation-delay: 0.6s; }

@keyframes pf-signal { 50% { opacity: 0.25; } }

.pf-comms-line {
  position: relative;
  width: 1px;
  height: clamp(40px, 8vh, 80px);
  overflow: hidden;
  background: rgba(254, 238, 207, 0.2);
}

.pf-comms-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -30%;
  width: 1px;
  height: 30%;
  background: linear-gradient(transparent, var(--accent-2));
  animation: pf-packet 2.4s linear infinite;
}

.pf-comms-line:last-of-type::after { animation-delay: 1.2s; }

@keyframes pf-packet { to { top: 100%; } }

.pf-comms-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }

.pf-comms-list a {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(254, 238, 207, 0.2);
  border-radius: 10px;
  background: rgba(21, 9, 5, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text);
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.pf-comms-list a:hover,
.pf-comms-list a:focus-visible {
  border-color: var(--accent-2);
  background: rgba(250, 167, 25, 0.12);
  color: var(--accent-2);
  transform: translateX(3px);
}

.pf-comms-list svg { width: 16px; height: 16px; fill: currentColor; }

.pf-comms-tip {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  white-space: nowrap;
  padding: 5px 10px;
  border: 1px solid rgba(250, 167, 25, 0.4);
  border-radius: 6px;
  background: rgba(21, 9, 5, 0.9);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--text);
  opacity: 0;
  transform: translate(-6px, -50%);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s var(--nav-ease);
}

.pf-comms-list a:hover .pf-comms-tip,
.pf-comms-list a:focus-visible .pf-comms-tip { opacity: 1; transform: translate(0, -50%); }

.pf-comms-status { display: flex; flex-direction: column; align-items: center; gap: 8px; writing-mode: vertical-rl; transform: rotate(180deg); }
.pf-comms-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px rgba(250, 167, 25, 0.8); animation: pf-blink 1.4s ease-in-out infinite; }

@media (max-width: 1100px), (hover: none) {
  .pf-comms { display: none; }
}

/* ---- sizes ----------------------------------------------------- */
@media (max-width: 1100px) {
  .pf-card {
    transform:
      rotateY(calc(var(--side) * var(--turn) * (1 - var(--hov)) * 9deg))
      rotateX(calc(var(--turn) * (1 - var(--hov)) * 2deg));
  }
}

/* one column: the screens lean back as they come and stand up to face
   you in the middle of the view */
@media (max-width: 767px) {
  .pf-reel { grid-template-columns: minmax(0, 1fr); gap: 64px; padding-bottom: 20px; }
  .pf-file.is-right.is-in,
  .pf-file.is-in { translate: 0 0; }
  .pf-card {
    transform-origin: 50% 100%;
    transform: rotateX(calc(var(--turn) * (1 - var(--hov)) * 10deg));
  }
  .pf-read div { padding: 10px 12px 11px; }
  .pf-bar { padding: 0 12px; }
  body[data-page="portfolio"] .pf-hud { left: clamp(20px, 5vw, 72px); right: auto; transform: none; animation: folio-hud-boot 0.7s steps(1, end) 0.2s both; }
  .pf-hud-log { display: none; }
}


/* ---- reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pf-file { opacity: 1; translate: 0 0; transition: none; }
  .pf-file.is-right { translate: 0 var(--drop); }
  .pf-card { transition: none; }
  .pf-hud-log li { opacity: 1; animation: none; }
  .pf-rec, .pf-static::before, .pf-static b, .pf-comms-signal i, .pf-comms-line::after, .pf-hud-go i, .pf-comms-status i { animation: none; }
  .pf-limb-line { stroke-dashoffset: 0; transition: none; }
  body[data-page="portfolio"] .pf-hud { animation: none; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .pf-file.is-right { translate: 0 0; }
}

/* the hero's camera layers overscan the frame (drift, dust, grain):
   keep them inside it so phones never scroll sideways */
body[data-page="portfolio"] .folio-hero,
body[data-page="portfolio"] .folio-hero-media { overflow: hidden; }
body[data-page="portfolio"] { overflow-x: clip; }

/* very wide screens: a bigger bank of screens */
@media (min-width: 2000px) and (hover: hover) {
  body[data-page="portfolio"] .pf-reel.container,
  body[data-page="portfolio"] .pf-reel-head.container { width: min(1720px, 100% - 260px); }
}

/* the hero always lands in the page ink: this fade belongs to the hero
   (the caption, which fades away on scroll, used to carry it) */
.pf-hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 4;
  height: clamp(180px, 34vh, 360px);
  background: linear-gradient(180deg, rgba(21, 9, 5, 0) 0%, rgba(21, 9, 5, 0.55) 45%, rgba(21, 9, 5, 0.9) 78%, #150905 100%);
  pointer-events: none;
}


/* ============================================================
   HERO MISSION PANEL, directed as one shot
   The About page's recipe (.hud-story on a right-hand log): one
   smoked-glass panel hung in the scene at the same angle, the summit
   log up top and the caption below it on the same glass. The log is
   driven by the rover's own story (portfolio-hero.js reads
   rover-scene.js's feed), with a bracket tracking the rover.
     Open (on load): black, the letterbox parts, the camera pulls
       focus, the panel boots, its lines type in, the title rises out
       of its mask, the subtitle resolves word by word.
     Lift-off (on scroll): portfolio.js writes --lift (0 to 1); the
       ground drops away under the camera and the panel drifts off.
   The open waits for the fonts (html.pf-wait, set and cleared by the
   inline script after the hero); without JS nothing waits.
   ============================================================ */

html.pf-wait .pf-letterbox i,
html.pf-wait body[data-page="portfolio"] .folio-hero-media,
html.pf-wait .folio-hero-caption,
html.pf-wait .folio-hero-caption * {
  animation-play-state: paused !important;
}

body[data-page="portfolio"] .folio-hero {
  --lift: 0;
}

/* ---- the open: from black, through the letterbox ------------ */
.pf-letterbox {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.pf-letterbox i {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  background: #070302;
  animation: pf-open 2.8s cubic-bezier(0.7, 0, 0.2, 1) both;
}

.pf-letterbox i:first-child { top: 0; }
.pf-letterbox i:last-child { bottom: 0; }

@keyframes pf-open {
  0%, 22% { height: 50.5%; }
  58%     { height: 11%; }
  78%     { height: 11%; }
  100%    { height: 0; }
}

/* focus pull on the whole shot */
body[data-page="portfolio"] .folio-hero-media {
  animation: pf-focus 3.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both;
}

@keyframes pf-focus {
  from { scale: 1.14; filter: blur(12px) brightness(0.35) saturate(0.6); }
  60%  { filter: blur(1.5px) brightness(0.9) saturate(0.95); }
  to   { scale: 1; filter: none; }
}

/* ---- lift-off: the ground falls away under the camera ------- */
body[data-page="portfolio"] .mars-terrain-base,
body[data-page="portfolio"] .mars-photo,
body[data-page="portfolio"] .mars-photo-grade,
body[data-page="portfolio"] .mars-terrain-fx,
body[data-page="portfolio"] .rover-scene,
body[data-page="portfolio"] .mars-ember-glow,
.pf-track {
  translate: 0 calc(var(--lift) * 26vh);
}

body[data-page="portfolio"] .folio-sky,
body[data-page="portfolio"] .folio-sky-canvas {
  translate: 0 calc(var(--lift) * 5vh);
}

/* the panel drifts up and away, a touch faster than the shot */
body[data-page="portfolio"] .folio-hero-caption {
  transform: translate3d(0, calc(var(--lift) * -7vh), 0) !important;
  opacity: calc(1 - var(--lift) * 1.3) !important;
  filter: blur(calc(var(--lift) * 4px));
}

/* ---- the panel: About's right-hand log, same angle, same place --- */
body[data-page="portfolio"] .pf-hud {
  top: clamp(96px, 17vh, 170px);
  bottom: auto;
  left: auto;
  right: clamp(20px, 5vw, 72px);
  width: calc(clamp(300px, 25vw, 400px) * var(--hud-scale));
  max-width: calc(100% - 40px);
  padding: 0.875em 1.125em 0.875em 1em;
  font-size: calc(1rem * var(--hud-scale));
  text-shadow: 0 1px 14px rgba(21, 9, 5, 0.65), 0 0 2px rgba(21, 9, 5, 0.5);
  transform: perspective(900px) rotateY(-20deg) rotateX(2deg);
  transform-origin: right center;
  animation: pf-hud-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.9s both, folio-hud-boot 0.9s steps(1, end) 1.9s both;
}

/* About's taller-panel glass: fades at its edges on both axes, toward
   the outer (right) edge on a right-hand panel */
body[data-page="portfolio"] .pf-hud::before {
  inset: -30px -48px;
  -webkit-mask-image:
    linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, 0.55) 10%, #000 24%, #000 70%, rgba(0, 0, 0, 0.5) 86%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 6%, #000 14%, #000 86%, rgba(0, 0, 0, 0.6) 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, 0.55) 10%, #000 24%, #000 70%, rgba(0, 0, 0, 0.5) 86%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 6%, #000 14%, #000 86%, rgba(0, 0, 0, 0.6) 94%, transparent 100%);
  mask-composite: intersect;
}

/* the stages: About's .hud-stages, a dash per line; done lines lift,
   the live one burns orange with a longer, glowing dash */
.pf-stages {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
}

.pf-stages li {
  position: relative;
  padding: 0.19em 0 0.19em 1.25em;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(254, 238, 207, 0.26);
  transition: color 0.35s ease, text-shadow 0.35s ease;
  animation: pf-flick 0.32s linear both;
}

.pf-stages li:nth-child(1) { animation-delay: 2.5s; }
.pf-stages li:nth-child(2) { animation-delay: 2.6s; }
.pf-stages li:nth-child(3) { animation-delay: 2.7s; }
.pf-stages li:nth-child(4) { animation-delay: 2.8s; }
.pf-stages li:nth-child(5) { animation-delay: 2.9s; }
.pf-stages li:nth-child(6) { animation-delay: 3s; }

@keyframes pf-flick {
  0% { opacity: 0; }
  35% { opacity: 1; }
  55% { opacity: 0.25; }
  100% { opacity: 1; }
}

.pf-stages li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 1px;
  background: currentColor;
}

.pf-stages li.is-done {
  color: rgba(254, 238, 207, 0.78);
}

.pf-stages li.is-now {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(229, 125, 35, 0.55);
}

.pf-stages li.is-now::before {
  width: 10px;
  height: 2px;
  box-shadow: 0 0 8px var(--accent);
}

/* telemetry: About's .hud-tele */
.pf-hud-tele {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(254, 238, 207, 0.3), transparent) 1;
  font-family: var(--font-mono);
  animation: pf-flick 0.4s linear 3.1s both;
}

.pf-hud-tele dt {
  font-size: 0.56em;
  letter-spacing: 0.2em;
  color: rgba(254, 238, 207, 0.5);
}

.pf-hud-tele dd {
  margin: 2px 0 0;
  font-size: 0.62em;
  letter-spacing: 0.1em;
  color: rgba(254, 238, 207, 0.6);
}

.pf-hud-tele b {
  font-size: 1.25em;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* the caption, on the same glass below a quiet rule (.hud-caption) */
.pf-hud-cap::before {
  content: "";
  display: block;
  height: 1px;
  margin-top: 14px;
  background: linear-gradient(90deg, rgba(254, 238, 207, 0.3), rgba(254, 238, 207, 0.08));
}

body[data-page="portfolio"] .pf-hud .folio-hud-status {
  margin: 14px 0 8px;
  font-size: 0.72em;
}

body[data-page="portfolio"] .pf-hud .folio-hud-title {
  max-width: none;
  font-size: calc(clamp(1.4rem, 1.9vw, 1.95rem) * var(--hud-scale));
  line-height: 1.15;
}

/* a shadow would paint over gradient-clipped text: glow it instead */
body[data-page="portfolio"] .pf-hud .gradient-text {
  text-shadow: none;
  filter: drop-shadow(0 1px 10px rgba(21, 9, 5, 0.55));
}

/* the title rises out of its mask, like About's chapter titles */
.pf-tmask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.pf-tin {
  display: block;
  animation: pf-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) 3.4s both;
}

@keyframes pf-rise {
  from { transform: translateY(105%); letter-spacing: 0.04em; }
  to { transform: none; letter-spacing: normal; }
}

body[data-page="portfolio"] .pf-hud .folio-hud-subtitle {
  max-width: none;
  margin-top: 8px;
  font-size: calc(clamp(0.86rem, 1vw, 0.98rem) * var(--hud-scale));
  line-height: 1.5;
}

.pf-hud-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.62em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(254, 238, 207, 0.55);
}

.pf-hud-stats b {
  font-weight: 500;
  color: var(--accent-2);
}

body[data-page="portfolio"] .pf-hud .pf-hud-go {
  margin-top: 6px;
  animation: pf-flick 0.5s linear 4.3s both;
}

/* ---- the words, live (portfolio-hero.js) ---------------------- */
.is-held { visibility: hidden; }
.is-typing [data-live] { visibility: hidden; }

.pf-word {
  display: inline-block;
  animation: pf-word 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes pf-word {
  from { opacity: 0; transform: translateY(0.5em); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ---- tracking: a bracket locked on the rover ------------------- */
.pf-track {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}

.pf-track.is-on { opacity: 1; }

.pf-track-box {
  position: relative;
  display: block;
  width: var(--w, 120px);
  height: var(--h, 80px);
  --c: rgba(250, 167, 25, 0.7);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 10px 1px,
    linear-gradient(var(--c), var(--c)) 0 0 / 1px 10px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 10px 1px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 1px 10px,
    linear-gradient(var(--c), var(--c)) 0 100% / 10px 1px,
    linear-gradient(var(--c), var(--c)) 0 100% / 1px 10px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 10px 1px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px 10px;
  background-repeat: no-repeat;
}

.pf-track-box i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border: 1px solid rgba(250, 167, 25, 0.7);
  border-radius: 50%;
}

/* ---- the viewfinder: brackets on the frame's corners ------------ */
.pf-vfx {
  position: absolute;
  inset: clamp(88px, 12vh, 104px) clamp(14px, 2.4vw, 36px) clamp(14px, 2.4vh, 26px);
  z-index: 6;
  pointer-events: none;
  opacity: calc(1 - var(--lift) * 1.1);
}

.pf-vfx-c {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid rgba(250, 167, 25, 0.75);
  animation: pf-lock 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.5s both;
}

.pf-vfx-c--tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; --dx: -18px; --dy: -18px; }
.pf-vfx-c--tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; --dx: 18px; --dy: -18px; }
.pf-vfx-c--bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; --dx: -18px; --dy: 18px; }
.pf-vfx-c--br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; --dx: 18px; --dy: 18px; }

/* the brackets close in and lock, like autofocus finding its mark */
@keyframes pf-lock {
  0%   { opacity: 0; transform: translate(var(--dx), var(--dy)); }
  60%  { opacity: 1; transform: translate(calc(var(--dx) * -0.12), calc(var(--dy) * -0.12)); }
  75%  { opacity: 0.4; }
  85%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

html.pf-wait .pf-vfx-c { animation-play-state: paused !important; }

/* ---- the feed: the Services field-footage look on the whole shot ---- */
/* scanlines, a soft lens vignette and a slow roll bar, like the REC
   tiles on the Services page; a tear across the picture when the
   camera cuts between the wide shot and the EVA */
.pf-feed {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(8, 3, 1, 0.5) 100%);
  opacity: calc(1 - var(--lift) * 0.8);
}

.pf-feed-roll {
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  height: 22%;
  background: linear-gradient(to bottom, transparent, rgba(254, 238, 207, 0.035) 45%, rgba(254, 238, 207, 0.05) 50%, transparent);
  animation: pf-roll 9s linear infinite;
}

@keyframes pf-roll {
  to { transform: translateY(620%); }
}

.pf-feed-tear {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  height: 7%;
  opacity: 0;
  background:
    repeating-linear-gradient(90deg, rgba(254, 238, 207, 0.1) 0 2px, transparent 2px 7px),
    linear-gradient(to bottom, transparent, rgba(250, 167, 25, 0.12), transparent);
  mix-blend-mode: screen;
}

.pf-feed.is-switch .pf-feed-tear {
  animation: pf-tear 0.5s steps(6, end);
}

@keyframes pf-tear {
  0%   { opacity: 1; transform: translate(-3%, -120%) scaleY(0.6); }
  30%  { opacity: 1; transform: translate(2%, 90%) scaleY(1.4); }
  60%  { opacity: 0.8; transform: translate(-1%, 260%) scaleY(0.8); }
  100% { opacity: 0; transform: translate(0, 420%); }
}

/* the picture jumps a frame as the camera cuts */
.pf-feed.is-switch { animation: pf-jolt 0.5s steps(4, end); }

@keyframes pf-jolt {
  0%, 100% { transform: none; }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(3px) skewX(-0.6deg); }
  75% { transform: translateX(-1px); }
}

/* the camera eases in on the spacewalk (origin set by portfolio-hero.js) */
body[data-page="portfolio"] .folio-camera {
  scale: 1;
  transition: scale 2.6s cubic-bezier(0.45, 0, 0.2, 1);
}

body[data-page="portfolio"] .folio-hero.is-eva .folio-camera { scale: 1.12; }

/* the REC readout on the frame's edge, inside the corner brackets */
.pf-rechud {
  position: absolute;
  z-index: 6;
  top: calc(clamp(88px, 12vh, 104px) + 14px);
  left: calc(clamp(14px, 2.4vw, 36px) + 34px);
  display: grid;
  gap: 6px;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: rgba(254, 238, 207, 0.78);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  opacity: calc(1 - var(--lift) * 1.1);
  animation: pf-flick 0.5s linear 2.2s both;
}

.pf-rechud-rec {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-rechud-rec i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-ember);
  box-shadow: 0 0 8px rgba(192, 69, 39, 0.8);
  animation: pf-blink 1.2s steps(2, jump-none) infinite;
}

.pf-rechud b {
  font-weight: 500;
  color: var(--accent-2);
}

/* the transmit line only runs while the EVA is live */
.pf-rechud-tx {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-2);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.folio-hero.is-eva .pf-rechud-tx { opacity: 1; transform: none; }

.pf-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 9px;
}

.pf-bars i {
  width: 2px;
  background: var(--accent-2);
  animation: pf-bar-sig 1.1s ease-in-out infinite;
}

.pf-bars i:nth-child(1) { height: 3px; animation-delay: 0s; }
.pf-bars i:nth-child(2) { height: 5px; animation-delay: 0.15s; }
.pf-bars i:nth-child(3) { height: 7px; animation-delay: 0.3s; }
.pf-bars i:nth-child(4) { height: 9px; animation-delay: 0.45s; }

@keyframes pf-bar-sig { 50% { opacity: 0.25; } }

.pf-rechud-tc {
  position: absolute;
  z-index: 6;
  bottom: calc(clamp(14px, 2.4vh, 26px) + 14px);
  right: calc(clamp(14px, 2.4vw, 36px) + 34px);
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: rgba(254, 238, 207, 0.6);
  font-variant-numeric: tabular-nums;
  opacity: calc(1 - var(--lift) * 1.1);
  animation: pf-flick 0.5s linear 2.3s both;
}

html.pf-wait .pf-rechud,
html.pf-wait .pf-rechud-tc { animation-play-state: paused !important; }

/* the bracket snaps between marks when the camera cuts */
.pf-track.is-snap {
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pf-track.is-snap .pf-track-box {
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* on the astronaut, the bracket is the recording camera's: a red REC dot */
.pf-track-rec {
  position: absolute;
  top: -12px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-ember);
  box-shadow: 0 0 8px rgba(192, 69, 39, 0.9);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.folio-hero.is-eva .pf-track-rec {
  opacity: 1;
  animation: pf-blink 1.2s steps(2, jump-none) infinite;
}

/* his transmission: rings off the helmet, calm, in the brand amber */
.pf-tx {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  translate: 0 calc(var(--lift) * 26vh);
}

.pf-tx.is-on { opacity: 1; }

.pf-tx i {
  position: absolute;
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(250, 167, 25, 0.7);
  /* the upper half only: the signal goes up, to Earth */
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 60%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 60%);
  animation: pf-ring 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

.pf-tx i:nth-child(2) { animation-delay: 0.8s; }
.pf-tx i:nth-child(3) { animation-delay: 1.6s; }

@keyframes pf-ring {
  from { transform: scale(1); opacity: 0.9; }
  to   { transform: scale(4.2); opacity: 0; }
}

/* ---- smaller screens: About's docked panel, caption first ------- */
@media (max-width: 767px) {
  body[data-page="portfolio"] .pf-hud {
    top: auto;
    bottom: clamp(28px, 6vh, 56px);
    left: clamp(16px, 5vw, 32px);
    right: auto;
    width: auto;
    max-width: calc(100% - 32px);
    transform: none;
    animation: folio-hud-boot 0.9s steps(1, end) 1.9s both;
  }

  .pf-stages,
  .pf-hud-tele { display: none; }

  .pf-hud-cap::before { display: none; }
  .pf-rechud-tc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-letterbox { display: none; }
  body[data-page="portfolio"] .folio-hero.is-eva .folio-camera { scale: 1; }
  .pf-feed-roll,
  .pf-feed.is-switch,
  .pf-feed.is-switch .pf-feed-tear,
  .pf-tx i,
  .pf-bars i,
  .pf-rechud,
  .pf-rechud-tc,
  .pf-vfx-c,
  body[data-page="portfolio"] .folio-hero-media,
  body[data-page="portfolio"] .pf-hud,
  .pf-stages li,
  .pf-hud-tele,
  .pf-tin,
  body[data-page="portfolio"] .pf-hud .pf-hud-go {
    animation: none;
  }
}