:root{
  --bg: #fbf3dc;
  --bg-alt: #f1e7c9;
  --paper: #0146ff;
  --muted: #6b6f9c;
  --muted-dim: #9a9cc4;
  --accent: #0146ff;
  --accent-soft: rgba(1,70,255,0.12);
}

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

html{ scroll-behavior:smooth; }

/* smooth.js (Lenis) drives scrolling itself -- native smooth-behavior would fight it */
html.lenis{ scroll-behavior:auto; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-stopped{ overflow:clip; }
.lenis.lenis-smooth iframe{ pointer-events:none; }

/* soft crossfade between pages (progressive: browsers without support just navigate) */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:0.45s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

body{
  background:var(--bg);
  color:var(--paper);
  font-family:'Inter', sans-serif;
  font-weight:300;
  overflow-x:hidden;
}

::selection{ background:var(--accent); color:var(--bg); }

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

.label{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.3rem 2.2rem;
  background:rgba(251,243,220,0.7);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
header .mark{
  display:flex;
  align-items:center;
  gap:1.5rem;
}
/* the page you are on sits next to the logo, in blue; the menu on the right lists the others */
header .page-name{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.86rem;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
  white-space:nowrap;
}
header .mark img{
  height:3.1rem;
  width:auto;
  display:block;
}
header nav{ display:flex; gap:2rem; }
header nav a{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color 0.3s ease;
}
header nav a:hover{ color:var(--paper); }

/* ---------- hero ---------- */
.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  align-items:center;
  gap:3rem;
  padding:8rem 2.2rem 4rem;
  position:relative;
}
.hero-eyebrow{
  display:flex; align-items:center; gap:0.8rem;
  margin-bottom:1.6rem;
  opacity:0; transform:translateY(10px);
  animation:rise 0.9s ease forwards 0.2s;
}
.hero-eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
}
h1.hero-title{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-style:italic;
  font-size:clamp(2.6rem, 6.5vw, 6rem);
  line-height:0.98;
  letter-spacing:-0.01em;
  max-width:16ch;
  opacity:0; transform:translateY(24px);
  animation:rise 1s cubic-bezier(.2,.8,.2,1) forwards 0.4s;
}
.hero-sub{
  margin-top:2rem;
  max-width:38ch;
  font-size:1.05rem;
  line-height:1.7;
  color:var(--muted);
  opacity:0; transform:translateY(16px);
  animation:rise 0.9s ease forwards 0.75s;
}
.hero-sub strong{ color:var(--paper); font-weight:500; }
.hero-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  max-width:380px;
  justify-self:end;
  background:var(--bg-alt);
  opacity:0; transform:translateY(20px);
  animation:rise 1.1s cubic-bezier(.2,.8,.2,1) forwards 0.55s;
}
.hero-media img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(0.15) contrast(1.05) brightness(1.03);
  transition:filter 0.6s ease;
}
.hero-media:hover img{ filter:grayscale(0) contrast(1.05) brightness(1); }
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  border:1px solid var(--accent-soft);
  pointer-events:none;
}
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }

/* ---------- section shell ---------- */
section{ padding:0 2.2rem; }
.section-inner{
  padding:4rem 0;
}

/* ---------- statement ---------- */
.statement{
  max-width:52ch;
  font-family:'Fraunces', serif;
  font-weight:300;
  font-size:clamp(1.4rem, 2.6vw, 2.1rem);
  line-height:1.5;
  color:var(--paper);
  padding-left: 2.4rem;
}
.statement .accent{ color:var(--accent); font-style:italic; }

/* ---------- about (wie ben ik): photobooth scroll story ---------- */
/* safe static fallback (default, no JS required) -- shows the finished photobooth */
.about-story{ padding:7rem 2.2rem 3rem; }
.about-pin{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:4rem;
}
/* the booth is ~1.54x taller than wide; capping its width by the viewport height
   keeps the whole booth on screen on short laptop windows instead of clipping it */
