/* ============================================================
   RACHEL McCRORY PRODUCTIONS — Main Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ── Pantone palette ── */
  --golden-mist:   #C9BB80;   /* 13-0624 */
  --cloud-cover:   #ACA49C;   /* 16-1523 */

  /* ── Site tokens ── */
  --bg:           #E9E4D4;    /* warm tan — unchanged          */
  --bg-2:         #DDD7C2;    /* deeper tan                    */
  --text:         #1E1B12;    /* warm near-black               */
  --text-muted:   rgba(30, 27, 18, 0.50);
  --text-dim:     rgba(30, 27, 18, 0.22);
  --accent:       #1E1B12;    /* → black (was violet)          */
  --accent-b:     #1E1B12;    /* → black (was Baltic Sea)      */
  --quiet-violet: #1E1B12;    /* → black (used in id card bg via override) */
  --border:       rgba(30, 27, 18, 0.09);

  --panel-width:  300px;
  --header-h:     56px;       /* kept for .site-header height */
  --cube-size:    360px;
}

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

/* Hide system cursor on desktop only; mobile restores it in the @media block */
@media (hover: hover) {
  * { cursor: none !important; }
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   CUSTOM CURSOR — sparkle → VIEW morph
   ============================================================ */

/*
 * Architecture: .cursor-wrap is moved by JS with transform (no transition,
 * always instant). Children animate their OWN transforms independently,
 * so no sticky lag or afterimage can occur.
 *
 * Star path: sparkle with vertical tips ±48 px, horizontal ±40 px (1.2× taller).
 * Control points 6 px from centre → elegant deep concave waist.
 */

.cursor-wrap {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;        /* zero-size; children position themselves */
  pointer-events: none;
  z-index: 99999;
  /* No will-change: transform — it creates a GPU layer that breaks position:fixed
     coordinate mapping in Safari, causing the star to appear offset from the cursor */
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* ── Sparkle star ── */
.cursor-star {
  position: absolute;
  top: 0; left: 0;
  width: 28px;
  height: 28px;
  overflow: visible;
  /* Centre on the cursor point; no transform transition — JS owns nothing here */
  transform: translate(-50%, -50%);
  transition:
    width   0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    height  0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.22s ease;
}

.cursor-star path {
  fill: none;
  stroke: var(--text);
  stroke-width: 0.8;
  stroke-linejoin: round;
  /* Stroke stays the same physical thickness regardless of how large the SVG gets */
  vector-effect: non-scaling-stroke;
  /* Smooth transition between hollow ↔ solid states */
  transition:
    fill         0.18s ease,
    stroke-width 0.18s ease,
    stroke       0.18s ease;
}

/* Grow slightly on generic link hover */
.cursor-star.on-link {
  width: 40px;
  height: 40px;
}

/* Slightly bigger on gallery image hover */
.cursor-star.on-gallery {
  width: 44px;
  height: 44px;
}

/* Fade out when project title is hovered */
.cursor-star.on-project {
  opacity: 0;
}

/* ── Over gallery images: solid fill + invert blend ──
 * mix-blend-mode on the WRAPPER (not the child SVG) so it composites
 * against actual page content, not against the wrapper's own transparent bg.
 * White fill + difference blend = true colour inversion of whatever is behind.
 */
.cursor-wrap.on-image {
  mix-blend-mode: difference;
}

.cursor-wrap.on-image .cursor-star path {
  fill: white;
  stroke-width: 0;   /* solid, no outline needed */
}

/* ── "View" morph target ── */
.cursor-view {
  position: absolute;
  top: 0; left: 0;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  opacity: 0;
  /* Initial state: centred + slightly small */
  transform: translate(-50%, -50%) scale(0.72);
  transition:
    opacity   0.28s ease 0.08s,
    transform 0.4s  cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s;
}

/* Spring into full size when a project title is hovered */
.cursor-view.on-project {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ============================================================
   SITE LAYOUT
   ============================================================ */

.site-wrapper {
  display: grid;
  grid-template-columns: 1fr var(--panel-width);
  height: 100vh;   /* no header row — full viewport */
}

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 20;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.header-name {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text);
}

.header-title {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.header-nav a {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s;
  font-weight: 400;
}

.header-nav a:hover {
  color: var(--text);
}

.header-nav a.active {
  color: var(--text);
}

/* ============================================================
   MAIN AREA (left of panel)
   ============================================================ */

.main-area {
  position: relative;
  overflow: hidden;
  background: var(--text);  /* dark background makes light-bg project images pop */
}

/* Large background initials */
.bg-initials {
  position: absolute;
  bottom: -0.12em;
  left: -0.04em;
  font-size: clamp(180px, 22vw, 380px);
  font-weight: 900;
  line-height: 1;
  color: #C5BEDB;             /* light Quiet Violet tint */
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
  z-index: 0;
  font-family: 'Inter', sans-serif;
}


/* ============================================================
   SCROLLING IMAGE GALLERY  (replaces 3D cube)
   ============================================================ */

.img-gallery {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  background: rgba(233, 228, 212, 0.14);  /* warm gap on dark background */
  z-index: 1;
}

.img-col {
  overflow: hidden;
  position: relative;
}

.img-col-track {
  display: flex;
  flex-direction: column;
  gap: 3px;
  will-change: transform;
  /* Position driven entirely by JS — no CSS animation */
}

.gallery-item {
  width: 100%;
  /* No forced aspect-ratio — embrace the image's natural proportions */
  overflow: hidden;
  flex-shrink: 0;
  transition: opacity 0.45s ease;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: brightness(0.78) saturate(0.88);
  transition: filter 0.3s ease;
  pointer-events: none;
}

/* Full brightness on the hovered image */
.gallery-item:hover img {
  filter: brightness(1.05) saturate(1.0);
}

/* ── Identity card ─────────────────────────────────────────────── */

/* ── Scramble card (preserved, disabled while enabled:false on sentinels) ── */
.identity-card {
  width: 100%;
  height: clamp(46px, 4.8vw, 68px);
  background: var(--text);       /* was hardcoded #3C3C3C — now uses palette token */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 9%;
  overflow: hidden;
  flex-shrink: 0;
}

/* ── Negative Space card (Option 2 — currently active) ── */
.negative-card {
  width: 100%;
  /* aspect-ratio set inline by JS per instance (3/4, 16/9, 2/3, 1/1) */
  background: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8%;
  overflow: hidden;
  flex-shrink: 0;
}

.neg-credit {
  font-family: 'Space Mono', 'Courier New', monospace;
  font-size: clamp(7px, 0.72vw, 10px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bg);
  opacity: 0.5;
  text-align: center;
  white-space: nowrap;
}

.id-word {
  font-family: 'Inter', -apple-system, sans-serif;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.04em;
  color: var(--bg);            /* warm tan/cream text on dark grey */
  text-align: center;
  width: 100%;
  display: block;
}

/* All words: semibold, upright — no italic, no heavy 900 */
.id-word.id-bold,
.id-word.id-italic {
  font-weight: 600;
  font-style: normal;
  color: var(--bg);
}


/* ── Hover states ── */
.img-gallery.project-hover .gallery-item.dimmed {
  opacity: 0.07;
}

.img-gallery.project-hover .gallery-item.highlighted img {
  filter: brightness(1.05) saturate(1.08) contrast(1.05);
}

/* ============================================================
   RIGHT PROJECTS PANEL
   ============================================================ */

.projects-panel {
  display: grid;
  grid-template-rows: 1fr 1fr;
  border-left: 1px solid var(--border);
  overflow: hidden;
}

.projects-section {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 18px;
}

.projects-section:first-child {
  border-bottom: 1px solid var(--border);
}

.section-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);        /* Quiet Violet — clearly visible */
  padding: 0 22px 14px;
  flex-shrink: 0;
  font-weight: 600;
}

.project-scroll-container {
  flex: 1;
  overflow-y: auto;
  position: relative;
  scrollbar-width: none;
}

.project-scroll-container::-webkit-scrollbar { display: none; }

.project-scroll-track {
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
}

.project-list-copy {
  display: flex;
  flex-direction: column;
}

/* Hide all copies except the first (no scroll duplication needed) */
.project-list-copy:not(:first-child) {
  display: none;
}

.project-link {
  display: block;
  padding: 11px 22px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.22s ease, padding-left 0.22s ease, font-weight 0s;
  font-weight: 400;
  line-height: 1.4;
}

.project-link:hover {
  color: var(--text);
  font-weight: 600;
  padding-left: 28px;
}

.project-link.active {
  color: var(--accent);
  font-weight: 600;
  padding-left: 28px;
}

/* Triggered when hovering the corresponding gallery image */
.project-link.image-hover {
  color: var(--text);
  font-weight: 600;
  padding-left: 28px;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

.about-wrapper {
  height: 100vh;          /* full viewport — no top header on this page */
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.about-image-col {
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-image-placeholder {
  width: clamp(160px, 22%, 260px);
  height: auto;
  display: block;
  object-fit: contain;
  filter: grayscale(0.1);
  margin-bottom: 24px;  /* breathing room above the drawing section */
}

.about-image-note {
  position: absolute;
  bottom: 24px;
  left: 24px;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.about-content-col {
  padding: 60px 56px 100px 64px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  scrollbar-width: none;
}

.about-content-col::-webkit-scrollbar { display: none; }

.about-label {
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 28px;
}

/* ── About page — redesigned ── */

.about-header {
  margin-bottom: 40px;
}

.about-role-tag {
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 14px;
}

.about-name {
  font-size: clamp(40px, 5.5vw, 80px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--text);
}

.about-rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

.about-bio {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text);
  max-width: 520px;
  font-weight: 300;
}

.about-bio p + p { margin-top: 18px; }

.about-clients-block { }

.about-clients-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 12px;
}

.about-clients {
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  max-width: 460px;
}

/* Contact block */
.about-contact-block { }

.about-contact-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 14px;
}

.about-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  transition: opacity 0.2s;
}

.about-email:hover { opacity: 0.6; }

.about-email svg {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.about-email:hover svg { transform: translate(2px, -2px); }

.about-location {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 10px;
}

/* ============================================================
   PROJECT PAGES
   ============================================================ */

.project-page-wrapper {
  height: calc(100vh - var(--header-h));
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.project-media-col {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vimeo-embed {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vimeo-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-muted);
  text-align: center;
  padding: 40px;
}

.media-placeholder-icon {
  width: 56px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-placeholder p {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ── Stills Carousel ── */

.carousel-col {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-right: 1px solid var(--border);
}

.carousel-track {
  display: flex;
  height: 100%;
  /* JS sets transform: translateX(-N * 100%) */
  transition: transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.carousel-slide img,
.carousel-slide video {
  /* Respect native aspect ratio; never crop.
     Videos and images treated identically. */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Small indicator on video slides */
.carousel-slide.is-video::after {
  content: '▶';
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  pointer-events: none;
}

/* Prev / Next buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(238, 229, 224, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  transition: background 0.2s, opacity 0.2s;
}

.carousel-btn:hover { background: rgba(238, 229, 224, 0.95); }
.carousel-btn.disabled { opacity: 0.2; pointer-events: none; }

.carousel-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--text);
  fill: none;
  stroke-width: 1.8;
}

.carousel-prev { left: 16px; }
.carousel-next { right: 16px; }

/* Counter */
.carousel-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(238, 229, 224, 0.7);
  backdrop-filter: blur(4px);
  padding: 4px 12px;
  border: 1px solid var(--border);
}

/* Empty state */
.carousel-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.project-info-col {
  padding: 56px 56px 56px 64px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scrollbar-width: none;
}

.project-info-col::-webkit-scrollbar { display: none; }

.project-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 48px;
  transition: color 0.2s;
}

.project-back:hover {
  color: var(--text);
}

.project-back svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 0.8;
}

.project-category {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);        /* Quiet Violet — clearly visible */
  font-weight: 600;
  margin-bottom: 16px;
}

.project-title {
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 600;            /* semi-bold, not heavy */
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 40px;
}

.project-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 48px;
}

.meta-row {
  display: flex;
  gap: 12px;
  font-size: 11px;
}

.meta-label {
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 9px;
  min-width: 90px;
  padding-top: 1px;
}

.meta-value {
  color: var(--text);
  font-weight: 400;
}

.project-divider {
  width: 32px;
  height: 1px;
  background: var(--border);
  margin: 36px 0;
}

.project-coming-soon {
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  display: inline-block;
  padding: 8px 16px;
}

/* ============================================================
   BOTTOM NAVIGATION
   ============================================================ */

.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 32px 26px;
  pointer-events: none;   /* children opt-in */
}

/* Left: identity — fixed top-left on desktop, inverts colours of whatever's below */
.bnav-identity {
  position: fixed;
  top: 20px;
  left: 28px;
  z-index: 31;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
  mix-blend-mode: difference;
}

.bnav-name {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
}

.bnav-role {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

/* Right: links */
.bnav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  pointer-events: all;
}

.bnav-link {
  position: relative;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  padding-bottom: 5px;
  transition: color 0.25s ease, letter-spacing 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.bnav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

.bnav-link:hover,
.bnav-link.active {
  color: var(--text);
  letter-spacing: 0.5em;
}

.bnav-link:hover::after,
.bnav-link.active::after {
  transform: scaleX(1);
}

/* ============================================================
   SCROLLBAR (panel scrolling area)
   ============================================================ */

::-webkit-scrollbar { display: none; }

/* ============================================================
   UTILITY
   ============================================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   MOBILE MENU BUTTON + OVERLAY  (desktop: hidden)
   ============================================================ */

.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 300;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 11px 14px;
  gap: 5px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: none !important;
  transition: background 0.2s;
}

.mobile-menu-btn span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 280;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mobile-overlay.open {
  transform: translateY(0);
}

.mobile-overlay-inner {
  padding: 68px 32px 80px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* Gradient fade at the bottom signals there's more content to scroll */
.mobile-overlay::after {
  content: '';
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to top, var(--bg) 30%, transparent);
  pointer-events: none;
  z-index: 291;
}

.mobile-overlay-close {
  position: fixed;
  top: 22px;
  right: 22px;
  background: none;
  border: none;
  padding: 6px;
  color: var(--text);
  cursor: none !important;
  z-index: 290;
}

.mobile-section-label {
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 18px;
}

.mobile-project-link {
  display: block;
  font-size: clamp(15px, 4vw, 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  transition: opacity 0.2s;
}

.mobile-project-link:active { opacity: 0.5; }

/* ============================================================
   MOBILE LAYOUT  (≤ 768 px)
   ============================================================ */

@media (max-width: 768px) {

  /* ── Core layout ── */
  .site-wrapper {
    grid-template-columns: 1fr;   /* no right panel */
  }

  .projects-panel { display: none; }

  /* ── Show 2 columns, hide the other 2 ── */
  .img-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    background: rgba(233, 228, 212, 0.12);
  }

  .img-col:nth-child(n+3) { display: none; }

  /* ── Hide desktop cursor ── */
  .cursor-wrap { display: none !important; }
  * { cursor: auto !important; }

  /* ── Gallery images: slightly brighter on mobile (no hover states) ── */
  .gallery-item img { filter: brightness(0.85) saturate(0.9); }

  /* ── Mobile menu visible ── */
  .mobile-menu-btn { display: flex; }
  .mobile-overlay  { display: block; }

  /* ── Bottom nav: hide identity, keep nav links ── */
  .bnav-identity { display: none; }
  .bottom-nav {
    padding: 0 24px 28px;
    justify-content: flex-end;
  }

  /* ── Project / about pages: stack vertically ── */
  .project-page-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: 50vh 1fr;
    height: auto;
    min-height: 100dvh;
    padding-top: 52px;
  }

  /* About wrapper: both cells auto-height so the canvas isn't constrained */
  .about-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 100dvh;
  }

  .about-image-col,
  .project-media-col,
  .carousel-col {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  /* About image col: no fixed height on mobile — let content breathe */
  .about-image-col {
    overflow: visible;   /* allow pencil chooser and margin to show fully */
    height: auto;
    min-height: 0;
    padding-bottom: 8px;
  }

  .project-info-col {
    padding: 40px 28px 120px;
    justify-content: flex-start;
  }

  .about-content-col {
    padding: 36px 28px 100px;
    justify-content: flex-start;
  }

  /* About page: full-width portrait on mobile */
  .about-image-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .about-name { font-size: clamp(36px, 10vw, 56px); }
  .about-email { font-size: 14px; }

  .project-title { font-size: clamp(24px, 7vw, 38px); }

  /* ── ID cards: bigger text on mobile (card stays same height, font grows) ── */
  .id-word {
    letter-spacing: -0.03em;
    /* Override the JS-set font-size with a larger value for mobile.
       !important is needed because main.js sets font-size inline. */
    font-size: clamp(20px, 7vw, 36px) !important;
  }

}

