/* membership.css: /membership/ (P5, Arrival redesign 02/11/2026). The card faces live in cards.css.
   Grounds: pine hero (the three cards as objects) > porcelain comparison > graphite points with the cabin photo >
   porcelain questions > the pine end card. One vermilion thing per viewport: in the hero it is the Vermilion card's
   star (Jade's button is light), below it nothing until the end card's button. */

/* ============================== hero: the H1, the lede, the dealt hand of cards ============================== */
.mem-hero { position: relative; overflow: clip; background: var(--pine); padding: calc(var(--frame-top) + clamp(40px, 1.5rem + 3.6vw, 96px)) 0 clamp(72px, 3rem + 6vw, 160px); }
/* a soft pool of light on the table the cards are laid on */
.mem-hero::before {
  content: ""; position: absolute; left: 50%; top: 58%; z-index: 0; width: min(1400px, 140vw); aspect-ratio: 2.2; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--green-high) 70%, transparent), color-mix(in srgb, var(--green-raised) 40%, transparent) 55%, transparent);
}
.mem-hero-in { position: relative; z-index: 1; }
.mem-hero-head { display: grid; gap: clamp(20px, 2vw, 28px); }
.aj-site .mem-h1 { margin: 0; color: var(--mist); max-width: 12ch; }
.mem-hero-side { display: grid; gap: 18px; align-content: end; justify-items: start; }
.mem-hero-side .t-lede { color: var(--mist-2); max-width: 30ch; margin: 0; }
.mem-hero .mem-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-size: var(--fs-small); color: var(--mist-2); }
.mem-hero .mem-status .btn-link { color: var(--mist); font-size: var(--fs-small); }
.mem-hero .mem-status.is-in { display: flex; align-items: center; gap: 10px 12px; padding: 12px 14px; background: var(--green-raised); color: var(--mist); border: 1px solid var(--hair-d); border-radius: var(--r-1); max-width: 520px; }
@media (min-width: 1024px) {
  .mem-hero-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .aj-site .mem-h1 { grid-column: 1 / span 8; max-width: 13ch; }
  .mem-hero-side { grid-column: 9 / -1; padding-bottom: 0.6em; }
}

/* the H1's words rise in their masks on first paint, as on the photo stages (keyframes in frame.css) */
.mem-h1 .w { display: inline-block; overflow: clip; vertical-align: top; padding: 0.06em 0 0.12em; margin: -0.06em 0 -0.12em; }
.mem-h1 .w > span { display: inline-block; animation: mh-word var(--dur-reveal) var(--ease-out) both; animation-delay: calc(200ms + var(--i, 0) * 70ms); }
.mem-hero-side { animation: mh-up 900ms var(--ease-out) 700ms both; }

/* ---- the cards: a holder that drifts (data-speed: translate), a tilt that deals (animation: transform), the face
   that fans and lifts (transform) ---- */
.mem-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; margin-top: clamp(56px, 2rem + 4.6vw, 128px); }
.mem-tier { position: relative; z-index: 1; display: grid; align-content: start; min-width: 0; }
.mc-hold { position: relative; }
.mc-tilt { animation: mem-deal 1500ms var(--ease-out) both; animation-delay: var(--deal-d, 600ms); }
.mem-tier .mem-card {
  --fan: rotate(var(--fan-r, 0deg));
  transform: var(--fan); transform-origin: 50% 100%;
  transition: transform 700ms var(--ease-out), box-shadow 700ms var(--ease-out);
}
.mem-tier:nth-child(1) .mem-card { --fan-r: -2.5deg; }
.mem-tier:nth-child(2) .mem-card { --fan-r: 1.5deg; }
.mem-tier:nth-child(3) .mem-card { --fan-r: -1deg; }
.mem-tier:has(.mc-hold:hover) { z-index: 4; }
.mem-tier .mc-hold:hover .mem-card { transform: translateY(-14px) rotate(0deg) scale(1.03); }
.mem-tier .mc-hold:hover .mem-card::before { translate: 18% 0; }

