/* IVORY OVERLAY — the white-label look, laid over Ivory Season.
   Haute Lumière, 5 November 2026. His order: "note everything on business.hautelumiere.life: the moving lighting,
   everything Claude Design did for white label. That is now the overlay for Ivory Season."
   Taken from the stylesheet business.hautelumiere.life serves (the Claude Design bundle's template, second <style>,
   kept in ~/Bastion/Design/haute-lumiere/white-label-source-2026-11-05/unpacked/template.html). Spec, line by line:
   ~/Bastion/Design/haute-lumiere/WHITE-LABEL-OVERLAY.md

   Use, after the kit:
     <html lang="en" data-overlay="white-label">
     <link rel="stylesheet" href="ivory-season.css">
     <link rel="stylesheet" href="ivory-overlay.css">
     <script src="ivory-overlay.js" defer></script>
   Nothing here applies without data-overlay="white-label" on <html>. The kit's colours stay the kit's (Ivory Season is
   law); what the overlay brings is the white label's light, motion, measure, type, hairlines, plates and veiled bar.
   No dark mode. Gold is a mark, never a fill. Radius zero. Transform and opacity only. */

html[data-overlay="white-label"]{
  /* the overlay reads the kit's tokens, and the older house sheets' names for the same things, so it sits on either */
  --wl-paper:var(--paper,#FAF8F3); --wl-paper-2:var(--paper-2,#F3EFE6); --wl-ink:var(--ink,#0C1E16);
  --wl-muted:var(--text-muted,var(--muted,#5C7065)); --wl-gold:var(--gold,#C5A059); --wl-gold-d:var(--gold-d,#9A7A3A);
  --wl-rule:var(--rule,#E1E7E2); --wl-veil:var(--veil,12, 30, 22);
  --wl-ease:var(--ease,cubic-bezier(.165,.84,.44,1)); --wl-dur:var(--dur-base,var(--base,400ms));
  --wl-serif:var(--font-serif,var(--serif,"Cormorant Garamond",Georgia,serif)); --wl-sans:var(--font-sans,var(--sans,Manrope,system-ui,sans-serif));
  --wl-on-photo:#FBF8F0;                  /* words on a photograph: cream, never white (template :root #FBF7EF, to the nearest house cream) */
  --wl-gold-wash:rgba(197,160,89,.25); /* selection only */
  --wl-bar-h:46px;
  scroll-padding-top:calc(var(--wl-bar-h) + 12px);
}
/* the light shows through: the root keeps the ivory, the body lets the light layer (z-index -1) be seen */
html[data-overlay="white-label"] body{background:transparent;line-height:1.62;text-wrap:pretty}
html[data-overlay="white-label"] ::selection{background:var(--wl-gold-wash)}

/* links: gold-ink on a hairline that warms to gold (template: a, a:hover) */
html[data-overlay="white-label"] .sheet a:not(.button):not(.wordmark),
html[data-overlay="white-label"] .prose a,
html[data-overlay="white-label"] .body a:not(.button){color:var(--wl-gold-d);text-decoration:none;border-bottom:1px solid var(--wl-rule);transition:border-color var(--wl-dur) var(--wl-ease),color var(--wl-dur) var(--wl-ease)}
html[data-overlay="white-label"] .sheet a:not(.button):not(.wordmark):hover,
html[data-overlay="white-label"] .prose a:hover,
html[data-overlay="white-label"] .body a:not(.button):hover{color:var(--wl-ink);border-color:var(--wl-gold)}

/* the bar: a veil over the page, held at the top, a gold hairline under it (template .bar) */
html[data-overlay="white-label"] .bar{position:sticky;top:0;z-index:80;min-height:var(--wl-bar-h);align-items:center;padding-top:10px;padding-bottom:10px;
  background:rgba(var(--wl-veil),.055);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid rgba(197,160,89,.18)}
/* on a phone a wrapping bar would hold a third of the screen: it stays veiled, and scrolls away with the page */
@container (max-width: 759px){html[data-overlay="white-label"] .bar{position:relative}}
@media (max-width: 759px){html[data-overlay="white-label"] .bar{position:relative}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html[data-overlay="white-label"] .bar{background:var(--wl-paper)}}
html[data-overlay="white-label"] .wordmark,
html[data-overlay="white-label"] .hnav a{font-size:10px;letter-spacing:.22em}
html[data-overlay="white-label"] .wordmark{font-weight:600}

/* the kicker: a 28px gold rule before it, and it draws itself in (template .kick, .cap .rule) */
html[data-overlay="white-label"] .eyebrow{font-size:10px;letter-spacing:.26em}
html[data-overlay="white-label"] .eyebrow::before{content:"";display:inline-block;vertical-align:middle;width:28px;height:1px;margin:-2px 14px 0 0;background:var(--wl-gold);transform-origin:0 50%}

/* the display and the band titles, at the white label's scale and weight (template h2: 36-66px, 300, 1.05, 18ch) */
html[data-overlay="white-label"] .display{font-weight:300;letter-spacing:.01em;line-height:1}
html[data-overlay="white-label"] .band h2,
html[data-overlay="white-label"] .prose h2{font-weight:300;font-size:clamp(2.25rem, 7cqi, 4.125rem);line-height:1.05;max-width:18ch}
html[data-overlay="white-label"] .display em,
html[data-overlay="white-label"] .band h2 em,
html[data-overlay="white-label"] .prose h2 em{color:var(--wl-gold-d)}
html[data-overlay="white-label"] .lede{font-style:italic}

/* the reveal: headings rise, the rule draws (template .plate.in .cap: 420ms rule, 620ms rise at 260ms).
   Only hidden once the script has said it will reveal them (.hlo-js); body text is never hidden. */
html.hlo-js[data-overlay="white-label"] :is(.head,.band) .eyebrow::before{transform:scaleX(0)}
html.hlo-js[data-overlay="white-label"] :is(.head,.band) :is(.display,h2){opacity:0;transform:translateY(14px)}
html.hlo-js[data-overlay="white-label"] :is(.head,.band).in .eyebrow::before{animation:wl-mark 420ms var(--wl-ease) forwards}
html.hlo-js[data-overlay="white-label"] :is(.head,.band).in :is(.display,h2){animation:wl-rise 620ms var(--wl-ease) 260ms forwards}
@keyframes wl-mark{to{transform:scaleX(1)}}
@keyframes wl-rise{to{opacity:1;transform:none}}

/* the plate: the kit's plate, with the white label's slow drift (template kb-a..d: 24-26s, alternate, from the top).
   The kit plate crops, so the drift stays above scale 1 and never shows an edge. */
html[data-overlay="white-label"] .plate{overflow:hidden}
html[data-overlay="white-label"] .plate img{transform-origin:50% 0%;will-change:transform}
html[data-overlay="white-label"] .plate:not(.uncut) img,
html[data-overlay="white-label"] .plate:not(.uncut) img[data-kb="a"]{animation:wl-kb-a 25s var(--wl-ease) infinite alternate}
html[data-overlay="white-label"] .plate:not(.uncut) img[data-kb="b"]{animation:wl-kb-b 24s var(--wl-ease) infinite alternate}
html[data-overlay="white-label"] .plate:not(.uncut) img[data-kb="c"]{animation:wl-kb-c 26s var(--wl-ease) infinite alternate}
html[data-overlay="white-label"] .plate:not(.uncut) img[data-kb="d"]{animation:wl-kb-d 25s var(--wl-ease) infinite alternate}
@keyframes wl-kb-a{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.11) translate(-2%,0)}}
@keyframes wl-kb-b{from{transform:scale(1.11) translate(2%,0)}to{transform:scale(1.02) translate(0,0)}}
@keyframes wl-kb-c{from{transform:scale(1.03) translate(-1.5%,0)}to{transform:scale(1.12) translate(2%,0)}}
@keyframes wl-kb-d{from{transform:scale(1.10) translate(2%,0)}to{transform:scale(1.02) translate(-1.5%,0)}}

/* the button: a gold hairline in tracked caps (template .enq button), never a gold fill */
html[data-overlay="white-label"] .button{border-color:var(--wl-gold);font-size:10px;letter-spacing:.26em;padding:0 2.2em;transition:border-color var(--wl-dur) var(--wl-ease),opacity var(--wl-dur) var(--wl-ease)}
html[data-overlay="white-label"] .button:hover{opacity:1;border-color:var(--wl-ink)}
html[data-overlay="white-label"] .button:focus-visible{outline:1px solid var(--wl-ink);outline-offset:3px}

/* fields: an underline only, set in the serif (template .enq input) */
html[data-overlay="white-label"] .sheet :is(input[type=text],input[type=email],input[type=tel],input:not([type]),textarea){font-family:var(--wl-serif);font-size:1.4rem;color:var(--wl-ink);background:transparent;border:0;border-bottom:1px solid var(--wl-rule);border-radius:0;padding:.25em 0;outline:none;transition:border-color var(--wl-dur) var(--wl-ease)}
html[data-overlay="white-label"] .sheet :is(input,textarea):focus{border-bottom-color:var(--wl-gold)}
html[data-overlay="white-label"] .sheet :is(input,textarea):focus-visible{outline:1px solid var(--wl-ink);outline-offset:3px}

/* the quotation and the foot */
html[data-overlay="white-label"] blockquote,
html[data-overlay="white-label"] .quote{font-weight:300}
html[data-overlay="white-label"] .foot{font-size:10px;letter-spacing:.22em;border-top-color:var(--wl-rule)}

/* ── THE WHITE LABEL'S OWN COMPONENTS, for pages that want the cinema (all opt-in by class) ───────────────────── */

/* .wl-cover / .wl-plate: a full-height plate, the frame shown whole over a blurred copy of itself */
html[data-overlay="white-label"] :is(.wl-cover,.wl-plate){position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--wl-paper-2);margin:0}
html[data-overlay="white-label"] :is(.wl-cover,.wl-plate) img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0%;transform-origin:50% 0%;will-change:transform}
html[data-overlay="white-label"] :is(.wl-cover,.wl-plate) img.bg{object-position:50% 50%;filter:blur(34px) saturate(1.05);transform:scale(1.2);opacity:.85;animation:none!important}
html[data-overlay="white-label"] :is(.wl-cover,.wl-plate) img:not(.bg),
html[data-overlay="white-label"] :is(.wl-cover,.wl-plate) img:not(.bg)[data-kb="a"]{animation:wl-kb-full-a 25s var(--wl-ease) infinite alternate}
html[data-overlay="white-label"] :is(.wl-cover,.wl-plate) img:not(.bg)[data-kb="b"]{animation:wl-kb-full-b 24s var(--wl-ease) infinite alternate}
html[data-overlay="white-label"] :is(.wl-cover,.wl-plate) img:not(.bg)[data-kb="c"]{animation:wl-kb-full-c 26s var(--wl-ease) infinite alternate}
html[data-overlay="white-label"] :is(.wl-cover,.wl-plate) img:not(.bg)[data-kb="d"]{animation:wl-kb-full-d 25s var(--wl-ease) infinite alternate}
@keyframes wl-kb-full-a{from{transform:scale(.81) translate(0,0)}to{transform:scale(.9) translate(-2%,0)}}
@keyframes wl-kb-full-b{from{transform:scale(.9) translate(2%,0)}to{transform:scale(.81) translate(0,0)}}
@keyframes wl-kb-full-c{from{transform:scale(.82) translate(-1.5%,0)}to{transform:scale(.91) translate(2%,0)}}
@keyframes wl-kb-full-d{from{transform:scale(.89) translate(2%,0)}to{transform:scale(.81) translate(-1.5%,0)}}
html[data-overlay="white-label"] :is(.wl-cover,.wl-plate) .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--wl-veil),0) 45%,rgba(var(--wl-veil),.62) 100%)}
html[data-overlay="white-label"] .wl-cover .scrim{background:linear-gradient(180deg,rgba(var(--wl-veil),.34) 0%,rgba(var(--wl-veil),0) 30%,rgba(var(--wl-veil),0) 52%,rgba(var(--wl-veil),.6) 100%)}
html[data-overlay="white-label"] .wl-cap{position:absolute;left:clamp(22px,6cqi,90px);right:clamp(22px,6cqi,90px);bottom:clamp(28px,7svh,72px);color:var(--wl-on-photo);max-width:46ch}
html[data-overlay="white-label"] .wl-cap .rule{display:block;width:44px;height:1px;background:var(--wl-on-photo);opacity:.8;transform-origin:0 50%}
html[data-overlay="white-label"] .wl-cap .q{font-style:italic;font-weight:300;font-size:clamp(24px,2.6cqi + 12px,36px);line-height:1.25;margin:.5em 0 .35em;color:var(--wl-on-photo)}
html[data-overlay="white-label"] .wl-cap .s{font-family:var(--wl-sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase}
html.hlo-js[data-overlay="white-label"] .wl-plate .wl-cap .rule{transform:scaleX(0)}
html.hlo-js[data-overlay="white-label"] .wl-plate .wl-cap :is(.q,.s){opacity:0;transform:translateY(14px)}
html.hlo-js[data-overlay="white-label"] .wl-plate.in .wl-cap .rule{animation:wl-mark 420ms var(--wl-ease) forwards}
html.hlo-js[data-overlay="white-label"] .wl-plate.in .wl-cap .q{animation:wl-rise 620ms var(--wl-ease) 260ms forwards}
html.hlo-js[data-overlay="white-label"] .wl-plate.in .wl-cap .s{animation:wl-rise 620ms var(--wl-ease) 900ms forwards}
html[data-overlay="white-label"] .wl-cover .mast{position:absolute;top:clamp(22px,6svh,64px);left:0;right:0;text-align:center;color:var(--wl-on-photo)}
html[data-overlay="white-label"] .wl-cover .mast .k{font-family:var(--wl-sans);font-size:10px;letter-spacing:.32em;text-transform:uppercase;opacity:.9}
html[data-overlay="white-label"] .wl-cover .mast h1{font-weight:300;font-size:clamp(46px,8.4cqi,128px);letter-spacing:.06em;line-height:.95;margin:.18em 0 0;text-transform:uppercase;color:var(--wl-on-photo)}
html[data-overlay="white-label"] .wl-cover .wl-lede{position:absolute;left:clamp(22px,6cqi,90px);bottom:clamp(30px,8svh,84px);color:var(--wl-on-photo);max-width:34ch}
html[data-overlay="white-label"] .wl-cover .wl-lede .t{font-weight:300;font-size:clamp(30px,3.6cqi + 8px,54px);line-height:1.08;margin:0 0 .3em}
html[data-overlay="white-label"] .wl-cover .wl-lede .d{font-style:italic;font-size:clamp(18px,1.5cqi + 6px,22px);opacity:.92;margin:0}

/* .wl-pull: the centred italic line with its tracked attribution (template .pull) */
html[data-overlay="white-label"] .wl-pull{max-width:860px;margin:0 auto;padding:clamp(60px,10svh,120px) clamp(22px,6cqi,90px);text-align:center}
html[data-overlay="white-label"] .wl-pull p{font-style:italic;font-weight:300;font-size:clamp(30px,3.6cqi + 8px,50px);line-height:1.2;margin:0;color:var(--wl-ink)}
html[data-overlay="white-label"] .wl-pull .s{font-family:var(--wl-sans);font-style:normal;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--wl-gold-d);margin-top:1.6em}

