:root { --ink:#171916; --paper:#f2f0e9; --white:#fbfaf6; --muted:#777b73; --accent:#c7f25a; --line:rgba(23,25,22,.18); --sans:"Manrope",Arial,sans-serif; --body:"DM Sans",Arial,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--body); line-height:1.55; } a { color:inherit; text-decoration:none; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--sans); font-weight:500; letter-spacing:-.055em; line-height:.98; } :focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.skip-link { position:fixed; z-index:10; top:10px; left:10px; padding:10px 14px; background:var(--accent); transform:translateY(-160%); } .skip-link:focus { transform:translateY(0); }
.site-header { min-height:82px; padding:0 6vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand { display:flex; align-items:center; gap:12px; } .brand img { width:42px; height:42px; } .brand span { font-size:.68rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; } nav { display:flex; align-items:center; gap:28px; font-size:.76rem; font-weight:500; } nav > a[aria-current="page"] { padding-bottom:4px; border-bottom:1px solid currentColor; } .nav-contact { padding:11px 18px; border:1px solid currentColor; border-radius:100px; } .lang-switch { display:flex; padding:3px; border:1px solid var(--ink); border-radius:100px; font-size:.64rem; letter-spacing:.08em; }.lang-switch a { min-width:31px; padding:5px 7px; border-radius:100px; text-align:center; }.lang-switch a[aria-current="page"] { padding-bottom:5px; border:0; color:var(--ink); background:var(--accent); }
.intro { min-height:60svh; padding:14vw 6vw 8vw; color:var(--white); background:var(--ink); } .eyebrow { margin-bottom:22px; font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; } .intro .eyebrow { color:#b4b8ae; } h1 { max-width:1100px; margin-bottom:42px; font-size:clamp(4.3rem,10vw,10.5rem); } h1 em { color:var(--accent); font-style:normal; } .lede { max-width:565px; margin:0; color:#c4c7bf; font-size:clamp(1rem,1.5vw,1.2rem); }
.principles { padding:130px 6vw; display:grid; grid-template-columns:.9fr 1.1fr; gap:9vw; } h2 { margin-bottom:0; font-size:clamp(3.3rem,6vw,6.4rem); } .principle-list { border-top:1px solid var(--line); } .principle-list article { padding:27px 0 30px; display:grid; grid-template-columns:48px 1fr; border-bottom:1px solid var(--line); } .principle-list span { padding-top:5px; color:var(--muted); font-size:.7rem; } .principle-list h3 { margin-bottom:12px; font-size:1.45rem; } .principle-list p { max-width:450px; margin:0; color:#646961; }
.latest { padding:120px 6vw; color:var(--white); background:#252821; display:grid; grid-template-columns:.85fr 1.15fr; gap:9vw; align-items:start; } .latest-heading h2 { max-width:620px; } .post-list { display:grid; gap:58px; } .post-card { padding:34px 0 2px; border-top:1px solid rgba(255,255,255,.2); } .post-meta { margin-bottom:26px; color:#b4b8ae; font-size:.68rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; } .post-card h3 { max-width:760px; margin-bottom:25px; font-size:clamp(2.2rem,4vw,4rem); } .post-card > p:not(.post-meta) { max-width:625px; color:#c4c7bf; } .button { margin-top:20px; padding:15px 21px; display:inline-flex; gap:14px; align-items:center; border-radius:100px; color:var(--ink); background:var(--accent); font-size:.76rem; font-weight:600; } .button span { font-size:1rem; }.tip-state { padding:34px 6vw; display:flex; justify-content:space-between; gap:20px; color:#646961; font-size:.78rem; }.tip-state p { margin:0; }.tip-state a { font-weight:600; text-decoration:underline; text-underline-offset:4px; }
footer { padding:30px 6vw; display:flex; justify-content:space-between; color:#646961; font-size:.7rem; } footer a { text-decoration:underline; text-underline-offset:3px; }
@media (max-width:700px) { .site-header { min-height:70px; padding:0 5vw; } .brand img { width:34px; height:34px; } .brand span { display:none; } nav { gap:14px; font-size:.67rem; } .nav-contact { padding:8px 12px; } .intro { min-height:68svh; padding:140px 6vw 70px; } h1 { font-size:clamp(3.5rem,16vw,5.3rem); } .principles { padding:90px 6vw; display:block; } .principles > div:first-child { margin-bottom:58px; } .latest { padding:90px 6vw; display:block; } .latest-heading { margin-bottom:55px; } .tip-state { padding:28px 6vw; display:block; } .tip-state a { display:inline-block; margin-top:10px; } footer { padding:24px 6vw; } }