:root { --ink:#20150f; --paper:#f5f0e8; --sand:#e8ddcb; --rust:#af481e; --cream:#fffaf3; --line:rgba(32,21,15,.17); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:20; top:1rem; left:1rem; transform:translateY(-180%); padding:.7rem 1rem; color:#fff; background:var(--ink); }
.skip-link:focus { transform:translateY(0); }
.site-header { position:absolute; z-index:5; top:0; left:0; right:0; display:flex; align-items:center; gap:clamp(.8rem,2vw,2rem); padding:2rem clamp(1.25rem,5vw,5.5rem); color:var(--cream); }
.brand { display:inline-flex; align-items:center; gap:.65rem; font-weight:800; font-size:1.12rem; letter-spacing:-.06em; }
.brand span span { color:#d88451; }
.brand-mark { display:grid; width:2rem; height:2rem; place-items:center; border:1px solid currentColor; border-radius:50%; font:700 1.1rem/1 "Playfair Display",serif; }
nav { display:flex; gap:2rem; margin-left:auto; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
nav a { opacity:.78; transition:opacity .2s; } nav a:hover { opacity:1; }
.header-tools { display:grid; justify-items:end; gap:.45rem; }
.language-picker { display:grid; justify-items:end; gap:.2rem; }
.language-select { max-width:10rem; min-height:2.35rem; padding:.35rem 1.8rem .35rem .7rem; border:1px solid rgba(255,250,243,.46); border-radius:999px; color:var(--cream); background:rgba(26,16,10,.48); font:700 .72rem Manrope,Arial,sans-serif; cursor:pointer; }
.language-select option { color:var(--ink); background:var(--cream); }
.language-select:focus-visible,.menu-toggle:focus-visible { outline:2px solid #f0b07b; outline-offset:3px; }
.menu-toggle { display:none; border:1px solid currentColor; border-radius:999px; padding:.45rem .7rem; color:inherit; background:transparent; font:700 .75rem Manrope,sans-serif; text-transform:uppercase; cursor:pointer; }
.hero { position:relative; min-height:100svh; display:grid; align-items:end; overflow:hidden; color:var(--cream); background:#20150f; }
.hero-media, .hero-media:after { position:absolute; inset:0; }
.hero-media:after { content:""; background:linear-gradient(90deg,rgba(20,12,8,.72),rgba(20,12,8,.32) 58%,rgba(20,12,8,.12)),linear-gradient(0deg,rgba(20,12,8,.62),transparent 52%); }
.hero-media img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.8) contrast(1.05); transform:scale(1.02); }
.hero-content { position:relative; z-index:1; max-width:55rem; padding:0 clamp(1.25rem,10vw,11rem) clamp(5rem,11vh,9rem); }
.eyebrow,.section-label { margin:0 0 1rem; font:500 .69rem/1.5 "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }
.hero h1,.section h2,.closing h2 { margin:.7rem 0 1.5rem; font:600 clamp(3.3rem,7vw,7.7rem)/.94 "Playfair Display",Georgia,serif; letter-spacing:-.065em; }
em { color:#dc8551; font-weight:inherit; }
.hero-lead { max-width:36rem; margin:0 0 2rem; font-size:clamp(1rem,1.6vw,1.25rem); line-height:1.7; color:rgba(255,250,243,.83); }
.button { display:inline-flex; gap:2rem; align-items:center; padding:1rem 1.2rem; font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-3px); }
.button-primary { background:#d97843; color:#fff; }
.button-primary > span[aria-hidden="true"] { font-size:1.25rem; }
.hero-note { position:absolute; z-index:1; right:clamp(1.25rem,5vw,5.5rem); bottom:2rem; writing-mode:vertical-rl; font:500 .64rem "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; opacity:.74; }
.section { padding:clamp(5rem,11vw,10rem) clamp(1.25rem,8vw,9rem); }
.intro { display:grid; grid-template-columns:.9fr 2fr .8fr; gap:4rem; align-items:start; background:var(--cream); }
.section-label { color:var(--rust); }
.intro h2,.section h2,.closing h2 { font-size:clamp(2.6rem,5.1vw,5.5rem); }
.intro p:not(.intro-aside) { max-width:48rem; margin:0; font-size:clamp(1.1rem,1.75vw,1.45rem); line-height:1.8; }
.intro-aside { margin:0; color:#806a5e; font:600 1.08rem/1.55 "Playfair Display",serif; }
.intro-aside strong { color:var(--rust); }
.pillars { background:var(--paper); }
.section-heading { display:flex; justify-content:space-between; align-items:start; margin-bottom:3rem; }
.section-heading h2 { margin:0; }
.pillar-grid { display:grid; grid-template-columns:1.25fr .75fr .75fr; gap:1rem; }
.pillar { position:relative; display:block; min-height:23rem; overflow:hidden; color:#fff; background:#2c1a10; isolation:isolate; }
.pillar-large { min-height:34rem; }
.pillar:before { position:absolute; z-index:1; inset:0; content:""; background:linear-gradient(0deg,rgba(17,9,5,.8),transparent 56%); }
.pillar img { width:100%; height:100%; position:absolute; object-fit:cover; transform:scale(1.02); transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.pillar:hover img { transform:scale(1.08); }
.pillar-wide { grid-column:1 / -1; min-height:15rem; }
.pillar-number { position:absolute; z-index:2; top:1.3rem; left:1.3rem; font:500 .7rem "DM Mono",monospace; }
.pillar-text { position:absolute; z-index:2; right:1.4rem; bottom:1.3rem; left:1.4rem; }
.pillar-text strong { display:block; font:600 clamp(2rem,3.5vw,3.5rem)/1 "Playfair Display",serif; letter-spacing:-.05em; }
.pillar-text small { display:block; margin-top:.55rem; font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; opacity:.82; }
.statement { display:grid; min-height:46vh; place-items:center; padding:4rem 1.25rem; color:#f7e8d3; text-align:center; background:var(--ink); }
.statement p { margin:0; font:600 clamp(2.1rem,5vw,5.2rem)/1.15 "Playfair Display",serif; letter-spacing:-.055em; }
.guide { display:grid; grid-template-columns:1fr 1.3fr; gap:6rem; background:var(--cream); }
.guide-head p { max-width:28rem; color:#76665b; line-height:1.7; }
.guide-links { border-top:1px solid var(--line); }
.guide-links a { display:grid; grid-template-columns:1fr auto; gap:.2rem 1rem; padding:1.15rem 0; border-bottom:1px solid var(--line); transition:padding .2s,color .2s; }
.guide-links a:hover { padding-left:.65rem; color:var(--rust); }
.guide-links span { font:600 clamp(1.35rem,2vw,2rem)/1.2 "Playfair Display",serif; }
.guide-links i { grid-row:span 2; align-self:center; font-size:1.4rem; font-style:normal; }
.guide-links small { color:#8c7c70; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.contact { display:grid; grid-template-columns:.9fr 2fr; gap:4rem; background:var(--sand); }
.contact-copy h2 { max-width:15ch; margin:0 0 1.2rem; font:600 clamp(2.4rem,4.7vw,4.8rem)/1 "Playfair Display",Georgia,serif; letter-spacing:-.06em; }
.contact-copy p { max-width:48rem; margin:0 0 1.6rem; color:#6e5b4e; font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.8; }
.closing { position:relative; display:grid; min-height:55vh; place-items:center; overflow:hidden; color:var(--cream); background:#2c1a10; text-align:center; }
.closing:after { position:absolute; inset:0; content:""; background:rgba(25,14,8,.62); }
.closing img { position:absolute; width:100%; height:100%; object-fit:cover; filter:saturate(.65); transform:scale(1.02); }
.closing div { position:relative; z-index:1; }
.closing h2 { margin:0; }
.site-footer { display:grid; grid-template-columns:1fr 1fr auto; gap:2rem; align-items:center; padding:2.2rem clamp(1.25rem,5vw,5.5rem); color:#f5e9dc; background:#150e0a; font-size:.76rem; }
.site-footer p { margin:0; color:#b9a99c; }
@media (max-width:800px) { .site-header { flex-wrap:wrap; justify-content:space-between; gap:.6rem; padding:1.25rem; } .header-tools { margin-left:auto; } .menu-toggle { display:block; } nav { display:none; position:absolute; top:4.4rem; right:1.25rem; flex-direction:column; gap:1rem; margin:0; padding:1.1rem; color:var(--ink); background:var(--cream); box-shadow:0 10px 30px rgba(0,0,0,.2); } nav.is-open { display:flex; } .hero-content { padding:0 1.25rem 5.5rem; } .hero h1 { font-size:clamp(3.3rem,14vw,5.8rem); } .hero-note { display:none; } .intro,.guide,.contact { grid-template-columns:1fr; gap:2rem; } .section-heading { display:block; } .section-heading h2 { margin-top:1rem; } .pillar-grid { grid-template-columns:1fr; } .pillar,.pillar-large,.pillar-wide { min-height:22rem; } .site-footer { grid-template-columns:1fr; gap:1rem; } }
@media (max-width:390px) { .site-header { padding:.85rem; } .brand { gap:.4rem; font-size:.9rem; } .brand-mark { width:1.65rem; height:1.65rem; font-size:.9rem; } .menu-toggle { padding:.38rem .52rem; font-size:.65rem; } nav { top:3.5rem; right:.85rem; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition:none!important; } }
