/* Harry's House home page. Phone first: every part opens on one big photo with the gold label and the
   half-italic heading on it, then its list, so the page reads as one table. Desktop is laid out on its own below. */

/* Header sits over the hero photo on the home page, as on Leo's pick */
.home .site-head{position:fixed;left:0;right:0;background:linear-gradient(rgba(20,17,16,.7),rgba(20,17,16,0));transition:background .3s}
.home .site-head.solid{background:var(--ink)}
.home .h-order{color:var(--cream);border-color:var(--cream)}
@media (max-width:899px){.home .brand img{filter:drop-shadow(0 1px 6px rgba(0,0,0,.55))}}

.k{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}

/* First screen: the whole table, then the words on cream */
.hero{display:grid;grid-template-rows:68% 32%;height:100svh;min-height:640px;max-height:980px;background:var(--cream)}
.hero-ph{position:relative;overflow:hidden}
.hero-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@keyframes settle{from{transform:scale(1.06)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){.hero-ph img{animation:settle 1.6s cubic-bezier(.2,.7,.2,1) both}}
.hero-words{padding:22px var(--gut) 0;align-self:start}
.hero-words h1{font-size:38px;line-height:1.04;margin:8px 0 18px;text-wrap:balance}

/* Sections: each opens on a big photo with its label and heading on it, the hero's type move carried down */
.sec-ph{margin:0}
.sec-ph img{width:100%;height:auto}
.sec-ph.head{position:relative;overflow:hidden}
.sec-ph.head img{aspect-ratio:1/1;object-fit:cover}
/* The words sit just under the photo, never over the food (as in the hero) */
.sec-ph.head figcaption{padding:20px var(--gut) 0}
.sec h2{font-size:36px;line-height:1.05;margin:8px 0 0}
.sec h3{font-family:var(--display);font-weight:500;font-size:30px;line-height:1.08;margin:0 0 16px}
.sec h3 em{font-weight:400}
.sec-body{padding:22px var(--gut) 48px}
.lead{color:var(--muted);max-width:520px}

/* Price list: hairlines, prices lined up, a small round + to order */
.list{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.list li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.list li>span:first-child{flex:1;min-width:0}
.list b{font-weight:600;font-size:17px}
.list small{display:block;font-size:13.5px;line-height:1.4;color:var(--muted);margin-top:2px}
.list .p{font:500 18px/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.add{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);text-decoration:none;font:500 22px/1 var(--body);padding-bottom:2px;transition:background .2s,color .2s}
.add:hover{background:var(--ink);color:var(--cream)}
.sec .acts{margin-top:24px}

/* On the table: bingsu, then the Vietnamese favourites, one menu on paper */
.onthe{background:var(--paper)}
.favs{margin-top:44px;scroll-margin-top:80px}
.favs-ph{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 calc(var(--gut) * -1) 4px}
.favs-ph img{aspect-ratio:4/5;object-fit:cover}

/* The room: the whole photo, the words on it, the way the room looks at night */
.room{background:var(--ink)}
.room .sec-ph.head img{aspect-ratio:4/5}
.room figcaption{padding:22px var(--gut) 52px;color:var(--cream)}
.room .k{color:var(--gold)}
.room figcaption>p{color:var(--line);margin-top:10px;max-width:460px}
.room blockquote{margin:14px 0 0;padding-left:14px;border-left:2px solid var(--gold)}
.room blockquote p{font:italic 400 20px/1.3 var(--display);color:var(--cream)}
.room cite{display:block;font-style:normal;font-size:13px;color:var(--line);margin-top:6px}

/* Find us */
.visit{background:var(--cream)}
.hours{border-collapse:collapse;width:100%;max-width:440px;margin:6px 0 18px}
.hours td{padding:9px 0;border-bottom:1px solid var(--line)}
.hours td+td{text-align:right;font-variant-numeric:tabular-nums}
.hours tr.today td{font-weight:700}
.links{display:flex;flex-wrap:wrap;gap:4px 24px;margin:0 0 12px}
.links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:3px}
.visit .small{line-height:1.6}
.visit .small a{color:var(--ink);display:inline-block;padding:10px 0;margin:-10px 0}
.map-box{position:relative;height:280px;background:var(--cream)}
.map-fb{position:absolute;inset:0;display:grid;place-content:center;gap:6px;text-align:center;font-weight:600;padding:20px}
.map-fb a{font-size:14px;color:var(--gold-deep)}
.map{position:absolute;inset:0;width:100%;height:100%;border:0}

/* A gentle lift on the photos as they come in. Load animation only, nothing pinned or scroll-jacked. */
@media (prefers-reduced-motion:no-preference){
  .sec-ph img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
  .sec-ph:hover img{transform:scale(1.015)}
}

/* Desktop: its own layout. Words left and photo right in the hero, uneven columns below. */
@media (min-width:900px){
  .home .site-head,.home .site-head.solid{position:absolute;background:none}
  .home .site-head .wrap{max-width:none}
  .home .site-head nav{color:var(--ink)}
  .home .h-order{color:var(--ink);border-color:var(--ink)}
  .hero{grid-template-rows:none;grid-template-columns:42% 58%;height:100vh;min-height:680px;max-height:1100px}
  .hero-ph{order:2}
  .hero-ph img{object-position:50% 55%}
  .hero-words{order:1;align-self:end;padding:0 56px 12vh 48px}
  .hero-words h1{font-size:clamp(52px,4.6vw,72px);margin:12px 0 26px}

  .sec h2{font-size:clamp(44px,4vw,60px)}
  .sec-body{padding:0}

  /* On the table: the photo with its heading stays on the left while the two lists pass beside it */
  .onthe .sec-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start;padding:96px max(48px,calc((100vw - var(--wrap))/2 + 48px))}
  .onthe .sec-ph.head{position:sticky;top:40px}
  .onthe .sec-ph.head img{aspect-ratio:4/5}
  .sec-ph.head figcaption{padding:22px 0 0}
  .onthe .list{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;border-top:0}
  .onthe .list li:nth-child(-n+2){border-top:1px solid var(--line)}
  .sec h3{font-size:clamp(32px,2.6vw,40px)}
  .favs{margin-top:72px}
  .favs-ph{margin:0 0 8px;gap:12px}
  .favs-ph img{aspect-ratio:4/3}

  /* The room: full width, words on the photo */
  .room .sec-ph.head img{aspect-ratio:16/9;max-height:100vh}
  /* Desktop: the words sit on the dark timber wall to the left of the bowl, off the food */
  .room .sec-ph.head{position:relative}
  .room .sec-ph.head figcaption{position:absolute;left:0;bottom:0;top:0;width:min(36%,520px);display:flex;flex-direction:column;justify-content:flex-end;padding:48px 40px 64px max(48px,calc((100vw - var(--wrap))/2 + 48px));background:linear-gradient(90deg,rgba(20,17,16,.82),rgba(20,17,16,.55) 70%,rgba(20,17,16,0))}
  .room blockquote p{font-size:21px}
  .room h2{font-size:clamp(40px,3.4vw,52px)}

  /* Find us: the details left, a wide map right */
  .visit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center;padding:96px max(48px,calc((100vw - var(--wrap))/2 + 48px))}
  .map-box{height:auto;aspect-ratio:1/1;max-height:560px}
  .visit h2{font-size:clamp(38px,3.2vw,48px)}
}

/* Very wide or zoomed-out screens: the full-width bands stop at 1920px, centred */
@media (min-width:2000px){.hero,.room .sec-ph{max-width:1920px;margin:0 auto}.hero{max-height:1200px}}

@media (min-width:900px){.home .site-head nav{margin-left:auto;margin-right:28px}}