/* ═══════════════════════════════════════════════════════════════════════
   Restaurant website redesign (Aba) — case study page
   ───────────────────────────────────────────────────────────────────────
   Built from four 1920px exports on the project's flat cream (#EFE8DA), so
   they run full-bleed edge to edge and meet the page background seamlessly.
   Every section heading and every word of body copy on this page is real
   HTML text — nothing typographic is left baked into a PNG.

   Palette (read off the UI-kit panel in aba_2.png):
     #BB3204 rust   #EFE8DA cream   #042A57 navy

   Contrast on the cream: navy 11.7:1, mid-navy 7.0:1, rust 4.8:1 — all
   clear of the 4.5:1 AA minimum.

   Nav, footer and .page-nav / .page-nav-btn come from shared.css.
   Everything here is scoped to .restaurant-page.
   ═══════════════════════════════════════════════════════════════════════ */

body.restaurant-page {
  --rr-cream:  #efe8da;
  --rr-navy:   #042a57;   /* headings — 11.7:1 on cream */
  --rr-slate:  #2c5070;   /* muted navy for labels — 7.0:1 on cream */
  --rr-rust:   #bb3204;   /* accent, matches the export's rules — 4.8:1 */

  /* one value aligns every text block on the page, as on high-pines */
  --h-margin: max(1.5rem, 7vw);

  background: var(--rr-cream);
}

body.restaurant-page .nav { background: #efe8dab3; }

/* ── FULL-BLEED CANVAS ─────────────────────────────────────────────────
   No max-width and no side padding, so the exports span the whole viewport.
   width:100% (not 100vw) — 100vw includes the scrollbar gutter and would
   push a horizontal scrollbar onto the page. */
body.restaurant-page .rr-case {
  display: block;
  width: 100%;
  /* clears the fixed nav; the band is cream on cream so it reads as
     breathing room above the header artwork, not as a gap */
  padding-top: 4rem;
}

body.restaurant-page .rr-section { display: block; width: 100%; }

body.restaurant-page .rr-slide {
  display: block;
  width: 100%;
  height: auto;
}

/* ═══ HERO ═════════════════════════════════════════════════════════════
   aba_header.png (1920x1042) is empty flat cream from x=0 to x=1113
   (58.02% of its width); the pale stripes start there and the food
   photography proper at x=1243 (64.74%). Two full-width rust rules cross
   that empty half at rows 287-311 (27.5-29.9% of the height) and 795-819
   (76.3-78.7%), leaving a clear band 46.4% of the height tall.

   The title block is overlaid into that band. Its right edge is capped at
   52vw, so at every width from 700px up it stops at least 6% of the
   viewport short of the first pale stripe and 12% short of the plates. */
body.restaurant-page .rr-hero { display: grid; }

body.restaurant-page .rr-hero-img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  display: block;
  /* never let grid stretch distort it if the overlaid text is the taller item */
  align-self: start;
}

body.restaurant-page .rr-hero-text {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: start;
  /* margin, not padding: box-sizing is border-box site-wide, so padding here
     would eat the column instead of offsetting it. Left edge 7vw + at most
     45vw of text puts the right edge at 52vw. */
  margin-left: var(--h-margin);
  width: min(45%, 34rem);
  /* The band between the two rust rules is centred on 53.12% of the image
     height, not 50%, so plain `align-self: center` would sit the block 1.69%
     of the page width too high. With a centred grid item the MARGIN box is
     what gets centred, so a top margin of twice that (3.4%) pushes the
     border box down by exactly the difference. Percentage margins resolve
     against the grid area's width, which is the page width — the same basis
     the image's height scales on, so the alignment holds at every width. */
  margin-top: 3.4%;
}

body.restaurant-page .project-title {
  /* Was clamp(1.5rem,3vw,2.9rem) — the one page-title on the site that drifted
     from the shared clamp(2.1rem,4.2vw,3.5rem) scale every other project page
     uses. Aligned per feedback ("h1 h2 h3 consistent on each page"); verified
     it still fits inside the rust-rule band with room to spare. */
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--rr-navy);
}

body.restaurant-page .project-label {
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rr-slate);
  margin-top: 0.2rem;
}

body.restaurant-page .project-tags {
  display: flex;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.6;
  color: var(--rr-rust);
  margin-top: 0.7rem;
}
body.restaurant-page .project-tags span + span::before {
  content: '·';
  margin: 0 0.6rem;
  opacity: 0.7;
}

/* ── LEDE ──────────────────────────────────────────────────────────────
   The header's cream band has room for the title block but not for a
   four-line paragraph, so the intro sits beneath the artwork on the page's
   normal gutter — where it also gets a proper reading measure. */
body.restaurant-page .rr-lede {
  padding: 3.5rem var(--h-margin) 0;
}

