:root {
  color-scheme: dark;
  --void: #05060b;
  --night: #080a12;
  --ink: #f3efe7;
  --copy: #a9abb4;
  --muted: #747985;
  --line: rgba(224, 229, 239, 0.15);
  --accent: #d9c0ca;
  --accent-rgb: 217, 192, 202;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
}

* { box-sizing: border-box; letter-spacing: 0; }
html { min-width: 320px; color: var(--ink); background: var(--void); scroll-behavior: smooth; scroll-padding-top: 76px; }
body { min-width: 320px; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--void); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
::selection { color: var(--void); background: var(--accent); }

.river-skip {
  position: fixed;
  z-index: 120;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: var(--void);
  background: var(--ink);
  font: 600 0.7rem var(--sans);
  transform: translateY(-180%);
  transition: transform 160ms ease;
}
.river-skip:focus { transform: translateY(0); }

.celestial-river,
.river-haze,
.river-grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.celestial-river { z-index: 0; }
.river-haze {
  z-index: 1;
  background:
    radial-gradient(ellipse 62% 44% at 68% 26%, rgba(var(--accent-rgb), 0.1), transparent 72%),
    linear-gradient(132deg, rgba(56, 67, 98, 0.08), transparent 44%);
}
.river-grain {
  z-index: 80;
  opacity: 0.075;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.river-shell { position: relative; z-index: 4; }
.has-river-js .river-shell { opacity: 0; filter: blur(10px); transform: scale(0.965); transform-origin: 50% 38%; animation: river-shell-fallback 1s 1.8s forwards; }
.has-river-js.river-ready .river-shell { opacity: 1; filter: none; transform: scale(1); transition: opacity 1s ease, filter 1.15s ease, transform 1.3s cubic-bezier(0.16, 1, 0.3, 1); }
.has-river-js.river-ready.river-returning .river-shell { opacity: 0; filter: blur(7px); transform: scale(0.965); transition: opacity 480ms ease, filter 520ms ease, transform 560ms cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes river-shell-fallback { to { opacity: 1; filter: none; transform: scale(1); } }

.river-header {
  position: fixed;
  z-index: 70;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 30px 11px;
  border-bottom: 1px solid rgba(224, 229, 239, 0.08);
  background: rgba(5, 6, 11, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.river-brand { display: inline-flex; align-items: center; gap: 11px; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; }
.river-brand img { width: 31px; height: 31px; }
.river-header-actions { display: flex; align-items: center; gap: 24px; }
.river-header-actions a { padding-bottom: 5px; border-bottom: 1px solid rgba(244, 240, 231, 0.24); font: 500 0.69rem var(--mono); text-transform: uppercase; transition: color 180ms ease, border-color 180ms ease; }
.river-header-actions a:hover,
.river-header-actions a:focus-visible { color: var(--accent); border-color: var(--accent); }

.river-map {
  position: fixed;
  z-index: 65;
  top: 50%;
  right: 24px;
  display: grid;
  gap: 16px;
  padding: 16px 8px;
  transform: translateY(-50%);
}
.river-map::before { position: absolute; z-index: -1; top: 22px; bottom: 22px; left: 50%; width: 1px; background: var(--line); content: ""; }
.river-map a { position: relative; display: block; width: 12px; height: 12px; border: 0; border-radius: 50%; background: transparent; }
.river-map a::before { position: absolute; inset: 4px; border-radius: 50%; background: rgba(232, 234, 239, 0.42); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); content: ""; transition: background 220ms ease, box-shadow 320ms ease, transform 320ms ease; }
.river-map a::after { position: absolute; top: 50%; right: 23px; width: max-content; color: rgba(225, 228, 235, 0.6); font: 500 0.61rem var(--mono); text-transform: uppercase; opacity: 0; content: attr(data-label); transform: translate(7px, -50%); transition: opacity 180ms ease, transform 260ms ease; }
.river-map a:hover::after,
.river-map a:focus-visible::after,
.river-map a[aria-current="true"]::after { opacity: 1; transform: translate(0, -50%); }
.river-map a[aria-current="true"]::before { background: var(--accent); box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.82), 0 0 38px rgba(var(--accent-rgb), 0.28); transform: scale(1.45); }

.river-hero,
.river-statement,
.river-gallery,
.river-observation,
.river-close { position: relative; border-bottom: 1px solid var(--line); }

.river-hero {
  display: grid;
  min-height: min(800px, 82svh);
  grid-template-columns: minmax(330px, 0.78fr) minmax(520px, 1.22fr);
  gap: 6vw;
  align-items: center;
  padding: 100px 6vw 50px;
}
.river-copy { position: relative; z-index: 6; max-width: 720px; }
.river-kicker { margin: 0 0 19px; color: rgba(220, 226, 237, 0.66); font: 500 0.72rem/1.5 var(--mono); text-transform: uppercase; }
.river-identity { display: flex; align-items: center; gap: 13px; margin-bottom: 32px; }
.river-identity img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; }
.river-identity div { display: grid; gap: 2px; }
.river-identity strong { font: 400 1.05rem var(--serif); }
.river-identity span { color: rgba(185, 189, 200, 0.68); font: 400 0.68rem var(--mono); text-transform: uppercase; }
.river-copy h1,
.river-statement h2,
.river-gallery h2,
.river-observation h2,
.river-close h2 { margin: 0; font: 400 6.5rem/0.82 var(--serif); text-wrap: balance; }
.river-copy h1 em { display: block; color: rgba(244, 240, 231, 0.76); font-weight: 400; }
.river-subtitle { max-width: 650px; margin: 27px 0 0; color: var(--accent); font: 400 1.55rem/1.18 var(--serif); }
.river-lede { max-width: 580px; margin: 17px 0 0; color: rgba(225, 226, 231, 0.72); font-size: 0.92rem; line-height: 1.7; }
.river-actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-top: 27px; }
.river-action { display: inline-flex; align-items: center; gap: 15px; padding: 10px 0 8px; border-bottom: 1px solid var(--accent); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; }
.river-action.secondary { color: rgba(225, 226, 231, 0.58); border-color: rgba(225, 226, 231, 0.22); }
.river-action span { color: var(--accent); }

