/* Le Chat Perché, Montpellier
   Treatment A, layered physical. Palette sampled by Lens from the restaurant's
   own photographs: terracotta walls, golden menu cover, pine tables, black
   leather banquette, burgundy curtains, aged brass rail, off-white cloths. */

@font-face {
  font-family: "Montserrat";
  src: url("montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;          /* variable, one file covers 400 and 900 */
  font-style: normal;
  font-display: swap;
}

:root {
  --paper:      #F5F0E8;   /* tablecloths and ceiling plaster */
  --white:      #FFFFFF;
  --ink:        #1C1C1C;   /* banquette leather */
  --muted:      #5A4632;   /* warm neutral, leaning to the woodwork */
  --pine:       #3B2A1A;   /* tables and chair frames */
  --terracotta: #C0352A;   /* dominant wall colour, and the cat mark */
  --burgundy:   #8B1A1A;   /* curtains and accent upholstery */
  --gold:       #D4B020;   /* menu cover, the one accent */
  --brass:      #B8860B;   /* brass rail. Hairlines only, never text */

  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --t-display: clamp(2.5rem, 10vw, 4.5rem);
  --t-h2:      clamp(1.6rem, 5vw, 2.25rem);
  --t-label:   0.8125rem;
  --t-body:    1.0625rem;

  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 2rem;
  --s4: 3.5rem;
  --s5: 4.25rem;

  --measure: 62ch;
  --edge: clamp(1.25rem, 5vw, 4rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--sans);
}

/* height:auto is load-bearing: the HTML width/height attributes are
   presentational hints that map to CSS height and would otherwise beat every
   aspect-ratio below, rendering each photograph at its full intrinsic height. */
img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { margin: 0; font-weight: 900; line-height: 1.05; }

p { margin: 0; }

a { color: var(--terracotta); }

:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
}

/* The 44px target is on the base rule, not only on :focus. The measuring tool
   reads the element in its resting state and scored it 139x27; a control that
   is only the right size once it is focused is still a broken control. */
.skip {
  position: absolute;
  left: -9999px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.75rem 1rem;
}
.skip:focus {
  left: var(--s2); top: var(--s2);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1rem;
  text-decoration: none;
}

/* ---------- shared ---------- */

.band {
  padding: var(--s5) var(--edge);
  max-width: 78rem;
  margin: 0 auto;
}

.band > h2 {
  font-size: var(--t-h2);
  letter-spacing: -0.01em;
  margin-bottom: var(--s3);
}
.band > h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: var(--s2);
  background: var(--terracotta);
}

.eyebrow, .course, .fact h3, .seat h3, .foot-name {
  font-size: var(--t-label);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--s2); }

.tabular { font-variant-numeric: tabular-nums; }

.link {
  color: var(--terracotta);
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 53, 42, 0.35);
  transition: border-color 160ms ease, color 160ms ease;
}
.link:hover { border-bottom-color: var(--terracotta); color: var(--burgundy); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  font-size: var(--t-body);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-decoration: none;
  /* A phone number broken across two lines reads as a mistake at the exact
     moment somebody is deciding whether to call. It never wraps. */
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background-color 160ms ease, color 160ms ease,
              transform 160ms ease, border-color 160ms ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-accent { background: var(--gold); color: var(--ink); }        /* 8.1:1 */
.btn-accent:hover { background: #E4C02A; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--pine);
}
.btn-ghost:hover { background: var(--pine); color: var(--paper); }

.btn-wide { width: 100%; margin-top: var(--s4); }

/* ---------- top bar: a white card floating over the photograph ---------- */

.topbar {
  position: relative;
  z-index: 3;
  padding: var(--s2) var(--edge) 0;
}

.topbar-card {
  max-width: 78rem;
  margin: 0 auto;
  background: var(--white);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 0.6rem 1rem;
  box-shadow: 0 2px 0 rgba(59, 42, 26, 0.18);
}

/* The mark is an SVG loaded via <img>, which is an isolated document and
   cannot reach this stylesheet's @font-face. So the cat is the SVG and the
   name is set here, in real Montserrat. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
}
.brand img { width: 44px; height: 44px; }
.brand-name {
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.topbar nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* at 390px the three links must hold one line, or the bar eats the fold */
@media (min-width: 760px) {
  :root { --s5: 5.5rem; }
  .topbar nav ul { gap: 0.25rem 1.25rem; }
  .topbar nav a { font-size: var(--t-label) !important; letter-spacing: 0.08em !important; }
}
.topbar nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.15rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}
.topbar nav a:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }

/* ---------- hero ---------- */

.hero { position: relative; }

.hero-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(1.04) contrast(1.02);
}

.hero-stack {
  position: relative;
  width: min(34rem, 100% - 2 * var(--edge));
  margin: -3.5rem auto 0;
}

