/* built by scratchpad/design-2026/build-member-join.py; never edit by hand */

/* THE CHOICE: two whole cards on oat, each with everything about itself */
.mj{scroll-margin-top:var(--bar,76px)}
.mj-head{text-align:center;max-width:760px;margin:0 auto clamp(30px,3.6vw,54px)}
.mj-head h2{margin:0;font:400 min(clamp(32px,3.2vw,46px), 28px + (clamp(32px,3.2vw,46px) - 28px) * 0.6)/1.1 var(--face);color:var(--ink)}
.mj-head p{margin:14px 0 0;font:italic 400 17px/1.5 var(--serif);color:var(--ink-75)}
.mj-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,36px);max-width:1180px;margin:0 auto;align-items:stretch}
.mj-card{display:flex;flex-direction:column;background:#fff;min-width:0}
.mj-shot{aspect-ratio:16/9;overflow:hidden;background:var(--stone)}
.mj-shot img{display:block;width:100%;height:100%;object-fit:cover}
.mj-body{display:flex;flex-direction:column;flex:1;padding:clamp(24px,2.6vw,40px)}
.mj-name{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.mj-name h3{margin:0;font:400 min(clamp(26px,2.2vw,32px), 28px + (clamp(26px,2.2vw,32px) - 28px) * 0.6)/1.1 var(--face);color:var(--ink)}
.mj-name em{padding:6px 10px;background:#c08c3d;color:var(--ink);font:500 11px/1 var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase}
.mj-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:16px 0 0}
.mj-price b{font:400 min(clamp(44px,3.8vw,58px), 28px + (clamp(44px,3.8vw,58px) - 28px) * 0.6)/1 var(--face);color:var(--ink);font-variant-numeric:lining-nums}
.mj-price span{font:italic 400 16px/1.4 var(--serif);color:var(--ink-55)}
.mj-line{margin:18px 0 0;font:400 17px/1.55 var(--serif);color:var(--ink-75)}
.mj-worth{margin:8px 0 0;font:italic 400 15px/1.5 var(--serif);color:var(--ink-55)}
/* the card's own small choices: the house's filter words (large light Larken, the chosen one in ink with a gold line) */
.mj-ask{margin-top:24px}
.mj-q{display:block;margin-bottom:6px;font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.mj-words{display:flex;flex-wrap:wrap;gap:2px 24px}
.mj-words button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:6px 0 6px;margin:0;font:400 clamp(19px,1.45vw,22px)/1.25 var(--face);color:var(--ink-35);cursor:pointer;transition:color .2s,border-color .2s}
.mj-words button:hover{color:var(--ink-75)}
.mj-words button.on{color:var(--ink);border-bottom-color:#c08c3d}
.mj-words button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* the reader's own year: the date a quiet italic line, what happens beside it; space between, no rules */
.mj-year{list-style:none;margin:auto 0 30px;padding:28px 0 0;display:grid;gap:12px}
.mj-year li{display:grid;grid-template-columns:minmax(118px,auto) 1fr;gap:4px 18px;align-items:baseline}
.mj-year b{font:italic 400 15px/1.45 var(--serif);color:var(--ink-55)}
.mj-year span{font:400 16px/1.45 var(--serif);color:var(--ink)}
.mj-go{width:100%;box-sizing:border-box}
/* the two buttons level at the foot of the cards, with room above them, now the cards hold no choices (14 October 2026) */
.mj-body > .mj-go{margin-top:auto}
.mj-body > .mj-worth{margin-bottom:28px}
/* the house button (_bar.css: sentence case, an outline that fills from the left on hover, 62 tall on this page); the plan
   led with starts filled, in tweed, as Jack set it on 10 October ("Recommended, its button filled") */
.band .in .mj-card.is-lead .mj-go{background:var(--tweed);border-color:var(--tweed);color:var(--shell);--hover-bg:var(--ink);--hover-color:var(--shell)}

/* THE PAGE ON A PHONE */
@media(max-width:760px){
  .mj-two{grid-template-columns:1fr;gap:22px}
  .mj-body{padding:22px 20px 24px}
  .mj-shot{aspect-ratio:16/10}
  .mj-year li{grid-template-columns:96px 1fr;gap:2px 12px}
  .mj-year span{font-size:15.5px}
  .mj-head p{font-size:16px}
  /* the eight things swipe sideways in one row, each card most of the screen, the next one showing at the edge */
  .mj-page .mem-full.mj-run{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78vw;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(-1 * var(--edge,20px));padding-right:var(--edge,20px)}
  .mj-page .mem-full.mj-run::-webkit-scrollbar{display:none}
  .mj-page .mem-full.mj-run > li{scroll-snap-align:start}
  /* the hero: the narrow crop of the film shows the left of the frame, so the cover is not under the words */
  .mj-page .mem-hero.is-big video{object-position:16% 50%}
  /* the two seasons side by side, each half the screen, rather than two films a screen tall each */
  .mj-page .mem-seasons-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .mj-page .mem-season{min-height:0;height:auto;aspect-ratio:3/4.4}
  .mj-page .mem-season-words b{font-size:min(34px, 28px + (34px - 28px) * 0.6)}
  .mj-page .mem-season-words span{font-size:12.5px;line-height:1.35}
  /* before you join: the questions without the photograph, which only made the screen longer */
  .mj-page .mem-faq-shot{display:none}
}