/* ============================================================
   MOBILE HEADER  (replaces floating btn + bare bottom-nav on mobile)
   ============================================================ */

.mobile-header {
  display: none;   /* hidden on desktop */
}

@media (max-width: 768px) {
  /* ── Show the header ── */
  .mobile-header {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    z-index: 250;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }

  .mobile-header-identity {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1;
  }

  .mobile-header-name {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
  }

  .mobile-header-role {
    font-size: 8.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .mobile-header-nav {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .mobile-header-link {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
  }

  .mobile-header-link.active,
  .mobile-header-link:hover {
    color: var(--text);
  }

  /* Hamburger sits inline in the header — reset position from floating style */
  .mobile-header .mobile-menu-btn {
    position: static;   /* override the fixed position from base styles */
    background: none;
    border: none;
    padding: 6px 4px;
    gap: 4px;
  }

  /* Push the gallery below the fixed header */
  .main-area { padding-top: 52px; }

  /* Hide the bottom-nav on mobile — nav is now in the header */
  .bottom-nav { display: none; }

  /* Overlay close button: push below header */
  .mobile-overlay-close { top: 64px; }

  /* Overlay inner: start below header */
  .mobile-overlay-inner { padding-top: 80px; }
}

/* ============================================================
   INDEX STRIP (Option 3 — running-credit ticker)
   ============================================================ */

.index-strip {
  position: fixed;
  bottom: 0;
  left: 0;
  right: var(--panel-width);
  height: 44px;
  background: var(--text);
  z-index: 25;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.index-strip-track {
  display: flex;
  white-space: nowrap;
  /* Speed tuned so the phrase crawls at a steady, readable pace */
  animation: indexScroll 72s linear infinite;
  will-change: transform;
}

.index-strip-track:hover {
  animation-play-state: paused;
}

.index-strip-text {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bg);
  opacity: 0.75;
  flex-shrink: 0;
}

@keyframes indexScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }   /* -50% = exactly one copy */
}