.pb-anchor{
  width:min(37.2vw, 429px);
  width:min(37.2vw, 429px, (100svh - 9rem) / 1.54);
  margin-left:10vw; flex:none; overflow:hidden;
}
.pb-scene{ position:relative; width:100%; aspect-ratio:760/1170; overflow:hidden; }
.pb-layer{ width:100%; height:100%; display:block; object-fit:contain; }
.pb-empty, .pb-strip, .pb-overlay{ display:none; }
.pb-hint{ display:none; }
.about-text-anchor{ position:relative; flex:1 1 320px; min-width:260px; }
.about-text .label{ display:block; margin-bottom:1.4rem; }
.about-text .statement{ padding-left:0; }

/* enhanced: pinned scroll story (GSAP loaded + motion allowed) */
html.about-enhanced .about-story{
  height:140vh;
  padding:0;
}
html.about-enhanced .about-pin{
  position:relative;
  height:100vh;
  overflow:hidden;
  flex-wrap:nowrap;
  padding:6.5rem 2.2rem 0;
}
html.about-enhanced .pb-anchor{ position:relative; z-index:2; }
html.about-enhanced .pb-layer{
  position:absolute; inset:0;
  width:100%; height:100%;
}
html.about-enhanced .pb-empty{ display:block; z-index:1; }
html.about-enhanced .pb-strip{ display:block; z-index:2; }
html.about-enhanced .pb-overlay{ display:block; z-index:3; pointer-events:none; }
html.about-enhanced .pb-filled{ z-index:4; opacity:0; }
html.about-enhanced .about-text-anchor{ position:relative; z-index:2; }
html.about-enhanced .pb-hint{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  position:absolute; top:0; bottom:0; margin:auto 0;
  height:max-content;
  left:calc(2.2rem + 10vw + min(37.2vw, 429px));
  left:calc(2.2rem + 10vw + min(37.2vw, 429px, (100svh - 9rem) / 1.54));
  right:2.2rem;
  font-family:'Space Grotesk', sans-serif;
  font-size:1.65rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  text-align:center;
}
html.about-enhanced .pb-hint svg{ width:42px; height:42px; flex:none; transform:rotate(90deg); }

/* desktop: the "keep scrolling" hint lines up under the bio column, clear of the booth */
@media (min-width:761px){
  html.about-enhanced .about-pin > .story-hint{
    left:calc(6.2rem + 10vw + min(37.2vw, 429px));
    left:calc(6.2rem + 10vw + min(37.2vw, 429px, (100svh - 9rem) / 1.54));
  }
}

/* phones & small tablets: booth on top, bio underneath. The booth width is capped
   by the height budget so booth + text always fit inside the pinned screen */
@media (max-width:760px){
  .about-pin{ flex-direction:column; align-items:flex-start; gap:1.5rem; }
  .pb-anchor{
    width:min(56vw, 250px);
    width:min(56vw, 250px, (100svh - 23rem) / 1.54);
    margin-left:0;
  }
  .about-text .statement{ font-size:1.15rem; }
  html.about-enhanced .about-pin{ padding-top:4.6rem; }
  /* "scroll to deliver" sits exactly where the bio fades in, like on desktop */
  html.about-enhanced .pb-hint{
    top:calc(4.6rem + min(56vw, 250px) * 1.5395 + 1.5rem);
    top:calc(4.6rem + min(56vw, 250px, (100svh - 23rem) / 1.54) * 1.5395 + 1.5rem);
    bottom:auto; margin:0; left:2.2rem; right:2.2rem;
    align-items:flex-start; text-align:left;
    font-size:1.05rem; gap:0.6rem;
  }
  html.about-enhanced .pb-hint svg{ width:28px; height:28px; }
}

/* ---------- about (wie ben ik): traits scroll story ---------- */
/* safe static fallback (default, no JS required) -- shows text + full traits illustration */
.traits-story{ padding:4rem 2.2rem 3rem; }
.traits-pin{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:4rem;
}
.traits-text-anchor{ flex:1 1 320px; min-width:260px; }
.traits-anchor{ width:min(48vw, 600px); flex:none; margin-left:auto; }
.traits-svg{ display:block; width:100%; height:auto; }
.trait, .trait-photo{ transform-box:fill-box; transform-origin:50% 50%; }

.traits-text .statement{ padding-left:0; font-size:clamp(1.05rem, 1.9vw, 1.5rem); }

