/* visualutopia.ai v2 — the site's own stylesheet.
   Every value lives in tokens.css, which is a byte-identical copy of
   _business/brand_assets/tokens.css. That file is canonical; this one holds
   layout and nothing else, so a ruling on a value is one edit in one place.
   Header proportions below come from Andrea's reference snapshot, 2026-09-18. */

@import url("tokens.css");

:root {
  /* The site reads the shared tokens under its own short names. */
  --page: var(--vu-page);
  --nav:  var(--vu-surface);
  --blue: var(--vu-accent);
  --ink:  var(--vu-ink);
  --step: var(--vu-step);

  /* Header, from the reference snapshot. Wordmark and FLO are the same size. */
  --wordmark-size: clamp(22px, 3.4vw, 54px);
  --nav-ratio: 0.55;
  --bar-ratio: 1.45;
  --wordmark-track: var(--vu-track-caps);
  --flo-track: var(--vu-track-flo);
  --nav-track: var(--vu-track-body);

  --nav-size: calc(var(--wordmark-size) * var(--nav-ratio));
  --nav-h: calc(var(--wordmark-size) * var(--bar-ratio));

  --gutter: clamp(20px, 2.6vw, 44px);

  --family: var(--vu-font);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--family);
  -webkit-font-smoothing: antialiased;
}

/* ---- Header. Permanent, per brand.md. The band against the page is 1.1:1 and
   that band IS the edge, so there is no border and no shadow. ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
}

.wordmark {
  font-size: var(--wordmark-size);
  font-weight: var(--vu-weight-light);
  letter-spacing: var(--wordmark-track);
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: clamp(20px, 3vw, 54px);
}

.nav {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: clamp(14px, 1.6vw, 28px);
}

.nav a {
  font-size: var(--nav-size);
  font-weight: var(--vu-weight-medium);
  letter-spacing: var(--nav-track);
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

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

/* FLO. Same size as the wordmark, medium, in the blue. Per Andrea's snapshot. */
.header-right .flo {
  font-size: var(--wordmark-size);
  font-weight: var(--vu-weight-medium);
  letter-spacing: var(--flo-track);
  line-height: 1;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}

.header-right .flo:hover { opacity: 0.82; }

/* ---- Opener. Ported from the current site. The wrapper is tall, the stage is
   pinned, and scroll position drives every beat. ---- */
.opener-wrap { position: relative; height: 450vh; }

.opener-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #0c0c0e;
}

.opener-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%) scale(1.12);
  object-fit: cover;
  z-index: 0;
  will-change: transform;
}

/* The one line, over the video. White here is text on a picture and not a fifth
   brand color. Flagged in README.md for Andrea. */
.opener-copy {
  position: absolute;
  bottom: 13vh;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0 var(--gutter);
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

.opener-copy .sub {
  font-size: clamp(1.15rem, 1.9vw, 1.65rem);
  font-weight: 400;
  line-height: 1.45;
  max-width: 44ch;
  margin: 0 auto;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.4);
}

.scrollcue {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.scrollcue span {
  display: block;
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.4);
  margin: 9px auto 0;
  animation: cue 2.2s ease-in-out infinite;
}

@keyframes cue {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.3; }
  50%      { transform: scaleY(1); opacity: 0.9; }
}

/* The page rises over the video at the end of the pin. */
.opener-bar {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--page);
  transform: translateY(100%);
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Page body placeholder ---- */
.section {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder {
  font-size: 11px;
  font-weight: var(--vu-weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.35;
}

/* ---- Footer, the same band as the header ---- */
.site-footer {
  background: var(--nav);
  padding: calc(var(--step) * 5) var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.wordmark.small { font-size: clamp(15px, 1.5vw, 24px); }

.site-footer a {
  color: var(--blue);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

/* ---- Narrow screens. ASSUMPTION, not ruled on. ---- */
@media (max-width: 860px) {
  :root { --wordmark-size: clamp(20px, 6.2vw, 34px); --nav-ratio: 0.5; }
  .site-header {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--step) * 1.5);
    padding: calc(var(--step) * 1.75) var(--gutter);
    position: static;
  }
  .header-right { width: 100%; justify-content: space-between; }
  .site-footer { flex-direction: column; gap: calc(var(--step) * 2); }
}

/* ---- Reduced motion. The pin and the choreography come off. ---- */
@media (prefers-reduced-motion: reduce) {
  .opener-wrap { height: auto; }
  .opener-stage { position: relative; height: 82vh; }
  .opener-video { transform: translate(-50%, -50%) !important; }
  .opener-copy { opacity: 1 !important; transform: none !important; }
  .opener-bar { display: none; }
  .scrollcue span { animation: none; }
}

/* ---- Review panel. NOT part of the design. Strip before build. ---- */
#review {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  background: #ffffff;
  border: 1px solid #999;
  padding: 12px 14px;
  font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-stretch: normal;
  color: #222;
  max-width: 230px;
}
#review h4 { margin: 0 0 8px; font: 11px/1.4 ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: 0.08em; }
#review label { display: block; margin: 6px 0 2px; }
#review input[type=range] { width: 100%; }
#review .note { margin-top: 10px; color: #666; }
#review button { margin-top: 8px; font: 11px ui-monospace, Menlo, monospace; }

/* ---- 2026-10-16 (Jeanée, with Andrea's permission): the header 20% smaller, logo included;
   a footer with the alias under the logo and the year centered. ---- */
.site-header .wordmark, .header-right .flo { font-size: calc(var(--wordmark-size) * 0.8); }
.site-header .nav a { font-size: calc(var(--nav-size) * 0.8); }
.site-footer { align-items: center; gap: calc(var(--step) * 3); }
.foot-brand { display: flex; flex-direction: column; gap: calc(var(--step) * 0.75); }
.foot-alias { font-size: var(--vu-size-small, 0.75rem); color: var(--vu-muted, var(--ink)); letter-spacing: 0.02em; }
.foot-copy { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--ink); position: absolute; left: 50%; transform: translateX(-50%); }
.site-footer { position: relative; }
@media (max-width: 860px) {
  .foot-copy { position: static; transform: none; }
  .site-footer { align-items: center; text-align: center; }
  .foot-brand { align-items: center; }
}

/* ---- 2026-10-19 (Andrea): phones only. The menu links were 9 px. FLO moves up beside the logo and
   the four links take their own row at about 16 px, spread across the width. Desktop unchanged. ---- */
@media (max-width: 760px) {
  .site-header { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "mark flo" "nav nav"; align-items: center; row-gap: calc(var(--step) * 1.25); column-gap: var(--step); }
  .site-header .wordmark { grid-area: mark; }
  .site-header .header-right { display: contents; }
  .site-header .header-right .flo { grid-area: flo; }
  .site-header .nav { grid-area: nav; width: 100%; justify-content: space-between; gap: 0; }
  .site-header .nav a { font-size: clamp(14px, 4.3vw, 17px); padding: 6px 0; }
}

/* iPhones enlarge text inside very wide boxes (text autosizing), so the labels under the wide Selected Work
   clips came out bigger than the rest. Text stays the size the stylesheets set (2026-10-19). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }