/* Night variant: the museum experience. Dark room, light only from showcases and minerals. */
html.night{background:#0b0a09}
body.night{--paper:#0b0a09;--panel:#141210;--ink:#d8d0c1;--muted:#958c7d;--line:#2c2823;background:#0b0a09;color:var(--ink)}
body.night.home .masthead{position:absolute;top:0;left:0;right:0;z-index:5}
body.night .logo-day{display:none}body.night .logo-night{display:inline-block}
body.night .index{background:#0b0a09}
body.night .signoff img{mix-blend-mode:normal;filter:invert(1) sepia(.35) brightness(.9);opacity:.9}
body.night a:hover{text-decoration-color:var(--ink)}
body.night strong{color:#e6dfd1}
body.night .button{border-color:#6b6358}
body.night .button:hover{background:var(--ink);color:#0b0a09}
body.night .colophon{background:#070606;border-top:1px solid #1c1a17}
body.night .pub p{color:#cfc8bb}
body.night .pub a.cover img{box-shadow:0 0 0 1px #1a1815}
body.night .chapter .rule,body.night hr{border-color:var(--line)}

/* hero: text in the dark, a lit showcase beside it */
.n-hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,5vw,5rem);max-width:84rem;margin:0 auto;padding:7rem clamp(1.25rem,4vw,3.5rem) 3rem}
.n-hero-text{max-width:32rem;justify-self:end}
.n-hero-text .label{display:block;margin-bottom:1.6rem}
.n-hero h1{margin:0;max-width:12ch}
.n-hero .rule{width:3rem;height:1px;background:var(--muted);border:0;margin:2.2rem 0}
.n-hero .lede{color:#d9d1c2}
.n-hero-img{margin:0;justify-self:start}
.n-hero-img img{max-height:86vh;width:auto;-webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 48%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 70% 62% at 50% 48%,#000 55%,transparent 100%)}

/* wide showcase strip fading into the room */
.n-strip{width:min(1080px,calc(100% - 2*clamp(1.5rem,6vw,5rem)));margin:clamp(2rem,6vh,5rem) auto 0}
.n-strip img{display:block;width:100%;max-height:78vh;object-fit:cover;outline:1px solid rgba(255,240,215,.08);outline-offset:-1px;box-shadow:0 30px 80px rgba(0,0,0,.55)}

/* specimens as lit objects */
.n-specimens{padding-bottom:clamp(4rem,10vh,8rem)}
.n-specimens .square{background:#0b0a09}
.n-specimens .square img{transition:transform 1.2s cubic-bezier(.2,.6,.2,1),filter 1.2s}
.n-specimens .square:hover img{transform:scale(1.035);filter:brightness(1.08)}

/* the room */
.n-room{padding:clamp(3rem,8vh,6rem) clamp(1.25rem,4vw,3.5rem)}
.n-room figure img{width:100%}
.glow{position:relative}
.glow::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 6rem 2rem #0b0a09}
.n-hero-img.glow::after{display:none}
.n-material{margin:clamp(3rem,8vh,6rem) auto 0;max-width:60rem;padding:0 clamp(1.25rem,4vw,3.5rem)}
.n-material img{width:100%;max-height:80vh;object-fit:cover;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 50%,transparent 100%);mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 50%,transparent 100%)}

/* slow reveal, as if eyes adjust to the dark */
html.js .rise{opacity:0;transform:translateY(1.5rem);filter:brightness(.4);transition:opacity 1.6s ease,transform 1.6s cubic-bezier(.2,.6,.2,1),filter 2.2s ease}
html.js .rise.lit{opacity:1;transform:none;filter:none}
.n-hero{animation:dawn 2.4s ease both}
@keyframes dawn{from{opacity:0;filter:brightness(.3)}to{opacity:1;filter:none}}

@media (max-width:820px){
  .n-hero{grid-template-columns:1fr;min-height:0;padding-top:6rem;gap:1.5rem}
  .n-hero-img{order:-1;justify-self:center}
  .n-hero-img img{max-height:70vh}
  .n-hero-text{justify-self:start}
}
@media (prefers-reduced-motion:reduce){html.js .rise{opacity:1;transform:none;filter:none}}

/* Region map (Visits): own dark map, museum as the only light */
.tmap{max-width:56rem}
.tmap-c{position:relative;line-height:1}
.tmap-c img{display:block;width:100%;height:auto}
.tmap-c span{position:absolute;font-family:var(--sans);white-space:nowrap;pointer-events:none}
.tm-country{transform:translate(-50%,-50%);font-size:clamp(.5rem,1.05vw,.66rem);letter-spacing:.42em;text-transform:uppercase;color:#4a443b;font-weight:400}
.tm-city{transform:translate(0,-50%);font-size:clamp(.5rem,1.05vw,.68rem);letter-spacing:.08em;color:#7d7568;font-weight:300;padding-left:.75em}
.tm-city::before{content:"";position:absolute;left:0;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:#7d7568}
.tm-pt{font-size:clamp(.55rem,1.2vw,.74rem);letter-spacing:.16em;text-transform:uppercase;color:#d9d1c2;line-height:1.45}
.tm-pt b,.tm-pt i{display:block;font-weight:400;font-style:normal}
.tm-pt i{color:#958c7d;letter-spacing:.1em;font-weight:300;text-transform:none;font-size:1.05em}
.tm-pt.r{transform:translate(.6em,-50%)}
.tm-pt.l{transform:translate(calc(-100% - .6em),-50%);text-align:right}
.tm-pt.b{transform:translate(-50%,.5em);text-align:center}
.tm-pt.main b{color:#f4dfb3;letter-spacing:.2em}
@media (max-width:640px){.tm-country,.tm-city{display:none}.tmap{margin-left:-.5rem;margin-right:-.5rem}}

/* Museum guide shown as a lit phone screen in the dark room */
figure.phone{display:flex;justify-content:center;margin:0}
.phone-screen{position:relative;display:block;width:min(17rem,100%);aspect-ratio:9/16;padding:.55rem;border-radius:2.4rem;background:#1a1816;box-shadow:inset 0 0 0 1px #34302a,0 0 0 1px #050404,0 0 60px rgba(255,240,215,.07),0 30px 60px rgba(0,0,0,.6)}
.phone-screen::before{content:"";position:absolute;top:1.05rem;left:50%;width:4.2rem;height:1.05rem;margin-left:-2.1rem;border-radius:1rem;background:#0b0a09;z-index:2}
.phone-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;background:#fff;border-radius:1.9rem;filter:brightness(.93)}

/* Floor plan (The Museum): dark plan, lit showcases */
.fplan{max-width:52rem}
.fplan-c{position:relative;line-height:1}
.fplan-c img{display:block;width:100%;height:auto}
.fplan-c span{position:absolute;font-family:var(--sans);white-space:nowrap;pointer-events:none;transform:translate(-50%,-50%)}
.fp-room{font-size:clamp(.55rem,1.3vw,.8rem);letter-spacing:.32em;text-transform:uppercase;color:#958c7d;font-weight:400}
.fp-num{font-size:clamp(.5rem,1.15vw,.78rem);color:#e9e2d4;font-weight:400;letter-spacing:.04em}
.fp-sp{transform:translate(-100%,-50%)!important;text-align:right;font-size:clamp(.5rem,1.05vw,.68rem);letter-spacing:.16em;text-transform:uppercase;color:#f4dfb3;line-height:1.5;padding-right:.4em}
.fp-in{transform:translate(0,-50%)!important;font-size:clamp(.5rem,1vw,.66rem);letter-spacing:.24em;text-transform:uppercase;color:#c9a96e}
.plate:has(.radar){max-width:46rem}
.radar{display:block;width:100%;height:auto;margin:0 auto;overflow:visible;font-family:var(--sans)}
.radar .ring,.radar .spoke{fill:none;stroke:var(--line);stroke-width:1}
.radar .shape{fill:var(--ink);fill-opacity:.07;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
.radar .dot{fill:var(--paper);stroke:var(--ink);stroke-width:1.2}
.radar .lbl{fill:var(--ink);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:300}
.radar .num{fill:var(--muted)}
/* Chapter opening: one whole specimen, all four edges fading into the dark */
.specimen-head{max-width:38rem;margin:2.5rem auto 1rem;padding:0 1.25rem}
.specimen-head img{display:block;width:100%;height:auto;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 11%,#000 89%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 9%,#000 84%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(to right,transparent 0,#000 11%,#000 89%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 9%,#000 84%,transparent 100%);
mask-composite:intersect}
.specimen-head figcaption{margin-top:.2rem}

/* Homepage rhythm (2026-10-20): black gaps between the picture blocks about a third tighter */
body.home .n-hero{padding-bottom:2rem}
body.home .n-strip{margin-top:clamp(1.5rem,4vh,3rem)}
body.home main > .section{padding-top:clamp(2.5rem,6vh,4.75rem);padding-bottom:clamp(2.5rem,6vh,4.75rem)}
body.home .n-specimens{padding-bottom:clamp(2.5rem,6vh,4.75rem)}
body.home .n-room{padding-top:clamp(1rem,3vh,2rem);padding-bottom:clamp(1rem,3vh,2rem)}
body.home .n-room .pair + .pair{margin-top:clamp(2.5rem,6vh,4.75rem)}
/* Keep the collection's name together on one line in the hero */
.n-hero h1{max-width:none}
@media (min-width:600px){.n-hero h1 .name{white-space:nowrap}}
@media (min-width:600px){.n-hero h1{font-size:clamp(2.2rem,4vw,3.15rem)}}

/* sign-up: choosing a tour date and registering */
.signup .dates{list-style:none;margin:2.4rem 0 0;padding:0;border-top:1px solid var(--line)}
.signup .date{display:flex;align-items:center;gap:1.2rem;padding:1.3rem .4rem;border-bottom:1px solid var(--line);cursor:pointer;transition:background .2s}
.signup .date:hover{background:var(--panel)}
.signup .date input{accent-color:#d8d0c1;width:1.05rem;height:1.05rem;margin:0;flex:none}
.signup .date .w{flex:1;font-family:var(--display);font-size:1.3rem;line-height:1.35}
.signup .date .w small{display:block;font-family:var(--serif);font-size:.95rem;color:var(--muted);margin-top:.2rem}
.signup .date .left{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.signup .date.full{cursor:default;opacity:.45}
.signup .date:has(input:checked){background:var(--panel)}
.signup .fields{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1.8rem;margin-top:2.6rem}
.signup .fields .wide{grid-column:1/-1}
.signup label.f{display:block}
.signup label.f span{display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}
.signup input[type=text],.signup input[type=email],.signup input[type=tel],.signup select,.signup textarea{width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1px solid #4a443c;color:var(--ink);font:inherit;font-size:1.1rem;padding:.45rem 0;border-radius:0;outline:none}
.signup select{appearance:none;cursor:pointer}
.signup select option{background:#141210}
.signup textarea{resize:vertical;min-height:3rem}
.signup input:focus,.signup select:focus,.signup textarea:focus{border-bottom-color:var(--ink)}
.signup .submit{margin-top:2.8rem;text-align:center}
.signup .submit button,.signup form.cancel button{position:static;font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);background:none;border:1px solid #6b6358;padding:1rem 2.4rem;cursor:pointer;line-height:1.4}
.signup .submit button:hover,.signup form.cancel button:hover{background:var(--ink);color:#0b0a09}
.signup .notice{border:1px solid #6b5a3c;color:#e6d6b5;padding:1rem 1.2rem;margin:2rem 0 0}
.signup .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.signup .ticket{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:1.8rem 0;margin:2.2rem 0;text-align:center}
.signup .ticket .w{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.3}
.signup .ticket p{margin:.6rem 0 0;color:var(--muted)}
.signup .ticket.off .w{text-decoration:line-through;color:var(--muted)}
@media (max-width:40rem){.signup .fields{grid-template-columns:1fr}.signup .date{flex-wrap:wrap}.signup .date .left{margin-left:2.25rem}}