/* ============================================================
   Mercato — "trattoria"
   A dim, warm dining room rather than a web page: espresso ground,
   cream type, an old-style serif with a real italic, centred
   headings, generous curves, and a menu set with dot leaders.
   Loaded after tokens.css, base.css and demo.css.
   ============================================================ */

:root {
  /* --- Type -----------------------------------------------------
     Cormorant Garamond is an old-style face with a genuine italic, so
     the accent words in every headline can actually be italic instead
     of being faked. It is a light, small-on-the-body design: the sizes
     below run larger and the tracking runs positive, because the
     shared -0.035em was drawn for a tight modern serif and closes
     Cormorant's counters up until it looks like a smudge. */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* There is no code on this page and no monospaced voice in this
     identity. The token that carried the small-label voice is
     repointed at the body face, tracked wide — one override moves the
     banner, eyebrows, facts, form labels and prices together instead
     of leaving one of them behind in a typewriter. */
  --font-mono: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --tr-tight: 0.005em;
  --tr-snug: 0.01em;
  --tr-normal: 0;
  --tr-wide: 0.22em;

  --lh-tight: 1.06;
  --lh-snug: 1.18;
  --lh-normal: 1.7;
  --lh-loose: 1.85;

  /* --- Ground: espresso, not neutral ---------------------------
     The shared ink ramp is a warm-shifted grey; this one is properly
     brown, so that side by side with the other demos it reads as
     candlelight rather than as the same page with a new accent. */
  --ink-000: #191009;
  --ink-050: #211710;
  --ink-100: #281c14;
  --ink-200: #30231a;
  --ink-300: #3d2e23;
  --ink-400: #503d2f;
  --ink-500: #6d5443;

  /* Cream, not off-white. */
  --paper-000: #f5ece0;
  --paper-100: #e9dccb;
  --paper-200: #d9c3ab;
  --paper-300: #cbb49c;
  --paper-400: #b39b83;

  --text: var(--paper-000);
  --text-muted: var(--paper-300);
  --text-dim: var(--paper-400);

  /* Hairlines: fine and warm. Cream at low alpha, never white. */
  --line: rgb(245 236 224 / 0.12);
  --line-strong: rgb(245 236 224 / 0.22);
  --rule-soft: rgb(245 236 224 / 0.34);
  --tint: rgb(245 236 224 / 0.06);

  --scrim-rgb: 25 16 9;
  --header-veil: rgb(25 16 9 / 0.88);

  /* --- Accent: terracotta, tuned to a warm ground ---------------
     #c2603f was drawn against the shared near-black. On this browner,
     lighter ground it drops to 4.22:1 on a card, so it is opened up a
     little. It stays a fill and a border colour: as *text* it still
     only clears 3.76:1 once the scroll atmosphere washes the page, so
     every accent-coloured word on this site uses --accent-text. */
  --accent: #cc6a46;
  --accent-text: #e59470;
  --accent-contrast: #1a0f08;
  --danger: #ffb3a0;

  /* --- Shape: soft and generous --------------------------------- */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 28px;

  /* --- Air ------------------------------------------------------
     Longer sections and a wider measure. A restaurant page is read
     slowly; it should not be packed like a landing page. */
  --section-y: clamp(5.5rem, 3.2rem + 9.5vw, 13rem);
  --measure: 68ch;

  --shadow-lift: 0 1px 2px rgb(0 0 0 / 0.45), 0 18px 44px -14px rgb(0 0 0 / 0.6);
  --shadow-deep: 0 2px 6px rgb(0 0 0 / 0.5), 0 50px 90px -24px rgb(0 0 0 / 0.75);
}

/* --- Display type ---------------------------------------------
   Cormorant sits small for its point size, so headings are set larger
   than the shared scale and lead with a hair of positive tracking. */

.display { font-weight: 400; }

.display em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-text);
}

.t-h1 { font-size: clamp(2.75rem, 1.3rem + 7.2vw, 8.5rem); }
.t-h2 { font-size: clamp(2rem, 1.4rem + 3vw, 4.25rem); }
.t-h3 { font-size: clamp(1.375rem, 1.14rem + 1.15vw, 2.25rem); }