@keyframes mem-deal {
  from { opacity: 0; transform: translate(var(--deal-x, 0), 64px) rotate(var(--deal-r, 0deg)); }
  30% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

/* the perks under each card, and its one action */
.mem-mine { margin: 28px 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--vermilion-glow); }
.mem-perks { list-style: none; margin: clamp(32px, 1.5rem + 1.4vw, 48px) 0 0; padding: 0; border-top: 1px solid var(--hair-d); counter-reset: perk; }
.mem-mine + .mem-perks { margin-top: 12px; }
.mem-perks li { counter-increment: perk; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--hair-d); font-size: 15px; line-height: 1.45; color: var(--mist-2); }
.mem-perks li::before { content: counter(perk, decimal-leading-zero) / ""; font-size: var(--fs-meta); font-weight: 500; color: var(--mist-2); opacity: .7; font-variant-numeric: tabular-nums; }
.mem-perks li:first-child { color: var(--mist); font-weight: 500; }
.mem-tier > .btn, .mem-tier > .mem-included { margin-top: 28px; }
.mem-tier .btn-secondary { --btn-line: var(--field-d); }
.mem-hero .mem-included { display: flex; align-items: center; min-height: 52px; color: var(--mist-2); font-size: var(--fs-small); }

@media (min-width: 900px) {
  .mem-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
  /* a hand of cards: Member and Vermilion lean out from under Jade, which sits a little forward */
  .mem-tier:nth-child(2) { z-index: 3; }
  .mem-tier:nth-child(1) .mem-card { --fan: translate(6%, 30px) rotate(-6deg); }
  .mem-tier:nth-child(2) .mem-card { --fan: translateY(-10px) scale(1.05); }
  .mem-tier:nth-child(3) .mem-card { --fan: translate(-6%, 30px) rotate(6deg); }
  .mem-tier .mem-card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--mist) 8%, transparent), 0 2px 4px color-mix(in srgb, var(--pine) 40%, transparent), 0 44px 70px -30px color-mix(in srgb, var(--pine) 95%, transparent); }
  .mem-tier .mem-card[data-tier="member"] { box-shadow: 0 0 0 1px var(--hair), 0 2px 4px color-mix(in srgb, var(--pine) 40%, transparent), 0 44px 70px -30px color-mix(in srgb, var(--pine) 95%, transparent); }
  .mem-tier .mc-hold:hover .mem-card { transform: translateY(-22px) rotate(0deg) scale(1.06); }
  /* dealt from one pile in the middle */
  .mem-tier:nth-child(1) .mc-tilt { --deal-x: calc(100% + var(--col-gap)); --deal-r: 4deg; --deal-d: 820ms; }
  .mem-tier:nth-child(2) .mc-tilt { --deal-d: 640ms; }
  .mem-tier:nth-child(3) .mc-tilt { --deal-x: calc(-100% - var(--col-gap)); --deal-r: -4deg; --deal-d: 820ms; }
  .mem-perks { margin-top: clamp(72px, 3rem + 3vw, 112px); }
}

/* ============================== compare every benefit (porcelain) ============================== */
.mem-compare-head { margin-bottom: clamp(32px, 1.5rem + 2vw, 56px); }
.mem-compare-head .t-h2 { max-width: 14ch; }
.mem-phone { display: grid; gap: 28px; }
.mem-desk { display: none; }
.js .mem-panel[data-off] { display: none; }
.mem-seg { max-width: 520px; }
.mem-panel { display: grid; gap: 20px; scroll-margin-top: calc(var(--frame-top) + 24px); }
.mem-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding-top: 4px; }
.mem-th-name { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; color: var(--heading); }
.mem-th-fee { flex-basis: 100%; font-size: var(--fs-small); color: var(--text-2); font-variant-numeric: tabular-nums; }
.mem-dl { margin: 0; border-top: 1px solid var(--line-strong); }
.mem-dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mem-dl dt { color: var(--text-2); font-size: var(--fs-small); font-weight: 500; }
.mem-dl dd { margin: 0; font-weight: 500; text-align: right; font-size: 16px; font-variant-numeric: tabular-nums; }
.mem-panel.is-mine .mem-dl { border-top-color: var(--vermilion); }
.mem-compare .mem-included { display: flex; align-items: center; min-height: 52px; font-size: var(--fs-small); color: var(--text-2); }

