/* VietTruck home page. Built from the Hero kit in BRIEF.md: the truck at golden hour, the name huge in the sky,
   then every section opens with one huge word the same way. Ink and paper, one lime band like the truck's side. */

/* Header sits on the hero, then turns solid ink */
.home .site-head{position:fixed;left:0;right:0;background:transparent;transition:background .3s}
.home .site-head.solid{background:var(--ink)}

/* First screen: Leo's pick A */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--ink);color:var(--paper)}
.hero picture,.hero .hero-ph{position:absolute;inset:0;width:100%;height:100%}
.hero .hero-ph{object-fit:cover;object-position:50% 70%}
.hero::after{content:"";position:absolute;inset:0 0 auto;height:58%;z-index:1;background:linear-gradient(rgba(10,14,6,.5),rgba(10,14,6,0))}
.hero::before{content:"";position:absolute;inset:auto 0 0;height:44%;z-index:1;background:linear-gradient(rgba(10,14,6,0),rgba(10,14,6,.82))}
.hero .name{position:absolute;z-index:2;left:12px;right:12px;top:76px;margin:0;font-family:var(--display);font-weight:800;font-size:23.5vw;line-height:.8;letter-spacing:-.05em}
.hero-words{position:absolute;z-index:2;left:20px;right:20px;bottom:40px}
.hero-words h1{font-family:var(--body);font-weight:500;font-size:16px;line-height:1.45;letter-spacing:0;max-width:330px}
.hero-words p{max-width:330px;margin-top:2px}
.hero-words .acts{margin-top:18px}

/* Shared section bits */
.sec{position:relative}
.sec-body{padding:56px var(--gut)}
.k{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lime-deep)}
.big{font-family:var(--display);font-weight:800;font-size:clamp(56px,17vw,150px);line-height:.86;letter-spacing:-.045em;margin:10px 0 18px}
.lead{font-size:18px;line-height:1.5;max-width:560px}
.acts{margin-top:24px;display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.sec figure{margin:0}
.sec figure img{width:100%;height:100%;object-fit:cover}

/* Menu lists with an add button, a thin red rule over prices like the truck's menu panels */
.list{list-style:none;margin:22px 0 0;padding:0;max-width:600px}
.list li{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.list li:last-child{border-bottom:1px solid var(--line)}
.list li>span:first-child{flex:1}
.list b{display:block;font-weight:700;font-size:17px}
.list small{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.list .p{font-weight:700;font-variant-numeric:tabular-nums;border-top:2px solid var(--red);padding-top:2px}
.list .add{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--ink);color:var(--lime);font-size:24px;font-weight:700;text-decoration:none}

/* The signature: paper, the bowl big */
.sig{background:var(--paper);color:var(--ink)}
.sig .k{color:var(--ink)}
.sig-ph{aspect-ratio:4/5}

/* Two spots: ink, the shop photo full-bleed */
.truck{background:var(--ink);color:var(--paper)}
.truck .k{color:var(--lime)}
.truck-ph{aspect-ratio:3/2}
.spots{display:grid;gap:22px}
.spots p{margin-top:6px;line-height:1.5;color:rgba(246,245,236,.86)}
.spots b{color:var(--paper)}
.spots a{color:var(--lime)}
blockquote{margin:30px 0 0;padding-left:16px;border-left:3px solid var(--lime)}
blockquote p{font-size:18px;line-height:1.45}
cite{display:block;margin-top:8px;font-style:normal;font-size:14px;color:rgba(246,245,236,.7)}

/* Catering: the one lime band, like the side of the truck */
.cater{background:var(--lime);color:var(--ink)}
.cater .list li{border-color:rgba(15,20,9,.22)}
.cater .list small{color:rgba(15,20,9,.8)}
.cater .small{color:rgba(15,20,9,.8);margin-top:14px}
.cater .small a{color:var(--ink);font-weight:700}
.cater-ph{aspect-ratio:4/3}

/* Find us */
.visit{background:var(--paper);color:var(--ink)}
.addr{font-size:20px;font-weight:700;line-height:1.35}
.open-now{margin-top:14px;font-weight:700}
.hours{margin-top:14px;border-collapse:collapse;font-size:16px}
.hours td{padding:6px 24px 6px 0}
.hours tr.today td{font-weight:700}
.links{margin-top:18px;display:flex;gap:22px;flex-wrap:wrap;font-weight:700}
.links a{text-underline-offset:4px}
.map-box{position:relative;min-height:340px;background:var(--line)}
.map-box .map{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-fb{position:absolute;inset:0;display:grid;place-content:center;gap:8px;text-align:center;padding:20px}

/* Gentle motion, the same everywhere */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rise{animation:rise .9s .15s both cubic-bezier(.2,.7,.2,1)}
.in-wait{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.in-wait.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{animation:none}.in-wait{opacity:1;transform:none;transition:none}}

/* Desktop: designed on its own */
@media (min-width:900px){
  .hero .hero-ph{object-position:50% 60%}
  .hero .name{left:44px;top:96px;font-size:15.5vw}
  .hero-words{left:48px;bottom:56px;max-width:460px}
  .hero-words h1,.hero-words p{font-size:18px;max-width:440px}
  .sec-body{padding:96px 64px}
  .sig,.cater{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .sig-ph,.cater-ph{aspect-ratio:auto;min-height:100%}
  .sig .sec-body,.cater .sec-body{align-self:center}
  .big{font-size:clamp(88px,9vw,150px)}
  .truck{display:block}
  .truck-ph{aspect-ratio:auto;height:72vh}
  .truck .sec-body{display:grid;grid-template-columns:auto 1fr;gap:20px 64px;align-items:start}
  .truck .big{grid-row:span 2}
  .spots{grid-template-columns:1fr 1fr;gap:40px}
  .visit{display:grid;grid-template-columns:1fr 1fr}
  .map-box{min-height:100%}
}

/* The one main button on the photo and in Find us: the lime pill */
.btn-main{background:var(--lime);color:var(--ink)}
.btn-main:hover{background:#D3F23A}

/* Shorter photos on phones keep the page near 5 screens */
@media (max-width:899px){.sig-ph{aspect-ratio:1/1}.cater-ph{aspect-ratio:16/10}.truck-ph{aspect-ratio:16/10}}
/* Very wide screens: photos stop at 1920px, centred on the ink page */
body.home{background:var(--ink)}
.hero,.sec{max-width:1920px;margin-left:auto;margin-right:auto}

/* Desktop pass after the critic: the name stays in the sky, uneven columns, no photo taller than about 60% of the screen */
@media (min-width:900px){
  .hero .hero-ph{object-position:50% 0}
  .hero .name{top:84px;font-size:6.2vw;line-height:.9;letter-spacing:-.04em}
  .hero .name br{display:none}
  .sig{grid-template-columns:5fr 6fr}
  .sig-ph{max-height:72vh;align-self:center;margin:64px 0 64px 64px}
  .sig-ph img{border-radius:0}
  .truck{display:grid;grid-template-columns:7fr 5fr;align-items:center}
  .truck-ph{height:62vh;margin:64px 0 64px 64px}
  .truck .sec-body{display:block}
  .truck .big{font-size:clamp(72px,7vw,120px)}
  .spots{grid-template-columns:1fr;gap:22px}
  .cater{grid-template-columns:1fr;justify-items:start}
  .cater .sec-body{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:5fr 6fr;gap:16px 64px;align-items:start}
  .cater .big{grid-column:1 / -1}
  .cater .lead{grid-column:1}
  .cater .list{grid-column:2;grid-row:2 / span 3;margin-top:0}
  .visit{grid-template-columns:5fr 6fr}
}