/* =====================================================================
   PeeZee Design — site styles
   ===================================================================== */

:root {
  --ink: #111;
  --ink-soft: #555;
  --ink-faint: #999;
  --paper: #fafaf8;
  --accent: #b8865b;     /* warm amber */
  --accent-soft: #c79a6f;
  --gutter: clamp(20px, 4vw, 56px);
}

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

html, body {
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  overflow: hidden;
  cursor: none;
}

/* Custom cursor — small dot with lagging ring */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transition: transform 80ms ease-out, width 200ms ease, height 200ms ease, background 200ms ease, border-color 200ms ease;
  transform: translate3d(-100px, -100px, 0);
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--ink);
}
.cursor-ring {
  width: 32px; height: 32px;
  border: 1px solid var(--ink-faint);
  margin: -13px 0 0 -13px;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), width 200ms, height 200ms, border-color 200ms;
}
body.cursor-active .cursor-ring {
  width: 56px; height: 56px;
  margin: -25px 0 0 -25px;
  border-color: var(--accent);
}
body.cursor-active .cursor-dot {
  background: var(--accent);
}

@media (hover: none) {
  html, body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
}

/* =====================================================================
   STAGE — full screen layered scenes
   ===================================================================== */
.stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.stage.active { opacity: 1; pointer-events: auto; }

/* =====================================================================
   INTRO
   ===================================================================== */
#intro {
  background: var(--paper);
  flex-direction: column;
  text-align: center;
  padding: var(--gutter);
  z-index: 10;
}

.ghost {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 6s ease;
  filter: grayscale(40%);
}
#intro.ghost-on .ghost { opacity: 0.18; }

.intro-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 980px;
  z-index: 2;
}

.intro-line {
  color: var(--paper);  /* starts white = invisible against white */
  transition: color 4s ease;
  opacity: 0;
}
.intro-line.vis {
  opacity: 1;
}
.intro-line.ink   { color: var(--ink); }
.intro-line.soft  { color: var(--ink-soft); }
.intro-line.faint { color: var(--ink-faint); }

.quote-main {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: clamp(20px, 2.6vw, 36px);
  letter-spacing: 0.02em;
  line-height: 1.45;
  text-wrap: balance;
}