@media (min-width: 1024px) {
  .mem-phone { display: none; }
  .mem-desk { display: block; }
  .mem-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
  .mem-table thead th, .mem-table .mem-corner {
    position: sticky; top: var(--hdr-h); z-index: 2; background: var(--porcelain); vertical-align: bottom; text-align: left;
    padding: 20px 28px 28px; border-bottom: 1px solid var(--line-strong); transition: top 300ms var(--ease-out);
  }
  html.hdr-hidden .mem-table thead th, html.hdr-hidden .mem-table .mem-corner { top: 0; }
  .mem-table .mem-corner { width: 28%; padding-left: 0; }
  .mem-th { display: grid; gap: 6px; justify-items: start; }
  .mem-th .tag { order: -1; }
  .mem-th .mem-join { margin-top: 18px; width: 100%; height: 48px; }
  .mem-th .mem-included { margin-top: 18px; min-height: 48px; padding: 0; }
  .mem-table tbody th { text-align: left; font-size: var(--fs-small); font-weight: 500; color: var(--text-2); padding: 22px 24px 22px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
  .mem-table td { padding: 22px 28px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.35; color: var(--text); vertical-align: baseline; }
  .mem-table .mem-col + .mem-col { border-left: 1px solid var(--line); }
  .mem-table tbody tr { transition: background-color var(--dur-hover) var(--ease-out); }
  .mem-table tbody tr:hover { background: var(--paper); }
  .mem-table .mem-col.is-mine { background: var(--paper); }
  .mem-table thead .mem-col.is-mine { box-shadow: inset 0 2px 0 var(--vermilion); }
}

/* ============================== points (graphite) with the cabin ============================== */
.mem-points-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 2rem + 2vw, 64px); }
.mem-points-media { aspect-ratio: 4 / 3; margin-inline: calc(var(--gutter) * -1); background: var(--green-raised); }
.mem-points-words { display: grid; align-content: center; gap: 24px; min-width: 0; }
.mem-points-words .t-h2 { margin: 0; max-width: 14ch; color: var(--heading); }
.mem-points-words .sec-head-lede { margin: 0; max-width: 40ch; }
/* the link leaves the sentence for its own line: as a 44px inline-flex target inside running text it doubled the leading */
.aj-site .mem-points-words .sec-head-lede .btn-link { display: flex; width: fit-content; margin-top: 12px; white-space: nowrap; }
/* the three facts as rows: the word on the left, the answer large on the right */
.mem-points .fact-tiles.cols-3 { grid-template-columns: minmax(0, 1fr); margin-top: clamp(16px, 1rem + 1.6vw, 40px); border-top: 1px solid var(--line-strong); }
.mem-points .fact-tiles.cols-3 > .pt {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "w v"; align-items: end; column-gap: 24px; row-gap: 4px;
  padding: clamp(22px, 1rem + 0.8vw, 32px) 0; border-left: 0;
}
.mem-points .pt-k { grid-area: k; font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.mem-points .pt-when { grid-area: w; font-size: var(--fs-small); color: var(--text-2); }
.mem-points .pt-v.is-small { grid-area: v; margin: 0; text-align: right; font-size: var(--fs-statement); white-space: nowrap; }
@media (min-width: 1024px) {
  .mem-points-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
  .mem-points-media { grid-column: 1 / span 5; aspect-ratio: 4 / 5; margin-inline: calc(var(--gutter) * -1) 0; }
  .mem-points-words { grid-column: 7 / -1; }
}
@media (min-width: 1440px) { .mem-points-media { margin-inline: calc((100vw - 1440px) / -2 - var(--gutter)) 0; } }

/* ============================== questions (porcelain) ============================== */
.mem-questions .qa-split-head .t-h2 { margin: 0; max-width: 11ch; }

/* ============================== reduced motion ============================== */
@media (prefers-reduced-motion: reduce) {
  .mem-h1 .w > span, .mem-hero-side, .mc-tilt { animation: none; }
  .mem-tier .mem-card, .mem-table thead th, .mem-table .mem-corner, .mem-table tbody tr { transition: none; }
  .mem-tier .mc-hold:hover .mem-card { transform: var(--fan); }
}