/* Luxe Lookbook: presentation only. Application routes have an isolated theme;
   the homepage section overrides at the end do not touch its cinema stage. */
html:not([data-route="home"]) {
  --font: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-display: "YJ Playfair", "YJ Noto Serif", "Songti SC", SimSun, serif;
  --canvas: #f7f5f1;
  --surface: #fcfbf8;
  --surface-subtle: #eeebe5;
  --sidebar-bg: #f7f5f1;
  --ink: #141210;
  --muted: #6b6259;
  --line: #d6d0c7;
  --control-border: #a69e93;
  --primary: #141210;
  --primary-hover: #35302a;
  --primary-ink: #f7f5f1;
  --selected: #e8e3db;
  --selected-ink: #141210;
  --focus: #9a7b4f;
  --media-bg: #e8e3db;
  --brand-accent: #9a7b4f;
  --glass-panel: rgb(247 245 241 / 70%);
  --glass-card: rgb(252 251 248 / 62%);
  --glass-control: rgb(252 251 248 / 86%);
  --glass-line: rgb(109 99 84 / 36%);
  --glass-shadow: transparent;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --shadow: none;
  --lookbook-ease: cubic-bezier(.22,.61,.36,1);
}
html:not([data-route="home"])[data-theme="dark"] {
  --canvas: #171614;
  --surface: #1e1c19;
  --surface-subtle: #292622;
  --sidebar-bg: #171614;
  --ink: #f7f5f1;
  --muted: #b9afa3;
  --line: #45403a;
  --control-border: #81776b;
  --primary: #f7f5f1;
  --primary-hover: #e8e3db;
  --primary-ink: #141210;
  --selected: #35302a;
  --selected-ink: #f7f5f1;
  --focus: #b99b70;
  --media-bg: #24211d;
  --brand-accent: #b99b70;
  --glass-panel: rgb(23 22 20 / 70%);
  --glass-card: rgb(30 28 25 / 62%);
  --glass-control: rgb(30 28 25 / 84%);
  --glass-line: rgb(219 207 188 / 29%);
  --glass-shadow: transparent;
  --shadow: none;
}
html:not([data-route="home"]) body { font-family: var(--font); letter-spacing: 0; }
html:not([data-route="home"])::selection, html:not([data-route="home"]) ::selection { background: var(--selected); color: var(--ink); }
html:not([data-route="home"]) h1,
html:not([data-route="home"]) h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.035em; }
html:not([data-route="home"]) h1 { font-size: clamp(30px, 2.8vw, 42px); line-height: 1.35; }
html:not([data-route="home"]) h2 { line-height: 1.4; }
html:not([data-route="home"]) h3 { font-weight: 500; }
html:not([data-route="home"]) button,
html:not([data-route="home"]) input,
html:not([data-route="home"]) select,
html:not([data-route="home"]) textarea { font-family: var(--font); }
html:not([data-route="home"]) .eyebrow { font-weight: 400; letter-spacing: .2em; }
/* Explicit UI surfaces only: rain geometry, avatars and media are untouched. */
html:not([data-route="home"]) :is(.btn, .choice, .chip, .filter, .pill, .icon-btn, .text-btn,
  .language-switch, .model-search-toggle, .model-search-popover,
  .panel, .parameter-card, .upload-box, .art-card, .art-button,
  .task-card, .task-frame, .task-carousel, .result-card, .video-result-card,
  .retail-pack, .model-rate-card, .calculator-result, .reference-library-card,
  .result-notice, .rain-controls, .rain-toggle, .rain-speed,
  .studio-submit, .profile, .side-note, .side-summary, .reference-ideas,
  .creative-ideas, .plan-feature-locked, .route-facts span,
  .nav-item, .sidebar-toggle, .carousel-control, .viewer-thumbnail,
  input:not([type="checkbox"]):not([type="radio"]), select, textarea, dialog) {
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:not([data-route="home"]) .btn,
html:not([data-route="home"]) .choice,
html:not([data-route="home"]) .filter { font-weight: 400; }
html:not([data-route="home"]) .btn { padding-inline: 18px; border-color: var(--line); }
html:not([data-route="home"]) .btn.primary { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
html:not([data-route="home"]) .btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
html:not([data-route="home"]) .btn.ghost { background: transparent; }
html:not([data-route="home"]) .btn.ink { background: var(--ink); color: var(--canvas); }
html:not([data-route="home"]) .btn:disabled { cursor: not-allowed; }
html:not([data-route="home"]) :where(button,a,input,select,textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
html:not([data-route="home"]) input:not([type="checkbox"]):not([type="radio"]),
html:not([data-route="home"]) select,
html:not([data-route="home"]) textarea {
  background: var(--surface); border-color: var(--control-border); color: var(--ink);
}
html:not([data-route="home"]) input::placeholder,
html:not([data-route="home"]) textarea::placeholder { color: var(--muted); opacity: .85; }
html:not([data-route="home"]) input[aria-invalid="true"],
html:not([data-route="home"]) textarea[aria-invalid="true"] { border-color: var(--danger); }
/* Navigation retains the existing expanded / collapsed widths and rules. */
html:not([data-route="home"]) .sidebar { background: var(--sidebar-bg); border-color: var(--line); }
html:not([data-route="home"]) .brand-name { font-family: var(--font-display); font-weight: 400; letter-spacing: .1em; }
html:not([data-route="home"]) .brand-en { font-family: var(--font); font-weight: 400; letter-spacing: .28em; }
html:not([data-route="home"]) .brand-mark { transform: none; }
html:not([data-route="home"]) .nav-section { font-size: 10px; letter-spacing: .16em; color: var(--muted); }
html:not([data-route="home"]) .nav-item { color: var(--muted); font-size: 13px; }
html:not([data-route="home"]) .nav-item:hover { background: var(--surface-subtle); color: var(--ink); }
html:not([data-route="home"]) .nav-item.active { background: var(--selected); color: var(--ink); font-weight: 500; }
html:not([data-route="home"]) .nav-item .nav-badge { background: transparent; border-color: var(--line); color: var(--muted); }
html:not([data-route="home"]) .side-bottom { border-color: var(--line); }
html:not([data-route="home"]) .topbar { border-bottom-color: var(--line); background: var(--canvas); }
html:not([data-route="home"])[data-theme="dark"][data-route="video"] .topbar {
  background: var(--canvas); border-color: var(--line); color: var(--ink);
}
html:not([data-route="home"]) .breadcrumb { font-size: 12px; letter-spacing: .04em; }
html:not([data-route="home"]) .profile { background: transparent; }
html:not([data-route="home"]) .page-header { margin-bottom: 26px; }
html:not([data-route="home"]) .page-header h1 { font-family: var(--font-display); font-weight: 400; }
html:not([data-route="home"]) .page-header p { max-width: 65ch; font-size: 14px; line-height: 1.8; }
/* Creation surfaces keep the accepted rain-glass translucency. */
html:not([data-route="home"])[data-route="create"] .provider-workspace .form-panel,
html:not([data-route="home"])[data-route="create"] .provider-workspace .output-panel,
html:not([data-route="home"])[data-route="video"] .video-workspace .form-panel,
html:not([data-route="home"])[data-route="video"] .video-workspace .output-panel,
html:not([data-route="home"])[data-route="create"] .parameter-card,
html:not([data-route="home"])[data-route="video"] .parameter-card {
  border-radius: 0; box-shadow: none; border-color: var(--glass-line);
}
html:not([data-route="home"]) .parameter-card-title { font-family: var(--font); font-size: 13px; font-weight: 500; letter-spacing: .12em; }
html:not([data-route="home"]) .tab-strip { border-color: var(--line); gap: 24px; }
html:not([data-route="home"]) .tab-strip button { font-weight: 400; letter-spacing: .06em; }
html:not([data-route="home"]) .tab-strip button.active { color: var(--ink); border-bottom-color: var(--ink); }
html:not([data-route="home"]) .field-label,
html:not([data-route="home"]) .provider-workspace .field-label { font-weight: 500; font-size: 14px; }
html:not([data-route="home"]) .field-label small,
html:not([data-route="home"]) .provider-workspace .field-label small { font-size: 12px; font-weight: 400; }
html:not([data-route="home"]) .provider-workspace select,
html:not([data-route="home"]) .video-workspace select { font-size: 14px; }
html:not([data-route="home"]) .provider-workspace #prompt,
html:not([data-route="home"]) .video-workspace #video-prompt { font-family: var(--font); font-size: 15px; line-height: 1.9; }
html:not([data-route="home"]) .model-select-row select,
html:not([data-route="home"]) .model-search-toggle,
html:not([data-route="home"]) .provider-workspace .model-search-toggle,
html:not([data-route="home"]) .video-workspace .model-search-toggle {
  height: 48px; min-height: 48px;
}
html:not([data-route="home"])[data-route="create"] .provider-workspace .choice.active,
html:not([data-route="home"])[data-route="video"] .video-workspace .choice.active,
html:not([data-route="home"]) .choice.active,
html:not([data-route="home"]) .filter.active {
  background: var(--selected); color: var(--selected-ink); border-color: var(--ink); font-weight: 500;
}
html:not([data-route="home"])[data-route="create"] .provider-workspace .choice:hover:not(:disabled),
html:not([data-route="home"])[data-route="video"] .video-workspace .choice:hover:not(:disabled) { border-color: var(--ink); }
html:not([data-route="home"])[data-route="create"] .provider-workspace .choice.plan-locked,
html:not([data-route="home"])[data-route="video"] .video-workspace .choice.plan-locked { color: var(--muted); border-color: var(--line); }
html:not([data-route="home"]) .model-search-toggle.active { background: var(--selected); color: var(--ink); border-color: var(--ink); }
html:not([data-route="home"]) .upload-box { border-color: var(--control-border); }
html:not([data-route="home"]) .prompt-tools,
html:not([data-route="home"]) .privacy-note,
html:not([data-route="home"]) .field-hint { letter-spacing: .02em; }
html:not([data-route="home"]) .studio-submit { background: var(--canvas); border-color: var(--line); }
html:not([data-route="home"]) .submit-summary strong { font-family: var(--font-display); font-weight: 400; }
html:not([data-route="home"]) .output-head { border-color: var(--line); }
html:not([data-route="home"]) .output-head h2 { font-family: var(--font); font-size: 15px; font-weight: 500; letter-spacing: .06em; }
html:not([data-route="home"]) .empty-state h3 { font-family: var(--font-display); font-size: 23px; font-weight: 400; }
html:not([data-route="home"]) .empty-state p { max-width: 48ch; font-size: 13px; line-height: 1.9; }
html:not([data-route="home"]) .empty-orbit { background: transparent; border-color: var(--line); box-shadow: none; }
html:not([data-route="home"]) .empty-orbit::before,
html:not([data-route="home"]) .empty-orbit::after { border-color: var(--line); }
html:not([data-route="home"]) .creative-ideas { background: transparent; border-color: var(--line); }
html:not([data-route="home"]) .creative-ideas .chip { background: transparent; font-size: 12px; }
html:not([data-route="home"]) .result-meta,
html:not([data-route="home"]) .video-result-card .result-meta { background: var(--surface); }
html:not([data-route="home"]) .result-image-button,
html:not([data-route="home"]) .image-viewer>img { border-radius: 0; }
html:not([data-route="home"]) .result-number { border-radius: 0; font-variant-numeric: tabular-nums; }
html:not([data-route="home"]) .rain-controls,
html:not([data-route="home"])[data-route="video"] .rain-controls { border-color: var(--line); background: var(--glass-control); }
html:not([data-route="home"]) .rain-controls .rain-toggle[aria-pressed="true"],
html:not([data-route="home"])[data-route="video"] .rain-controls .rain-toggle[aria-pressed="true"] { color: var(--ink); background: var(--selected); }
html:not([data-route="home"]) .rain-speed { color: var(--ink); }
/* Images remain in their original ratios and keep their original colors. */
html:not([data-route="home"]) .task-card { border: 1px solid var(--line); background: var(--surface); }
html:not([data-route="home"]) .task-frame { background: var(--surface); border-color: var(--line); }
html:not([data-route="home"]) .task-carousel-footer { background: var(--surface); border-color: var(--line); }
html:not([data-route="home"]) .task-carousel-footer strong,
html:not([data-route="home"]) .art-meta h3 { font-family: var(--font-display); font-weight: 400; }
html:not([data-route="home"]) .task-carousel-footer { font-size: 12px; }
html:not([data-route="home"]) .carousel-control { border-color: rgb(247 245 241 / 50%); background: rgb(20 18 16 / 70%); }
html:not([data-route="home"]) .gallery-toolbar { border-color: var(--line); }
html:not([data-route="home"]) .hero { background: var(--surface-subtle); border: 1px solid var(--line); border-radius: 0; box-shadow: none; }
html:not([data-route="home"]) .hero h1 { font-family: var(--font-display); font-weight: 400; }
html:not([data-route="home"]) .hero-copy p { line-height: 1.9; }
html:not([data-route="home"]) .art-button { border: 1px solid var(--line); }
html:not([data-route="home"]) .art-overlay { background: rgb(20 18 16 / 72%); }
/* Pricing: quiet tables, editorial numerals, clear selection and status. */
html:not([data-route="home"]) .pricing-header { padding-block: 20px 34px; border-bottom: 1px solid var(--line); }
html:not([data-route="home"]) .pricing-header h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 2.8vw, 42px); }
html:not([data-route="home"]) .pricing-kicker { font-size: 10px; font-weight: 400; letter-spacing: .24em; color: var(--focus); }
html:not([data-route="home"]) .pricing-section { margin-top: 36px; }
html:not([data-route="home"]) .pricing-section-title h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; }
html:not([data-route="home"]) .retail-pack { background: var(--surface); padding: 28px; }
html:not([data-route="home"]) .retail-pack.is-recommended { border-color: var(--ink); background: var(--surface); }
html:not([data-route="home"]) .retail-pack.is-current-plan { border-color: var(--focus); outline: 1px solid var(--focus); outline-offset: -1px; }
html:not([data-route="home"]) .pack-heading h3 { font-family: var(--font-display); font-weight: 400; font-size: 25px; }
html:not([data-route="home"]) .pack-price strong { font-family: var(--font-display); font-weight: 400; font-size: 46px; font-variant-numeric: lining-nums; }
html:not([data-route="home"]) .model-rate-heading { padding-block: 26px; }
html:not([data-route="home"]) .model-rate-title h3 { font-family: var(--font-display); font-size: 25px; font-weight: 400; }
html:not([data-route="home"]) .model-rate-table td strong { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
html:not([data-route="home"]) .model-rate-table thead { background: var(--surface-subtle); }
html:not([data-route="home"]) .model-rate-table tbody tr:hover { background: var(--surface-subtle); }
html:not([data-route="home"]) .calculator-result { border: 1px solid var(--line); background: var(--surface-subtle); }
html:not([data-route="home"]) .calculator-result h3 { font-family: var(--font-display); font-weight: 400; }
html:not([data-route="home"]) dialog { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
html:not([data-route="home"]) .dialog-head { border-color: var(--line); }
html:not([data-route="home"]) .dialog-head h2 { font-family: var(--font-display); font-weight: 400; }
html:not([data-route="home"]) #toast { border-radius: 0; box-shadow: none; border: 1px solid var(--line); background: var(--ink); color: var(--canvas); }
@media (max-width: 1100px) {
  html:not([data-route="home"]) .retail-pack { padding: 24px 20px; }
}
@media (max-width: 760px) {
  html:not([data-route="home"]) h1 { font-size: 30px; }
  html:not([data-route="home"]) .page-header { margin-bottom: 22px; }
  html:not([data-route="home"]) .pricing-header h1 { font-size: 30px; }
}
@media (max-width: 520px) {
  html:not([data-route="home"]) .field-label,
  html:not([data-route="home"]) .provider-workspace .field-label { font-size: 14px; }
  html:not([data-route="home"]) .provider-workspace #prompt,
  html:not([data-route="home"]) .video-workspace #video-prompt { font-size: 15px; }
  html:not([data-route="home"]) .empty-state h3 { font-size: 21px; }
  html:not([data-route="home"]) .retail-pack { padding: 24px; }
}

/* Homepage / Luxe Lookbook collection. Scoped to the sections below the video.
   Keep the opening stage, its layering, and its scroll lifecycle independent. */
html[data-route="home"] body {
  background: #f7f5f1;
  color: #141210;
}
html[data-route="home"][data-theme="dark"] body {
  background: #171614;
  color: #f7f5f1;
}
html[data-route="home"] :is(.landing-signal, .landing-section, .landing-final, .landing-footer, footer.fineprint) {
  --landing-canvas: #f7f5f1;
  --landing-ink: #141210;
  --landing-muted: #6b6259;
  --landing-line: #d6d0c7;
  --landing-accent: #9a7b4f;
  --lookbook-paper: #fcfbf8;
  --lookbook-display: "YJ Playfair", "YJ Noto Serif", "Songti SC", SimSun, serif;
  --lookbook-body: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--landing-ink);
  background: var(--landing-canvas);
  font-family: var(--lookbook-body);
  border-color: var(--landing-line);
  border-radius: 0;
  box-shadow: none;
}
html[data-route="home"][data-theme="dark"] :is(.landing-signal, .landing-section, .landing-final, .landing-footer, footer.fineprint) {
  --landing-canvas: #171614;
  --landing-ink: #f7f5f1;
  --landing-muted: #b9afa3;
  --landing-line: #45403a;
  --landing-accent: #b99b70;
  --lookbook-paper: #1e1c19;
}
html[data-route="home"] :is(.landing-section, .landing-final) {
  max-width: none;
  margin: 0 -5vw;
  padding: clamp(88px, 8vw, 140px) 5vw;
  border-top: 1px solid var(--landing-line);
}
html[data-route="home"] .landing-section :is(.section-heading, .landing-works-grid, .collection-note, .prompt-showcase-heading, .story-panel, .filmstrip-heading) {
  max-width: 1440px;
  margin-inline: auto;
}
html[data-route="home"] .landing-section :is(h2, h3),
html[data-route="home"] .landing-final h2 {
  font-family: var(--lookbook-display);
  color: var(--landing-ink);
  font-weight: 400;
  letter-spacing: -.035em;
  text-wrap: balance;
}
html[data-route="home"] .landing-section h2 {
  font-size: clamp(38px, 4.2vw, 68px);
  line-height: 1.3;
}
html[data-route="home"] :is(.landing-section, .landing-final) h2 em {
  color: inherit;
  font-weight: 400;
  font-style: italic;
}
html[data-route="home"] :is(.landing-section, .landing-final) .eyebrow {
  color: var(--landing-muted);
  font-family: var(--lookbook-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .25em;
  line-height: 1.8;
}
html[data-route="home"] :is(.landing-section, .landing-final) :where(button, a):focus-visible {
  outline: 2px solid var(--landing-accent);
  outline-offset: 4px;
}
html[data-route="home"] :is(.landing-section, .landing-final) .landing-text-link {
  color: var(--landing-ink);
  font-family: var(--lookbook-body);
  font-size: 14px;
}
html[data-route="home"] :is(.landing-section, .landing-final) .landing-text-link:hover { color: var(--landing-muted); }
html[data-route="home"] .landing-signal {
  max-width: none;
  margin: 0 -5vw;
  padding: 32px 5vw;
  color: var(--landing-muted);
  font-size: 13px;
  line-height: 1.6;
}
html[data-route="home"] .landing-signal .signal-genres { font-size: 10px; letter-spacing: .22em; }
html[data-route="home"] .landing-signal .signal-genres i { color: var(--landing-muted); font-size: 13px; animation: none; }
html[data-route="home"] .landing-signal {
  min-height: 72px;
  align-items: center;
  border-top: 1px solid var(--landing-line);
  border-bottom: 1px solid var(--landing-line);
  letter-spacing: .015em;
}
html[data-route="home"] .landing-signal > span { font-family: var(--lookbook-display); font-size: 16px; }
/* The first editorial rail is prepared during the film reveal so the next page
   feels like a sheet being opened instead of a block arriving from below. */
html[data-route="home"] .landing-signal {
  clip-path: inset(0 calc((1 - var(--cinema-next-reveal, 1)) * 105%) 0 0);
  opacity: calc(.72 + var(--cinema-next-reveal, 1) * .28);
  transform: translate3d(0, calc((1 - var(--cinema-next-reveal, 1)) * 18px), 0);
  will-change: transform, opacity, clip-path;
}
/* An open magazine layout, with natural image ratios and no overlapping cards. */
html[data-route="home"] .landing-section--works .section-heading {
  grid-template-columns: minmax(0, .55fr) minmax(0, 1.5fr) minmax(0, .85fr);
  align-items: end;
  gap: 42px;
  margin-bottom: clamp(52px, 6vw, 90px);
}
html[data-route="home"] .landing-section--works .section-heading > .eyebrow { align-self: start; }
html[data-route="home"] .landing-section--works .section-heading p { max-width: 34ch; font-size: 14px; line-height: 1.9; color: var(--landing-muted); }
html[data-route="home"] .landing-section--works .landing-works-grid { column-gap: clamp(28px, 4vw, 60px); padding: 0; }
html[data-route="home"] .landing-section--works .collection-card {
  margin: 0 0 clamp(56px, 6vw, 90px);
  transform: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html[data-route="home"] .landing-section--works .collection-card:hover { transform: none; }
html[data-route="home"] .landing-section--works .collection-image { background: var(--lookbook-paper); border-radius: 0; box-shadow: none; }
html[data-route="home"] .landing-section--works .collection-image img { aspect-ratio: auto; height: auto; transition: transform 1s cubic-bezier(.22,.61,.36,1); }
html[data-route="home"] .landing-section--works .collection-card:hover img { transform: scale(1.035); }
html[data-route="home"] .landing-section--works .collection-tag {
  padding: 8px 10px;
  border-radius: 0;
  background: rgb(20 18 16 / 68%);
  color: #f7f5f1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: var(--lookbook-body);
  font-size: 9px;
  letter-spacing: .2em;
}
html[data-route="home"] .landing-section--works .collection-caption { display: block; margin-top: 22px; }
html[data-route="home"] .landing-section--works .collection-caption h3 { font-size: clamp(22px, 2vw, 29px); line-height: 1.5; }
html[data-route="home"] .landing-section--works .collection-caption > span { display: block; margin-top: 6px; color: var(--landing-muted); font-size: 12px; }
html[data-route="home"] .landing-section--works .collection-card > p { margin-top: 9px; color: var(--landing-muted); font-size: 13px; line-height: 1.8; }
html[data-route="home"] .landing-section--works .collection-note { border-color: var(--landing-line); padding-top: 28px; color: var(--landing-muted); }
/* Prompt and image read as a single editorial spread. */
html[data-route="home"] .prompt-showcase .prompt-showcase-heading { gap: 48px; margin-bottom: 64px; }
html[data-route="home"] .prompt-showcase .prompt-showcase-heading h2 { max-width: 15ch; }
html[data-route="home"] .prompt-showcase .story-tabs { flex-basis: 300px; padding: 0; border: 0; border-bottom: 1px solid var(--landing-line); border-radius: 0; }
html[data-route="home"] .prompt-showcase .story-tab-indicator {
  left: 0;
  top: auto;
  bottom: -1px;
  height: 2px;
  width: calc(100% / 3);
  border-radius: 0;
  background: var(--landing-ink);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
html[data-route="home"] .prompt-showcase .story-tabs button { min-height: 48px; padding: 12px; font-family: var(--lookbook-body); font-size: 14px; border-radius: 0; color: var(--landing-muted); }
html[data-route="home"] .prompt-showcase .story-tabs button[aria-selected="true"] { color: var(--landing-ink); font-weight: 500; }
html[data-route="home"] .prompt-showcase .story-tabs button:hover { color: var(--landing-ink); }
html[data-route="home"] .prompt-showcase .story-panel { grid-template-columns: minmax(0, .72fr) minmax(0, 1.5fr); gap: 8%; }
html[data-route="home"] .prompt-showcase .story-copy { padding: 0; }
html[data-route="home"] .prompt-showcase .story-kicker { color: var(--landing-muted); font-family: var(--lookbook-body); font-size: 11px; letter-spacing: .16em; }
html[data-route="home"] .prompt-showcase .story-copy blockquote { font-family: var(--lookbook-display); font-size: clamp(26px, 2.8vw, 42px); line-height: 1.65; letter-spacing: -.025em; }
html[data-route="home"] .prompt-showcase .story-prompt-note { font-family: var(--lookbook-body); color: var(--landing-muted); }
html[data-route="home"] .prompt-showcase .story-copy .story-use { margin-top: 40px; color: var(--landing-ink); font-family: var(--lookbook-body); }
html[data-route="home"] .prompt-showcase .story-image-stage { border: 0; border-radius: 0; background: var(--lookbook-paper); box-shadow: none; }
html[data-route="home"] .prompt-showcase .story-paper { background: var(--lookbook-paper); background-size: auto; color: var(--landing-muted); font-family: var(--lookbook-display); }
html[data-route="home"] .prompt-showcase .story-paper i { color: var(--landing-muted); }
html[data-route="home"] .prompt-showcase .story-reveal-edge { width: 1px; background: var(--landing-accent); box-shadow: none; }
html[data-route="home"] .prompt-showcase .story-image-caption { margin-top: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--landing-line); }
html[data-route="home"] .prompt-showcase .story-image-caption strong { font-family: var(--lookbook-display); font-weight: 400; font-size: 24px; }
html[data-route="home"] .prompt-showcase .story-image-caption > span { color: var(--landing-muted); font-size: 11px; }
/* The moving frames retain their controls, timing, and artwork proportions. */
html[data-route="home"] .landing-filmstrip .filmstrip-heading { margin-bottom: 58px; }
html[data-route="home"] .landing-filmstrip .filmstrip-tools { color: var(--landing-muted); font-size: 13px; }
html[data-route="home"] .landing-filmstrip .filmstrip-group { gap: 48px; padding-right: 48px; }
html[data-route="home"] .landing-filmstrip .film-card { --frame-height: clamp(400px, 36vw, 540px); background: var(--lookbook-paper); border: 1px solid var(--landing-line); border-radius: 0; box-shadow: none; }
html[data-route="home"] .landing-filmstrip .film-card-image { border-radius: 0; background: var(--landing-line); }
html[data-route="home"] .landing-filmstrip .film-card img { transition: transform 1s cubic-bezier(.22,.61,.36,1); }
html[data-route="home"] .landing-filmstrip .film-card-caption { padding-top: 24px; padding-bottom: 24px; }
html[data-route="home"] .landing-filmstrip .film-card-caption strong { font-family: var(--lookbook-display); font-weight: 400; font-size: 26px; }
html[data-route="home"] .landing-filmstrip .film-card-caption small { color: var(--landing-muted); font-family: var(--lookbook-body); font-size: 10px; letter-spacing: .2em; }
html[data-route="home"] .landing-filmstrip .film-card-open { border-radius: 0; border: 0; }
html[data-route="home"] .landing-filmstrip .filmstrip-step { border-radius: 0; border-color: var(--landing-line); background: var(--landing-canvas); color: var(--landing-ink); box-shadow: none; }
html[data-route="home"] .landing-filmstrip .filmstrip-step:hover { background: var(--landing-ink); color: var(--landing-canvas); box-shadow: none; }
/* A quiet closing page, with one clear invitation. */
html[data-route="home"] .landing-final { padding-block: clamp(112px, 12vw, 190px); }
html[data-route="home"] .landing-final > .eyebrow { color: var(--landing-accent); }
html[data-route="home"] .landing-final h2 { max-width: 1200px; font-size: clamp(48px, 6.5vw, 104px); line-height: 1.2; margin-top: 36px; margin-bottom: 48px; }
html[data-route="home"] .landing-final .landing-cta { min-height: 54px; padding: 16px 24px; border: 1px solid var(--landing-ink); border-radius: 0 !important; background: var(--landing-ink); color: var(--landing-canvas); box-shadow: none; transform: none; font-family: var(--lookbook-body); font-weight: 400; }
html[data-route="home"] .landing-final .landing-cta:hover { color: var(--landing-canvas); background: color-mix(in srgb, var(--landing-ink) 86%, var(--landing-canvas)); border-color: var(--landing-ink); transform: none; }
html[data-route="home"] :is(.landing-footer, footer.fineprint) { max-width: none; margin: 0 -5vw; padding: 30px 5vw 36px; border-top: 1px solid var(--landing-line); gap: 24px; font-size: 12px; line-height: 1.8; }
html[data-route="home"] :is(.landing-footer, footer.fineprint) a { color: var(--landing-ink); text-decoration-color: var(--landing-line); text-underline-offset: 4px; }
@media (max-width: 1100px) {
  html[data-route="home"] .landing-section--works .section-heading { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; }
  html[data-route="home"] .landing-section--works .section-heading > .eyebrow { grid-column: 1 / -1; }
  html[data-route="home"] .landing-section--works .section-heading p { grid-column: auto; }
  html[data-route="home"] .prompt-showcase .prompt-showcase-heading { gap: 28px; }
  html[data-route="home"] .prompt-showcase .story-tabs { flex-basis: 250px; }
}
@media (max-width: 760px) {
  html[data-route="home"] :is(.landing-section, .landing-final) { padding: 72px 5vw; }
  html[data-route="home"] .landing-signal { padding: 24px 5vw; gap: 18px; font-size: 12px; }
  html[data-route="home"] .landing-section h2 { font-size: clamp(32px, 7vw, 44px); }
  html[data-route="home"] .landing-section--works .section-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 42px; }
  html[data-route="home"] .landing-section--works .section-heading p { max-width: 42ch; }
  html[data-route="home"] .landing-section--works .landing-works-grid { column-gap: 24px; }
  html[data-route="home"] .landing-section--works .collection-card { margin-bottom: 48px; }
  html[data-route="home"] .landing-section--works .collection-caption { margin-top: 16px; }
  html[data-route="home"] .landing-section--works .collection-caption h3 { font-size: 23px; }
  html[data-route="home"] .prompt-showcase .prompt-showcase-heading { display: block; margin-bottom: 36px; }
  html[data-route="home"] .prompt-showcase .story-tabs { margin-top: 28px; width: min(100%, 330px); }
  html[data-route="home"] .prompt-showcase .story-panel { grid-template-columns: 1fr; gap: 32px; }
  html[data-route="home"] .prompt-showcase .story-copy blockquote { font-size: 26px; margin-block: 18px 12px; }
  html[data-route="home"] .prompt-showcase .story-copy .story-use { margin-top: 18px; }
  html[data-route="home"] .prompt-showcase .story-image-caption { align-items: start; flex-direction: column; gap: 8px; }
  html[data-route="home"] .landing-filmstrip .filmstrip-heading { margin-bottom: 36px; }
  html[data-route="home"] .landing-filmstrip .filmstrip-group { gap: 24px; padding-right: 24px; }
  html[data-route="home"] .landing-filmstrip .film-card { --frame-height: 340px; }
  html[data-route="home"] .landing-filmstrip .film-card-caption strong { font-size: 23px; }
  html[data-route="home"] .landing-final h2 { font-size: clamp(40px, 9vw, 68px); margin-block: 28px 36px; }
  html[data-route="home"] :is(.landing-footer, footer.fineprint) { flex-direction: column; gap: 12px; padding-block: 24px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-route="home"] .landing-section :is(.collection-image img, .film-card img, .story-tab-indicator) { transition: none; }
  html[data-route="home"] .landing-section--works .collection-card:hover img { transform: none; }
}

/* The first chapter hands off to the paper surface as a drawn editorial rail.
   Keep this layer transparent over the last video frame; its paper tint is a gradient,
   so the page never arrives as a rectangular sheet. */
html[data-route="home"] main.landing-cinematic > .landing-signal {
  position: relative;
  z-index: 3;
  isolation: isolate;
  overflow: hidden;
  margin: -96px -5vw 0;
  padding: 116px 5vw 34px;
  min-height: 156px;
  border-top: 0;
  border-bottom: 1px solid var(--landing-line);
  background: transparent;
  clip-path: none;
  opacity: 1;
  transform: none;
  will-change: auto;
}
html[data-route="home"] main.landing-cinematic > .landing-signal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--landing-canvas) 24%, transparent) 26%, var(--landing-canvas) 100%);
  opacity: var(--signal-enter, 0);
  pointer-events: none;
  will-change: opacity;
}
html[data-route="home"] main.landing-cinematic > .landing-signal::after {
  top: 96px;
  right: 5vw;
  left: 5vw;
  height: 1px;
  background: var(--landing-accent);
  transform: scaleX(var(--signal-enter, 0));
  transform-origin: left center;
  opacity: calc(.2 + var(--signal-enter, 0) * .8);
}
html[data-route="home"] main.landing-cinematic > .landing-signal > span,
html[data-route="home"] main.landing-cinematic > .landing-signal .signal-genres {
  opacity: calc(.12 + var(--signal-enter, 0) * .88);
  transform: translate3d(0, calc((1 - var(--signal-enter, 0)) * 12px), 0);
  will-change: transform, opacity;
}
@media (max-width: 760px) {
  html[data-route="home"] main.landing-cinematic > .landing-signal {
    margin-top: -64px;
    padding: 84px 5vw 26px;
    min-height: 126px;
  }
  html[data-route="home"] main.landing-cinematic > .landing-signal::after { top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-route="home"] main.landing-cinematic > .landing-signal::before { opacity: 1; }
  html[data-route="home"] main.landing-cinematic > .landing-signal::after { transform: none; opacity: 1; }
  html[data-route="home"] main.landing-cinematic > .landing-signal > span,
  html[data-route="home"] main.landing-cinematic > .landing-signal .signal-genres { transform: none; opacity: 1; }
}