.hero-card {
  background: var(--paper);
  padding: var(--s3) clamp(1.25rem, 4vw, 2rem) var(--s3);
  border-top: 5px solid var(--terracotta);
  box-shadow: 0 6px 28px rgba(28, 28, 28, 0.16);
  animation: rise 420ms ease-out both;   /* one entrance, hero only */
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.eyebrow { color: var(--muted); margin-bottom: var(--s2); }

h1 {
  font-size: var(--t-display);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.h1-sub {
  display: block;
  margin-top: 0.85rem;
  font-size: var(--t-label);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.lede { margin-top: var(--s2); max-width: 34ch; }

.hours-line {
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid rgba(184, 134, 11, 0.5);
  font-variant-numeric: tabular-nums;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s3);
}

/* the rotated sticker: treatment A's "dropped on the table" layer */
.sticker {
  position: absolute;
  top: -1.9rem;
  right: -0.35rem;
  transform: rotate(-4deg);
  background: var(--white);
  color: var(--terracotta);
  padding: 0.5rem 0.8rem;
  font-size: var(--t-label);
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  box-shadow: 0 3px 12px rgba(28, 28, 28, 0.2);
}

@media (min-width: 900px) {
  /* The nav card used to be pulled ON to the photograph with margin-top:-79px.
     Operator rejection: "the top bar is over the left card on pc". It was: the
     bar carries z-index 3 and is opaque, so on a short desktop viewport it
     painted across the top of the hero card underneath it. The overlap is
     gone. The layered look that Treatment A wants is still carried by the
     hero card itself, which sits over the bottom-left of the photograph, and
     by the rotated sticker on its corner. */
  /* min-height is the actual guard, and it is measured rather than guessed.
     The card is absolutely positioned inside this photograph, anchored by its
     foot, so when the photograph is shorter than the card the card grows
     UPWARD and out of the hero, and the bar (z-index 3, opaque) paints across
     it. That is what the operator saw. Rendered at 1366x700 the card is 541px
     tall, because the h1 takes two lines at every desktop width below about
     1500px. 38rem is 608px: 541 plus the 32px foot offset plus clearance, so
     the photograph holds the card at any width and no overlap is possible.
     Deliberately width-independent: a vw-based card width fixed 1366px and
     reintroduced the bug at 900-1100px, where the card is narrower still. */
  .hero-photo { aspect-ratio: 16 / 9; max-height: 72vh; min-height: 38rem; }
  .hero-stack {
    position: absolute;
    left: var(--edge);
    bottom: var(--s3);          /* clears the floating nav card above it */
    width: min(31rem, 46vw);
    margin: 0;
  }
  /* the sticker moves to the card's foot here: at the top it collided with
     the nav card, which is opaque and paints over it */
  .sticker { top: auto; bottom: -1.6rem; right: -1.2rem; }
}

/* The phone fold. On a 390x844 screen the name, the hours and the phone button
   must all be reachable without scrolling: that is the entire job of this page,
   and every value below was set by measuring the rendered result. */
@media (max-width: 759px) {
  .hero-photo { aspect-ratio: 16 / 10; }
  .hero-stack { margin-top: -5rem; }
  .hero-card { padding-top: 1.5rem; }
  .eyebrow { margin-bottom: 0.6rem; }
  .lede { margin-top: 0.75rem; }
  .hours-line, .cta-row { margin-top: var(--s2); }
  /* One column, not a 50/50 split. Two nowrap buttons side by side need about
     315px inside a 280px card at 360px, so they either wrapped the phone
     number or overflowed. Stacked, the phone button keeps its position in the
     fold and only the directions button moves down. */
  .cta-row { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
  .cta-row .btn { padding-left: 0.9rem; padding-right: 0.9rem; }
}

/* ---------- la carte ---------- */

.carte .note {
  max-width: var(--measure);
  color: var(--muted);
  margin-bottom: var(--s4);
}

.menu { max-width: 40rem; }

.course {
  margin: var(--s4) 0 var(--s2);
  color: var(--terracotta);
}
.course:first-child { margin-top: 0; }

.dishes { list-style: none; margin: 0; padding: 0; }

.dishes li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s2);
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(184, 134, 11, 0.35);
}

.dish-name { font-weight: 900; }
.dish-note {
  display: block;
  font-size: var(--t-label);
  color: var(--muted);
  margin-top: 0.15rem;
}
.price {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--pine);
}

.menu-foot {
  max-width: var(--measure);
  margin-top: var(--s3);
  font-size: var(--t-label);
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* ---------- full bleed photograph ---------- */

.fullbleed { margin: 0; }
.fullbleed img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 62%;
  filter: saturate(1.04) contrast(1.02);
}
.fullbleed figcaption,
.pair figcaption {
  padding: var(--s2) var(--edge) 0;
  max-width: 44ch;
  font-size: var(--t-label);
  letter-spacing: 0.02em;
  color: var(--muted);
}
@media (min-width: 900px) {
  /* Operator rejection: the dish photograph was "way too big". It was full
     bleed at 21/9, which on a 1440px monitor is a 617px-tall wall of food.
     It is now a contained band on the same 78rem measure as every other
     section, capped at 420px, and the 3/2 crop keeps more of what is a
     portrait photograph than 21/9 did. */
  .fullbleed {
    max-width: 78rem;
    margin: 0 auto;
    padding: 0 var(--edge);
  }
  .fullbleed img { aspect-ratio: 3 / 2; max-height: 420px; }
  .fullbleed figcaption { padding-left: 0; padding-right: 0; }
}