.quote-sub {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.brand {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 200;
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: 0.22em;
  line-height: 1;
  margin-top: 24px;
  text-transform: uppercase;
}
.brand-sub {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* Portal — gate + perspective arrow */
.portal {
  margin-top: 32px;
  background: none; border: none;
  cursor: none;
  padding: 14px 24px;
  display: inline-flex;
  align-items: center; justify-content: center;
}
.portal svg { display: block; }
.portal .gate-post,
.portal .gate-lintel {
  stroke: var(--ink-faint);
  stroke-width: 1.4;
  fill: none;
  transition: stroke 600ms ease;
}
.portal .arrow-outline {
  stroke: var(--ink-faint);
  stroke-width: 1.2;
  fill: none;
  transition: stroke 600ms ease;
}
.portal:hover .gate-post,
.portal:hover .gate-lintel,
.portal:hover .arrow-outline {
  stroke: var(--accent);
}

/* =====================================================================
   DREAMSCAPE
   ===================================================================== */
#dreamscape {
  background: var(--paper);
  z-index: 5;
}

.dream-canvas {
  position: relative;
  width: 100%; height: 100%;
}

.fragment {
  position: absolute;
  width: clamp(180px, 18vw, 280px);
  height: clamp(220px, 22vw, 340px);
  cursor: none;
  opacity: var(--rest-opacity, 1);
  transition: opacity 700ms ease, scale 700ms cubic-bezier(.2,.8,.2,1);
  will-change: transform, translate;
}
.fragment.frag-wide {
  width: clamp(340px, 34vw, 560px);
  height: clamp(220px, 21vw, 320px);
}
.fragment.frag-square {
  width: clamp(220px, 22vw, 340px);
  height: clamp(220px, 22vw, 340px);
}
.fragment:hover {
  opacity: 1;
  scale: 1.06;
  z-index: 100 !important;
}
.fragment .frag-img,
.fragment .frag-svg {
  width: 100%; height: 100%;
  object-fit: contain;
  background: transparent;
  display: block;
  padding: 4px;
  /* Boost paper to pure white, then multiply drops it out */
  filter: contrast(1.6) brightness(1.22);
  mix-blend-mode: multiply;
}
/* Photo fragments still cover, no blend, no contrast boost */
.fragment.is-photo .frag-img {
  object-fit: cover;
  background: #ececea;
  padding: 0;
  mix-blend-mode: normal;
  filter: none;
}
/* Sketches with pastel colors — preserve original colors, no contrast/multiply */
.fragment.preserve-colors .frag-img,
.fragment.preserve-colors .frag-svg {
  mix-blend-mode: normal;
  filter: none;
}
.fragment .frag-label {
  position: absolute;
  white-space: nowrap;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(250, 250, 248, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 6px 14px;
  border: none;
  opacity: 0;
  transition: opacity 400ms ease;
  z-index: 10;
  max-width: min(360px, 90vw);
  /* Counter-scale so labels stay at consistent size regardless of fragment scale */
  scale: calc(1 / var(--scale, 1));
}
/* Default — below tile */
.fragment.label-below .frag-label {
  left: 50%; bottom: -4px;
  transform: translateX(-50%) translateY(100%);
}
.fragment.label-above .frag-label {
  left: 50%; top: -4px;
  transform: translateX(-50%) translateY(-100%);
}
.fragment.label-inside-top .frag-label {
  left: 50%; top: 8%;
  transform: translateX(-50%);
}
.fragment.label-inside-bottom .frag-label {
  left: 50%; bottom: 8%;
  transform: translateX(-50%);
}
.fragment.label-inside-bottom-right .frag-label {
  right: 6%; bottom: 8%;
  left: auto;
  transform: none;
}
.fragment.label-inside-bottom-left .frag-label {
  left: 6%; bottom: 8%;
  transform: none;
}
.fragment.label-left .frag-label {
  right: 100%; top: 50%;
  margin-right: -8px;
  transform: translateY(-50%);
}
.fragment.label-right .frag-label {
  left: 100%; top: 50%;
  margin-left: -8px;
  transform: translateY(-50%);
}
.fragment:hover .frag-label,
.fragment.revealed .frag-label { opacity: 1; }
.fragment.revealed {
  filter: grayscale(0%) contrast(1) brightness(1);
  opacity: 1;
  z-index: 90;
}

.fragment .frag-num {
  position: absolute;
  top: 8px; left: 8px;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--paper);
  background: rgba(0,0,0,0.35);
  padding: 3px 7px;
  z-index: 2;
}

/* Manifesto line at the bottom — visible across dreamscape and project pages */
.manifesto {
  position: fixed;
  left: 50%; bottom: 36px;
  transform: translateX(-50%);
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
  z-index: 40;
  pointer-events: none;
  text-align: center;
  white-space: normal;
  max-width: min(90vw, 1100px);
  line-height: 1.4;
  opacity: 0;
  transition: opacity 800ms ease;
}
/* Show once intro is past */
body.intro-done .manifesto { opacity: 1; }

/* On the project's TEXT slide, the quote is the second voice on the page —
   make it bigger to give it real presence. Longer quotes wrap to a second
   line and stay readable. Also position the quote in the RIGHT column,
   below the thumbnails, so long body text on the left doesn't run into it. */
body:has(#project.show-text.active) .manifesto {
  font-size: 16px;
  letter-spacing: 0.20em;
  left: auto;
  right: 6vw;
  bottom: 6vh;
  transform: none;
  text-align: right;
  max-width: 44vw;
  line-height: 1.45;
  /* Hard cap at 2 lines so long quotes don't push into the body text area */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Brand mark in corner */
.brand-mark {
  position: fixed;
  top: 28px; left: 32px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 0.18em;
  z-index: 50;
  cursor: none;
  text-decoration: none;
  color: var(--ink);
}

/* Hamburger menu */
.menu-trigger,
.menu-panel { display: none !important; }
  background: none; border: none;
  cursor: none;
  z-index: 50;
}
.menu-trigger span {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform 300ms, opacity 300ms;
}
.menu-trigger span:nth-child(1) { width: 22px; }
.menu-trigger span:nth-child(2) { width: 16px; align-self: flex-end; }
body.menu-open .menu-trigger span:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
  width: 22px;
}
body.menu-open .menu-trigger span:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
  width: 22px;
}

