:root {
  --shore-ink: #15211f;
  --shore-paper: #fbf5e9;
  --shore-sand: #ead7b8;
  --shore-sand-light: #f7ead3;
  --shore-sea: #75b9c7;
  --shore-sea-deep: #327c8d;
  --shore-sky-top: #b9ddee;
  --shore-sky-bottom: #eef6f4;
  --shore-orange: #f06423;
  --shore-teal: #2b8f91;
  --shore-blue: #4e7fcb;
  --shore-gold: #dba14c;
  --shore-muted: rgba(21, 33, 31, 0.64);
  --shore-line: rgba(21, 33, 31, 0.16);
  --shore-surface: rgba(255, 252, 245, 0.9);
  --shore-surface-strong: #fffdf8;
  --shore-display: "Fraunces", Georgia, serif;
  --shore-sans: "Manrope", system-ui, sans-serif;
  --shore-mono: "Roboto Mono", ui-monospace, monospace;
  --shore-header-height: 74px;
  --room-accent: var(--shore-orange);
}

:root[data-theme="night"] {
  --shore-ink: #f5efe4;
  --shore-paper: #16252d;
  --shore-sand: #5c554c;
  --shore-sand-light: #7c6d5c;
  --shore-sea: #234b61;
  --shore-sea-deep: #102f43;
  --shore-sky-top: #101d3a;
  --shore-sky-bottom: #354864;
  --shore-orange: #ff8b4a;
  --shore-teal: #66c2bf;
  --shore-blue: #8caff3;
  --shore-gold: #f0c46d;
  --shore-muted: rgba(245, 239, 228, 0.7);
  --shore-line: rgba(245, 239, 228, 0.18);
  --shore-surface: rgba(24, 37, 45, 0.9);
  --shore-surface-strong: #1e3039;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--shore-paper);
  color: var(--shore-ink);
  font-family: var(--shore-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { max-width: 100%; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--shore-ink);
  color: var(--shore-paper);
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.shore-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  min-height: var(--shore-header-height);
  padding: 12px clamp(18px, 3.4vw, 58px);
  border-bottom: 1px solid var(--shore-line);
  background: color-mix(in srgb, var(--shore-surface) 86%, transparent);
  backdrop-filter: blur(18px);
  transition: background 280ms ease, color 280ms ease, border-color 280ms ease;
}
.shore-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  text-decoration: none;
}
.shore-brand img { width: 44px; height: 27px; object-fit: contain; }
.shore-brand strong {
  font-family: var(--shore-display);
  font-size: 20px;
  font-weight: 520;
  letter-spacing: -0.02em;
}
.shore-nav { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 1.8vw, 30px); }
.shore-nav a {
  color: var(--shore-muted);
  font-family: var(--shore-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease;
}
.shore-nav a:hover, .shore-nav a:focus-visible { color: var(--shore-orange); outline: none; }
.shore-controls { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.segmented {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--shore-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--shore-surface-strong) 82%, transparent);
}
.segmented button {
  min-height: 32px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--shore-muted);
  font-family: var(--shore-mono);
  font-size: 10px;
  cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: var(--shore-orange); color: #fffdf7; }
.segmented button:focus-visible { outline: 2px solid var(--shore-orange); outline-offset: 2px; }

.shore-main { position: relative; }
.explore-view, .index-view { transition: opacity 240ms ease; }
body[data-view="index"] .explore-view { display: none; }
body[data-view="explore"] .index-view { display: none; }

.explore-scroll { position: relative; height: 700vh; }
.shore-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(var(--shore-sky-top), var(--shore-sky-bottom));
  transition: background 500ms ease;
}
.shore-sky {
  position: absolute;
  inset: 0 0 35%;
  z-index: -7;
  background:
    radial-gradient(circle at 10% 15%, rgba(255,255,245,.95) 0 2%, rgba(255,245,198,.34) 5%, transparent 14%),
    linear-gradient(var(--shore-sky-top), var(--shore-sky-bottom));
}
.shore-sky::before,
.shore-sky::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: .48;
  filter: blur(1px);
  animation: cloudDrift 34s linear infinite alternate;
}
.shore-sky::before { top: 23%; left: 42%; width: 180px; height: 32px; background: rgba(255,255,255,.6); box-shadow: 90px 14px 0 rgba(255,255,255,.45), -70px 20px 0 rgba(255,255,255,.4); }
.shore-sky::after { top: 15%; left: 78%; width: 120px; height: 24px; background: rgba(255,255,255,.46); box-shadow: 55px 8px 0 rgba(255,255,255,.4); animation-duration: 46s; }
:root[data-theme="night"] .shore-sky {
  background:
    radial-gradient(circle at 84% 16%, rgba(255,248,210,.9) 0 1.7%, rgba(255,248,210,.14) 4%, transparent 11%),
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.62) 0 1px, transparent 1.5px),
    radial-gradient(circle at 62% 11%, rgba(255,255,255,.5) 0 1px, transparent 1.5px),
    linear-gradient(var(--shore-sky-top), var(--shore-sky-bottom));
}
:root[data-theme="night"] .shore-sky::before,
:root[data-theme="night"] .shore-sky::after { opacity: .08; }
.shore-sea {
  position: absolute;
  inset: 54% 0 19%;
  z-index: -6;
  background:
    repeating-linear-gradient(176deg, transparent 0 13px, rgba(255,255,255,.26) 14px 15px, transparent 16px 32px),
    linear-gradient(180deg, color-mix(in srgb, var(--shore-sea) 80%, white) 0%, var(--shore-sea-deep) 100%);
  transform: translateY(calc(var(--shore-progress, 0) * -10px));
}
.shore-sea::after {
  content: "";
  position: absolute;
  inset: auto 0 -12px;
  height: 30px;
  background: radial-gradient(ellipse at 50% 0, rgba(255,255,255,.78) 0 24%, transparent 26%) 0 0 / 82px 28px repeat-x;
  animation: waveShift 6s linear infinite;
}
.shore-sand {
  position: absolute;
  inset: 69% 0 0;
  z-index: -5;
  background:
    radial-gradient(circle at 20% 25%, rgba(126,91,51,.08) 0 1px, transparent 1.3px) 0 0 / 18px 18px,
    linear-gradient(175deg, var(--shore-sand-light), var(--shore-sand));
}
.shore-boardwalk {
  position: absolute;
  left: -2vw;
  right: -2vw;
  bottom: 3vh;
  z-index: -3;
  height: clamp(85px, 13vh, 150px);
  border-top: 1px solid rgba(91,63,38,.18);
  background:
    repeating-linear-gradient(90deg, rgba(100,70,40,.15) 0 1px, transparent 1px 84px),
    linear-gradient(180deg, rgba(194,153,106,.82), rgba(151,108,70,.72));
  clip-path: polygon(0 35%, 100% 0, 100% 80%, 0 100%);
  opacity: .72;
}
:root[data-theme="night"] .shore-boardwalk { filter: brightness(.72); }

