/* MINALOX · Beyond Colour Temperature · microsite styles · R01 (released 6 November 2026) */


:root{
  --ink:#000814;          /* brand primary dark */
  --ink-2:#03070E;        /* deepest stage */
  --char:#0A0F17;         /* charcoal panels */
  --char-2:#111821;       /* raised surface */
  --navy:#001D3D;         /* brand secondary dark */
  --gold:#FFC857;         /* brand accent */
  --paper:#F7F8F9;        /* text on dark */
  --mist:rgba(247,248,249,.74);
  --faint:rgba(247,248,249,.56);
  --line:rgba(247,248,249,.14);
  --line-2:rgba(247,248,249,.26);
  --ease:cubic-bezier(.2,.7,.1,1);
  --wrap:min(1240px,88vw);
  --display:clamp(2.6rem,6.6vw,6.6rem);
  --h2:clamp(2rem,4.4vw,4.2rem);
  --body:1.0625rem;
  --small:.875rem;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:300;font-size:var(--body);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:inherit}
strong,b{font-weight:500}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--gold);color:var(--ink);padding:.6rem 1rem;font-weight:500;text-decoration:none;transition:top .2s}
.skip:focus{top:1rem}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wrap{width:var(--wrap);margin-inline:auto}
.kicker{display:block;font-size:var(--small);font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 1.4rem}
.h2{font-size:var(--h2);font-weight:300;line-height:1.04;letter-spacing:.01em;text-transform:uppercase;margin:0;max-width:16ch}
.sub{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:300;color:var(--mist);margin:1.2rem 0 0;max-width:34ch;line-height:1.45}
.lead{font-size:clamp(1.05rem,1.35vw,1.2rem);color:var(--mist);max-width:56ch;margin:1.6rem 0 0}
.note{font-size:var(--small);color:var(--faint);line-height:1.55;max-width:70ch;margin:1.2rem 0 0}
.note a,.ref{color:var(--faint);text-decoration:none;border-bottom:1px solid var(--line-2)}
.ref{font-size:.78em;vertical-align:.35em;margin-left:.1em;border:0;color:var(--gold);opacity:.85}
.ref:hover{opacity:1}
.tag{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--small);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--gold);flex:none}

section{position:relative}
.sec{padding:clamp(6rem,13vw,11rem) 0}
.sec-head{display:grid;gap:0;margin-bottom:clamp(2.6rem,5vw,4.4rem)}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:1.25rem clamp(1.2rem,4vw,3rem);transition:background .5s var(--ease),padding .5s var(--ease)}
.nav.solid{background:rgba(0,8,20,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-block:.9rem}
.nav .logo img{height:17px;width:auto}
.nav ul{display:flex;gap:clamp(1rem,2.2vw,2.2rem);list-style:none;margin:0;padding:0}
.nav a{font-size:var(--small);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--mist);transition:color .3s}
.nav a:hover,.nav a[aria-current="true"]{color:var(--paper)}
.nav a[aria-current="true"]{box-shadow:0 1px 0 var(--gold)}
.nav .right{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.2rem)}
@media (max-width:1180px){.nav ul{display:none}}
.lang{display:inline-flex;align-items:center;gap:.15rem;border:1px solid var(--line-2);border-radius:999px;padding:.2rem;flex:none}
.lang button{background:none;border:0;border-radius:999px;min-width:44px;min-height:36px;padding:.3rem .65rem;font-size:var(--small);font-weight:500;letter-spacing:.14em;color:var(--mist);cursor:pointer;transition:background .35s,color .35s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.lang button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.lang button:hover:not([aria-pressed="true"]){color:var(--paper)}
@media (max-width:420px){.lang button{min-width:42px;padding:.3rem .5rem}}

/* ---------- HERO ---------- */
.hero{height:100svh;min-height:600px;overflow:hidden;background:var(--ink-2)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;filter:url(#f-hero);transform:scale(1.06);animation:heroDrift 32s var(--ease) forwards}
@keyframes heroDrift{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,8,20,.86) 0%,rgba(0,8,20,.55) 38%,rgba(0,8,20,0) 70%),linear-gradient(0deg,rgba(0,8,20,.9) 0%,rgba(0,8,20,0) 34%);pointer-events:none}
.hero-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(4rem,11vh,8rem)}
.hero h1{font-size:var(--display);font-weight:300;line-height:.98;letter-spacing:.005em;text-transform:uppercase;margin:0;max-width:11ch}
.hero .sub{max-width:30ch}
.cta{display:inline-flex;align-items:center;gap:1rem;margin-top:2.6rem;padding:0;background:none;border:0;cursor:pointer;font-size:var(--small);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--paper);text-decoration:none;width:max-content}
.cta .ring{width:3.1rem;height:3.1rem;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:border-color .4s,background .4s}
.cta .ring::after{content:"";width:.5rem;height:.5rem;border-right:1px solid var(--paper);border-bottom:1px solid var(--paper);transform:translateY(-2px) rotate(45deg);animation:nudge 2.8s var(--ease) infinite}
.cta:hover .ring{border-color:var(--gold);background:rgba(255,200,87,.08)}
@keyframes nudge{0%,60%,100%{translate:0 0}30%{translate:0 4px}}
.hero-meta{position:absolute;z-index:2;right:clamp(1.2rem,4vw,3rem);bottom:clamp(1.4rem,4vh,2.4rem);display:flex;align-items:center;gap:.7rem;font-size:var(--small);color:var(--faint);letter-spacing:.08em}
.hero-meta .swatch{width:.7rem;height:.7rem;border-radius:50%;box-shadow:0 0 0 1px rgba(247,248,249,.2)}
@media (max-width:640px){.hero-img{object-position:68% 50%}.hero-meta{left:clamp(1.2rem,4vw,3rem);right:auto}}

