:root{--cream:#f4ead8;--paper:#efe2cb;--red:#8e1f1a;--red2:#6f1712;--ink:#2a2523;--mute:#6b5f57;--line:#d8c6a8;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--sans:system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);line-height:1.5}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--ink);color:var(--cream);padding:.6rem 1rem;z-index:20}
.skip:focus{top:1rem}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
a{color:inherit}
.bar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:1rem clamp(1rem,5vw,4rem);background:rgba(244,234,216,.94);border-bottom:1px solid var(--line)}
.name{font-family:var(--serif);font-size:1.25rem;color:var(--red);text-decoration:none;letter-spacing:.02em}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2rem}
.nav a{text-decoration:none;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;padding:.3rem 0;border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.nav a:hover{color:var(--red);border-color:var(--red)}
.menu-btn{display:none;font:inherit;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;background:none;border:1px solid var(--ink);color:var(--ink);padding:.5rem .9rem;cursor:pointer}
section{padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,5vw,4rem);scroll-margin-top:7rem;outline:none}
section:focus-visible{outline:3px solid var(--red);outline-offset:-6px}
.kicker{margin:0 0 1.5rem;font-weight:400;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.kicker span{color:var(--red);margin-right:.8rem}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:end;padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(2.5rem,6vw,4.5rem)}
h1{margin:0;font-family:var(--serif);font-weight:400;line-height:.92;font-size:clamp(3.2rem,8.5vw,7.5rem);color:var(--red);letter-spacing:-.02em}
h1 span{display:block}
h1 .sub{color:var(--ink);font-size:.3em;letter-spacing:.24em;text-transform:uppercase;margin-top:1.2rem;line-height:1.2}
.rule{height:2px;background:var(--red);width:6rem;margin-top:2rem;transform-origin:left;animation:grow 1.2s .3s both ease-out}
@keyframes grow{from{transform:scaleX(0)}}
.loc{margin:1.2rem 0 0;font-family:var(--serif);font-style:italic;font-size:1.3rem}
.flag{margin:0 auto 0 1.5rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);border:1px solid var(--red);padding:.25rem .6rem}
figure{margin:0}
.wall figcaption,.lantern figcaption{margin-top:1rem}
.images figure{display:grid;grid-template-columns:minmax(0,18rem) 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:end}
.wall .open img{aspect-ratio:480/300;object-fit:cover}
.facts{background:var(--ink);color:var(--cream)}
.facts .kicker{color:#b8a998}.facts .kicker span{color:#e0806f}
dl{margin:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #4a423d}
dl div{padding:2rem 1.5rem 0 0;border-right:1px solid #4a423d}dl div+div{padding-left:1.5rem}dl div:last-child{border:0}
dt{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#b8a998}
dd{margin:.6rem 0 0;font-family:var(--serif);font-size:clamp(1.4rem,2.8vw,2.2rem);line-height:1.05}
.open{position:relative;padding:0;border:0;background:var(--red2);cursor:zoom-in;display:block;overflow:hidden}
.open img{display:block;width:100%;height:auto;transition:transform .6s ease,opacity .6s}
.open:hover img{transform:scale(1.03);opacity:.92}
.hint{position:absolute;left:0;bottom:0;background:var(--cream);color:var(--ink);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;padding:.5rem .8rem}
figcaption{font-family:var(--serif);font-style:italic;color:var(--mute);font-size:1.05rem;max-width:22rem;border-left:2px solid var(--red);padding-left:1rem}
.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.5rem clamp(1rem,5vw,4rem);font-size:.8rem;color:var(--mute);border-top:1px solid var(--line)}
.foot p{margin:0}
dialog{border:0;padding:0;background:var(--ink);color:var(--cream);width:min(92vw,52rem);max-height:calc(100dvh - 2rem);overflow:auto}
dialog[open]{display:flex;flex-direction:column}
dialog::backdrop{background:rgba(42,37,35,.82)}
dialog figure{min-height:0;display:flex;flex-direction:column}
dialog img{display:block;width:100%;max-height:calc(100dvh - 10rem);object-fit:contain;background:#1f1b19}
dialog figcaption{color:#d8cbb8;margin:1rem;border-color:#e0806f}
.close{position:sticky;bottom:0;align-self:flex-start;flex:none;margin:0 1rem 1rem;font:inherit;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;background:var(--cream);color:var(--ink);border:0;padding:.6rem 1rem;cursor:pointer}
.close:focus-visible{outline-color:#e0806f}
@media (max-width:767px){
 .menu-btn{display:block}
 .nav{position:absolute;top:100%;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--line);display:none}
 .nav.open{display:block}
 .nav ul{flex-direction:column;gap:0;padding:.5rem 1rem 1rem}
 .nav a{display:block;padding:.9rem 0;border-bottom:1px solid var(--line)}
 dl{grid-template-columns:1fr}dl div,dl div+div{padding:1.5rem 0;border-right:0;border-bottom:1px solid #4a423d}
 .hero,.images figure{grid-template-columns:1fr}
 .flag{margin:0 .6rem 0 auto;font-size:.6rem;letter-spacing:.08em}
 dialog img{max-height:calc(100dvh - 11rem)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
