/* Additions on top of the design CSS — mobile nav (not in the prototype). */

/* Hamburger button — hidden on desktop, shown at the nav breakpoint.
   The full desktop nav fits comfortably down to ~920px (measured), so the
   prototype's 1040px switch was ~120px too early. We keep the design CSS
   verbatim (home.css hides .nav__links ≤1040) and override here: re-show the
   desktop nav in the 921–1040 band, and move the burger switch to ≤920. */
.nav__burger { display: none; }

@media (min-width: 921px) and (max-width: 1040px) {
  .nav__links { display: flex !important; }
  .nav__cta { display: inline-flex !important; }
}

@media (max-width: 920px) {
  .nav__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 60;
  }
  .nav__burger span {
    display: block;
    height: 1.5px;
    width: 100%;
    background: var(--on-dark, #ECE9E2);
    transition: transform 0.28s ease, opacity 0.2s ease;
  }
  .nav--menu-open .nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav--menu-open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav--menu-open .nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  /* The CTA pill collapses into the menu on small screens. */
  .nav__cta { display: none; }
}

/* The .navm overlay is a child of <header.nav>. When scrolled, `.nav.is-scrolled`
   applies backdrop-filter, which makes .nav a containing block for fixed-position
   descendants — trapping the full-screen .navm inside the slim header bar (the
   page then shows through below it). Drop the filter while the menu is open so
   .navm's `position:fixed; inset:0` resolves to the viewport again. */
.nav.nav--menu-open {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Journal cards — make the WHOLE card a single click target to the article.
   The prototype's stretched link (.j-card__stretch / .j-feature__stretch) sat at
   z-index:0, below the position:relative cover art, so the cover (and titles)
   swallowed the click. Raise the link above the decorative layers and isolate
   each card's stacking; keep the author link (a different destination) above it. */
/* NOTE: blog.css is linked by the journal page AFTER site-extra.css, so these
   use 2-class selectors to beat its equal-specificity rules regardless of order. */
.j-grid .j-card { isolation: isolate; }
.j-grid .j-card__stretch { z-index: 1; }
.j-grid .j-card__meta { position: static; } /* date is click-through; don't trap the author link */
.j-grid .j-card__by { position: relative; z-index: 2; }

.j-wrap .j-feature { position: relative; isolation: isolate; }
.j-wrap .j-feature__stretch { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.j-wrap .j-feature__meta, .j-wrap .j-feature__link { position: relative; z-index: 2; }

/* Slide-down panel */
.navm {
  position: fixed;
  inset: 0;
  top: 0;
  z-index: 50;
  background: var(--slate-deep, #1E3340);
  background: linear-gradient(180deg, var(--slate-deep, #1E3340), var(--slate-deeper, #15242F));
  overflow-y: auto;
  padding: 96px 28px 48px;
  animation: navm-in 0.28s ease both;
}
@keyframes navm-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.navm__inner { display: flex; flex-direction: column; gap: 4px; max-width: 560px; margin: 0 auto; }
.navm__group { border-bottom: 1px solid rgba(199, 164, 104, 0.16); padding: 14px 0; }
.navm__link {
  display: block;
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 1.85rem;
  color: var(--on-dark, #ECE9E2);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.navm__sub { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-left: 2px; }
.navm__sublink {
  color: var(--champagne, #C7A468);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 4px 0;
  opacity: 0.85;
}
.navm__sublink:hover { opacity: 1; }
.navm__cta { margin-top: 24px; align-self: flex-start; }

/* Cuisine dish-page rail (position:fixed) fades out as the footer scrolls in
   (toggled by RailToggle) so it never overlaps the footer. */
.cz-side { transition: opacity 0.3s ease, visibility 0.3s ease; }
.cz-side.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* Eyebrows: the inline-flex `.chap` has two items (the label + " · suffix").
   On narrow screens the no-wrap flex shrinks both, so the suffix floats beside
   a wrapped label. Allow wrapping + tighten tracking so each part stays whole
   and stacks cleanly (justify-content:center on centered sections is kept). */
@media (max-width: 600px) {
  /* .chap.chap = specificity (0,2,0) so it beats archive.css's later-loaded
     `.chap { letter-spacing: .26em }`. */
  .chap.chap {
    flex-wrap: wrap;
    gap: 4px 10px;
    letter-spacing: 0.14em;
  }
  /* Hero eyebrow is short enough to stay on one line. */
  .ah .ah__eyebrow {
    display: block;
  }
}

/* Footer legal row: the desktop horizontal row with "·" separators wraps
   messily on phones (dangling bullets, cramped). Stack it centered. */
@media (max-width: 700px) {
  .foot__base {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  .foot__base > span:not(:last-child)::after {
    display: none;
  }
}

/* Footer mobile layout: the desktop multi-column grid is cramped on phones,
   and the 420px bottom padding (sized for the wide reed art) leaves a big gap
   above the reeds at narrow widths (reed art is ~3:1, so much shorter). Stack
   everything in one centered column and size the reed gap to the art height. */
@media (max-width: 760px) {
  .foot {
    padding: 56px 24px clamp(120px, 33vw, 230px);
    text-align: center;
  }
  .foot__inner {
    grid-template-columns: 1fr;
    gap: 44px;
    justify-items: center;
  }
  .foot__brand { display: flex; flex-direction: column; align-items: center; }
  .foot__lockup { justify-content: center; margin-bottom: 16px; }
  .foot__word small { text-align: center; }
  .foot__tag { max-width: 30ch; margin-left: auto; margin-right: auto; }
  .foot__mail { margin-top: 18px; }
  .foot__col { width: 100%; }
  .foot__col ul { align-items: center; gap: 14px; }
  .foot__col h4 { margin-bottom: 16px; }
  /* couplet tightens up a touch on small screens */
  .foot__couplet { margin-bottom: 40px; }
}