.shore-track {
  position: relative;
  z-index: 4;
  display: flex;
  width: max-content;
  height: 100%;
  transform: translate3d(calc(var(--shore-x, 0px) * -1), 0, 0);
  will-change: transform;
}
.shore-stop {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  padding: calc(var(--shore-header-height) + 32px) clamp(28px, 6vw, 100px) clamp(44px, 7vh, 78px);
  scroll-margin-top: var(--shore-header-height);
}
.shore-stop__inner { width: min(1280px, 100%); height: 100%; margin: 0 auto; }
.stop-eyebrow { margin: 0 0 18px; color: var(--room-accent); font-family: var(--shore-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.stop-title { margin: 0; font-family: var(--shore-display); font-size: clamp(48px, 6.2vw, 100px); font-weight: 460; line-height: .88; letter-spacing: -.055em; }
.stop-copy { max-width: 520px; color: var(--shore-muted); font-size: clamp(15px, 1.4vw, 19px); line-height: 1.65; }

.entrance-layout {
  display: grid;
  grid-template-columns: minmax(440px, 1.05fr) minmax(320px, .62fr) minmax(220px, .4fr);
  align-items: center;
  gap: clamp(28px, 3.4vw, 56px);
  height: 100%;
}
.entrance-copy { align-self: center; padding-bottom: 5vh; }
.entrance-copy h1 { max-width: 720px; }
.entrance-kicker { margin: 18px 0 12px; font-family: var(--shore-mono); font-size: 12px; letter-spacing: .03em; }
.entrance-copy .stop-copy { margin: 0 0 24px; }
.entrance-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.shore-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid var(--shore-ink);
  border-radius: 3px;
  background: var(--shore-ink);
  color: var(--shore-paper);
  font-family: var(--shore-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.shore-button:hover, .shore-button:focus-visible { transform: translateY(-2px); background: var(--shore-orange); border-color: var(--shore-orange); color: white; outline: none; }
.shore-button.is-ghost { background: color-mix(in srgb, var(--shore-surface) 70%, transparent); color: var(--shore-ink); }
.entrance-projects { display: grid; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.entrance-projects a { display: grid; grid-template-columns: 54px 1fr; gap: 10px; width: fit-content; color: var(--shore-ink); font-size: 13px; text-decoration: none; }
.entrance-projects span { color: var(--shore-orange); font-family: var(--shore-mono); font-size: 10px; }
.entrance-projects a:hover strong, .entrance-projects a:focus-visible strong { text-decoration: underline; text-underline-offset: 4px; }

.curator-window {
  position: relative;
  align-self: end;
  width: min(350px, 28vw);
  height: min(590px, 68vh);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--shore-ink) 18%, transparent);
  border-radius: 48% 48% 18px 18px / 22% 22% 18px 18px;
  background: transparent;
  box-shadow: 0 28px 54px rgba(26, 35, 38, .2);
}
.curator-window::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 2;
  border: 1px solid color-mix(in srgb, var(--shore-ink) 18%, transparent);
  border-radius: inherit;
  pointer-events: none;
}
.curator-window::after {
  content: "CURATOR · CATHERINE WU";
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 3;
  width: max-content;
  max-width: calc(100% - 52px);
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--shore-ink) 18%, transparent);
  background: color-mix(in srgb, var(--shore-surface-strong) 88%, transparent);
  color: var(--shore-ink);
  font-family: var(--shore-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}
.curator-window picture, .curator-window img { position: absolute; display: block; max-width: none; }
.curator-window picture { inset: 0; z-index: 1; width: 100%; height: 100%; mix-blend-mode: multiply; }
.curator-window img { left: -8px; top: -122px; width: 590px; height: auto; }
.curator-note {
  align-self: start;
  max-width: 250px;
  margin-top: 8vh;
  padding: 18px 18px 22px;
  border: 1px solid rgba(121,88,45,.24);
  background: #f2d276;
  color: #563a1e;
  box-shadow: 0 18px 30px rgba(82,57,25,.12);
  font-family: var(--shore-mono);
  font-size: 12px;
  line-height: 1.55;
  transform: rotate(1.6deg);
}
.curator-note::before { content: "DESIGN PRINCIPLE · 01"; display: block; margin-bottom: 14px; font-size: 9px; letter-spacing: .1em; opacity: .72; }
.curator-note::after { content: "✦"; display: block; margin-top: 12px; color: var(--shore-orange); text-align: right; }

