/* ═══════════════════════════════════════════════════════════════════════
   Pizza & pasta (Trulli) — logo / identity case study
   ───────────────────────────────────────────────────────────────────────
   Hero and logo & styles use the owner's native exports (no baked-in
   titles, so no CSS masking needed there). Packaging and the closing
   wordmark banner are the original Behance slides, which carry either a
   transparent background or the brand's own off-white #F2EEF0, so setting
   that as the page background makes every slide meet the page seamlessly.

   Palette (read off the specification board in trulli_palette.png):
     #C45927 burnt orange   #C5E8F2 pale blue
     #6BA9B8 teal           #F2EEF0 off-white

   Contrast on the off-white: ink 14.2:1, deep teal 4.9:1, deepened rust
   4.8:1 — all clear of the 4.5:1 AA minimum. The palette's own #C45927 is
   only 3.8:1, so it is used for rules and never for text.

   Every section heading on this page is real HTML.

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

body.pizza-page {
  --pp-cream:  #f2eef0;   /* the exports' own background */
  --pp-ink:    #231f20;   /* headings — 14.2:1 on cream */
  --pp-teal:   #3e6e7a;   /* deepened #6BA9B8 for labels — 4.9:1 */
  --pp-rust:   #b04a1f;   /* deepened #C45927 for tags — 4.8:1 */
  --pp-orange: #c45927;   /* brand orange — decorative rules only */

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

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

body.pizza-page .nav { background: #f2eef0b3; }

/* ── 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.pizza-page .pp-case {
  display: block;
  width: 100%;
  /* clears the fixed nav; the band is cream on cream so it reads as
     breathing room above the title block, not as a gap */
  padding-top: 4rem;
}

body.pizza-page .pp-section { display: block; width: 100%; }

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

/* Sized down and centered instead of full-bleed, per feedback — this is a
   reference/spec board rather than a photographic hero slide, so it reads
   better contained than stretched edge to edge. */
body.pizza-page .pp-slide--palette {
  width: min(90%, 42rem);
  margin: 0 auto;
}

/* ═══ HERO ═════════════════════════════════════════════════════════════
   Mobile-first base: stacked, photo full-bleed on top (no side margins,
   shown uncropped, matching the PsyFind precedent for why cropping a
   "look at the whole image" asset is the wrong call), text block below
   with its own symmetric var(--h-margin) gutter on both sides (previously
   the text sat in a side-by-side column with padding only on its outer
   edge, which is fine in a two-column layout but reads as a lopsided
   single left border once the column becomes a full-width block — this
   was reported as looking like an unintended side-scroll). Owner liked
   this on mobile and asked to keep it there specifically.

   Desktop (≥701px) reverts to the side-by-side layout this page had
   before that change — text left, photo right bleeding to the browser's
   edge — per feedback. order (not a DOM change) puts text visually first
   even though the HTML is image-then-text for the mobile stacking to work;
   grid auto-placement honours order the same way flex does. */
body.pizza-page .pp-hero {
  display: block;
  padding-top: 0;
}

body.pizza-page .pp-hero-img {
  display: block;
  width: 100%;
  height: auto;
}

body.pizza-page .pp-hero-text {
  padding: 3rem var(--h-margin) 0;
  max-width: 46rem;
}

@media (min-width: 701px) {
  body.pizza-page .pp-hero {
    display: grid;
    grid-template-columns: minmax(240px, 30rem) 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    padding: 4.5rem 0 4.5rem var(--h-margin);
  }
  body.pizza-page .pp-hero-img {
    order: 2;
  }
  body.pizza-page .pp-hero-text {
    order: 1;
    padding: 0;
    max-width: 30rem;
  }
}

body.pizza-page .project-title {
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--pp-ink);
}

body.pizza-page .project-label {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pp-teal);
  margin-top: 0.15rem;
}

body.pizza-page .project-tags {
  display: flex;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--pp-rust);
  margin-top: 0.9rem;
}
body.pizza-page .project-tags span + span::before {
  content: '·';
  margin: 0 0.6rem;
  opacity: 0.7;
}

body.pizza-page .project-desc {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--pp-ink);
  margin-top: 1.25rem;
}
body.pizza-page .project-desc strong {
  font-weight: 700;
}

@media (max-width: 700px) {
  body.pizza-page .pp-hero-text {
    max-width: none;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

/* ═══ TEXT BLOCKS ══════════════════════════════════════════════════════ */
body.pizza-page .pp-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 background 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.
     logo       trulli_palette.png has no built-in margin — full 6.5%
     packaging  first opaque pixel at row 63 = 3.28%             + 3.20%  */
body.pizza-page .pp-text--logo  { padding-bottom: 6.5%; }
body.pizza-page .pp-text--pack  { padding-bottom: 3.2%; }

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

/* ── CLOSING BANNER ────────────────────────────────────────────────────
   The wordmark-over-margherita export is a hard-edged photograph with no
   background of its own, so it needs its own air above it: the packaging
   export ends 34px (1.77%) after its last box, and 4.7% tops that up to
   the same 6.5% used everywhere else. A little extra is added on top of
   that so the banner reads as a sign-off rather than as another slide. */
body.pizza-page .pp-banner { margin-top: 5.5%; }

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════
   700px is where shared.css tightens the nav, so the page changes gear at
   the same point. Only the fixed rem gaps need winding in — every gap
   between a heading and its artwork is a percentage and has already scaled
   itself down with the imagery. */
@media (max-width: 700px) {
  body.pizza-page .pp-case { padding-top: 3.25rem; }
  body.pizza-page .pp-text { padding-top: 4rem; }
}