:root {
  --ink: #15100d;
  --ivory: #f0eadf;
  --muted: rgba(240, 234, 223, 0.62);
  --gold: #d6b06b;
  --progress: 0;
  color-scheme: dark;
  font-family: "Helvetica Neue", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
  background: var(--ink);
}

* { box-sizing: border-box; }

html {
  background: var(--ink);
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ivory);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}

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

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
}

.film-frame {
  position: absolute;
  inset: -1.5%;
  overflow: hidden;
  background: var(--ink);
  transform: translate3d(var(--shift-x, 0), var(--shift-y, 0), 0) scale(1.035);
  will-change: transform;
}

#film {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.98) contrast(1.015) brightness(0.96);
}

.film-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 7, 5, 0.48), transparent 19%, transparent 75%, rgba(10, 7, 5, 0.58)),
    linear-gradient(90deg, rgba(10, 7, 5, 0.22), transparent 23%, transparent 78%, rgba(10, 7, 5, 0.2));
}

.masthead,
.timeline,
.scroll-cue,
.credits,
.chapter-stack {
  position: absolute;
  z-index: 5;
}

.masthead {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(22px, 3.5vw, 54px) clamp(22px, 4.5vw, 72px);
}

.masthead p,
.credits p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.24em;
}

.wordmark {
  font-family: Didot, "Bodoni 72", "Times New Roman", serif;
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1;
  letter-spacing: 0.08em;
}

.chapter-stack {
  left: clamp(22px, 4.5vw, 72px);
  bottom: clamp(72px, 8vw, 120px);
  width: min(68vw, 440px);
}

.chapter {
  position: absolute;
  left: 0;
  bottom: 0;
  display: grid;
  gap: 7px;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(.2,.75,.25,1);
}

.chapter.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.chapter span {
  color: var(--gold);
  font-size: 9px;
  letter-spacing: 0.25em;
}

.chapter strong {
  font-family: Didot, "Songti SC", "STSong", serif;
  font-size: clamp(18px, 2vw, 29px);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.65);
}

.timeline {
  top: 50%;
  right: clamp(20px, 4.5vw, 72px);
  display: grid;
  justify-items: center;
  gap: 12px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
}

.timeline-rail {
  position: relative;
  width: 1px;
  height: min(28vh, 230px);
  overflow: hidden;
  background: rgba(240, 234, 223, 0.26);
}

.timeline-rail i {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleY(var(--progress));
  transform-origin: top;
}

.scroll-cue {
  left: clamp(22px, 4.5vw, 72px);
  bottom: clamp(28px, 3.5vw, 52px);
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.2em;
  transition: opacity 280ms ease;
}

.scroll-cue.is-hidden { opacity: 0; }

.scroll-cue i {
  position: relative;
  width: 48px;
  height: 1px;
  overflow: hidden;
  background: rgba(240, 234, 223, 0.25);
}

.scroll-cue i::after {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--ivory);
  transform: translateX(-100%);
  animation: travel 1.7s ease-in-out infinite;
}

.credits {
  right: clamp(22px, 4.5vw, 72px);
  bottom: clamp(28px, 3.5vw, 52px);
}

.scroll-road {
  position: relative;
  z-index: 0;
  height: 1050vh;
}


.loading {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: var(--ink);
  transition: opacity 650ms ease, visibility 650ms;
}

.loading.is-ready {
  opacity: 0;
  visibility: hidden;
}

.loading-mark {
  color: var(--gold);
  font-family: Didot, "Times New Roman", serif;
  font-size: 54px;
  animation: breathe 1.4s ease-in-out infinite alternate;
}

.loading p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.24em;
}

noscript {
  position: fixed;
  inset: auto 18px 18px;
  z-index: 30;
  padding: 14px;
  color: var(--ink);
  background: var(--ivory);
}

