/* ============================================================
   /club — Conservation Circle (v13)
   ------------------------------------------------------------
   Brief:     docs/briefs/2026-09-07-port-05-club-v13-report.md
   Prototype: prototypes/13/05-wine-club.html @ 8f08b74
   Enqueued:  functions.php, gated to is_page('club'), plus the
              rhinory-v4-club-editor handle for the Site Editor canvas.

   REGISTER. Dark chrome (nav / campaign bar / footer) around a mostly
   LIGHT paper body, per the Nicole direction that transactional
   surfaces move to the light register. One dark break: the
   conservation-community band (#built) and the closing panel (#join).

   SCOPE. Every rule hangs off .rhinory-club (the block wrapper) or
   .rhinory-page--club (the template <main>). The prototype's page-level
   selectors (.section.paper, .faq, .btn) already exist site-wide in
   style.css on the DARK register, so the scope prefix is what flips
   them to paper here rather than a token override fighting specificity.

   TOKENS. The prototype's body.light-warm block, lifted verbatim. Same
   set the shop / bundle-pdp / gift-card light surfaces carry.
   ============================================================ */

/* Declared on BOTH the template <main> and the block wrapper: the front end
   gets the tokens from the page shell, and the Site Editor canvas — which
   renders the block on its own, with no <main> around it — gets the identical
   set from .rhinory-club. */
.rhinory-page--club,
.rhinory-club{
  --paper:#FBF7EE;
  --paper-2:#F7F1E5;
  --card:#F4EEE0;
  --card-2:#EAE1CE;
  --ink:#2D2926;
  --ink-2:#4A443D;
  --muted:#8A8177;
  --burgundy:#520000;
  --burgundy-hover:#3d0000;
  --rule-l:rgba(45,41,38,.11);
  --rule-l2:rgba(45,41,38,.20);
  --acacia:#B97727;
  --ivory:#F3F2ED;
  --reserve:#211B18;
  --ff-display:"Cormorant Garamond",Georgia,serif;
  --ff-label:"Josefin Sans",system-ui,sans-serif;
  --ff-body:"Lora",Georgia,serif;
  /* The RENDERED prototype paints with --chrome-h:0 (its measure script
     races partials.js), so the hero starts BELOW the chrome rather than
     pulling under it. Matched here so the fidelity gate compares like
     with like — same call as the visit / press ports. */
  --chrome-h:0px;
  background:var(--paper);
  color:var(--ink);
}

/* ---------- page primitives ---------- */
/* The prototype's base type is 16px/1.55; theme.json puts the site on 17px.
   Pinned here so every inherited-size element on this page measures the same
   as the design (same call login.css makes for its v13 surface). */
.rhinory-club{ font-family:var(--ff-body); font-size:16px; line-height:1.55; }
.rhinory-club .wc-wrap{ max-width:1280px; margin:0 auto; padding:0 40px; }
/* .ch-head keeps the SHARED prototype rule's padding-bottom + hairline
   (prototypes/13/styles.css § .ch-head) and overrides only the grid, which the
   club page's own style block re-declares as a single full-width column. The
   hairline is near-invisible on the paper sections because the shared rule
   colours it with the dark-register --rule; reproduced as the prototype paints
   it rather than "corrected", so the 37px of vertical rhythm it contributes
   stays identical. */
.rhinory-club .ch-head{ display:grid; grid-template-columns:1fr; gap:0; align-items:start; padding-bottom:36px; margin-bottom:56px; border-bottom:1px solid rgba(243,242,237,.16); }
.rhinory-club .section.ivory .ch-head{ border-bottom-color:rgba(36,28,22,.14); }
/* Two more halves of that shared rule the club page never overrides. */
.rhinory-club .ch-head .lede{ opacity:.86; }
.rhinory-club .section.ivory .ch-head h2{ color:var(--reserve); }

/* style.css tightens every heading with a global negative letter-spacing. The
   prototype leaves these five at `normal` — they are the ones whose own rules
   declare no tracking, so without this they render ~1% narrower than design. */