/* Home cinematic handoff v2: an editorial crossfade, never a page-sized lift. */
html[data-route="home"] .landing-cinematic {
  --cinema-paper: #f7f5f1;
  --cinema-ink: #171513;
  --cinema-gold: #9a7b4f;
  background: var(--landing-canvas);
}
html[data-route="home"][data-theme="dark"] .landing-cinematic {
  --cinema-paper: #171614;
  --cinema-ink: #f7f5f1;
  --cinema-gold: #b99b70;
}
html[data-route="home"] .cinema-opening-stack {
  height: 228svh;
  background: #171513;
}
html[data-route="home"] .cinema-stage {
  background: #171513;
}
html[data-route="home"] .cinema-intro {
  opacity: calc(1 - var(--cinema-exit, 0) * .14) !important;
  transition: opacity 220ms linear;
}
html[data-route="home"] .cinema-intro::after {
  background: linear-gradient(to bottom, transparent 58%, rgb(20 18 16 / .62) 100%) !important;
  opacity: calc(var(--cinema-exit, 0) * .18) !important;
}
html[data-route="home"] .cinema-hero {
  opacity: calc(1 - var(--cinema-exit, 0) * .08) !important;
}
html[data-route="home"] .cinema-screen {
  opacity: calc(.025 + var(--cinema-reveal, 0) * .055) !important;
}
html[data-route="home"] .cinema-shade { opacity: .09; }
html[data-route="home"] .cinema-nav {
  min-height: 58px;
  padding-bottom: 18px;
  border-bottom-color: transparent;
}
html[data-route="home"] .cinema-nav::after {
  background: rgb(247 245 241 / .34);
}
html[data-route="home"] .cinema-wordmark > span {
  font-family: var(--cinema-display);
  font-size: 24px;
  letter-spacing: .16em;
}
html[data-route="home"] .cinema-wordmark > small {
  font-size: 9px;
  letter-spacing: .23em;
}
html[data-route="home"] .cinema-nav nav { gap: clamp(20px, 2.8vw, 44px); }
html[data-route="home"] .cinema-nav nav a {
  font-size: 10px;
  letter-spacing: .12em;
}
html[data-route="home"] .cinema-nav nav a::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 6px;
  background: var(--cinema-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1);
}
html[data-route="home"] .cinema-nav nav a:hover::after,
html[data-route="home"] .cinema-nav nav a:focus-visible::after { transform: scaleX(1); }
html[data-route="home"] .cinema-copy h1 {
  font-family: var(--cinema-display);
  font-size: clamp(66px, 8.4vw, 132px);
  line-height: .98;
  letter-spacing: -.065em;
  text-shadow: 0 9px 38px rgb(14 12 10 / .18);
}
html[data-route="home"] .cinema-copy .cinema-kicker {
  font-size: 10px;
  letter-spacing: .3em;
}
html[data-route="home"] .cinema-copy .cinema-subtitle {
  max-width: 34ch;
  font-size: 14px;
  letter-spacing: .02em;
}
html[data-route="home"] .cinema-transition {
  right: clamp(24px, 6vw, 100px);
  bottom: clamp(42px, 7vh, 74px);
  left: clamp(24px, 6vw, 100px);
  min-height: 40px;
  padding-top: 14px;
  border-top: 1px solid rgb(247 245 241 / .35);
  opacity: calc(var(--cinema-transition-reveal, 0) * .94) !important;
  clip-path: inset(0 calc((1 - var(--cinema-transition-reveal, 0)) * 106%) 0 0) !important;
  transform: translate3d(calc((1 - var(--cinema-transition-reveal, 0)) * -22px), 0, 0) !important;
}
html[data-route="home"] .cinema-transition::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(70px, 12vw, 180px);
  height: 1px;
  background: var(--cinema-gold);
  transform: scaleX(var(--cinema-transition-reveal, 0));
  transform-origin: left center;
}
html[data-route="home"] .cinema-transition strong {
  font-family: var(--cinema-display);
  font-size: clamp(20px, 2.35vw, 32px);
  letter-spacing: -.035em;
}
html[data-route="home"] .cinema-transition-index,
html[data-route="home"] .cinema-transition-arrow { color: var(--cinema-gold); }