@keyframes travel {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

@keyframes breathe { to { opacity: 0.32; } }

@media (max-aspect-ratio: 4 / 5) {
  .film-frame { inset: 0; transform: none; }
  #film { object-fit: contain; }
  .film-vignette {
    background: linear-gradient(180deg, rgba(10, 7, 5, 0.38), transparent 22%, transparent 72%, rgba(10, 7, 5, 0.52));
  }
  .masthead p,
  .credits { display: none; }
  .chapter-stack { width: 70vw; bottom: 76px; }
  .timeline { right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter { transition: none; }
  .scroll-cue i::after,
  .loading-mark { animation: none; }
}

/* The original film remains the visual world; content adds an editorial reading layer. */
:root { --muted: #ddd4c5; }
::selection { background: #d6b06b; color: #15100d; }
html { scrollbar-color: #a68d68 #15100d; }
:focus-visible { outline: 2px solid #d6b06b; outline-offset: 6px; }
button, input, textarea, select { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.masthead .wordmark { display: flex; gap: 18px; align-items: baseline; }
.wordmark span { font-family: "Songti SC", serif; font-size: 14px; letter-spacing: .12em; }
.masthead nav { display: flex; gap: 30px; font-size: 14px; }
.masthead nav a, .credits a { padding: 12px 0; border-bottom: 1px solid #c3b9a688; }
.masthead a:hover, .credits a:hover { color: #e9c583; }
.chapter-stack { width: min(580px, 55vw); bottom: 120px; }
.chapter { visibility: hidden; gap: 20px; }
.chapter.is-active { visibility: visible; }
.chapter h1, .chapter h2 { margin: 0; font-family: "Songti SC", "Bodoni 72", serif; font-size: clamp(28px, 3.8vw, 58px); line-height: 1.28; font-weight: 400; letter-spacing: 0; text-wrap: balance; }
.chapter p { margin: 0; max-width: 34em; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.85; color: #f0eadf; }
.film-vignette { background: linear-gradient(90deg, #10121ecc, #10121e08 75%), linear-gradient(0deg, #0c101bdb, transparent 70%); }
.credits { font-size: 14px; }
.portfolio, .method, .collaborate { position: relative; padding: 100px max(6vw,24px); }
.portfolio { background: #eee8dc; color: #24221f; }
.section-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; margin-bottom: 100px; align-items: start; }
h2,h3,p { margin-top: 0; }
.portfolio h2,.method h2,.collaborate h2 { font-family:"Songti SC",serif; font-size:clamp(34px,4.1vw,62px); line-height:1.3; font-weight:400; letter-spacing:0; text-wrap:balance; }
.portfolio p,.portfolio dd,.method p,.collaborate p { font-size:16px; line-height:1.95; max-width:65ch; }
.lead { font-size:22px !important; line-height:1.65 !important; }
.work { display:grid; grid-template-columns:1.25fr 1fr; gap:6vw; padding:64px 0; border-top:1px solid #a69d8d; }
.work figure { margin:0; }
.work img { width:100%; height:auto; display:block; }
.work figcaption { font-size:13px; margin-top:16px; color:#5b5448; }
.work h3 { font-family:"Songti SC",serif; font-size:clamp(28px,2.8vw,42px); line-height:1.4; font-weight:400; }
.work dt { font-weight:600; font-size:14px; margin:22px 0 6px; }
.work dd { margin:0; color:#514a40; }
.work details { border-top:1px solid #a69d8d; padding-top:20px; margin-top:30px; }
summary { cursor:pointer; padding:6px 0 18px; font-size:15px; }
.text-link { color:inherit; background:none; border:0; border-bottom:1px solid currentColor; padding:12px 0; font-size:15px; text-align:left; margin-top:14px; }
.text-link:hover { opacity:.7; }
.method { background:#172947; }
.method h2 { max-width:700px; margin-bottom:60px; }
.method-row { display:grid; grid-template-columns:1fr 1.2fr; gap:8vw; padding:28px 0; border-top:1px solid #738199; }
.method-row h3 { font-weight:400; font-family:"Songti SC",serif; font-size:26px; }
.method-row p { margin-bottom:0; color:#e0e4ec; }
.collaborate { display:grid; grid-template-columns:1fr 1fr; gap:8vw; background:#1b1814; }
.collaborate form { display:grid; align-content:start; gap:12px; }
.collaborate label { font-size:14px; margin-top:12px; }
input,textarea,select { border:1px solid #8d8071; border-radius:0; padding:15px; background:#28221c; color:#f0eadf; width:100%; min-width:0; caret-color:#e0be84; }
textarea { resize:vertical; }
::placeholder { color:#c1b5a6; opacity:1; }
.primary { background:#dfc594; color:#201a12; border:0; padding:18px 24px; margin-top:14px; }
.primary:hover { background:#efdbb7; }
.form-note { font-size:13px !important; color:#cabfae; }
#brief-result { border-top:1px solid #8d8071; padding-top:28px; }
#brief-result[hidden] { display:none; }
#brief-preview { font:inherit; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; }
#brief-status { font-size:14px; }
.page-footer { display:flex; justify-content:space-between; gap:24px; padding:32px max(6vw,24px); border-top:1px solid #61574a; color:#d5cbbc; font-size:13px; }
.page-footer a { text-decoration:underline; text-underline-offset:5px; }
@media(max-width:700px) {
 .masthead { padding:24px; align-items:flex-start; }
 .masthead nav { gap:16px; font-size:12px; }
 .masthead .wordmark { flex-direction:column; gap:9px; }
 .wordmark span { font-size:12px; }
 .chapter-stack { width:calc(100% - 64px); left:24px; bottom:100px; }
 .chapter { gap:12px; }
 .chapter h1,.chapter h2 { font-size:29px; }
 .chapter p { font-size:15px; line-height:1.75; }
 .timeline { right:12px; font-size:9px; }
 .timeline-rail { height:100px; }
 .credits { display:block; bottom:30px; right:24px; font-size:13px; }
 .scroll-cue { left:24px; bottom:38px; }
 .portfolio,.method,.collaborate { padding:64px 24px; }
 .section-intro,.work,.method-row,.collaborate { grid-template-columns:1fr; gap:28px; }
 .section-intro { margin-bottom:56px; }
 .work { padding:40px 0; }
 .method-row { gap:6px; }
 .page-footer { flex-wrap:wrap; }
}
@media(max-aspect-ratio:4/5) { .film-vignette { background:linear-gradient(0deg,#101016 0%,#101016ee 20%,transparent 65%); } }

.timeline, .loading p, .scroll-cue { font-size: 12px; }
.scroll-cue { letter-spacing: .06em; }
.scroll-cue i::after { animation: none; transform: none; }
.method { color: #eef3fc; }
.method-row p { color: #dde8fa; }
@media (max-width:700px) { .timeline { font-size:11px; } }