
:root{--bg:#fbf8f3;--paper:#fff;--band:#f3ede3;--ink:#151513;--text:#2a2824;--muted:#6b655c;--line:#e2d9c9;--gold:#bc9355;--gold-deep:#8a6a3a;--gold-soft:#d9c19a;--forest:#1f3a2f;--night:#0d0f0e;
--f-display:"Playfair Display",Georgia,serif;--f-head:"Lora",Georgia,serif;--f-body:"Roboto",system-ui,Arial,sans-serif;--f-label:"Roboto Condensed","Arial Narrow",Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:300 18px/1.85 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(18px,4.5vw,56px)}
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(251,248,243,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;justify-content:space-between;align-items:center;height:70px;gap:16px}
.brand{text-decoration:none;display:grid;line-height:1}
.brand b{font:500 19px/1 var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.brand span{font:italic 500 12px/1 var(--f-head);color:var(--gold-deep);margin-top:6px}
.hdr nav{display:flex;gap:22px;align-items:center}
.hdr nav a{font:700 11px/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;border:1px solid var(--gold);background:var(--gold);color:#fff;font:700 12px/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:background .3s,transform .3s}
.btn:hover{background:#a98146;transform:translateY(-2px)}
.btn.sm{padding:11px 18px;font-size:10.5px}
.eyebrow{font:700 12px/1.2 var(--f-label);letter-spacing:.32em;text-transform:uppercase;color:var(--gold-deep);display:inline-flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor}
h1,h2,h3{font-weight:400;color:var(--ink);text-wrap:balance;margin:0}
@media (max-width:640px){.hdr nav a:not(.btn){display:none}}
/* index */
.bhero{padding-block:clamp(70px,10vw,130px) clamp(40px,6vw,70px);display:grid;gap:22px;max-width:860px}
.bhero h1{font:400 clamp(44px,6.4vw,92px)/1 var(--f-display);letter-spacing:-.015em}
.bhero h1 em{color:var(--gold-deep)}
.bhero p{margin:0;font:italic 500 clamp(18px,1.6vw,21px)/1.7 var(--f-head);color:var(--muted);max-width:56ch}
.feat{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,60px);align-items:center;text-decoration:none;padding-bottom:clamp(50px,6vw,80px);border-bottom:1px solid var(--line)}
.feat .im{aspect-ratio:4/3;overflow:hidden}
.feat img,.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.feat:hover img,.card:hover img{transform:scale(1.05)}
.feat h2{font:400 clamp(30px,3.4vw,48px)/1.1 var(--f-display);margin-top:14px}
.feat p{color:var(--muted);margin:16px 0 0}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px);padding-block:clamp(50px,6vw,80px)}
.card{text-decoration:none;display:grid;gap:14px;align-content:start}
.card .im{aspect-ratio:4/5;overflow:hidden}
.card h3{font:400 clamp(22px,2vw,27px)/1.2 var(--f-display)}
.card p{margin:0;font-size:15px;line-height:1.65;color:var(--muted)}
.meta{font:700 10.5px/1.3 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
@media (max-width:860px){.feat{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}
/* article */
.ahero{position:relative;min-height:min(78vh,720px);display:grid;align-items:end;color:#fff;overflow:hidden;isolation:isolate}
.ahero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:kb 14s ease-out forwards}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.05)}}
.ahero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,9,.2),rgba(10,10,9,.82))}
.ahero .wrap{padding-block:120px clamp(40px,6vw,70px);display:grid;gap:18px;max-width:980px;margin-left:max(0px,calc((100vw - 1180px)/2))}
.ahero .meta{color:var(--gold-soft)}
.ahero h1{color:#fff;font:400 clamp(36px,5vw,70px)/1.05 var(--f-display);letter-spacing:-.01em}
.art{max-width:720px;margin-inline:auto;padding-inline:clamp(18px,4.5vw,40px);padding-block:clamp(50px,7vw,90px)}
.art .lede{font:italic 500 clamp(21px,1.9vw,25px)/1.6 var(--f-head);color:var(--ink);margin:0 0 30px}
.art .lede::first-letter{font:400 3.2em/.8 var(--f-display);float:left;margin:8px 12px 0 0;color:var(--gold-deep);font-style:normal}
.art h2{font:400 clamp(28px,2.8vw,38px)/1.15 var(--f-display);margin:54px 0 16px}
.art p{margin:0 0 20px}
.art ul{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:10px}
.art li{display:flex;gap:14px;align-items:baseline}
.art li::before{content:"";flex:none;width:6px;height:6px;transform:rotate(45deg) translateY(-2px);background:var(--gold)}
.art blockquote{margin:44px 0;padding:34px 0;border-block:1px solid var(--line);font:italic 400 clamp(22px,2.2vw,29px)/1.45 var(--f-display);color:var(--ink);text-align:center}
.art blockquote span{display:block;margin-top:14px;font:700 11px/1.3 var(--f-label);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cta{background:var(--forest);color:#fff;text-align:center;padding:clamp(60px,8vw,100px) 20px;display:grid;justify-items:center;gap:22px}
.cta h2{color:#fff;font:400 clamp(30px,3.6vw,50px)/1.12 var(--f-display);max-width:22ch}
.cta h2 em{color:var(--gold-soft)}
.cta p{margin:0;color:rgba(255,255,255,.8);max-width:52ch}
.cta .tel{font:700 12px/1.8 var(--f-label);letter-spacing:.2em;color:var(--gold-soft)}
.more{padding-block:clamp(50px,7vw,90px)}
.more .grid{padding-block:30px 0}
footer{background:var(--night);color:rgba(255,255,255,.65);font-size:14px;padding-block:40px calc(40px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:rgba(255,255,255,.85);text-decoration:none}
.rv{animation:fu 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes fu{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