/* The handoff is a compact editorial index. It owns the paper only after the film ends. */
html[data-route="home"] main.landing-cinematic > .landing-signal {
  position: relative;
  z-index: 3;
  margin: 0 -5vw !important;
  padding: 25px 5vw 27px !important;
  min-height: 0 !important;
  border-top: 1px solid var(--landing-line) !important;
  border-bottom: 1px solid var(--landing-line) !important;
  background: var(--landing-canvas) !important;
  box-shadow: none !important;
  clip-path: none !important;
  opacity: 1 !important;
  transform: none !important;
  overflow: visible;
}
html[data-route="home"] main.landing-cinematic > .landing-signal::before { display: none !important; }
html[data-route="home"] main.landing-cinematic > .landing-signal::after {
  top: -1px !important;
  right: 5vw !important;
  left: 5vw !important;
  height: 1px !important;
  background: var(--landing-accent) !important;
  transform: none !important;
  opacity: .72 !important;
}
html[data-route="home"] main.landing-cinematic > .landing-signal > span,
html[data-route="home"] main.landing-cinematic > .landing-signal .signal-genres {
  opacity: 1 !important;
  transform: none !important;
}
html[data-route="home"] main.landing-cinematic > .landing-signal > span {
  font-family: var(--lookbook-display);
  font-size: 18px;
  letter-spacing: -.02em;
}
html[data-route="home"] main.landing-cinematic > .landing-signal .signal-genres {
  color: var(--landing-muted);
  letter-spacing: .26em;
}

