/* VERES × Liberty Ukraine — black ground, white text (as veresrestaurant.com), Liberty blue + yellow accents,
   VERES's serif headings and DM Sans body. Mobile-first: this page is reached by QR code. */
:root{
  --beige:#0E0E0F;        /* page ground (veres body bg) — token name kept, value is black */
  --beige-2:#161618;      /* raised panels */
  --ink:#FEFEFE;          /* text */
  --ink-2:rgba(254,254,254,.74);
  --ink-3:rgba(254,254,254,.5);
  --line:rgba(254,254,254,.14);
  --black:#0E0E0F;
  --blue:#3758B0;         /* liberty sunflower centre */
  --blue-2:#2C4791;
  --yellow:#F9D506;       /* liberty petals */
  --yellow-2:#E8C400;
  --white:#FEFEFE;
  --serif:"Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1040px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--beige); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:var(--yellow); text-decoration:none}
a:hover{color:var(--white); text-decoration:underline}
p{margin:0 0 1em}
.wrap{width:min(var(--wrap), 100% - 40px); margin-inline:auto}
.narrow{width:min(760px, 100% - 40px)}
.center{text-align:center}
.skip{position:absolute; left:-999px; top:8px; background:var(--yellow); color:var(--black); padding:8px 14px; z-index:100}
.skip:focus{left:8px}

/* ---------- type ---------- */
.h0,.h1,h3{font-family:var(--serif); font-weight:400; margin:0 0 .35em; letter-spacing:-.005em; color:var(--ink)}
.h0{font-size:clamp(42px, 10.5vw, 92px); line-height:1.02; text-wrap:balance}
.h0 em{font-style:italic; color:var(--yellow)}
.h1{font-size:clamp(28px, 5vw, 50px); line-height:1.12; text-wrap:balance}
h3{font-size:21px; line-height:1.3; margin-bottom:.2em}
.eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--yellow); margin:0 0 16px}
.sub{font-size:17px; color:var(--ink-2); max-width:56ch; margin-inline:auto}
.lede{font-size:clamp(18px,2.4vw,22px); line-height:1.5; max-width:30ch; margin:0 0 28px}
.lede b{color:var(--yellow); font-weight:700}
.link{font-weight:700}

/* ---------- buttons: VERES shape (square, small caps, tracked), Liberty colours ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:15px 30px; border:1.5px solid var(--yellow); border-radius:0;
  font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:var(--yellow); color:var(--black); white-space:nowrap;
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover{background:var(--yellow-2); border-color:var(--yellow-2); color:var(--black); text-decoration:none; transform:translateY(-2px)}
.btn-yellow{background:var(--yellow); border-color:var(--yellow); color:var(--black)}
.btn-yellow:hover{background:var(--yellow-2); border-color:var(--yellow-2); color:var(--black)}
.btn-lg{padding:18px 38px; font-size:13px}

/* ---------- hero ---------- */
.logos{display:flex; align-items:center; justify-content:flex-start; gap:22px; margin-bottom:clamp(32px,5vw,56px)}
@media (min-width:820px){ .logos{gap:28px} }
/* language toggle: fixed top-right */
.lang-toggle{position:fixed; top:max(14px, env(safe-area-inset-top, 0px)); right:max(14px, env(safe-area-inset-right, 0px)); z-index:60; display:flex; padding:3px; border-radius:100px; background:rgba(14,14,15,.72); border:1px solid rgba(254,254,254,.18); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.lang-toggle a{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px 0 9px; border-radius:100px; color:rgba(254,254,254,.72); font-size:12px; font-weight:700; letter-spacing:.1em; text-decoration:none; transition:background .2s, color .2s}
.lang-toggle a:hover{color:var(--white); text-decoration:none}
.lang-toggle a.on{background:var(--white); color:var(--black)}
.lang-toggle svg{display:block; border-radius:2px; flex:0 0 auto}
@media (min-width:820px){ .lang-toggle{top:22px; right:22px} .lang-toggle a{height:36px; padding:0 14px 0 11px; font-size:13px} }

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:0}
.hero .wrap{position:relative; z-index:1; display:flex; flex-direction:column; min-height:88svh; padding:66px 0 32px}
.hero-img{margin:0; position:absolute; inset:0; z-index:0}
.hero-img img{width:100%; height:100%; object-fit:cover; object-position:center 30%}
.hero-img::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(14,14,15,.55) 0%, rgba(14,14,15,.15) 30%, rgba(14,14,15,.78) 58%, var(--black) 100%)}
.hero .logos{margin:0 0 auto}
.hero .btn{width:100%}
@media (min-width:820px){
  .hero{display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; padding:0; min-height:0}
  .hero .wrap{display:block; min-height:0; width:auto; margin:0; padding:clamp(56px,8vw,120px) 48px clamp(56px,8vw,120px) max(40px, calc((100vw - var(--wrap)) / 2))}
  .hero-img{position:relative; inset:auto}
  .hero-img::after{display:none}
  .hero .logos{margin:0 0 clamp(32px,5vw,56px)}
  .hero .btn{width:auto}
}