/* Contact envelope — persistent floating button (bottom-right) */
.envelope-btn {
  position: fixed;
  bottom: 64px; left: 32px;
  width: 38px; height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none; border: none;
  cursor: none;
  z-index: 50;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms ease;
}
/* Show only after intro is complete (when intro stage is no longer active) */
body.intro-done .envelope-btn {
  opacity: 0.55;
  pointer-events: auto;
}
body.intro-done .envelope-btn:hover {
  opacity: 1;
}

/* PZ — biographical link, sits in the gap between Permeable House and Back Yard sketches */
.pz-btn {
  position: fixed;
  top: 39%; left: 32px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  background: none; border: none;
  cursor: none;
  z-index: 50;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms ease;
}
body.intro-done .pz-btn {
  opacity: 0.55;
  pointer-events: auto;
}
body.intro-done .pz-btn:hover {
  opacity: 1;
}
.pz-mark {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 200;
  font-size: 66px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1;
}
.pz-label {
  margin-left: 18px;
  white-space: nowrap;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.pz-btn:hover .pz-label {
  opacity: 1;
}
.envelope-btn img {
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.envelope-label {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 14px;
  white-space: nowrap;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.envelope-btn:hover .envelope-label {
  opacity: 1;
}

.menu-panel {
  position: fixed; inset: 0;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 18px;
  opacity: 0; pointer-events: none;
  transition: opacity 500ms ease;
  z-index: 40;
}
body.menu-open .menu-panel { opacity: 1; pointer-events: auto; }

.menu-panel a {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: 0.16em;
  text-decoration: none;
  color: var(--ink);
  cursor: none;
  transition: color 300ms;
}
.menu-panel a:hover { color: var(--accent); }
.menu-panel .menu-meta {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 24px;
}

/* =====================================================================
   PROJECT REVEAL — image-focused viewer
   ===================================================================== */
#project {
  background: var(--paper);
  z-index: 8;
  flex-direction: column;
}

/* The image fills the available space with breathing room around it.
   object-fit: contain shows the whole image without cropping. */
.reveal-stage {
  position: absolute;
  inset: 14vh 18vw 18vh 18vw;   /* generous white-space margins */
  display: flex;
  align-items: center;
  justify-content: center;
}
.reveal-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 600ms ease;
  display: block;
}
.reveal-img.loaded { opacity: 1; }

/* Concept text slide — same area as image, but with editorial text instead */
.reveal-text {
  position: absolute;
  inset: 14vh 18vw 18vh 18vw;
  display: none;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 6vw;
  opacity: 0;
  transition: opacity 800ms ease;
  overflow: visible;
}
.reveal-text.visible {
  display: flex;
  opacity: 1;
}
.reveal-text-inner {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 60ch;
  overflow-y: auto;
  scrollbar-width: thin;
}
.reveal-text-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 200;
  font-size: clamp(18px, 1.9vw, 28px);
  letter-spacing: 0.10em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 18px;
  white-space: normal;
  text-wrap: balance;
  max-width: 100%;
}
.reveal-text-tag {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 36px;
}
.reveal-text-tag:empty { display: none; }
.reveal-text-tag:empty + .reveal-text-body { margin-top: 0; }
.reveal-text-body {
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.7;
  color: var(--ink);
  max-width: 64ch;
  text-wrap: pretty;
}
.reveal-text-body p {
  margin-bottom: 18px;
}
.reveal-text-body p:last-child {
  margin-bottom: 0;
}