.river-hero-art { position: relative; z-index: 3; margin: 0; pointer-events: none; transform: translate3d(var(--art-x, 0), var(--art-y, 0), 0); transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1); }
.river-hero-art::before { position: absolute; z-index: -1; inset: 16% 8%; border-radius: 50%; background: rgba(var(--accent-rgb), 0.13); filter: blur(80px); content: ""; }
.river-hero-art > img { width: 100%; max-height: 62svh; object-fit: contain; filter: saturate(0.82) contrast(1.04) brightness(0.94); }
.river-hero-art figcaption { margin-top: 14px; color: var(--muted); font: 400 0.62rem var(--mono); text-align: right; text-transform: uppercase; }
.river-hero-art.wide > img { aspect-ratio: 16 / 10; object-fit: cover; -webkit-mask-image: radial-gradient(ellipse 73% 72% at 52% 48%, #000 0 55%, transparent 89%); mask-image: radial-gradient(ellipse 73% 72% at 52% 48%, #000 0 55%, transparent 89%); }
.virelo-page .river-hero-art.wide > img { filter: saturate(0.94) contrast(1.06) brightness(1.04); }
.river-hero-art.phone { justify-self: center; width: min(100%, 460px); }
.river-hero-art.phone > img { max-height: 64svh; }
.river-hero-art.entity { justify-self: center; width: min(100%, 610px); }
.river-hero-art.entity > img { -webkit-mask-image: radial-gradient(ellipse 65% 73% at 50% 48%, #000 0 55%, transparent 89%); mask-image: radial-gradient(ellipse 65% 73% at 50% 48%, #000 0 55%, transparent 89%); }

.beardsmith-page .beardsmith-hero-art {
  position: absolute;
  z-index: 1;
  inset: -3%;
  width: auto;
  height: auto;
  margin: 0;
  overflow: hidden;
  opacity: 0.88;
  transform: translate3d(var(--art-x, 0), var(--art-y, 0), 0) scale(1.035);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
}
.beardsmith-page .beardsmith-hero-art::before {
  z-index: 1;
  inset: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse 46% 72% at 28% 51%, rgba(5, 6, 11, 0.99) 0%, rgba(5, 6, 11, 0.94) 48%, rgba(5, 6, 11, 0.58) 72%, transparent 100%),
    linear-gradient(90deg, rgba(5, 6, 11, 0.97) 0%, rgba(5, 6, 11, 0.95) 28%, rgba(5, 6, 11, 0.86) 46%, rgba(5, 6, 11, 0.42) 62%, rgba(5, 6, 11, 0.12) 74%, rgba(5, 6, 11, 0.22) 100%),
    linear-gradient(to top, rgba(5, 6, 11, 0.7), transparent 48%);
  filter: none;
}
.beardsmith-page .beardsmith-hero-art > img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: 62% 48%;
  filter: saturate(0.84) contrast(1.06) brightness(0.9);
}
.beardsmith-page .beardsmith-hero-art figcaption {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 6%;
  margin: 0;
}

.river-phone-stack { position: relative; justify-self: center; width: min(100%, 620px); height: min(62svh, 570px); margin: 0; }
.river-phone-stack img { position: absolute; top: 50%; left: 50%; height: 92%; width: auto; max-width: 64%; object-fit: contain; filter: saturate(0.78) brightness(0.88); }
.river-phone-stack img:first-child { transform: translate(-68%, -50%) rotate(-4deg); }
.river-phone-stack img:last-child { transform: translate(-30%, -48%) rotate(3deg); }

.river-statement {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(320px, 0.8fr) minmax(540px, 1.2fr);
  gap: 6vw;
  align-items: center;
  padding: 82px 6vw;
  background: rgba(6, 7, 12, 0.78);
}
.river-statement-copy { max-width: 670px; }
.river-statement h2 { font-size: 4.5rem; line-height: 0.96; }
.river-statement-copy > p:last-child { max-width: 560px; margin: 23px 0 0; color: rgba(225, 226, 231, 0.7); font-size: 0.93rem; line-height: 1.7; }
.river-facts { border-top: 1px solid var(--line); }
.river-facts article { display: grid; grid-template-columns: 38px 150px 1fr; gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.river-facts span { color: var(--accent); font: 500 0.63rem var(--mono); }
.river-facts h3 { margin: 0; font: 400 1.65rem var(--serif); }
.river-facts p { margin: 0; color: rgba(225, 226, 231, 0.66); font-size: 0.85rem; line-height: 1.58; }

.river-gallery { padding: 78px 6vw 88px; }
.river-gallery-heading { display: grid; grid-template-columns: 1fr 0.6fr; gap: 7vw; align-items: end; margin-bottom: 40px; }
.river-gallery h2 { font-size: 4.8rem; line-height: 0.92; }
.river-gallery-heading > p { max-width: 500px; margin: 0; color: rgba(225, 226, 231, 0.68); font-size: 0.9rem; line-height: 1.65; }
.river-gallery-track { display: flex; gap: 20px; overflow-x: auto; padding: 2px 0 24px; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.35) transparent; scroll-snap-type: x proximity; }
.river-gallery-track figure { flex: 0 0 min(76vw, 1040px); margin: 0; scroll-snap-align: center; }
.river-gallery-track figure.portrait-frame { flex-basis: min(30vw, 430px); }
.river-gallery-track figure.identity-frame { flex-basis: min(44vw, 720px); }
.river-gallery-track figure.overland-frame { flex-basis: min(68vw, 980px); overflow: hidden; }
.river-gallery-track img { width: 100%; max-height: 62svh; object-fit: contain; filter: saturate(0.88) brightness(0.97); }
.river-gallery-track figure.overland-frame img { aspect-ratio: 16 / 9; max-height: none; object-fit: cover; object-position: 50% 50%; }
.river-gallery-track figcaption { margin-top: 13px; color: var(--muted); font: 400 0.62rem var(--mono); text-transform: uppercase; }

@media (min-width: 761px) {
  .beardsmith-page .river-gallery-track {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(320px, 1.08fr) minmax(380px, 1.4fr);
    overflow: visible;
    padding-bottom: 0;
  }
  .beardsmith-page .river-gallery-track figure,
  .beardsmith-page .river-gallery-track figure.portrait-frame,
  .beardsmith-page .river-gallery-track figure.identity-frame,
  .beardsmith-page .river-gallery-track figure.overland-frame { min-width: 0; }
  .beardsmith-page .river-gallery-track figure.portrait-frame img { aspect-ratio: 3 / 4; max-height: none; object-fit: cover; object-position: 50% 45%; }
  .beardsmith-page .river-gallery-track figure.identity-frame img { aspect-ratio: 3 / 2; max-height: none; object-fit: contain; }
  .beardsmith-page .river-gallery-track figure.overland-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%; }
}

.river-observation { padding: 78px 6vw 88px; background: rgba(6, 7, 12, 0.8); }
.river-observation-heading { display: grid; grid-template-columns: 1fr 0.55fr; gap: 7vw; align-items: end; margin-bottom: 40px; }
.river-observation h2 { font-size: 4.5rem; line-height: 0.94; }
.river-observation-heading > p { margin: 0; color: rgba(225, 226, 231, 0.68); font-size: 0.9rem; line-height: 1.65; }
.observation-window { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.observation-tabs { display: flex; border-bottom: 1px solid var(--line); }
.observation-tabs button { flex: 1; min-height: 52px; padding: 12px; border: 0; border-right: 1px solid var(--line); color: rgba(190, 194, 205, 0.68); background: transparent; font: 500 0.66rem var(--mono); text-transform: uppercase; cursor: pointer; }
.observation-tabs button:last-child { border-right: 0; }
.observation-tabs button.active { color: var(--void); background: var(--accent); }
.observation-log { display: grid; grid-template-columns: 0.75fr 1.25fr; min-height: 300px; }
.observation-log > div { padding: 34px; }
.observation-log > div:first-child { border-right: 1px solid var(--line); }
.observation-log span { color: rgba(190, 194, 205, 0.64); font: 500 0.65rem var(--mono); text-transform: uppercase; }
.observation-log p { margin: 22px 0 0; font: 400 1.55rem/1.25 var(--serif); }
.observation-log .entity-response p { color: var(--accent); font-size: 2rem; }

.paige-observation-body { display: grid; grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.32fr); }
.paige-presence { position: relative; min-height: 360px; overflow: hidden; border-right: 1px solid var(--line); background: radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), 0.18), transparent 58%); isolation: isolate; }
.paige-presence-glow { position: absolute; z-index: -1; inset: 12%; border-radius: 50%; background: rgba(var(--accent-rgb), 0.18); filter: blur(54px); transition: background 420ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1); }
.paige-presence .paige-fallback { position: absolute; top: 50%; left: 50%; width: 112%; max-width: none; height: 112%; object-fit: cover; object-position: center 16%; filter: saturate(0.72) contrast(1.04) brightness(0.8); opacity: 1; transform: translate(-50%, -50%) scale(1.02); transition: filter 520ms ease, opacity 520ms ease, transform 720ms cubic-bezier(0.16, 1, 0.3, 1); }
.paige-live2d { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 680ms ease; }
.paige-presence.is-live2d-ready .paige-live2d { opacity: 1; }
.paige-presence.is-live2d-ready .paige-fallback { opacity: 0; }
.paige-presence::after { position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(5, 6, 11, 0.9), transparent 46%), repeating-linear-gradient(180deg, transparent 0 4px, rgba(255,255,255,0.025) 4px 5px); content: ""; }
.paige-presence > span { position: absolute; z-index: 3; right: 20px; bottom: 18px; left: 20px; color: rgba(238, 242, 245, 0.72); font: 500 0.68rem var(--mono); text-align: right; text-transform: uppercase; }
.paige-presence-meter { position: absolute; z-index: 3; bottom: 18px; left: 20px; display: flex; height: 34px; align-items: end; gap: 4px; }
.paige-presence-meter i { display: block; width: 3px; height: 10px; background: var(--accent); opacity: 0.25; transform: scaleY(0.35); transform-origin: bottom; }
.paige-observation.is-speaking .paige-presence-meter i { opacity: 0.45; animation: paige-meter 820ms ease-in-out infinite alternate; }
.paige-presence-meter i:nth-child(2) { animation-delay: 120ms; }
.paige-presence-meter i:nth-child(3) { animation-delay: 260ms; }
.paige-presence-meter i:nth-child(4) { animation-delay: 390ms; }
.paige-presence-meter i:nth-child(5) { animation-delay: 510ms; }
.paige-observation .observation-log { grid-template-columns: 1fr; min-height: 360px; }
.paige-observation .observation-log > div { padding: 28px 34px; }
.paige-observation .observation-log > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
.paige-observation[data-mode="codex"] .paige-presence .paige-fallback { filter: saturate(0.48) contrast(1.12) brightness(0.76) hue-rotate(18deg); transform: translate(-50%, -50%) scale(1.08); }
.paige-observation[data-mode="stream"] .paige-presence .paige-fallback { filter: saturate(0.88) contrast(1.04) brightness(0.86); transform: translate(-50%, -50%) scale(1.04) rotate(-0.6deg); }
.paige-observation[data-mode="music"] .paige-presence .paige-fallback { filter: saturate(1.02) contrast(1.08) brightness(0.82) hue-rotate(304deg); transform: translate(-50%, -50%) scale(1.1) rotate(0.8deg); }
.paige-observation.is-changing .paige-presence-glow { transform: scale(1.22); }
.paige-observation.is-changing .paige-presence .paige-fallback,
.paige-observation.is-changing .paige-live2d { opacity: 0.72; }
.paige-observation.is-changing .paige-presence.is-live2d-ready .paige-fallback { opacity: 0; }
.paige-voice-controls { display: grid; grid-template-columns: auto auto minmax(48px, 1fr); gap: 14px; align-items: center; border-top: 1px solid var(--line); background: rgba(var(--accent-rgb), 0.025); }
.paige-observation .observation-log > .paige-voice-controls { padding: 16px 34px; }
.paige-play-control,
.paige-next-control { min-height: 44px; padding: 0 18px; border: 1px solid rgba(var(--accent-rgb), 0.32); color: rgba(238, 242, 245, 0.82); background: transparent; font: 500 0.65rem var(--mono); text-transform: uppercase; cursor: pointer; transition: color 180ms ease, background 180ms ease, border-color 180ms ease; }
.paige-play-control {
  display: inline-flex;
  min-height: 48px;
  gap: 11px;
  align-items: center;
  color: #05060b;
  border-color: #e6f6f7;
  background: #e6f6f7;
  font-size: 0.72rem;
  font-weight: 600;
  box-shadow: 0 0 26px rgba(var(--accent-rgb), 0.12);
}
.paige-play-control [data-paige-play-icon] {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 50%;
  color: #e6f6f7;
  background: #090b12;
  font-size: 0.55rem;
  line-height: 1;
}
.paige-play-control [data-paige-play-label] { color: #05060b; }
.paige-play-control:hover,
.paige-play-control:focus-visible { color: #05060b; border-color: #ffffff; background: #ffffff; }
.paige-next-control:hover,
.paige-next-control:focus-visible { color: var(--accent); border-color: var(--accent); }
.paige-take { justify-self: end; color: rgba(225, 226, 231, 0.52); font: 500 0.63rem var(--mono); }
.paige-voice-progress { grid-column: 1 / -1; height: 1px; overflow: hidden; background: rgba(var(--accent-rgb), 0.14); }
.paige-voice-progress span { display: block; width: var(--paige-progress, 0%); height: 100%; background: var(--accent); transition: width 140ms linear; }
.paige-observation > audio { display: none; }
@keyframes paige-meter { to { height: 32px; opacity: 0.95; } }

.river-catalog { padding: 78px 6vw 88px; border-bottom: 1px solid var(--line); background: rgba(6, 7, 12, 0.78); }
.river-catalog-heading { display: grid; grid-template-columns: 1fr 0.55fr; gap: 7vw; align-items: end; margin-bottom: 42px; }
.river-catalog-heading h2 { margin: 0; font: 400 4.8rem/0.92 var(--serif); text-wrap: balance; }
.river-catalog-heading > p { margin: 0; color: rgba(225, 226, 231, 0.6); font-size: 0.82rem; line-height: 1.65; }
.river-records { border-top: 1px solid var(--line); }
.river-record {
  display: grid;
  grid-template-columns: 54px 62px minmax(190px, 0.7fr) minmax(300px, 1.3fr) auto;
  gap: 24px;
  align-items: center;
  min-height: 86px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  transition: color 200ms ease, padding 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.river-record:hover,
.river-record:focus-visible { padding-right: 9px; padding-left: 9px; color: var(--accent); }
.river-record > span { color: var(--muted); font: 500 0.62rem var(--mono); }
.river-record img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; filter: saturate(0.72) brightness(0.88); }
.river-record strong { font: 400 1.75rem/1 var(--serif); }
.river-record p { margin: 0; color: rgba(225, 226, 231, 0.65); font-size: 0.84rem; line-height: 1.55; }
.river-record i { color: var(--accent); font-style: normal; }

.river-close {
  display: grid;
  min-height: 48svh;
  place-items: center;
  padding: 82px 6vw;
  text-align: center;
  background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.09), transparent 45%);
}
.river-close > div { width: min(900px, 100%); }
.river-close h2 { font-size: 4.6rem; line-height: 0.92; }
.river-close .river-actions { justify-content: center; }

