/* Myli landing — the 4b "short scroll · editorial" artboard.
   The token block below is a copy of the one in styles.css; both are copies of
   "Myli Landing Page.dc.html", which is the source of truth. They are separate
   files on purpose: styles.css locks page scrolling for the menu sheet, and a
   landing page has to scroll. */
:root {
  --ink:      #17356B;
  --ink-mid:  #4E7FB5;
  --ink-pale: #8FA6C4;
  --cream:    #F4F0E6;
  --stock:    #E9E4D6;
  --stock-2:  #E6E0D1;
  --muted:    #8C8676;
  --muted-2:  #9A9484;
  --body:     #3E4757;
  --body-2:   #5A6272;
  --body-3:   #7B8598;
  --rule:     rgba(23, 53, 107, .12);
  --rule-mid: rgba(23, 53, 107, .24);
  --rule-str: rgba(23, 53, 107, .40);
  --serif:    'Marcellus SC', serif;
  --sans:     Jost, sans-serif;
  /* the artboard's 52px gutter, narrowed on a phone */
  --gutter:   clamp(20px, 4.2vw, 52px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font: 300 16px/1.75 var(--sans);
  /* the windmill and the olive divider bleed past their boxes; without this the
     page pans sideways by exactly that overhang on a phone */
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2 { font-weight: 400; margin: 0; font-family: var(--serif); color: var(--ink); }
p { margin: 0; }

/* The engravings are black ink on white; multiply drops the white into the stock. */
.art { mix-blend-mode: multiply; }

/* ---- photo slots -------------------------------------------------------
   No photographs exist yet. Each slot keeps the artboard's hatch and prints
   the brief for the shot that belongs there, so the client can see the list.
   Delete .ph and drop an <img> in when the files arrive. */
.ph {
  background: repeating-linear-gradient(135deg, #E4DFD0 0 11px, #DCD6C5 11px 22px);
  position: relative;
}
.ph::after {
  content: attr(data-cap);
  position: absolute;
  bottom: 12px; left: 14px; right: 14px;
  font: 400 10px/1.3 ui-monospace, monospace;
  letter-spacing: .12em;
  color: #7C8496;
}

/* ---- header ------------------------------------------------------------ */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 22px var(--gutter);
  border-bottom: 1px solid rgba(23, 53, 107, .16);
}
.nav .lockup { width: 180px; }
.nav ul {
  display: flex; align-items: center; gap: 34px;
  margin: 0; padding: 0; list-style: none;
  font: 400 14px/1 var(--serif);
  letter-spacing: .12em;
  color: var(--body);
}
.nav a:hover { color: var(--ink-mid); }
.nav .book { color: var(--ink-mid); }
.lang {
  font: 400 13px/1 var(--serif);
  letter-spacing: .12em;
  color: var(--body-3);
  background: none;
  border: 1px solid var(--rule-mid);
  padding: 8px 11px;
  cursor: pointer;
}
.lang:hover { color: var(--ink); border-color: var(--rule-str); }

/* ---- hero -------------------------------------------------------------- */
.hero {
  height: clamp(420px, 46vw, 520px);
  display: flex; align-items: flex-end;
}
.hero .scrim {
  width: 100%;
  padding: 52px var(--gutter);
  background: linear-gradient(transparent, rgba(244, 240, 230, .94));
}
.hero h1 {
  font-size: clamp(34px, 5.2vw, 62px);
  line-height: 1.05;
  letter-spacing: .01em;
  max-width: 760px;
  text-wrap: pretty;
}
.hero .sub {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  max-width: 520px;
  padding-top: 16px;
}
/* the hero caption sits top-left, clear of the headline */
.hero.ph::after { bottom: auto; top: 24px; left: var(--gutter); }

/* ---- the tavern -------------------------------------------------------- */
.tavern {
  display: flex; gap: 64px;
  padding: 64px var(--gutter) 8px;
}
.tavern .prose {
  flex: 1;
  display: flex; flex-direction: column; gap: 18px;
}
.tavern h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
.tavern p { color: #4A505A; text-wrap: pretty; }
.tavern .divider { width: 300px; opacity: .85; margin-top: 6px; }
.tavern .ph { width: 420px; height: 380px; flex: none; }

/* ---- what people order ------------------------------------------------- */
.popular { padding: 56px var(--gutter); }
.popular .head {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 8px;
}
.popular h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
.popular .head .rule { flex: 1; height: 1px; background: var(--rule-mid); }
.popular .more {
  font: 500 11px/1 var(--sans);
  letter-spacing: .16em;
  color: var(--ink-mid);
  white-space: nowrap;
}
.dishes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px;
  margin: 0; padding: 26px 0 0; list-style: none;
}
.dishes li { display: flex; flex-direction: column; gap: 12px; }
.dishes .ph { height: 190px; }
/* the dotted leader between name and price, same as the printed card */
.dishes .line { display: flex; align-items: baseline; gap: 7px; }
.dishes .n { font: 400 19px/1.2 var(--serif); color: var(--ink); }
.dishes .lead {
  flex: 1;
  border-bottom: 1.5px dotted var(--rule-str);
  transform: translateY(-4px);
}
.dishes .p { font: 400 15px/1 var(--sans); color: var(--ink); }
.dishes .d { font-size: 13px; line-height: 1.55; color: var(--body-2); }

/* ---- practicalities ---------------------------------------------------- */
.practical {
  background: var(--ink);
  padding: 56px var(--gutter);
  display: flex; justify-content: space-between; gap: 60px;
  position: relative; overflow: hidden;
}
.practical .windmill {
  position: absolute; bottom: -40px; right: 60px; width: 200px;
  filter: invert(1); mix-blend-mode: screen; opacity: .12;
  pointer-events: none;
}
.practical .col {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
}
.practical .k {
  font: 400 10px/1 var(--sans);
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(244, 240, 230, .55);
}
.practical .v { font: 400 21px/1.5 var(--serif); color: var(--cream); }
.practical .n { font-size: 14px; line-height: 1.6; color: rgba(244, 240, 230, .65); }
.practical .cta { justify-content: flex-end; }
.btn {
  height: 56px; padding: 0 30px;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font: 400 15px/1 var(--serif);
  letter-spacing: .16em;
  color: var(--ink);
  white-space: nowrap;
}
.btn:hover { background: #fff; }

/* ---- footer ------------------------------------------------------------ */
.foot {
  padding: 22px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  font-size: 12px; line-height: 1;
  color: var(--body-3);
}
.foot .mark { height: 34px; width: auto; }
.foot ul { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.foot a:hover { color: var(--ink-mid); }

/* ---- narrow ------------------------------------------------------------
   The artboard is a single 1280px column. Below this everything that sat side
   by side stacks; nothing is hidden, because on a phone this page is the whole
   shopfront. */
@media (max-width: 860px) {
  .nav { flex-wrap: wrap; gap: 14px; }
  .nav .lockup { width: 140px; }
  .nav ul { gap: 20px; font-size: 12px; width: 100%; justify-content: space-between; }

  .hero { height: clamp(360px, 68vw, 460px); }
  .hero .scrim { padding: 36px var(--gutter); }

  .tavern { flex-direction: column; gap: 32px; padding-top: 44px; }
  .tavern .ph { width: 100%; height: 62vw; max-height: 380px; }
  .tavern .divider { width: min(300px, 70%); }

  .popular { padding-top: 44px; }
  .popular .head { flex-wrap: wrap; gap: 10px; }
  .popular .head .rule { display: none; }
  .dishes { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .dishes .ph { height: 34vw; }

  .practical { flex-wrap: wrap; gap: 32px; padding: 44px var(--gutter); }
  .practical .col { flex: 1 1 240px; }
  .practical .cta { flex-basis: 100%; }
  .btn { width: 100%; }
  .practical .windmill { right: -20px; bottom: -30px; width: 160px; }

  .foot { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 480px) {
  .dishes { grid-template-columns: 1fr; }
  .dishes .ph { height: 56vw; }
  .foot ul { flex-wrap: wrap; gap: 16px; }
}