@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Spectral:ital,wght@0,300;0,400;0,500;1,400&display=swap');

/* ---- LIGHT (paper) is the default ---- */
:root, [data-theme="light"]{
  --ink:#ece3d1; --ink-2:#e4d9c2; --panel:rgba(70,50,25,.05);
  --paper:#2b2420; --paper-dim:#4d4338; --muted:#8a7c66;
  --accent:#9e5b2b; --accent-bright:#b3683a; --line:rgba(60,45,25,.18);
  --mat:#fbf6ea; --glow:#f6efdf; --bar:rgba(236,227,209,.8);
  --link-hover:#7c441e; --shadow:rgba(60,40,15,.18);
}
/* ---- DARK (gallery) — opt-in ---- */
[data-theme="dark"]{
  --ink:#0d0d0f; --ink-2:#141417; --panel:rgba(255,250,240,.035);
  --paper:#e9e3d6; --paper-dim:#c7c0b1; --muted:#938b7b;
  --accent:#c2884a; --accent-bright:#e0a559; --line:rgba(233,227,214,.14);
  --mat:#000; --glow:#1a1a1e; --bar:rgba(13,13,15,.72);
  --link-hover:#f0c986; --shadow:rgba(0,0,0,.65);
}
:root{ --measure:38em; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:'Spectral',Georgia,serif; font-weight:400; font-size:1.075rem; line-height:1.72;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 80% at 50% -10%, var(--glow) 0%, var(--ink) 60%);
  background-attachment:fixed;
  transition:background-color .4s ease, color .4s ease;
}
img{display:block}
a{color:var(--accent-bright); text-decoration:none}
a:hover{color:var(--link-hover)}

/* ---- masthead ---- */
.masthead{
  position:sticky; top:0; z-index:20; backdrop-filter:blur(8px);
  background:var(--bar); border-bottom:1px solid var(--line);
  padding:.85rem clamp(1rem,5vw,4rem); display:flex; align-items:baseline; gap:1rem;
}
.masthead a.site{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.5rem;
  letter-spacing:.01em; color:var(--paper)}
.masthead .yrs{font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--accent)}
.masthead .navlink{margin-left:auto; align-self:center; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent)}
.masthead .navlink:hover{color:var(--accent-bright)}
.theme-toggle{margin-left:1.2rem; background:none; border:1px solid var(--line); color:var(--accent);
  font-family:'Spectral',serif; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.45rem .8rem; cursor:pointer; transition:.2s; align-self:center}
.theme-toggle:hover{border-color:var(--accent); color:var(--accent-bright)}

.wrap{max-width:1180px; margin:0 auto; padding:clamp(2rem,5vw,4.5rem) clamp(1rem,5vw,4rem)}
.eyebrow{font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin:0 0 1rem}
.measure{max-width:var(--measure)}

/* shared 'lede / epigraph' voice — Cormorant italic */
.hero .lede, .chapter-head .intro, .brief{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
  color:var(--paper-dim); line-height:1.45;
}
.brief em{font-style:normal}  /* emphasis within an italic lede flips to roman */

/* ---- hero / foyer ---- */
.hero h1{font-family:'Cormorant Garamond',serif; font-weight:500; line-height:1.02;
  font-size:clamp(2.6rem,7vw,5rem); margin:.2em 0 .3em; letter-spacing:.005em}
.hero .lede{font-size:clamp(1.3rem,2.4vw,1.65rem); max-width:30em}
.hero .rule{width:64px; height:1px; background:var(--accent); margin:2rem 0}

/* room index list */
.rooms{margin-top:3rem; border-top:1px solid var(--line)}
.room-row{display:grid; grid-template-columns:3.2rem 1fr auto; gap:1.4rem; align-items:baseline;
  padding:1.5rem .4rem; border-bottom:1px solid var(--line); transition:background .2s}
.room-row:hover{background:var(--panel)}
.room-row .no{font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:var(--accent)}
.room-row .ttl{font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:500; color:var(--paper)}
.room-row .desc{display:block; font-size:.95rem; color:var(--muted); max-width:46em; margin-top:.25rem}
.room-row .enter{font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); white-space:nowrap}

/* ---- chapter page ---- */
.chapter-head h1{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(2rem,5vw,3.4rem);
  line-height:1.05; margin:.1em 0 .6em; color:var(--paper)}
.chapter-head .intro{font-size:clamp(1.25rem,2.2vw,1.55rem); line-height:1.5}

/* plate grid — uncropped */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:2rem 1.6rem; margin-top:3.2rem}
.plate{display:flex; flex-direction:column}
.plate .mat{background:var(--mat); border:1px solid var(--line); padding:.6rem;
  display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; overflow:hidden;
  transition:border-color .25s, transform .25s}
.plate .mat img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  box-shadow:0 2px 18px var(--shadow)}
.plate:hover .mat{border-color:var(--accent); transform:translateY(-3px)}
.plate .cap{padding:.7rem .1rem 0}
.plate .cap .t{display:block; font-family:'Cormorant Garamond',serif; font-size:1.18rem; color:var(--paper); line-height:1.15}
.plate .cap .d{display:block; margin-top:.35rem; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}

/* ---- detail page ---- */
.back{font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent)}
.detail{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); margin-top:1.6rem; align-items:start}
@media(max-width:820px){.detail{grid-template-columns:1fr}}
.plateview{background:var(--mat); border:1px solid var(--line); padding:1rem; position:sticky; top:5rem}
.plateview img{max-width:100%; height:auto; margin:auto; box-shadow:0 6px 40px var(--shadow)}
.plateview .zoom{display:block; text-align:center; margin-top:.8rem; font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.detail h1{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(1.8rem,4vw,2.8rem);
  line-height:1.05; margin:.1em 0 .1em; color:var(--paper)}
.detail .byline{color:var(--muted); font-style:italic; margin:0 0 1.6rem}
.brief{font-size:clamp(1.2rem,2vw,1.45rem); max-width:var(--measure); margin:0 0 1.8rem}
.brief p{margin:0 0 .5em}
.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.1em}
.prose .subhead{font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  margin:1.9em 0 .7em; font-weight:500; font-family:'Spectral',serif; font-style:normal}
.prose ul{margin:0 0 1.1em; padding-left:1.1em}
.prose li{margin:.3em 0}
.prose strong{color:var(--paper); font-weight:500}

dl.meta{margin:2.2rem 0 0; border-top:1px solid var(--line); padding-top:1.4rem;
  display:grid; grid-template-columns:auto 1fr; gap:.55rem 1.4rem; font-size:.95rem}
dl.meta dt{font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); padding-top:.18rem}
dl.meta dd{margin:0; color:var(--paper-dim)}

/* prev / next within a room */
.mapnav{display:flex; justify-content:space-between; gap:1.5rem; margin-top:3.5rem;
  border-top:1px solid var(--line); padding-top:1.4rem}
.mapnav a{max-width:47%}
.mapnav a.next{margin-left:auto; text-align:right}
.mapnav .dir{display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.mapnav .nt{display:block; font-family:'Cormorant Garamond',serif; font-size:1.25rem; line-height:1.15;
  color:var(--accent-bright); margin-top:.3rem}
.mapnav a:hover .nt{color:var(--link-hover)}

footer{border-top:1px solid var(--line); margin-top:5rem; padding:2.5rem clamp(1rem,5vw,4rem);
  font-size:.8rem; color:var(--muted); text-align:center; max-width:50em; margin-left:auto; margin-right:auto}