/* R16 cohesion layer. Loaded last. One palette, one type scale, one button set
   and one return/breadcrumb language across entrance, shelves, products,
   System 1, GALA, editions and the art wall. Presentation only: no routes,
   layout positions, assets, copy of works or commerce state change here.
   Remove this file's <link> to return to R15 exactly. */

:root{
  --w-ink:var(--finish-ink,#eeece6);
  --w-ink-2:var(--finish-muted,#b5b1a6);
  --w-ink-3:var(--finish-subtle,#949087);
  --w-line:var(--finish-line,rgba(235,230,217,.18));
  --w-line-strong:rgba(235,230,217,.36);
  --w-fill:#101010;
  --w-ease:var(--finish-ease,cubic-bezier(.22,.61,.36,1));
  /* Type roles */
  --w-eyebrow-size:10px;--w-eyebrow-track:.14em;--w-eyebrow-weight:500;
  --w-display:clamp(36px,2.2vw + 18px,52px);
  --w-overlay:clamp(30px,1vw + 22px,38px);
  --w-hero:clamp(36px,4.4vw,68px);
  --w-title-weight:370;--w-title-track:-.045em;
  --w-ui:12px;--w-ui-small:11.5px;
}
@media(max-width:700px){:root{--w-eyebrow-track:.12em}}

/* Eyebrows: one size, weight, tracking and tone. Nothing below 10px. */
html .micro,html .house-eyebrow,html .house-heading .house-eyebrow,
html .entrance-copy .micro,html .shelf-ui .shelf-heading>.micro,
html .product-ui .product-panel>.micro,html #product-heading>.micro,
html .product-ui[data-experience] #product-heading>.micro,
html .worlds-editorial-copy>.micro,html #index-dialog .dialog-heading .micro,
html .wall-heading .micro,html .work-panel>.micro,html .work-reading>.micro,
html #house-work-number,html .entry-number,html .worlds-path-kind,
html .worlds-film-caption>span,html #shelf-status,html #house-view-note,
html .house-edition-note,html .house-image-caption,html .gala-room-number,
html .shelf-ui #shelf-status,html .house-rooms .gala-room-number,html .vibe-label .micro,
html .product-ui .stage-kicker,html .product-ui .lvat-total{
  font-size:var(--w-eyebrow-size);font-weight:var(--w-eyebrow-weight);
  letter-spacing:var(--w-eyebrow-track);line-height:1.6;color:var(--w-ink-2)
}
html .entry-number,html .house-rooms .gala-room-number,html .house-image-caption{color:var(--w-ink-3)}
/* Small data text (readings, counts) shares the 10px floor without the caps tracking. */
html #reading-info,html #vibe-order,html #emotion-bars span,html #emotion-bars output,
html #emotion-bars>div,html #product-emotions>div,html #product-emotions output,
html #work-reading-info,html .work-collector small,html #wall-context{font-size:10px}

/* Page titles: one display style for content pages ... */
html .shelf-ui .shelf-heading h1,html #shelf-title,
html .product-ui .product-panel h1,html #product-heading h1,html #product-title,
html .house-work-panel h1,html #house-work-title,
html #wall-title,html #work-title{
  font-size:var(--w-display);font-weight:var(--w-title-weight);
  letter-spacing:var(--w-title-track);line-height:1.06
}
@media(min-width:701px){html #work-title{font-size:min(var(--w-display),3vw)}}
/* ... and one overlay style for titles laid over the 3D scenes. */
html #entrance-title,html .house-heading h1,html #house-room-title{
  font-size:var(--w-overlay);font-weight:var(--w-title-weight);
  letter-spacing:-.04em;line-height:1.08
}
/* ... and one hero style shared by the two flagship experiences (System 1, L-VAT-ION). */
html #system-one-page .system-hero h1,html .product-ui[data-experience] #product-heading h1{
  font-size:var(--w-hero);font-weight:var(--w-title-weight);letter-spacing:var(--w-title-track);line-height:1.04
}

/* Buttons: primary = ink fill, secondary = strong line, everything else text. */
html #enter-scene,html .house-primary{
  background:var(--w-ink);color:var(--w-fill);border:1px solid var(--w-ink);
  border-radius:2px;font-size:var(--w-ui);font-weight:460;min-height:46px
}
html #enter-scene:hover,html #enter-scene:focus-visible,html .house-primary:hover{background:#fff;border-color:#fff;color:#080808}
html #enter-scene span,html #enter-scene svg{color:inherit}
html .house-secondary{
  background:transparent;color:var(--w-ink);border:1px solid var(--w-line-strong);
  border-radius:2px;font-size:var(--w-ui);font-weight:460
}
html .house-secondary:hover{border-color:var(--w-ink-2);background:#ffffff08}

/* Return control: same type and tone in every mode; label names the destination. */
html #zoom-out,html body[data-mode] #zoom-out,
html body[data-mode=gala] #zoom-out,html body[data-mode=edition] #zoom-out{
  font-size:var(--w-ui-small);font-weight:450;color:var(--w-ink-2);
  background:transparent;border-color:transparent
}
html #zoom-out:hover,html #zoom-out:focus-visible{color:var(--w-ink)}

/* Breadcrumbs: System 1 and product pages share one trail. */
html #system-one-page .breadcrumb,html .product-ui .product-breadcrumb{
  gap:12px;font-size:11px;letter-spacing:0;color:var(--w-ink-3)
}
html #system-one-page .breadcrumb a,html #system-one-page .breadcrumb button,
html .product-ui .product-breadcrumb a,html .product-ui .product-breadcrumb button{
  min-height:44px;display:inline-flex;align-items:center;pointer-events:auto;
  font-size:11px;color:var(--w-ink-2);text-decoration:none
}
html #system-one-page .breadcrumb a:hover,html #system-one-page .breadcrumb button:hover,
html .product-ui .product-breadcrumb a:hover,html .product-ui .product-breadcrumb button:hover{color:var(--w-ink)}
html #system-one-page .breadcrumb>span,html .product-ui .product-breadcrumb>span{color:var(--w-ink-3)}
html #system-one-page .breadcrumb>:last-child,html .product-ui .product-breadcrumb>span:last-child{color:var(--w-ink)}

/* Leftover R01 green on the art wall, work detail and product details → house neutrals. */
html #open-index,html #previous,html #next{color:var(--w-ink)}
html #wall-context,html #vibe-order,html .work-collector>p,html .work-collector small,
html #work-reading-info,html #emotion-bars>div,html #emotion-bars span,html #emotion-bars output,
html .product-panel details,html #product-vibe,html #product-details,html #product-emotions,
html #product-emotions output{color:var(--w-ink-2)}
html #reading-info{color:var(--w-ink-2);border-color:var(--w-line-strong)}
html #hover-label,html .work-collector,html .work-pagination,html #vibes>button{border-color:var(--w-line)}
html #vibes>button{color:var(--w-ink-2)}
html #vibes>button:hover{border-color:var(--w-ink-3)}
html #vibes>button[aria-pressed=true]{background:var(--w-ink);color:var(--w-fill);border-color:var(--w-ink)}
html meter{background-color:#ffffff14}
html meter::-webkit-meter-bar{background:#ffffff14}
html meter::-webkit-meter-optimum-value{background:var(--w-ink-2)}
html #system-one-page{scrollbar-color:#4a4844 transparent}

/* One focus ring everywhere. */
html :is(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--w-ink);outline-offset:3px}