/* visualutopia.ai v2: the home page, after Jeanée's wireframe of 2026-10-04.
   Layout only. Every color, weight and size comes from tokens.css through styles.css. */

.home { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---- Headline switcher, draft only ---- */
.hl-switch { display: inline-flex; gap: 6px; margin-left: 12px; flex-wrap: wrap; }
.hl-switch button {
  font: inherit; font-size: var(--vu-size-small); background: transparent; color: var(--vu-muted);
  border: var(--vu-border) solid var(--vu-line-strong); padding: 2px 8px; cursor: pointer;
}
.hl-switch button[aria-pressed="true"] { background: var(--vu-accent); color: var(--vu-accent-on); border-color: var(--vu-accent); }

/* ---- Hero ---- */
.hero { display: flex; justify-content: center; padding: calc(var(--step) * 8) 0 calc(var(--step) * 6); }
.hero img, .hero .frame { width: min(36vw, 420px); aspect-ratio: 4 / 7; object-fit: cover; display: block; }

/* ---- Headline and the line beside it ---- */
.intro {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: calc(var(--step) * 6); align-items: start; padding-bottom: calc(var(--step) * 12);
}
.headline {
  font-size: clamp(30px, 3.6vw, 54px); font-weight: var(--vu-weight-medium);
  line-height: 1.12; letter-spacing: 0.01em; margin: 0;
}
.headline em { font-style: normal; color: var(--vu-accent); }
.intro p { font-size: calc(var(--vu-size-body) * 1.3); line-height: 1.5; letter-spacing: var(--vu-track-body); margin: 6px 0 0; max-width: 30em; }

/* ---- Section heads with a rule ---- */
.section-head {
  font-size: var(--vu-size-small); font-weight: var(--vu-weight-medium); letter-spacing: var(--vu-track-caps);
  text-transform: uppercase; margin: 0 0 calc(var(--step) * 2); padding-bottom: calc(var(--step) * 1);
  border-bottom: var(--vu-border) solid var(--vu-ink);
}

/* ---- Selected work strip ---- */
.strip {
  display: flex; gap: calc(var(--step) * 2); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
}
.strip::-webkit-scrollbar { display: none; }
.strip img { height: clamp(220px, 28vw, 380px); width: auto; flex: none; scroll-snap-align: start; display: block; }
.strip-nav { display: flex; justify-content: center; gap: calc(var(--step) * 2); margin: calc(var(--step) * 3) 0 calc(var(--step) * 12); }
.strip-nav button {
  width: 44px; height: 44px; border-radius: 50%; background: transparent; cursor: pointer;
  border: 2px solid var(--vu-accent); color: var(--vu-accent); font-size: 20px; line-height: 1;
}

/* ---- Case studies ---- */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--step) * 10) calc(var(--step) * 8); margin-bottom: calc(var(--step) * 14); }
.case-card img, .case-card .frame { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
.case-card .label { font-size: var(--vu-size-small); font-weight: var(--vu-weight-medium); letter-spacing: var(--vu-track-caps); text-transform: uppercase; margin: calc(var(--step) * 3) 0 calc(var(--step) * 1); }
.case-card h3 { font-size: clamp(20px, 1.9vw, 28px); font-weight: var(--vu-weight-medium); line-height: 1.25; margin: 0 0 calc(var(--step) * 2); }
.case-card p { font-size: var(--vu-size-body); line-height: 1.6; letter-spacing: var(--vu-track-body); margin: 0 0 calc(var(--step) * 3); max-width: 34em; }
.btn {
  display: inline-block; background: var(--vu-accent); color: var(--vu-accent-on); text-decoration: none;
  font-size: var(--vu-size-small); font-weight: var(--vu-weight-medium); letter-spacing: var(--vu-track-caps);
  text-transform: uppercase; padding: 12px 22px;
}

/* ---- Where do we start ---- */
.start-box {
  background: var(--vu-accent); color: var(--vu-accent-on); text-align: center;
  max-width: 560px; margin: 0 auto calc(var(--step) * 14); padding: calc(var(--step) * 6) calc(var(--step) * 4);
}
.start-box h2 { font-size: clamp(30px, 3.6vw, 54px); font-weight: var(--vu-weight-medium); line-height: 1.1; margin: 0 0 calc(var(--step) * 4); }
.start-box a {
  display: inline-block; color: var(--vu-accent-on); border: var(--vu-border) solid var(--vu-accent-on);
  text-decoration: none; font-size: var(--vu-size-small); font-weight: var(--vu-weight-medium);
  letter-spacing: var(--vu-track-caps); text-transform: uppercase; padding: 12px 22px;
}

/* ---- About ---- */
.about { max-width: 44em; padding-bottom: calc(var(--step) * 14); }
.about h2 { font-size: clamp(30px, 3.6vw, 54px); font-weight: var(--vu-weight-medium); margin: 0 0 calc(var(--step) * 3); }
.about p { font-size: var(--vu-size-body); line-height: 1.65; letter-spacing: var(--vu-track-body); margin: 0 0 calc(var(--step) * 2); }

.fpo { position: relative; }
.fpo::after {
  content: "FPO"; position: absolute; top: 8px; left: 8px; font-size: 11px; letter-spacing: 0.1em;
  background: var(--vu-page); color: var(--vu-muted); padding: 1px 6px;
}

@media (max-width: 760px) {
  .intro, .cases { grid-template-columns: minmax(0, 1fr); }
  .hero img, .hero .frame { width: min(72vw, 360px); }
  .cases { gap: calc(var(--step) * 8); }
}

/* ---- Motion. Scroll reveals and the hero's ease; all off under reduced motion. ---- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .12s; } .reveal.d2 { transition-delay: .24s; }
.hero-wrap { height: 160vh; position: relative; }
.hero-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-stage img { height: min(calc(100vh - 170px), 900px); width: auto; aspect-ratio: 4 / 7; object-fit: cover; will-change: transform; }
.case-card .media { overflow: hidden; }
.case-card .media img { will-change: transform; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.case-card:hover .media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-wrap { height: auto; } .hero-stage { position: static; height: auto; padding: 64px 0; }
}
@media (max-width: 760px) { .hero-stage img { height: 70vh; } }

/* Opener video: the loop is portrait, so full width crops to the middle band. Aim at her face. */
.opener-video { object-position: 50% 30%; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.intro-single { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--step) * 12); }
.intro-single p { font-size: clamp(20px, 1.9vw, 28px); line-height: 1.45; max-width: 34em; }

