/* Layout: a dark gallery read like a film reel. Liquid-chrome hero, then four chapters of "frames"
   (each work captioned like a slate), a process line, a statement, and contact. Single dark theme by choice:
   Baroque chiaroscuro meets Nordic night and a silver, chrome future. */
:root{
  --night:#0b0c10;      /* Nordic night, slightly blue */
  --shadow:#14120f;     /* Baroque umber shadow */
  --panel:#17181d;      /* raised surface */
  --line:#2a2c33;       /* hairline */
  --chrome:#c8ccd3;     /* silver */
  --ivory:#ebe5d9;      /* birch paper, main text */
  --muted:#8d929c;      /* secondary text */
  --frost:#93a8b8;      /* Nordic blue-grey, labels */
  --gilt:#b99559;       /* candle gold, the single accent */
  --f-display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --f-body:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --s-1:.75rem; --s0:1rem; --s1:1.25rem; --s2:1.75rem; --s3:2.6rem; --s4:4rem; --s5:6.5rem;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
img{max-width:100%}
html{scroll-behavior:smooth}
body{background:var(--night);color:var(--ivory);font-family:var(--f-body);font-weight:300;font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--night)}
a{color:inherit}
:focus-visible{outline:1px solid var(--gilt);outline-offset:3px}
.wrap{max-width:1240px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.label{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--frost)}

/* NAV */
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--night) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s1);padding-block:.9rem}
.mark{font-family:var(--f-display);font-size:1.45rem;letter-spacing:.12em;text-decoration:none;white-space:nowrap}
.mark span{color:var(--gilt)}
.nav ul{display:flex;gap:var(--s2);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav ul a{text-decoration:none;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.nav ul a:hover{color:var(--ivory)}
/* Music toggle: four thin bars that sway while the music plays, still and low when it's off */
.music{display:inline-flex;align-items:center;gap:.55rem;margin-left:auto;padding:.45rem .2rem .45rem .6rem;background:none;border:0;cursor:pointer;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.music:hover{color:var(--ivory)}
.music[aria-pressed="true"]{color:var(--gilt)}
.music .bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.music .bars i{display:block;width:2px;height:3px;background:currentColor;transition:height .4s}
.music.is-playing .bars i{animation:sway 1.6s ease-in-out infinite}
.music.is-playing .bars i:nth-child(2){animation-delay:-.5s;animation-duration:1.3s}
.music.is-playing .bars i:nth-child(3){animation-delay:-1.1s;animation-duration:1.9s}
.music.is-playing .bars i:nth-child(4){animation-delay:-.3s;animation-duration:1.45s}
@keyframes sway{0%,100%{height:3px}50%{height:12px}}
@media (prefers-reduced-motion:reduce){.music.is-playing .bars i{animation:none;height:9px}}

/* HERO */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(120% 90% at 70% 30%,#3a3d45 0%,#15161b 45%,var(--night) 75%)}
#chrome{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--night) 0%,color-mix(in srgb,var(--night) 70%,transparent) 38%,transparent 70%),
             linear-gradient(0deg,var(--night) 0%,transparent 30%)}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(5rem,14vw,10rem) clamp(3.5rem,8vw,6rem)}
.hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2.9rem,8.2vw,7rem);line-height:.96;letter-spacing:-.02em;margin:var(--s1) 0 var(--s2);max-width:11ch;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--chrome);
  background:linear-gradient(100deg,#f4f5f7 0%,#9ea3ab 30%,#e9ebee 48%,#7f848d 66%,#d9dce1 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p.lede{max-width:44ch;font-size:clamp(1rem,1.6vw,1.18rem);color:color-mix(in srgb,var(--ivory) 85%,var(--night))}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s0);margin-top:var(--s3)}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.5rem;font-family:var(--f-body);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border:1px solid var(--chrome);color:var(--ivory);background:transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--ivory);color:var(--night);border-color:var(--ivory)}
.btn.ghost{border-color:var(--line);color:var(--muted)}
.btn.ghost:hover{background:transparent;color:var(--ivory);border-color:var(--chrome)}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}
.hero-meta div{display:grid;gap:.2rem}
.hero-meta b{font-family:var(--f-display);font-weight:400;font-size:1.6rem;color:var(--ivory)}