/* Small labels: the wide-tracked sans that replaces the mono voice. */
.eyebrow,
.d-facts dt,
.d-form label,
.d-email__label,
.d-banner {
  font-weight: 500;
  font-size: 0.6875rem;
}

/* --- Buttons ---------------------------------------------------
   Still a pill, but a wider, quieter one: a tracked-out sans label
   rather than a sentence, which is how a menu prints a heading. */

.btn {
  padding: var(--s-4) var(--s-7);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Defined in portfolio.css, which the demos do not load, so the header
   button would otherwise be full size. */
.btn--sm { padding: var(--s-3) var(--s-5); font-size: 0.68rem; }

.btn--ghost { border-color: var(--line-strong); }

/* --- Header ----------------------------------------------------- */

.d-brand {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  letter-spacing: 0.06em;
}

.d-brand span {
  color: var(--accent-text);
  font-style: italic;
}

.d-nav {
  gap: var(--s-7);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.d-banner { background: var(--ink-200); }

/* --- Hero -------------------------------------------------------
   The other demos hang the words in the bottom-left corner over a
   photograph darkened from one side. This one centres them in the
   frame under a symmetrical vignette, which is the difference between
   a poster and a page banner.

   `color` is declared and not merely left to inherit: body already
   resolved var(--text) to a literal colour on the way down, so a token
   redefined on this subtree alone would move .eyebrow (which declares
   its own colour) and leave the headline behind. */

.d-hero {
  min-height: 86svh;
  align-items: center;
  text-align: center;
  color: var(--text);
}

.d-hero__media img {
  filter: saturate(0.78) contrast(1.04) brightness(0.5) sepia(0.22);
}

/* Two stacked washes, so the darkest part of the frame is the edge and
   the lightest is behind nothing in particular. Neither layer ever
   drops below 0.62, so the combined veil is at least 1-0.38x0.38 =
   0.856 everywhere. Measured against a pure white photo pixel — a
   worse case than this photograph can actually present, since the
   image is also dimmed to 0.5 — the cream, muted, dim and accent-text
   tones all clear 4.5:1 through it. */
.d-hero::after {
  background:
    radial-gradient(125% 95% at 50% 52%,
      rgb(var(--scrim-rgb) / 0.62) 0%,
      rgb(var(--scrim-rgb) / 0.86) 58%,
      rgb(var(--scrim-rgb) / 0.97) 100%),
    linear-gradient(to top,
      rgb(var(--scrim-rgb) / 0.96) 0%,
      rgb(var(--scrim-rgb) / 0.62) 42%,
      rgb(var(--scrim-rgb) / 0.9) 100%);
}

.d-hero__inner { padding-block: var(--s-9) var(--s-8); }

.d-hero__eyebrow {
  justify-content: center;
  margin-bottom: var(--s-6);
}

.d-hero__title {
  font-size: clamp(2.35rem, 1.05rem + 5.7vw, 5.4rem);
  max-width: 26ch;
  margin-inline: auto;
  margin-bottom: var(--s-6);
}

.d-hero__lead {
  margin-inline: auto;
  margin-bottom: var(--s-7);
  max-width: 48ch;
  color: var(--paper-100);
}

.d-hero__actions {
  justify-content: center;
  margin-bottom: var(--s-8);
}

.d-facts {
  justify-content: center;
  gap: var(--s-5) var(--s-9);
  max-width: 54rem;
  margin-inline: auto;
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-strong);
}

.d-facts div { justify-items: center; }

/* --- Section heads ---------------------------------------------
   Centred, with the rule of the eyebrow mirrored on both sides. The
   demos do not load portfolio.css, so these carry no spacing of their
   own; giving them some is most of the extra air on this page. */

.section__head {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: var(--s-9);
  text-align: center;
}

.section__head .eyebrow { justify-content: center; margin-bottom: var(--s-5); }
.section__head .section__title { margin-bottom: var(--s-5); }
.section__head .t-lead { margin-inline: auto; }

.section__head .eyebrow::after,
.d-hero__eyebrow::after {
  content: "";
  width: var(--s-6);
  height: 1px;
  background: var(--line-strong);
  flex: none;
}

/* On a narrow screen these labels wrap to two lines and the flanking
   rules end up floating beside the middle of a paragraph. */
@media (max-width: 34rem) {
  .d-hero__eyebrow::before,
  .d-hero__eyebrow::after,
  .section__head .eyebrow::before,
  .section__head .eyebrow::after { display: none; }
}

/* --- Intro ------------------------------------------------------
   The photograph is arched. Browsers scale a pair of radii that exceed
   the box down proportionally, so the same declaration is a tall arch
   on desktop and a half-round on a phone without a media query.

   The radius is on the frame; the wipe's clip-path stays on the <img>
   inside it. Clipping the element that carries data-reveal would make
   the observer see a zero ratio and the reveal would never fire. */

.d-intro__media {
  border-radius: 16rem 16rem var(--r-lg) var(--r-lg);
  border-color: var(--line);
}

.d-intro__media img,
.d-shot img {
  filter: saturate(0.82) contrast(1.03) brightness(0.72) sepia(0.16);
}

.d-shot:hover img {
  filter: saturate(0.95) contrast(1.03) brightness(0.88) sepia(0.08);
}

.d-intro__title { margin-block: var(--s-5) var(--s-6); }

/* --- The menu ---------------------------------------------------
   The signature. A menu column narrow enough to read as printed, a
   course heading set in italic between two hairlines, and dot leaders
   running from the end of each dish to its price.

   The leader is a pseudo-element inside .d-item__name, which becomes a
   baseline-aligned flex row: the dish name is the first (anonymous)
   flex item and shrinks and wraps inside its own box, so a two-line
   name never runs underneath the dots — the dots simply start after
   the longest line's column and stay on the first baseline, which is
   exactly what letterpress leaders do. */

.d-group {
  max-width: 48rem;
  margin-inline: auto;
}

.d-group + .d-group { margin-top: var(--s-9); }

.d-group__label {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  letter-spacing: 0.02em;
  text-transform: none;
  /* --accent itself is only safe as a fill here: as text on the washed
     page ground it measures 3.76:1. */
  color: var(--accent-text);
}

.d-group__label::before,
.d-group__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.d-item {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
}

.d-item__name {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: var(--lh-snug);
}

.d-item__name::after {
  content: "";
  flex: 1 1 2rem;
  min-width: 1.25rem;
  height: 3px;
  align-self: baseline;
  /* Sits the dots just clear of the baseline without changing layout. */
  translate: 0 -0.24em;
  background-image: radial-gradient(circle at center, var(--rule-soft) 1.15px, transparent 1.3px);
  background-size: 0.5em 3px;
  background-repeat: repeat-x;
}

.d-item__price {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.75vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--accent-text);
}

