/* ============================================================
   RESET & CUSTOM PROPERTIES
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:     #F9EDEE;
  --fg:     #73359A;
  --c2:     #9E3091;
  --accent: #305F3B;

  --dur:    480ms;
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
}

html { font-size: 16px; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   PAGE SYSTEM
   ============================================================ */
.page {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  transition: opacity var(--dur) var(--ease);
}

.page.active {
  opacity: 1;
  pointer-events: all;
  z-index: 2;
}


/* ============================================================
   PIXEL TRANSITION GRID
   Vertical wipe: 10 rows × N columns of 10vh × 10vh blocks.
   Each block pops in/out instantly (no CSS transition) —
   the stagger is handled entirely in JS via setTimeout.
   ============================================================ */
#pixel-transition {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pix-row {
  display: flex;
  width: 100%;
  /* height set by JS to match CELL size */
  flex-shrink: 0;
}

.pix-block {
  height: 100%;
  flex-shrink: 0;
  background: var(--fg);
  border-radius: 35%;
  opacity: 0;
}

#pixel-transition.pix--dark .pix-block {
  background: var(--bg);
  /* No CSS transition — opacity is set directly via JS for binary snap */
}


/* ============================================================
   PAGE NAV DOTS
   ============================================================ */
.page-nav {
  position: fixed;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.page-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--fg);
  cursor: pointer;
  padding: 0;
  opacity: 0.35;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    opacity var(--dur) var(--ease),
    transform 0.2s ease;
}

.page-dot:hover  { opacity: 0.7; }
.page-dot.active { background: var(--fg); opacity: 1; transform: scale(1.35); }

/* Invert on contact page */
body.on-contact .page-dot              { border-color: var(--bg); }
body.on-contact .page-dot.active       { background: var(--bg); }


/* ============================================================
   HERO PAGE
   ============================================================ */
.page--hero { background: var(--bg); }

#hero-canvas {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 0;
  /* top & height set by JS to fit between the two text bands */
}

/* Solid bg bands above and below the canvas — text sits on top */
#hero-name-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  z-index: 1;
  pointer-events: none;
}

#hero-subtitle-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(0.75rem, 1.5vh, 1.25rem) 0.35vw clamp(0.75rem, 1.5vh, 1.25rem);
  overflow: visible;
}

.hero-name {
  font-family: 'Ojuju', sans-serif;
  font-weight: 500;
  font-size: clamp(2.25rem, 5.25vw, 6rem);
  line-height: 0.87;
  letter-spacing: -0.018em;
  color: var(--fg);
  white-space: nowrap;
  text-align: left;
  align-self: flex-start;
  margin-left: clamp(0.25rem, 0.7vw, 0.75rem);
}

.hero-subtitle {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: normal;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--fg);
  align-self: flex-start;
  margin-left: clamp(0.25rem, 0.7vw, 0.75rem);
  /* No bg here — hero-subtitle-mask (a sibling div) covers full width below */
}

/* ============================================================
   INDEX PAGE  (floating nav + cross-stitch background)
   ============================================================ */
.page--index { background: var(--bg); }

#index-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.index-nav {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Each floating nav item */
.nav-item {
  position: absolute;
  left: var(--nx);
  top:  var(--ny);
  max-width: min(340px, 36vw);
}

/* About Me: mirrored from right edge */
#item-about {
  left: auto;
  right: 18%;
}

.nav-title {
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 2.1vw, 1.36rem);
  line-height: 1.4;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.nav-item:hover .nav-title {
  color: var(--accent);
}

/* Visible focus ring for keyboard navigation */
.nav-title:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 2px;
}

.nav-title::after {
  display: none;
}

/* Revealed content (TODO: HTML markup not yet present — add a
   <div class="nav-content"> inside each .nav-item if you want
   the hover-to-reveal mini panel back). */
.nav-content {
  margin-top: 1.1rem;
  opacity: 0;
  transform: translateY(9px);
  pointer-events: none;
  transition:
    opacity 0.42s var(--ease),
    transform 0.42s var(--ease);
}