/* Card deck — gallery thumbs piled like old photographs on a table */
.reveal-text-cards {
  position: relative;
  flex: 0 0 auto;
  width: clamp(260px, 26vw, 380px);
  height: clamp(320px, 32vw, 460px);
  align-self: center;
}
.reveal-text-cards .card {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(170px, 17vw, 230px);
  height: clamp(120px, 12vw, 165px);
  background-color: #ececea;
  background-size: cover;
  background-position: center;
  /* Vintage photo paper edges — thicker, slightly warm cream border */
  border: 8px solid #f4efe6;
  border-bottom-width: 22px;   /* old prints have a thicker bottom margin */
  /* Layered shadow — soft + sharp for a heavy-paper feel */
  box-shadow:
    0 1px 1px rgba(60, 40, 20, 0.18),
    0 8px 20px rgba(60, 40, 20, 0.22),
    0 22px 40px rgba(60, 40, 20, 0.18);
  /* Faintly desaturated, faintly warm — like aged Kodachrome */
  filter: saturate(0.82) sepia(0.10) contrast(0.95);
  cursor: none;
  transform: translate(-50%, -50%) translate(var(--off-x, 0), var(--off-y, 0)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  transition: transform 500ms cubic-bezier(.2,.8,.2,1), box-shadow 400ms ease, filter 400ms ease;
  z-index: var(--z, 1);
}
.reveal-text-cards .card:hover {
  transform: translate(-50%, -50%) translate(var(--off-x, 0), var(--off-y, 0)) rotate(var(--rot, 0deg)) scale(calc(var(--sc, 1) * 1.08));
  box-shadow:
    0 2px 2px rgba(60, 40, 20, 0.22),
    0 18px 36px rgba(60, 40, 20, 0.32),
    0 40px 60px rgba(60, 40, 20, 0.24);
  filter: saturate(1) sepia(0) contrast(1);
  z-index: 200;
}

/* Hide prev/next arrows while on the text (concept) slide — only the photo
   pile on the right is the way forward. */
#project.show-text .proj-nav { display: none !important; }

/* When the project is showing a text slide, hide the image */
#project.show-text .reveal-img { opacity: 0; }
#project:not(.show-text) .reveal-text { display: none; }

/* Project title — sits in the top-left, just below the back button,
   so it never overlaps with the image (which is centered in the page). */
.project-meta {
  position: absolute;
  left: 84px;            /* clears the back button (which is at left:32px + width) */
  top: 26px;
  max-width: 56ch;
  color: var(--ink);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 800ms ease 400ms, transform 800ms ease 400ms;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
#project.zoomed-out .project-meta {
  opacity: 1;
  transform: translateY(0);
}
.proj-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 200;
  font-size: 24px;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
  white-space: nowrap;
}
/* Preserve lowercase for marked spans even inside uppercase titles */
.proj-title .keep-lc,
.reveal-text-title .keep-lc,
.frag-label .keep-lc {
  text-transform: lowercase;
}
.proj-tag {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0.7;
}
.proj-tag:empty { display: none; }

/* Lower-right counter — small, faint */
.proj-counter {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--gutter) + 4px);
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 800ms ease 600ms;
  z-index: 3;
  user-select: none;
}
#project.zoomed-out .proj-counter { opacity: 1; }

/* Prev/next inside-image — translucent until hover */
.proj-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250,250,248,0.6);
  border: none;
  cursor: none;
  z-index: 4;
  color: var(--ink);
  opacity: 0;
  transition: opacity 800ms ease 600ms, background 240ms ease, color 240ms ease;
}
#project.zoomed-out .proj-nav { opacity: 0.75; }
.proj-nav:hover {
  opacity: 1 !important;
  background: rgba(250,250,248,0.95);
  color: var(--accent);
}
.proj-nav.prev { left: 20px; }
.proj-nav.next { right: 20px; }
.proj-nav svg { display: block; }

/* Back arrow — top-left, matches bio/connect style */
.proj-close {
  position: absolute;
  top: 24px; left: 32px;
  color: var(--ink-faint);
  text-decoration: none;
  opacity: 0;
  transition: opacity 800ms ease 600ms, color 240ms ease;
  z-index: 50;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#project.zoomed-out .proj-close { opacity: 0.7; }
.proj-close:hover { opacity: 1 !important; color: var(--accent); }
.proj-close svg { display: block; }

.reveal-image {
  /* Deprecated — kept as empty stub for old references */
}
.proj-close-icon, .proj-close-text { display: none; }

/* =====================================================================
   PLACEHOLDER for missing images (works site-wide via <img onerror>)
   ===================================================================== */
.img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #d8d6d2 0 14px, #cdcbc6 14px 28px);
  color: var(--ink-soft);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 12px;
  text-wrap: balance;
}