.rhinory-club .timeline h4,
.rhinory-club .calf-copy h3,
.rhinory-club .crash-card h2,
.rhinory-club .wc-close h2{ letter-spacing:normal; }
.rhinory-club .ch-head h2{ font-family:var(--ff-display); font-weight:500; font-size:clamp(38px,4.8vw,66px); line-height:1.0; letter-spacing:-.012em; margin:0 0 18px; text-wrap:pretty; }
.rhinory-club .ch-head h2 em{ font-style:italic; font-weight:500; }
.rhinory-club .ch-head .lede{ font-family:var(--ff-body); font-size:17px; line-height:1.65; max-width:58ch; margin:0; }
.rhinory-club .section.paper,
.rhinory-club .section.ivory{ color:var(--ink); }
.rhinory-club .section.paper{ background:var(--paper); }
.rhinory-club .section.ivory{ background:var(--paper-2); }
.rhinory-club .section.paper .ch-head h2 em,
.rhinory-club .section.ivory .ch-head h2 em{ color:var(--burgundy); }
.rhinory-club .section.paper .lede,
.rhinory-club .section.ivory .lede{ color:var(--ink-2); }
.rhinory-club .section.dark .ch-head h2 em,
.rhinory-club .section.darker .ch-head h2 em{ color:var(--acacia); }
.rhinory-club .section.dark .lede,
.rhinory-club .section.darker .lede{ color:rgba(243,242,237,.82); }
.rhinory-club .section.dark,
.rhinory-club .section.darker{ color:var(--ivory); }
/* prototypes/13/styles.css `section{position:relative}` — every <section> on
   the page, not only the ones carrying .section (the closing panel is
   <section class="wc-close">). */
.rhinory-club section{ position:relative; }
.rhinory-club .section{ padding:104px 0; }
.rhinory-club .section.tight{ padding:72px 0; }
.rhinory-club .lbl{ font-family:var(--ff-label); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; }
.rhinory-club .quiet-link{ color:inherit; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(45,41,38,.35); }
.rhinory-club .quiet-link:hover{ text-decoration-color:currentColor; }
/* Forced line break inside a RichText-editable headline. A bare <br> does
   not survive a RichText round-trip; an empty display:block span does. */
.rhinory-club h1 .br-sm,
.rhinory-club h2 .br-sm{ display:block; }

/* Buttons. .btn / .btn-primary / .btn-ghost / .arrow come from style.css, but
   two halves of the v13 button spec never landed there: the label typeface
   (prototypes/13/styles.css § .btn sets font-family:var(--ff-label), the theme
   leaves it inheriting the body serif) and the acacia value inside the primary
   button's glow (v13-shared.css uses #B97727; the theme still carries the old
   #D4A24C). Both are SITE-WIDE drifts, not club ones — corrected here at page
   scope so this port matches its design without repainting every other surface.
   Raised as a finding for a separate brief; see the brief's Review notes. */
.rhinory-club .btn{ font-family:var(--ff-label); }
.rhinory-club .btn-primary{ box-shadow:0 12px 34px -14px rgba(185,119,39,.55); }
@media (max-width:760px){
  .rhinory-club .btn{ font-size:11px; padding:14px 18px; }
}

.rhinory-club .btn-burgundy{ background:var(--burgundy); color:var(--ivory); }
.rhinory-club .btn-burgundy:hover{ background:var(--burgundy-hover); transform:translateY(-1px); }
.rhinory-club .btn-outline-ink{ border:1px solid var(--ink); color:var(--ink); }
.rhinory-club .btn-outline-ink:hover{ background:var(--ink); color:var(--paper); }

/* Skip link — the prototype's .skip-link, renamed so it cannot collide with
   the theme-wide one in style.css. */
.rhinory-club .wc-skip{ position:fixed; top:8px; left:8px; z-index:300; transform:translateY(-160%); background:var(--reserve); color:var(--ivory); font-family:var(--ff-label); font-size:12px; letter-spacing:.16em; text-transform:uppercase; padding:10px 14px; }
.rhinory-club .wc-skip:focus{ transform:translateY(0); outline:2px solid var(--acacia); outline-offset:2px; }