/* ---------- S02 COMPARE ---------- */
.s-compare{background:var(--ink)}
.compare-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:clamp(2rem,4vw,4.5rem);align-items:end}
@media (max-width:960px){.compare-grid{grid-template-columns:1fr}}
.compare{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;touch-action:pan-y;user-select:none;-webkit-user-select:none}
@media (max-width:640px){.compare{aspect-ratio:4/3}}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 50%;pointer-events:none}
.compare .a{filter:url(#f-cmp-a);clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.compare .b{filter:url(#f-cmp-b)}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:0;pointer-events:none}
.compare .handle::before{content:"";position:absolute;top:0;bottom:0;left:-.5px;width:1px;background:rgba(247,248,249,.75)}
.compare .knob{position:absolute;top:50%;left:0;width:2.8rem;height:2.8rem;transform:translate(-50%,-50%);border-radius:50%;background:rgba(0,8,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(247,248,249,.6);display:grid;place-items:center}
.compare .knob::before{content:"‹ ›";font-size:1rem;letter-spacing:.2em;color:var(--paper);transform:translateX(.1em)}
.compare input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.compare input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:3rem;height:100vh;cursor:ew-resize}
.compare input[type=range]::-moz-range-thumb{width:3rem;height:100vh;border:0;cursor:ew-resize}
.compare input:focus-visible ~ .handle .knob{outline:2px solid var(--gold);outline-offset:3px}
.compare .lab{position:absolute;top:1.1rem;z-index:2;font-size:var(--small);font-weight:500;letter-spacing:.16em;padding:.35rem .7rem;background:rgba(0,8,20,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none;transition:opacity .4s}
.compare .lab.l{left:1.1rem}.compare .lab.r{right:1.1rem}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:.25rem;gap:.25rem;margin-top:1.6rem;flex-wrap:wrap}
.seg button{background:none;border:0;border-radius:999px;padding:.55rem 1.1rem;font-size:var(--small);letter-spacing:.1em;cursor:pointer;color:var(--mist);transition:background .35s,color .35s;min-height:44px}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:var(--paper);color:var(--ink);font-weight:500}
.seg button:hover:not([aria-pressed="true"]):not([aria-selected="true"]){color:var(--paper)}
.mired-fact{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.4rem;align-items:baseline}
.mired-fact .big{font-size:clamp(2.2rem,3.6vw,3.2rem);font-weight:300;line-height:1;color:var(--gold)}
.mired-fact p{margin:0;color:var(--mist);font-size:.98rem}
.mired-fact .full{grid-column:1/-1}

details.tech{margin-top:1.4rem;border-top:1px solid var(--line);padding-top:1rem}
details.tech summary{cursor:pointer;list-style:none;font-size:var(--small);letter-spacing:.16em;text-transform:uppercase;color:var(--mist);display:flex;align-items:center;gap:.6rem;min-height:44px}
details.tech summary::-webkit-details-marker{display:none}
details.tech summary::after{content:"+";font-size:1.1rem;color:var(--gold);transition:transform .3s}
details.tech[open] summary::after{transform:rotate(45deg)}
details.tech .body{color:var(--mist);font-size:.95rem;max-width:68ch}
details.tech .body p{margin:.6rem 0}

/* ---------- S03 RANGES ---------- */
.s-ranges{background:linear-gradient(180deg,var(--ink) 0%,var(--char) 100%)}
.ranges-top{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap}
.scaleset{margin-top:clamp(2.6rem,5vw,4rem)}
.track-row{display:grid;grid-template-columns:clamp(9rem,16vw,13rem) 1fr;gap:1.4rem;align-items:center;margin-bottom:1.6rem}
@media (max-width:640px){.track-row{grid-template-columns:1fr;gap:.6rem}}
.track-name{font-size:var(--small);letter-spacing:.12em;text-transform:uppercase;color:var(--mist);line-height:1.4}
.track-name b{display:block;color:var(--paper);font-size:1.05rem;letter-spacing:.06em}
.track{position:relative;height:3.2rem;border-radius:2px;background:rgba(247,248,249,.04)}
.track .bar{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:2px;transition:left 1.1s var(--ease),width 1.1s var(--ease),background 1.1s var(--ease)}
.track .ends{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 .9rem;font-size:var(--small);font-weight:500;color:var(--ink);pointer-events:none;transition:left 1.1s var(--ease),width 1.1s var(--ease)}
.track .probe{position:absolute;top:-.5rem;bottom:-.5rem;width:2px;margin-left:-1px;background:var(--paper);transition:left .7s var(--ease);box-shadow:0 0 0 1px rgba(0,8,20,.6)}
.axis-row{display:grid;grid-template-columns:clamp(9rem,16vw,13rem) 1fr;gap:1.4rem}
@media (max-width:640px){.axis-row{grid-template-columns:1fr}.axis-row>.spacer{display:none}}
.axis{position:relative;height:8.2rem;border-top:1px solid var(--line)}
.axis .grid{position:absolute;top:0;transform:translateX(-50%);font-size:.8rem;color:var(--faint);padding-top:.35rem;white-space:nowrap;transition:left 1.1s var(--ease)}
.axis .grid::before{content:"";position:absolute;top:-1px;left:50%;height:.45rem;width:1px;background:var(--line-2)}
.axis .pick{position:absolute;top:1.9rem;transform:translateX(-50%);background:none;border:1px solid var(--line-2);border-radius:999px;padding:.45rem .7rem;min-height:44px;min-width:44px;font-size:var(--small);cursor:pointer;color:var(--mist);transition:left 1.1s var(--ease),background .3s,color .3s,border-color .3s;white-space:nowrap}
.axis .pick[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper);font-weight:500}
.axis .pick:hover:not([aria-pressed="true"]){border-color:var(--paper);color:var(--paper)}
.axis .pick.alt-row{top:5.1rem}
@media (max-width:640px){.axis .pick{font-size:.8rem;padding:.4rem .45rem}.axis .pick.alt-row{top:5rem}.axis{height:8rem}}
@media (max-width:380px){.axis .pick{font-size:.72rem;padding:.35rem .3rem;letter-spacing:0}} /* RC1: 4000 K / 6000 K touched in mired mode at ≤ 380 px (pre-existing since WIP02) */
.range-info{display:grid;grid-template-columns:auto 1fr auto;gap:1.6rem 2.4rem;align-items:center;margin-top:2.2rem;padding:1.8rem;background:rgba(247,248,249,.035);border:1px solid var(--line)}
@media (max-width:760px){.range-info{grid-template-columns:auto 1fr}.range-info .chips{grid-column:1/-1}}
.lamp{width:clamp(4rem,7vw,5.6rem);aspect-ratio:1;border-radius:50%;transition:background .8s var(--ease),box-shadow .8s var(--ease)}
.range-info .k{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300;line-height:1}
.range-info p{margin:.4rem 0 0;color:var(--mist);max-width:46ch}
.chips{display:flex;flex-direction:column;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--small);color:var(--faint);white-space:nowrap}
.chip::before{content:"";width:.7rem;height:.7rem;border-radius:50%;border:1px solid var(--line-2)}
.chip.on{color:var(--paper)}
.chip.on::before{background:var(--gold);border-color:var(--gold)}
.mode-caption{min-height:3.4em;margin-top:1.8rem;font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--paper);max-width:60ch;transition:opacity .5s}
.mode-caption em{font-style:normal;color:var(--gold)}