.nav-item.open .nav-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.nav-content p {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.78rem;
  line-height: 1.78;
  color: var(--fg);
  margin-bottom: 0.7rem;
}
.nav-content p:last-child { margin-bottom: 0; }
.nav-content strong { font-weight: 700; }

.project-list {
  list-style: none;
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.project-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.76rem;
  color: var(--fg);
  padding: 0.28rem 0;
  border-bottom: 1px solid rgba(58, 19, 143, 0.12);
}

.project-list li::before {
  content: '×';
  color: var(--accent);
  flex-shrink: 0;
}

.year { opacity: 0.45; flex-shrink: 0; }


/* ============================================================
   CONTACT PAGE
   ============================================================ */
.page--contact {
  background: var(--fg);
  color: var(--bg);
}

/* ── Contact divider (floating dots) ────────────────────── */
.contact-divider {
  position: relative;
  width: 100%;
  height: 6.4px;
  margin: 1.5rem 0;
}

.contact-inner {
  width: 100%;
  height: 100%;
  padding: clamp(5rem, 14vh, 10rem) clamp(1.75rem, 6vw, 6rem) clamp(2.5rem, 7vh, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-top {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.contact-label {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bg);
  opacity: 0.65;
}

.contact-tagline {
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  color: var(--bg);
  margin-bottom: 2rem;
  line-height: 1.4;
}

.contact-email {
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(0.9rem, 2.24vw, 2.13rem);
  color: var(--bg);
  text-decoration: none;
  line-height: 1.05;
  display: inline-block;
  word-break: break-all;
  transition: text-shadow 0.2s ease;
}

.contact-email:hover {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.contact-bottom {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.contact-link {
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(0.9rem, 2.24vw, 2.13rem);
  color: var(--bg);
  text-decoration: none;
  line-height: 1.05;
  transition: text-shadow 0.2s ease;
}

.contact-link:hover { text-shadow: 0 0 12px rgba(255, 255, 255, 0.4); }

.contact-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0;
  border-top: none;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bg);
  opacity: 1;
}


/* ============================================================
   SECTION SUB-PAGE
   clip-path: circle() expands from the clicked h3's centre,
   revealing the page like the WebGL-plane bounds animation in
   the naelmessaoudene reference. Layout is already in final
   state — only the clipping mask animates.
   ============================================================ */
#section-page {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--bg);
  /* clip-path set and animated entirely by JS */
  clip-path: circle(0px at center);
  pointer-events: none;
  padding: clamp(1.5rem, 4vh, 3rem) clamp(1.5rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#section-page.active {
  pointer-events: all;
}

.section-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.2s ease;
  padding: 0;
  align-self: flex-start;
}
.section-back:hover { opacity: 1; }

.section-heading {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(0.72rem, 1.5vw, 1.5rem);
  color: var(--fg);
}

.section-body {
  flex: 1;
  min-height: 0;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--fg);
  opacity: 0.55;
}

/* ── Prose views (About Me / My Practice) ──────────── */
.section-prose {
  opacity: 1;
}
.prose-scroll {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.prose-content {
  max-width: min(640px, 100%);
  padding-bottom: 4rem;
}
.prose-content p {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(0.95rem, 1.8vw, 1.12rem);
  font-weight: 400;
  line-height: 1.75;
  color: var(--fg);
  opacity: 0.75;
  margin-bottom: 1.4em;
}
.prose-content p:last-child { margin-bottom: 0; }

.prose-heading {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(0.78rem, 1.4vw, 0.88rem);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg);
  opacity: 0.45;
  margin-top: 2.5em;
  margin-bottom: 1em;
}
.prose-heading:first-child { margin-top: 0; }

.prose-media-list {
  font-size: clamp(0.82rem, 1.5vw, 0.95rem) !important;
  line-height: 2 !important;
  opacity: 0.55 !important;
}

/* ── Projects Voronoi view — full bleed, no padding ── */