/* ---------- HERO ---------- */
.rhinory-club .wc-hero{ position:relative; min-height:88vh; background:#000; color:var(--ivory); overflow:hidden; margin-top:calc(0px - var(--chrome-h,0px)); padding-top:var(--chrome-h,0px); border-bottom:1px solid rgba(243,242,237,.16); display:flex; align-items:flex-end; }
.rhinory-club .wc-hero-img{
  position:absolute; inset:-8% 0;
  background-image:image-set(
    url('../images/club-circle-banner.webp') type('image/webp'),
    url('../images/club-circle-banner.jpg') type('image/jpeg')
  );
  background-position:center 38%; background-size:cover; background-repeat:no-repeat;
  filter:saturate(.82) contrast(1.06) brightness(.72);
  transform:translate3d(0,var(--hero-py,0px),0) scale(1.06);
  transition:transform .12s linear;
}
/* Operator-swapped hero bed (MediaUpload). The inline --op-img custom property
   wins over the bundled image-set above; empty attribute emits no style at all,
   so the default is byte-identical to a page nobody has touched. */
.rhinory-club .wc-hero-img[style*="--op-img"]{ background-image:var(--op-img); }
.rhinory-club .wc-hero-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,8,7,.55) 0%,rgba(10,8,7,.12) 30%,rgba(20,17,15,.94) 100%); }
.rhinory-club .wc-hero-inner{ position:relative; z-index:2; width:100%; padding:150px 40px 72px; }
.rhinory-club .wc-hero h1{ font-family:var(--ff-display); font-weight:500; font-size:clamp(50px,7vw,108px); line-height:.94; letter-spacing:-.014em; margin:0 0 26px; max-width:none; text-wrap:pretty; color:var(--ivory); }
.rhinory-club .wc-hero h1 em{ font-style:italic; font-weight:500; color:var(--acacia); }
.rhinory-club .wc-hero-sub{ font-family:var(--ff-body); font-size:18px; line-height:1.62; max-width:54ch; color:rgba(243,242,237,.92); margin:0 0 34px; }
.rhinory-club .wc-hero-sub strong{ color:var(--ivory); font-weight:600; }
.rhinory-club .wc-hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:44px; }
.rhinory-club .wc-hero-ctas .alt{ font-family:var(--ff-body); font-size:14px; line-height:1.45; color:rgba(243,242,237,.78); margin-left:10px; display:flex; flex-direction:column; align-items:flex-start; gap:3px; max-width:none; }
.rhinory-club .wc-hero-ctas .alt a{ white-space:nowrap; color:var(--ivory); text-decoration:underline; text-underline-offset:4px; }
.rhinory-club .wc-hero-meta{ display:grid; grid-template-columns:repeat(3,auto); gap:40px; justify-content:start; padding-top:26px; border-top:1px solid rgba(243,242,237,.18); }
.rhinory-club .wc-hero-meta .k{ display:block; color:var(--acacia); margin-bottom:6px; }
.rhinory-club .wc-hero-meta .v{ font-family:var(--ff-display); font-size:22px; line-height:1.1; font-weight:500; }

