/* ═══════════════════════════════════════════════════════════════════════════
   MARBLELENS V3 · ACT III CLIENT SITE — "Marble & Salt", a restaurant

   The one consistent fictional client the CONSTRUCT act builds (restaurant
   is the platform's locked first proof vertical). TWO layers of the same
   DOM: .site-draft is the graphite blueprint, .site-live the developed
   site. Identical structure and metrics — only ink differs — so the
   carriage boundary registers to the pixel.

   THE RESPONSIVE PROOF IS REAL. All three recompositions are container
   queries on the mock body — no screenshots, no scaled desktop layout:

     > 1000px   full nav row · two-column hero (16:9 image) · 3 menu cards
     601–1000   collapsed nav · stacked hero (4:3 crop) · 2+1 cards ·
                hours moves beside booking
     ≤ 600      compact header · everything stacked (1:1 crop) · booking
                CTA REORDERS above the menu · touch-height buttons

   The client site keeps its own quiet identity: paper, ink, one clay
   accent — the architectural blue belongs to OUR instrument, not to the
   client's brand.
   ═══════════════════════════════════════════════════════════════════════════ */

.site-sheet {
  --site-accent: var(--clay);
  background: var(--paper-hi);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
  padding: clamp(10px, 3cqw, 26px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2cqw, 18px);
}

/* ── structure (shared by both layers) ── */
.ms-nav { display: flex; align-items: baseline; gap: 14px; }
.ms-logo { font-family: var(--serif); font-weight: 700; font-size: clamp(15px, 2.6cqw, 21px); color: var(--ink); }
.ms-links { display: flex; gap: 12px; margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
.ms-burger { display: none; margin-left: auto; width: 26px; }
.ms-burger i { display: block; height: 2px; margin: 4px 0; background: var(--ink-2); }

.ms-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(10px, 2.6cqw, 22px); align-items: center; }
.ms-h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(17px, 4cqw, 34px); line-height: 1.08; color: var(--ink); margin: 0 0 6px; }
.ms-lede { font-size: clamp(10px, 1.6cqw, 13px); margin: 0 0 10px; max-width: 30em; }
/* ── THE PHOTOGRAPH SLOT ──────────────────────────────────────────────────
   The live layer's hero image. Set `--ms-hero-photo` to a url() and a real
   photograph takes the box; leave it unset and the CSS composition below
   stands in, which keeps the mock honest at every container width
   (ASSET_CONTRACT slot 6 — the composition is an approved resting state,
   not a defect). No JS and no markup move either way: the slot is one div
   in #ms-template and all three of its clones inherit whatever the sheet
   carries.

   ONE IMAGE SERVES ALL THREE CROPS. The container queries further down
   change the BOX (16:9 -> 4:3 -> 1:1); `cover` re-crops around the same
   centre rather than squashing, so the subject has to survive a centred
   square — that is the constraint on any photograph dropped in here, and
   it is the only one.

   The composition is declared as its own custom property so the fallback
   is a value, not a duplicated block — the draft layer overrides
   `background` wholesale and its dashed blueprint X is unaffected either
   way. */
.site-sheet {
  --ms-hero-composition:
    radial-gradient(ellipse 60% 70% at 62% 44%, rgba(161, 95, 69, 0.5), transparent 70%),
    radial-gradient(ellipse 34% 40% at 30% 66%, rgba(105, 112, 90, 0.35), transparent 72%),
    linear-gradient(160deg, #d9cfbd, #c9bda6);
}
.ms-hero-img {
  aspect-ratio: 16 / 9;
  background-image: var(--ms-hero-photo, var(--ms-hero-composition));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ms-cta-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ms-btn {
  font-family: var(--sans); font-weight: 600; font-size: clamp(9px, 1.5cqw, 12px);
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ink); color: var(--ink);
}
.ms-btn-primary { background: var(--site-accent); border-color: var(--site-accent); color: #f6f1e8; }

.ms-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.8cqw, 16px); }
.ms-card { border: 1px solid var(--line); padding: clamp(7px, 1.6cqw, 14px); background: var(--paper); }
.ms-card b { display: block; font-family: var(--serif); font-size: clamp(11px, 1.8cqw, 15px); color: var(--ink); margin-bottom: 3px; }
.ms-card i { display: block; font-style: normal; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; color: var(--site-accent); margin-top: 5px; }
.ms-card p { margin: 0; font-size: clamp(9px, 1.4cqw, 11.5px); }

.ms-foot { display: flex; gap: clamp(10px, 2.4cqw, 24px); align-items: baseline; border-top: 1px solid var(--line); padding-top: clamp(6px, 1.4cqw, 12px); }
.ms-hours { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; color: var(--graphite); }
.ms-book { margin-left: auto; }

/* ── the blueprint layer: same metrics, graphite ink only ── */
.site-draft { background: var(--paper); color: var(--graphite); }
.site-draft .ms-logo, .site-draft .ms-h1 { color: transparent; -webkit-text-stroke: 1px rgba(110, 106, 99, 0.8); }
@supports not (-webkit-text-stroke: 1px black) {
  .site-draft .ms-logo, .site-draft .ms-h1 { color: var(--graphite-2); }
}
.site-draft .ms-hero-img {
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(146, 141, 131, 0.55) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(146, 141, 131, 0.55) 50%, transparent calc(50% + 0.5px));
  border: 1px dashed var(--graphite-2);
}
.site-draft .ms-btn { border-style: dashed; border-color: var(--graphite-2); color: var(--graphite); background: transparent; }
.site-draft .ms-card { border-style: dashed; background: transparent; }
.site-draft .ms-card i { color: var(--graphite-2); }
.site-draft .ms-links, .site-draft .ms-hours { color: var(--graphite-2); }
.site-draft .ms-foot { border-top-style: dashed; }

/* ── the three real recompositions ── */
@container (max-width: 1000px) {
  .ms-links { display: none; }
  .ms-burger { display: block; }
  .ms-hero { grid-template-columns: minmax(0, 1fr); }
  .ms-hero-img { aspect-ratio: 4 / 3; order: -1; }      /* image leads, tighter crop */
  .ms-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-menu .ms-card:nth-child(3) { grid-column: 1 / -1; }
}
@container (max-width: 600px) {
  .site-sheet { font-size: 12px; gap: 8px; }
  .ms-hero-img { aspect-ratio: 1 / 1; }                 /* square crop for the phone */
  .ms-menu { grid-template-columns: minmax(0, 1fr); }
  .ms-menu .ms-card:nth-child(3) { grid-column: auto; }
  /* the booking action reorders ABOVE the menu — the phone's job is the
     reservation, not the reading */
  .ms-cta-row { order: -1; }
  .ms-hero .ms-copy { display: flex; flex-direction: column; }
  .ms-btn { min-height: 34px; padding: 9px 16px; font-size: 11px; }
  .ms-foot { flex-direction: column; gap: 6px; }
  .ms-book { margin-left: 0; }
}