@media (max-width:760px){
  .traits-pin{ flex-direction:column-reverse; justify-content:center; gap:1.5rem; }
  .traits-text-anchor{ flex:0 1 auto; }
  .traits-anchor{ width:min(84vw, 340px); margin:0 auto; }
  .traits-text .statement{ font-size:1rem; }
}

/* enhanced: the reveal is scrubbed as the section scrolls through the viewport
   (see traits-story.js) -- no pin and no full-screen box, so it follows the
   photobooth closely instead of leaving an empty stretch to scroll past */
html.traits-enhanced .traits-story{ padding:0 2.2rem; }
html.traits-enhanced .traits-pin{
  padding:3.5rem 0 3rem;
  flex-wrap:nowrap;
}

/* ---------- portfolio ---------- */
.portfolio-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  padding-bottom:2rem; margin-bottom:1px;
}
.portfolio-head h2{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(2rem, 4vw, 3rem);
}

a.frame{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:4rem;
  align-items:center;
  padding:3.2rem 0;
  cursor:pointer;
}
.frame:nth-child(even){ grid-template-columns:1.1fr 0.9fr; }
.frame:nth-child(even) .frame-media{ order:2; }
.frame:nth-child(even) .frame-text{ order:1; }

.frame-media{
  position:relative;
  overflow:hidden;
  /* clip, not hidden: hidden would make this box a scroll container, and the
     photo's scroll-linked drift would then track this box instead of the page */
  overflow:clip;
  aspect-ratio:4/5;
  background:var(--bg-alt);
}
.frame-media img{
  width:100%; height:120%;
  object-fit:cover;
  position:absolute; top:-10%; left:0;
  filter:grayscale(0.15) contrast(1.05) brightness(1.03);
  transition:filter 0.6s ease, scale 0.8s cubic-bezier(.2,.8,.2,1);
  will-change:translate, scale;
}
.frame:hover .frame-media img{ filter:grayscale(0) contrast(1.05) brightness(1); scale:1.04; }

.frame-media::after{
  content:'';
  position:absolute; inset:0;
  border:1px solid var(--accent-soft);
  pointer-events:none;
}

.frame-text h3{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:clamp(1.6rem, 2.6vw, 2.3rem);
  margin-bottom:1rem;
}
.frame-text p{
  color:var(--muted);
  line-height:1.75;
  max-width:36ch;
  font-size:0.95rem;
}
.frame-cta{
  display:inline-flex; align-items:center; gap:0.5rem;
  margin-top:1.4rem;
  font-family:'Space Grotesk', sans-serif;
  font-size:0.75rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent);
}
.frame-cta svg{ width:14px; height:14px; transition:transform 0.3s cubic-bezier(.2,.8,.2,1); }
.frame:hover .frame-cta svg{ transform:translateX(5px); }

/* scroll-linked depth for the portfolio and gallery: photos drift gently inside
   their frames and cards rise into place as they enter the viewport. Runs on the
   compositor via CSS scroll timelines; unsupported browsers keep the static layout */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .frame-media img{
      animation:frame-drift linear both;
      animation-timeline:view();
    }
    a.frame, .gallery-item{
      animation:rise-in linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 45%;
    }
  }
}
@keyframes frame-drift{
  from{ translate:0 -7%; }
  to{ translate:0 7%; }
}
@keyframes rise-in{
  from{ opacity:0; translate:0 44px; }
  to{ opacity:1; translate:0 0; }
}

/* ---------- footer / contact: the red telephone ---------- */
/* Static layout first (also the fallback): contact details on the left, the telephone with the
   handset standing on the right. With phone.js running (html.phone-live) the footer is tall and the
   telephone is scrubbed through the scroll: the handset lifts off and ends upright, then the
   contact details come in beside it. */