/* ---------- TIERS ---------- */
.rhinory-club .tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.rhinory-club .tier{ position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--rule-l2); padding:34px 30px 30px; transition:transform .25s ease,border-color .25s ease; }
.rhinory-club .tier:hover{ transform:translateY(-4px); border-color:var(--burgundy); }
.rhinory-club .tier h3{ font-family:var(--ff-display); font-weight:500; font-size:40px; line-height:1; margin:0 0 6px; letter-spacing:-.01em; }
.rhinory-club .tier .pitch{ font-family:var(--ff-body); font-size:15px; line-height:1.6; color:var(--ink-2); margin:0 0 26px; min-height:3.2em; }
.rhinory-club .tier-nums{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:20px 0; border-block:1px solid var(--rule-l); margin-bottom:20px; }
.rhinory-club .tier-nums .big{ font-family:var(--ff-display); font-size:44px; line-height:.95; font-weight:500; display:block; }
.rhinory-club .tier-nums .big small{ font-size:18px; font-style:italic; margin-left:3px; }
.rhinory-club .tier-nums .k{ display:block; color:var(--muted); margin-top:6px; }
.rhinory-club .tier .price{ font-family:var(--ff-display); font-size:21px; font-weight:500; margin:0 0 18px; }
.rhinory-club .tier .price small{ font-family:var(--ff-body); font-size:13px; color:var(--muted); display:block; margin-top:3px; font-style:italic; }
.rhinory-club .tier-ships{ font-family:var(--ff-body); font-size:12.5px; line-height:1.5; color:var(--muted); margin:0 0 20px; padding-bottom:16px; border-bottom:1px solid var(--rule-l); }
.rhinory-club .perks{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:10px; flex:1; }
.rhinory-club .perks li{ font-family:var(--ff-body); font-size:14.5px; line-height:1.5; padding-left:20px; position:relative; }
.rhinory-club .perks li::before{ content:""; position:absolute; left:0; top:.62em; width:9px; height:1px; background:var(--burgundy); }
.rhinory-club .perks li strong{ font-weight:600; }

/* ---- Join CTA: reskinning the native Commerce7 Club Button ----
   The tier join is the plugin's server-rendered wp-commerce7/club-signup mount
   (rhinory_v4_club_join_cta), which the C7 SDK hydrates into nested boxes:

     span.tier-cta.rhinory-club-cta
      └ span.winery-c7-club-signup
         └ div.c7-club-join-button.winery-c7-btn--block
            └ a.c7-btn.c7-btn--primary

   Left alone that paints as an oversized gold pill floating in the card
   footer. The prototype's CTA is a full-width .btn flush at the card's bottom.
   The per-tier burgundy-vs-acacia split cannot come from the closed --c7-*
   variable surface (those are global :root and would repaint checkout too), so
   this is wrapper-scoped CSS reached ONLY through the frozen
   .winery-c7-wine-club-card hook. It does target the SDK-volatile .c7-btn /
   .winery-c7-btn inner classes — known debt under Bible §7.9.2
   (view-source-is-contract), kept narrow so an SDK markup shift fails VISIBLY
   here rather than silently site-wide. */
.rhinory-club .tier .tier-cta{ display:block; width:100%; margin-top:auto; }
.rhinory-club .tier .tier-cta .winery-c7-club-signup,
.rhinory-club .tier .tier-cta .c7-club-join-button,
.rhinory-club .tier .tier-cta .winery-c7-btn{
  display:block; width:100%; margin:0; padding:0; background:transparent; border:0;
}
.rhinory-club .tier .tier-cta .c7-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; box-sizing:border-box; margin:0;
  padding:16px 22px; min-height:48px;
  font-family:var(--ff-label); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  border:0; border-radius:0; text-decoration:none;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.rhinory-club .tier .tier-cta.is-burgundy .c7-btn{ background:var(--burgundy); color:var(--ivory); }
.rhinory-club .tier .tier-cta.is-burgundy .c7-btn:hover{ background:var(--burgundy-hover); transform:translateY(-1px); }
/* Locked state (non-public club security row) — the plugin renders its own
   copy; keep it legible on both card grounds instead of restyling it. */
.rhinory-club .tier .winery-c7-club-signup__locked{
  display:block; padding:16px 22px; font-family:var(--ff-body); font-size:13.5px; line-height:1.5;
  color:var(--muted); border-top:1px solid var(--rule-l);
}

/* Commitment fine print — prototypes/13/05-wine-club.html § .tier-terms.
   Client pass 2 replaced the "Every tier, the same terms" box, the shipment-
   steps panel and the "Compare tiers" drawer with this one always-visible
   paragraph under the cards. A hairline above it, nothing else: it reads as
   the section's footnote, not as another card. */
