/* Viet Hoa Oyster Bar & Kitchen: the look, from the Hero kit in BRIEF.md.
   Their own bright marble photo shoot, the logo's blue and thin type, square corners, flat blocks. */
body{padding-bottom:0}
.wrap{max-width:var(--max)}
h1,h2{font-weight:300;letter-spacing:-.02em}
h2{font-size:clamp(36px,6vw,60px);line-height:1.02}
h3{font-weight:500}
.lede{font-size:18px;color:var(--muted);margin-top:var(--s4)}

/* Header: white bar, their logo, the sections in page order, one blue block */
.site-head .wrap{height:68px}
.brand img{height:46px;width:auto}
.site-head nav{gap:28px;font-weight:500}
.h-order{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:15px;text-decoration:none}
.h-order:hover{background:#01569B}
.site-head .navlinks{display:none}
@media (min-width:900px){.site-head .wrap{height:80px}.brand img{height:64px}.site-head .navlinks{display:flex;gap:28px}}

/* Two equal action blocks (first screen and the menu page) */
.blocks{display:grid;grid-template-columns:1fr 1fr}
.blocks a{display:flex;align-items:center;justify-content:center;min-height:60px;padding:0 12px;font-weight:600;font-size:16px;text-decoration:none;color:#fff;background:var(--accent);text-align:center}
.blocks a+a{background:var(--ink)}
.blocks a:hover{filter:brightness(1.1)}

/* First screen: their whole table full screen, the words on a small white band over the bottom (Leo's pick: C's photo, B's layout) */
.hero{position:relative;overflow:hidden;padding:0;background:var(--bg);height:calc(100svh - 68px);min-height:560px;max-height:1000px}
.hero picture img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-band{position:absolute;left:0;right:0;bottom:0}
.hero-text{background:rgba(255,255,255,.92);padding:12px 20px 12px}
.hero h1{font-size:26px;line-height:1.08;letter-spacing:-.02em}
.hero-text p{display:none;margin-top:6px;font-size:15px;color:var(--muted)}
.hero .blocks a{min-height:54px}
@media (min-width:900px){
  .hero{height:calc(100vh - 80px);min-height:600px;max-width:1920px;margin:0 auto}
  .hero picture img{object-position:50% 50%}
  .hero-band{left:max(4vw,40px);right:auto;bottom:7%;width:min(36vw,520px)}
  .hero-text{padding:22px 26px 20px}
  .hero-text p{display:block}
  .hero .blocks a{min-height:60px}
  .hero h1{font-size:clamp(40px,3.4vw,56px)}
  .hero-text p{font-size:17px}
}

/* A line of dishes: name, what's in it, price, and a small + in the logo blue */
.picks{list-style:none;margin:var(--s5) 0 0;padding:0;border-top:1px solid var(--line)}
.picks a{display:grid;grid-template-columns:1fr auto 44px;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.picks b{font-weight:600;font-size:17px;line-height:1.3}
.picks small{display:block;font-size:14px;color:var(--muted);font-weight:400}
.picks span{font-variant-numeric:tabular-nums;font-weight:500}
.picks i{font-style:normal;justify-self:end;width:34px;height:34px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:22px;line-height:1;font-weight:400}
.picks a:hover b{text-decoration:underline}
.more{display:inline-block;margin-top:var(--s4);padding:10px 0;font-weight:600;color:var(--accent)}

/* The oyster and sashimi bar: their powder blue */
.bar{background:var(--powder)}
.bar .shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
.bar .copy{padding-top:var(--s6)}
.bar .cols{display:grid;gap:var(--s6);margin-top:var(--s2)}
.bar h3{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-top:var(--s5)}
.bar .picks{margin-top:var(--s3);border-color:#BCC8D6}
.bar .picks a{border-color:#BCC8D6}
.quote{margin:var(--s6) 0 0;font-size:20px;line-height:1.45;font-weight:300}
.quote cite{display:block;margin-top:8px;font-size:15px;font-style:normal;font-weight:600}
@media (min-width:900px){
  .bar .wrap{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
  .bar .shot img{aspect-ratio:4/5}
  .bar .copy{padding-top:0}
  .bar .shot{position:sticky;top:110px}
}

/* From the kitchen: white, four dishes */
.kitchen .grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 12px;margin-top:var(--s6)}
.dish{text-decoration:none;display:block}
.dish img{width:100%;aspect-ratio:4/3;object-fit:cover}
.dish b{display:block;margin-top:10px;font-weight:600;font-size:16px;line-height:1.3}
.dish span{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-variant-numeric:tabular-nums}
.dish i{font-style:normal;width:34px;height:34px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:22px}
.dish:hover b{text-decoration:underline}
@media (min-width:900px){.kitchen .grid{grid-template-columns:repeat(4,1fr);gap:24px}}

/* Platters to order ahead: navy */
.platters{background:var(--ink);color:#fff}
.platters img{width:100%;aspect-ratio:4/3;object-fit:cover}
.platters .copy{padding-top:var(--s6)}
.platters .lede{color:#C9D3DE}
.platters .btn{margin-top:var(--s5)}
.platters .small{color:#C9D3DE;margin-top:var(--s4)}
.platters .small a{color:#fff;display:inline-block;padding:12px 0}
@media (min-width:900px){
  .platters .wrap{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center}
  .platters img{aspect-ratio:4/5;max-width:480px;justify-self:end}
  .platters .copy{padding-top:0;order:2}
}

/* Find us */
.visit .wrap{display:grid;gap:var(--s6)}
.visit .board img{width:100%;aspect-ratio:4/3;object-fit:cover}
.visit address{font-size:18px;margin-top:var(--s4)}
.visit .open-now{margin-top:var(--s4)}
.visit-links{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:var(--s4);font-weight:600}
.visit-links a{color:var(--accent);display:inline-block;padding:12px 0}
.visit .quote{font-size:18px}
.map-box{position:relative;aspect-ratio:4/3;background:var(--powder)}
@media (min-width:900px){.map-box{aspect-ratio:1/1}}
.map-fb{position:absolute;inset:0;display:grid;place-content:center;gap:6px;text-align:center;padding:20px;max-width:none}
.map-fb a{color:var(--accent);font-weight:600;display:inline-block;padding:12px 0}
.map{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (min-width:900px){
  .visit .wrap{grid-template-columns:5fr 7fr;gap:56px;align-items:start}
  .visit .side{display:grid;gap:var(--s5)}
}

/* Footer: navy */
.site-foot{background:var(--ink);color:#C9D3DE}
.site-foot a{color:#fff;display:inline-block;padding:13px 0}
.site-foot .by{display:block}
.site-foot img{height:44px;width:auto;margin-bottom:var(--s3)}

/* Motion: the kit's settle and rise, pointed at this hero */
@media (prefers-reduced-motion:no-preference){.hero picture img{animation:sbl-settle 1.4s cubic-bezier(.2,.7,.2,1) both}}

/* Platters page: the platter photo beside a thin headline on powder, then the request form on white */
.cat-head{padding:0;background:var(--powder);display:grid}
.cat-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 40%}
.cat-t{padding:28px 20px 40px}
.cat-t h1{font-size:clamp(44px,11vw,84px);line-height:1.02}
.cat-form h2{font-size:clamp(34px,7vw,52px)}
.form .row2{display:grid;gap:var(--s4)}
@media (min-width:600px){.form .row2{grid-template-columns:1fr 1fr}}
fieldset{border:0;padding:0;margin:0;display:grid;gap:4px}
legend{font-size:15px;font-weight:600;margin-bottom:6px}
.form .chk{display:flex;align-items:center;gap:10px;font-weight:400;min-height:44px}
.form input,.form button{font-family:inherit}
.form .chk input{width:20px;height:20px;accent-color:var(--accent)}
@media (min-width:900px){
  .cat-head{grid-template-columns:5fr 7fr;align-items:center;max-width:1920px;margin:0 auto}
  .cat-photo img{aspect-ratio:4/5;max-height:calc(100vh - 80px)}
  .cat-t{padding:48px max(5vw,56px)}
  .cat-form .wrap{display:grid;grid-template-columns:4fr 8fr;gap:56px}
  .cat-form .form{margin-top:0}
  .cat-side{position:sticky;top:112px;align-self:start}
}

/* Photos page: their Instagram, all 4:5 */
.gal h1{font-size:clamp(44px,9vw,76px);line-height:1.02}
.gal .lede a{color:var(--accent);font-weight:600}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:var(--s6)}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover}
.gal-act{margin-top:var(--s7)}
@media (min-width:900px){.gallery{grid-template-columns:repeat(3,1fr);gap:10px}}