/* CHAPTERS */
section.chapter{padding-block:var(--s5) var(--s4);border-bottom:1px solid var(--line)}
.ch-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s3);align-items:end;margin-bottom:var(--s3)}
.ch-head h2{font-family:var(--f-display);font-weight:400;font-size:clamp(2.2rem,5vw,4rem);line-height:1;margin:.6rem 0 0;text-wrap:balance}
.ch-head h2 i{color:var(--gilt)}
.ch-head p{margin:0;max-width:52ch;color:color-mix(in srgb,var(--ivory) 78%,var(--night))}
.ch-num{font-family:var(--f-display);font-style:italic;color:var(--gilt);font-size:1rem;letter-spacing:.05em}

.reel{display:grid;gap:var(--s1);grid-template-columns:repeat(12,minmax(0,1fr))}
.frame{position:relative;margin:0;min-width:0}
.frame .plate{position:relative;width:100%;max-width:100%;overflow:hidden;background:var(--panel);aspect-ratio:var(--ar,4/5)}
.frame .plate > .art{position:absolute;inset:0;transition:transform 1.2s cubic-bezier(.2,.7,.1,1),filter 1.2s}
.frame:hover .plate > .art{transform:scale(1.04);filter:brightness(1.08)}
.frame .slot{position:absolute;left:.8rem;bottom:.7rem;right:.8rem;display:flex;justify-content:space-between;gap:.5rem;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--ivory) 70%,transparent)}
.frame figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s0);padding-top:.7rem;border-top:1px solid var(--line);margin-top:.7rem}
.frame figcaption h3{font-family:var(--f-display);font-weight:400;font-size:1.15rem;margin:0;line-height:1.2}
.frame figcaption .label{white-space:nowrap}
.span-7{grid-column:span 7}.span-5{grid-column:span 5}.span-4{grid-column:span 4}.span-6{grid-column:span 6}.span-8{grid-column:span 8}.span-3{grid-column:span 3}
.drop{margin-top:var(--s4)}

