/* Nonc's Plate Lunch — Lunchbox
   Scene: a bento tray set down on sunlit linoleum. Every block on the page is
   a compartment — saturated, generously rounded, butted right up against its
   neighbours. No shadows anywhere: depth comes from colour, not elevation. */

:root{
  --canvas:#FAF6F1;
  --ink:#181410;
  --ink-2:rgba(24,20,16,.7);
  --ink-3:rgba(24,20,16,.46);

  --ember:#FF4A1C;
  --ember-dk:#B5401C;
  --green:#1D7A5F;
  --butter:#F5C33B;
  --cream:#FFF6E6;
  --clay:#E8763F;

  --display:'Outfit',system-ui,sans-serif;
  --body:'Figtree',system-ui,sans-serif;
  --page:1200px;
  --pad:clamp(16px,4vw,48px);
  --r:30px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* height:auto is required: the width/height attributes on every <img> would
   otherwise beat aspect-ratio and render images at their intrinsic height. */
img{ max-width:100%; height:auto; }

body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--body); font-size:clamp(15.5px,1.02vw,17px); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--display); margin:0; line-height:1; letter-spacing:-.045em; font-weight:800; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--ember); outline-offset:3px; }

.label{ font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ember); margin:0 0 14px; }

.btn{
  display:inline-block; cursor:pointer; text-decoration:none; text-align:center;
  background:var(--ink); color:var(--canvas); border:2px solid var(--ink);
  border-radius:99px; padding:12px 24px;
  font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-.01em;
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
.btn:hover{ transform:translateY(-2px); background:var(--ember); border-color:var(--ember); color:#fff; }
.btn-lg{ padding:15px 30px; font-size:17px; }
.btn-wide{ display:block; width:100%; }
.btn-line{ background:transparent; color:var(--ink); }

/* ---- nav */
.nav{ max-width:var(--page); margin:0 auto; padding:18px var(--pad); display:flex; align-items:center; gap:20px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.04em; text-decoration:none; }
.mark{ width:27px; height:27px; }
.links{ display:flex; gap:24px; margin-left:auto; }
.links a{ font-weight:600; font-size:15px; text-decoration:none; color:var(--ink-2); }
.links a:hover{ color:var(--ember); }
@media (max-width:860px){ .links{ display:none; } .nav .btn{ margin-left:auto; } }

/* ---- the tray: the hero is a bento grid, tiles butted together */
.tray{
  max-width:var(--page); margin:0 auto; padding:8px var(--pad) clamp(40px,5vw,64px);
  display:grid; gap:12px;
  grid-template-columns:repeat(4,1fr);
  grid-template-areas:
    "head head head price"
    "head head head green"
    "yellow art  art  art";
}
@media (max-width:940px){
  .tray{ grid-template-columns:repeat(2,1fr);
    grid-template-areas:"head head" "price green" "art art" "yellow yellow"; }
}
@media (max-width:600px){
  .tray{ grid-template-columns:1fr;
    grid-template-areas:"head" "price" "green" "art" "yellow"; }
}

.tile{ border-radius:var(--r); padding:clamp(22px,2.6vw,34px); }
.tile--head{ grid-area:head; background:var(--ember); color:#fff; display:flex; flex-direction:column; justify-content:center; }
.tile--price{ grid-area:price; background:var(--green); color:#fff; }
.tile--green{ grid-area:green; background:var(--butter); color:var(--ink); }
.tile--art{ grid-area:art; background:var(--clay); padding:0; overflow:hidden; display:grid; place-items:center; }
.tile--yellow{ grid-area:yellow; background:var(--cream); }

.tile--art img{ width:100%; height:100%; object-fit:cover; display:block; }

.eyebrow{ font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 18px; opacity:.85; }
.tile--head h1{ font-size:clamp(38px,5.6vw,72px); font-weight:900; margin-bottom:20px; }
.tile--head .lede{ font-size:clamp(16px,1.35vw,19px); max-width:40ch; margin:0 0 26px; opacity:.92; }
.tile-btns{ display:flex; flex-wrap:wrap; gap:10px; }
.tile--head .btn{ background:#fff; border-color:#fff; color:var(--ember); }
.tile--head .btn:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.tile--head .btn-line{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }

.tile-label{ font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.13em; text-transform:uppercase; margin:0 0 12px; opacity:.8; }
.big{ font-family:var(--display); font-weight:900; font-size:clamp(38px,4.4vw,58px); letter-spacing:-.05em; line-height:.9; margin:0 0 12px; }
.mid{ font-size:16px; margin:0; color:var(--ink-2); }
.tile-note{ margin:0; font-size:14.5px; opacity:.85; }

/* ---- sections */
.section{ max-width:var(--page); margin:0 auto; padding:clamp(44px,5.5vw,84px) var(--pad); }
.head{ max-width:48ch; margin-bottom:clamp(26px,3.4vw,42px); }
.head h2{ font-size:clamp(30px,4.2vw,56px); font-weight:900; }
.head .sub{ color:var(--ink-2); margin:16px 0 0; font-size:17px; }

/* ---- menu: more compartments */
.menu-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:12px; }
.dish{ border-radius:var(--r); padding:26px 24px 28px; color:#fff; }
.dish--1{ background:var(--ember); }
.dish--2{ background:var(--green); }
.dish--3{ background:var(--ember-dk); }
.dish--4{ background:#7A4B2A; }
.dish--5{ background:#2A6F86; }
.dish--note{ background:var(--butter); color:var(--ink); }
.day{ font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 14px; opacity:.82; }
.dish h3{ font-size:25px; margin-bottom:11px; }
.dish p{ margin:0 0 12px; font-size:15.5px; opacity:.92; }
.macro{ margin:0 !important; font-family:var(--display); font-weight:700; font-size:13px !important; opacity:.72 !important; }

/* ---- steps */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.step{ border-radius:var(--r); padding:26px 24px 30px; background:var(--cream); }
.step--b{ background:#EEF3E9; } .step--c{ background:#FDECE4; } .step--d{ background:#EAF1F3; }
.step span{
  display:grid; place-items:center; width:44px; height:44px; margin-bottom:18px;
  border-radius:50%; background:var(--ink); color:var(--canvas);
  font-family:var(--display); font-weight:800; font-size:19px;
}
.step h3{ font-size:20px; margin-bottom:10px; }
.step p{ margin:0; color:var(--ink-2); font-size:15.5px; }

/* ---- order */
.order{
  border-radius:var(--r); background:var(--cream); padding:clamp(24px,3.4vw,46px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,3.6vw,52px); align-items:start;
}
@media (max-width:880px){ .order{ grid-template-columns:1fr; } }
.order .head{ margin-bottom:0; }
.form label{ display:block; margin-bottom:14px; }
.form span{ display:block; font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.form input,.form select,.form textarea{
  width:100%; font-family:var(--body); font-size:16px; color:var(--ink);
  background:#fff; border:2px solid #E9E0D4; border-radius:16px; padding:13px 16px;
}
.form textarea{ resize:vertical; }
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--ember); outline:none; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .form .row{ grid-template-columns:1fr; } }
.sent{ margin:14px 0 0; font-size:15px; font-weight:600; color:var(--green); text-align:center; }

/* ---- footer */
.foot{ max-width:var(--page); margin:0 auto; padding:clamp(36px,4.5vw,64px) var(--pad); color:var(--ink-2); font-size:16px; }
.foot p{ margin:0 0 8px; }
.foot-mark{ font-family:var(--display); font-weight:900; font-size:28px; letter-spacing:-.045em; color:var(--ink); }
.fine{ margin-top:20px; font-size:13px; color:var(--ink-3); line-height:1.7; max-width:62ch; }

/* ---- demo tag */
.demo-tag{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:flex; flex-direction:column; gap:1px;
  background:var(--ink); color:var(--canvas);
  padding:11px 18px; border-radius:99px; text-decoration:none; text-align:center;
  font-size:11px; letter-spacing:.04em; line-height:1.5;
}
.demo-tag span{ opacity:.6; text-transform:uppercase; font-size:9.5px; letter-spacing:.13em; }
.demo-tag strong{ font-family:var(--display); font-weight:700; font-size:12px; }
.demo-tag:hover{ background:var(--ember); color:#fff; }


/* ---- a photo compartment: same tile, same radius, no padding */
.dish--photo{ padding:0; overflow:hidden; }
.dish--photo img{ width:100%; height:100%; min-height:200px; object-fit:cover; display:block; }