footer{ padding:0; }
.phone-sticky{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 0.38fr) minmax(0, 0.62fr);
  align-items:center;
  column-gap:1rem;
  padding:5rem 2.2rem 5rem;
  min-height:100vh;
}
.phone-copy{ position:relative; z-index:2; }
.footer-cta{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(2.2rem, 5vw, 4.6rem);
  line-height:1.05;
  max-width:11ch;
}
.footer-cta .accent{ color:var(--accent); }
.footer-meta{
  display:flex; flex-direction:column; gap:1.5rem;
  margin-top:3rem;
}
.contact-row{ display:flex; flex-direction:column; gap:0.3rem; }
.contact-row .label{ font-size:0.66rem; }
.footer-meta a{
  font-family:'Space Grotesk', sans-serif;
  font-size:clamp(1rem, 1.5vw, 1.3rem);
  letter-spacing:0.03em;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  align-self:flex-start;
  transition:border-color 0.3s ease;
}
.footer-meta a:hover{ border-color:var(--accent); }
.phone-art{ position:relative; width:100%; aspect-ratio:1100/931; }
.phone-canvas{ display:none; position:absolute; inset:0; width:100%; height:100%; }
.phone-fallback{ display:block; width:100%; height:100%; object-fit:contain; }
.footer-bottom{
  position:absolute; left:2.2rem; right:2.2rem; bottom:1.5rem;
  display:flex; justify-content:space-between;
  font-size:0.72rem;
  color:var(--muted-dim);
  font-family:'Space Grotesk', sans-serif;
  letter-spacing:0.08em;
}
html.phone-live .phone-footer{ height:330vh; }
html.phone-live .phone-sticky{ position:sticky; top:0; height:100vh; min-height:0; overflow:hidden; }
html.phone-live .phone-canvas{ display:block; }
html.phone-live .phone-fallback{ display:none; }
html.phone-live .phone-reveal{ opacity:0; pointer-events:none; will-change:opacity, transform; }
@media (max-width:720px), (orientation:portrait){
  .phone-sticky{ grid-template-columns:1fr; align-content:start; row-gap:0.6rem; padding:4.4rem 1.2rem 4rem; }
  .phone-art{ order:-1; }
  .footer-cta{ font-size:clamp(1.9rem, 8vw, 2.6rem); max-width:none; }
  .footer-meta{ margin-top:1.4rem; gap:1rem; }
  .footer-bottom{ left:1.2rem; right:1.2rem; bottom:1rem; }
}

/* ---------- gallery subpages ---------- */
.gallery-header{
  padding:7.5rem 0 2.5rem;
}
.gallery-back{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:'Space Grotesk', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:2.2rem;
  transition:color 0.3s ease;
}
.gallery-back:hover{ color:var(--paper); }
.gallery-back svg{ width:14px; height:14px; }
.gallery-header h1{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(2.4rem, 6vw, 4.5rem);
  line-height:1.02;
  max-width:16ch;
}
.gallery-header p{
  margin-top:1.4rem;
  max-width:52ch;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.7;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:1.4rem;
  padding-bottom:4rem;
}
.gallery-item{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--bg-alt);
  cursor:zoom-in;
}
.gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(0.15) contrast(1.05) brightness(1.03);
  transition:filter 0.5s ease, transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.gallery-item:hover img{ filter:grayscale(0) contrast(1.05) brightness(1); transform:scale(1.05); }
.gallery-item::after{
  content:'';
  position:absolute; inset:0;
  border:1px solid var(--accent-soft);
  pointer-events:none;
}

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(27,20,10,0.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity 0.3s ease;
  padding:4vh 4vw;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:100%; max-height:92vh;
  object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:fixed;
  background:none; border:none;
  color:var(--bg);
  cursor:pointer;
  padding:0.8rem;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close{ top:1.5rem; right:1.5rem; }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg{ width:26px; height:26px; }
.lightbox-prev{ left:1rem; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:1rem; top:50%; transform:translateY(-50%); }
.lightbox-close, .lightbox-prev, .lightbox-next{ transition:opacity 0.2s ease; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ opacity:0.6; }

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; padding-top:8rem; gap:2rem; }
  .hero-media{ justify-self:start; max-width:220px; order:-1; margin-bottom:1rem; }
}

