/* Visitor-facing screen surfaces. Paper stocks, print previews and uploaded artwork use their own colours. */
:root {
  --h6-paper: #f3eee6;
  --h6-sand: #efe6d8;
  --h6-ink: #292d28;
  --h6-rust: #9c4428;
  --h6-sans: HomeInter, Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --h6-space: clamp(120px, 9vw, 144px);
  --brand-orange: #D75F33;
}
@media (max-width:767px) { :root { --h6-space:72px; } }
/* Double-ink display type on dark editorial scenes. Navigation, controls,
   body copy, artwork and the small hero captions keep their existing styling. */
body[data-page="index"] .hero-h7 #hero-title.h7-wordmark,
.es-story .es-chapter :is(h1,h2),
#root .cinema-story h1,
body[data-account-cinematic] #atelierTransition .atelier-tx-label span {
  text-shadow: 0.035em 0.035em 0 var(--brand-orange) !important;
}
html, body { background-color: var(--h6-paper); }
body[data-page] {
  --paper-warm: var(--h6-paper);
  --surface: var(--h6-paper);
  --surface-recess: var(--h6-sand);
  --orange-paper: var(--h6-sand);
}
body[data-page] :is(.site-header,.shop-utility,.wall-filters,.wall-heading,.wall-navigation,.wall-focus-copy,.wall-close,.wall-label,.artwork-lightbox,.home-next) { background-color: var(--h6-paper); }
body[data-page] :is(.orange-surface,.exhibition-wall,.wall-focus,.wall-relief,.detail-visual,.materials,.studio,.notebook-stage,.notebook-herbier-entry,.resume-panel,.product-sample,.paper-catalogue) {
  background: var(--h6-sand); color: var(--h6-ink);
}
body[data-page] .studio :is(h1,p,.eyebrow,.button.outline) { color: var(--h6-ink); }
body[data-page] .wall-relief::before { background-color: var(--h6-sand); }
body[data-page] .orange-surface :is(a,button):hover { color: var(--h6-ink); }
body[data-page] .orange-surface :is(a,button):focus-visible { outline-color: var(--h6-ink); }
body[data-page] .exhibition-wall::before, body[data-page] .wall-focus::before { opacity: .10; }
body[data-page] .exhibition-wall::after, body[data-page] .wall-focus::after { background-color: var(--h6-paper); opacity: .48; }
body[data-page] :is(.library-footer,.footer) { background-color: var(--h6-paper); }
body[data-page]:not([data-page="herbier"]) :is(.button.solid, button.primary, .library-primary, .entry-start, .entry-resume, #summary-export, .production-action-buttons .primary, .preflight button:not(:last-child), .dialog-actions button:not(:last-child)) {
  color: var(--h6-ink); background: var(--h6-sand); border-color: currentColor;
}
body[data-page]:not([data-page="herbier"]) :is(.button.solid, button.primary, .library-primary, .entry-start, .entry-resume, #summary-export, .production-action-buttons .primary, .preflight button:not(:last-child), .dialog-actions button:not(:last-child)):hover {
  color: var(--h6-ink); background: var(--h6-paper); border-color: currentColor;
}
body[data-page="herbier"] {
  --room: var(--h6-paper); --room-2: var(--h6-sand); --linen: var(--h6-ink);
  --muted: #615d53; --champagne: #675b45; --rule: #c5bdaf;
  color-scheme: light; color: var(--linen); background: var(--h6-paper);
}
body[data-page="herbier"].t-herb {
  --room: var(--h6-sand); --room-2: var(--h6-paper); --linen: var(--h6-ink); --muted: #615d53;
  background: var(--h6-sand);
}
body[data-page="herbier"] .herbier-main .cta button,
body[data-page="notebook"] .notebook-herbier-entry .herbier-promo-link,
body[data-page="index"] #herbier .h2-primary { background: var(--h6-paper); color: var(--h6-ink) !important; border: 1px solid #736e61; }
body[data-page="herbier"] .herbier-main .cta button:hover,
body[data-page="notebook"] .notebook-herbier-entry .herbier-promo-link:hover,
body[data-page="index"] #herbier .h2-primary:hover { background: var(--h6-sand); color: var(--h6-ink) !important; }
/* Headings belong to the interface. Leave the live designer canvas and book typography alone. */
body[data-page]:not([data-page="index"],[data-page="designer"],[data-page="herbier"]) main :is(h1,h2,h3):not(.notebook-herbier-entry h2),
body[data-page="herbier"] .herbier-main :is(h2,h3),
body[data-page="designer"] :is(#product-entry,.control-panel) :is(h1,h2,h3) {
  font-family: var(--h6-sans); font-weight: 400;
}
body[data-page]:not([data-page="index"],[data-page="designer"],[data-page="herbier"]) main h1 { font-size: clamp(28px,3.1vw,44px); }
body[data-page]:not([data-page="index"],[data-page="designer"]) main h2:not(.notebook-herbier-entry h2) { font-size: clamp(24px,2.5vw,36px); }
body[data-page]:not([data-page="index"],[data-page="designer"]) main h3 { font-size: clamp(18px,1.5vw,22px); }
body[data-page="studio"] .studio-intro, body[data-page="materials"] .paper-catalogue { padding-block-start:var(--h6-space); }
body[data-page="herbier"] .herbier-main .wrap > section:not(.hero) { margin-block-start:var(--h6-space); }
body[data-page] :is(.library-filters,.detail-views,.side-buttons,.view-options,.film-steps,.workspace-toolbar,.frame-filters,.production-actions) :is([aria-pressed=true],[aria-current=step]) {
  background:var(--h6-paper); color:var(--h6-ink); border-bottom-color:var(--h6-ink);
}
body[data-page] .entry-alternatives button:hover, body[data-page] .wall-customise:hover { color:var(--h6-ink); }
body[data-page="materials"] .film-window { background-color:var(--h6-sand); }
body[data-page="designer"] :is(.panel-intro h1,.designer-layout > h1.sr-only) {
  font-family:var(--h6-sans); font-size:clamp(27px,2.7vw,39px); font-weight:400;
}
body[data-page="designer"] .panel-intro h1 :is(em,strong) { font:inherit; }