/* main.css — site-specific overrides and page modules.
   Loaded AFTER colors_and_type.css + site.css. The design system
   (design-system/) stays the source of truth; only additions live here. */

/* ============================================================
   NEWSLETTER ARCHIVE
   Uses the design system's own .cols/.cols-3 + .card components —
   the same pattern as the home page's "Three ways to taste with us".
   Only two things are overridden, both for one reason: these images
   are DOCUMENT COVERS, not photographs.

   1. site.css sets `.card .ph img{position:absolute;object-fit:cover}`,
      which fills the 190px band by cropping. On a newsletter cover that
      slices the masthead off — and the archive mixes portrait, landscape
      and half-letter issues, so it would crop unpredictably. These are
      contained on warm paper instead, so every cover stays whole.
   2. Cards are flexed so the button sits on the baseline of each row
      even when summaries differ in length.
   ============================================================ */

.card.nl{ display:flex; flex-direction:column; }
.card.nl .body{ display:flex; flex-direction:column; flex:1; }
.card.nl .btn{ align-self:flex-start; margin-top:auto; }

/* document cover well — contained, never cropped */
.card.nl .ph{
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}
.card.nl .ph img{
  position:static;
  inset:auto;
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--border-ink);
  box-shadow:var(--shadow-sm);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.card.nl:hover .ph img{ transform:scale(1.03); }

/* issue meta line, sits between the summary and the button */
.card.nl .nl-meta{
  font-family:var(--serif-accent);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  color:var(--ink-soft);
  margin:0 0 18px;
}
.card.nl .nl-dot{ color:var(--line-strong); padding:0 6px; }

.nl-count{
  font-family:var(--sans);
  font-size:var(--step--1);
  color:var(--ink-soft);
  border-top:1px solid var(--line);
  padding-top:var(--space-4);
  margin-top:var(--space-6);
}

@media (prefers-reduced-motion:reduce){
  .card.nl .ph img{ transition:none; }
  .card.nl:hover .ph img{ transform:none; }
}

/* ============================================================
   SQUARE PHOTO FRAME
   site.css fixes `.experience .img-ph` at 340px tall (landscape).
   `.square` opts a single entry into a 1:1 frame instead — used on
   the Vineyards page for portrait-shot sites (Wildwood, Rossi Ranch)
   where a taller frame keeps more of the photo beside long copy.
   Cropping still happens via object-fit/object-position on the img.
   ============================================================ */
.experience .img-ph.square{ height:auto; aspect-ratio:1 / 1; }

/* ============================================================
   WINE CLUB (/wine-club/)
   Built from the design system's .features + .feature cards. The
   four club variants each end in a button, which the stock card
   doesn't allow for (p{margin:0}); flex the card so buttons align.
   ============================================================ */
.club-options .feature{ display:flex; flex-direction:column; }
.club-options .feature p{ margin-bottom:18px; }
.club-options .feature .btn{ align-self:flex-start; margin-top:auto; }

/* primary join panel: a burgundy card inside <main>, not a full-bleed band */
.club-join{
  background:var(--burgundy);
  color:var(--butter);
  border-radius:12px;
  box-shadow:var(--shadow-md);
  padding:48px 44px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  align-items:center;
}
.club-join::before{ content:""; position:absolute; inset:0; background:radial-gradient(80% 130% at 85% 0%,rgba(201,150,47,.22),transparent 60%); }
.club-join>*{ position:relative; }
.club-join .eyebrow{ color:var(--ochre); margin:0; line-height:1.2; }
.club-join h2{ font-family:var(--serif-display); font-weight:600; font-size:38px; color:var(--butter); margin:6px 0 14px; line-height:1.1; }
.club-join p{ font-family:var(--serif-display); font-style:italic; font-size:19px; color:var(--butter-deep); margin:0 0 26px; line-height:1.45; max-width:520px; }
/* buttons on burgundy — restate the on-dark styles so nothing upstream can wash them out */
.club-join .btn-on-dark{ background:var(--butter); color:var(--espresso); border-color:var(--butter); }
.club-join .btn-on-dark:hover{ background:#fff; border-color:#fff; color:var(--espresso); }
.club-join .btn-outline-light{ background:transparent; border-color:rgba(252,237,192,.6); color:var(--butter); }
.club-join .btn-outline-light:hover{ background:rgba(252,237,192,.16); border-color:var(--butter); color:var(--butter); }

/* right column: member call-out floated to the top-right, benefits list below */
.club-join .join-side{ display:flex; flex-direction:column; gap:22px; }
.club-join .member-note{
  align-self:flex-end;
  max-width:300px;
  display:flex; flex-direction:column; gap:6px;
  padding:16px 18px;
  border:1px solid rgba(252,237,192,.35);
  border-radius:8px;
  background:rgba(46,34,24,.28);
  font-family:var(--sans); font-size:13.5px; line-height:1.45; color:rgba(252,237,192,.82);
}
.club-join .member-note strong{ font-family:var(--serif-accent); text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:400; color:var(--butter); }
.club-join .member-note .btn{ align-self:flex-start; margin-top:8px; padding:9px 16px; font-size:12px; }

/* benefits list: ONE marker only (a plain disc) — no icon + bullet doubling */
.club-join ul{ list-style:disc; margin:0; padding:0 0 0 20px; display:flex; flex-direction:column; gap:10px; }
.club-join li{ font-family:var(--sans); font-size:15px; line-height:1.5; color:var(--butter); padding-left:4px; }
.club-join li::marker{ color:var(--ochre); }
@media (max-width:860px){
  .club-join{ grid-template-columns:1fr; padding:36px 28px; }
  .club-join .member-note{ align-self:stretch; max-width:none; }
}