/* =====================================================================
   PHONE LAYOUT — 720px and below
   ---------------------------------------------------------------------
   The dreamscape composition is fundamentally landscape. On phones the
   sketches reflow into a vertically-scrollable editorial column where each
   sketch sits in its own page-sized "spread" with title beneath it.
   ===================================================================== */
@media (max-width: 720px) {

  /* Allow scrolling on phones */
  html, body {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    cursor: auto;
  }
  .cursor-dot, .cursor-ring { display: none !important; }

  /* ------------- INTRO ------------- */
  #intro {
    min-height: 100vh;
    padding: 32px 20px;
  }
  .intro-stack {
    gap: 28px;
  }
  .quote-main {
    font-size: 24px !important;
    line-height: 1.4;
  }
  .quote-sub {
    font-size: 12px !important;
    letter-spacing: 0.24em;
  }
  .brand {
    font-size: 48px !important;
    letter-spacing: 0.18em;
  }
  .portal {
    margin-top: 18px;
  }
  .portal svg {
    width: 52px;
    height: 110px;
  }

  /* ------------- DREAMSCAPE — editorial scroll ------------- */
  /* When the dreamscape is active, the stage stops being a fixed canvas
     and becomes a normal scrollable column. */
  #dreamscape {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 90px 0 120px;
    display: block;
    align-items: stretch;
    justify-content: stretch;
  }
  /* When intro is no longer active and dreamscape is, allow document to scroll */
  body:not(:has(#intro.active)) {
    overflow-y: auto;
  }
  /* Disable the stage fade-opacity trick which depended on fixed positioning */
  #dreamscape.active {
    opacity: 1;
    pointer-events: auto;
  }

  .dream-canvas {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    width: 100%;
    height: auto;
    padding: 0 20px;
  }

  /* Reset every fragment to a normal flow item — no absolute positioning,
     no rotation, no scatter offsets, no scaling. Pure column layout. */
  .fragment,
  .fragment.frag-wide,
  .fragment.frag-square,
  .fragment.frag-tall {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 88vw !important;
    max-width: 460px;
    height: auto !important;
    aspect-ratio: 4 / 3;
    transform: none !important;
    rotate: 0deg !important;
    scale: 1 !important;
    translate: 0 0 !important;
    animation: none !important;
    opacity: 1 !important;
    z-index: auto !important;
    margin: 0 auto;
  }
  /* Wide and square sketches keep wider aspect for legibility */
  .fragment.frag-wide { aspect-ratio: 16 / 10; }
  .fragment.frag-square { aspect-ratio: 1 / 1; }

  .fragment .frag-img,
  .fragment .frag-svg {
    padding: 0;
    filter: contrast(1.4) brightness(1.15);
  }

  /* Title always visible beneath the sketch on phone */
  .fragment .frag-label,
  .fragment.label-left .frag-label,
  .fragment.label-right .frag-label,
  .fragment.label-above .frag-label,
  .fragment.label-below .frag-label,
  .fragment.label-inside-top .frag-label,
  .fragment.label-inside-bottom .frag-label {
    position: static !important;
    transform: none !important;
    margin: 16px auto 0 !important;
    opacity: 1 !important;
    background: transparent;
    backdrop-filter: none;
    border: none;
    padding: 0;
    font-size: 11px;
    letter-spacing: 0.28em;
    white-space: normal;
    text-align: center;
    max-width: 90vw;
  }
  /* The label sits inside a wrapper so it actually appears beneath the sketch */
  .fragment {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 8px;
  }

  /* Hide manifesto line at bottom — too small on phone */
  .manifesto { font-size: 10px; bottom: 14px; }

  /* ------------- PROJECT REVEAL ------------- */
  .project-meta {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }
  .proj-title { font-size: 32px; }
  .proj-tag { font-size: 10px; letter-spacing: 0.22em; }
  .proj-concept { font-size: 14px; }
  .thumb-strip {
    right: 16px;
    bottom: 80px;
    max-width: 70vw;
  }
  .thumb { width: 44px; height: 32px; }

  /* Hide hamburger menu entirely on phone */
  .menu-trigger,
  .menu-panel { display: none !important; }

  /* PERSISTENT BUTTONS */
  .envelope-btn {
    bottom: 16px;
    left: 16px;
    width: 32px;
    height: 22px;
  }
  /* PZ button — on phone, move it inline into the sketch column,
     positioned after the last project. Style as a large editorial link. */
  .pz-btn {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    order: 999;   /* push to end of flex order */
    align-self: center;
    margin: 32px auto 0;
    padding: 24px 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .pz-mark {
    font-size: 56px !important;
  }
  .pz-label {
    display: inline-block !important;
    margin-top: 12px;
    margin-left: 0 !important;
    text-align: center;
    opacity: 1 !important;
    font-size: 11px !important;
    letter-spacing: 0.28em !important;
  }
  .pz-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Project reveal close button — show only the back arrow on phone,
     positioned top-left to match bio/connect pages. No background pill. */
  .proj-close {
    top: 16px !important;
    left: 16px !important;
    right: auto !important;
    background: none !important;
    padding: 4px !important;
    color: var(--ink-faint) !important;
  }
  .proj-close-text { display: none !important; }
  .proj-close-icon { display: block !important; }

  /* Hide the corner Close text on desktop layout when on phone */
  .back-link {
    top: 16px !important;
    left: 16px !important;
  }

  /* ------------- BIO PAGE ------------- */
  .bio-article {
    padding: 20vh 16px 25vh !important;
    width: 92vw !important;
  }
  .bio-article p {
    font-size: 18px !important;
    line-height: 1.55 !important;
  }
  .bio-questions p,
  .bio-stanza {
    font-size: 18px !important;
  }
  .bio-name {
    font-size: 36px !important;
  }

  /* ------------- CONNECT PAGE ------------- */
  .connect-stack { gap: 32px; }
  .connect-brand-name {
    font-size: 26px !important;
    letter-spacing: 0.18em !important;
  }
  .connect-brand-loc {
    font-size: 12px !important;
    letter-spacing: 0.32em !important;
  }
  .connect-email {
    font-size: 26px !important;
    word-break: break-all;
    text-align: center;
    letter-spacing: 0.04em !important;
  }
  .message-form {
    width: 88vw !important;
    gap: 24px;
  }
  .message-input {
    font-size: 16px;
  }
  /* ------------- PROJECT TEXT PAGE on phone ------------- */
  /* Reorder so the photo pile shows BEFORE the text, plus restructure as a
     vertical scroll instead of a fixed two-column layout. */
  .reveal-text {
    position: absolute !important;
    inset: 80px 20px 90px 20px !important;
    flex-direction: column !important;
    gap: 24px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
  .reveal-text-cards {
    order: -1 !important;          /* photo pile FIRST */
    width: 100% !important;
    height: 240px !important;
    flex: 0 0 auto !important;
    margin: 0 auto;
  }
  .reveal-text-cards .card {
    width: 130px !important;
    height: 86px !important;
    border-width: 5px !important;
    border-bottom-width: 14px !important;
  }
  .reveal-text-inner {
    max-width: 100% !important;
    overflow: visible !important;
  }
  .reveal-text-title {
    white-space: normal !important;
    font-size: 22px !important;
    letter-spacing: 0.10em !important;
    line-height: 1.2 !important;
  }
  .reveal-text-body {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .reveal-text-body p {
    margin-bottom: 14px !important;
  }
  /* Hide the bottom quote on the project text page on phone — too noisy
     against the already-scrolling body text. */
  body:has(#project.show-text.active) .manifesto {
    display: none !important;
  }
  /* Image gallery on phone — slightly smaller margins so the image is bigger */
  .reveal-stage {
    inset: 70px 12px 70px 12px !important;
  }
  /* Prev/next on phone — smaller, lower contrast */
  .proj-nav {
    width: 44px !important;
    height: 44px !important;
  }
  .proj-nav.prev { left: 6px !important; }
  .proj-nav.next { right: 6px !important; }

  /* Project title (image pages) — smaller on phone, lower so it doesn't
     overlap with the back arrow at top-left. */
  .project-meta {
    top: auto !important;
    bottom: 70px !important;
    left: 16px !important;
    right: 16px !important;
    max-width: none !important;
  }
  .proj-title {
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    white-space: normal !important;
    color: var(--ink-faint) !important;
  }
}