@media (max-width: 720px){
  a.frame, .frame:nth-child(even){
    grid-template-columns:1fr;
    gap:2rem;
  }
  .frame:nth-child(even) .frame-media{ order:1; }
  .frame:nth-child(even) .frame-text{ order:2; }
  .statement{ padding-left:0; }
  /* compact but always-visible nav; wraps under the logo on very narrow phones */
  header{ padding:0.35rem 1.2rem; flex-wrap:wrap; column-gap:1rem; }
  header .mark img{ height:2.4rem; }
  header .mark{ gap:0.9rem; }
  header .page-name{ font-size:0.66rem; letter-spacing:0.12em; }
  header nav{ gap:0.85rem; }
  header nav a{ font-size:0.6rem; letter-spacing:0.08em; padding:0.95rem 0; }
  .lightbox-prev{ left:0.2rem; }
  .lightbox-next{ right:0.2rem; }
}

/* ---------- custom cursor ---------- */
/* gated purely by JS (cursor.js only adds this class after confirming a fine pointer) */
html.custom-cursor-active,
html.custom-cursor-active body,
html.custom-cursor-active *{
  cursor:none !important;
}
.cursor-dot{
  position:fixed; top:0; left:0;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--accent);
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
  will-change:transform;
}
.cursor-dot.is-visible{ opacity:1; }
.cursor-dot.is-visible.is-active{ width:30px; height:30px; opacity:0.55; }

/* ---------- homepage top-right nav (no left logo, logo lives in the story) ---------- */
.story-nav{
  position:fixed; top:0; right:0; z-index:45;
  display:flex; gap:2rem;
  padding:2rem 2.2rem;
}
.story-nav a{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color 0.3s ease;
}
.story-nav a:hover{ color:var(--paper); }

/* ---------- scroll story: safe static fallback (default, no JS required) ---------- */
.story{
  padding:6rem 2.2rem 5rem;
  text-align:center;
}
.story-logo-stage{
  display:flex; align-items:center; justify-content:center;
  margin-bottom:3rem;
}
.story-logo-img{ width:min(50vw, 300px); height:auto; }
.story-bag{ width:min(46vw, 340px); margin:0 auto 2.5rem; opacity:1; }
.story-bag img{ width:100%; height:auto; display:block; }
.story-items-row{
  display:flex; justify-content:center; align-items:flex-start;
  gap:2.4rem; flex-wrap:wrap;
}
.story-item{
  position:relative;
  display:block;
  width:150px;
  opacity:1;
  filter:drop-shadow(0 14px 24px rgba(20,15,5,0.16));
}
.story-item--film, .story-item--video{ width:180px; }
.story-item img{ width:100%; height:auto; display:block; pointer-events:none; }
.story-item:focus-visible{ outline:2px solid var(--accent); outline-offset:10px; border-radius:8px; }

.story-hint{
  font-family:'Inter', sans-serif;
  font-size:0.85rem;
  line-height:1.5;
  color:var(--muted);
  text-align:left;
  max-width:230px;
  margin-top:3rem;
}
.story-hint strong{
  display:block;
  font-family:'Space Grotesk', sans-serif;
  font-size:0.95rem;
  font-weight:500;
  color:var(--accent);
  margin-bottom:0.2rem;
}

/* ---------- scroll story: enhanced (GSAP loaded + motion allowed) ---------- */
html.story-enhanced .story{
  height:500vh;
  padding:0;
}
html.story-enhanced .story-pin{
  position:relative;
  height:100vh;
  overflow:hidden;
}
html.story-enhanced .story-logo-stage{
  position:absolute; inset:0;
  margin:0;
  pointer-events:none;
  z-index:5;
}
html.story-enhanced .story-logo-img{ width:min(92vw, calc(78vh * 3.2383)); }

html.story-enhanced .story-hint,
html.about-enhanced .story-hint{
  position:absolute; left:2.2rem; bottom:2.2rem;
  margin-top:0;
  z-index:7;
  pointer-events:none;
  max-width:180px;
  font-size:0.76rem;
  background:rgba(251,243,220,0.82);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:0.55rem 0.75rem;
  border-radius:10px;
}
html.story-enhanced .story-hint strong,
html.about-enhanced .story-hint strong{ font-size:0.85rem; }

/* homepage menu: hidden until you scroll (story.js fades it in). story-pending is set in the <head>
   so there is no flash before the script has run; story.js always takes it off again. */