.rhinory-club .tier-terms{ margin:28px 0 0; padding-top:22px; border-top:1px solid var(--rule-l); font-family:var(--ff-body); font-size:14.5px; line-height:1.65; color:var(--ink-2); max-width:78ch; }
.rhinory-club .tier-terms a{ color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(45,41,38,.35); white-space:nowrap; }
.rhinory-club .tier-terms a:hover{ color:var(--burgundy); text-decoration-color:currentColor; }

/* ---------- A MEMBER'S YEAR ---------- */
.rhinory-club .year-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:64px; align-items:start; }
.rhinory-club .timeline{ list-style:none; margin:0; padding:0; border-left:1px solid var(--rule-l2); }
.rhinory-club .timeline li{ position:relative; padding:0 0 30px 34px; }
.rhinory-club .timeline li:last-child{ padding-bottom:0; }
.rhinory-club .timeline li::before{ content:""; position:absolute; left:-5px; top:9px; width:9px; height:9px; border-radius:50%; background:var(--burgundy); }
.rhinory-club .timeline li.opt::before{ background:var(--paper-2); border:1px solid var(--burgundy); }
.rhinory-club .timeline .mo{ display:block; color:var(--burgundy); margin-bottom:4px; }
.rhinory-club .timeline li.opt .mo{ color:var(--muted); }
.rhinory-club .timeline h4{ font-family:var(--ff-display); font-weight:500; font-size:24px; line-height:1.1; margin:0 0 4px; }
.rhinory-club .timeline p{ font-family:var(--ff-body); font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:0; max-width:52ch; }
.rhinory-club .year-aside{ position:sticky; top:calc(var(--chrome-h,0px) + 24px); }
.rhinory-club .year-aside figure{ margin:0; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--rule-l); }
.rhinory-club .year-aside figure img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- CONSERVATION COMMUNITY ---------- */
.rhinory-club .section.darker{ background:#0E0C0B; }
.rhinory-club .built-head{ grid-template-columns:1fr 1fr; gap:24px; align-items:end; }
.rhinory-club .built-head h2{ margin-bottom:0; }
.rhinory-club .built-head .lede{ max-width:none; padding-bottom:6px; }
.rhinory-club .calves{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:56px; }
.rhinory-club .calf{ position:relative; min-height:520px; overflow:hidden; border:1px solid rgba(243,242,237,.16); display:flex; align-items:flex-end; }
.rhinory-club .calf img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.85) brightness(.82); transition:transform .8s ease; }
.rhinory-club .calf:hover img{ transform:scale(1.03); }
.rhinory-club .calf::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.86) 100%); }
.rhinory-club .calf-copy{ position:relative; z-index:2; padding:34px; }
.rhinory-club .calf-copy h3{ font-family:var(--ff-display); font-weight:500; font-size:44px; line-height:1; margin:0 0 10px; }
.rhinory-club .calf-copy h3 em{ font-style:italic; color:var(--acacia); font-weight:500; }
.rhinory-club .calf-copy p{ font-family:var(--ff-body); font-size:15px; line-height:1.6; color:rgba(243,242,237,.86); margin:0; max-width:46ch; }
.rhinory-club .calf-copy .where{ display:block; margin-top:14px; color:rgba(243,242,237,.6); }
.rhinory-club .ledger{ border:1px solid rgba(243,242,237,.16); }
.rhinory-club .ledger > div{ padding:30px 32px; display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; }
.rhinory-club .ledger .amt{ font-family:var(--ff-display); font-size:40px; line-height:1; font-weight:500; display:block; }
.rhinory-club .ledger .amt.lead{ color:var(--acacia); font-size:56px; }
.rhinory-club .ledger p{ margin:0; font-family:var(--ff-body); font-size:15px; line-height:1.6; color:rgba(243,242,237,.78); max-width:52ch; }
.rhinory-club .ledger-foot{ margin-top:18px; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-family:var(--ff-body); font-size:13.5px; color:rgba(243,242,237,.66); }
.rhinory-club .ledger-foot a{ color:var(--ivory); text-decoration:underline; text-underline-offset:4px; }