/* When projects is active, remove section padding and
   overlay the back button on top of the canvas */
#section-page.projects-mode {
  padding: 0;
  gap: 0;
}
#section-page.projects-mode .section-heading {
  display: none;
}
#section-page.projects-mode .section-back {
  position: absolute;
  top: 1.5rem;
  left: 1.75rem;
  z-index: 10;
}

#projects-view {
  position: relative;
  flex: 1;
  min-height: 0;
  opacity: 1;  /* override parent .section-body opacity */
}

#projects-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#projects-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.project-label {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: all;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
}

.project-label__title {
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg);
  line-height: 1;
  white-space: nowrap;
}

.project-label__type {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--fg);
  opacity: 1;
  white-space: nowrap;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── 1024px — tablet landscape ── */
@media (max-width: 1024px) {
  .hero-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 2rem);
  }

  .nav-title {
    font-size: clamp(0.85rem, 1.4vw, 1.1rem);
  }

  /* project-label__title stays 1rem — same as desktop, no override needed */
}

/* ── 768px — tablet portrait / large mobile ── */
@media (max-width: 768px) {

  /* Hero name wraps on mobile */
  .hero-name {
    white-space: normal;
    word-break: break-word;
    line-height: 0.9;
    margin-top: 0;
  }

  .hero-subtitle {
    font-size: clamp(1rem, 5vw, 1.6rem);
  }

  /* Nav items */
  .nav-item { max-width: 60vw; }
  #item-projects { --nx: 14%; --ny: 18%; }
  #item-about    { --ny: 44%; }
  #item-practice { --nx: 18%; --ny: 72%; }

  .nav-title {
    font-size: 0.85rem;
  }

  /* Project labels */
  .project-label {
    gap: 0.4rem;
    padding: 0.5rem;
  }
  .project-label__title {
    font-size: 0.94rem;
    letter-spacing: 0.12em;
    white-space: normal;
    text-align: center;
    max-width: 36vw;
  }
  .project-label__type {
    font-size: 0.7rem;
    text-align: center;
  }

  /* Contact adjustments */
  .contact-inner { padding: 3rem 1.75rem; }
  .contact-links { gap: 1.4rem; }

  /* Dots */
  .page-nav { right: 0.85rem; }

  /* Section back button */
  #section-page.projects-mode .section-back {
    top: 1rem;
    left: 1rem;
  }
}

/* ── 480px — mobile ── */
@media (max-width: 480px) {
  .nav-item { max-width: 70vw; }
  #item-projects { --nx: 10%; --ny: 16%; }
  #item-about    { --ny: 44%; }
  #item-practice { --nx: 14%; --ny: 72%; }

  .project-label__title {
    font-size: 0.88rem;
    letter-spacing: 0.10em;
    white-space: normal;
    text-align: center;
    max-width: 38vw;
  }
  .project-label__type {
    font-size: 0.67rem;
    text-align: center;
  }

  .contact-email {
    font-size: clamp(1.3rem, 5.5vw, 2rem);
  }
}

/* ── 375px — small phones ── */
@media (max-width: 375px) {
  #item-projects { --nx: 8%;  --ny: 15%; }
  #item-about    { --ny: 45%; right: 10%; }
  #item-practice { --nx: 8%;  --ny: 74%; }

  .page-nav { right: 0.5rem; }

  .contact-inner { padding: 2.25rem 1.25rem; }
  .contact-links { gap: 1rem; }

  .project-label__title {
    font-size: 0.78rem;
    max-width: 40vw;
  }
  .project-label__type {
    display: none;
  }
}


/* ============================================================
   PROJECT PAGES  (standalone .html files)
   ============================================================ */