@media (prefers-reduced-motion: no-preference){
  html.story-pending .story-nav,
  html.story-enhanced .story-nav{ opacity:0; visibility:hidden; }
}

/* scroll cue at the bottom centre: the ^ from the logo, upside down (see story.js) */
.story-arrow{ display:none; }
html.story-enhanced .story-arrow{
  display:block;
  position:absolute; left:0; top:0;
  width:26px; height:24px;
  z-index:8;
  pointer-events:none;
  will-change:transform;
}
.story-arrow-bob, .story-arrow-svg{ display:block; width:100%; height:100%; overflow:visible; }
.story-arrow-svg polygon{
  fill:#0046ff;
  /* a thin cream edge keeps it visible while it flies over the blue letters */
  stroke:var(--bg); stroke-width:0.9; paint-order:stroke; stroke-linejoin:round;
}
.story-arrow.is-resting .story-arrow-bob{ animation:arrow-bob 1.7s ease-in-out infinite; }
@keyframes arrow-bob{ 0%,100%{ transform:translateY(-3px); } 50%{ transform:translateY(5px); } }

/* playful squiggly line -- path "d" is built and animated in story.js
   (or about-story.js on other pages), tied to the same scrub timeline */
.story-squiggle{ display:none; }
html.story-enhanced .story-squiggle,
html.about-enhanced .story-squiggle{
  display:block;
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
  overflow:visible;
  animation:squiggle-sway 7s ease-in-out infinite alternate;
  transform-origin:8% 50%;
}
.story-squiggle-path{
  stroke:var(--accent);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0.8;
}
@keyframes squiggle-sway{
  from{ transform:rotate(-1deg) translateX(-2px); }
  to{ transform:rotate(1deg) translateX(2px); }
}
@media (prefers-reduced-motion: reduce){
  html.story-enhanced .story-squiggle,
  html.about-enhanced .story-squiggle{ animation:none; }
}

/* static, never animated by GSAP -- keeps true horizontal centering intact
   regardless of what transforms are applied to the animated child inside */
html.story-enhanced .story-bag-anchor{
  position:absolute; left:50%; bottom:4%;
  /* the 38.5vw cap keeps the bag in proportion to the items on tall, narrow
     screens (a portrait iPad) instead of towering over them */
  height:min(50vh, 480px, 38.5vw);
  width:auto;
  transform:translateX(-50%);
  z-index:2;
}
html.story-enhanced .story-bag-anchor .story-bag img{
  width:auto;
  height:100%;
}
html.story-enhanced .story-bag{
  height:100%;
  width:auto;
  margin:0;
}
html.story-enhanced .story-items-row{
  display:contents;
}
html.story-enhanced .story-item{
  position:absolute;
  width:auto;
  pointer-events:none;
  z-index:6;
}
/* items scale with whichever runs out first, width or height (the vh caps match
   their size on a ~830px tall screen), so wide-but-short screens such as a
   laptop or an iPad as Sidecar get the same composition, just smaller,
   instead of full-size items piling onto the bag and the logo */
html.story-enhanced .story-item--camera{ left:13%; top:22%; width:min(22vw, 238px, 28.7vh); }
html.story-enhanced .story-item--video{ right:9%; top:18%; width:min(35.9vw, 416px, 50vh); }
html.story-enhanced .story-item-anchor{
  position:absolute; left:50%; top:max(9.5%, calc(var(--logo-rest-bottom, 76px) + 24px));
  width:min(23.5vw, 254px, 30.6vh);
  z-index:6;
  transform:translateX(-50%);
}
html.story-enhanced .story-item-anchor .story-item--film{
  position:static;
  width:100%;
}

/* phones held sideways get the static layout (story.js); there the bag is
   left out entirely and only the three items are shown */
@media (orientation:landscape) and (max-height:500px){
  html:not(.story-enhanced) .story-bag-anchor{ display:none; }
  /* the video artwork has more empty space around it, so it gets more width
     to look as big as the other two */
  html:not(.story-enhanced) .story-item--camera{ width:170px; }
  html:not(.story-enhanced) .story-item--film{ width:170px; }
  html:not(.story-enhanced) .story-item--video{ width:250px; }
}

