/* Veladora Supply — v1. Tokens from DESIGN.md (2026-10-30). */
:root{
  --night:#000307; --candle:#DD852A; --bone:#EDE6DA; --bone-dim:#A79E8F; --navy:#161F2B;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--night)}
body{
  background:var(--night); color:var(--bone); font-family:var(--sans);
  font-size:1.125rem; line-height:1.5; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:inherit}

/* the visitor's candle */
#glow{
  position:fixed; left:0; top:0; width:520px; height:520px; margin:-260px 0 0 -260px;
  border-radius:50%; pointer-events:none; z-index:5; mix-blend-mode:screen; opacity:0;
  background:radial-gradient(circle, rgba(221,133,42,.20) 0%, rgba(221,133,42,.07) 38%, rgba(221,133,42,0) 68%);
  transition:opacity 2.4s ease;
}
body.lit #glow{opacity:1}
@media (prefers-reduced-motion: reduce){ #glow{display:none} }

/* kindling */
.kindle{opacity:0; transform:translateY(6px); transition:opacity 1.8s ease, transform 1.8s ease}
.kindle.on{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .kindle{opacity:1; transform:none; transition:none} }

/* header on inner pages */
header.top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem clamp(1.25rem, 5vw, 3rem);
}
header.top .brand{display:flex; align-items:center; gap:.8rem; text-decoration:none}
header.top .brand img{width:42px; height:42px}
header.top .brand span{
  font-family:var(--serif); font-weight:600; letter-spacing:.16em; font-size:.95rem; color:var(--bone);
}
nav.doors{display:flex; flex-wrap:wrap; gap:1.1rem 1.6rem}
nav.doors a{
  font-size:.8rem; font-weight:500; letter-spacing:.14em; text-decoration:none; color:var(--bone-dim);
}
nav.doors a:hover, nav.doors a:focus{color:var(--bone)}

/* entrance */
body.entrance main{
  height:100vh; height:100dvh; display:grid; justify-items:center; align-items:center;
  grid-template-rows:minmax(0, 1fr) auto auto;
  padding:1.2rem 1rem 1.2rem; row-gap:.9rem;
}
.entrance-poster{min-height:0; height:100%; width:auto; max-width:min(96vw, 820px); object-fit:contain}
.entrance-doors{justify-content:center}
.entrance .gold-door{margin-top:.1rem}

/* gold door: one per room */
.gold-door{
  display:inline-block; font-size:.85rem; font-weight:500; letter-spacing:.14em;
  color:var(--candle); text-decoration:none; border:1px solid rgba(221,133,42,.45);
  padding:.65rem 1.2rem; border-radius:2px;
}
.gold-door:hover, .gold-door:focus{border-color:var(--candle); color:var(--bone)}

/* rooms */
main.room{padding:0 clamp(1.5rem, 6vw, 5rem) 4rem; max-width:1200px; margin:0 auto}
figure.art{margin-top:1rem}
figure.art img{margin:0 auto; max-height:76vh; width:auto; max-width:100%}
figure.worn{margin-top:2.5rem; display:grid; gap:1rem}
figure.worn img{width:100%; height:auto}
figure.worn.two{grid-template-columns:1fr 1fr}
figure.worn.three{grid-template-columns:repeat(3, 1fr)}
@media (max-width:720px){ figure.worn.two, figure.worn.three{grid-template-columns:1fr} }
.placard{margin-top:2.75rem; max-width:62ch}
.placard h1{
  font-family:var(--serif); font-weight:600; letter-spacing:.16em; line-height:1.1;
  font-size:clamp(1.75rem, 4vw, 2.5rem); text-transform:uppercase;
}
.placard .meaning{margin-top:1rem}
.placard .feeling{margin-top:.75rem}
.placard .credit{
  margin-top:1.25rem; font-size:.8125rem; font-weight:500; letter-spacing:.08em; line-height:1.4; color:var(--bone-dim);
}
.placard .buy{margin-top:1.5rem; display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap}
.placard .price{color:var(--bone-dim); font-size:1rem}
.procession{
  margin-top:4rem; padding-top:1.5rem; border-top:1px solid var(--navy);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.procession a{font-size:.8rem; letter-spacing:.14em; color:var(--bone-dim); text-decoration:none}
.procession a:hover{color:var(--bone)}

/* works index: the procession of stations */
main.works{padding:0 clamp(1.5rem, 6vw, 5rem) 4rem; max-width:1200px; margin:0 auto}
main.works h1, main.page h1{
  font-family:var(--serif); font-weight:600; letter-spacing:.16em; line-height:1.1;
  font-size:clamp(1.75rem, 4vw, 2.5rem); text-transform:uppercase; margin:1rem 0 2.5rem;
}
.stations{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:2.5rem 1.5rem}
.station{text-decoration:none}
.station .frame{background:#05080d; aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; overflow:hidden}
.station .frame img{width:100%; height:100%; object-fit:cover}
.station h2{
  margin-top:1rem; font-family:var(--serif); font-weight:600; letter-spacing:.16em;
  font-size:1.05rem; line-height:1.2; text-transform:uppercase;
}
.station .p{margin-top:.35rem; color:var(--bone-dim); font-size:.95rem}

/* plain pages */
main.page{padding:0 clamp(1.5rem, 6vw, 5rem) 4rem; max-width:820px; margin:0 auto}
main.page p{margin-top:1.1rem; max-width:62ch; line-height:1.6}
main.page p.dim, main.page .dim{color:var(--bone-dim)}
main.page h2{
  margin-top:2.75rem; font-family:var(--serif); font-weight:600; letter-spacing:.16em;
  font-size:1.15rem; text-transform:uppercase;
}
main.page ul{margin:1rem 0 0 1.2rem; max-width:62ch}
main.page li{margin-top:.5rem; line-height:1.6}
.kept-line{
  font-family:var(--serif); font-weight:600; letter-spacing:.16em; line-height:1.25;
  font-size:clamp(1.6rem, 4.5vw, 2.6rem); text-transform:uppercase; margin-top:2rem;
}
.entry{margin-top:2.5rem}
.entry .date{font-size:.8125rem; letter-spacing:.08em; color:var(--bone-dim)}
.entry h2{margin-top:.5rem}
.store-list{margin-top:2rem; border-top:1px solid var(--navy)}
.store-list a{
  display:flex; justify-content:space-between; gap:1rem; padding:1rem .25rem;
  border-bottom:1px solid var(--navy); text-decoration:none;
}
.store-list a:hover .n{color:var(--candle)}
.store-list .n{font-family:var(--serif); letter-spacing:.12em; text-transform:uppercase; font-size:1rem}
.store-list .pr{color:var(--bone-dim)}

footer{
  padding:2rem clamp(1.25rem, 5vw, 3rem); color:var(--bone-dim); font-size:.85rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
footer a{color:var(--bone-dim)}