/* The Season 2 funding call (js/season2.js draws into these): the ribbon,
   the film-strip meter, the ladder, the homepage section and /season-2/.
   Fonts are the site's own stacks (styles.css), nothing new loaded. */
:root { --s2-serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif; --s2-mono: monospace; --s2-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; }

.s2-serif { font-family: var(--s2-serif); font-weight: 400; }
.s2-mono { font-family: var(--s2-mono); }
[data-s2-when][hidden] { display: none !important; }

.s2-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--amber); color: var(--ink); font: 700 11px/1 var(--s2-sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.s2-btn:hover { background: #d0bc7d; color: var(--ink); transform: translateY(-1px); }
.s2-btn-ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px rgba(229,223,207,.45); }
.s2-btn-ghost:hover { background: rgba(229,223,207,.08); color: #fff4d8; }
.s2-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- the ribbon ---------- */
.s2-ribbon { position: relative; z-index: 30; display: flex; align-items: center; min-height: 38px; background: var(--amber); color: var(--ink); }
.s2-ribbon a { flex: 1; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 14px; min-height: 38px; padding: 6px 44px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.s2-ribbon a:hover { color: #000; }
.s2-ribbon button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.s2-ribbon button:hover { background: rgba(22,25,20,.12); }
/* The homepage header sits over the hero: move it below the ribbon. */
.s2-ribbon-on main:not(.subpage-shell):not(.s2-page) > .site-header { top: 38px; }
@media (max-width: 500px) { .s2-ribbon a { padding: 6px 40px 6px 14px; font-size: 9px; } .s2-ribbon a > span[aria-hidden]:first-of-type { display: none; } }

/* ---------- the meter: a strip of film, filling frame by frame ---------- */
.s2-strip { position: relative; height: 56px; border-radius: 7px; background: #0b0d0a; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(229,223,207,.12); }
.s2-strip::before, .s2-strip::after { content: ""; position: absolute; left: 6px; right: 6px; height: 6px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(229,223,207,.3) 0 9px, transparent 9px 22px); }
.s2-strip::before { top: 5px; } .s2-strip::after { bottom: 5px; }
.s2-frames { position: absolute; left: 0; right: 0; top: 16px; bottom: 16px; background: repeating-linear-gradient(90deg, #22271f 0 46px, #0b0d0a 46px 48px); }
.s2-fill { position: absolute; left: 0; top: 16px; bottom: 16px; background: repeating-linear-gradient(90deg, #b9a365 0 46px, #8f7d48 46px 48px); box-shadow: 0 0 24px rgba(185,163,101,.45); transition: width 1.2s cubic-bezier(.2,.7,.2,1); }
.s2-fill-stretch { position: absolute; top: 16px; bottom: 16px; background: repeating-linear-gradient(90deg, #e0cf94 0 46px, #b9a365 46px 48px); }
.s2-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(241,234,216,.55); }
.s2-mark.is-big { width: 3px; background: #f1ead8; }
.s2-ticks { position: relative; margin-top: 10px; }
.s2-meter-labels .s2-ticks { height: 64px; }
.s2-meter-numbers .s2-ticks { height: 30px; }
.s2-tick { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; white-space: nowrap; text-align: center; color: rgba(229,223,207,.62); }
.s2-tick.is-end { transform: translateX(-100%); align-items: flex-end; text-align: right; }
.s2-tick b { font: 600 11px var(--s2-mono); letter-spacing: .08em; }
.s2-lbl { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.s2-dia { display: block; flex: none; width: 10px; height: 10px; transform: rotate(45deg); border: 1.5px solid rgba(229,223,207,.6); }
.s2-tick.is-reached { color: var(--paper); }
.s2-tick.is-reached .s2-dia { background: var(--amber); border-color: var(--amber); }
.s2-meter-numbers .s2-tick { font: 600 13px var(--s2-mono); color: rgba(229,223,207,.7); }
.s2-meter-numbers .s2-tick.is-big { color: var(--amber); font-size: 15px; }
@media (max-width: 640px) {
  .s2-strip { height: 44px; }
  .s2-strip::before, .s2-strip::after { height: 5px; }
  .s2-frames, .s2-fill, .s2-fill-stretch { top: 13px; bottom: 13px; }
  /* Too tight for words under each step: the numbers only. */
  .s2-lbl { display: none; }
  .s2-meter-labels .s2-ticks { height: 40px; }
  .s2-tick b { font-size: 10px; }
}
/* On a phone 250 and 300 sit almost on top of each other: number only the goal and the top step (the diamonds still mark them all). */
@media (max-width: 500px) {
  .s2-tick:not(.is-big):not(.is-end) b, .s2-meter-numbers .s2-tick:not(.is-big):not(.is-end) { visibility: hidden; }
}

/* ---------- the ladder ---------- */
.s2-row { display: grid; grid-template-columns: 22px 90px minmax(0,1fr) auto; gap: 20px; align-items: center; padding: 24px 4px; border-top: 1px solid rgba(229,223,207,.16); }
.s2-row .s2-dia { width: 12px; height: 12px; }
.s2-row.is-reached .s2-dia { background: var(--amber); border-color: var(--amber); }
.s2-row-at { font: 16px var(--s2-mono); letter-spacing: .06em; }
.s2-row-title { margin: 0; font-family: var(--s2-serif); font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
.s2-row-desc { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: rgba(241,237,226,.72); }
.s2-row-done { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 13px; background: var(--amber); color: var(--ink); font: 700 10px var(--s2-mono); letter-spacing: .12em; text-transform: uppercase; }
.s2-row.is-big { padding: 30px 26px; margin: 6px 0; border: 0; border-radius: 18px; background: rgba(185,163,101,.12); box-shadow: inset 0 0 0 2px var(--amber); }
.s2-row.is-big .s2-dia { background: var(--amber); border-color: var(--amber); }
.s2-row.is-big .s2-row-title { font-size: 40px; color: #f1ead8; }
@media (max-width: 720px) {
  .s2-row { grid-template-columns: 18px minmax(0,1fr); gap: 6px 14px; padding: 20px 2px; }
  .s2-row .s2-dia { grid-row: 1 / span 2; align-self: start; margin-top: 4px; }
  .s2-row-at, .s2-row-body, .s2-row-done, .s2-row-next { grid-column: 2; justify-self: start; }
  .s2-row-title { font-size: 25px; }
  .s2-row.is-big { padding: 22px 18px; }
  .s2-row.is-big .s2-row-title { font-size: 30px; }
}

/* ---------- the homepage ---------- */
.nav-new { display: inline-flex; align-items: center; height: 16px; margin-left: 7px; padding: 0 6px; border-radius: 8px; background: var(--amber); color: var(--ink); font: 700 8px var(--s2-mono); letter-spacing: .1em; vertical-align: 1px; }
.s2-cue { display: flex; align-items: center; gap: 14px; text-transform: uppercase; font-size: 9px; letter-spacing: .19em; color: #fff4d8; }
.s2-cue-bar { position: relative; flex: none; width: 120px; height: 3px; border-radius: 2px; background: rgba(229,223,207,.3); overflow: hidden; }
.s2-cue-bar > span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--amber); transition: width 1.2s ease; }

.s2-home { padding: clamp(70px,9vw,120px) clamp(20px,6vw,92px); background: linear-gradient(180deg, var(--film-deep) 0%, #2c3829 55%, #33402f 100%); }
.s2-home-top { display: flex; flex-wrap: wrap; gap: 40px 5vw; justify-content: space-between; align-items: flex-end; margin: clamp(48px,6vw,72px) 0 clamp(40px,5vw,64px); }
.s2-home-copy { flex: 1 1 420px; min-width: 0; }
.s2-home h2 { margin: 16px 0 28px; font-family: var(--s2-serif); font-weight: 400; font-size: clamp(52px,7.5vw,112px); line-height: .86; letter-spacing: -.05em; }
.s2-home-copy > p:not(.eyebrow) { margin: 0 0 32px; max-width: 540px; font-size: 17px; line-height: 1.6; color: rgba(241,237,226,.8); }
.s2-next { flex: 0 1 340px; min-width: 0; padding: 28px; border-radius: 18px; background: rgba(22,25,20,.55); box-shadow: inset 0 0 0 1px rgba(229,223,207,.16); }
.s2-next-title { margin: 14px 0 8px; font-family: var(--s2-serif); font-size: 34px; line-height: 1.05; letter-spacing: -.03em; }
.s2-next-at { margin: 0; font: 12px var(--s2-mono); letter-spacing: .1em; color: var(--amber); text-transform: uppercase; }
.s2-home-count { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; margin-top: 18px; }
.s2-home-count p { margin: 0; }
.s2-big-num { font-family: var(--s2-serif); font-size: 54px; letter-spacing: -.04em; }
.s2-meta { font: 12px var(--s2-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(229,223,207,.75); }
.s2-meta .s2-up { color: var(--amber); }
.s2-plain-steps { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.s2-plain-steps li { padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(229,223,207,.25); font: 11px var(--s2-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(229,223,207,.8); }

/* ---------- /season-2/ ---------- */
.s2-page { background: var(--ink) linear-gradient(180deg, #161914 0%, #1a1f18 14%, #212820 30%, #2a3327 46%, #2e3a2b 58%, #283126 72%, #1d231b 86%, #161914 100%); }
.s2-page .site-header { position: relative; background: rgba(14,17,13,.45); backdrop-filter: blur(13px); }
.s2-page .main-nav a[aria-current="page"] { opacity: 1; color: #fff4d8; box-shadow: inset 0 -1px 0 var(--amber); }
.s2-hero { position: relative; min-height: 640px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; padding: 0 clamp(20px,6vw,92px) 60px; }
.s2-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; z-index: -2; filter: saturate(.8) brightness(.72); }
.s2-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,11,11,.5) 0%, rgba(9,12,11,.15) 30%, rgba(22,25,20,.95) 88%, #161914 100%); }
.s2-hero h1 { margin: 18px 0 26px; font-family: var(--s2-serif); font-weight: 400; font-size: clamp(60px,10vw,150px); line-height: 1; letter-spacing: -.06em; }
.s2-hero-lede { margin: 0; max-width: 640px; font-family: var(--s2-serif); font-size: clamp(19px,2vw,26px); line-height: 1.32; color: rgba(230,223,205,.85); }
.s2-sec { padding: clamp(44px,5.5vw,80px) clamp(20px,6vw,92px); }
.s2-h2 { margin: clamp(44px,5vw,64px) 0 36px; font-family: var(--s2-serif); font-weight: 400; font-size: clamp(42px,5.6vw,84px); line-height: .92; letter-spacing: -.05em; }
.s2-split { display: flex; flex-wrap: wrap; gap: 32px 8vw; margin: clamp(44px,5vw,64px) 0 48px; align-items: flex-end; }
.s2-split .s2-h2 { flex: 1 1 420px; margin: 0; }
.s2-split > p { flex: 1 1 380px; margin: 0; max-width: 520px; font-size: 17px; line-height: 1.6; color: rgba(241,237,226,.8); }
.amber-text { color: var(--amber); }

/* What's coming, in order */
.s2-tl { position: relative; }
.s2-tl::before { content: ""; position: absolute; left: 169px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--amber), rgba(185,163,101,.15)); }
.s2-tl-row { display: grid; grid-template-columns: 150px 40px minmax(0,1fr); align-items: center; padding: 18px 0; }
.s2-tl-date { padding-right: 20px; text-align: right; font: 600 12px var(--s2-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(229,223,207,.72); }
.s2-tl-dot { position: relative; z-index: 1; justify-self: center; width: 12px; height: 12px; transform: rotate(45deg); background: var(--ink); border: 2px solid var(--amber); }
.s2-tl-body { min-width: 0; padding-left: 8px; }
.s2-tl-t { margin: 0; font-family: var(--s2-serif); font-size: 24px; line-height: 1.15; }
.s2-tl-s { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: rgba(241,237,226,.68); }
.s2-tl-next { margin: 4px 0; padding: 22px 20px 22px 0; border-radius: 16px; background: rgba(185,163,101,.12); box-shadow: inset 0 0 0 2px var(--amber); }
.s2-tl-next .s2-tl-date { color: #d9c98f; }
.s2-tl-end .s2-tl-t { font-size: 30px; }
.s2-feature { display: flex; flex-wrap: wrap; border-radius: 18px; overflow: hidden; background: var(--ink); box-shadow: inset 0 0 0 1px rgba(185,163,101,.45); }
.s2-feature img { flex: 1 1 340px; min-width: 0; height: 240px; object-fit: cover; filter: saturate(.7) brightness(.8); }
.s2-feature > div { flex: 1 1 320px; min-width: 0; padding: 26px 30px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.s2-when { font: 600 11px var(--s2-mono); letter-spacing: .14em; text-transform: uppercase; color: #d9c98f; }
.s2-feature-t { font-family: var(--s2-serif); font-size: 40px; line-height: 1; letter-spacing: -.03em; }
.s2-feature p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(241,237,226,.78); }
@media (max-width: 720px) {
  .s2-tl::before { left: 11px; }
  .s2-tl-row { grid-template-columns: 24px minmax(0,1fr); }
  .s2-tl-dot { grid-row: 1 / span 2; grid-column: 1; align-self: start; margin-top: 6px; }
  .s2-tl-date { grid-column: 2; text-align: left; padding: 0 0 4px 8px; }
  .s2-tl-body { grid-column: 2; }
  .s2-tl-next { padding: 18px 14px 18px 0; }
}

/* The build challenge */
.s2-challenge { background: radial-gradient(900px 520px at 85% 10%, rgba(185,163,101,.16) 0%, rgba(185,163,101,0) 70%); }
.s2-challenge .section-rule { color: #d9c98f; border-top-color: rgba(185,163,101,.5); }
.s2-challenge-grid { display: flex; flex-wrap: wrap; gap: 48px 6vw; margin-top: clamp(44px,5vw,64px); align-items: stretch; }
.s2-challenge-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; }
.s2-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 13px; background: var(--amber); color: var(--ink); letter-spacing: .16em; }
.s2-challenge h2 { margin: 18px 0 24px; font-family: var(--s2-serif); font-weight: 400; font-size: clamp(48px,6.4vw,104px); line-height: .9; letter-spacing: -.055em; }
.s2-challenge-copy > p:not(.eyebrow) { margin: 0 0 28px; max-width: 540px; font-size: 18px; line-height: 1.6; color: rgba(241,237,226,.82); }
.s2-step { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 4px 18px; align-items: start; padding: 20px 0; border-top: 1px solid rgba(229,223,207,.16); }
.s2-step:last-of-type { border-bottom: 1px solid rgba(229,223,207,.16); margin-bottom: 32px; }
.s2-step b { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--amber); color: #d9c98f; font: 600 18px var(--s2-mono); }
.s2-step-t { font-family: var(--s2-serif); font-size: 26px; }
.s2-step-s { font-size: 15px; line-height: 1.5; color: rgba(241,237,226,.72); }
.s2-frame { position: relative; flex: 1 1 360px; min-width: 0; min-height: 420px; border-radius: 22px; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px; text-align: center; }
.s2-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: blur(7px) saturate(.75) brightness(.6); transform: scale(1.08); }
.s2-frame::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,13,10,.1) 0%, rgba(11,13,10,.75) 100%); }
.s2-corner { position: absolute; width: 44px; height: 44px; border: 0 solid #d9c98f; }
.s2-corner.tl { top: 22px; left: 22px; border-top-width: 2px; border-left-width: 2px; }
.s2-corner.tr { top: 22px; right: 22px; border-top-width: 2px; border-right-width: 2px; }
.s2-corner.bl { bottom: 22px; left: 22px; border-bottom-width: 2px; border-left-width: 2px; }
.s2-corner.br { bottom: 22px; right: 22px; border-bottom-width: 2px; border-right-width: 2px; }
.s2-frame-t { font-family: var(--s2-serif); font-size: clamp(40px,4.4vw,64px); line-height: .95; letter-spacing: -.04em; }
.s2-facts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.s2-fact { flex: 1 1 180px; min-width: 0; padding: 20px 22px; border-radius: 16px; background: rgba(22,25,20,.55); box-shadow: inset 0 0 0 1px rgba(229,223,207,.14); }
.s2-fact p:last-child { margin: 8px 0 0; font-family: var(--s2-serif); font-size: 26px; }
.s2-fact small { display: block; margin-top: 6px; font: 16px var(--s2-sans); color: rgba(241,237,226,.72); }

/* Tiers, and "why 400" */
.s2-cards { display: flex; flex-wrap: wrap; gap: 16px; }
.s2-card { flex: 1 1 240px; min-width: 0; padding: 28px; border-radius: 20px; background: rgba(105,119,100,.38); }
.s2-card.is-picked { background: rgba(185,163,101,.1); box-shadow: inset 0 0 0 2px var(--amber); }
.s2-card-ban { display: block; width: calc(100% + 56px); max-width: none; margin: -28px -28px 24px; aspect-ratio: 23 / 10; object-fit: cover; border-radius: 20px 20px 0 0; }
.s2-price { margin: 10px 0 0; font-family: var(--s2-serif); font-size: 52px; letter-spacing: -.03em; }
.s2-price span { font-size: 17px; color: rgba(241,237,226,.65); }
.s2-card p.s2-card-lede { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: rgba(241,237,226,.78); }
.s2-card ul { margin: 16px 0 0; padding: 0 0 0 18px; font-size: 15px; line-height: 1.8; color: rgba(241,237,226,.82); }
.s2-card-k { margin: 0; font: 20px var(--s2-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(229,223,207,.75); }
.s2-card.is-picked .s2-card-k { color: var(--amber); }
.s2-card-t { margin: 10px 0 14px; font-family: var(--s2-serif); font-size: 32px; }
.s2-card-s { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(241,237,226,.78); }
.s2-share { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; margin-top: 40px; padding: clamp(24px,4vw,44px); border-radius: 24px; background: var(--earth); }
.s2-share > div:first-child { flex: 1 1 420px; }
.s2-share-t { margin: 0; font-family: var(--s2-serif); font-size: clamp(30px,3.4vw,46px); line-height: 1.05; letter-spacing: -.03em; }
.s2-share-s { margin: 10px 0 0; font-size: 16px; color: rgba(241,237,226,.8); }

/* Questions, and the team */
.s2-gets { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(40px,5vw,56px); }
.s2-get { flex: 1 1 250px; min-width: 0; padding: 26px; border-radius: 18px; background: rgba(22,25,20,.45); display: flex; flex-direction: column; gap: 10px; font-size: 17px; line-height: 1.5; }
.s2-faq { margin-top: clamp(48px,6vw,72px); }
.s2-faq details { border-top: 1px solid rgba(229,223,207,.18); padding: 22px 0; }
.s2-faq summary { cursor: pointer; list-style: none; font-family: var(--s2-serif); font-size: 22px; }
.s2-faq summary::-webkit-details-marker { display: none; }
.s2-faq summary::after { content: "+"; float: right; color: var(--amber); }
.s2-faq details[open] summary::after { content: "–"; }
.s2-faq details p { margin: 14px 0 0; max-width: 760px; font-size: 16px; line-height: 1.6; color: rgba(241,237,226,.78); }
.s2-people { display: flex; flex-wrap: wrap; gap: 16px; }
.s2-person { flex: 1 1 260px; min-width: 0; padding: 32px 28px; border-radius: 20px; background: rgba(105,119,100,.22); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; overflow-wrap: anywhere; }
.s2-person img { flex: none; width: 160px; height: 160px; margin-bottom: 6px; border-radius: 50%; object-fit: cover; }
.s2-person-n { font-family: var(--s2-serif); font-size: 32px; line-height: 1.05; letter-spacing: -.02em; }
.s2-person-r { font: 600 11px var(--s2-mono); letter-spacing: .14em; text-transform: uppercase; color: #d9c98f; }
.s2-person p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(241,237,226,.78); }
.s2-thanks { margin: 56px 0 0; font-family: var(--s2-serif); font-size: 28px; color: rgba(241,237,226,.85); }
@media (max-width: 500px) { .s2-person img { width: 120px; height: 120px; } .s2-price { font-size: 44px; } }
.s2-patreon-goal { margin-left: 26px; color: #d9c98f; }
/* Five links in the header: on a phone, drop the pill and, narrowest, "Become a member" (the ribbon and "Fund Season 2" cover it). */
@media (max-width: 820px) { .nav-new { display: none; } }
@media (max-width: 500px) { .main-nav > a[href="/#support"] { display: none; } }

/* ---------- smaller placements ---------- */
.s2-meter-mini .s2-strip { height: 30px; border-radius: 5px; }
.s2-meter-mini .s2-strip::before, .s2-meter-mini .s2-strip::after { left: 4px; right: 4px; height: 4px; background: repeating-linear-gradient(90deg, rgba(229,223,207,.3) 0 6px, transparent 6px 14px); }
.s2-meter-mini .s2-strip::before { top: 3px; } .s2-meter-mini .s2-strip::after { bottom: 3px; }
.s2-meter-mini .s2-frames, .s2-meter-mini .s2-fill, .s2-meter-mini .s2-fill-stretch { top: 10px; bottom: 10px; }
.s2-meter-mini .s2-frames { background: repeating-linear-gradient(90deg, #22271f 0 26px, #0b0d0a 26px 28px); }
.s2-meter-mini .s2-fill { background: repeating-linear-gradient(90deg, #b9a365 0 26px, #8f7d48 26px 28px); box-shadow: none; }
.s2-meter-mini .s2-mark { display: none; }
@media (max-width: 640px) { .s2-meter-mini .s2-strip { height: 30px; } .s2-meter-mini .s2-frames, .s2-meter-mini .s2-fill, .s2-meter-mini .s2-fill-stretch { top: 10px; bottom: 10px; } }
.s2-small { font: 11px var(--s2-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(229,223,207,.75); }

/* The episode list: a banner under the heading, and Season 2 as the next card. */
.s2-reel-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; margin: 0 0 48px; padding: 20px 24px; border-radius: 16px; background: rgba(22,25,20,.6); box-shadow: inset 0 0 0 1px rgba(185,163,101,.5); transition: background .2s ease; }
.s2-reel-banner:hover { background: rgba(22,25,20,.8); }
.s2-reel-banner > .s2-serif { flex: 1 1 320px; font-size: 24px; line-height: 1.2; }
.s2-reel-banner > .s2-reel-meter { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.s2-reel-banner > .s2-small:last-child { color: #d9c98f; letter-spacing: .16em; }
.s2-reel-card { display: grid; grid-template-columns: minmax(180px,320px) 72px minmax(0,1fr) auto; align-items: center; gap: clamp(18px,3vw,46px); margin-top: 18px; padding: 18px; border-radius: 20px; background: var(--ink); box-shadow: inset 0 0 0 1px rgba(185,163,101,.55), 0 20px 40px rgba(0,0,0,.25); }
.s2-reel-thumb { aspect-ratio: 16 / 9; border-radius: 12px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; background: repeating-linear-gradient(90deg, #1d211a 0 46px, #0b0d0a 46px 48px); }
.s2-reel-thumb .s2-small { font-size: 10px; letter-spacing: .24em; color: rgba(229,223,207,.6); }
.s2-reel-thumb .s2-serif { font-size: 40px; color: var(--amber); letter-spacing: -.03em; }
.s2-reel-num { text-transform: uppercase; letter-spacing: .16em; font: 10px var(--s2-mono); color: var(--amber); }
.s2-reel-title { display: block; font: 400 clamp(28px,3vw,46px)/.95 var(--s2-serif); letter-spacing: -.035em; }
.s2-reel-desc { display: block; margin-top: 10px; max-width: 560px; font-size: 15px; line-height: 1.5; color: rgba(229,223,207,.72); }
.s2-reel-card .s2-meter-mini { margin-top: 16px; max-width: 520px; }
.s2-reel-card .s2-small { display: block; margin-top: 8px; }
.s2-reel-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.s2-reel-actions .s2-small { color: #d9c98f; min-height: 30px; display: inline-flex; align-items: center; }
@media (max-width: 820px) { .s2-reel-card { grid-template-columns: 1fr; padding: 12px; gap: 13px; } }

/* Behind the scenes: one line under the heading. */
.s2-bts-line { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 0 0 clamp(36px,4vw,56px); padding: 14px 18px; border-radius: 12px; background: rgba(22,25,20,.5); box-shadow: inset 0 0 0 1px rgba(185,163,101,.4); font-size: 15px; transition: background .2s ease; }
.s2-bts-line:hover { background: rgba(22,25,20,.75); }
.s2-bts-line em { font-size: 17px; color: #d9c98f; }
.s2-bts-line .s2-meter-mini { flex: 1 1 200px; max-width: 320px; }

/* Thanks page: after confirming the newsletter. */
.s2-thanks-card { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; margin-top: 24px; padding: clamp(22px,3vw,30px); border-radius: 18px; background: rgba(22,25,20,.35); box-shadow: inset 0 0 0 1px rgba(241,223,188,.25); }
.s2-thanks-card > div { flex: 1 1 380px; min-width: 0; }
.s2-thanks-card .s2-serif { margin: 0 0 16px; font-size: 24px; line-height: 1.2; }
.s2-thanks-card .s2-small { margin: 10px 0 0; color: rgba(241,223,188,.75); }

/* ---------- line breaks: no lone last words ---------- */
:is(.s2-page, .s2-home, .s2-reel-banner, .s2-reel-card, .s2-bts-line, .s2-thanks-card) :is(h1, h2, h3, .s2-tl-t, .s2-row-title, .s2-reel-title, .s2-feature-t, .s2-frame-t, .s2-share-t, .s2-next-title, .s2-card-t, .s2-step-t, .s2-serif) { text-wrap: balance; }
:is(.s2-page, .s2-home, .s2-reel-banner, .s2-reel-card, .s2-bts-line, .s2-thanks-card, .patreon-copy) :is(p, li, .s2-row-desc, .s2-tl-s, .s2-reel-desc, .s2-step-s, .s2-card-s) { text-wrap: pretty; }
.s2-hero-lede, .s2-step-s, .s2-get > span:last-child, .s2-share-s { text-wrap: balance; }

/* ---------- phones: full-width buttons, shorter labels, a shorter cabin frame ---------- */
@media (max-width: 560px) {
  .s2-actions { flex-direction: column; align-items: stretch; }
  .s2-actions .s2-btn { justify-content: center; text-align: center; }
  .s2-wide { display: none; }
  .s2-frame { min-height: 300px; }
  .s2-hero { min-height: 560px; padding-bottom: 44px; }
  .s2-share { gap: 20px; }
  .s2-person img { width: 112px; height: 112px; }
}
@media (max-width: 560px) {
  /* The hero cue goes under "The story is the point." instead of squeezing beside it. */
  .hero-footer:has(.s2-cue:not([hidden])) { flex-direction: column; align-items: stretch; gap: 16px; }
  .hero-footer:has(.s2-cue:not([hidden])) > p { max-width: none; }
  .s2-cue { font-size: 8px; letter-spacing: .16em; white-space: nowrap; }
  .s2-cue-bar { flex: 1 1 auto; width: auto; }
  /* The second link in "Fund the next season" sits under the first, not indented. */
  .s2-patreon-goal { display: flex; width: max-content; max-width: 100%; margin: 22px 0 0; }
}
.s2-thanks-card > .s2-actions { flex: 0 0 auto; }
@media (max-width: 560px) { .s2-thanks-card > .s2-actions { flex: 1 1 100%; } }
.s2-tl-s, .s2-card-s, .s2-row-desc { text-wrap: balance; }
/* Stacked tier cards (tablet and phone): keep the banner a banner. */
.s2-card-ban { max-height: 190px; }
/* The highlighted step has no line of its own: close the row above it with one, and space the box evenly between the two lines. */
.s2-row:has(+ .s2-row.is-big) { border-bottom: 1px solid rgba(229,223,207,.16); }
.s2-row.is-big { margin: 16px 0; }

/* ---------- the meter's steps: hover (or tap) for what each one is ---------- */
button.s2-tick { padding: 4px 8px 6px; border: 0; border-radius: 8px; background: none; font: inherit; cursor: pointer; transition: color .2s ease, background .2s ease; }
button.s2-tick:hover, button.s2-tick:focus-visible, button.s2-tick.is-open { color: #fff4d8; background: rgba(229,223,207,.06); outline: none; }
button.s2-tick:focus-visible { box-shadow: 0 0 0 1px rgba(185,163,101,.6); }
button.s2-tick .s2-dia { transition: transform .2s ease, border-color .2s ease; }
button.s2-tick:hover .s2-dia, button.s2-tick:focus-visible .s2-dia, button.s2-tick.is-open .s2-dia { transform: rotate(45deg) scale(1.25); border-color: var(--amber); }
.s2-tip { position: absolute; z-index: 6; top: calc(100% + 8px); left: 50%; width: min(260px, 72vw); display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 12px; background: var(--ink); box-shadow: inset 0 0 0 1px rgba(185,163,101,.45), 0 18px 40px rgba(0,0,0,.4); text-align: left; white-space: normal; letter-spacing: 0; text-transform: none; opacity: 0; visibility: hidden; transform: translate(-50%, -4px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; pointer-events: none; }
.s2-tick.is-start .s2-tip { left: 0; transform: translate(0, -4px); }
.s2-tick.is-end .s2-tip { left: auto; right: 0; transform: translate(0, -4px); }
button.s2-tick:hover .s2-tip, button.s2-tick:focus-visible .s2-tip, button.s2-tick.is-open .s2-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.s2-tick.is-start:is(:hover, :focus-visible, .is-open) .s2-tip, .s2-tick.is-end:is(:hover, :focus-visible, .is-open) .s2-tip { transform: translate(0, 0); }
.s2-tip-t { font-family: var(--s2-serif); font-size: 20px; line-height: 1.15; color: #f1ead8; text-wrap: balance; }
.s2-tip-d { font: 13.5px/1.5 var(--s2-sans); color: rgba(241,237,226,.75); text-wrap: pretty; }
.s2-tip-s { font: 600 10px var(--s2-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
/* The step cards open over whatever is below the meter. */
.s2-meter-labels .s2-ticks { z-index: 4; }

/* ---------- homepage: the Season 2 section ends in the newsletter's colour, no seam ---------- */
.s2-home { background: linear-gradient(180deg, var(--film-deep) 0%, #2c3829 45%, var(--film-deep) 100%); }

/* ---------- /season-2/: the top image dissolves into the page ---------- */
.s2-hero { margin-bottom: -1px; }
.s2-hero > img { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.55) 68%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.55) 68%, transparent 100%); }
.s2-hero::after { background: linear-gradient(180deg, rgba(8,11,11,.5) 0%, rgba(9,12,11,.12) 30%, rgba(22,25,20,.45) 70%, rgba(22,25,20,0) 100%); }

/* ---------- /season-2/: the questions ---------- */
.s2-faq details { padding: 0; }
.s2-faq summary { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 12px; margin: 0 -12px; border-radius: 12px; overflow: hidden; transition: color .25s ease, background .25s ease; }
.s2-faq summary::after { float: none; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(185,163,101,.45); font: 18px/1 var(--s2-sans); transition: transform .3s ease, background .25s ease, color .25s ease; }
.s2-faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
/* A sheen that sweeps across the question on hover. */
.s2-faq summary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(241,234,216,.07) 45%, rgba(241,234,216,.12) 50%, rgba(241,234,216,.07) 55%, transparent 80%); transform: translateX(-110%); pointer-events: none; }
.s2-faq summary:hover, .s2-faq summary:focus-visible { color: #fff4d8; background: rgba(229,223,207,.04); outline: none; }
.s2-faq summary:hover::before, .s2-faq summary:focus-visible::before { transform: translateX(110%); transition: transform .9s ease; }
.s2-faq summary:hover::after, .s2-faq summary:focus-visible::after { background: var(--amber); color: var(--ink); }
.s2-faq summary:focus-visible { box-shadow: inset 0 0 0 1px rgba(185,163,101,.6); }
.s2-faq .s2-faq-a { overflow: hidden; }
.s2-faq details p { margin: 0; padding: 0 0 24px; }
@media (prefers-reduced-motion: reduce) { .s2-faq summary::before { display: none; } }
/* Steps past the middle open their card leftward, so it never runs off the screen. */
.s2-tick.is-late .s2-tip { left: auto; right: 0; transform: translate(0, -4px); }
.s2-tick.is-late:is(:hover, :focus-visible, .is-open) .s2-tip { transform: translate(0, 0); }
/* The highlight is a glow around the diamond itself (always centred on it), not a box around the whole step. */
button.s2-tick:hover, button.s2-tick:focus-visible, button.s2-tick.is-open { background: none; box-shadow: none; }
button.s2-tick .s2-dia { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
button.s2-tick:hover .s2-dia, button.s2-tick.is-open .s2-dia { box-shadow: 0 0 0 5px rgba(185,163,101,.18), 0 0 14px rgba(185,163,101,.35); }
button.s2-tick:focus-visible .s2-dia { box-shadow: 0 0 0 5px rgba(185,163,101,.18), 0 0 0 6.5px rgba(185,163,101,.75); }

/* ---------- /season-2/: the timeline's line as film perforations ---------- */
/* One continuous dashed rail (every dash the same distance apart), the
   diamonds sitting on it, fading in at the top and out toward the far future. */
.s2-tl::before {
  width: 2px; top: 10px; bottom: 10px;
  background: repeating-linear-gradient(180deg, #b9a365 0 6px, transparent 6px 14px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.75) 36px, rgba(0,0,0,.75) 62%, rgba(0,0,0,.3) calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.75) 36px, rgba(0,0,0,.75) 62%, rgba(0,0,0,.3) calc(100% - 40px), transparent 100%);
}
/* each diamond covers the rail where it sits */
.s2-tl-dot { background: #1c211a; }
.s2-tl-next .s2-tl-dot { background: var(--amber); }
.s2-tl-end .s2-tl-dot { border-color: rgba(185,163,101,.7); }

@media (max-width: 720px) {
  /* "Next up": the box sits to the right of the rail, never across it */
  .s2-tl-next { grid-template-columns: 0 minmax(0,1fr); margin-left: 34px; padding: 16px 14px; }
  .s2-tl-next .s2-tl-dot { left: -36px; }
}

/* ---------- /season-2/: the Build Challenge's glow eases in, no edge where the timeline ends ---------- */
.s2-challenge { position: relative; isolation: isolate; background: none; }
.s2-challenge::before { content: ""; position: absolute; inset: -160px 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1000px 640px at 82% 32%, rgba(185,163,101,.16) 0%, rgba(185,163,101,.06) 45%, rgba(185,163,101,0) 72%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 320px);
  mask-image: linear-gradient(180deg, transparent 0, #000 320px); }
@media (max-width: 720px) { .s2-challenge::before { background: radial-gradient(520px 560px at 80% 28%, rgba(185,163,101,.16) 0%, rgba(185,163,101,.06) 45%, rgba(185,163,101,0) 72%); } }

/* ======================================================================
   Motion: the page coming alive (js/season2.js, js/season2-page.js).
   Scroll-triggered states hang off .s2-motion (added by the script, so
   without it everything simply shows); the rest only runs when the
   visitor hasn't asked for reduced motion.
   ====================================================================== */

/* 1. The meters fill frame by frame when seen (the gold first, then the stretch past the goal). */
.s2-fill { transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
.s2-fill-stretch { transition: width .9s cubic-bezier(.2,.7,.2,1) 1.3s; }

/* 2. The timeline: the rail feeds down as you scroll, and each diamond lights as you pass it. */
.s2-motion .s2-tl::before { clip-path: inset(0 0 calc((1 - var(--s2-feed, 0)) * 100%) 0); }
.s2-motion .s2-tl-dot { border-color: rgba(185,163,101,.45); transition: background .45s ease, border-color .45s ease, box-shadow .45s ease; }
.s2-motion .s2-tl-dot.is-lit { border-color: var(--amber); background: var(--amber); box-shadow: 0 0 0 4px rgba(185,163,101,.12), 0 0 14px rgba(185,163,101,.45); }
.s2-still .s2-tl-dot.is-lit { border-color: var(--amber); }

/* 3. The cabin frame racks into focus, its corners closing in like a viewfinder. */
.s2-frame > img { transition: filter 1.8s ease, transform 2.4s cubic-bezier(.2,.7,.2,1); }
.s2-motion .s2-frame:not(.is-in) > img { filter: blur(20px) saturate(.4) brightness(.32); transform: scale(1.2); }
.s2-corner, .s2-frame > .s2-when, .s2-frame > .s2-frame-t { transition: transform 1s cubic-bezier(.2,.7,.2,1) .35s, opacity .8s ease .35s; }
.s2-motion .s2-frame:not(.is-in) .s2-corner { opacity: 0; }
.s2-motion .s2-frame:not(.is-in) .s2-corner.tl { transform: translate(-18px,-18px); }
.s2-motion .s2-frame:not(.is-in) .s2-corner.tr { transform: translate(18px,-18px); }
.s2-motion .s2-frame:not(.is-in) .s2-corner.bl { transform: translate(-18px,18px); }
.s2-motion .s2-frame:not(.is-in) .s2-corner.br { transform: translate(18px,18px); }
.s2-motion .s2-frame:not(.is-in) > .s2-when, .s2-motion .s2-frame:not(.is-in) > .s2-frame-t { opacity: 0; transform: translateY(12px); }
.s2-frame > .s2-frame-t { transition-delay: .6s; }

/* 4. The ladder's steps arrive in turn; reached ones get their "Unlocked" stamp. */
.s2-motion [data-s2-ladder] .s2-row { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.s2-motion [data-s2-ladder]:not(.is-in) .s2-row { opacity: 0; transform: translateY(16px); }
.s2-motion [data-s2-ladder] .s2-row:nth-child(2) { transition-delay: .1s; }
.s2-motion [data-s2-ladder] .s2-row:nth-child(3) { transition-delay: .2s; }
.s2-motion [data-s2-ladder] .s2-row:nth-child(4) { transition-delay: .3s; }
.s2-motion [data-s2-ladder] .s2-row:nth-child(5) { transition-delay: .4s; }
.s2-motion [data-s2-ladder] .s2-row:nth-child(6) { transition-delay: .5s; }
@keyframes s2-stamp { 0% { opacity: 0; transform: scale(1.8) rotate(-8deg); } 60% { opacity: 1; transform: scale(.94) rotate(-2deg); } 100% { opacity: 1; transform: none; } }
.s2-motion [data-s2-ladder].is-in .s2-row-done { animation: s2-stamp .55s cubic-bezier(.2,.9,.3,1.2) both .7s; }
.s2-motion [data-s2-ladder]:not(.is-in) .s2-row-done { opacity: 0; }

/* 6. "+N since your last visit" */
.s2-meta .s2-up { color: var(--amber); }

/* 9. The team photos warm up into full colour when they're seen (or hovered). */
.s2-person img { transition: filter 1.4s ease; }
.s2-motion .s2-person:not(.is-in) img { filter: grayscale(.85) sepia(.18) brightness(.82); }
@media (hover: hover) { .s2-motion .s2-person:hover img { filter: none; } }

.s2-line { display: block; }
.s2-leak { display: none; }

@media (prefers-reduced-motion: no-preference) {
  /* 5. The hero pushes in slowly, and its lines rise into place. */
  @keyframes s2-push { from { transform: scale(1.12); } to { transform: scale(1); } }
  @keyframes s2-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  .s2-hero > img { animation: s2-push 11s cubic-bezier(.2,.6,.2,1) both; transform-origin: 60% 40%; }
  .s2-hero > .eyebrow { animation: s2-rise .9s cubic-bezier(.2,.7,.2,1) .15s both; }
  .s2-hero .s2-line:nth-child(1) { animation: s2-rise 1s cubic-bezier(.2,.7,.2,1) .3s both; }
  .s2-hero .s2-line:nth-child(2) { animation: s2-rise 1s cubic-bezier(.2,.7,.2,1) .48s both; }
  .s2-hero-lede { animation: s2-rise 1s cubic-bezier(.2,.7,.2,1) .7s both; }

  /* 8. A warm streak of light crosses the hero once, like a reel starting. */
  @keyframes s2-leak { 0% { opacity: 0; transform: translateX(-75%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(75%); } }
  .s2-leak { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen;
    background: linear-gradient(105deg, transparent 28%, rgba(255,186,110,.22) 44%, rgba(255,222,160,.3) 50%, rgba(255,170,90,.16) 56%, transparent 72%);
    animation: s2-leak 2.8s ease-in-out .6s both; }

  /* 7. Tier cards lift on hover, their banners drifting. */
  @media (hover: hover) {
    .s2-card { overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, background .35s ease; }
    .s2-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(0,0,0,.3); }
    .s2-card.is-picked:hover { box-shadow: inset 0 0 0 2px var(--amber), 0 20px 44px rgba(0,0,0,.3); }
    .s2-card-ban { transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
    .s2-card:hover .s2-card-ban { transform: scale(1.06); }
  }

  /* 10. Copy link: a little film-frame snap. */
  @keyframes s2-snap { 0% { transform: scale(1); } 30% { transform: scale(.93); box-shadow: inset 0 0 0 2px var(--amber); } 65% { transform: scale(1.04); } 100% { transform: scale(1); } }
  .s2-btn.is-copied { animation: s2-snap .5s cubic-bezier(.2,.7,.2,1); color: #fff4d8; }
}
/* The goal step's diamond is only filled once it's reached (filled means unlocked everywhere else);
   until then it's outlined in gold, which still sets it apart. */
.s2-row.is-big:not(.is-reached) .s2-dia { background: transparent; border-color: var(--amber); }

/* The movie card: the image dissolves into the panel instead of a hard edge.
   Side by side, it fades to the right; stacked (narrow), it fades downward. */
.s2-feature { container-type: inline-size; }
.s2-feature img { -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent); mask-image: linear-gradient(90deg, #000 62%, transparent); }
@container (max-width: 659px) {
  .s2-feature img { -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent); mask-image: linear-gradient(180deg, #000 58%, transparent); }
  .s2-feature > div { margin-top: -34px; position: relative; padding-top: 0; }
}
/* Side by side (desktop): show nearly the whole title card, and start the fade after the title. */
@container (min-width: 660px) {
  .s2-feature img { height: auto; aspect-ratio: 1200 / 896; max-height: 380px; align-self: center; -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent); }
}

/* ---------- /season-2/ Updates (js/season2-sections.js) ---------- */
.s2-hero-update { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-top: 26px; padding: 8px 16px 8px 8px; border-radius: 22px; background: rgba(21,22,18,.6); box-shadow: inset 0 0 0 1px rgba(185,163,101,.5); color: var(--paper); font: 13px/1.3 var(--s2-sans); text-decoration: none; backdrop-filter: blur(6px); transition: background .2s ease; }
.s2-hero-update[hidden] { display: none; }
.s2-hero-update:hover { background: rgba(21,22,18,.85); color: #fff4d8; }
.s2-hero-update .s2-pill { height: 22px; padding: 0 10px; font: 700 9px var(--s2-mono); text-transform: uppercase; flex: none; }
.s2-hero-update-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s2-updates { padding-bottom: 0; }
.s2-updates [data-s2-updates] { margin-top: clamp(28px,3.5vw,44px); max-width: 860px; }
.s2-update { padding: 26px 0; border-top: 1px solid rgba(229,223,207,.16); }
.s2-update.is-latest { padding: 30px clamp(22px,3vw,36px); border: 0; border-radius: 18px; background: rgba(185,163,101,.1); box-shadow: inset 0 0 0 2px var(--amber); }
.s2-update-k { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 12px var(--s2-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.s2-update-k .s2-pill { height: 22px; padding: 0 10px; font: 700 9px var(--s2-mono); }
.s2-update-t { margin: 0 0 12px; font-family: var(--s2-serif); font-weight: 400; font-size: clamp(26px,2.6vw,34px); line-height: 1.12; letter-spacing: -.02em; }
.s2-update:not(.is-latest) .s2-update-t { font-size: 24px; }
.s2-update-b p { margin: 0 0 12px; max-width: 680px; font-size: 17px; line-height: 1.6; color: rgba(241,237,226,.82); }
.s2-update-b p:last-child { margin-bottom: 0; }
.s2-update-link { display: inline-block; margin-top: 16px; color: var(--amber); font: 700 11px var(--s2-sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.s2-update-link:hover { color: #fff4d8; }
.s2-update-more { margin-top: 18px; }
.s2-update-more > summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 10px 0; font: 12px var(--s2-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(229,223,207,.8); }
.s2-update-more > summary::-webkit-details-marker { display: none; }
.s2-update-more > summary::after { content: "+"; color: var(--amber); font-size: 16px; }
.s2-update-more[open] > summary::after { content: "–"; }
.s2-update-more > summary:hover { color: #fff4d8; }
.s2-update-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(229,223,207,.12); color: var(--paper); font-size: 11px; letter-spacing: 0; }

/* The Build Challenge once it's launched: links in the steps; no steps once entries close. */
.s2-challenge .s2-step-s a { color: #d9c98f; text-underline-offset: 3px; }
.s2-challenge .s2-step-s a:hover { color: #fff4d8; }
.s2-challenge [data-ch="steps"][hidden] + .s2-actions { margin-top: 4px; }
.s2-challenge[data-stage="open"] .s2-pill { animation: s2-pulse 2.4s ease-in-out infinite; }
@keyframes s2-pulse { 50% { box-shadow: 0 0 0 6px rgba(185,163,101,.18); } }
@media (prefers-reduced-motion: reduce) { .s2-challenge[data-stage="open"] .s2-pill { animation: none; } }

/* The tier cards are links to each tier's Patreon checkout. */
a.s2-tier { display: flex; flex-direction: column; color: inherit; text-decoration: none; cursor: pointer; }
a.s2-tier:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.s2-tier-join { margin-top: auto; padding-top: 22px; font: 14px var(--s2-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
a.s2-tier:hover .s2-tier-join { text-decoration: underline; text-underline-offset: 4px; }

/* ======================================================================
   /season-2/: the ladder's strip and its list, linked (js/season2.js link()).
   A playhead at today's count; hover a number or a step and the other
   lights up, with a ghost fill out to it; the next unlock gets a spotlight.
   ====================================================================== */
.s2-meter-numbers { --s2-sh: 56px; --s2-top: 40px; position: relative; padding-top: var(--s2-top); }
.s2-over { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--s2-top) + var(--s2-sh)); z-index: 3; pointer-events: none; }

/* the playhead */
.s2-head { position: absolute; top: 0; bottom: -5px; width: 0; transition: left 1.4s cubic-bezier(.2,.7,.2,1); }
.s2-head::before { content: ""; position: absolute; left: -1px; top: 27px; bottom: 0; width: 2px; border-radius: 1px; background: #fff4d8; box-shadow: 0 0 10px rgba(255,244,216,.75), 0 0 22px rgba(185,163,101,.5); }
.s2-head::after { content: ""; position: absolute; left: -5px; top: 22px; border: 5px solid transparent; border-top-color: var(--amber); border-bottom: 0; }
.s2-head-n { position: absolute; top: 0; left: 0; transform: translateX(-50%); padding: 3px 10px 4px; border-radius: 6px; background: var(--amber); color: var(--ink); white-space: nowrap; font: 600 11px var(--s2-mono); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.s2-head-n b { font-size: 13px; letter-spacing: .04em; }

/* the ghost fill and its "+N members" */
.s2-ghost { position: absolute; left: 0; top: 16px; bottom: 16px; width: 0; background: repeating-linear-gradient(90deg, rgba(185,163,101,.48) 0 46px, rgba(185,163,101,.16) 46px 48px); opacity: 0; transition: width .5s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.s2-ghost.is-on { opacity: 1; animation: s2-ghost 1.6s ease-in-out infinite alternate; }
@keyframes s2-ghost { from { filter: brightness(.85); } to { filter: brightness(1.25); } }
.s2-gap { position: absolute; top: calc(var(--s2-top) + var(--s2-sh) / 2); transform: translate(calc(-100% - 10px), -50%); padding: 3px 8px; border-radius: 5px; background: rgba(11,13,10,.86); color: #fff4d8; white-space: nowrap; font: 600 11px var(--s2-mono); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity .2s ease, left .4s cubic-bezier(.2,.7,.2,1); }
.s2-gap.is-left { transform: translate(10px, -50%); }
.s2-gap.is-on { opacity: 1; }

/* the marks: the hovered one lights; the next unlock breathes */
.s2-meter-numbers .s2-mark { z-index: 1; transition: background .2s ease, box-shadow .2s ease; }
.s2-mark.is-hot { background: #fff4d8; box-shadow: 0 0 10px 2px rgba(255,244,216,.6); }
.s2-mark.is-next:not(.is-hot) { animation: s2-breathe 2.4s ease-in-out infinite; }
@keyframes s2-breathe { 0%, 100% { box-shadow: 0 0 0 rgba(185,163,101,0); } 50% { box-shadow: 0 0 12px 2px rgba(185,163,101,.7); background: var(--amber); } }

/* the numbers: buttons now, the crowded ones on a second row */
.s2-meter-numbers.has-alt .s2-ticks { height: 54px; }
.s2-meter-numbers .s2-tick.is-alt { top: 24px; }
.s2-meter-numbers .s2-tick.is-alt::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 22px; background: rgba(229,223,207,.22); }
.s2-meter-numbers button.s2-tick { padding: 2px 6px; margin-top: -2px; border-radius: 6px; transition: color .2s ease, text-shadow .2s ease; }
.s2-meter-numbers .s2-tick.is-next { color: #f1ead8; }
.s2-meter-numbers .s2-tick.is-hot { color: #fff4d8; text-shadow: 0 0 12px rgba(255,244,216,.6); }
.s2-meter-numbers .s2-tick.is-big.is-hot { color: #ffe9a8; }
.s2-meter-numbers button.s2-tick:focus-visible { box-shadow: 0 0 0 1px rgba(185,163,101,.7); }

/* the list: the hovered step lights, the rest step back */
.s2-row { position: relative; transition: background .3s ease, box-shadow .3s ease; }
.s2-row .s2-dia { transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.s2-row-at, .s2-row-title, .s2-row-desc { transition: opacity .3s ease, color .3s ease; }
.s2-ladder.is-hovering .s2-row:not(.is-hot) :is(.s2-row-at, .s2-row-title, .s2-row-desc) { opacity: .45; }
.s2-row.is-hot { background: linear-gradient(90deg, rgba(185,163,101,.12), rgba(185,163,101,0) 75%); }
.s2-row.is-hot .s2-dia { background: var(--amber); border-color: var(--amber); transform: rotate(45deg) scale(1.2); box-shadow: 0 0 0 5px rgba(185,163,101,.16), 0 0 14px rgba(185,163,101,.5); }
.s2-row.is-hot .s2-row-title { color: #fff4d8; }
.s2-row.is-hot .s2-row-at { color: var(--amber); }
.s2-row.is-big.is-hot { background: rgba(185,163,101,.2); }
@keyframes s2-flash { 0% { box-shadow: inset 0 0 0 2px rgba(255,244,216,.9), 0 0 30px rgba(185,163,101,.45); } 100% { box-shadow: inset 0 0 0 2px rgba(255,244,216,0), 0 0 0 rgba(185,163,101,0); } }
.s2-row.is-flash { animation: s2-flash 1.4s ease-out; }
.s2-row.is-big.is-flash { animation: none; }

/* the next unlock */
.s2-row.is-next .s2-row-at { color: var(--amber); }
.s2-row.is-next:not(.is-hot) .s2-dia { border-color: var(--amber); animation: s2-dia-breathe 2.4s ease-in-out infinite; }
@keyframes s2-dia-breathe { 50% { box-shadow: 0 0 0 5px rgba(185,163,101,.14), 0 0 14px rgba(185,163,101,.5); } }
.s2-row-next { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 13px; box-shadow: inset 0 0 0 1.5px var(--amber); color: var(--amber); font: 700 10px var(--s2-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.s2-row-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.s2-row-bar { position: relative; flex: 0 1 220px; min-width: 120px; height: 6px; border-radius: 3px; background: rgba(229,223,207,.14); overflow: hidden; }
.s2-row-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--amber); box-shadow: 0 0 10px rgba(185,163,101,.6); transform-origin: left; transition: transform 1.2s cubic-bezier(.2,.7,.2,1) .7s; }
.s2-motion [data-s2-ladder]:not(.is-in) .s2-row-bar i { transform: scaleX(0); }
.s2-row-num { font: 12px var(--s2-mono); letter-spacing: .08em; color: rgba(229,223,207,.75); }
.s2-row-join { font: 600 12px var(--s2-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); text-decoration: none; }
.s2-row-join:hover, .s2-row-join:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 640px) {
  .s2-meter-numbers { --s2-sh: 44px; --s2-top: 36px; }
  .s2-ghost { top: 13px; bottom: 13px; }
  .s2-head::before { top: 25px; } .s2-head::after { top: 20px; }
  .s2-head-n { font-size: 10px; } .s2-head-n b { font-size: 12px; }
  .s2-meter-numbers.has-alt .s2-ticks { height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .s2-ghost.is-on, .s2-mark.is-next, .s2-row.is-next .s2-dia, .s2-row.is-flash { animation: none !important; }
  .s2-head { transition: none; }
}
.s2-meter-numbers.is-aiming .s2-strip { cursor: pointer; }