/* Lookbook hierarchy: image first, copy quiet, one matte-gold accent. */
html[data-route="home"] .landing-section--works .section-heading h2,
html[data-route="home"] .prompt-showcase-heading h2,
html[data-route="home"] .landing-final h2 {
  font-family: var(--lookbook-display) !important;
  font-weight: 400 !important;
  letter-spacing: -.045em;
}
html[data-route="home"] .landing-section--works {
  padding-top: clamp(118px, 12vw, 190px) !important;
  background: var(--landing-canvas);
}
html[data-route="home"] .landing-section--works .section-heading { margin-bottom: clamp(58px, 7vw, 96px); }
html[data-route="home"] .landing-section--works .section-heading p {
  max-width: 28ch;
  color: var(--landing-muted);
}
html[data-route="home"] .landing-section--works .collection-caption h3 {
  font-family: var(--lookbook-display);
  font-weight: 400;
  letter-spacing: -.025em;
}
html[data-route="home"] .landing-section--works .collection-card > p { color: var(--landing-muted); }
html[data-route="home"] .landing-editorial::before { opacity: .08; }

@media (max-width: 760px) {
  html[data-route="home"] .cinema-opening-stack { height: 210svh; }
  html[data-route="home"] .cinema-nav nav { gap: 15px; }
  html[data-route="home"] .cinema-nav nav a { font-size: 9px; letter-spacing: .05em; }
  html[data-route="home"] .cinema-copy h1 { font-size: clamp(54px, 16vw, 82px); }
  html[data-route="home"] .cinema-transition { bottom: 42px; }
  html[data-route="home"] main.landing-cinematic > .landing-signal {
    padding: 22px 5vw 24px !important;
  }
  html[data-route="home"] main.landing-cinematic > .landing-signal > span { font-size: 16px; }
  html[data-route="home"] main.landing-cinematic > .landing-signal .signal-genres {
    font-size: 9px;
    letter-spacing: .16em;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-route="home"] .cinema-intro,
  html[data-route="home"] .cinema-hero { transition: none; }
  html[data-route="home"] .cinema-nav nav a::after { transition: none; }
  html[data-route="home"] .cinema-transition {
    clip-path: none !important;
    transform: none !important;
  }
}