/* .wl-side: the margin note with its large light figure (template aside.side) */
html[data-overlay="white-label"] .wl-side{border-top:1px solid var(--wl-rule);padding-top:1.2em;font-style:italic;color:var(--wl-muted);font-size:.96em}
html[data-overlay="white-label"] .wl-side .n{font-style:normal;font-weight:300;font-size:clamp(54px,6cqi + 20px,86px);line-height:1;color:var(--wl-ink);display:block;margin-bottom:.15em}
html[data-overlay="white-label"] .wl-side .l{font-family:var(--wl-sans);font-style:normal;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--wl-gold-d);display:block;margin-bottom:.8em}

/* .wl-steps: three steps under a gold hairline each (template .steps) */
html[data-overlay="white-label"] .wl-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4cqi,56px);margin-top:2.6em}
@container (min-width: 860px){html[data-overlay="white-label"] .wl-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
html[data-overlay="white-label"] .wl-steps > *{border-top:1px solid var(--wl-gold);padding-top:1em}
html[data-overlay="white-label"] .wl-steps .i{font-family:var(--wl-sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--wl-gold-d)}
html[data-overlay="white-label"] .wl-steps h3{font-weight:400;font-size:28px;line-height:1.15;margin:.35em 0 .4em}
html[data-overlay="white-label"] .wl-steps p{margin:0;font-size:.95em;color:var(--wl-muted)}

/* .wl-surfaces: a ruled row of names with tracked labels (template .surfaces) */
html[data-overlay="white-label"] .wl-surfaces{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--wl-rule);margin-top:2.4em}
html[data-overlay="white-label"] .wl-surfaces > *{border-bottom:1px solid var(--wl-rule);padding:1.1em 0 1em;font-family:var(--wl-sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--wl-muted)}
html[data-overlay="white-label"] .wl-surfaces b{display:block;font-family:var(--wl-serif);font-weight:300;font-size:26px;letter-spacing:0;text-transform:none;color:var(--wl-ink);margin-bottom:.15em}