.pavilion-layout { display: grid; grid-template-columns: minmax(280px, .42fr) minmax(560px, 1fr); align-items: center; gap: clamp(40px, 7vw, 120px); height: 100%; }
.pavilion-copy { align-self: center; }
.pavilion-copy h2 { font-size: clamp(44px, 4.5vw, 76px); line-height: .96; }
.pavilion-meta { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 16px; margin: 28px 0; padding: 18px 0; border-block: 1px solid var(--shore-line); }
.pavilion-meta small { display: block; margin-bottom: 5px; color: var(--room-accent); font-family: var(--shore-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.pavilion-meta strong { font-size: 12px; font-weight: 600; }
.pavilion-result { margin: 0 0 24px; color: var(--shore-muted); font-size: 13px; line-height: 1.65; }
.pavilion-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
.pavilion-tags span { padding: 5px 8px; border: 1px solid var(--shore-line); border-radius: 999px; font-family: var(--shore-mono); font-size: 9px; text-transform: uppercase; }
.pavilion-building { position: relative; align-self: center; min-height: min(64vh, 650px); padding: 74px 42px 42px; border: 1px solid rgba(87,72,56,.17); background: color-mix(in srgb, var(--shore-surface-strong) 94%, var(--room-accent) 6%); box-shadow: 0 28px 60px rgba(47,61,57,.13); clip-path: polygon(3% 0, 97% 0, 100% 8%, 100% 100%, 0 100%, 0 8%); transition: transform 360ms cubic-bezier(.2,.8,.2,1), box-shadow 360ms ease; }
.pavilion-building::before { content: ""; position: absolute; inset: 0 0 auto; height: 18px; background: var(--room-accent); opacity: .9; }
.pavilion-building::after { content: ""; position: absolute; inset: 28px 30px auto; height: 1px; background: var(--shore-line); box-shadow: 0 12px 0 var(--shore-line); }
.pavilion-building:hover, .pavilion-building:focus-within { transform: translateY(-7px); box-shadow: 0 38px 76px color-mix(in srgb, var(--room-accent) 20%, rgba(32,44,42,.12)); }
.pavilion-sign { position: absolute; top: 39px; left: 42px; color: var(--room-accent); font-family: var(--shore-display); font-size: 30px; }
.pavilion-art { position: relative; display: grid; height: clamp(330px, 48vh, 510px); place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--room-accent) 36%, transparent); background: color-mix(in srgb, var(--room-accent) 11%, #f8fbfa); }
.pavilion-art picture, .pavilion-art img { width: 100%; height: 100%; }
.pavilion-art img { display: block; object-fit: cover; object-position: center; transition: transform 520ms cubic-bezier(.2,.8,.2,1); }
.pavilion-building:hover .pavilion-art img, .pavilion-building:focus-within .pavilion-art img { transform: scale(1.025); }
.pavilion-label { position: absolute; right: 54px; bottom: 24px; padding: 9px 12px; background: var(--room-accent); color: white; font-family: var(--shore-mono); font-size: 10px; text-decoration: none; text-transform: uppercase; }

.reading-layout, .archive-layout, .studio-layout { display: grid; align-items: center; gap: clamp(40px, 7vw, 110px); height: 100%; }
.reading-layout { grid-template-columns: .7fr 1fr; }
.pier-visual { position: relative; height: min(64vh, 620px); }
.pier-lines { position: absolute; inset: 18% 6% 10%; border: 1px solid var(--shore-line); border-bottom: 0; transform: perspective(700px) rotateX(56deg); transform-origin: bottom; background: repeating-linear-gradient(90deg, rgba(97,68,42,.16) 0 1px, transparent 1px 70px); }
.pier-card { position: absolute; max-width: 330px; padding: 28px; border: 1px solid var(--shore-line); background: var(--shore-surface-strong); box-shadow: 0 24px 46px rgba(42,52,49,.13); }
.pier-card:first-of-type { top: 18%; left: 12%; transform: rotate(-3deg); }
.pier-card:last-of-type { right: 10%; bottom: 14%; transform: rotate(2deg); }
.pier-card span { color: var(--shore-orange); font-family: var(--shore-mono); font-size: 10px; }
.pier-card h3 { margin: 10px 0; font-family: var(--shore-display); font-size: 28px; font-weight: 480; }
.pier-card p { color: var(--shore-muted); font-size: 13px; line-height: 1.6; }

.archive-layout { grid-template-columns: .46fr 1fr; }
.archive-path { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 18px; position: relative; }
.archive-path::before { content: ""; position: absolute; top: 34px; left: 8%; right: 8%; border-top: 1px dashed var(--shore-orange); }
.archive-item { position: relative; min-height: 230px; padding: 74px 18px 20px; border: 1px solid var(--shore-line); background: color-mix(in srgb, var(--shore-surface) 88%, transparent); }
.archive-item::before { content: ""; position: absolute; top: 28px; left: 24px; width: 11px; height: 11px; border: 3px solid var(--shore-paper); border-radius: 50%; background: var(--shore-orange); box-shadow: 0 0 0 1px var(--shore-orange); }
.archive-item time { color: var(--shore-orange); font-family: var(--shore-mono); font-size: 10px; }
.archive-item h3 { margin: 10px 0 4px; font-family: var(--shore-display); font-size: 23px; font-weight: 500; }
.archive-item strong { font-size: 11px; }
.archive-item p { color: var(--shore-muted); font-size: 11px; line-height: 1.6; }

.studio-layout { grid-template-columns: .48fr .5fr .48fr; }
.studio-building { align-self: center; min-height: min(62vh, 600px); padding: 48px; border: 1px solid var(--shore-line); background: color-mix(in srgb, var(--shore-surface-strong) 96%, var(--shore-orange) 4%); box-shadow: 0 30px 70px rgba(44,45,38,.12); }
.studio-links { display: grid; gap: 9px; margin-top: 24px; }
.studio-links a { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--shore-line); font-family: var(--shore-mono); font-size: 11px; text-decoration: none; }
.studio-links a:hover, .studio-links a:focus-visible { color: var(--shore-orange); }
.studio-portrait { position: relative; align-self: end; width: min(360px, 30vw); height: min(500px, 62vh); overflow: hidden; }
.studio-portrait img { position: absolute; top: -540px; right: -275px; width: 720px; max-width: none; }
.studio-quote { padding: 24px; border-left: 2px solid var(--shore-orange); color: var(--shore-muted); font-family: var(--shore-display); font-size: clamp(24px, 2.4vw, 38px); line-height: 1.18; }

.shore-map { position: fixed; left: 18px; top: 50%; z-index: 60; display: grid; gap: 8px; padding: 10px 8px; border: 1px solid var(--shore-line); border-radius: 999px; background: color-mix(in srgb, var(--shore-surface) 88%, transparent); backdrop-filter: blur(14px); transform: translateY(-50%); }
.shore-map button { position: relative; width: 12px; height: 12px; padding: 0; border: 1px solid var(--shore-muted); border-radius: 50%; background: transparent; cursor: pointer; }
.shore-map button::after { content: attr(data-short); position: absolute; top: 50%; left: 20px; width: max-content; padding: 5px 7px; border-radius: 3px; background: var(--shore-ink); color: var(--shore-paper); font-family: var(--shore-mono); font-size: 8px; opacity: 0; pointer-events: none; transform: translate(5px,-50%); transition: opacity 160ms ease, transform 160ms ease; }
.shore-map button:hover::after, .shore-map button:focus-visible::after { opacity: 1; transform: translate(0,-50%); }
.shore-map button[aria-current="true"] { border-color: var(--shore-orange); background: var(--shore-orange); transform: scale(1.2); }

.index-view { min-height: 100vh; padding: calc(var(--shore-header-height) + 80px) clamp(20px, 7vw, 110px) 80px; background:
  radial-gradient(circle at 90% 7%, color-mix(in srgb, var(--shore-sea) 18%, transparent), transparent 30%),
  var(--shore-paper);
}
.index-shell { width: min(1240px, 100%); margin: 0 auto; }
.index-hero { display: grid; grid-template-columns: 1fr .7fr; gap: 80px; align-items: end; padding-bottom: 76px; border-bottom: 1px solid var(--shore-line); }
.index-hero h1 { margin: 0; font-family: var(--shore-display); font-size: clamp(66px, 9vw, 140px); font-weight: 460; line-height: .8; letter-spacing: -.06em; }
.index-hero p { color: var(--shore-muted); font-size: 17px; line-height: 1.7; }
.index-section { padding: 90px 0; border-bottom: 1px solid var(--shore-line); }
.index-section__head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
.index-section__head h2 { margin: 0; font-family: var(--shore-display); font-size: clamp(44px, 5vw, 72px); font-weight: 470; letter-spacing: -.04em; }
.index-section__head p { max-width: 450px; color: var(--shore-muted); line-height: 1.6; }
.index-projects { display: grid; gap: 0; }
.index-project { display: grid; grid-template-columns: 90px 1.1fr .9fr auto; gap: 28px; align-items: center; padding: 26px 0; border-top: 1px solid var(--shore-line); }
.index-project__id { color: var(--room-accent); font-family: var(--shore-display); font-size: 34px; }
.index-project h3 { margin: 0 0 6px; font-family: var(--shore-display); font-size: clamp(27px, 3vw, 43px); font-weight: 480; line-height: 1; }
.index-project p { margin: 0; color: var(--shore-muted); font-size: 13px; line-height: 1.55; }
.index-project__actions { display: flex; gap: 8px; }
.quick-button { min-height: 38px; padding: 8px 12px; border: 1px solid var(--shore-line); background: transparent; color: var(--shore-ink); font-family: var(--shore-mono); font-size: 9px; text-transform: uppercase; cursor: pointer; }
.quick-button:hover, .quick-button:focus-visible { border-color: var(--shore-orange); color: var(--shore-orange); outline: none; }
.index-experience { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.index-experience article { padding: 24px 0; border-top: 2px solid var(--shore-orange); }
.index-experience time { color: var(--shore-orange); font-family: var(--shore-mono); font-size: 10px; }
.index-experience h3 { margin: 12px 0 4px; font-family: var(--shore-display); font-size: 24px; }
.index-experience p { color: var(--shore-muted); font-size: 12px; line-height: 1.55; }
.index-studio { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.index-studio h2 { margin: 0 0 18px; font-family: var(--shore-display); font-size: clamp(44px, 5vw, 72px); }

.quick-dialog { width: min(920px, calc(100vw - 32px)); max-height: calc(100svh - 40px); padding: 0; border: 1px solid var(--shore-line); background: var(--shore-surface-strong); color: var(--shore-ink); box-shadow: 0 40px 100px rgba(12,25,29,.3); }
.quick-dialog::backdrop { background: rgba(9,20,23,.58); backdrop-filter: blur(5px); }
.quick-dialog__close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 38px; height: 38px; border: 1px solid var(--shore-line); border-radius: 50%; background: var(--shore-surface-strong); color: var(--shore-ink); cursor: pointer; }
.quick-dialog__body { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 520px; }
.quick-dialog__media { min-height: 360px; background: color-mix(in srgb, var(--room-accent) 12%, var(--shore-paper)); }
.quick-dialog__media picture, .quick-dialog__media img { width: 100%; height: 100%; }
.quick-dialog__media img { display: block; object-fit: cover; }
.quick-dialog__copy { padding: 68px 46px 42px; }
.quick-dialog__copy small { color: var(--room-accent); font-family: var(--shore-mono); }
.quick-dialog__copy h2 { margin: 16px 0; font-family: var(--shore-display); font-size: 44px; line-height: .96; }
.quick-dialog__copy p { color: var(--shore-muted); line-height: 1.65; }

.room-transition { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--transition-accent, var(--shore-orange)); color: white; opacity: 0; pointer-events: none; transform: scale(.94); transition: opacity 420ms ease, transform 620ms cubic-bezier(.16,1,.3,1); }
.room-transition strong { font-family: var(--shore-display); font-size: clamp(56px, 10vw, 150px); font-weight: 460; }
body.is-entering-room .room-transition { opacity: 1; transform: scale(1); }

.works-hub-page { min-height: 100vh; background:
  radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--shore-teal) 16%, transparent), transparent 25%),
  var(--shore-paper); }