/* ---------- AT THE WINERY ---------- */
.rhinory-club .visit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.rhinory-club .visit-photo{ aspect-ratio:5/4; overflow:hidden; border:1px solid var(--rule-l); }
.rhinory-club .visit-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.rhinory-club .visit-copy h2{ font-family:var(--ff-display); font-weight:500; font-size:clamp(38px,4.6vw,60px); line-height:1; letter-spacing:-.012em; margin:14px 0 20px; }
.rhinory-club .visit-copy h2 em{ font-style:italic; font-weight:500; color:var(--burgundy); }
.rhinory-club .visit-copy p{ font-family:var(--ff-body); font-size:16px; line-height:1.65; color:var(--ink-2); margin:0 0 18px; max-width:52ch; }
.rhinory-club .seats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:26px 0; }
/* min-width:0 — without it a 1fr column floors at its content's min-content
   width, and the three seat cells push .visit-copy 12px wider than the grid it
   sits in, overflowing a 390px viewport. */
.rhinory-club .seat{ min-width:0; border:1px solid var(--rule-l2); padding:16px 16px 14px; background:var(--paper); }
.rhinory-club .seat .n{ font-family:var(--ff-display); font-size:36px; line-height:1; font-weight:500; display:block; }
.rhinory-club .seat .t{ display:block; color:var(--burgundy); margin-bottom:8px; }
.rhinory-club .seat .d{ font-family:var(--ff-body); font-size:12.5px; line-height:1.45; color:var(--ink-2); }
.rhinory-club .at-the-bar{ border-left:2px solid var(--burgundy); padding:4px 0 4px 18px; font-family:var(--ff-display); font-style:italic; font-size:20px; line-height:1.35; color:var(--ink); max-width:none; }

/* ---------- CRASH SIDECAR ---------- */
.rhinory-club .crash-card{ display:grid; grid-template-columns:200px 1fr auto; gap:40px; align-items:center; background:var(--card); border:1px solid var(--rule-l2); padding:0; overflow:hidden; }
.rhinory-club .crash-card img{ width:100%; height:100%; min-height:220px; object-fit:cover; display:block; }
.rhinory-club .crash-card .cc{ padding:30px 0; }
.rhinory-club .crash-card h2{ font-family:var(--ff-display); font-weight:500; font-size:32px; line-height:1.05; margin:10px 0 12px; }
.rhinory-club .crash-card h2 em{ font-style:italic; color:var(--burgundy); font-weight:500; }
.rhinory-club .crash-card p{ font-family:var(--ff-body); font-size:15px; line-height:1.6; color:var(--ink-2); margin:0; max-width:56ch; }
.rhinory-club .crash-card .cta{ padding:30px 30px 30px 0; }
/* style.css makes every <picture> display:contents so absolutely-positioned
   wrapped images keep their layout. In THIS grid that is wrong: contents
   promotes both the <source> AND the <img> to grid items, which pushes the copy
   and CTA one cell right and wraps the card onto a second row. The wrapper
   becomes the single grid item instead. */
.rhinory-club .crash-card > picture{ display:block; }