.d-item__note {
  font-size: var(--t-small);
  line-height: var(--lh-loose);
  max-width: 56ch;
  color: var(--text-muted);
}

/* --- Reviews ----------------------------------------------------
   Centred cards, the quote in the serif italic, the caption tracked
   out small. Generous corners rather than the shared 18px. */

.d-review {
  gap: var(--s-5);
  padding: var(--s-8) var(--s-6);
  text-align: center;
  border-radius: var(--r-lg);
  background: var(--ink-050);
}

.d-review__stars {
  color: var(--accent-text);
  letter-spacing: 0.35em;
  /* letter-spacing adds a trailing gap that decentres the row. */
  text-indent: 0.35em;
}

.d-review blockquote {
  font-style: italic;
  font-size: clamp(1.25rem, 1.08rem + 0.85vw, 1.75rem);
  line-height: 1.4;
  letter-spacing: 0.005em;
}

.d-review figcaption {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}

/* --- Visit ------------------------------------------------------ */

/* The visit block is a half-width column beside the form; the full
   section-head t-h1 would crowd it off the grid. */
.d-visit__inner .t-h1 {
  font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem);
}

.d-hours div { padding-block: var(--s-4); }

.d-address { line-height: var(--lh-loose); }

.d-email__addr { font-size: clamp(1.375rem, 1.14rem + 1.15vw, 2rem); }

.d-form {
  padding: var(--s-8) var(--s-7);
  border-radius: var(--r-lg);
  background: var(--ink-050);
}

.d-form input,
.d-form textarea,
.d-form select {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--ink-000);
}

.d-form input:focus,
.d-form textarea:focus,
.d-form select:focus { background: var(--ink-100); }

/* --- Footer ------------------------------------------------------ */

.d-footer { padding-block: var(--s-8); }