/* Homepage cinematic handoff v2: one continuous lookbook surface. */
html[data-route="home"] .landing-cinematic {
  --cinema-paper: #f7f5f1;
  --cinema-ink: #141210;
  --cinema-gold: #b99b70;
  --cinema-line: rgb(247 245 241 / 34%);
  --cinema-soft-line: rgb(247 245 241 / 20%);
}
html[data-route="home"] .landing-cinematic .cinema-stage {
  perspective: none;
  background: #141210;
}
/* The film remains the image. The handoff never paints a white veil over it. */
html[data-route="home"] .landing-cinematic .cinema-intro::after,
html[data-route="home"] .landing-cinematic .cinema-intro::before {
  display: none !important;
}
html[data-route="home"] .landing-cinematic .cinema-screen {
  opacity: .035 !important;
}
html[data-route="home"] .landing-cinematic .cinema-shade {
  opacity: .04 !important;
}
html[data-route="home"] .landing-cinematic .cinema-film {
  opacity: .003 !important;
}
html[data-route="home"] .landing-cinematic .cinema-hero,
html[data-route="home"] .landing-cinematic .cinema-intro {
  opacity: 1 !important;
}
/* Keep the stage fixed; only its editorial marks are allowed to draw. */
html[data-route="home"] .landing-cinematic .cinema-nav,
html[data-route="home"] .landing-cinematic .cinema-copy,
html[data-route="home"] .landing-cinematic .cinema-rail {
  transform: none !important;
}
html[data-route="home"] .landing-cinematic .cinema-nav::after {
  background: var(--cinema-soft-line);
  transform: scaleX(var(--cinema-nav-reveal, 0));
  transform-origin: left center;
}
html[data-route="home"] .landing-cinematic .cinema-wordmark,
html[data-route="home"] .landing-cinematic .cinema-nav nav,
html[data-route="home"] .landing-cinematic .cinema-nav-tools {
  filter: blur(calc((1 - var(--cinema-nav-reveal, 0)) * 1.8px));
  transition: filter 80ms linear;
}
html[data-route="home"] .landing-cinematic .cinema-wordmark > span {
  color: var(--cinema-white);
  font-family: var(--cinema-display);
  font-size: clamp(22px, 1.8vw, 28px);
  letter-spacing: .16em;
}
html[data-route="home"] .landing-cinematic .cinema-wordmark > small,
html[data-route="home"] .landing-cinematic .cinema-nav nav,
html[data-route="home"] .landing-cinematic .cinema-nav-tools {
  font-family: var(--cinema-sans);
}
html[data-route="home"] .landing-cinematic .cinema-nav nav a {
  opacity: calc(var(--cinema-nav-link-reveal, 0) * .92);
  transform: translate3d(0, calc((1 - var(--cinema-nav-link-reveal, 0)) * 5px), 0);
}
/* Text is drawn from two separate crop windows, like a printed spread opening. */
html[data-route="home"] .landing-cinematic .cinema-copy h1 {
  font-size: clamp(56px, 7.15vw, 112px) !important;
  line-height: 1.02;
  letter-spacing: -.055em;
}
html[data-route="home"] .landing-cinematic .cinema-copy h1 > .cinema-title-line:first-child > span {
  transform: translate3d(calc((1 - var(--cinema-line-reveal, 0)) * -7px), calc((1 - var(--cinema-line-reveal, 0)) * 17px), 0) rotate(calc((1 - var(--cinema-line-reveal, 0)) * -.45deg)) !important;
  clip-path: inset(calc((1 - var(--cinema-line-reveal, 0)) * 108%) 0 0 0) !important;
}
html[data-route="home"] .landing-cinematic .cinema-copy h1 > em.cinema-title-line > span {
  transform: translate3d(calc((1 - var(--cinema-line-reveal, 0)) * 8px), calc((1 - var(--cinema-line-reveal, 0)) * -13px), 0) rotate(calc((1 - var(--cinema-line-reveal, 0)) * .35deg)) !important;
  clip-path: inset(0 0 calc((1 - var(--cinema-line-reveal, 0)) * 108%) 0) !important;
}
html[data-route="home"] .landing-cinematic .cinema-copy h1 > .cinema-title-line > span {
  filter: blur(var(--cinema-line-blur, 0px));
  text-shadow: 0 1px 18px rgb(15 12 10 / calc((1 - var(--cinema-line-reveal, 0)) * .09));
}
html[data-route="home"] .landing-cinematic .cinema-copy .cinema-kicker {
  color: var(--cinema-gold);
  transform: translate3d(0, calc((1 - var(--cinema-kicker-reveal, 0)) * 6px), 0);
}
html[data-route="home"] .landing-cinematic .cinema-copy .cinema-subtitle {
  transform: translate3d(0, calc((1 - var(--cinema-subtitle-reveal, 0)) * 5px), 0);
  filter: blur(var(--cinema-subtitle-blur, 0px));
}
html[data-route="home"] .landing-cinematic .cinema-actions > a {
  transform: none;
}
html[data-route="home"] .landing-cinematic .cinema-actions > .cinema-cta {
  border-color: rgb(247 245 241 / 66%);
  background: rgb(20 18 16 / 22%);
  box-shadow: inset 0 -2px 0 var(--cinema-gold);
}
html[data-route="home"] .landing-cinematic .cinema-actions > .cinema-link {
  border-bottom-color: var(--cinema-soft-line);
}
html[data-route="home"] .landing-cinematic .cinema-transition {
  background: transparent !important;
  border-top-color: var(--cinema-soft-line);
  clip-path: inset(0 calc((1 - var(--cinema-transition-reveal, 0)) * 108%) 0 0);
  transform: translate3d(0, calc((1 - var(--cinema-transition-reveal, 0)) * 8px), 0);
}
html[data-route="home"] .landing-cinematic .cinema-transition strong {
  font-family: var(--cinema-display);
  letter-spacing: -.025em;
}
html[data-route="home"] .landing-cinematic .cinema-transition-arrow {
  color: var(--cinema-gold);
  transform: translateY(calc((1 - var(--cinema-transition-reveal, 0)) * -4px));
}
/* A quiet paper threshold follows the film in normal flow; it no longer slides over it. */
html[data-route="home"] main.landing-cinematic > .landing-signal {
  position: relative;
  z-index: 3;
  isolation: isolate;
  overflow: hidden;
  margin: 0 -5vw;
  padding: 58px 5vw 29px;
  min-height: 132px;
  border-top: 1px solid var(--landing-line);
  border-bottom: 1px solid var(--landing-line);
  background: var(--landing-canvas);
  clip-path: none;
  box-shadow: none;
}
html[data-route="home"] main.landing-cinematic > .landing-signal::before {
  inset: 0;
  z-index: -1;
  background: var(--landing-canvas);
  opacity: 1;
  transform: none;
  filter: none;
}
html[data-route="home"] main.landing-cinematic > .landing-signal::after {
  top: 0;
  right: 5vw;
  left: 5vw;
  background: var(--landing-accent);
  transform: scaleX(var(--signal-enter, 0));
  transform-origin: left center;
  opacity: calc(.2 + var(--signal-enter, 0) * .8);
}
html[data-route="home"] main.landing-cinematic > .landing-signal > span,
html[data-route="home"] main.landing-cinematic > .landing-signal .signal-genres {
  opacity: var(--signal-enter, 0);
  transform: translate3d(0, calc((1 - var(--signal-enter, 0)) * 8px), 0);
  clip-path: inset(0 calc((1 - var(--signal-enter, 0)) * 108%) 0 0);
}
html[data-route="home"] main.landing-cinematic > .landing-signal > span {
  color: var(--landing-ink);
  font-family: var(--cinema-display);
  font-size: clamp(17px, 1.55vw, 22px);
  letter-spacing: -.02em;
}
html[data-route="home"] main.landing-cinematic > .landing-signal .signal-genres {
  color: var(--landing-muted);
  font-family: var(--cinema-sans);
}
@media (max-width: 760px) {
  html[data-route="home"] main.landing-cinematic > .landing-signal {
    margin: 0 -5vw;
    padding: 46px 5vw 24px;
    min-height: 112px;
  }
  html[data-route="home"] main.landing-cinematic > .landing-signal > span { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-route="home"] .landing-cinematic .cinema-wordmark,
  html[data-route="home"] .landing-cinematic .cinema-nav nav,
  html[data-route="home"] .landing-cinematic .cinema-nav-tools,
  html[data-route="home"] .landing-cinematic .cinema-copy h1 > .cinema-title-line > span,
  html[data-route="home"] .landing-cinematic .cinema-copy .cinema-kicker,
  html[data-route="home"] .landing-cinematic .cinema-copy .cinema-subtitle,
  html[data-route="home"] main.landing-cinematic > .landing-signal > span,
  html[data-route="home"] main.landing-cinematic > .landing-signal .signal-genres {
    filter: none !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* Home cinematic handoff v3: the paper is drawn inside the film scene. */
html[data-route="home"] .cinema-opening-stack {
  height: 300svh;
  --cinema-paper-reveal: 0;
  --cinema-transition-handoff: 0;
}
html[data-route="home"] .cinema-intro {
  overflow: hidden;
  isolation: isolate;
  opacity: calc(1 - var(--cinema-exit, 0) * .28);
}
html[data-route="home"] .cinema-intro::before {
  content: '';
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 62%;
  border-top: 1px solid rgb(247 245 241 / .48);
  background: var(--cinema-paper, #f7f5f1);
  clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%);
  opacity: var(--cinema-paper-reveal, 0);
  transform: scaleY(var(--cinema-paper-reveal, 0));
  transform-origin: bottom center;
  will-change: transform, opacity;
  pointer-events: none;
}
html[data-route="home"] .cinema-intro::after {
  z-index: 1;
  background: linear-gradient(to bottom, transparent 55%, rgb(20 18 16 / .16) 100%);
  opacity: calc(var(--cinema-exit, 0) * .48);
}
html[data-route="home"] .cinema-hero { z-index: 3; opacity: calc(1 - var(--cinema-exit, 0) * .14); }
html[data-route="home"] .cinema-transition {
  opacity: var(--cinema-transition-handoff, 0) !important;
  clip-path: inset(0 calc((1 - var(--cinema-transition-handoff, 0)) * 108%) 0 0) !important;
  transform: translate3d(0, calc((1 - var(--cinema-transition-handoff, 0)) * 12px), 0) !important;
}
html[data-route="home"] main.landing-cinematic > .landing-signal {
  min-height: 92px !important;
  margin: 0 -5vw !important;
  padding: 29px 5vw 27px !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--landing-line) !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  opacity: 1 !important;
  transform: none !important;
}
html[data-route="home"] main.landing-cinematic > .landing-signal::before {
  display: none !important;
}
html[data-route="home"] main.landing-cinematic > .landing-signal::after {
  top: 0 !important;
  right: 5vw !important;
  left: 5vw !important;
  height: 1px !important;
  background: var(--landing-accent) !important;
  transform: scaleX(var(--cinema-next-reveal, 0)) !important;
  transform-origin: left center !important;
  opacity: .8 !important;
}
html[data-route="home"] main.landing-cinematic > .landing-signal > span,
html[data-route="home"] main.landing-cinematic > .landing-signal .signal-genres {
  opacity: calc(.15 + var(--cinema-next-reveal, 0) * .85) !important;
  transform: translate3d(0, calc((1 - var(--cinema-next-reveal, 0)) * 8px), 0) !important;
}
html[data-route="home"] .landing-section--works {
  position: relative;
  z-index: 4;
  background: var(--landing-canvas);
}
@media (max-width: 900px) and (min-width: 761px) {
  html[data-route="home"] .cinema-opening-stack { height: 280svh; }
}
@media (max-width: 760px) {
  html[data-route="home"] .cinema-opening-stack { height: 270svh; }
  html[data-route="home"] .cinema-intro::before { height: 68%; }
  html[data-route="home"] main.landing-cinematic > .landing-signal {
    min-height: 82px !important;
    padding: 24px 5vw 23px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-route="home"] .cinema-intro::before {
    opacity: 1;
    transform: none;
  }
  html[data-route="home"] .cinema-transition {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
}

/* Homepage cinematic handoff v3: the cover is one continuous scene. */
html[data-route="home"] .landing-cinematic {
  --cinema-paper: #f7f5f1;
  --cinema-ink: #141210;
  --cinema-gold: #b99b70;
  --cinema-line: rgb(247 245 241 / 30%);
  --cinema-soft-line: rgb(247 245 241 / 18%);
}

/* Keep the film fixed. Editorial marks are drawn in place as the user scrolls. */
html[data-route="home"] .landing-cinematic .cinema-stage {
  background: #141210;
  perspective: none;
}
html[data-route="home"] .landing-cinematic .cinema-intro,
html[data-route="home"] .landing-cinematic .cinema-hero {
  opacity: 1 !important;
}
html[data-route="home"] .landing-cinematic .cinema-intro::before,
html[data-route="home"] .landing-cinematic .cinema-intro::after {
  display: none !important;
}
html[data-route="home"] .landing-cinematic .cinema-screen {
  opacity: .025 !important;
}
html[data-route="home"] .landing-cinematic .cinema-shade {
  opacity: .028 !important;
}
html[data-route="home"] .landing-cinematic .cinema-film {
  opacity: .003 !important;
}
html[data-route="home"] .landing-cinematic .cinema-nav,
html[data-route="home"] .landing-cinematic .cinema-copy,
html[data-route="home"] .landing-cinematic .cinema-rail {
  transform: none !important;
}

/* The frame begins as a hairline and completes only after the title has registered. */
html[data-route="home"] .landing-cinematic .cinema-stage::before {
  top: clamp(100px, 12vh, 142px);
  bottom: clamp(90px, 12vh, 126px);
  left: clamp(24px, 6vw, 100px);
  width: 1px;
  background: var(--cinema-soft-line);
  opacity: calc(var(--cinema-title-reveal, 0) * .9);
  transform: scaleY(var(--cinema-title-reveal, 0));
  transform-origin: top center;
}
html[data-route="home"] .landing-cinematic .cinema-stage::after {
  right: clamp(24px, 6vw, 100px);
  bottom: clamp(68px, 9vh, 96px);
  left: 38%;
  height: 1px;
  background: var(--cinema-soft-line);
  opacity: calc(var(--cinema-rail-reveal, 0) * .9);
  transform: scaleX(var(--cinema-rail-reveal, 0));
  transform-origin: right center;
}

/* Luxe Lookbook navigation: quiet wordmark, measured tracking, one gold rule. */
html[data-route="home"] .landing-cinematic .cinema-nav {
  min-height: 64px;
  padding-bottom: 21px;
  border-bottom: 0;
}
html[data-route="home"] .landing-cinematic .cinema-nav::after {
  height: 1px;
  background: var(--cinema-soft-line);
  transform: scaleX(var(--cinema-nav-reveal, 0));
  transform-origin: left center;
}
html[data-route="home"] .landing-cinematic .cinema-wordmark,
html[data-route="home"] .landing-cinematic .cinema-nav nav,
html[data-route="home"] .landing-cinematic .cinema-nav-tools {
  filter: blur(calc((1 - var(--cinema-nav-reveal, 0)) * .55px));
}
html[data-route="home"] .landing-cinematic .cinema-wordmark > span {
  color: var(--cinema-white);
  font-family: var(--cinema-display);
  font-size: clamp(22px, 1.85vw, 29px);
  letter-spacing: .17em;
  line-height: 1.1;
}
html[data-route="home"] .landing-cinematic .cinema-wordmark > small {
  color: rgb(247 245 241 / 68%);
  font-size: 9px;
  letter-spacing: .22em;
}
html[data-route="home"] .landing-cinematic .cinema-nav nav {
  gap: clamp(19px, 2.8vw, 42px);
}
html[data-route="home"] .landing-cinematic .cinema-nav nav a {
  position: relative;
  padding: 11px 0 9px;
  color: rgb(247 245 241 / 88%);
  font-size: 11px;
  letter-spacing: .08em;
  opacity: calc(var(--cinema-nav-link-reveal, 0) * .94);
  transform: translate3d(0, calc((1 - var(--cinema-nav-link-reveal, 0)) * 4px), 0);
  clip-path: inset(0 0 calc((1 - var(--cinema-nav-link-reveal, 0)) * 100%) 0);
}
html[data-route="home"] .landing-cinematic .cinema-nav nav a::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: var(--cinema-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1);
}
html[data-route="home"] .landing-cinematic .cinema-nav nav a:hover::after,
html[data-route="home"] .landing-cinematic .cinema-nav nav a:focus-visible::after {
  transform: scaleX(1);
}

/* The title registers from two crop windows, with almost no travel. */
html[data-route="home"] .landing-cinematic .cinema-copy {
  width: min(100%, 860px);
  padding-left: clamp(20px, 2.35vw, 36px);
}
html[data-route="home"] .landing-cinematic .cinema-copy h1 {
  font-family: var(--cinema-display);
  font-size: clamp(58px, 7.25vw, 110px) !important;
  line-height: .99;
  letter-spacing: -.06em;
}
html[data-route="home"] .landing-cinematic .cinema-copy h1 > .cinema-title-line {
  overflow: clip;
  perspective: none;
}
html[data-route="home"] .landing-cinematic .cinema-copy h1 > .cinema-title-line:first-child > span {
  transform: translate3d(calc((1 - var(--cinema-line-reveal, 0)) * -8px), calc((1 - var(--cinema-line-reveal, 0)) * 12px), 0) !important;
  clip-path: inset(calc((1 - var(--cinema-line-reveal, 0)) * 104%) 0 0 0) !important;
}
html[data-route="home"] .landing-cinematic .cinema-copy h1 > em.cinema-title-line > span {
  transform: translate3d(calc((1 - var(--cinema-line-reveal, 0)) * 10px), calc((1 - var(--cinema-line-reveal, 0)) * -10px), 0) !important;
  clip-path: inset(0 0 calc((1 - var(--cinema-line-reveal, 0)) * 104%) 0) !important;
}
html[data-route="home"] .landing-cinematic .cinema-copy h1 > .cinema-title-line > span {
  filter: blur(calc((1 - var(--cinema-line-reveal, 0)) * .35px));
  text-shadow: 0 1px 16px rgb(15 12 10 / calc((1 - var(--cinema-line-reveal, 0)) * .06));
}
html[data-route="home"] .landing-cinematic .cinema-copy .cinema-kicker {
  color: var(--cinema-gold);
  letter-spacing: .36em;
  transform: translate3d(0, calc((1 - var(--cinema-kicker-reveal, 0)) * 5px), 0);
}
html[data-route="home"] .landing-cinematic .cinema-copy .cinema-subtitle {
  max-width: 38ch;
  color: rgb(247 245 241 / 82%);
  letter-spacing: .065em;
  transform: translate3d(0, calc((1 - var(--cinema-subtitle-reveal, 0)) * 4px), 0);
  filter: blur(calc((1 - var(--cinema-subtitle-reveal, 0)) * .35px));
}
html[data-route="home"] .landing-cinematic .cinema-copy::after {
  width: clamp(76px, 10vw, 156px);
  background: var(--cinema-gold);
  opacity: calc(var(--cinema-title-reveal, 0) * .8);
  transform: translate3d(calc((var(--cinema-title-reveal, 0) - 1) * 18px), 0, 0) scaleX(var(--cinema-title-reveal, 0));
}

/* Square editorial controls, with a matte-gold registration line rather than a pill. */
html[data-route="home"] .landing-cinematic .cinema-actions {
  gap: 30px;
  margin-top: 27px;
}
html[data-route="home"] .landing-cinematic .cinema-actions > .cinema-cta {
  min-height: 46px;
  padding-inline: 19px;
  border: 1px solid rgb(247 245 241 / 58%);
  background: rgb(20 18 16 / 17%);
  box-shadow: inset 0 -2px 0 var(--cinema-gold);
}
html[data-route="home"] .landing-cinematic .cinema-actions > .cinema-link {
  border-bottom-color: var(--cinema-soft-line);
  color: rgb(247 245 241 / 82%);
}
html[data-route="home"] .landing-cinematic .cinema-actions > a:hover {
  color: var(--cinema-white);
}

/* The chapter edge is painted into the document as a paper surface, not pushed over the film. */
html[data-route="home"] main.landing-cinematic > .landing-signal {
  position: relative;
  z-index: 3;
  isolation: isolate;
  overflow: hidden;
  margin: 0 -5vw;
  min-height: 132px;
  padding: 58px 5vw 29px;
  border-top: 0;
  border-bottom: 1px solid var(--landing-line);
  background: transparent !important;
  box-shadow: none !important;
}
html[data-route="home"] main.landing-cinematic > .landing-signal::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--landing-canvas);
  opacity: .98;
  transform: scaleY(var(--signal-enter, 0));
  transform-origin: top center;
  will-change: transform;
}
html[data-route="home"] main.landing-cinematic > .landing-signal::after {
  top: 0;
  right: 5vw;
  left: 5vw;
  z-index: 1;
  height: 1px;
  background: var(--landing-accent);
  opacity: calc(.18 + var(--signal-enter, 0) * .82);
  transform: scaleX(var(--signal-enter, 0));
  transform-origin: left center;
}
html[data-route="home"] main.landing-cinematic > .landing-signal > span,
html[data-route="home"] main.landing-cinematic > .landing-signal .signal-genres {
  position: relative;
  z-index: 2;
  opacity: var(--signal-enter, 0);
  transform: translate3d(0, calc((1 - var(--signal-enter, 0)) * 7px), 0);
  clip-path: inset(0 calc((1 - var(--signal-enter, 0)) * 108%) 0 0);
}
html[data-route="home"] main.landing-cinematic > .landing-signal > span {
  color: var(--landing-ink);
  font-family: var(--cinema-display);
  font-size: clamp(17px, 1.55vw, 22px);
  letter-spacing: -.025em;
}
html[data-route="home"] main.landing-cinematic > .landing-signal .signal-genres {
  color: var(--landing-muted);
  font-family: var(--cinema-sans);
  letter-spacing: .24em;
}

