:root { --ink:#29402b; --leaf:#547444; --sun:#f6c842; --paper:#fffdf6; --soft:#edf3e9; --terra:#c97047; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.55 "Segoe UI", Arial, sans-serif; }
a { color:inherit; }
.site-header { max-width:1120px; margin:auto; padding:1.2rem 1.5rem; display:flex; justify-content:space-between; align-items:center; }
.brand { font-weight:bold; font-size:1.1rem; text-decoration:none; }
nav { display:flex; gap:1.4rem; } nav a { text-decoration:none; border-bottom:2px solid transparent; } nav a:hover { border-color:var(--sun); }
main { max-width:1120px; margin:auto; padding:0 1.5rem 4rem; }
.welcome { min-height:390px; padding:clamp(2.5rem,7vw,6rem); display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center; overflow:hidden; border-radius:26px; background:linear-gradient(135deg,#e6f0df,#f9e5a6); }
.eyebrow { margin:0 0 .4rem; color:#8c5b18; font:bold .78rem/1.2 Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
h1,h2 { line-height:1.04; margin:.2rem 0 .9rem; } h1 { font-size:clamp(2.6rem,6vw,5.2rem); max-width:620px; } h2 { font-size:2rem; }
.lead { font-size:1.18rem; max-width:590px; }
.travel-intro { padding:clamp(3rem,8vw,7rem) 0 3rem; }
.sunflower { width:min(100%,300px); justify-self:center; border-radius:50%; aspect-ratio:1; object-fit:cover; object-position:15% center; mix-blend-mode:multiply; }
.areas { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin:1.25rem 0 5rem; }
.area { min-height:255px; padding:1.4rem; border-radius:20px; text-decoration:none; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.area:hover { transform:translateY(-5px); box-shadow:0 14px 30px #27441b26; }
.family { background:#eef3e5; }.travel { background:#fff0c9; }.area-label { font:bold .78rem Arial,sans-serif; color:#6b7d59; letter-spacing:.12em; text-transform:uppercase; }.travel .area-label { color:#a0661c; }
.area-photo { width:100%; height:190px; object-fit:contain; background:#f8f5e9; border-radius:12px; margin-bottom:1.25rem; }
.area p { max-width:30rem; }.explore { margin-top:auto; font-weight:bold; }
.countries { padding:3.5rem 0; border-top:1px solid #d7dfcf; }.section-title { max-width:640px; }.country-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-top:2rem; }
.people-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; max-width:680px; margin:1.4rem 0 4rem; }.person { overflow:hidden; border-radius:15px; background:var(--soft); text-decoration:none; text-align:center; font-weight:bold; }.person img { display:block; width:100%; height:220px; object-fit:contain; background:#f8f5e9; }.person span { display:block; padding:.8rem; }
.album-feature { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; padding:2rem; border-radius:20px; background:#fff0c9; }.album-feature img { width:100%; height:260px; border-radius:12px; object-fit:contain; background:#f8f5e9; }.button { display:inline-block; margin-top:.6rem; padding:.7rem 1rem; border-radius:999px; color:white; background:var(--ink); text-decoration:none; font-weight:bold; }.archive-note { display:flex; gap:1rem; align-items:baseline; margin:2rem 0; padding:1rem 1.2rem; border-left:4px solid #c9d5c0; color:#526151; background:#f6f8f3; }.archive-note a { color:inherit; }
.today-card,.archive-link { max-width:720px; padding:2rem; margin:1.25rem 0; border-radius:20px; }.today-card { background:var(--soft); }.archive-link { background:#fff0c9; }
.profile-portrait { display:block; width:min(100%,430px); height:auto; margin:0 0 1.5rem; border-radius:18px; box-shadow:0 8px 24px #25301d26; }
.profile-list { margin:1.3rem 0 0; }.profile-list div { display:grid; grid-template-columns:minmax(130px,.35fr) 1fr; gap:1rem; padding:1rem 0; border-top:1px solid #d5dfcf; }.profile-list dt { font-weight:bold; }.profile-list dd { margin:0; }
.country { min-height:130px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem; border:1px solid #d8e1d2; border-radius:16px; background:white; text-decoration:none; font-weight:bold; text-align:center; transition:background .2s, transform .2s; }.country:hover { background:var(--soft); transform:translateY(-3px); }.flag { position:relative; display:block; width:58px; height:38px; overflow:hidden; box-shadow:0 2px 5px #25301d33; }.flag-de { background:linear-gradient(#111 0 33.33%,#d12028 33.33% 66.66%,#f5c83e 66.66%); }.flag-it { background:linear-gradient(90deg,#169b62 0 33.33%,#fff 33.33% 66.66%,#ce2b37 66.66%); }.flag-at { background:linear-gradient(#ed2939 0 33.33%,#fff 33.33% 66.66%,#ed2939 66.66%); }.flag-hr { background:linear-gradient(#f33 0 33.33%,#fff 33.33% 66.66%,#171796 66.66%); }.flag-si { background:linear-gradient(#fff 0 33.33%,#17479e 33.33% 66.66%,#d71445 66.66%); }.flag-us { background:repeating-linear-gradient(#b22234 0 2.92px,#fff 2.92px 5.84px); }.flag-us::before { content:""; position:absolute; inset:0 auto auto 0; width:25px; height:21px; background:#3c3b6e; }.flag-gr { background:repeating-linear-gradient(#0d5eaf 0 4.22px,#fff 4.22px 8.44px); }.flag-gr::before { content:""; position:absolute; width:25px; height:25px; background:linear-gradient(90deg,transparent 38%,#fff 38% 62%,transparent 62%),linear-gradient(transparent 38%,#fff 38% 62%,transparent 62%),#0d5eaf; }.flag-ca { background:linear-gradient(90deg,#d52b1e 0 25%,#fff 25% 75%,#d52b1e 75%); }.flag-ca::before { content:"🍁"; position:absolute; inset:5px 0; text-align:center; font:22px/27px "Segoe UI Emoji",sans-serif; }.flag-cu { background:repeating-linear-gradient(#002a8f 0 7.6px,#fff 7.6px 15.2px); }.flag-cu::before { content:"★"; position:absolute; inset:0 auto 0 0; width:35px; display:grid; place-items:center; color:#fff; background:#cf142b; clip-path:polygon(0 0,100% 50%,0 100%); font-size:13px; padding-left:3px; }.flag-ch { background:#d52b1e; }.flag-ch::before { content:""; position:absolute; width:11px; height:24px; left:23px; top:7px; background:#fff; }.flag-ch::after { content:""; position:absolute; width:24px; height:11px; left:16.5px; top:13.5px; background:#fff; }
.country-soon { color:#6c7569; cursor:default; }.country-soon:hover { background:white; transform:none; }.country small { font:normal .75rem Arial,sans-serif; }
.flag-image { display:block; width:58px; height:38px; object-fit:contain; box-shadow:0 2px 5px #25301d33; }
footer { padding:2rem 1.5rem; text-align:center; color:#f8f4e8; background:var(--ink); }
@media (max-width:680px) { .site-header { padding:.9rem 1.2rem; }.welcome { grid-template-columns:1fr; }.sunflower { width:170px; }.areas { grid-template-columns:1fr; margin-bottom:3rem; }.country-grid,.people-grid { grid-template-columns:repeat(2,1fr); }.album-feature { grid-template-columns:1fr; }.archive-note { align-items:flex-start; flex-direction:column; gap:.35rem; }.profile-list div { grid-template-columns:1fr; gap:.2rem; } }