/* ---------- S04 ATMOSPHERE ---------- */
.s-atmos{background:var(--ink-2);padding-bottom:clamp(5rem,9vw,8rem)}
.stage{position:relative;width:min(1600px,100vw);margin:0 auto;aspect-ratio:16/9;max-height:88svh;overflow:hidden;background:#000}
@media (max-width:760px){.stage{aspect-ratio:4/5;max-height:none}}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:url(#f-atmos)}
.stage::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,7,14,.85) 0%,rgba(3,7,14,0) 38%);pointer-events:none}
.stage-ui{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1.2rem,3vw,2.6rem) clamp(1.2rem,4vw,3.4rem);text-shadow:0 1px 14px rgba(3,7,14,.75)}
@media (max-width:760px){.stage::after{background:linear-gradient(0deg,rgba(3,7,14,.92) 0%,rgba(3,7,14,.55) 45%,rgba(3,7,14,0) 70%)}}
.readout{display:flex;align-items:baseline;gap:1.4rem;flex-wrap:wrap}
.readout .k{font-size:clamp(2.6rem,6vw,5.4rem);font-weight:300;line-height:1;font-variant-numeric:tabular-nums;min-width:4.6ch}
.readout .mood{font-size:clamp(1rem,1.4vw,1.2rem);color:var(--mist);max-width:40ch}
.readout .inrange{font-size:var(--small);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.readout .inrange.out{color:var(--faint)}
.slider{position:relative;margin-top:1.4rem;padding-top:.4rem}
.slider input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;height:44px;margin:0;cursor:pointer;position:relative;z-index:2}
.slider input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--grad,linear-gradient(90deg,#ffa000,#fff))}
.slider input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--grad,linear-gradient(90deg,#ffa000,#fff))}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-11px;border-radius:50%;background:var(--paper);border:6px solid var(--ink);box-shadow:0 0 0 1px rgba(247,248,249,.7)}
.slider input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--paper);border:6px solid var(--ink);box-shadow:0 0 0 1px rgba(247,248,249,.7)}
.stops{position:relative;height:2.6rem;margin:0 13px}
.stops button{position:absolute;top:0;transform:translateX(-50%);background:none;border:0;padding:.5rem .3rem;min-height:44px;font-size:var(--small);color:var(--faint);cursor:pointer;font-variant-numeric:tabular-nums;white-space:nowrap}
.stops button.on{color:var(--paper);font-weight:500}
.stops button.ext::after{content:"*";color:var(--faint)}
@media (max-width:640px){.stops button{font-size:.78rem}.stops button:nth-child(even){top:2.9rem}.stops{height:5.8rem}}
.minrange{position:absolute;top:calc(.4rem + 31px);height:2px;border-radius:1px;background:var(--gold);opacity:.95;pointer-events:none}
.stops button:first-child{transform:none;left:-13px!important}
.stops button:last-child{transform:none;left:auto!important;right:-13px}
.atmos-foot{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}
@media (max-width:760px){.atmos-foot{grid-template-columns:1fr}}