/* ---------- inverted colour block ---------- */

.block-invert {
  max-width: none;
  background: var(--burgundy);
  color: var(--paper);
}
.block-invert > h2 { color: var(--gold); }
.block-invert > h2::after { background: var(--gold); }

.seats {
  display: grid;
  gap: var(--s4);
  max-width: 78rem;
  margin: 0 auto;
}
@media (min-width: 760px) {
  .seats { grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
}

.seat h3 {
  padding-top: var(--s2);
  border-top: 2px solid var(--gold);
  margin-bottom: var(--s1);
}
.seat p { max-width: 40ch; }

/* ---------- asymmetric pair, thick white borders, slight rotation ---------- */

.pair { display: grid; gap: var(--s4); }
.pair figure { margin: 0; }
.pair img {
  width: 100%;
  background: var(--white);
  border: 10px solid var(--white);
  box-shadow: 0 6px 24px rgba(28, 28, 28, 0.18);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.pair figcaption { padding-left: 0; padding-right: 0; }

@media (min-width: 760px) {
  .pair { grid-template-columns: 1.7fr 1fr; align-items: end; gap: var(--s3); }
  .pair-big img   { transform: rotate(-1.2deg); }
  .pair-small img { transform: rotate(1.8deg); aspect-ratio: 1 / 1; }
}

/* ---------- the photograph we are asking for ---------- */

.slot { display: grid; gap: var(--s3); }
@media (min-width: 760px) {
  .slot { grid-template-columns: 1.2fr 1fr; align-items: center; gap: var(--s4); }
}

.slot-frame {
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(184, 134, 11, 0.7);
  background:
    repeating-linear-gradient(135deg,
      rgba(192, 53, 42, 0.07) 0 12px,
      rgba(192, 53, 42, 0.13) 12px 24px);
}
.slot-mark {
  font-size: clamp(3rem, 9vw, 5rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: rgba(192, 53, 42, 0.55);
}
.slot-band .slot-text h2 { font-size: var(--t-h2); margin-bottom: var(--s2); }
.slot-text p { max-width: 42ch; color: var(--muted); }

/* ---------- nous trouver ---------- */

.facts { display: grid; gap: var(--s4); }
@media (min-width: 760px) {
  .facts { grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
}

.fact h3 {
  color: var(--terracotta);
  padding-bottom: var(--s1);
  margin-bottom: var(--s2);
  border-bottom: 1px solid rgba(184, 134, 11, 0.4);
}
.fact p + p { margin-top: var(--s1); }
/* a phone number is the thing most likely to be tapped: give the inline
   contact links a real 44px target rather than a 21px line of text */
.fact .link, .foot .link, .legal .link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.fact-note { font-size: var(--t-label); color: var(--muted); max-width: 34ch; }

@media (min-width: 760px) {
  .btn-wide { width: auto; padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* ---------- footer ---------- */

.foot {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s4) var(--edge);
  display: grid;
  gap: var(--s2);
}
.foot-name { color: var(--gold); }
.foot .link { color: var(--paper); border-bottom-color: rgba(245, 240, 232, 0.4); }
.foot .link:hover { color: var(--gold); border-bottom-color: var(--gold); }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- mentions légales ---------- */

.legal { max-width: 44rem; }
.legal h1 { font-size: var(--t-h2); text-transform: none; letter-spacing: -0.01em; }
.legal h2 {
  font-size: var(--t-label);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--terracotta);
  margin: var(--s4) 0 var(--s1);
}
.legal p { max-width: var(--measure); }
.legal .todo {
  border-left: 3px solid var(--gold);
  padding-left: var(--s2);
  color: var(--muted);
  font-size: var(--t-label);
}

/* ---------- reduced motion: switch all of it off ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover { transform: none; }
}

/* ---------- print: hours and address on a fridge ---------- */

@media print {
  .topbar, .sticker, .cta-row, .btn, .slot-frame, .fullbleed, .pair { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero-photo { display: none; }
  .hero-stack { margin: 0; width: auto; position: static; }
  .hero-card { box-shadow: none; border-top: 2px solid #000; animation: none; }
  .band { padding: 0.6cm 0; max-width: none; }
  .block-invert { background: #fff; color: #000; }
  .block-invert > h2, .course, .fact h3, .foot-name { color: #000; }
  .foot { background: #fff; color: #000; }
  .fact, .hours-line, .dishes li { break-inside: avoid; }
  a[href^="tel:"]::after, a[href^="mailto:"]::after { content: " (" attr(href) ")"; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}