@media (max-width: 760px) {
  html[data-route="home"] .landing-cinematic .cinema-copy h1 { font-size: clamp(50px, 15vw, 80px) !important; }
  html[data-route="home"] .landing-cinematic .cinema-nav nav { gap: 15px; }
  html[data-route="home"] .landing-cinematic .cinema-nav nav a { font-size: 9px; letter-spacing: .05em; }
  html[data-route="home"] main.landing-cinematic > .landing-signal { padding: 46px 5vw 24px; min-height: 112px; }
  html[data-route="home"] main.landing-cinematic > .landing-signal > span { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-route="home"] .landing-cinematic .cinema-nav nav a::after { transition: none; }
  html[data-route="home"] main.landing-cinematic > .landing-signal::before,
  html[data-route="home"] main.landing-cinematic > .landing-signal::after { transform: none !important; opacity: 1 !important; }
}

/* Keep style preference labels compact and readable on one line. */
html:not([data-route="home"]) .style-options .choice {
  min-width: 0;
  min-height: 42px;
  padding-inline: 8px;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 520px) {
  html:not([data-route="home"]) .style-options .choice {
    min-height: 40px;
    padding-inline: 6px;
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   Luxe Lookbook v2 — editorial application chrome
   Visual-only layer for workspace routes. The reference language is translated
   into a usable product UI: porcelain paper, ink typography, matte gold rules,
   square controls, and deliberate whitespace. No interaction or data rules are
   changed here.
   -------------------------------------------------------------------------- */
html:not([data-route="home"]) {
  --lookbook-paper: #fcfbf8;
  --lookbook-porcelain: #f7f5f1;
  --lookbook-stone: #e8e3db;
  --lookbook-ink: #141210;
  --lookbook-gold: #9a7b4f;
  --lookbook-taupe: #6b6259;
  --lookbook-hairline: rgb(20 18 16 / 18%);
  --lookbook-soft-line: rgb(20 18 16 / 9%);
  --lookbook-lift: 0 20px 46px rgb(20 18 16 / 5%);
  --lookbook-focus: 0 0 0 3px rgb(154 123 79 / 18%);
}
html:not([data-route="home"])[data-theme="dark"] {
  --lookbook-paper: #211f1c;
  --lookbook-porcelain: #171614;
  --lookbook-stone: #302c27;
  --lookbook-ink: #f7f5f1;
  --lookbook-gold: #c8aa7d;
  --lookbook-taupe: #b9afa3;
  --lookbook-hairline: rgb(247 245 241 / 20%);
  --lookbook-soft-line: rgb(247 245 241 / 10%);
  --lookbook-lift: 0 20px 46px rgb(0 0 0 / 18%);
  --lookbook-focus: 0 0 0 3px rgb(200 170 125 / 20%);
}

html:not([data-route="home"]) body {
  background:
    linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), var(--lookbook-soft-line) 100%),
    var(--lookbook-porcelain);
}
html:not([data-route="home"]) .app-main {
  background: var(--lookbook-porcelain);
}
html:not([data-route="home"]) .content {
  max-width: 1480px;
  padding-top: clamp(28px, 3.6vw, 58px);
  padding-bottom: clamp(56px, 7vw, 108px);
}

