:root { --bg:#f6f3ec; --fg:#1c1915; --muted:#6f6a62; --border:#d9d3c8; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--fg); font-family:"Newsreader",Palatino,serif; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:64rem; margin:0 auto; padding:0 1.25rem; }
.bar { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.5rem; padding-top:1.5rem; padding-bottom:1.5rem; }
.mark { letter-spacing:.2em; font-size:.95rem; white-space:nowrap; flex-shrink:0; }
.tools { display:contents; }
nav { display:flex; gap:1rem; font-size:.875rem; color:var(--muted); justify-content:flex-end; width:100%; order:3; }
@media (min-width:720px){
  nav { width:auto; flex:1; order:0; gap:1.5rem; }
}
nav a:hover { color:var(--fg); }
.lang { margin:0 0 0 auto; font-size:.75rem; letter-spacing:.14em; color:var(--muted); flex-shrink:0; }
.lang button { background:none; border:0; color:inherit; font:inherit; cursor:pointer; padding:0; }
.lang button.is-on { color:var(--fg); }
main { padding-bottom:4rem; }
.foot { display:flex; justify-content:space-between; padding:2rem 1.25rem; font-size:.75rem; letter-spacing:.14em; color:var(--muted); border-top:1px solid var(--border); }
h1 { font-size:2.75rem; letter-spacing:-.03em; font-weight:500; line-height:1; margin:2.5rem 0 .5rem; }
.hero h1 { font-size:clamp(2.4rem,6.5vw,3.75rem); margin:0; }
.hero { display:grid; gap:2rem; border-bottom:1px solid var(--border); padding:1.5rem 0 3rem; }
@media (min-width:640px){ .hero { grid-template-columns:1fr 440px; align-items:center; } }
.hero img.lead { width:440px; height:367px; max-width:100%; object-fit:cover; object-position:50% 47%; border:1px solid var(--border); display:block; }
@media (max-width:639px){ .hero img.lead { width:100%; height:auto; aspect-ratio:440/367; } }
.muted { color:var(--muted); }
.small { font-size:.875rem; }
.meta { font-size:.75rem; letter-spacing:.12em; color:var(--muted); }
.row { display:flex; justify-content:space-between; align-items:baseline; margin:2.5rem 0 1.25rem; }
h2 { font-size:.75rem; letter-spacing:.18em; color:var(--muted); font-weight:500; margin:2.5rem 0 1.25rem; }
.cards { list-style:none; padding:0; margin:0; display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fill,minmax(12rem,1fr)); }
.cards img, .swatch { width:100%; aspect-ratio:4/5; object-fit:cover; border:1px solid var(--border); display:block; }
.swatch { display:flex; align-items:end; padding:.75rem; color:#efe7dc; }
.cards h3, .list h3 { margin:.35rem 0 0; font-size:1.1rem; font-weight:500; }
.list { list-style:none; padding:0; margin:0 0 2rem; display:flex; flex-direction:column; gap:1.25rem; }
.line { display:flex; gap:1.1rem; }
.thumb { width:5rem; height:6rem; object-fit:cover; border:1px solid var(--border); flex-shrink:0; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(10rem,1fr)); gap:.75rem; margin-top:.75rem; max-width:48rem; }
.grid img { width:100%; aspect-ratio:3/4; object-fit:cover; border:1px solid var(--border); }
.hero-shot { width:100%; max-width:48rem; border:1px solid var(--border); display:block; margin-top:2rem; }
.single { max-width:24rem; border:1px solid var(--border); margin-top:2rem; }
.blank { aspect-ratio:16/9; max-width:48rem; border:1px solid var(--border); margin-top:2rem; }
.crumbs { margin-top:2rem; font-size:.875rem; color:var(--muted); }
p.lead { max-width:32rem; }
.prose { max-width:36rem; color:#3a362f; font-size:1.15rem; line-height:1.7; text-wrap:pretty; }
.prose p { margin:0 0 1.5rem; }
.note { margin:3rem 0; }
.out { margin-top:2rem; }
.out a { border-bottom:1px solid var(--fg); }
.ask { max-width:24rem; margin-top:3rem; display:flex; flex-direction:column; gap:1.75rem; }
.ask label { display:block; }
.ask span { display:block; font-size:.875rem; color:var(--muted); }
.ask input, .ask textarea { width:100%; border:0; border-bottom:1px solid var(--border); background:transparent; padding:.75rem 0; font:inherit; color:var(--fg); outline:none; }
.ask textarea { min-height:7rem; resize:vertical; }
.ask button { align-self:flex-start; background:none; border:0; border-bottom:1px solid var(--fg); padding:0 0 .2rem; font:inherit; cursor:pointer; }
.place { margin-top:3rem; font-size:.875rem; color:var(--muted); line-height:1.6; max-width:24rem; }
.place a { border-bottom:1px solid var(--border); }
.hide { position:absolute; left:-9999px; }