body.restaurant-page .rr-intro {
  font-size: 1rem;
  line-height: 1.8;
  max-width: 46rem;
}
body.restaurant-page .rr-intro strong {
  font-weight: 700;
  color: var(--rr-navy);
}

/* ═══ TEXT BLOCKS ══════════════════════════════════════════════════════ */
body.restaurant-page .rr-text {
  padding-top: 5.5rem;
  padding-right: var(--h-margin);
  padding-bottom: 0;
  padding-left: var(--h-margin);
}

/* Each export carries a different amount of its own cream above its first
   mark. These modifiers top each one up to the same 6.5%-of-page-width gap
   between the HTML heading and the artwork, and because they are
   percentages they stay in step with the artwork as the page is resized.
     aba_solutions first ink at row 67  = 3.49% of its width + 3.0%
     aba_pallete   first ink at row 59  = 3.07%              + 3.45%
     aba_3         first ink at row 126 = 6.56%              + 0
     aba_4         first ink at row 86  = 4.48%              + 2.0%   */
body.restaurant-page .rr-text--ps      { padding-bottom: 3%; }
body.restaurant-page .rr-text--uikit   { padding-bottom: 3.45%; }
body.restaurant-page .rr-text--changes { padding-bottom: 0; }
body.restaurant-page .rr-text--final   { padding-bottom: 2%; }

/* ── PROBLEMS & SOLUTIONS ─────────────────────────────────────────────
   Two columns of numbered points, set as real HTML. The rust numerals echo
   the treatment in the original artwork. */
body.restaurant-page .rr-ps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: 2.25rem;
}

body.restaurant-page .rr-ps-col {
  border-top: 2px solid var(--rr-rust);
  padding-top: 1.25rem;
}

body.restaurant-page .rr-ps-title {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  color: var(--rr-rust);
  margin-bottom: 1rem;
}

body.restaurant-page .rr-ps-list {
  list-style: none;
  counter-reset: rr-ps;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

body.restaurant-page .rr-ps-list li {
  counter-increment: rr-ps;
  position: relative;
  padding-left: 2.1rem;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 34rem;
}

body.restaurant-page .rr-ps-list li::before {
  content: counter(rr-ps) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--rr-rust);
}

body.restaurant-page .section-heading {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--rr-navy);
}

/* ── PROTOTYPE BUTTON ─────────────────────────────────────────────────
   aba_4.png ends with 7% of its own width in trailing cream, so the button
   needs less padding above it than a section heading needs. */
body.restaurant-page .rr-actions {
  display: flex;
  justify-content: center;
  padding: 2rem var(--h-margin) 0;
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════
   Below 700px the cream half of the header is too narrow to hold a readable
   measure, so the hero stops overlaying: artwork first, then the title
   block beneath it. 700px is also where shared.css tightens the nav, so the
   whole page changes gear at once. */
@media (max-width: 700px) {
  body.restaurant-page .rr-hero { display: flex; flex-direction: column; }

  /* Once the text moves out from under it, the artwork's empty left half is
     just a dead cream band with the plates squeezed against the right edge.
     Crop to the photographic side instead: object-position 100% pins the
     right edge of the export to the right edge of the frame, so the two
     plates and the mosaic fill it. Cover never crops vertically here (the
     box is always taller than 1042/1920 of its width), so the full height —
     and therefore both rust rules — survives.
       1/1  at 700px shows source x 878-1920: a fifth of the frame is the
            artwork's own cream, crossed by the rules, which reads as margin.
       4/5  below 500px tightens to x 1085-1920 so the plates still dominate
            a phone-width frame. A square hero is used down to 500px rather
            than 4/5 because 4/5 of 700px would be an 875px-tall header —
            taller than the laptop viewports that land in this range. */
  body.restaurant-page .rr-hero-img {
    order: -1;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: 100% center;
  }
  body.restaurant-page .rr-hero-text {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    padding: 2.5rem var(--h-margin) 0;
  }

  body.restaurant-page .rr-case { padding-top: 3.25rem; }
  body.restaurant-page .rr-lede { padding-top: 1.75rem; }
  /* only the fixed top gaps need winding in; the bottoms are percentages
     and have already scaled themselves down with the artwork */
  body.restaurant-page .rr-text { padding-top: 4rem; }
  body.restaurant-page .rr-actions { padding-top: 1.5rem; }
  body.restaurant-page .rr-actions .page-nav-btn {
    width: 100%;
    max-width: 22rem;
    text-align: center;
  }
}

/* Two columns of numbered points get too narrow to read before the hero
   breakpoint, so they stack earlier than the rest of the page. */
@media (max-width: 800px) {
  body.restaurant-page .rr-ps-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 500px) {
  body.restaurant-page .rr-hero-img { aspect-ratio: 4 / 5; }
}