.river-next { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 24px 30px max(24px, env(safe-area-inset-bottom)); color: rgba(225, 226, 231, 0.56); font: 400 0.63rem var(--mono); text-transform: uppercase; }
.river-next a { padding-bottom: 5px; border-bottom: 1px solid var(--line); }

.has-river-js [data-river-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 850ms ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.has-river-js [data-river-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1020px) {
  .river-hero { grid-template-columns: minmax(300px, 0.85fr) minmax(430px, 1.15fr); }
  .river-copy h1 { font-size: 5.2rem; }
  .river-statement { grid-template-columns: 1fr; gap: 70px; }
  .river-gallery-heading,
  .river-observation-heading,
  .river-catalog-heading { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 62px; }
  .river-header { min-height: 60px; padding: max(11px, env(safe-area-inset-top)) 16px 9px; }
  .river-brand { gap: 8px; font-size: 0.61rem; }
  .river-brand img { width: 28px; height: 28px; }
  .river-header-actions { gap: 14px; }
  .river-header-actions a { font-size: 0.62rem; }
  .river-header-actions a:first-child { display: none; }
  .river-map {
    top: auto;
    right: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    grid-auto-flow: column;
    gap: 22px;
    padding: 9px 15px;
    border: 1px solid rgba(224, 229, 239, 0.12);
    border-radius: 24px;
    background: rgba(5, 6, 11, 0.9);
    transform: translateX(50%);
  }
  .river-map::before { top: 50%; right: 22px; bottom: auto; left: 22px; width: auto; height: 1px; }
  .river-map a::after { display: none; }
  .river-hero {
    display: grid;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 24px;
    align-content: start;
    padding: 88px 20px 60px;
  }
  .river-copy { grid-row: 1; }
  .river-hero-art,
  .river-phone-stack { grid-row: 2; }
  .river-hero-art { width: 100%; height: 290px; }
  .river-hero-art > img { height: 100%; max-height: none; }
  .river-hero-art.phone,
  .river-hero-art.entity { width: 100%; }
  .beardsmith-page .beardsmith-hero-art {
    position: absolute;
    grid-row: auto;
    grid-column: auto;
    inset: -2%;
    width: auto;
    height: auto;
    opacity: 0.76;
  }
  .beardsmith-page .beardsmith-hero-art > img {
    object-position: 61% 47%;
  }
  .beardsmith-page .beardsmith-hero-art::before {
    background:
      radial-gradient(ellipse 72% 57% at 28% 56%, rgba(5, 6, 11, 0.98) 0%, rgba(5, 6, 11, 0.82) 55%, transparent 100%),
      linear-gradient(to bottom, rgba(5, 6, 11, 0.25), rgba(5, 6, 11, 0.56) 47%, rgba(5, 6, 11, 0.9) 100%),
      linear-gradient(90deg, rgba(5, 6, 11, 0.9) 0%, rgba(5, 6, 11, 0.78) 46%, rgba(5, 6, 11, 0.16) 78%);
  }
  .beardsmith-page .river-hero { min-height: 760px; align-content: end; }
  .beardsmith-page .beardsmith-hero-art figcaption { right: 6%; bottom: 4%; }
  .river-phone-stack { width: 100%; height: 330px; }
  .river-copy h1 { font-size: 4.15rem; }
  .river-subtitle { margin-top: 20px; font-size: 1.35rem; }
  .river-lede { font-size: 0.92rem; }
  .river-identity { margin-bottom: 22px; }
  .river-statement,
  .river-gallery,
  .river-observation,
  .river-catalog,
  .river-close { padding: 58px 20px 70px; }
  .river-statement { min-height: 0; gap: 36px; }
  .river-statement h2,
  .river-gallery h2,
  .river-observation h2 { font-size: 3.15rem; }
  .river-facts article { grid-template-columns: 32px 1fr; gap: 8px 16px; }
  .river-facts p { grid-column: 2; }
  .river-gallery-heading,
  .river-observation-heading,
  .river-catalog-heading { gap: 18px; margin-bottom: 32px; }
  .river-catalog-heading h2 { font-size: 3.15rem; }
  .river-record { grid-template-columns: 34px 44px 1fr auto; gap: 13px; min-height: 88px; }
  .river-record img { width: 42px; height: 42px; }
  .river-record strong { font-size: 1.45rem; }
  .river-record p { grid-column: 3 / -1; }
  .river-gallery-track { margin-right: -20px; }
  .river-gallery-track figure { flex-basis: 86vw; }
  .river-gallery-track figure.portrait-frame { flex-basis: 74vw; }
  .river-gallery-track figure.identity-frame,
  .river-gallery-track figure.overland-frame { flex-basis: 84vw; }
  .observation-tabs { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .observation-tabs button { border-bottom: 1px solid var(--line); }
  .observation-tabs button:nth-child(2n) { border-right: 0; }
  .observation-tabs button:nth-last-child(-n + 2) { border-bottom: 0; }
  .observation-log { grid-template-columns: 1fr; min-height: 0; }
  .observation-log > div { padding: 28px 20px; }
  .observation-log > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .observation-log p { font-size: 1.25rem; }
  .observation-log .entity-response p { font-size: 1.55rem; }
  .paige-observation-body { grid-template-columns: 1fr; }
  .paige-presence { min-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); }
  .paige-observation .observation-log { min-height: 0; }
  .paige-observation .observation-log > div { padding: 28px 20px; }
  .paige-observation .observation-log > .paige-voice-controls { grid-template-columns: 1fr auto; padding: 18px 20px; }
  .paige-play-control { justify-content: center; }
  .paige-next-control { grid-column: 1 / -1; grid-row: 2; }
  .paige-take { grid-column: 2; grid-row: 1; }
  .paige-voice-progress { grid-row: 3; }
  .river-close { min-height: 0; padding: 68px 20px 95px; }
  .river-close h2 { font-size: 3.75rem; }
  .river-next { align-items: flex-start; gap: 20px; padding: 22px 20px 90px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .has-river-js .river-shell,
  .has-river-js [data-river-reveal] { opacity: 1; filter: none; transform: none; }
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 280ms ease both river-depart; }
::view-transition-new(root) { animation: 760ms cubic-bezier(0.16, 1, 0.3, 1) both river-arrive; }
@keyframes river-depart { to { opacity: 0; transform: scale(1.025); filter: blur(7px); } }
@keyframes river-arrive { from { opacity: 0; transform: scale(0.94); filter: blur(12px); } }