/* ---------- sections ---------- */
.sect{padding:clamp(48px,8vw,104px) 0; border-top:1px solid var(--line)}

/* steps */
.steps{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:0}
.steps li{display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--line)}
.steps li:first-child{border-top:0}
.steps .num{flex:0 0 36px; width:36px; height:36px; display:grid; place-items:center; background:var(--yellow); color:var(--black); font-family:var(--serif); font-size:18px}
.steps h3{font-size:19px}
.steps p{color:var(--ink-2); margin:0; font-size:15.5px}
@media (min-width:760px){
  .steps{grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px}
  .steps li{flex-direction:column; background:var(--beige-2); border:1px solid var(--line); padding:24px 22px}
  .steps .num{width:40px; height:40px; flex-basis:40px; font-size:20px}
  .steps h3{font-size:21px}
}
/* why: blue band with photo */
.why{display:grid; background:var(--blue); color:var(--white)}
.why-img{position:relative; aspect-ratio:4/3}
.why-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:40% 30%}
.why-txt{padding:clamp(44px,6vw,96px) clamp(24px,6vw,80px)}
.why-txt .eyebrow{color:var(--yellow)}
.why-txt .h1{color:var(--white)}
.why-txt p{color:rgba(255,253,248,.82); max-width:52ch}
@media (min-width:820px){ .why{grid-template-columns:1fr 1fr} .why-img{aspect-ratio:auto} }

/* goal + widget */
.goal{background:var(--beige-2)}
.widget{margin:28px auto 0; max-width:640px}
givebutter-widget{display:block; min-height:120px}
.widget-foot{margin:16px 0 0; font-size:13.5px; color:rgba(14,14,15,.6); text-align:center}
.widget-foot a{color:var(--blue)}
.more{margin-top:32px}
.tax{margin:14px 0 0; font-size:14px; color:var(--ink-3)}
.more .btn{width:100%}
@media (min-width:700px){ .more .btn{width:auto} }
.more-line{display:inline-block; font-family:var(--serif); font-style:italic; font-size:20px; margin-bottom:18px}

/* liberty */
.stats{list-style:none; margin:36px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; text-align:center}
.stats li{padding:14px 0 0; min-width:0}
.stats b{display:block; font-family:var(--serif); font-weight:400; font-size:clamp(28px,8.5vw,72px); line-height:1; color:var(--white); font-variant-numeric:tabular-nums}
.stats span{display:block; margin-top:8px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
@media (min-width:640px){ .stats{gap:32px} .stats span{font-size:13px; margin-top:10px} }
.veh-grid{display:flex; gap:10px; margin:36px -20px 24px; padding:0 20px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.veh-grid::-webkit-scrollbar{display:none}
.veh-grid img{flex:0 0 78%; aspect-ratio:1; object-fit:cover; scroll-snap-align:start}
@media (min-width:700px){
  .veh-grid{display:grid; grid-template-columns:repeat(3,1fr); margin:44px 0 28px; padding:0; overflow:visible}
  .veh-grid img{width:100%; flex:none}
}

/* finale */
.finale{padding:clamp(60px,11vw,150px) 0; background:var(--blue); color:var(--white)}
.finale .h0{color:var(--white)}
.finale .h0 em{color:var(--yellow)}
.finale .sub{color:rgba(255,253,248,.72); margin-top:18px}

/* footer: mailchimp subscribe, styled to the page */
.foot{padding:clamp(56px,8vw,96px) 0 clamp(88px,10vw,120px); border-top:1px solid var(--line)}
.sub-h{font-size:clamp(22px,3.2vw,30px); line-height:1.3; max-width:30ch; margin-inline:auto; margin-bottom:26px}
.sub-row{display:flex; flex-direction:column; gap:16px; max-width:520px; margin:0 auto}
.sub-input{width:100%; min-width:0; padding:15px 16px; border:1.5px solid var(--line); border-radius:0; background:var(--beige-2); color:var(--ink); font-family:var(--sans); font-size:16px; outline:none; transition:border-color .2s}
.sub-input::placeholder{color:var(--ink-3)}
.sub-input:focus{border-color:var(--yellow)}
.sub-row .btn{width:100%}
@media (min-width:600px){ .sub-row{flex-direction:row; gap:10px} .sub-input{flex:1} .sub-row .btn{width:auto} }
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- motion ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .btn:hover{transform:none}
}