/* ---------- S05 DAY ---------- */
.s-day{background:var(--ink)}
.day-wrap{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:start}
@media (max-width:960px){.day-wrap{grid-template-columns:1fr}}
.day-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.day-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.3s var(--ease)}
.day-stage img.on{opacity:1}
.day-stage .ev{filter:url(#f-day-ev)}
.day-stage .nt{filter:url(#f-day-nt)}
.day-line{position:relative;margin-top:1.6rem}
.day-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.day-tabs button{position:relative;background:none;border:0;text-align:left;padding:1.1rem .4rem 0 0;cursor:pointer;min-height:44px;color:var(--faint);transition:color .4s}
.day-tabs button::before{content:"";position:absolute;top:-1px;left:0;right:12%;height:2px;background:transparent;transition:background .5s}
.day-tabs button[aria-selected="true"]{color:var(--paper)}
.day-tabs button[aria-selected="true"]::before{background:var(--tabc,var(--gold))}
.day-tabs .t{display:block;font-size:var(--small);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.day-tabs .n{display:block;font-size:clamp(.95rem,1.4vw,1.15rem);font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin-top:.2rem;line-height:1.25;hyphens:none}
@media (max-width:600px){.day-tabs .n{font-size:.82rem;letter-spacing:.06em}}
.day-panel h3{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:300;text-transform:uppercase;letter-spacing:.04em;margin:0}
.day-panel .desc{color:var(--mist);margin:.8rem 0 1.6rem}
.params{margin:0;display:grid;gap:0}
.params div{display:grid;grid-template-columns:10.5rem 1fr;gap:1rem;padding:.85rem 0;border-top:1px solid var(--line)}
@media (max-width:420px){.params div{grid-template-columns:8.6rem 1fr}}
.params dt{font-size:var(--small);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.params dd{margin:0;font-size:.98rem}
.params .sw{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;margin-right:.5rem;vertical-align:.02em}
.bar-level{display:inline-block;width:5rem;height:4px;background:var(--line);margin-right:.7rem;vertical-align:.2em;position:relative;overflow:hidden;border-radius:2px}
.bar-level i{position:absolute;inset:0 auto 0 0;background:var(--paper);transition:width .8s var(--ease)}
.play{margin-top:1.6rem;display:inline-flex;align-items:center;gap:.7rem;background:none;border:1px solid var(--line-2);border-radius:999px;padding:.6rem 1.2rem;min-height:44px;cursor:pointer;font-size:var(--small);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);transition:border-color .3s,color .3s}
.play:hover{border-color:var(--paper);color:var(--paper)}
.play .ic{width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.play[aria-pressed="true"] .ic{width:8px;height:10px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}
.statement{margin-top:clamp(3.4rem,6vw,5rem);font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.35;max-width:36ch;font-weight:300}
.statement b{color:var(--gold);font-weight:300}

/* ---------- S06 QUALITY ---------- */
.s-quality{background:linear-gradient(180deg,var(--ink) 0%,var(--char) 55%,var(--ink) 100%)}
.spd{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center;margin-bottom:clamp(3rem,6vw,5rem)}
@media (max-width:900px){.spd{grid-template-columns:1fr}}
.spd figure{margin:0}
.spd svg{width:100%;height:auto;display:block;overflow:visible}
.spd .axis-t{fill:var(--faint);font-size:13px;font-family:inherit}
.spd .curve-alt{fill:none;stroke:rgba(247,248,249,.38);stroke-width:1.5;stroke-dasharray:4 5}
.spd .curve{fill:none;stroke:var(--paper);stroke-width:2}
.spd .chroma{display:block;margin-top:.4rem;font-variant-numeric:tabular-nums}
.spd .area{transition:opacity .6s}
.spd-info .k{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:300;margin:.6rem 0 .2rem}
.spd-info p{color:var(--mist);margin:.6rem 0 0}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:1060px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}
.card{background:var(--char);padding:clamp(1.6rem,2.4vw,2.2rem);display:flex;flex-direction:column;min-height:20rem;transition:background .5s}
.card:hover{background:var(--char-2)}
.card .glyph{width:3rem;height:3rem;margin-bottom:2.2rem}
.card h3{font-size:var(--small);font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin:0}
.card .p{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.35;margin:.8rem 0 0;color:var(--paper)}
.card .more{margin-top:auto;padding-top:1.6rem}
.card .toggle{background:none;border:0;padding:0;cursor:pointer;font-size:var(--small);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);display:inline-flex;gap:.6rem;align-items:center;min-height:44px}
.card .toggle::after{content:"+";color:var(--gold);font-size:1.1rem;transition:transform .3s}
.card .toggle[aria-expanded="true"]::after{transform:rotate(45deg)}
.card .detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.card .detail>div{overflow:hidden;color:var(--mist);font-size:.95rem}
.card .detail>div p{margin:.8rem 0 0}
.card.open .detail{grid-template-rows:1fr}

/* ---------- S07 SPACES ---------- */
.s-spaces{background:var(--ink)}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(300px,34vw,520px);gap:clamp(.8rem,1.4vw,1.2rem)}
.gallery .wide{grid-column:span 2}
@media (max-width:960px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(300px,52vw,460px)}.gallery .wide{grid-column:span 2}}
@media (max-width:600px){.gallery{grid-template-columns:1fr;grid-auto-rows:auto}.gallery .wide{grid-column:auto}.space{aspect-ratio:4/5}.space.wide{aspect-ratio:4/3}}
.space{position:relative;overflow:hidden;background:#000}
.space img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.space:hover img{transform:scale(1.025)}
.space::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,8,20,.88) 0%,rgba(0,8,20,.1) 52%,rgba(0,8,20,0) 100%);pointer-events:none}
.space .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1.1rem,2vw,1.6rem);text-shadow:0 1px 12px rgba(0,8,20,.8)}
.space h3{margin:0;font-size:clamp(1.15rem,1.7vw,1.45rem);font-weight:300;letter-spacing:.06em;text-transform:uppercase}
.space .why{margin:.35rem 0 .9rem;font-size:.95rem;color:var(--mist);max-width:44ch}
.space .moments{display:flex;gap:.4rem;flex-wrap:wrap}
.space .moments button{background:rgba(0,8,20,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line-2);border-radius:999px;padding:.4rem .85rem;min-height:40px;font-size:.84rem;cursor:pointer;color:var(--mist);display:inline-flex;align-items:center;gap:.5rem;transition:background .3s,color .3s,border-color .3s}
.space .moments button i{width:.6rem;height:.6rem;border-radius:50%;flex:none}
.space .moments button[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper);font-weight:500}
.cool-note{background:var(--char);border:1px solid var(--line);padding:clamp(1.6rem,2.6vw,2.4rem);display:flex;flex-direction:column;justify-content:space-between}
.cool-note h3{margin:0;font-size:var(--small);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.cool-note p{margin:1rem 0 0;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.5;color:var(--paper)}
.cool-note .scale6{height:6px;border-radius:3px;margin-top:1.6rem}
.cool-note .note{margin-top:.8rem}
.spaces-text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);margin-top:clamp(2.4rem,4vw,3.6rem)}
@media (max-width:860px){.spaces-text{grid-template-columns:1fr}}
.spaces-text p{margin:0;color:var(--mist)}

