/* Loud Fish: a wall of tonight's dishes, one tile turning at a time.
   Colours, faces and the pinstripe ground from ~/Dev/showroom/demos/loud-fish/css/webflow.css */
@font-face { font-family: "Satoshi Variable"; src: url(fonts/satoshi.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Clashdisplay Variable"; src: url(fonts/clash-display.woff2) format("woff2"); font-weight: 200 700; font-display: swap; }
:root {
  --dark-90: #1a1815; --dark-80: #252525; --dark-70: #444; --ivory-sand: #f2ead4; --peach-cream: #feeac8;
  --body: "Satoshi Variable", Arial, sans-serif; --heads: "Clashdisplay Variable", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden;
  background: var(--dark-90) url(img/pinstripe.png) 50% / 2056px; background-attachment: fixed;
  color: var(--ivory-sand); font: 500 18px/1.35 var(--body);
}
a { color: inherit; text-decoration: none; }

.nav { height: 84px; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; }
.mark img { display: block; width: 128px; height: auto; }
.nav-r { display: flex; align-items: center; gap: 24px; font: 500 14px/1 var(--body); text-transform: uppercase; letter-spacing: .02em; }
.cart span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; border-radius: 99px; background: var(--dark-70); font-size: 11px; }
.burger { display: grid; gap: 6px; width: 28px; }
.burger i { display: block; height: 1.5px; background: var(--ivory-sand); }

.wall-sec { flex: 1; width: 100%; max-width: 1050px; margin: 0 auto; padding: 20px 48px 56px; display: flex; flex-direction: column; justify-content: center; gap: 36px; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
h1 { font: 700 124px/.9 var(--heads); text-transform: uppercase; letter-spacing: -.01em; }
.head-row { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; padding-bottom: 4px; }
.head-row p { font: 400 21px/1.35 var(--body); white-space: nowrap; }
.blob {
  flex: none; display: grid; place-items: center; width: 190px; height: 116px;
  background: url(img/blob.svg) center / contain no-repeat;
  font: 500 17px/1 var(--body);
}
.blob span { padding-bottom: 6px; border-bottom: 1px solid currentColor; }

/* the wall: 3 x 3 cells, one tall and one wide tile, 7 slots */
.wall {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, 236px); gap: 14px;
  grid-template-areas: "a b c" "a d d" "e f g";
}
.s { border-radius: 16px; background: var(--dark-80); }
.s-a { grid-area: a; } .s-b { grid-area: b; } .s-c { grid-area: c; } .s-d { grid-area: d; }
.s-e { grid-area: e; } .s-f { grid-area: f; } .s-g { grid-area: g; }
.s figure { margin: 0; }
.s img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s .cut { background: var(--peach-cream); }
.s .cut img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(26, 24, 21, .28)); }
.s .cut--rice { background: var(--ivory-sand); }
.s .cut--rice img { inset: 13% 15%; width: 70%; height: 74%; }

@media (max-width: 760px) {
  .nav { height: 68px; padding: 0 16px; }
  .mark img { width: 104px; }
  .wall-sec { padding: 12px 16px 40px; gap: 28px; }
  .head { flex-direction: column; align-items: flex-start; gap: 20px; }
  h1 { font-size: clamp(40px, 15.5vw, 96px); }
  .head-row { align-items: flex-start; text-align: left; gap: 12px; }
  .head-row p { font-size: 18px; white-space: normal; }
  .blob { width: 160px; height: 98px; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, 150px); gap: 10px;
    grid-template-areas: "a b" "a c" "d d" "e f" "g g"; }
  .s { border-radius: 12px; }
}