/* Navigation: a quiet maison index with one registration line for the active page. */
html:not([data-route="home"]) .sidebar {
  width: var(--sidebar-w);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--lookbook-paper) 86%, transparent), transparent 58%),
    var(--lookbook-porcelain);
  border-right: 1px solid var(--lookbook-hairline);
}
html:not([data-route="home"]) .sidebar-head {
  margin-bottom: 38px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--lookbook-hairline);
}
html:not([data-route="home"]) .brand {
  gap: 12px;
}
html:not([data-route="home"]) .brand-mark {
  width: 30px;
  height: 30px;
  opacity: .86;
}
html:not([data-route="home"]) .brand-name {
  font-size: 20px;
  letter-spacing: .14em;
}
html:not([data-route="home"]) .brand-en {
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: .36em;
  color: var(--lookbook-taupe);
}
html:not([data-route="home"]) .nav-section {
  margin: 26px 12px 10px;
  color: var(--lookbook-gold);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
}
html:not([data-route="home"]) .nav-item {
  position: relative;
  min-height: 44px;
  margin: 2px 0;
  padding: 10px 12px 10px 15px;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  background: transparent;
  color: var(--lookbook-taupe);
  letter-spacing: .015em;
  transition: color .24s var(--lookbook-ease), background .24s var(--lookbook-ease), padding .24s var(--lookbook-ease);
}
html:not([data-route="home"]) .nav-item::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 1px;
  background: var(--lookbook-gold);
  opacity: 0;
  transform: scaleY(.3);
  transform-origin: center;
  transition: opacity .24s var(--lookbook-ease), transform .24s var(--lookbook-ease);
}
html:not([data-route="home"]) .nav-item:hover {
  padding-left: 19px;
  background: color-mix(in srgb, var(--lookbook-stone) 48%, transparent);
  color: var(--lookbook-ink);
}
html:not([data-route="home"]) .nav-item.active {
  padding-left: 19px;
  background: var(--lookbook-stone);
  color: var(--lookbook-ink);
  font-weight: 500;
}
html:not([data-route="home"]) .nav-item.active::before,
html:not([data-route="home"]) .nav-item:hover::before {
  opacity: 1;
  transform: scaleY(1);
}
html:not([data-route="home"]) .nav-item .icon {
  width: 17px;
  height: 17px;
}
html:not([data-route="home"]) .nav-item .end {
  color: var(--lookbook-gold);
  font-size: 9px;
  letter-spacing: .16em;
}
html:not([data-route="home"]) .sidebar-toggle {
  width: 30px;
  height: 30px;
  border-color: var(--lookbook-hairline);
  color: var(--lookbook-taupe);
  background: transparent;
}
html:not([data-route="home"]) .sidebar-toggle:hover {
  border-color: var(--lookbook-gold);
  color: var(--lookbook-ink);
  background: transparent;
}
html:not([data-route="home"]) .side-bottom {
  padding-top: 18px;
  border-top: 1px solid var(--lookbook-hairline);
}
html:not([data-route="home"]) .credit-card,
html:not([data-route="home"]) .profile {
  border-color: var(--lookbook-hairline);
  background: transparent;
}