/* ---------- S08 PHILOSOPHY ---------- */
.s-philo{background:var(--ink);padding-bottom:clamp(3rem,6vw,5rem)}
.philo-h{font-size:clamp(2.2rem,5.4vw,5.4rem);font-weight:300;line-height:1.02;text-transform:uppercase;margin:0;max-width:18ch}
.philo-h.second{color:var(--gold);margin-top:1.4rem}
.philo-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,3vw,3rem);margin-top:clamp(3rem,6vw,5rem);padding-top:2rem;border-top:1px solid var(--line)}
@media (max-width:860px){.philo-body{grid-template-columns:1fr}}
.philo-body p{margin:0;color:var(--mist);font-size:clamp(1.02rem,1.3vw,1.15rem)}
.philo-body p:first-child{color:var(--paper)}
.finale{position:relative;height:280vh;background:var(--ink-2)}
.finale-stick{position:sticky;top:0;height:100svh;overflow:hidden}
.finale img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.finale .f-ev{filter:url(#f-finale)}
.finale .f-day{will-change:opacity}
.finale-stick::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 60%,rgba(3,7,14,0) 30%,rgba(3,7,14,.7) 100%);pointer-events:none}
.finale-k{position:absolute;z-index:2;left:clamp(1.2rem,4vw,3rem);bottom:clamp(1.4rem,4vh,2.4rem);font-size:var(--small);letter-spacing:.1em;color:var(--mist);display:flex;align-items:center;gap:.7rem;font-variant-numeric:tabular-nums}
.finale-k .swatch{width:.7rem;height:.7rem;border-radius:50%}
.finale-end{position:absolute;inset:0;z-index:3;display:grid;place-items:center;text-align:center;opacity:0;transition:opacity .2s linear;background:radial-gradient(70% 60% at 50% 50%,rgba(3,7,14,.82) 0%,rgba(3,7,14,.55) 55%,rgba(3,7,14,.25) 100%)}
.finale-end img{position:static;width:min(380px,62vw);height:auto;object-fit:contain;margin:0 auto}
.finale-end p{margin:1.6rem 0 0;font-size:clamp(1rem,1.8vw,1.4rem);font-weight:300;letter-spacing:.42em;text-transform:uppercase;padding-left:.42em}

