:root { --bg:#f4dfc8; --ink:#28140f; --brand:#6f2f1f; --accent:#c86e3a; --paper:rgba(255,248,239,.84); --line:rgba(40,20,15,.14); --display:"Bebas Neue",sans-serif; --body:"Cormorant Garamond",serif; --shadow:0 24px 60px rgba(0,0,0,.16); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:var(--body); background:radial-gradient(circle at top left, rgba(200,110,58,.18), transparent 28%), linear-gradient(180deg, #f9eee2, var(--bg)); }
.topbar { position:sticky; top:0; z-index:40; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.2rem; background:rgba(255,250,245,.82); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.home-link { text-decoration:none; color:inherit; padding:.8rem 1.1rem; border-radius:999px; border:1px solid var(--line); background:white; font-family:var(--display); font-size:1.05rem; letter-spacing:.06em; }
.site-switcher { display:grid; gap:.35rem; justify-items:end; font-family:var(--display); letter-spacing:.08em; text-transform:uppercase; font-size:.85rem; }
.site-switcher select { min-width:min(340px,72vw); padding:.85rem 1rem; border-radius:14px; border:1px solid var(--line); font:inherit; background:white; }
.page { width:min(1240px,calc(100% - 1rem)); margin:0 auto; padding:1.25rem 0 2rem; }
.hero,.feature-band,.content-grid,.visit,.hero-meta,.contact-grid { display:grid; gap:1rem; }
.hero { grid-template-columns:.92fr 1.08fr; align-items:center; }
.hero-copy,.feature,.story-card,.visit,.map-card { border:1px solid var(--line); box-shadow:var(--shadow); }
.hero-copy { padding:1.4rem; border-radius:34px; background:var(--paper); }
.logo-lockup { display:flex; gap:1rem; align-items:center; margin-bottom:1rem; }
.logo-mark { width:78px; height:78px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:#f4dfc8; font-family:var(--display); font-size:2rem; }
.eyebrow,.micro { margin:0; font-family:var(--display); letter-spacing:.12em; text-transform:uppercase; }
.eyebrow { color:var(--brand); font-size:.84rem; } .micro { color:var(--accent); font-size:.78rem; }
h1 { margin:0; font-family:var(--display); font-size:clamp(3.2rem,8vw,6.2rem); line-height:.88; max-width:8ch; }
.lead { font-size:clamp(1.2rem,2.4vw,1.6rem); margin:1rem 0; } .body-copy { font-size:1.18rem; line-height:1.5; }
.hero-meta { grid-template-columns:1fr 1fr; margin-top:1.2rem; } .hero-meta div { padding:.9rem; border-radius:18px; background:rgba(255,255,255,.6); }
.hero-meta span { display:block; font-family:var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--brand); margin-bottom:.25rem; }
.hero-art svg { width:100%; display:block; border-radius:34px; box-shadow:var(--shadow); }
.feature-band { grid-template-columns:repeat(3,1fr); margin-top:1rem; } .feature { padding:1.1rem; border-radius:26px; background:rgba(255,255,255,.74); }
.feature h2,.story-card h3,.visit h2 { margin:0 0 .5rem; font-family:var(--display); line-height:.95; } .feature h2 { font-size:2rem; }
.content-grid { grid-template-columns:1.1fr .9fr .9fr; margin-top:1rem; } .story-card { padding:1.15rem; border-radius:28px; background:rgba(255,255,255,.82); } .story-card.large { background:linear-gradient(180deg,#fff6eb,#f1dcc1); } .story-card.wide { grid-column:span 2; }
.story-card ul { margin:.5rem 0 0; padding-left:1.2rem; line-height:1.6; }
.visit { margin-top:1rem; grid-template-columns:1fr .92fr; padding:1rem; border-radius:32px; background:rgba(255,252,248,.84); }
.contact-grid { grid-template-columns:repeat(2,1fr); margin-top:1rem; } .contact-grid div { padding:.9rem; border-radius:18px; background:white; }
.map-card { position:relative; overflow:hidden; min-height:300px; border-radius:28px; background:#fbf3ea; }
.map-grid { position:absolute; inset:0; background:linear-gradient(90deg, transparent 0 20%, rgba(111,47,31,.15) 20% 22%, transparent 22% 48%, rgba(200,110,58,.16) 48% 50%, transparent 50% 72%, rgba(111,47,31,.15) 72% 74%, transparent 74%), linear-gradient(transparent 0 22%, rgba(111,47,31,.14) 22% 24%, transparent 24% 48%, rgba(200,110,58,.15) 48% 50%, transparent 50% 74%, rgba(111,47,31,.14) 74% 76%, transparent 76%); }
.pin { position:absolute; left:52%; top:48%; width:28px; height:28px; border-radius:50%; background:var(--accent); transform:translate(-50%,-50%); }
.pin::after { content:""; position:absolute; left:50%; top:68%; width:18px; height:18px; background:var(--accent); transform:translateX(-50%) rotate(45deg); }
.map-label { position:absolute; right:1rem; bottom:1rem; padding:.9rem 1rem; border-radius:18px; background:var(--ink); color:#f4dfc8; } .map-label span { display:block; margin-top:.25rem; }
@media (max-width:980px) { .hero,.feature-band,.content-grid,.visit,.hero-meta,.contact-grid { grid-template-columns:1fr; } .story-card.wide { grid-column:auto; } }
@media (max-width:720px) { .topbar { position:static; display:grid; } .site-switcher { justify-items:start; } .page { width:min(100% - .7rem,1240px); } }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.gallery img { width:100%; display:block; border-radius:28px; box-shadow:var(--shadow); border:1px solid var(--line); }
@media (max-width:980px) { .gallery { grid-template-columns:1fr; } }