@media (max-width: 768px) {
  .index-strip {
    right: 0;
    height: 48px;
    bottom: 0;
  }
}

/* ============================================================
   ABOUT PAGE — ENTRY ANIMATIONS
   ============================================================ */

/* Stagger in the right-column sections on page load */
.about-header,
.about-rule,
.about-bio,
.about-clients-block,
.about-contact-block {
  opacity: 0;
  transform: translateY(18px);
  animation: aboutFadeUp 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.about-header         { animation-delay: 0.05s; }
.about-rule:nth-of-type(1) { animation-delay: 0.18s; }
.about-bio            { animation-delay: 0.22s; }
.about-rule:nth-of-type(2) { animation-delay: 0.34s; }
.about-clients-block  { animation-delay: 0.38s; }
.about-rule:nth-of-type(3) { animation-delay: 0.50s; }
.about-contact-block  { animation-delay: 0.54s; }

@keyframes aboutFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Portrait slides in from the left */
.about-image-col {
  animation: aboutSlideIn 0.9s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  flex-direction: column;
}

@keyframes aboutSlideIn {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   ABOUT — DRAWING CANVAS
   ============================================================ */

.about-canvas-wrap {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 18px 20px 22px;
  /* Paper-like background — clearly different from the rest of the page */
  background: #F5F0E6;
  position: relative;
}

.about-canvas-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.about-canvas-text { user-select: none; margin-bottom: 10px; }

.about-canvas-prompt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1.2;
}

.about-canvas-sub {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Canvas + pencils stacked */
.canvas-and-pencils {
  position: relative;
}

.about-canvas {
  display: block;
  width: 100%;
  height: 170px;
  background-image: radial-gradient(circle, rgba(30,27,18,0.14) 1px, transparent 1px);
  background-size: 18px 18px;
  background-color: #FAF7F1;
  border: 1px dashed rgba(30,27,18,0.18);
  cursor: crosshair !important;
  touch-action: none;
}

/* ── Three pencil tips — overlaid inside the canvas, bottom-right corner ── */
.pencil-chooser {
  position: absolute;
  bottom: 6px;           /* inside the canvas, above its bottom edge */
  right: 10px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  z-index: 2;
}

.pencil-choice {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer !important;
  display: flex;
  align-items: flex-end;
  opacity: 0.55;
  transition: opacity 0.2s, transform 0.2s;
}

.pencil-choice svg {
  width: 10px;
  height: 18px;   /* just the tip + a sliver of body */
  display: block;
}

/* Subtle individual bob — each pencil on its own phase */
.pencil-choice:nth-child(1) { animation: pencilBob 2.4s ease-in-out 0.0s infinite; }
.pencil-choice:nth-child(2) { animation: pencilBob 2.4s ease-in-out 0.5s infinite; }
.pencil-choice:nth-child(3) { animation: pencilBob 2.4s ease-in-out 1.0s infinite; }

@keyframes pencilBob {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-5px); }
}

/* Selected pencil: fully opaque, raised */
.pencil-choice.selected {
  opacity: 1;
  transform: translateY(-6px);
  animation: none;        /* stop bobbing while selected */
}

/* Small dot indicator below selected pencil */
.pencil-choice.selected::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  margin: 3px auto 0;
}

.about-canvas-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.about-canvas-clear {
  background: none;
  border: 1px solid rgba(30,27,18,0.2);
  font-family: inherit;
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 5px 12px;
  cursor: pointer !important;
  transition: color 0.2s, border-color 0.2s;
}

.about-canvas-clear:hover {
  color: var(--text);
  border-color: var(--text);
}

.about-canvas-send {
  background: var(--text);
  border: none;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FAF7F1;
  padding: 8px 18px;
  cursor: pointer !important;
  transition: opacity 0.2s;
}

.about-canvas-send:hover { opacity: 0.75; }

.about-canvas-confirm {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 10px;
}

/* ============================================================
   MOBILE ABOUT PAGE
   Order: portrait → bio (email first, then statement) → canvas
   Scroll is unlocked via inline JS in about.html
   ============================================================ */

@media (max-width: 768px) {

  body.page-about {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
  }

  /* Wrapper: flex column so we can order the three sections freely */
  body.page-about .about-wrapper {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  /* display:contents dissolves the image-col box — its children
     (portrait img + canvas-wrap) become direct flex items of
     .about-wrapper, so they can be ordered independently */
  body.page-about .about-image-col {
    display: contents;
  }

  /* ── Section order ── */
  body.page-about .about-image-placeholder { order: 1; }
  body.page-about .about-content-col        { order: 2; }
  body.page-about .about-canvas-wrap         { order: 3; }

  /* Portrait: small centred rectangle */
  body.page-about .about-image-placeholder {
    width: 110px;
    height: 140px;
    border-radius: 2px;
    object-fit: cover;
    object-position: center 15%;  /* shift crop down so head stays in frame */
    display: block;
    margin: 72px auto 0;   /* 52px fixed header + 20px breathing room */
    filter: grayscale(0.1);
  }

  /* Bio column: flex so we can reorder email above bio */
  body.page-about .about-content-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 28px 24px 32px;
    border-bottom: 1px solid var(--border);
  }

  /* ── Content order within bio col ── */
  body.page-about .about-header        { order: 1; margin-bottom: 20px; }
  body.page-about .about-contact-block { order: 2; margin-bottom: 36px; }
  body.page-about .about-bio           { order: 3; margin-bottom: 24px; }
  body.page-about .about-clients-block {
    order: 4;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding-top: 18px;
    padding-bottom: 18px;
  }
  body.page-about .about-rule          { display: none; } /* replaced by margins */

  body.page-about .about-name  { font-size: clamp(22px, 6.5vw, 36px); white-space: nowrap; }
  body.page-about .about-email { font-size: 14px; word-break: break-all; }
  body.page-about .about-bio   { font-size: 13px; line-height: 1.72; }

  /* Canvas section: last, full-width, keeps its paper look */
  body.page-about .about-canvas-wrap {
    width: 100%;
    padding: 20px 20px 120px;  /* 120px bottom clears fixed nav */
    background: #F5F0E6;
    border-top: 1px solid var(--border);
  }

  body.page-about .about-canvas       { height: 130px; }
  body.page-about .pencil-chooser     { bottom: 8px; right: 8px; }
  body.page-about .pencil-choice svg  { width: 10px; height: 18px; }

  /* Fixed bottom nav */
  body.page-about .bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 12px 24px 18px;
    z-index: 30;
  }
}