/* art studies: stand-ins for the real work, painted with light */
.a-myth{background:
  radial-gradient(38% 46% at 52% 40%,#e9e1cf 0%,#a88a5a 22%,transparent 58%),
  radial-gradient(70% 60% at 30% 90%,#2b3a46 0%,transparent 70%),
  conic-gradient(from 200deg at 52% 42%,#0b0c10,#3b3226,#0b0c10,#22303a,#0b0c10)}
.a-forest{background:
  repeating-linear-gradient(92deg,transparent 0 22px,rgba(235,229,217,.06) 22px 24px,transparent 24px 61px),
  radial-gradient(60% 40% at 50% 18%,#dfe6ea 0%,#6f8798 30%,transparent 70%),
  linear-gradient(180deg,#1d262d 0%,#0b0c10 80%)}
.a-orb{background:
  radial-gradient(22% 22% at 50% 46%,#fbfbfc 0%,#bfc3ca 30%,#4d5058 70%,transparent 72%),
  radial-gradient(60% 50% at 50% 100%,#3a2e21 0%,transparent 70%),
  linear-gradient(180deg,#101116,#1c1a17)}
.a-face{background:
  radial-gradient(26% 34% at 62% 42%,#e7d6bd 0%,#b28d63 30%,#3b2a1c 62%,transparent 75%),
  linear-gradient(90deg,#0b0c10 0%,#0b0c10 40%,#20180f 100%)}
.a-street{background:
  linear-gradient(180deg,transparent 55%,rgba(147,168,184,.25) 56%,transparent 72%),
  radial-gradient(18% 60% at 30% 60%,#cfd7dd 0%,transparent 70%),
  radial-gradient(14% 40% at 74% 52%,#b99559 0%,transparent 70%),
  linear-gradient(180deg,#232a31,#0b0c10)}
.a-skin{background:
  radial-gradient(50% 60% at 40% 50%,#d9c3a6 0%,#9d7b59 40%,#2a1f16 80%),
  linear-gradient(180deg,#14120f,#0b0c10)}
.a-chrome{background:
  linear-gradient(115deg,#0b0c10 0%,#4b4f57 18%,#f2f3f5 26%,#6d727b 34%,#15161b 46%,#a9aeb6 58%,#ffffff 63%,#5b5f67 70%,#0b0c10 88%)}
.a-gown{background:
  radial-gradient(30% 70% at 50% 70%,#f0eee9 0%,#b7bcc4 35%,transparent 70%),
  radial-gradient(14% 14% at 50% 18%,#e6d4ba 0%,transparent 100%),
  linear-gradient(180deg,#2c3540 0%,#0b0c10 100%)}
.a-veil{background:
  repeating-radial-gradient(circle at 50% 40%,rgba(235,229,217,.0) 0 6px,rgba(235,229,217,.06) 6px 7px),
  radial-gradient(40% 50% at 50% 40%,#c8ccd3 0%,#585c63 50%,transparent 80%),
  linear-gradient(180deg,#121318,#0b0c10)}
.a-dune{background:
  radial-gradient(120% 50% at 50% 110%,#b99559 0%,#5e4628 40%,transparent 70%),
  radial-gradient(10% 10% at 70% 30%,#f4efe5 0%,transparent 100%),
  linear-gradient(180deg,#1f242b 0%,#3a2f22 70%,#0b0c10 100%)}
.a-tide{background:
  repeating-linear-gradient(168deg,rgba(200,204,211,.0) 0 14px,rgba(200,204,211,.08) 14px 16px),
  radial-gradient(70% 40% at 50% 60%,#93a8b8 0%,#2b3a46 50%,transparent 80%),
  linear-gradient(180deg,#0b0c10,#18212a)}
.a-ember{background:
  radial-gradient(30% 30% at 40% 55%,#e8c38a 0%,#9b6a32 30%,transparent 65%),
  radial-gradient(50% 50% at 75% 30%,#2b3a46 0%,transparent 70%),
  linear-gradient(180deg,#0b0c10,#14120f)}

/* films */
.play{position:absolute;inset:0;display:grid;place-items:center}
.play span{width:64px;height:64px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ivory) 70%,transparent);display:grid;place-items:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:transform .3s,background .3s}
.play span::before{content:"";margin-left:4px;border-left:13px solid var(--ivory);border-top:8px solid transparent;border-bottom:8px solid transparent}
.frame:hover .play span{transform:scale(1.08);background:color-mix(in srgb,var(--ivory) 12%,transparent)}
.tc{position:absolute;top:.7rem;left:.8rem;right:.8rem;display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;color:var(--ivory)}
.tc .rec{color:var(--gilt)}

/* PROCESS */
.process{padding-block:var(--s5);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--night),var(--shadow))}
.process h2{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,4.4vw,3.4rem);margin:.6rem 0 var(--s3);max-width:18ch;text-wrap:balance;line-height:1.05}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.steps li{padding:var(--s2) var(--s1) var(--s1) 0;border-right:1px solid var(--line);min-width:0}
.steps li + li{padding-left:var(--s1)}
.steps li:last-child{border-right:0}
.steps .n{font-family:var(--f-display);font-style:italic;color:var(--gilt);font-size:1.6rem}
.steps h3{font-family:var(--f-body);font-weight:500;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;margin:.8rem 0 .5rem}
.steps p{margin:0;color:var(--muted);font-size:.95rem}

/* STATEMENT */
.statement{padding-block:var(--s5);border-bottom:1px solid var(--line)}
.statement .grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s4);align-items:start}
.portrait{aspect-ratio:3/4;max-width:100%;position:relative;overflow:hidden}
.statement blockquote{margin:0;font-family:var(--f-display);font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.18;text-wrap:balance}
.statement blockquote em{color:var(--gilt)}
.statement .body{margin-top:var(--s2);max-width:58ch;color:color-mix(in srgb,var(--ivory) 80%,var(--night))}
.tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s2);padding:0;list-style:none}
.tools li{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .7rem;border:1px solid var(--line);color:var(--frost)}

/* CONTACT */
.contact{padding-block:var(--s5) var(--s4)}
.contact h2{font-family:var(--f-display);font-weight:400;font-size:clamp(2.4rem,6vw,5rem);line-height:1;margin:.6rem 0 var(--s2);text-wrap:balance}
.contact h2 em{color:var(--chrome)}
.contact .grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s4)}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s0);margin-top:var(--s2)}
.mail code{font-family:var(--f-mono);font-size:1.05rem;color:var(--ivory);user-select:all;border-bottom:1px solid var(--gilt);padding-bottom:.2rem}
.services{list-style:none;margin:0;padding:0;display:grid;gap:0}
.services li{display:flex;justify-content:space-between;gap:var(--s1);padding:var(--s0) 0;border-bottom:1px solid var(--line)}
.services li span:first-child{font-family:var(--f-display);font-size:1.15rem}
.toast{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;color:var(--gilt)}

footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s0);padding-block:var(--s2)}
footer .wrap{align-items:center}
footer .ig{padding:.6rem 1.1rem;font-size:.72rem}
footer .rights{flex-basis:100%;margin:0;font-size:.72rem;line-height:1.5;letter-spacing:.02em;color:color-mix(in srgb,var(--ivory) 45%,var(--night))}

/* responsive */
@media (max-width:900px){
  .ch-head,.statement .grid,.contact .grid{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .span-7,.span-5,.span-8,.span-6{grid-column:span 12}
  .span-4,.span-3{grid-column:span 6}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps li:nth-child(2){border-right:0}
  .steps li:nth-child(3){padding-left:0}
  .steps li:nth-child(n+3){border-top:1px solid var(--line)}
  .nav ul{display:none}
}
@media (max-width:520px){
  .span-4,.span-3{grid-column:span 12}
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps li,.steps li + li{border-right:0;padding-left:0;border-top:1px solid var(--line)}
  .hero-meta{gap:var(--s2)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .frame .plate > .art,.play span{transition:none}
}

/* ---- real works ---- */
.frame .plate img,.frame .plate video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.frame:hover .plate img,.frame:hover .plate video{transform:scale(1.03)}
.frame button.open{all:unset;cursor:zoom-in;display:block;position:relative;width:100%}
.frame button.open:focus-visible{outline:1px solid var(--gilt);outline-offset:3px}
.soon{margin-top:var(--s2);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.soon b{color:var(--gilt);font-weight:500}

/* lightbox */
.lb{position:fixed;inset:0;z-index:50;background:var(--night);display:grid;grid-template-rows:1fr auto;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lb .stage{min-height:0;position:relative}
.lb img,.lb video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lb .bar{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s1);padding-top:var(--s0)}
.lb .bar h3{font-family:var(--f-display);font-weight:400;font-size:1.3rem;margin:0}
.lb .close{position:absolute;z-index:2;background:var(--night);top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px)}

/* contact form */
form.inquiry{display:grid;gap:var(--s0);margin-top:var(--s2)}
form.inquiry .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s0)}
form.inquiry label{display:grid;gap:.35rem}
form.inquiry input,form.inquiry select,form.inquiry textarea{font:inherit;font-weight:300;color:var(--ivory);background:var(--panel);border:1px solid var(--line);padding:.75rem .9rem;border-radius:0;width:100%}
form.inquiry textarea{min-height:8rem;resize:vertical}
form.inquiry input:focus,form.inquiry select:focus,form.inquiry textarea:focus{outline:none;border-color:var(--gilt)}
form.inquiry .send{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s0)}
@media (max-width:520px){form.inquiry .row{grid-template-columns:minmax(0,1fr)}}

/* justified rows: every frame in a row shares one height, widths follow each work's aspect ratio */
.reel.justified{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2)}
.reel.justified .row{display:flex;gap:var(--s1);align-items:flex-start}
.reel.justified .frame{min-width:0}
@media (max-width:640px){.reel.justified .row{flex-direction:column;gap:var(--s2)}.reel.justified .frame{flex:none!important;width:100%}}

/* Chapter V: the instrument */
.instrument{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#3a3d45 0%,#15161b 55%,var(--night) 85%);border:1px solid var(--line)}
@media (max-width:700px){.instrument{aspect-ratio:3/4}}
#instrument,#ink{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;-webkit-tap-highlight-color:transparent}
#resonance{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;-webkit-tap-highlight-color:transparent}
#instrument:focus-visible,#ink:focus-visible,#resonance:focus-visible{outline:1px solid var(--gilt);outline-offset:-1px}
.inst-hint{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transition:opacity .8s}
.inst-hint .label{padding:.7rem 1.1rem;border:1px solid color-mix(in srgb,var(--ivory) 45%,transparent);color:var(--ivory);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:color-mix(in srgb,var(--night) 35%,transparent)}
.inst-hint.gone{opacity:0}
.inst-scale{position:absolute;left:.9rem;right:.9rem;bottom:.7rem;display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--ivory) 70%,transparent);pointer-events:none}
.inst-note{position:absolute;transform:translate(-50%,-160%);font-family:var(--f-display);font-style:italic;font-size:1.6rem;color:var(--ivory);text-shadow:0 1px 12px rgba(0,0,0,.6);pointer-events:none;opacity:0}
.inst-note.show{animation:note 1.4s ease-out forwards}
@keyframes note{0%{opacity:0;transform:translate(-50%,-120%)}12%{opacity:1}100%{opacity:0;transform:translate(-50%,-260%)}}
@media (prefers-reduced-motion:reduce){.inst-note.show{animation:none;opacity:1}}

/* Chapter VI: thick oils on a black ground */
.ink-bowl{background:#030304}
.ink-bowl .inst-scale{color:rgba(246,242,234,.55)}
.ink-bowl .inst-hint .label{color:var(--ivory);border-color:rgba(246,242,234,.3);background:rgba(3,3,4,.55)}
.ink-bowl .inst-note{text-shadow:0 1px 12px rgba(0,0,0,.8)}
.ink-fallback{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:var(--s2);text-align:center;color:var(--ivory)}
.sound-btn{position:absolute;top:.8rem;right:.8rem;z-index:3;padding:.55rem .9rem;font-size:.68rem;background:color-mix(in srgb,var(--night) 55%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sound-btn[aria-pressed="true"]{border-color:var(--gilt);color:var(--gilt)}
.ink-bowl .sound-btn{background:rgba(3,3,4,.6);color:var(--ivory);border-color:rgba(246,242,234,.35)}
.ink-bowl .sound-btn[aria-pressed="true"]{color:var(--gilt);border-color:var(--gilt)}
.ink-bowl .sound-btn:hover{background:var(--ivory);color:#030304}
/* phones: the headline spans the whole width, so darken the chrome evenly behind it */
@media (max-width:700px){
  .hero::after{background:linear-gradient(90deg,color-mix(in srgb,var(--night) 78%,transparent),color-mix(in srgb,var(--night) 55%,transparent)),
                          linear-gradient(0deg,var(--night) 0%,transparent 30%)}
}

/* Chapter VII: Resonance (sand plate) */
.res-plate{background:#07080a}
.res-note{position:absolute;top:.9rem;left:1rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;color:var(--gilt);pointer-events:none;opacity:0;transition:opacity .25s}
.res-note.on{opacity:.9}
.res-plate .inst-hint .label{background:rgba(7,8,10,.55)}