.works-hub-main { padding: calc(var(--shore-header-height) + 80px) clamp(22px, 7vw, 110px) 100px; }
.works-hub-shell { width: min(1280px, 100%); margin: 0 auto; }
.works-hub-hero { display: grid; grid-template-columns: 1fr .55fr; gap: 80px; align-items: end; padding: 0 0 80px; border-bottom: 1px solid var(--shore-line); }
.works-hub-hero h1 { margin: 0; font-family: var(--shore-display); font-size: clamp(76px, 10vw, 160px); font-weight: 450; line-height: .78; letter-spacing: -.06em; }
.works-hub-hero p { color: var(--shore-muted); line-height: 1.7; }
.works-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 60px 28px; padding-top: 70px; }
.works-card { --room-accent: var(--shore-orange); text-decoration: none; }
.works-card__media { position: relative; aspect-ratio: 1.45; overflow: hidden; border: 1px solid var(--shore-line); background: color-mix(in srgb, var(--room-accent) 10%, var(--shore-surface-strong)); }
.works-card__media::after { content: "Enter pavilion ↗"; position: absolute; right: 14px; bottom: 14px; padding: 9px 11px; background: var(--room-accent); color: white; font-family: var(--shore-mono); font-size: 9px; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity 180ms ease, transform 180ms ease; }
.works-card:hover .works-card__media::after, .works-card:focus-visible .works-card__media::after { opacity: 1; transform: none; }
.works-card__media picture, .works-card__media img { width: 100%; height: 100%; }
.works-card__media img { display: block; object-fit: cover; transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
.works-card:hover img, .works-card:focus-visible img { transform: scale(1.025); }
.works-card__copy { display: grid; grid-template-columns: 70px 1fr; gap: 18px; padding-top: 18px; }
.works-card__copy span { color: var(--room-accent); font-family: var(--shore-mono); font-size: 11px; }
.works-card__copy h2 { margin: 0 0 8px; font-family: var(--shore-display); font-size: clamp(28px, 3vw, 45px); font-weight: 480; line-height: .98; }
.works-card__copy p { margin: 0; color: var(--shore-muted); font-size: 13px; line-height: 1.55; }

@keyframes waveShift { to { background-position: 82px 0; } }
@keyframes cloudDrift { to { transform: translateX(70px); } }

@media (max-width: 1100px) {
  .shore-header { grid-template-columns: 1fr auto; }
  .shore-nav { display: none; }
  .entrance-layout { grid-template-columns: 1fr .7fr; }
  .curator-note { display: none; }
  .pavilion-layout { grid-template-columns: .48fr 1fr; gap: 34px; }
  .pavilion-building { min-height: 560px; }
  .archive-path { grid-template-columns: repeat(2, 1fr); }
  .archive-path::before { display: none; }
  .studio-layout { grid-template-columns: .7fr .5fr; }
  .studio-quote { display: none; }
}

@media (max-width: 860px) {
  :root { --shore-header-height: 64px; }
  .shore-header { grid-template-columns: auto 1fr; padding: 9px 14px; }
  .shore-brand strong { display: none; }
  .shore-controls { gap: 5px; }
  .segmented button { padding-inline: 9px; }
  .shore-map { display: none; }
  .explore-scroll { height: auto !important; }
  .shore-stage { position: relative; height: auto; min-height: 0; overflow: visible; }
  .shore-sky, .shore-sea, .shore-sand, .shore-boardwalk { position: fixed; pointer-events: none; }
  .shore-track { display: block; width: 100%; height: auto; transform: none !important; }
  .shore-stop { width: 100%; height: auto; min-height: 100svh; padding: calc(var(--shore-header-height) + 50px) 20px 70px; }
  .entrance-layout, .pavilion-layout, .reading-layout, .archive-layout, .studio-layout { grid-template-columns: 1fr; height: auto; }
  .entrance-copy { padding: 0; }
  .curator-window { width: 300px; height: 420px; justify-self: center; }
  .curator-window img { width: 320px; top: -62px; }
  .pavilion-building { min-height: auto; padding: 64px 18px 22px; }
  .pavilion-art { height: min(52vw, 390px); }
  .pavilion-sign { left: 20px; }
  .pavilion-label { right: 28px; }
  .archive-path { grid-template-columns: 1fr; }
  .studio-portrait { justify-self: center; width: 300px; }
  .index-view { padding: calc(var(--shore-header-height) + 50px) 18px 60px; }
  .index-hero, .index-studio { grid-template-columns: 1fr; gap: 30px; }
  .index-project { grid-template-columns: 58px 1fr; }
  .index-project > p { grid-column: 2; }
  .index-project__actions { grid-column: 2; }
  .index-experience { grid-template-columns: 1fr 1fr; }
  .quick-dialog__body { grid-template-columns: 1fr; }
  .quick-dialog__copy { padding: 46px 24px 28px; }
  .quick-dialog__media { min-height: 260px; }
  .works-hub-hero { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 680px) {
  .shore-header { grid-template-columns: auto 1fr; }
  .shore-brand img { width: 38px; }
  .entrance-projects a { grid-template-columns: 46px 1fr; }
  .stop-title { font-size: clamp(52px, 18vw, 78px); }
  .stop-copy { font-size: 14px; }
  .curator-window { height: 380px; }
  .pavilion-copy h2 { font-size: 45px; }
  .pavilion-meta { grid-template-columns: 1fr 1fr; }
  .pavilion-art { height: 250px; }
  .pier-visual { height: 440px; }
  .pier-card { max-width: 260px; padding: 20px; }
  .index-hero { padding-bottom: 50px; }
  .index-section { padding: 62px 0; }
  .index-section__head { display: block; }
  .index-project { grid-template-columns: 48px 1fr; gap: 14px; }
  .index-project__actions { flex-wrap: wrap; }
  .index-experience { grid-template-columns: 1fr; }
  .works-grid { grid-template-columns: 1fr; }
  .works-card__copy { grid-template-columns: 52px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .shore-track { will-change: auto; }
}
body { overflow-x: clip; }
.studio-building { min-width: 0; }
.save-data .shore-sea::after,
.save-data .shore-sky::before,
.save-data .shore-sky::after { animation: none; }
@media (max-width: 860px) {
  .shore-boardwalk { left: 0; right: 0; }
  .studio-building { width: 100%; padding: 34px 24px; }
  .studio-building .stop-title { font-size: clamp(46px, 15vw, 68px); overflow-wrap: anywhere; }
}
.studio-portrait img {
  top: -690px;
  right: 8px;
  width: 800px;
  mix-blend-mode: multiply;
}
:root[data-theme="night"] .shore-brand img { filter: brightness(0) invert(1) sepia(.18) saturate(.6); }
:root[data-theme="night"] .curator-window picture { filter: saturate(.76) brightness(.78) contrast(1.03); }
:root[data-theme="night"] .studio-portrait img { filter: saturate(.82) brightness(.9) contrast(1.04); }
@media (max-width: 860px) {
  .curator-window img { left: -6px; top: -88px; width: 470px; }
  .studio-portrait img { top: -580px; right: -4px; width: 680px; }
}

/* Reference-led vertical homepage — source of truth: provided coastal portfolio mockup. */
.reference-home-page {
  --shore-ink: #181713;
  --shore-paper: #f7f3eb;
  --shore-muted: rgba(24, 23, 19, .66);
  --shore-line: rgba(64, 50, 33, .16);
  --shore-surface: rgba(250, 247, 240, .9);
  --shore-surface-strong: #fbf8f2;
  --shore-orange: #e96812;
  background: #f7f3eb;
}
.reference-home-page[data-view="index"] .explore-view { display: none; }
.reference-home-page .index-view { display: block !important; }
.reference-home-page .shore-main { min-height: 100vh; }

.reference-header {
  position: absolute;
  min-height: 76px;
  grid-template-columns: minmax(190px, .72fr) minmax(540px, 1.65fr) minmax(170px, .62fr);
  padding: 18px clamp(30px, 4.2vw, 68px);
  border: 0;
  background: transparent;
  backdrop-filter: none;
}
.reference-header .shore-brand strong {
  color: #171611;
  font-family: var(--shore-display);
  font-size: clamp(21px, 2vw, 30px);
  font-weight: 600;
  letter-spacing: -.04em;
}
.reference-nav {
  position: relative;
  justify-content: space-between;
  gap: 18px;
  padding-top: 13px;
  border-top: 1px solid rgba(31, 34, 31, .48);
}
.reference-nav a {
  position: relative;
  color: #24231f;
  font-family: var(--shore-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.reference-nav a::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid #272924;
  border-radius: 50%;
  background: #eaf4f8;
  transform: translateX(-50%);
}
.reference-nav a.is-active { color: #171611; font-weight: 700; }
.reference-nav a.is-active::before { border-color: var(--shore-orange); background: var(--shore-orange); box-shadow: 0 0 0 4px rgba(233,104,18,.12); }
.reference-header .theme-segmented {
  border: 0;
  padding: 0;
  background: rgba(255,255,255,.64);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.76);
}
.reference-header .theme-segmented button { min-width: 68px; color: rgba(24,23,19,.5); font-family: var(--shore-sans); font-size: 11px; }
.reference-header .theme-segmented button[aria-pressed="true"] { background: var(--shore-orange); color: white; }

.reference-home {
  padding: 0;
  background: #f7f3eb;
  color: #181713;
}
.reference-hero {
  position: relative;
  min-height: 660px;
  overflow: hidden;
  background: linear-gradient(110deg, #fbf8f2 0 35%, #e8f4fa 58%, #d6ecf7 100%);
  border-bottom: 1px solid rgba(88,69,44,.13);
}
.reference-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 82px;
  background: linear-gradient(180deg, rgba(247,243,235,0), #f7f3eb 88%);
  pointer-events: none;
}
.reference-hero__visual { position: absolute; inset: 0; overflow: hidden; }
.reference-hero__visual picture { position: absolute; inset: 0; }
.reference-hero__visual img {
  position: absolute;
  top: 0;
  right: 0;
  width: min(1024px, 100vw);
  height: auto;
  max-width: none;
  clip-path: inset(70px 0 872px 29%);
  filter: saturate(.96) contrast(.98) brightness(1.02);
}
.reference-hero__copy {
  position: relative;
  z-index: 3;
  width: min(470px, 45vw);
  padding: 136px 0 0 clamp(42px, 4.3vw, 70px);
}
.reference-hello { margin: 0 0 12px; color: var(--shore-orange); font-size: 17px; }
.reference-hero h1 {
  margin: 0;
  font-family: var(--shore-display);
  font-size: clamp(54px, 5.5vw, 82px);
  font-weight: 550;
  line-height: .98;
  letter-spacing: -.055em;
}
.reference-role { margin: 8px 0 30px; color: var(--shore-orange); font-size: clamp(19px, 1.6vw, 25px); }
.reference-intro { margin: 0; color: #34322d; font-size: clamp(14px, 1.18vw, 18px); line-height: 1.55; }
.reference-intro a { color: var(--shore-orange); text-underline-offset: 3px; }
.reference-actions { display: flex; align-items: center; gap: 22px; margin-top: 24px; }
.reference-primary,
.reference-outline-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 16px;
  border: 1px solid var(--shore-orange);
  border-radius: 4px;
  background: var(--shore-orange);
  color: white;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.reference-primary:hover,
.reference-primary:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(174,78,13,.2); outline: none; }
.reference-text-link { color: #282620; font-size: 11px; text-decoration: underline; text-decoration-color: rgba(40,38,32,.3); text-underline-offset: 5px; }
.reference-text-link span { margin-left: 10px; color: var(--shore-orange); }

.reference-shell { width: min(1160px, calc(100% - 64px)); }
.reference-home .index-section { padding: 68px 0; border-color: rgba(76,58,36,.14); }
.reference-section-head { margin-bottom: 26px; }
.reference-section-head h2,
.reference-thinking h2 {
  margin: 0;
  font-family: var(--shore-display);
  font-size: clamp(37px, 4vw, 56px);
  font-weight: 520;
  line-height: 1;
  letter-spacing: -.045em;
}
.reference-label { margin: 0 0 8px; color: var(--shore-orange); font-family: var(--shore-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.reference-label span { font-size: 17px; }
.reference-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.reference-project-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 520px;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(83,62,37,.14);
  border-radius: 9px;
  background: rgba(255,255,255,.25);
  box-shadow: 0 14px 34px rgba(78,58,34,.05);
}
.reference-project-card__copy { min-height: 190px; padding: 20px 20px 14px; }
.reference-project-card .index-project__id { display: block; margin-bottom: 4px; color: #171611; font-size: 25px; line-height: 1; }
.reference-project-card h3 { margin: 0 0 10px; color: #171611; font-size: clamp(22px, 2vw, 30px); line-height: .97; letter-spacing: -.035em; }
.reference-project-card p { max-width: 250px; color: rgba(24,23,19,.7); font-size: 11px; line-height: 1.5; }
.reference-project-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.reference-project-card__tags span { padding: 3px 7px; border: 1px solid rgba(65,52,37,.24); border-radius: 999px; font-family: var(--shore-mono); font-size: 7px; }
.reference-project-card__media { position: relative; height: 274px; margin: 0 12px; overflow: hidden; border-radius: 7px 7px 0 0; background: rgba(255,255,255,.56); }
.reference-project-card__media picture,
.reference-project-card__media img { width: 100%; height: 100%; }
.reference-project-card__media img { display: block; object-fit: cover; object-position: center top; }
.reference-project-card__link { display: flex; min-height: 54px; align-items: center; justify-content: space-between; margin-top: auto; padding: 14px 20px; border-top: 1px solid rgba(83,62,37,.12); color: #25231f; font-size: 10px; text-decoration: none; }
.reference-project-card__link span { color: var(--shore-orange); font-size: 18px; transition: transform 160ms ease; }
.reference-project-card__link:hover span,
.reference-project-card__link:focus-visible span { transform: translateX(4px); }

.reference-outline-link { border-color: rgba(50,42,31,.28); background: transparent; color: #25231f; font-size: 10px; }
.reference-timeline { position: relative; gap: 26px; padding-top: 22px; }
.reference-timeline::before { content: ""; position: absolute; top: 22px; right: 0; left: 0; height: 1px; background: rgba(74,57,37,.34); }
.reference-timeline article { position: relative; padding: 24px 0 0 30px; border: 0; }
.reference-timeline article::before { content: ""; position: absolute; top: -4px; left: 28px; width: 7px; height: 7px; border-radius: 50%; background: var(--shore-orange); box-shadow: 0 0 0 3px #f7f3eb; }
.reference-timeline time { color: #2c2923; font-size: 8px; }
.reference-timeline h3 { margin: 12px 0 4px; color: #171611; font-family: var(--shore-sans); font-size: 11px; font-weight: 700; }
.reference-timeline strong { font-size: 9px; font-weight: 500; }
.reference-timeline p { margin: 6px 0 0; color: rgba(24,23,19,.68); font-family: var(--shore-mono); font-size: 8px; line-height: 1.45; }

.reference-thinking { display: none; }
.reference-studio {
  grid-template-columns: 1.05fr .9fr .7fr .5fr;
  gap: 34px;
  align-items: center;
  padding-bottom: 44px !important;
}
.reference-studio__copy h2 { margin: 0 0 14px; color: #171611; font-size: clamp(36px, 3.8vw, 53px); font-weight: 520; line-height: .92; letter-spacing: -.045em; }
.reference-studio__copy h2 em { position: relative; color: inherit; font-style: normal; }
.reference-studio__copy h2 em::after { content: ""; position: absolute; right: -2px; bottom: -3px; left: -2px; height: 2px; background: var(--shore-orange); transform: rotate(-3deg); }
.reference-studio__copy > p:last-child { max-width: 280px; color: rgba(24,23,19,.68); font-size: 10px; line-height: 1.55; }
.reference-studio__portrait { position: relative; width: 100%; height: 190px; overflow: hidden; border-radius: 50%; background: rgba(255,255,255,.42); }
.reference-studio__portrait picture { position: absolute; inset: 0; }
.reference-studio__portrait img { position: absolute; top: -1305px; left: -332px; width: 1024px; max-width: none; height: auto; }
.reference-contact-links a { padding: 10px 0; color: #292722; font-size: 10px; }
.reference-quick-links { display: grid; gap: 9px; align-self: center; padding-left: 24px; border-left: 1px solid rgba(79,59,35,.14); }
.reference-quick-links strong { margin-bottom: 4px; font-size: 10px; }
.reference-quick-links a { color: #292722; font-size: 9px; text-decoration: none; }
.reference-footer { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0 34px; color: rgba(24,23,19,.58); font-family: var(--shore-mono); font-size: 8px; }
.reference-footer span:nth-child(2) { font-family: var(--shore-display); font-size: 13px; font-style: italic; }

:root[data-theme="night"] .reference-home-page,
:root[data-theme="night"] .reference-home { background: #171d20; color: #f4ede2; }
:root[data-theme="night"] .reference-header .shore-brand strong,
:root[data-theme="night"] .reference-nav a { color: #f4ede2; }
:root[data-theme="night"] .reference-nav { border-color: rgba(244,237,226,.35); }
:root[data-theme="night"] .reference-nav a::before { border-color: rgba(244,237,226,.58); background: #1c2529; }
:root[data-theme="night"] .reference-hero { background: #17242d; }
:root[data-theme="night"] .reference-hero__visual img { filter: saturate(.72) brightness(.54) contrast(1.08); }
:root[data-theme="night"] .reference-hero::after { background: linear-gradient(180deg, rgba(23,29,32,0), #171d20 88%); }
:root[data-theme="night"] .reference-hero h1,
:root[data-theme="night"] .reference-intro,
:root[data-theme="night"] .reference-section-head h2,
:root[data-theme="night"] .reference-project-card h3,
:root[data-theme="night"] .reference-project-card .index-project__id,
:root[data-theme="night"] .reference-project-card__link,
:root[data-theme="night"] .reference-timeline h3,
:root[data-theme="night"] .reference-studio__copy h2,
:root[data-theme="night"] .reference-contact-links a,
:root[data-theme="night"] .reference-quick-links a { color: #f4ede2; }
:root[data-theme="night"] .reference-project-card { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.12); }
:root[data-theme="night"] .reference-project-card p,
:root[data-theme="night"] .reference-studio__copy > p:last-child,
:root[data-theme="night"] .reference-timeline p { color: rgba(244,237,226,.66); }
:root[data-theme="night"] .reference-shell { color: #f4ede2; }
:root[data-theme="night"] .reference-footer { color: rgba(244,237,226,.58); }

@media (max-width: 1100px) {
  .reference-header { grid-template-columns: 180px 1fr 150px; padding-inline: 30px; }
  .reference-nav { gap: 12px; }
  .reference-nav a { font-size: 9px; }
  .reference-hero__copy { width: min(460px, 50vw); }
  .reference-project-card { min-height: 500px; }
  .reference-studio { grid-template-columns: 1fr .85fr .75fr; }
  .reference-quick-links { display: none; }
}

@media (max-width: 860px) {
  .reference-header { position: absolute; grid-template-columns: 1fr auto; min-height: 64px; padding: 14px 18px; }
  .reference-header .shore-brand strong { display: block; font-size: 22px; }
  .reference-nav { display: none; }
  .reference-header .theme-segmented button { min-width: 54px; padding-inline: 9px; }
  .reference-hero { min-height: 760px; background: #e9f4f8; }
  .reference-hero__copy { width: calc(100% - 36px); padding: 104px 18px 0; }
  .reference-hero h1 { max-width: 330px; font-size: clamp(52px, 15vw, 70px); }
  .reference-intro { max-width: 330px; }
  .reference-hero__visual img { top: 196px; right: -152px; width: 820px; clip-path: inset(70px 0 872px 29%); }
  .reference-hero::after { height: 120px; }
  .reference-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
  .reference-shell { width: min(100% - 36px, 680px); }
  .reference-home .index-section { padding: 56px 0; }
  .reference-section-head { align-items: flex-start; flex-direction: column; gap: 16px; }
  .reference-projects { grid-template-columns: 1fr; }
  .reference-project-card { min-height: 530px; }
  .reference-project-card__copy { min-height: 170px; }
  .reference-project-card__media { height: 300px; }
  .reference-timeline { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .reference-timeline::before { top: 0; bottom: 0; left: 4px; width: 1px; height: auto; }
  .reference-timeline article { padding: 0 0 34px 28px; }
  .reference-timeline article::before { top: 3px; left: 1px; }
  .reference-studio { grid-template-columns: 1fr; gap: 26px; }
  .reference-studio__portrait { width: 280px; justify-self: center; }
  .reference-contact-links { width: 100%; }
  .reference-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .reference-header .theme-segmented button { min-width: 48px; font-size: 9px; }
  .reference-hero { min-height: 720px; }
  .reference-hero__visual img { top: 226px; right: -236px; width: 780px; }
  .reference-role { margin-bottom: 20px; }
  .reference-primary { min-height: 44px; }
  .reference-project-card { min-height: 500px; }
  .reference-project-card__media { height: 260px; }
  .reference-studio__portrait { width: 250px; height: 170px; }
}

/* Reference proportion corrections after same-width comparison. */
@media (min-width: 861px) {
  .reference-header .reference-nav { display: flex; }
  .reference-hero { min-height: 620px; }
  .reference-home .index-section { padding: 38px 0; }
  .reference-section-head { margin-bottom: 20px; }
  .reference-project-card { min-height: 382px; }
  .reference-project-card__copy { min-height: 132px; padding: 14px 16px 10px; }
  .reference-project-card .index-project__id { font-size: 22px; }
  .reference-project-card h3 { margin-bottom: 7px; font-size: clamp(19px, 1.8vw, 25px); }
  .reference-project-card p { font-size: 9px; line-height: 1.42; }
  .reference-project-card__tags { margin-top: 8px; }
  .reference-project-card__media { height: 202px; margin-inline: 10px; }
  .reference-project-card__link { min-height: 46px; padding: 10px 16px; }
  .reference-experience .reference-section-head { margin-bottom: 12px; }
  .reference-timeline { padding-top: 14px; }
  .reference-timeline::before { top: 14px; }
  .reference-timeline article { padding-top: 16px; }
  .reference-timeline article::before { top: -4px; }
  .reference-studio { grid-template-columns: 1.05fr .9fr .7fr .5fr; gap: 24px; padding-top: 34px !important; padding-bottom: 30px !important; }
  .reference-studio__portrait { height: 164px; }
  .reference-studio__portrait img { top: -1315px; left: -348px; }
  .reference-quick-links { display: grid; }
}

@media (min-width: 861px) and (max-width: 1100px) {
  .reference-header { grid-template-columns: 170px 1fr 142px; gap: 18px; padding-inline: 30px; }
  .reference-nav { gap: 9px; }
  .reference-nav a { font-size: 8px; }
  .reference-header .theme-segmented button { min-width: 60px; }
  .reference-project-card__copy { min-height: 140px; }
  .reference-project-card__media { height: 194px; }
  .reference-studio { grid-template-columns: 1fr .8fr .68fr .48fr; gap: 18px; }
}

@media (max-width: 860px) {
  .reference-hero { min-height: 650px; background: #f7f3eb; }
  .reference-hero__copy {
    width: 100%;
    padding: 94px 18px 24px;
    background: #f7f3eb;
  }
  .reference-hero__visual img { top: 242px; right: -220px; width: 780px; }
  .reference-hero::after { height: 72px; }
  :root[data-theme="night"] .reference-hero__copy { background: #17242d; }
}

@media (max-width: 480px) {
  .reference-hero { min-height: 630px; }
  .reference-hero__visual img { top: 252px; right: -232px; width: 770px; }
}

@media (max-width: 860px) {
  .reference-hero__visual img { clip-path: inset(70px 0 760px 29%); }
}

@media (min-width: 861px) {
  .reference-work { padding-top: 22px !important; padding-bottom: 20px !important; }
  .reference-work .reference-section-head { margin-bottom: 12px; }
  .reference-project-card { min-height: 360px; }
  .reference-project-card__copy { min-height: 124px; }
  .reference-project-card__media { height: 190px; }
  .reference-project-card__link { min-height: 44px; }
  .reference-experience { padding-top: 24px !important; padding-bottom: 18px !important; }
  .reference-experience .reference-section-head { margin-bottom: 6px; }
  .reference-timeline { padding-top: 10px; }
  .reference-timeline::before { top: 10px; }
  .reference-timeline article { padding-top: 12px; }
  .reference-timeline article::before { top: -4px; }
  .reference-studio { padding-top: 22px !important; padding-bottom: 18px !important; }
  .reference-studio__portrait { height: 144px; }
  .reference-studio__portrait img { top: -1323px; left: -360px; }
  .reference-footer { padding-top: 12px; padding-bottom: 18px; }
}

/* Approved Style B character treatment and Handoff-aligned card interaction. */
.reference-hero__character {
  position: absolute;
  left: calc(100% - min(1024px, 100vw) + 270px);
  bottom: 18px;
  z-index: 2;
  width: 210px;
  height: 324px;
  overflow: hidden;
  background: #f8f2e8;
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 48% 50%, #000 63%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 82% at 48% 50%, #000 63%, transparent 100%);
  pointer-events: none;
}
.reference-hero__character picture,
.reference-hero__character img { position: absolute; display: block; max-width: none; }
.reference-hero__character picture { inset: 0; }
.reference-hero__character img { top: -82px; left: 0; width: 320px; height: auto; }
:root[data-theme="night"] .reference-hero__character { background: #d8cdbd; filter: saturate(.72) brightness(.68) contrast(1.06); }

.reference-studio__portrait { background: #f8f2e8; }
.reference-studio__portrait img { top: -390px !important; left: -250px !important; width: 400px !important; max-width: none; height: auto; }

.reference-project-card { transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
.reference-project-card:hover,
.reference-project-card:focus-within { transform: translateY(-4px); border-color: color-mix(in srgb, var(--room-accent) 42%, rgba(83,62,37,.14)); box-shadow: 0 20px 44px rgba(78,58,34,.1); }
.reference-project-card__quick {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(44,36,26,.18);
  border-radius: 4px;
  background: rgba(251,248,242,.94);
  color: #25231f;
  font-family: var(--shore-mono);
  font-size: 8px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(5px);
  cursor: pointer;
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease, color 160ms ease;
}
.reference-project-card:hover .reference-project-card__quick,
.reference-project-card:focus-within .reference-project-card__quick { opacity: 1; transform: none; }
.reference-project-card__quick:hover,
.reference-project-card__quick:focus-visible { background: var(--shore-orange); color: white; outline: 2px solid var(--shore-orange); outline-offset: 2px; }

@media (max-width: 860px) {
  .reference-hero__character {
    left: 52px;
    bottom: 6px;
    width: 150px;
    height: 236px;
  }
  .reference-hero__character img { top: -63px; left: 0; width: 244px; }
  .reference-studio__portrait img { top: -468px !important; left: -300px !important; width: 480px !important; }
  .reference-project-card__quick { opacity: 1; transform: none; }
}

/* Remove the composite reference character and blend the approved Style B crop into the scene. */
@media (min-width: 861px) {
  .reference-hero__visual img { clip-path: inset(70px 0 872px 36%); }
  .reference-hero__character { left: calc(100% - min(1024px, 100vw) + 288px); background: transparent; }
}
.reference-hero__character { background: transparent; }
.reference-hero__character img { mix-blend-mode: multiply; }

@media (max-width: 860px) {
  .reference-hero__visual img { clip-path: inset(70px 0 760px 36%); }
  .reference-hero__character { left: 70px; background: transparent; }
}

.reference-hero__character { mix-blend-mode: multiply; }
.reference-hero__character img { mix-blend-mode: normal; }

.reference-hero__character { mix-blend-mode: darken; }

.reference-hero__character {
  background: #f8f2e8;
  border-radius: 48% 48% 38% 42% / 28% 30% 58% 60%;
  -webkit-mask-image: none;
  mask-image: none;
  mix-blend-mode: normal;
  box-shadow: 0 18px 40px rgba(91,65,38,.08);
}
.reference-hero__character img { mix-blend-mode: normal; }

.reference-hero__character {
  bottom: 18px;
  width: 180px;
  height: 300px;
  border-radius: 50% 46% 10px 8px / 28% 32% 8px 8px;
}
.reference-hero__character img { top: -74px; left: 0; width: 285px; }

@media (max-width: 860px) {
  .reference-hero__character { left: 76px; bottom: 6px; width: 130px; height: 220px; }
  .reference-hero__character img { top: -55px; left: 0; width: 210px; }
}

@media (max-width: 860px) {
  .reference-hero__character { left: 68px; bottom: 4px; width: 100px; height: 170px; }
  .reference-hero__character img { top: -42px; left: 0; width: 160px; }
}

@media (max-width: 860px) {
  .reference-hero__character img { top: -38px; }
}

.reference-project-card:hover,
.reference-project-card:focus-within { transform: none; }