/* ---------- FAQ ---------- */
.rhinory-club .faq-grid{ display:grid; grid-template-columns:1fr; gap:26px; }
.rhinory-club .faq-grid h2{ font-family:var(--ff-display); font-weight:500; font-size:clamp(38px,4.8vw,66px); line-height:1.0; letter-spacing:-.012em; margin:0 0 18px; text-wrap:pretty; }
.rhinory-club .faq-grid h2 em{ font-style:italic; font-weight:500; color:var(--burgundy); }
.rhinory-club .faq-grid .lede{ font-family:var(--ff-body); font-size:17px; line-height:1.65; max-width:58ch; margin:0; color:var(--ink-2); }
.rhinory-club .faq-list{ display:grid; gap:0; }
.rhinory-club .faq{ border-bottom:1px solid var(--rule-l); border-top:0; }
.rhinory-club .faq:first-child{ border-top:1px solid var(--rule-l); }
.rhinory-club .faq summary{ display:grid; grid-template-columns:52px 1fr 36px; align-items:center; gap:16px; padding:22px 0; cursor:pointer; }
.rhinory-club .faq .q-num{ font-family:var(--ff-label); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--burgundy); }
.rhinory-club .faq .q-text{ font-family:var(--ff-display); font-weight:500; font-size:24px; line-height:1.15; color:var(--reserve); }
.rhinory-club .faq .q-toggle{ width:32px; height:32px; border:1px solid var(--rule-l2); border-radius:50%; position:relative; }
.rhinory-club .faq .q-toggle::before,
.rhinory-club .faq .q-toggle::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--ink); }
.rhinory-club .faq .q-toggle::before{ width:14px; height:1px; }
.rhinory-club .faq .q-toggle::after{ width:1px; height:14px; }
.rhinory-club .faq[open] .q-toggle{ background:var(--burgundy); border-color:var(--burgundy); }
.rhinory-club .faq[open] .q-toggle::before,
.rhinory-club .faq[open] .q-toggle::after{ background:var(--ivory); }
.rhinory-club .faq[open] .q-toggle::after{ transform:translate(-50%,-50%) rotate(90deg); }
.rhinory-club .faq[open] summary .q-text{ color:var(--burgundy); }
.rhinory-club .faq .q-answer{ padding:0 0 24px 68px; font-family:var(--ff-body); font-size:15px; line-height:1.65; color:var(--ink-2); max-width:64ch; }
.rhinory-club .faq .q-answer a{ color:var(--burgundy); text-decoration:underline; text-underline-offset:3px; }
.rhinory-club .terms-foot{ margin-top:32px; padding-top:22px; border-top:1px solid var(--rule-l); font-family:var(--ff-body); font-size:13.5px; line-height:1.6; color:var(--muted); display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.rhinory-club .terms-foot a{ color:var(--ink); }

/* ---------- CLOSE ---------- */
/* The closing panel runs FLUSH into the footer chrome, matching the prototype
   (05-wine-club.html — `.wc-close` is the last thing before the footer slot).

   `.rhinory-page` reserves 120px of bottom padding (80px under 782px) as
   breathing room for the generic single-column page body. This template carries
   BOTH classes and § 0 repaints the wrapper paper, so that reserved band painted
   as a cream strip between the dark `.wc-close` and the footer. `.wc-close`
   supplies its own 96px bottom padding, so the reserve has no job here.

   Same defect and same fix as /shop/ and /gifts/ — zeroed page-side, NOT by
   touching parts/footer.html, because the footer is site chrome shared by every
   template and the strip is this page's wrapper, not the footer's.

   Class doubled to (0,2,0): `.rhinory-page` and `.rhinory-page--club` are both
   (0,1,0), so a single class would leave the winner decided by print order, and
   this file's scoping discipline does not depend on print order. */
.rhinory-page--club.rhinory-page--club{ padding-bottom:0; }

.rhinory-club .wc-close{ background:var(--reserve); color:var(--ivory); padding:96px 0; border-top:1px solid rgba(243,242,237,.16); text-align:center; }
.rhinory-club .wc-close h2{ font-family:var(--ff-display); font-weight:500; font-size:clamp(40px,5.4vw,76px); line-height:1.0; margin:18px auto 22px; max-width:none; }
.rhinory-club .wc-close h2 em{ font-style:italic; color:var(--acacia); font-weight:500; }
.rhinory-club .wc-close p{ font-family:var(--ff-body); font-size:16px; line-height:1.6; color:rgba(243,242,237,.8); margin:0 auto 30px; max-width:48ch; }
.rhinory-club .wc-close .btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.rhinory-club .wc-close .hub{ margin-top:28px; font-family:var(--ff-body); font-size:14px; color:rgba(243,242,237,.66); }
.rhinory-club .wc-close .hub a{ color:var(--ivory); text-decoration:underline; text-underline-offset:4px; }

/* ---------- reveal ---------- */
.rhinory-club .reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
.rhinory-club .reveal.visible{ opacity:1; transform:none; }
.rhinory-club .r-rise{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.rhinory-club .r-rise.is-vis{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .rhinory-club .reveal,
  .rhinory-club .r-rise{ opacity:1; transform:none; transition:none; }
  .rhinory-club .wc-hero-img{ transform:none; }
}

/* ---------- responsive (70.9% mobile · design window 375–430) ---------- */
@media (max-width:1100px){
  .rhinory-club .tier-grid{ grid-template-columns:1fr; gap:14px; max-width:560px; }
  .rhinory-club .tier-terms{ max-width:560px; }
  .rhinory-club .year-grid,
  .rhinory-club .visit-grid{ grid-template-columns:1fr; gap:36px; }
  .rhinory-club .year-aside{ position:static; }
  .rhinory-club .visit-photo{ order:-1; aspect-ratio:16/10; }
  .rhinory-club .calves{ grid-template-columns:1fr; }
  .rhinory-club .calf{ min-height:420px; }
  .rhinory-club .built-head{ grid-template-columns:1fr; gap:18px; align-items:start; }
}
@media (max-width:820px){
  .rhinory-club .wc-wrap{ padding:0 22px; }
  .rhinory-club .section{ padding:72px 0; }
  .rhinory-club .section.tight{ padding:56px 0; }
  .rhinory-club .ch-head,
  .rhinory-club .faq-grid{ grid-template-columns:1fr; gap:18px; margin-bottom:36px; }
  .rhinory-club .wc-hero{ min-height:auto; }
  .rhinory-club .wc-hero-inner{ padding:120px 22px 40px; }
  .rhinory-club .wc-hero-meta{ grid-template-columns:1fr; gap:14px; }
  .rhinory-club .wc-hero-ctas .alt{ margin-left:0; flex-basis:100%; }
  .rhinory-club .seats{ grid-template-columns:1fr 1fr 1fr; gap:8px; }
  .rhinory-club .seat{ padding:12px; }
  .rhinory-club .seat .n{ font-size:28px; }
  .rhinory-club .crash-card{ grid-template-columns:1fr; gap:0; }
  .rhinory-club .crash-card img{ min-height:180px; max-height:220px; }
  .rhinory-club .crash-card .cc,
  .rhinory-club .crash-card .cta{ padding:22px; }
  .rhinory-club .crash-card .cc{ padding-bottom:0; }
  .rhinory-club .crash-card .btn{ width:100%; justify-content:center; }
  .rhinory-club .ledger > div{ grid-template-columns:1fr; gap:14px; padding:24px; }
  .rhinory-club .faq summary{ grid-template-columns:40px 1fr 32px; }
  .rhinory-club .faq .q-answer{ padding-left:0; }
  .rhinory-club .faq .q-text{ font-size:20px; }
  .rhinory-club .wc-hero h1{ font-size:clamp(38px,10.5vw,64px); }
}

/* prototypes/13/styles.css § SECTION HEADERS — the shared ≤760 rule tightens
   .ch-head's padding; the club page's own ≤820 block overrides only the grid
   and margin, so this half still applies at mobile. */
@media (max-width:760px){
  .rhinory-club .ch-head{ padding-bottom:24px; }
}

/* prototypes/13/styles.css § FAQ ≤480 — drop the question ordinal on small
   screens and go to a two-column summary.
   NOTE: the rendered prototype does NOT paint this correctly. Its page-level
   ≤820 block re-declares `.faq summary{grid-template-columns:40px 1fr 32px}`
   AFTER the shared sheet, so at 390 the ordinal is hidden while the three-column
   track survives — which drops the question text into the 40px column and
   stretches each FAQ row to ~345px. That is a prototype defect, not the design;
   live implements the intent (ordinal hidden, two real columns). Flagged in the
   brief's DRIFT list for a prototype fix. */
@media (max-width:480px){
  .rhinory-club .faq summary{ grid-template-columns:1fr 32px; }
  .rhinory-club .faq .q-num{ display:none; }
  .rhinory-club .faq .q-answer{ padding-left:0; }
}