/* ---- Home page opener, matched to the current site ---- */
.home-page .site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  opacity: 0; pointer-events: none; transition: opacity .5s ease;
}
.home-page .site-header.nav-on { opacity: 1; pointer-events: auto; }
.home-page .opener-video.reveal-video {
  position: absolute; transform: none; min-width: 0; min-height: 0; object-fit: cover; max-width: none;
}
.opener-title {
  position: absolute; top: 10vh; left: 0; right: 0; text-align: center; z-index: 2;
  color: #fff; font-weight: var(--vu-weight-light); text-transform: uppercase;
  letter-spacing: var(--vu-track-caps); font-size: clamp(1.8rem, 4.8vw, 4.3rem); line-height: 1;
  opacity: 0; will-change: opacity; text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.home-page .intro-single { padding-top: calc(var(--step) * 20); }
.draft-float {
  position: fixed; left: 12px; bottom: 12px; right: auto; z-index: 300; max-width: calc(100% - 24px);
  border: var(--vu-border) solid var(--vu-line); padding: 6px 10px; opacity: .92;
}

/* ---- 2026-10-13, Andrea's review. The line and the tag sit together over the video;
   the page (selected work first) rises over the pinned video in place of the blank wipe. ---- */
/* The words carry their own shade, so it fades in and out with them and the picture is clean otherwise. */
.home-page .opener-copy { bottom: 0; padding-top: 22vh; padding-bottom: 11vh; background: linear-gradient(to top, rgba(12, 12, 14, .66), rgba(12, 12, 14, .38) 45%, rgba(12, 12, 14, 0)); }
.home-page .opener-copy .sub { font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: var(--vu-weight-medium); max-width: 30ch; }
.opener-copy .tag {
  font-size: clamp(.95rem, 1.2vw, 1.15rem); line-height: 1.5; letter-spacing: var(--vu-track-body);
  max-width: 54ch; margin: .9em auto 0; text-shadow: 0 1px 20px rgba(0, 0, 0, .45);
}
.home-page .opener-bar { display: none; }
.home-page main.home {
  position: relative; z-index: 5; margin-top: -100vh; background: var(--page);
  box-shadow: 0 0 0 100vmax var(--page); clip-path: inset(0 -100vmax);
  padding-top: calc(var(--step) * 10);
}
@media (prefers-reduced-motion: reduce) { .home-page main.home { margin-top: 0; } }

/* Selected work, opened larger */
.strip img { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 400; background: rgba(12, 12, 14, .92);
  display: flex; align-items: center; justify-content: center; gap: calc(var(--step) * 3); padding: calc(var(--step) * 4);
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; background: var(--page); padding: calc(var(--step) * 2) calc(var(--step) * 2) 0; max-width: min(1100px, 82vw); }
.lightbox figure img { display: block; max-width: 100%; max-height: 74vh; width: auto; height: auto; margin: 0 auto; }
.lightbox figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px calc(var(--step) * 3); padding: calc(var(--step) * 2) 0; color: var(--vu-ink); }
.lb-title { font-size: var(--vu-size-small); font-weight: var(--vu-weight-medium); letter-spacing: var(--vu-track-caps); text-transform: uppercase; }
.lb-info { font-size: var(--vu-size-small); color: var(--vu-muted); flex: 1 1 20em; }
.lb-link { font-size: var(--vu-size-small); font-weight: var(--vu-weight-medium); color: var(--vu-accent); text-decoration: none; letter-spacing: var(--vu-track-caps); text-transform: uppercase; }
.lb-link[hidden] { display: none; }
.lb-close, .lb-step { background: transparent; color: #fff; border: 0; cursor: pointer; font-size: 26px; line-height: 1; padding: 10px; }
.lb-close { position: absolute; top: 14px; right: 18px; font-size: 34px; }
@media (max-width: 760px) { .lb-step { display: none; } .lightbox figure { max-width: 94vw; } }

/* 2026-10-13, Jeanée: no word left alone on the last line of the opener copy. */
.opener-copy .tag, .opener-copy .sub { text-wrap: balance; }

/* ---- 2026-10-14: the samurai, a window onto a full-screen clip that stays put, so it is uncovered
   from beneath as Paulina scrolls away; the page then rises over it. Shown whole on a laptop, filling
   the screen on a phone held upright. ---- */
.op2 { position: relative; height: 200vh; clip-path: inset(0); }
.op2-pane { position: fixed; inset: 0; background: #0c0c0e; display: flex; align-items: center; justify-content: center; }
.op2-pane video { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
@media (max-aspect-ratio: 3/4) { .op2-pane video { width: 100%; height: 100%; object-fit: cover; } }
@media (prefers-reduced-motion: reduce) { .op2 { height: 100vh; } .op2-pane { position: absolute; } }
/* Two Selected Work pieces play as their clips (Andrea, 2026-10-18): sized like the stills beside them. */
.strip video.strip-clip { height: clamp(220px, 28vw, 380px); width: auto; flex: none; scroll-snap-align: start; display: block; cursor: zoom-in; }
.lightbox figure video { display: block; max-width: 100%; max-height: 74vh; width: auto; height: auto; margin: 0 auto; }
.lightbox figure [hidden] { display: none; }

/* Fix 2026-10-19: phones and computers with Reduce Motion on. The script shows the opener at once,
   but an older rule shifted the video by half its size and the header covered the title. With
   Reduce Motion the header sits above the opener, the video fills the frame, and the cue is gone. */
@media (prefers-reduced-motion: reduce) {
  .home-page .site-header { position: sticky; top: 0; opacity: 1; pointer-events: auto; }
  .home-page .opener-video.reveal-video { transform: none !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain; object-position: 50% 50%; }  /* the whole frame, as the animation ends */
  .home-page .scrollcue { display: none; }
  .home-page .opener-stage { height: max(82vh, 560px); }  /* a sideways phone keeps a full-size picture */
}