/* Peperoncino — "What's On" diary section.
   Written against the homepage's own system: Cormorant Garamond 300 headings,
   Inter body, zero radius, cream on --dark, and the page's .reveal observer
   for entrance motion. It is a dark section between two cream ones, so it
   keeps the page's cream / dark / cream rhythm rather than interrupting it. */

.pep-diary {
  --pep-red:    #C8502A;
  --pep-dark:   #1A1208;
  --pep-cream:  #F5EFE0;
  --pep-gold:   #C4963C;
  --pep-h:      'Cormorant Garamond', Georgia, serif;
  --pep-b:      'Inter', system-ui, -apple-system, sans-serif;
  --pep-ease:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --pep-rule:   rgba(245, 239, 224, 0.13);

  box-sizing: border-box;
  display: grid;
  /* The About block above is image-left on dark. Mirroring it would read as a
     repeat, so the diary puts its photograph on the right instead. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 26%);
  align-items: stretch;
  background: var(--pep-dark);
  color: var(--pep-cream);
  font-family: var(--pep-b);
}

.pep-diary *,
.pep-diary *::before,
.pep-diary *::after { box-sizing: inherit; }

/* ── Figure ───────────────────────────────────────────────────────────────
   The restaurant's own wall clock. Warmed toward the brand and held back so
   the type stays the subject. */

.pep-diary-figure {
  order: 2;
  position: relative;
  overflow: hidden;
  background: #120c05;
  min-height: 100%;
  /* Grid items floor at min-content, and an image's min-content is its
     intrinsic width. Without this the photo widens the whole page. */
  min-width: 0;
}

.pep-diary-figure img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 34rem;
  object-fit: cover;
  object-position: 50% 34%;
  display: block;
  filter: saturate(0.8) contrast(1.03) brightness(0.66);
  transform: scale(1.02);
  transition: transform 1.4s var(--pep-ease), filter 1.4s var(--pep-ease);
}

.pep-diary:hover .pep-diary-figure img {
  transform: scale(1.055);
  filter: saturate(0.9) contrast(1.03) brightness(0.74);
}

/* Warm veil, plus a fade into the type column so there is no hard seam. */
.pep-diary-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, rgba(26, 18, 8, 0) 38%, rgba(26, 18, 8, 0.72) 78%, rgba(26, 18, 8, 0.97) 100%),
    linear-gradient(180deg, rgba(26, 18, 8, 0.45) 0%, rgba(26, 18, 8, 0.12) 40%, rgba(26, 18, 8, 0.55) 100%);
  pointer-events: none;
}

/* ── Body ─────────────────────────────────────────────────────────────── */

.pep-diary-body {
  order: 1;
  padding: clamp(4.5rem, 7vw, 8rem) clamp(2rem, 4.5vw, 4.5rem) clamp(4.5rem, 7vw, 8rem) clamp(1.5rem, 4.5vw, 5.5rem);
  min-width: 0;
}

.pep-diary-head {
  /* The measure belongs on the standfirst, not the display heading, or the
     heading breaks into an orphan line. */
  margin-bottom: clamp(2.75rem, 4vw, 4rem);
}

.pep-diary-label {
  display: block;
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--pep-gold);
  margin-bottom: 1rem;
}

.pep-diary-h {
  font-family: var(--pep-h);
  font-weight: 300;
  font-size: clamp(2.4rem, 3.4vw, 3.8rem);
  line-height: 1.04;
  text-wrap: balance;
  letter-spacing: -0.005em;
  color: var(--pep-cream);
  text-transform: none;
  font-style: normal;
  margin: 0 0 0.6rem;
}

.pep-diary-sub {
  max-width: 46ch;
  font-family: var(--pep-h);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: rgba(245, 239, 224, 0.44);
  margin: 0;
}

/* ── The diary itself ─────────────────────────────────────────────────────
   An agenda, not cards: dates anchor the left, the entry reads across, a
   hairline separates. */

.pep-diary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--pep-rule);
}

.pep-diary-row {
  display: grid;
  grid-template-columns: minmax(0, 14.5rem) minmax(0, 1fr) auto;
  align-items: start;
  column-gap: clamp(1.25rem, 2.5vw, 2.75rem);
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--pep-rule);
  transition: background 0.5s var(--pep-ease);
}

.pep-diary-row:last-child { border-bottom: none; }

.pep-diary-row:hover {
  background: linear-gradient(90deg, rgba(245, 239, 224, 0.035), rgba(245, 239, 224, 0) 70%);
}

.pep-diary-when {
  font-family: var(--pep-h);
  font-size: 1.24rem;
  line-height: 1.34;
  color: rgba(245, 239, 224, 0.9);
  margin: 0;
  padding-top: 0.1rem;
}

.pep-diary-what { min-width: 0; }

.pep-diary-title {
  font-family: var(--pep-h);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-transform: none;
  font-style: normal;
  color: var(--pep-cream);
  margin: 0 0 0.4rem;
  transition: color 0.45s var(--pep-ease);
}

.pep-diary-row:hover .pep-diary-title { color: var(--pep-gold); }

.pep-diary-note {
  font-size: 0.86rem;
  line-height: 1.66;
  max-width: 62ch;
  color: rgba(245, 239, 224, 0.58);
  margin: 0;
}

.pep-diary-status {
  justify-self: end;
  white-space: nowrap;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 239, 224, 0.46);
  margin: 0;
  padding-top: 0.5rem;
}

/* One entry is being promoted, so one entry gets the gold. */
.pep-diary-row.is-featured .pep-diary-status { color: var(--pep-gold); }

.pep-diary-row.is-closed .pep-diary-when { color: rgba(245, 239, 224, 0.55); }
.pep-diary-row.is-closed .pep-diary-title { color: rgba(245, 239, 224, 0.78); }

/* ── Reveal fallback ──────────────────────────────────────────────────────
   The page's own IntersectionObserver adds .on. If the section is used
   somewhere without that script, nothing should stay invisible. */

@media (prefers-reduced-motion: reduce) {
  .pep-diary .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── Narrow ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .pep-diary { grid-template-columns: 1fr; }

  .pep-diary-figure { order: 1; }
  .pep-diary-body   { order: 2; }

  .pep-diary-figure img {
    min-height: 0;
    height: 15rem;
  }

  .pep-diary-figure::after {
    background:
      linear-gradient(180deg, rgba(26, 18, 8, 0.3) 0%, rgba(26, 18, 8, 0.15) 45%, rgba(26, 18, 8, 0.95) 100%);
  }

  .pep-diary-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.55rem;
    padding: 1.6rem 0;
  }

  .pep-diary-when {
    grid-column: 1;
    font-family: var(--pep-b);
    font-size: 0.63rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pep-gold);
    padding-top: 0;
  }

  .pep-diary-status {
    grid-column: 2;
    grid-row: 1;
    padding-top: 0;
  }

  .pep-diary-what { grid-column: 1 / -1; }

  .pep-diary-title { font-size: 1.4rem; }
}