/* portrait tablets: the bag moves up towards the items instead of leaving
   a large empty band between them */
@media (min-width:721px) and (orientation:portrait){
  html.story-enhanced .story-bag-anchor{ bottom:18%; }
}

@media (max-width:720px){
  .story-nav{ gap:0.85rem; padding:0.35rem 1.2rem; }
  .story-nav a{ font-size:0.6rem; letter-spacing:0.08em; padding:0.95rem 0; }
  .story-items-row{ gap:1.4rem; }
  .story-item{ width:110px; }
  html.story-enhanced .story{ height:560vh; }
  /* the shrunken logo parks under the nav on phones (see story.js), so the
     items and bag sit a little lower and the bag leaves room for the hint */
  html.story-enhanced .story-item--camera{ left:4%; top:22%; width:31vw; }
  /* always below the parked logo (story.js sets --logo-rest-bottom) */
  html.story-enhanced .story-item-anchor{ top:max(17%, calc(var(--logo-rest-bottom, 120px) + 16px)); width:24vw; }
  html.story-enhanced .story-item--video{ right:4%; top:max(19.5%, calc(var(--logo-rest-bottom, 120px) + 28px)); width:36vw; }
  html.story-enhanced .story-bag-anchor{ bottom:16%; height:min(34vh, 300px); }
  html.story-enhanced .story-hint,
  html.about-enhanced .story-hint{ left:1.2rem; bottom:1.2rem; max-width:250px; }
}

/* ---------- video page ---------- */
.gallery-header .label{ display:block; margin-bottom:1.2rem; }
.video-header{ text-align:center; padding-top:6rem; padding-bottom:0.5rem; }
.video-header h1{ margin:0 auto; font-size:clamp(2rem, 4.5vw, 3.6rem); }
.video-wrap{
  padding-top:0;
  display:flex; flex-direction:column; align-items:center;
}
/* retro TV (assets/video/tv.webp, screen cut out); the video sits behind it in
   the screen's box, measured on the picture as percentages of the TV */
.tv{
  position:relative;
  width:min(820px, 92vw);
  /* sized so title, the whole TV (legs included) and the download button
     fit on one screen (never below 240px, e.g. on a phone held sideways) */
  width:min(820px, 92vw, max(240px, (100svh - 17rem) * 0.755));
  aspect-ratio:1100/1457;
}
.tv-video, .tv-glass{
  position:absolute;
  left:15.13%; top:33.69%;
  width:67.2%; height:37.46%;
}
.tv-video{
  object-fit:cover;
  background:#000;
}
/* full screen shows the whole 4:3 picture (black bars on wide screens) instead
   of the crop that fills the TV's screen */
.tv-video:fullscreen{ object-fit:contain; }
.tv-video:-webkit-full-screen{ object-fit:contain; }
/* a touch of curved glass: darker towards the edges, a soft sheen top-left */
.tv-glass{
  pointer-events:none;
  background:
    radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.38) 100%),
    linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 35%);
}
.tv-frame{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  user-select:none;
}

.video-download{
  display:inline-flex; align-items:center; gap:0.6rem;
  margin-top:1.4rem;
  padding:0.95rem 1.4rem;
  background:var(--accent);
  color:var(--bg);
  border:1px solid var(--accent);
  font-family:'Space Grotesk', sans-serif;
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  transition:background 0.3s ease, color 0.3s ease;
}
.video-download svg{ width:16px; height:16px; flex:none; transition:transform 0.3s ease; }
.video-download-meta{ opacity:0.7; letter-spacing:0.08em; }
.video-download:hover{ background:transparent; color:var(--accent); }
.video-download:hover svg{ transform:translateY(2px); }
.video-download:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- coming soon ---------- */
.coming-soon{
  padding:9rem 0 5rem;
  text-align:left;
}
.coming-soon h1{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(2.4rem, 6vw, 4.5rem);
  max-width:16ch;
}
.coming-soon p{
  margin-top:1.4rem;
  max-width:50ch;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.7;
}
.coming-soon .accent-tag{
  display:inline-block;
  margin-bottom:1.4rem;
}

/* visually hidden, still read by screen readers */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }