/* ===== Design tokens ===== */
:root{
  /* poster matches projects list-view preview, with a responsive clamp */
  --poster-w: clamp(220px, 20vw, 420px);
  --poster-ratio: 3 / 4;

  --ink:#0a0a0a;
  --ink-60:#4e4e4e;

  /* motion */
  --fade-ms: 200ms;
}

/* ===== Header (consistent) ===== */
.topbar .name{
  font-family:"Inter",sans-serif; font-size:13px; font-weight:500;
  letter-spacing:2px; text-transform:uppercase;
}
.topbar .nav a{
  font-family:"Inter",sans-serif; font-size:12px; font-weight:400;
  letter-spacing:1.8px; text-transform:uppercase;
}

/* ===== Stage ===== */
.stage{
  position:relative;
  min-height: calc(100svh - 120px);
  display:grid;
  place-items:center;
  margin:0;
  padding:40px 0 max(60px, env(safe-area-inset-bottom));
  /* hide native cursor in stage (desktop). mobile overrides below */
  cursor: none;
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Visually hidden utility */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
}

/* ===== Poster ===== */
.poster{
  width: var(--poster-w);
  aspect-ratio: var(--poster-ratio);
  display:grid;
  place-items:center;
  position: relative;
  z-index: 10;
}

/* Two stacked videos for crossfade */
.poster video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: contain;
  display:block;
  filter: contrast(1.02) saturate(.98);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--fade-ms) ease;
  will-change: opacity;
}
.poster video.is-active{ opacity: 1; }

/* Reduced motion: no crossfade */
@media (prefers-reduced-motion: reduce){
  :root{ --fade-ms: 0ms; }
}

/* ===== Error note ===== */
.error-note{
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%);
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:12px;
  letter-spacing:.2px;
  color:#000;
  opacity:.9;
}

/* ===== Counter ===== */
.count{
  position:absolute;
  top:16px;
  right:22px;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:14px;
  letter-spacing:.2px;
  color:var(--ink-60);
  user-select:none;
  z-index: 20;
}

/* ===== Click zones (desktop) ===== */
.zone{
  position:absolute; /* relative to .stage */
  top:0; bottom:0;
  width:50%;
  background:transparent;
  border:0;
  z-index: 1000;
  cursor: none;       /* hide native cursor over zones */
}
.zone.left{  left:0; }
.zone.right{ right:0; }

/* ===== Hover hints (optional) ===== */
.hint{
  position:absolute;
  bottom:22px;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:14px;
  letter-spacing:.2px;
  color:#000;
  opacity:0;
  transition:opacity .18s ease;
  user-select:none;
  pointer-events:none;
  z-index: 900;
}
.hint.left{  left:22px; }
.hint.right{ right:22px; }

.zone.left:hover  ~ .hint.left,
.zone.right:hover ~ .hint.right{ opacity:0.9; }

/* ===== Floating text cursor (desktop only) ===== */
.cursor-label{
  position: fixed;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2000;
  opacity: 0;
  transition: opacity .12s ease;
  font-family:"Cormorant Garamond",serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: .2px;
  color: #000;
  text-shadow:
    0 0 2px rgba(255,255,255,.85),
    0 0 6px rgba(255,255,255,.6),
    0 0 10px rgba(255,255,255,.45);
  will-change: transform, opacity;
}

/* ===== Focus outline fixes (no dotted line on click) ===== */
.zone:focus, .zone:focus-visible { outline: none; }
.stage:focus { outline: none; }
.stage:focus-visible {
  outline: 1px dotted var(--ink-60);
  outline-offset: 8px;
}

/* ===== Footer ===== */
.foot{
  max-width:1360px; margin:18px auto 48px;
  padding:0 28px; font-size:12px; color:var(--ink-60);
}

/* ===== Mobile / touch ===== */
@media (pointer: coarse){
  .stage{ cursor:auto; }
  .zone{ display:none; }       /* rely on swipe */
  .cursor-label{ display:none; }
  .hint{ display:none; }       /* optional: keep UI ultra-clean on mobile */
}

/* Small screens: slightly larger poster for presence */
@media (max-width:680px){
  :root{ --poster-w: clamp(220px, 36vw, 420px); }
}

/* ======== MATCH PROJECTS: MOBILE “…” MENU SHEET ======== */
/* Trigger (hidden on desktop) */
.menu-toggle{
display:none;
background:none; border:0; cursor:pointer; user-select:none;
font-family:"Inter",sans-serif; font-size:20px; line-height:1;
letter-spacing:2px;
padding:8px 10px;
}

/* Off-canvas sheet */
.menu-sheet{
position:fixed; inset:0; z-index:9998;
display:none;
}
.menu-sheet[aria-hidden="false"]{ display:block; }
.menu-backdrop{
position:absolute; inset:0; background:rgba(0,0,0,.3); opacity:0; transition:opacity .25s ease;
}
.menu-panel{
position:absolute; top:0; right:0; height:100%; width:min(86vw, 360px);
background:#fff; transform:translateX(100%); transition:transform .28s ease;
display:flex; flex-direction:column; padding:16px 18px 24px;
box-shadow: -8px 0 28px rgba(0,0,0,.12);
}
.menu-sheet[aria-hidden="false"] .menu-backdrop{ opacity:1; }
.menu-sheet[aria-hidden="false"] .menu-panel{ transform:translateX(0); }

.menu-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 2px 16px; }
.menu-title{
margin:0; font-family:"Inter",sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase;
}
.menu-close{
background:none; border:0; cursor:pointer; font-size:28px; line-height:1; padding:4px 8px;
}
.mnav{
display:flex; flex-direction:column; gap:14px; margin-top:6px;
}
.mnav a{
font-family:"Cormorant Garamond",serif; font-size:18px; line-height:1.1;
}

/* Show hamburger on small screens; hide desktop nav */
@media (max-width: 820px){
.nav{ display:none; }
.menu-toggle{ display:inline-block; }
}