body.project-page {
  overflow-y: auto;
  height: auto;
  min-height: 100vh;

  /* ── Color tokens ──────────────────────────────────────── */
  --bg:            #F9EDEE;
  --fg:            #391A4D;
  --fg-display:    #391A4D;
  --bg-dark:       #305F3B;
  --fg-inverted:   #F9EDEE;
  --fg-muted:      rgba(57, 26, 77, 0.55);

  background-color: var(--bg);
  color: var(--fg);

  /* ── Typography tokens ─────────────────────────────────── */
  --font-display: 'Ojuju', sans-serif;
  --font-body:    'Work Sans', sans-serif;
  --weight-body:    400;
  --weight-display: 700;

  /* Display sizes */
  --size-display-xl: clamp(56px, 7vw, 96px);
  --size-display-l:  clamp(40px, 5vw, 56px);
  --size-display-m:  32px;

  /* Body sizes */
  --size-body-l:  25.6px;
  --size-body-m:  18.5px;
  --size-body-s:  14px;

  /* Line heights */
  --leading-display:       1.0;
  --leading-display-loose: 1.17;
  --leading-body:          1.5;
  --leading-tight:         1.2;

  /* Letter spacing */
  --tracking-display-xl: 0em;
  --tracking-display-l:  0.005em;
  --tracking-display-m:  0.01em;
  --tracking-body:       0;
  --tracking-label:      0.16em;

  /* ── Layout tokens ─────────────────────────────────────── */
  --width-text-narrow:  540px;
  --width-text-default: 724px;
  --width-text-wide:    1092px;
  --width-text-bleed:   1459px;
  --content-padding:    24px;

  /* ── Spacing scale ─────────────────────────────────────── */
  --space-xs: 16px;
  --space-s:  32px;
  --space-m:  56px;
  --space-l:  96px;
  --space-xl: 160px;
}

/* ── Width utilities (project pages only) ──────────────── */
.project-page .width-narrow  { max-width: min(540px,  calc(100vw - 2 * var(--content-padding))); margin-inline: auto; }
.project-page .width-default { max-width: min(724px,  calc(100vw - 2 * var(--content-padding))); margin-inline: auto; }
.project-page .width-wide    { max-width: min(1092px, calc(100vw - 2 * var(--content-padding))); margin-inline: auto; }
.project-page .width-bleed   { max-width: min(1459px, calc(100vw - 2 * var(--content-padding))); margin-inline: auto; }
.project-page .full-bleed    { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* ── Navigation ────────────────────────────────────────── */
.project-page-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;   /* desktop: link sits in the side margin, no bar needed */
  padding: 0.9rem var(--content-padding);
  transition: transform 0.3s ease;
}
/* When the nav follows the hero, pull it up against the hero's bottom
   so the back link sits right under the image (not after the hero gap). */
.project-hero + .project-page-nav {
  margin-top: calc(-1 * var(--space-l));
}

.project-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--size-body-s);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg);
  text-decoration: none;
  opacity: 1;
}

/* ── Main container ────────────────────────────────────── */
.project-page main {
  padding: 0;
}
.project-page .project-main {
  padding-top: 0;
  padding-bottom: var(--space-l);
}
.project-page .project-main--no-hero {
  padding-top: var(--space-xl);
}
.project-main--no-hero .project-header {
  margin-bottom: calc(var(--space-m) * 1.2);
}
.project-main--no-hero .project-header + * {
  margin-top: calc(var(--space-m) * 1.2);
}

/* Match the two-column media-with-text content width */
.width-content { max-width: min(1136px, calc(100vw - 2 * var(--content-padding))); margin-inline: auto; }
.project-media-row.width-content { max-width: min(1136px, calc(100vw - 2 * var(--content-padding))); }
.project-media-with-text.width-content { max-width: min(1136px, calc(100vw - 2 * var(--content-padding))); }

/* 3×2 media grid */
.project-media-row--3x2 { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: var(--space-xs); }

/* ── Header ────────────────────────────────────────────── */
.project-header {
  margin-bottom: var(--space-m);
}

.project-type-label {
  font-family: var(--font-body);
  font-size: var(--size-body-s);
  font-style: italic;
  font-weight: var(--weight-body);
  line-height: var(--leading-tight);
  color: var(--fg-muted);
  margin-bottom: var(--space-xs);
}

.project-main-title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display-l);
  text-transform: uppercase;
  color: var(--fg-display);
  margin-top: 1em;
  margin-bottom: var(--space-xs);
  white-space: nowrap;
}

.project-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.project-meta__type {
  font-family: var(--font-body);
  font-size: var(--size-body-s);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
}

.project-meta__year {
  font-family: var(--font-body);
  font-size: var(--size-body-s);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
}

.project-meta__context {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg);
}
.project-meta__year {
  font-size: 15px;
  color: var(--fg);
}

/* kept for backwards compat but hidden by default */
.project-meta__where { display: none; }

/* ── Content sections ──────────────────────────────────── */
.project-section {
  margin-bottom: var(--space-m);
}

.project-section p.project-section__label,
.project-media-with-text .text-column p.project-section__label {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg);
  margin-bottom: calc(var(--space-xs) * 0.5);
}

.project-section p {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--size-body-m);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg);
  margin-bottom: 1rem;
}
.project-section p:last-child { margin-bottom: 0; }

.project-section p strong {
  font-size: var(--size-body-l);
  font-weight: var(--weight-display);
  line-height: var(--leading-display-loose);
}

.project-section p em {
  font-style: italic;
}

/* ── Blockquote (APA-style long quote) ────────────────────── */
.project-blockquote {
  margin: var(--space-xs) 0;
  margin-left: 2.5rem;
  padding-left: 1.5rem;
}

.project-blockquote p {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: var(--weight-body);
  font-size: var(--size-body-m);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg);
}

/* ── Tags ──────────────────────────────────────────────── */
.project-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.project-tags li {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--size-body-s);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
  border: 1px solid currentColor;
  padding: 0.32rem 0.7rem;
}

/* ── Project link ──────────────────────────────────────── */
.project-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--size-body-s);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg);
  opacity: 0.5;
  text-decoration: none;
  transition: opacity 0.2s ease;
  margin-top: 0.5rem;
}
.project-link:hover { opacity: 1; }

/* ── Caption (shared by hero, media-row, media-with-text) ── */
.project-caption {
  font-family: var(--font-body);
  font-size: var(--size-body-s);
  font-weight: var(--weight-body);
  font-style: italic;
  line-height: var(--leading-tight);
  color: var(--fg-muted);
}

.project-caption a {
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.2s ease;
}
.project-caption a:hover {
  color: var(--fg);
}

/* ── Hero ───────────────────────────────────────────────── */
.project-hero {
  margin-bottom: var(--space-l);
}
.project-hero img,
.project-hero video {
  width: 100%;
  height: auto;
  display: block;
  max-height: 500px;
  object-fit: cover;
}
.project-hero figcaption {
  margin-top: var(--space-xs);
}

/* Hero — gallery variant */
.project-hero--gallery .hero-gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.project-hero--gallery .hero-gallery-track img {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* ── Media row (1-up / 2-up / 3-up) ───────────────────── */
.project-media-row {
  display: grid;
  gap: var(--space-s);
  margin: var(--space-l) auto;
  max-width: min(var(--width-text-bleed), calc(100vw - 2 * var(--content-padding)));
}
.project-media-row--1up { grid-template-columns: 1fr; }
.project-media-row--2up { grid-template-columns: 1fr 1fr; }
.project-media-row--3up { grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); }
.project-media-row--4up { grid-template-columns: repeat(4, 1fr); gap: var(--space-xs); }

.project-media-row figure { margin: 0; }
.project-media-row img { width: 100%; height: auto; display: block; }
.project-media-row video { width: 100%; height: auto; display: block; max-height: 100vh; object-fit: contain; }
.project-media-row figcaption { margin-top: var(--space-xs); }

/* ── Media with text (image + paragraph side by side) ──── */
.project-media-with-text {
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 540px);
  gap: var(--space-m);
  align-items: start;
  margin: var(--space-l) auto;
  justify-content: center;
}
.project-media-with-text--reversed {
  direction: rtl;
}
.project-media-with-text--reversed > * {
  direction: ltr;
}
.project-media-with-text img,
.project-media-with-text video {
  width: 100%;
  height: auto;
  display: block;
}
.project-media-with-text .portrait-cap {
  align-self: stretch;
}
.project-media-with-text .portrait-cap img {
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.project-media-with-text .text-column p {
  font-family: var(--font-body);
  font-size: var(--size-body-m);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg);
  margin-bottom: var(--space-s);
}
.project-media-with-text .text-column p:last-child { margin-bottom: 0; }

/* Wider media column for landscape diagrams, dropped to align with the
   first body paragraph instead of the section label. */
.project-media-with-text.project-media-with-text--media-lg {
  grid-template-columns: minmax(0, 640px) minmax(0, 440px);
}
.project-media-with-text.project-media-with-text--media-lg figure {
  margin-top: calc(30px * var(--leading-body) + var(--space-xs) * 0.5);
}

/* ── Embedded video (YouTube / Vimeo iframe) ───────────── */
.project-embed {
  margin: var(--space-l) auto;
}
.project-embed__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.project-embed__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Click-to-load facade */
.project-embed__facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  margin: 0;
  cursor: pointer;
  background: #000;
  overflow: hidden;
}
.project-embed__facade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s ease;
}
.project-embed__facade:hover img { opacity: 0.85; }
.project-embed__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(57, 26, 77, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.project-embed__facade:hover .project-embed__play {
  background: rgba(57, 26, 77, 1);
  transform: translate(-50%, -50%) scale(1.06);
}
.project-embed__play::before {
  content: "";
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #F9EDEE;
  margin-left: 4px;
}
.project-embed__facade:focus-visible {
  outline: 3px solid var(--fg-display);
  outline-offset: 3px;
}

/* ── Pull-quote ────────────────────────────────────────── */
.project-pullquote {
  margin: var(--space-l) auto;
  padding: 0;
}
.project-pullquote p {
  font-family: var(--font-body);
  font-size: var(--size-body-l);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  letter-spacing: 0;
  color: var(--fg);
  margin-bottom: var(--space-s);
}
.project-pullquote cite {
  font-style: italic;
  font-size: var(--size-body-s);
  font-weight: var(--weight-body);
  color: var(--fg-muted);
  display: block;
}

/* ── Credits ───────────────────────────────────────────── */
.project-credits {
  margin: var(--space-l) auto;
  text-align: left;
}
.project-credits-title {
  font-family: var(--font-display);
  font-size: var(--size-display-m);
  font-weight: var(--weight-display);
  line-height: var(--leading-display-loose);
  letter-spacing: var(--tracking-display-m);
  text-transform: uppercase;
  color: var(--fg-display);
  margin-bottom: var(--space-s);
}
.project-credits p {
  font-family: var(--font-body);
  font-size: var(--size-body-m);
  line-height: var(--leading-body);
  color: var(--fg);
  margin-bottom: var(--space-xs);
}
.project-credits p:last-child { margin-bottom: 0; }

/* ── Exhibition list ───────────────────────────────────── */
.project-exhibition-list {
  margin: var(--space-l) auto;
}
.project-section__h2 {
  font-family: var(--font-display);
  font-size: var(--size-display-l);
  font-weight: var(--weight-display);
  line-height: var(--leading-display-loose);
  letter-spacing: var(--tracking-display-l);
  text-transform: uppercase;
  color: var(--fg-display);
  margin-bottom: var(--space-m);
}
.project-exhibition-entry {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-m);
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--fg-muted);
}
.project-exhibition-entry:first-of-type {
  border-top: 1px solid var(--fg-muted);
}
.project-exhibition-entry .entry-date {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--size-body-s);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.project-exhibition-entry .entry-body p {
  font-family: var(--font-body);
  font-size: var(--size-body-m);
  line-height: var(--leading-body);
  color: var(--fg);
  margin-bottom: var(--space-xs);
}
.project-exhibition-entry .entry-body p:last-child { margin-bottom: 0; }
.project-exhibition-entry .entry-body a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.project-exhibition-entry .entry-body a:hover {
  color: var(--fg-display);
}