/* Header and page introductions read like a printed chapter opener. */
html:not([data-route="home"]) .topbar {
  min-height: 72px;
  padding-inline: clamp(24px, 4.2vw, 64px);
  background: var(--lookbook-porcelain);
  border-bottom: 1px solid var(--lookbook-hairline);
}
html:not([data-route="home"]) .breadcrumb {
  color: var(--lookbook-taupe);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
html:not([data-route="home"]) .breadcrumb strong {
  color: var(--lookbook-ink);
  font-weight: 500;
}
html:not([data-route="home"]) .page-header {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--lookbook-hairline);
}
html:not([data-route="home"]) .page-header h1 {
  max-width: 16ch;
  color: var(--lookbook-ink);
  font-size: clamp(36px, 4.2vw, 62px);
  line-height: .98;
  letter-spacing: -.045em;
}
html:not([data-route="home"]) .page-header p {
  color: var(--lookbook-taupe);
  font-size: 13px;
  line-height: 1.9;
}
html:not([data-route="home"]) .eyebrow,
html:not([data-route="home"]) .page-header .eyebrow {
  color: var(--lookbook-gold);
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
}

/* Controls: crisp paper, thin rules, and a small gold registration mark on focus. */
html:not([data-route="home"]) :where(.btn, .choice, .filter, .pill, .model-search-toggle, .icon-btn, .text-btn, select, input, textarea) {
  border-radius: 0 !important;
  transition: color .2s var(--lookbook-ease), background .2s var(--lookbook-ease), border-color .2s var(--lookbook-ease), transform .2s var(--lookbook-ease), box-shadow .2s var(--lookbook-ease);
}
html:not([data-route="home"]) :where(.btn, .choice, .filter, .model-search-toggle, .icon-btn, .text-btn) {
  min-height: 42px;
  border-color: var(--lookbook-hairline);
  background: transparent;
  color: var(--lookbook-ink);
}
html:not([data-route="home"]) :where(.btn, .choice, .filter, .model-search-toggle, .icon-btn, .text-btn):hover:not(:disabled) {
  border-color: var(--lookbook-gold);
  background: color-mix(in srgb, var(--lookbook-stone) 56%, transparent);
}
html:not([data-route="home"]) .btn.primary,
html:not([data-route="home"]) .btn.ink {
  position: relative;
  border-color: var(--lookbook-ink);
  background: var(--lookbook-ink);
  color: var(--lookbook-porcelain);
}
html:not([data-route="home"]) .btn.primary::after,
html:not([data-route="home"]) .btn.ink::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 4px;
  left: 12px;
  height: 1px;
  background: var(--lookbook-gold);
  transform: scaleX(.2);
  transform-origin: left;
  transition: transform .25s var(--lookbook-ease);
}
html:not([data-route="home"]) .btn.primary:hover::after,
html:not([data-route="home"]) .btn.ink:hover::after { transform: scaleX(1); }
html:not([data-route="home"]) .btn.ghost { border-color: var(--lookbook-hairline); }
html:not([data-route="home"]) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border: 1px solid var(--lookbook-hairline);
  background: color-mix(in srgb, var(--lookbook-paper) 78%, transparent);
  color: var(--lookbook-ink);
}
html:not([data-route="home"]) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--lookbook-gold);
  outline: 0;
  box-shadow: var(--lookbook-focus);
}
html:not([data-route="home"]) :where(input, textarea)::placeholder { color: var(--lookbook-taupe); }
html:not([data-route="home"]) .choice.active,
html:not([data-route="home"]) .filter.active,
html:not([data-route="home"]) .model-search-toggle.active {
  border-color: var(--lookbook-gold);
  background: var(--lookbook-stone);
  color: var(--lookbook-ink);
}
html:not([data-route="home"]) .choice.active::before,
html:not([data-route="home"]) .filter.active::before {
  background: var(--lookbook-gold);
}

/* Workspace plates: the tools stay efficient, while the visual language becomes editorial. */
html:not([data-route="home"]) :is(.provider-workspace .form-panel, .provider-workspace .output-panel, .video-workspace .form-panel, .video-workspace .output-panel, .parameter-card, .panel, .retail-pack, .model-rate-card, .hero, .calculator-result) {
  border: 1px solid var(--lookbook-hairline);
  border-radius: 0 !important;
  background: var(--lookbook-paper);
  box-shadow: var(--lookbook-lift);
}
html:not([data-route="home"]) .parameter-card {
  position: relative;
  overflow: hidden;
}
html:not([data-route="home"]) .parameter-card::before,
html:not([data-route="home"]) .panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--lookbook-gold);
  opacity: .72;
  pointer-events: none;
}
html:not([data-route="home"]) .parameter-card-title,
html:not([data-route="home"]) .output-head h2 {
  color: var(--lookbook-ink);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}
html:not([data-route="home"]) .parameter-card-title { border-bottom: 1px solid var(--lookbook-soft-line); }
html:not([data-route="home"]) .tab-strip {
  gap: 28px;
  border-bottom-color: var(--lookbook-hairline);
}
html:not([data-route="home"]) .tab-strip button {
  padding-inline: 0;
  color: var(--lookbook-taupe);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
html:not([data-route="home"]) .tab-strip button.active {
  color: var(--lookbook-ink);
  border-bottom-color: var(--lookbook-gold);
}
html:not([data-route="home"]) .field-label {
  color: var(--lookbook-ink);
  font-size: 12px;
  letter-spacing: .08em;
}
html:not([data-route="home"]) .field-label small,
html:not([data-route="home"]) .field-hint,
html:not([data-route="home"]) .prompt-tools,
html:not([data-route="home"]) .privacy-note {
  color: var(--lookbook-taupe);
  font-size: 11px;
}
html:not([data-route="home"]) .provider-workspace #prompt,
html:not([data-route="home"]) .video-workspace #video-prompt {
  min-height: 158px;
  padding: 18px;
  font-size: 15px;
  line-height: 1.85;
}
html:not([data-route="home"]) .upload-box {
  border-color: var(--lookbook-hairline);
  background: color-mix(in srgb, var(--lookbook-stone) 28%, transparent);
}
html:not([data-route="home"]) .model-select-row select,
html:not([data-route="home"]) .model-search-toggle { min-height: 46px; height: 46px; }
html:not([data-route="home"]) .studio-submit {
  border-top: 1px solid var(--lookbook-ink);
  border-bottom: 1px solid var(--lookbook-hairline);
  background: var(--lookbook-ink);
  color: var(--lookbook-porcelain);
}
html:not([data-route="home"]) .studio-submit .muted,
html:not([data-route="home"]) .studio-submit small { color: rgb(247 245 241 / 68%); }
html:not([data-route="home"]) .studio-submit .btn.ghost { color: var(--lookbook-porcelain); border-color: rgb(247 245 241 / 35%); }
html:not([data-route="home"]) .studio-submit .btn.primary { background: var(--lookbook-porcelain); color: var(--lookbook-ink); border-color: var(--lookbook-porcelain); }
html:not([data-route="home"]) .empty-orbit { border-color: var(--lookbook-gold); background: transparent; box-shadow: 0 0 0 1px var(--lookbook-soft-line); }
html:not([data-route="home"]) .empty-orbit::before,
html:not([data-route="home"]) .empty-orbit::after { border-color: var(--lookbook-gold); }
html:not([data-route="home"]) .empty-state h3,
html:not([data-route="home"]) .submit-summary strong,
html:not([data-route="home"]) .result-card h3,
html:not([data-route="home"]) .task-carousel-footer strong,
html:not([data-route="home"]) .art-meta h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.025em;
}
html:not([data-route="home"]) .creative-ideas,
html:not([data-route="home"]) .result-ideas { border-color: var(--lookbook-hairline); background: transparent; }
html:not([data-route="home"]) .creative-ideas .chip,
html:not([data-route="home"]) .result-ideas button { border-color: var(--lookbook-hairline); background: transparent; }
html:not([data-route="home"]) .creative-ideas .chip:hover,
html:not([data-route="home"]) .result-ideas button:hover { border-color: var(--lookbook-gold); color: var(--lookbook-ink); }

/* Lists, pricing and gallery plates follow the same hairline rhythm. */
html:not([data-route="home"]) :is(.gallery-toolbar, .model-rate-heading, .dialog-head, .output-head, .output-footer) { border-color: var(--lookbook-hairline); }
html:not([data-route="home"]) .model-rate-table thead { background: var(--lookbook-stone); }
html:not([data-route="home"]) .model-rate-table tbody tr:hover { background: color-mix(in srgb, var(--lookbook-stone) 46%, transparent); }
html:not([data-route="home"]) .retail-pack.is-recommended { border-color: var(--lookbook-ink); }
html:not([data-route="home"]) .retail-pack.is-current-plan { border-color: var(--lookbook-gold); outline: 1px solid var(--lookbook-gold); outline-offset: -4px; }
html:not([data-route="home"]) .pack-price strong,
html:not([data-route="home"]) .model-rate-title h3 { color: var(--lookbook-ink); font-family: var(--font-display); font-weight: 400; }
html:not([data-route="home"]) .result-meta,
html:not([data-route="home"]) .video-result-card .result-meta,
html:not([data-route="home"]) .task-carousel-footer { background: var(--lookbook-paper); }
html:not([data-route="home"]) .result-image-button,
html:not([data-route="home"]) .image-viewer > img { border-radius: 0 !important; }
html:not([data-route="home"]) dialog { border: 1px solid var(--lookbook-ink); background: var(--lookbook-paper); box-shadow: var(--lookbook-lift); }
html:not([data-route="home"]) #toast { border: 1px solid var(--lookbook-gold); border-radius: 0; background: var(--lookbook-ink); color: var(--lookbook-porcelain); }

@media (max-width: 900px) {
  html:not([data-route="home"]) .content { padding-top: 28px; }
  html:not([data-route="home"]) .page-header h1 { font-size: clamp(34px, 7vw, 52px); }
}
@media (max-width: 760px) {
  html:not([data-route="home"]) .topbar { padding-inline: 20px; }
  html:not([data-route="home"]) .content { padding-inline: 20px; }
  html:not([data-route="home"]) .page-header { padding-bottom: 22px; }
  html:not([data-route="home"]) .page-header h1 { max-width: none; }
  html:not([data-route="home"]) .studio-submit { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-route="home"]) :where(.btn, .choice, .filter, .model-search-toggle, .icon-btn, .text-btn, .nav-item, input, select, textarea) { transition: none; }
}