/* ---------- REFERENCES / FOOTER ---------- */
.refs{background:var(--ink);padding:clamp(4rem,8vw,6rem) 0 2rem}
.refs details{border-top:1px solid var(--line);padding-top:1rem}
.refs summary{cursor:pointer;list-style:none;font-size:var(--small);letter-spacing:.18em;text-transform:uppercase;color:var(--mist);display:flex;align-items:center;gap:.6rem;min-height:44px}
.refs summary::-webkit-details-marker{display:none}
.refs summary::after{content:"+";color:var(--gold);font-size:1.1rem;transition:transform .3s}
.refs details[open] summary::after{transform:rotate(45deg)}
.refs ol{margin:1rem 0 0;padding-left:1.4rem;color:var(--mist);font-size:.92rem;columns:2;column-gap:3rem}
@media (max-width:800px){.refs ol{columns:1}}
.refs li{margin:0 0 .7rem;break-inside:avoid}
.refs li:target{color:var(--paper)}
.refs .notes{margin-top:1.6rem;color:var(--faint);font-size:var(--small);max-width:90ch}
.refs .notes p{margin:.5rem 0}
.foot{background:var(--ink);border-top:1px solid var(--line);padding:2.6rem 0 3rem;font-size:var(--small);color:var(--faint)}
.foot .row{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.foot img{height:15px;width:auto;margin-bottom:1rem}
.foot address{font-style:normal;line-height:1.7}
.foot address strong{color:var(--mist);letter-spacing:.12em;font-weight:500}
.foot a{text-decoration:none;color:var(--mist)}
.foot .legal{margin-top:1rem;font-size:.8rem;opacity:.85}
.foot .status{text-align:right;line-height:1.7}
@media (max-width:700px){.foot .status{text-align:left}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .hero-img{transform:none}
}

/* ---------- S02b SPECTRUM · Beyond what the eye can see (WIP03) ---------- */
.s-spectrum{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 55%,var(--ink) 100%)}
.spx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.spx-head .sec-head{margin-bottom:0}
.spx-seg{margin-top:0}
.spx-seg button{min-width:6.2rem;font-variant-numeric:tabular-nums}
.spx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.22fr);gap:clamp(2rem,4vw,4rem);align-items:start}
@media (max-width:960px){.spx-grid{grid-template-columns:1fr}}
.layer .lh{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1rem;margin-bottom:1.3rem}
.layer .lh h3{font-size:var(--small);font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin:0;color:var(--paper)}
.ev{display:inline-block;font-size:var(--small);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);line-height:1.4}
.ev-philo{color:var(--gold)}
.spx-view{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000}
.spx-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:url(#f-spec)}
.spx-view::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(0deg,rgba(3,7,14,.72),rgba(3,7,14,0));pointer-events:none}
.spx-view .k{position:absolute;left:1.2rem;bottom:1rem;z-index:2;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300;letter-spacing:.02em;font-variant-numeric:tabular-nums;text-shadow:0 1px 18px rgba(0,8,20,.7)}
.spx-desc{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.4;color:var(--paper);margin:1.2rem 0 0;min-height:2.8em}
.spx-fig{margin:0}
.spx-fig svg{width:100%;height:auto;display:block;overflow:visible}
.spx-fig .axis-t{fill:var(--faint);font-size:13px;font-family:inherit}
.spx-fig .end-t{transition:fill .4s}
.spx-fig .end-t.on{fill:var(--paper)}
.spx-fig .curve{fill:none;stroke:var(--paper);stroke-width:2}
.spx-fig .curve-alt{fill:none;stroke:rgba(247,248,249,.34);stroke-width:1.3;stroke-dasharray:4 5}
.spx-fig .mel{transition:opacity .6s var(--ease)}
.spx-fig .mel-c{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-dasharray:2 4;stroke-linecap:round}
.spx-fig .w-area{fill:rgba(160,214,240,.34);stroke:rgba(190,228,246,.85);stroke-width:1.2}
.spx-fig.mel-off .mel,.spx-fig.mel-off .spx-legend .m{opacity:0}
.spx-fig.mel-off .spx-legend .m{visibility:hidden}
.spx-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.6rem;margin-top:1rem}
.mel-toggle{display:inline-flex;align-items:center;gap:.7rem;background:none;border:1px solid var(--line-2);border-radius:999px;min-height:44px;padding:.45rem 1.1rem .45rem .55rem;font:inherit;font-size:var(--small);letter-spacing:.1em;color:var(--mist);cursor:pointer;transition:border-color .35s,color .35s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mel-toggle .sw{position:relative;width:2.2rem;height:1.25rem;border-radius:999px;background:rgba(247,248,249,.16);transition:background .35s;flex:none}
.mel-toggle .sw::after{content:"";position:absolute;top:.15rem;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--paper);transition:transform .35s var(--ease)}
.mel-toggle[aria-pressed="true"]{color:var(--paper);border-color:rgba(255,200,87,.55)}
.mel-toggle[aria-pressed="true"] .sw{background:var(--gold)}
.mel-toggle[aria-pressed="true"] .sw::after{transform:translateX(.95rem);background:var(--ink)}
.spx-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:var(--small);color:var(--faint)}
.spx-legend li{display:inline-flex;align-items:center;gap:.5rem;transition:opacity .5s}
.spx-legend i{display:inline-block;width:1.4rem;height:0;border-top:2px solid var(--paper);flex:none}
.spx-legend .lg-alt{border-top:1.5px dashed rgba(247,248,249,.5)}
.spx-legend .lg-mel{border-top:2px dotted var(--gold)}
.spx-legend .lg-w{height:.7rem;border:1px solid rgba(190,228,246,.85);background:rgba(160,214,240,.34)}
.spx-fig figcaption{margin-top:1.2rem}
.spx-label{display:block;font-size:var(--small);font-weight:500;letter-spacing:.04em;color:var(--paper);line-height:1.5}
.spx-fig figcaption .note{display:block;margin-top:.4rem}
.spx-story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.4rem,5vw,5rem);margin-top:clamp(3.4rem,7vw,6rem);padding-top:clamp(2.4rem,4vw,3.2rem);border-top:1px solid var(--line)}
@media (max-width:900px){.spx-story{grid-template-columns:1fr}}
.spx-story h3{font-size:clamp(1.55rem,2.6vw,2.3rem);font-weight:300;line-height:1.1;letter-spacing:.01em;text-transform:uppercase;margin:.8rem 0 0;max-width:18ch}
.spx-story p{color:var(--mist);margin:1.1rem 0 1.8rem;max-width:56ch}
.claims{list-style:none;margin:1.6rem 0 0;padding:0;border-top:1px solid var(--line)}
.claims li{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);gap:.3rem 1.4rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.claims b{font-weight:500;font-size:var(--small);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);line-height:1.5;padding-top:.15rem}
.claims span:not(.ev){color:var(--mist);font-size:1rem;line-height:1.5}
.claims .ev{grid-column:2}
@media (max-width:520px){.claims li{grid-template-columns:1fr}.claims .ev{grid-column:1}}
.spx-link{display:flex;justify-content:space-between;align-items:center;gap:1.6rem 3rem;flex-wrap:wrap;margin-top:clamp(2.6rem,5vw,4rem);padding:clamp(1.6rem,3vw,2.2rem) clamp(1.4rem,3vw,2.4rem);background:var(--char);border:1px solid var(--line)}
.spx-link h3{font-size:var(--small);font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin:0}
.spx-link p{margin:.5rem 0 0;color:var(--mist);max-width:52ch}
.spx-link .cta{margin-top:0}
.spx-link .cta .ring::after{transform:translate(-2px,0) rotate(-45deg)}
.spx-tech{margin-top:clamp(2rem,4vw,3rem)}
.spx-tech .body{max-width:74ch}
.qty{margin:1rem 0 0}
.qty dt{font-weight:500;color:var(--paper);margin-top:1.1rem;font-size:.95rem}
.qty dd{margin:.25rem 0 0}
.formula{font-family:inherit;font-size:.95rem;line-height:2;color:var(--paper);background:var(--char);border:1px solid var(--line);padding:1rem 1.2rem;margin:1.4rem 0;white-space:pre-wrap;overflow-wrap:anywhere}
.spx-tech h4{font-size:var(--small);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);margin:1.8rem 0 .2rem}
.mdr{border-collapse:collapse;width:100%;max-width:34rem;margin:1rem 0;font-size:.95rem}
.mdr th,.mdr td{text-align:left;padding:.55rem .2rem;border-bottom:1px solid var(--line);font-weight:300}
.mdr thead th{font-weight:500;font-size:var(--small);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.mdr td{text-align:right;font-variant-numeric:tabular-nums;color:var(--paper);white-space:nowrap}
.mdr thead th:last-child{text-align:right}
@media (max-width:640px){.spx-fig .axis-t{font-size:19px}.spx-fig .curve{stroke-width:2.6}.spx-fig .curve-alt{stroke-width:1.8}.spx-fig .mel-c{stroke-width:2.2}}

/* ---------- S02b · melanopic DER indicator (RC1): fixed 0–1 scale, D65 = 1 ---------- */
.mder{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.mder-h{font-size:var(--small);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);margin:0 0 .7rem}
.mder-rows{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.mder-rows li{display:grid;grid-template-columns:4.4rem minmax(0,1fr) 3.4rem;align-items:center;gap:.9rem;font-size:var(--small);color:var(--faint);font-variant-numeric:tabular-nums;transition:color .45s var(--ease)}
.mder-rows .bar{position:relative;height:.5rem;border-radius:999px;background:rgba(247,248,249,.08);box-shadow:inset -1px 0 0 rgba(247,248,249,.38)}
.mder-rows .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:rgba(160,214,240,.32);transition:width 1.1s var(--ease),background .45s var(--ease)}
.mder-rows .v{text-align:right}
.mder-rows li.on{color:var(--paper)}
.mder-rows li.on .t,.mder-rows li.on .v{font-weight:500}
.mder-rows li.on .bar i{background:rgba(190,228,246,.95)}
.spx-grid:not(.in) .mder-rows .bar i{width:0!important}
.mder-scale{display:flex;justify-content:space-between;margin:.35rem 0 0 calc(4.4rem + .9rem);margin-right:calc(3.4rem + .9rem);font-size:.78rem;letter-spacing:.06em;color:var(--faint)}
.mder .note{margin-top:.9rem}
@media (max-width:520px){.mder-rows li{grid-template-columns:3.9rem minmax(0,1fr) 3rem;gap:.7rem}.mder-scale{margin-left:calc(3.9rem + .7rem);margin-right:calc(3rem + .7rem)}}
.refs ol a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2);overflow-wrap:anywhere}
.refs ol a:hover{color:var(--paper)}