/* ── Footer ────────────────────────────────────────────── */
.project-footer {
  margin: 0 auto var(--space-l);
  padding-top: calc(var(--space-l) * 0.5);
  border-top: none;
  position: relative;
}

.project-footer__dots {
  position: relative;
  left: 0;
  right: 0;
  width: 100%;
  height: 6.4px;
  padding: 30px 0;
  margin: -30px 0 8px;
  box-sizing: content-box;
  cursor: default;
}
.project-footer__name {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: var(--tracking-display-m);
  text-transform: uppercase;
  color: var(--fg-display);
  margin-bottom: var(--space-s);
}
.project-footer__tagline {
  font-family: var(--font-body);
  font-size: var(--size-body-m);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  color: var(--fg);
  margin-top: var(--space-s);
  margin-bottom: 0;
}
.project-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}
.project-footer__links a {
  font-family: var(--font-body);
  font-size: calc(var(--size-body-s) * 1.5);
  color: var(--fg);
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.project-footer__links a:hover {
  opacity: 0.6;
}

/* ── Physics tags container ───────────────────────────── */
.physics-tags-container {
  position: relative;
  height: 350px;
  overflow: hidden;
  border: none;
  border-radius: 4px;
  padding: 2px;
  margin: 0;
  cursor: default;
  background: transparent;
  transition: background 0.3s ease;
}

.physics-tags-container.physics-active {
  background: var(--fg);
}


/* Circle variant for physics tags */
.physics-tags-container .project-tags li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  hyphens: manual;
  padding: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  line-height: 1.3;
  color: var(--fg);
  background: var(--bg);
  aspect-ratio: 1 / 1;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.2s ease;
}

.physics-tags-container.physics-active .project-tags li {
  color: #391A4D;
  border-color: #391A4D;
}

.physics-tags-container.physics-active .project-tags li:hover {
  box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.4);
  cursor: grab;
}

/* ── Small inline image (intercalated with text) ──────── */
.project-media-with-text--small {
  grid-template-columns: minmax(0, 320px) minmax(0, 540px);
}

/* ── Responsive — project page components ──────────────── */
@media (max-width: 768px) {
  /* Mobile: solid bg that fades to transparent (so it isn't hard-cut),
     and the nav only shows when scrolling up (hidden when scrolling down). */
  .project-page-nav {
    background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 52%, transparent 100%);
    padding-bottom: 1.7rem;
  }
  .project-page-nav.nav-hidden {
    transform: translateY(-100%);
  }

  .project-media-row--2up,
  .project-media-row--3up {
    grid-template-columns: 1fr;
  }
  .project-media-row--4up {
    grid-template-columns: 1fr 1fr;
  }
  .project-media-with-text,
  .project-media-with-text--small,
  .project-media-with-text.project-media-with-text--media-lg {
    grid-template-columns: 1fr;
    max-width: min(540px, calc(100vw - 2 * var(--content-padding)));
  }
  .project-media-with-text.project-media-with-text--media-lg figure {
    margin-top: 0;
  }
  .project-media-with-text .portrait-cap img {
    height: auto;
  }
  .project-media-row--3x2 {
    grid-template-columns: 1fr 1fr;
  }
  .project-exhibition-entry {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
}

@media (max-width: 480px) {
  body.project-page {
    --content-padding: 16px;
    --space-l: 64px;
    --space-m: 40px;
  }
  .project-page .project-main {
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
  }
  .project-page .project-main--no-hero {
    padding-top: calc(var(--space-m) * 0.5);
  }
}


/* ============================================================
   SCROLL REVEAL — fade-in + slide-up on project page blocks
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   REDUCED MOTION
   Respect users who prefer minimal animation. JS also reads
   this preference and skips the pixel-wipe + clip-path reveal.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
  }
  .scroll-hint__arrow { animation: none; }
  .reveal { opacity: 1; transform: none; }
}