/* .wl-dropcap: the first letter of an opening paragraph, light and gold-ink (template .body p:first-child::first-letter) */
html[data-overlay="white-label"] .wl-dropcap::first-letter{float:left;font-size:4.4em;line-height:.82;padding:.06em .1em 0 0;color:var(--wl-gold-d);font-weight:300}

@media (prefers-reduced-motion: reduce){
  html[data-overlay="white-label"] .plate img,
  html[data-overlay="white-label"] :is(.wl-cover,.wl-plate) img:not(.bg){animation:none!important}
  html[data-overlay="white-label"] :is(.wl-cover,.wl-plate) img:not(.bg){transform:scale(.81)}
  html.hlo-js[data-overlay="white-label"] :is(.head,.band,.wl-plate) :is(.display,h2,.wl-cap .rule,.wl-cap .q,.wl-cap .s){animation:none!important;opacity:1;transform:none}
  html.hlo-js[data-overlay="white-label"] :is(.head,.band) .eyebrow::before{animation:none!important;transform:none}
}
@media print{
  html[data-overlay="white-label"] .bar{position:static;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  html[data-overlay="white-label"] .plate img,html[data-overlay="white-label"] :is(.wl-cover,.wl-plate) img{animation:none!important}
  html.hlo-js[data-overlay="white-label"] :is(.head,.band,.wl-plate) *{opacity:1!important;transform:none!important}
}