/* =========================================================================
   ATX WRITING CLUB — COMPONENTS & PAGES
   Built on system.css. Nothing here invents a colour or a duration; it only
   arranges what the system already defines.
   ========================================================================= */

/* -- HERO ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding-top: calc(var(--header-h) + 4vh);
  padding-bottom: clamp(2.5rem, 7vh, 6rem);
  overflow: clip;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: -8% 0 -8% 0; z-index: -2; }
/* <picture> is a display:block box with auto height, so once the hero image
   was wrapped in one the img's height:100% resolved against nothing and it
   fell back to its intrinsic ratio — a band at the top instead of a full
   bleed. The wrapper has to carry the height too. */
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(20,16,11,.42) 0%, rgba(20,16,11,.06) 34%, rgba(20,16,11,.62) 100%),
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(20,16,11,.30) 100%);
}
.hero--paper { background: var(--paper); }
.hero--paper .hero__scrim { display: none; }

.hero__inner { width: 100%; }
.hero__eyebrow { display: flex; align-items: center; gap: .9rem; margin-bottom: clamp(1rem, 2.5vh, 2rem); }
.hero__eyebrow .bar { width: clamp(28px, 5vw, 64px); height: 1px; background: currentColor; opacity: .6; }
.hero__title { max-width: 16ch; }
.hero__foot {
  margin-top: clamp(1.75rem, 5vh, 3.5rem);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap;
}
.hero__sub { max-width: 34ch; }

.hero__scroll {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--f-label); font-size: var(--t-micro);
  letter-spacing: .2em; text-transform: uppercase; opacity: .75;
}
.hero__scroll .tick {
  width: 1px; height: 34px; background: currentColor; position: relative; overflow: hidden;
}
.hero__scroll .tick::after {
  content: ''; position: absolute; inset: 0; background: var(--rust-night);
  animation: tick 2.6s var(--e-soft) infinite;
}
@keyframes tick { 0% { transform: translateY(-100%); } 55%,100% { transform: translateY(100%); } }

.hero--art { min-height: auto; padding-block: calc(var(--header-h) + clamp(4rem,12vh,9rem)) var(--band); }
.hero--art .hero__title { max-width: 20ch; }

/* -- TICKER BAND --------------------------------------------------------- */

.band-ticker {
  border-block: 1px solid var(--rule);
  padding-block: clamp(.85rem, 1.6vh, 1.3rem);
  background: var(--paper-lo);
}
:is(.night,.ftr,.menu,.tier--feature,.mcard--dark) .band-ticker, .band-ticker.night { background: var(--night-2); border-color: var(--rule-night); }
.ticker__item {
  display: inline-flex; align-items: center; gap: 1.4rem;
  padding-inline: 1.4rem;
  font-family: var(--f-poster);
  font-size: clamp(1.1rem, 2vw, 1.75rem);
  text-transform: uppercase; letter-spacing: .02em;
  white-space: nowrap;
}
.ticker__item .dot { width: 5px; height: 5px; background: var(--rust); border-radius: 50%; flex: none; }
.ticker__item .art { height: clamp(26px, 3.4vw, 40px); width: auto; opacity: .9; }

/* -- STATEMENT ----------------------------------------------------------- */

.statement {
  font-family: var(--f-display);
  font-size: clamp(2.1rem, 5.6vw, 5.4rem);
  line-height: 1.04; letter-spacing: -.026em;
  max-width: 22ch;
}
.statement em { font-style: italic; color: var(--rust); }
:is(.night,.ftr,.menu,.tier--feature,.mcard--dark) .statement em { color: var(--rust-night); }

.statement-block { position: relative; }
.statement-block .mark--a { right: -2%; top: -14%; width: clamp(110px, 17vw, 300px); }
.statement-block .mark--b { left: -6%; bottom: -18%; width: clamp(90px, 12vw, 210px); }

/* -- PILLAR LIST (three-up value props) ---------------------------------- */

.pillars { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }
.pillar { border-top: 1px solid var(--rule); padding-top: var(--s-5); }
:is(.night,.ftr,.menu,.tier--feature,.mcard--dark) .pillar { border-color: var(--rule-night); }
.pillar__n { display: block; margin-bottom: var(--s-5); }
.pillar__art { height: clamp(70px, 8vw, 104px); width: auto; margin-bottom: var(--s-5); opacity: .95; }
.pillar h3 { font-size: var(--t-d4); margin-bottom: .55rem; }
.pillar p { color: var(--ink-2); font-size: var(--t-small); }
:is(.night,.ftr,.menu,.tier--feature,.mcard--dark) .pillar p { color: var(--on-night-2); }

/* -- PINNED CHAPTERS ----------------------------------------------------- */

.chapters { position: relative; height: var(--ch-h, auto); }
.chapters__sticky {
  position: sticky; top: 0; height: 100svh;
  display: grid; align-items: center; overflow: hidden;
}

.chapters__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 900px) { .chapters__grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.chapters__media { position: relative; aspect-ratio: 4/5; overflow: hidden; }
@media (max-width: 900px) { .chapters__media { aspect-ratio: 16/10; } }
.chapters__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity 700ms var(--e-expo), transform 1400ms var(--e-expo);
}
.chapters__media img.is-active { opacity: 1; transform: scale(1); }
.chapters__panel { position: relative; }
.chapters__panel > .ch {
  position: absolute; inset: 0; display: grid; align-content: center;
  opacity: 0; transform: translateY(18px);
  transition: opacity 620ms var(--e-expo), transform 620ms var(--e-expo);
  pointer-events: none;
}
.chapters__panel > .ch.is-active { opacity: 1; transform: none; pointer-events: auto; }
.chapters__panel { min-height: 20rem; }
.ch h3 { font-size: var(--t-d2); margin-block: .6rem .9rem; }
.ch p { color: var(--on-night-2); max-width: 38ch; }
.chapters__rail { display: flex; gap: .5rem; margin-top: var(--s-6); }
.chapters__rail i { display: block; width: 34px; height: 2px; background: var(--rule-night); }
.chapters__rail i.is-active { background: var(--rust-night); }

/* -- TIERS --------------------------------------------------------------- */

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); }
@media (max-width: 980px) { .tiers { grid-template-columns: 1fr; } }
.tier {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2.2vw, 2rem) clamp(2rem, 3.4vw, 3rem);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column;
  transition: background-color 600ms var(--e-expo);
}
.tier:last-child { border-right: 0; }
@media (max-width: 980px) { .tier { border-right: 0; } }
.tier:hover { background: var(--paper-hi); }
.tier--feature { background: var(--night); color: var(--on-night); border-color: var(--rule-night); }
.tier--feature:hover { background: var(--night-2); }
.tier--feature .tier__price small, .tier--feature .tier__best dt { color: var(--on-night-2); }
.tier--feature .tier__incl li { border-color: var(--rule-night); }
.tier__flag {
  position: absolute; top: 0; right: clamp(1.25rem, 2.2vw, 2rem);
  transform: translateY(-50%);
  background: var(--rust-ink); color: #FFF6E6;
  font-family: var(--f-label); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; padding: .45em .85em;
}
.tier__name { font-family: var(--f-poster); font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: .9; }
.tier__price { font-family: var(--f-display); font-size: clamp(1.9rem, 2.8vw, 2.6rem); letter-spacing: -.02em; margin-top: .45rem; }
.tier__price small { font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-left: .5rem; }
.tier__art { position: absolute; right: clamp(.5rem,1.4vw,1.25rem); bottom: clamp(.5rem,1.4vw,1.25rem); width: clamp(74px, 9vw, 128px); opacity: .18; pointer-events: none; }
.tier--feature .tier__art { opacity: .3; }
.tier__best { margin-top: var(--s-5); }
.tier__best dt { margin-bottom: .5rem; }
.tier__best dd { margin: 0; font-size: var(--t-small); color: inherit; }
.tier__best ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tier__best li {
  font-family: var(--f-label); font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; border: 1px solid var(--rule-strong); padding: .35em .6em;
}
.tier--feature .tier__best li { border-color: var(--rule-night); }
.tier__blurb { margin-top: var(--s-5); font-size: var(--t-small); color: var(--ink-2); }
.tier--feature .tier__blurb { color: var(--on-night-2); }
.tier__incl { list-style: none; padding: 0; margin-top: var(--s-5); }
.tier__incl li {
  font-size: var(--t-small); padding: .62rem 0 .62rem 1.4rem; position: relative;
  border-bottom: 1px solid var(--rule);
}
.tier__incl li::before {
  content: '→'; position: absolute; left: 0; top: .62rem;
  color: var(--rust); font-family: var(--f-label); font-size: .8em;
}
.tier--feature .tier__incl li::before { color: var(--rust-night); }
.tier__cta { margin-top: auto; padding-top: var(--s-6); }
.tier__cta .btn { width: 100%; justify-content: center; }

/* -- EVENT CARDS --------------------------------------------------------- */

.ev-list { border-top: 1px solid var(--rule); }
.ev {
  position: relative;
  display: grid; grid-template-columns: 4.5rem 1fr auto;
  gap: clamp(1rem, 3vw, 2.5rem); align-items: center;
  padding-block: clamp(1.4rem, 2.6vw, 2.2rem);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: padding-inline 620ms var(--e-expo), background-color 620ms var(--e-expo);
}
.ev:hover { background: var(--paper-hi); padding-inline: clamp(.5rem, 1.6vw, 1.5rem); }
.ev__n { display: block; align-self: start; padding-top: .55rem; }
.ev__t { display: block; font-family: var(--f-display); font-size: var(--t-d3); line-height: 1.06; letter-spacing: -.016em; }
.ev__d { display: block; margin-top: .5rem; color: var(--ink-2); font-size: var(--t-small); max-width: 56ch; }
.ev__facts { display: flex; gap: 1.25rem; margin-top: .85rem; flex-wrap: wrap; }
.ev__go { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--rule-strong); border-radius: 50%; flex: none; transition: background-color 420ms var(--e-expo), color 420ms var(--e-expo), transform 420ms var(--e-expo); }
.ev:hover .ev__go { background: var(--rust); color: var(--paper-hi); border-color: var(--rust); transform: translateX(4px); }
.ev__art {
  position: absolute; right: clamp(3.5rem, 9vw, 9rem); top: 50%;
  width: clamp(90px, 11vw, 170px); translate: 0 -50%;
  opacity: 0; transform: translateX(24px) rotate(-6deg);
  transition: opacity 620ms var(--e-expo), transform 780ms var(--e-expo);
  pointer-events: none;
}
.ev:hover .ev__art { opacity: .95; transform: translateX(0) rotate(0deg); }
@media (max-width: 760px) {
  .ev { grid-template-columns: 1fr; gap: .35rem; }
  .ev__n { padding-top: 0; }
  .ev__go { display: none; }
  .ev__art { display: none; }
}

/* -- HORIZONTAL RAIL ----------------------------------------------------- */

.rail { position: relative; }
.rail__viewport { overflow: hidden; }
.rail__track { display: flex; gap: clamp(1rem, 2.4vw, 2rem); will-change: transform; }
.rail__card { flex: 0 0 clamp(17rem, 26vw, 25rem); }
.rail__card .fig { margin-bottom: var(--s-4); }
/* The pin now runs on phones too. Cards are sized so roughly one and a bit is
   in frame — enough to make it obvious the row continues. The vertical scroll
   needed to cross the rail is damped in JS so it does not take five swipes. */
@media (max-width: 900px) {
  .rail__card { flex-basis: 76vw; }
  .rail--spk .rail__card { flex-basis: 64vw; }
  /* The card has to fit the pinned 100svh box or its tail is clipped, so the
     picture gives up height before the type does. */
  .rail__card .fig { max-height: 46svh; }
  .rail__card .fig img { height: 100%; object-fit: cover; }
}

/* Reduced motion: the pin is the animation, so remove it entirely. Without
   this the track never gets its transform and everything past the second card
   sits behind overflow:hidden, unreachable — which was true on desktop too. */
@media (prefers-reduced-motion: reduce) {
  .rail { height: auto !important; }
  .rail__viewport {
    position: static !important;
    height: auto !important;
    display: block !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1rem;
  }
  .rail__viewport::-webkit-scrollbar { display: none; }
  .rail__viewport > .wrap { max-width: none; padding-inline: 0; }
  .rail__track { transform: none !important; padding-inline: var(--gut); }
  .rail__card { scroll-snap-align: start; }
  .rail__card .fig { max-height: none; }
  .rail::after {
    content: 'Swipe →';
    display: block; padding-inline: var(--gut); padding-top: .5rem;
    font-family: var(--f-label); font-size: var(--t-micro);
    letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  }
}

/* -- SPEAKERS RAIL ------------------------------------------------------- */
/* Narrower than the events rail on purpose. Eight faces at 25rem would be a
   parade; at 18rem they read as a set, and more of them are on screen at once,
   which is the whole point of showing who has taught here. */

.rail--spk .rail__card { flex: 0 0 clamp(14rem, 19vw, 18rem); }
.spk .fig { margin-bottom: 0; }
.spk__taught {
  font-family: var(--f-label); font-size: var(--t-micro); font-weight: 620;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rust-ink);
  line-height: 1.45;
}
:is(.night,.ftr,.menu) .spk__taught { color: var(--rust-night); }
.spk--end { display: grid; align-content: center; }

/* -- POLAROID WALL ------------------------------------------------------- */

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(9rem, 15vw, 14rem), 1fr));
  gap: clamp(.85rem, 1.8vw, 1.6rem);
}
.pol {
  background: var(--paper-hi);
  padding: clamp(.5rem, .8vw, .7rem) clamp(.5rem, .8vw, .7rem) clamp(1.6rem, 2.6vw, 2.4rem);
  box-shadow: 0 1px 0 rgba(28,22,16,.10), 0 10px 22px -18px rgba(28,22,16,.55);
  transition: transform 760ms var(--e-expo), box-shadow 760ms var(--e-expo);
  transform: rotate(var(--tilt, 0deg));
  position: relative;
}
.pol img { width: 100%; aspect-ratio: .84; object-fit: cover; background: var(--paper-lo); }
.pol:hover { transform: rotate(0deg) translateY(-6px) scale(1.02); box-shadow: 0 2px 0 rgba(28,22,16,.10), 0 26px 44px -26px rgba(28,22,16,.6); z-index: 2; }
:is(.night,.ftr,.menu,.tier--feature,.mcard--dark) .pol { background: var(--night-3); }

/* -- WRITER CARDS -------------------------------------------------------- */

.writers { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.4vw, 2.25rem); }
@media (max-width: 1000px) { .writers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .writers { grid-template-columns: 1fr; } }
.writer__fig { margin-bottom: var(--s-4); }
.writer h3 { font-size: var(--t-d4); }
.writer dl { margin-top: var(--s-4); display: grid; gap: .7rem; }
.writer dt { margin-bottom: .18rem; }
.writer dd { margin: 0; font-size: var(--t-small); line-height: 1.45; }

/* -- FAQ ----------------------------------------------------------------- */

.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%; text-align: left; display: flex; gap: var(--s-5);
  align-items: baseline; justify-content: space-between;
  padding-block: clamp(1.15rem, 2.2vw, 1.7rem);
  font-family: var(--f-display); font-size: var(--t-d4); line-height: 1.24; letter-spacing: -.008em;
  transition: color 300ms linear;
}
.faq__q:hover { color: var(--rust-ink); }
.faq__sign { flex: none; width: 16px; height: 16px; position: relative; align-self: center; }
.faq__sign::before, .faq__sign::after {
  content: ''; position: absolute; inset: 50% 0 auto 0; height: 1px; background: currentColor;
  transition: transform 520ms var(--e-expo), opacity 300ms linear;
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); opacity: 0; }
.faq__a { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 620ms var(--e-expo); }
.faq__item[open] .faq__a { grid-template-rows: 1fr; }
.faq__a > div { min-height: 0; }
.faq__a .inner { padding-bottom: clamp(1.4rem, 2.6vw, 2.2rem); max-width: 58ch; color: var(--ink-2); }
.faq__a h5 { font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--rust-ink); margin-top: 1.4em; margin-bottom: .35em; }
.faq__a p + p { margin-top: .9em; }

/* -- JOURNAL ------------------------------------------------------------- */

.j-index { border-top: 1px solid var(--rule); }
.j-row {
  display: grid; grid-template-columns: 4.5rem 1.2fr 1fr auto; align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.3rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--rule); text-decoration: none;
  transition: background-color 620ms var(--e-expo), padding-inline 620ms var(--e-expo);
}
.j-row:hover { background: var(--paper-hi); padding-inline: clamp(.5rem, 1.6vw, 1.5rem); }
.j-row__t { display: block; font-family: var(--f-display); font-size: var(--t-d3); line-height: 1.08; letter-spacing: -.016em; }
.j-row__by { color: var(--ink-3); }
.j-row__thumb { width: 5.5rem; aspect-ratio: 4/5; object-fit: cover; opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--e-expo), transform 620ms var(--e-expo); }
.j-row:hover .j-row__thumb { opacity: 1; transform: none; }
@media (max-width: 820px) {
  .j-row { grid-template-columns: 3rem 1fr; align-items: start; row-gap: .5rem; }
  .j-row__thumb { display: none; }
  /* Four children into two columns put the byline back in the 3rem number
     gutter, where "Words by Zac Solomon" wrapped one word per line. Pin it
     to the content column so it gets the full width on its own row. */
  .j-row__by { grid-column: 2; }
}

.article__head { padding-top: calc(var(--header-h) + clamp(3rem, 9vh, 7rem)); }
.article__title { max-width: 22ch; }
.article__byline { display: flex; gap: var(--s-6); flex-wrap: wrap; align-items: baseline; margin-top: var(--s-6); }
.article__hero { margin-block: clamp(2.5rem, 6vh, 5rem); }
.article__body { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.article__body > * { width: min(100%, var(--measure)); }
.article__body > .wide { width: min(100%, 66rem); }
.article__body > .pull { width: min(100%, 52rem); }
.article__nav { display: flex; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; padding-top: var(--s-6); border-top: 1px solid var(--rule); }

/* -- MERCH --------------------------------------------------------------- */

.shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 900px) { .shop { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .shop { grid-template-columns: 1fr; } }
.prod { text-decoration: none; display: block; }
.prod .fig { background: var(--paper-lo); }
.prod__row { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-4); align-items: baseline; }
.prod__t { font-family: var(--f-display); font-size: var(--t-d4); line-height: 1.2; }
.prod__p { font-family: var(--f-label); font-size: var(--t-meta); letter-spacing: .08em; }
.prod__flag {
  position: absolute; left: 0; top: 0; z-index: 2;
  background: var(--ink); color: var(--paper);
  font-family: var(--f-label); font-size: var(--t-micro); font-weight: 620;
  letter-spacing: .18em; text-transform: uppercase; padding: .45em .8em;
}

/* Cart drawer. Behaviour lives in shop.js; width override in shop.css. */
.cart-btn { position: relative; display: inline-flex; align-items: center; gap: .4rem; }
.cart-btn__n {
  font-family: var(--f-label); font-size: var(--t-micro); font-weight: 700;
  min-width: 1.35em; height: 1.35em; display: grid; place-items: center;
  border-radius: 50%; background: var(--rust); color: var(--paper-hi);
}
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(28rem, 100vw); z-index: 950;
  background: var(--paper-hi); color: var(--ink);
  transform: translateX(101%); transition: transform 620ms var(--e-quint);
  display: flex; flex-direction: column; box-shadow: -30px 0 60px -40px rgba(28,22,16,.6);
}
body.cart-open .drawer { transform: none; }
.drawer__scrim { position: fixed; inset: 0; z-index: 940; background: rgba(20,16,11,.42); opacity: 0; pointer-events: none; transition: opacity 500ms var(--e-expo); }
body.cart-open .drawer__scrim { opacity: 1; pointer-events: auto; }
.drawer__head, .drawer__foot { padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.drawer__foot { border-bottom: 0; border-top: 1px solid var(--rule); display: block; }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--s-5) var(--s-6); }
.cart-line { display: grid; grid-template-columns: 4rem 1fr auto; gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--rule); align-items: center; }
.cart-line img { width: 4rem; aspect-ratio: 1; object-fit: cover; }

/* -- CONTACT ------------------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* -- STYLEGUIDE ---------------------------------------------------------- */

.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s-4); }
.sg-swatch { border: 1px solid var(--rule); }
.sg-swatch__chip { height: 7.5rem; }
.sg-swatch__meta { padding: .75rem .85rem 1rem; display: grid; gap: .18rem; }
.sg-row { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s-5); padding-block: var(--s-5); border-bottom: 1px solid var(--rule); align-items: baseline; }
@media (max-width: 700px) { .sg-row { grid-template-columns: 1fr; gap: .5rem; } }
.sg-elements { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--s-5); }
.sg-el { text-align: center; border: 1px solid var(--rule); padding: var(--s-5) var(--s-3) var(--s-4); background: var(--paper-hi); }
.sg-el img { height: 7rem; width: auto; margin: 0 auto var(--s-4); }
.sg-demo { border: 1px solid var(--rule); padding: var(--s-6); background: var(--paper-hi); }
code, .mono {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .82em; letter-spacing: 0; color: #8E2E12;
  background: color-mix(in srgb, var(--rust) 9%, var(--paper-hi));
  padding: .12em .35em;
}
:is(.night,.ftr,.menu,.tier--feature,.mcard--dark) code, :is(.night,.ftr,.menu,.tier--feature,.mcard--dark) .mono {
  color: var(--rust-night); background: color-mix(in srgb, var(--rust) 18%, var(--night-2));
}

/* -- MISC ---------------------------------------------------------------- */

.quiet-note { font-size: var(--t-meta); color: var(--ink-3); }
:is(.night,.ftr,.menu,.tier--feature,.mcard--dark) .quiet-note { color: var(--on-night-2); }

.cta-band { position: relative; overflow: clip; }
.cta-band .mark--a { left: -4%; bottom: -22%; width: clamp(140px, 20vw, 340px); opacity: .5; }
.cta-band .mark--b { right: -3%; top: -18%; width: clamp(110px, 15vw, 250px); opacity: .5; }

/* Custom cursor — desktop, fine pointer only */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 9500; pointer-events: none;
  width: 8px; height: 8px; border-radius: 50%; background: var(--rust);
  transform: translate3d(-50%, -50%, 0);
  transition: width 420ms var(--e-expo), height 420ms var(--e-expo),
              background-color 420ms var(--e-expo), opacity 300ms linear;
  mix-blend-mode: normal;
}
.cursor.is-media { width: 84px; height: 84px; background: color-mix(in srgb, var(--rust) 88%, transparent); }
.cursor__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--f-label); font-size: 9px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--paper-hi);
  opacity: 0; transition: opacity 260ms linear;
}
.cursor.is-media .cursor__label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* -- ESSAY --------------------------------------------------------------- */

.essay__p { margin-top: 1.15em; }
.essay__p:first-child { margin-top: 0; }
.essay__p--open::first-letter {
  font-family: var(--f-display); float: left; font-size: 4.1em; line-height: .78;
  padding: .06em .1em 0 0; color: var(--rust);
}
.essay__h {
  font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .16em;
  text-transform: uppercase; font-weight: 620; color: var(--rust-ink);
  margin-top: 2.6em; margin-bottom: .1em;
}
.essay__verse {
  font-family: var(--f-display); font-size: var(--t-d4);
  line-height: 1.62; letter-spacing: -.004em; margin-top: 1.9em;
}
.essay__verse:first-child { margin-top: 0; }
.essay__break { margin-block: clamp(3rem, 8vh, 6rem); }
.essay .pull { border-left: 0; padding-left: 0; text-align: center; }
.essay .pull::before {
  content: ''; display: block; width: 40px; height: 1px;
  background: var(--rust); margin: 0 auto clamp(1.5rem, 3vh, 2.5rem);
}


/* -- SEALS & DYNAMIC MARKS ---------------------------------------------- */

.cta-band__dyn { right: 4%; top: 50%; translate: 0 -50%; width: clamp(200px, 26vw, 430px); opacity: .9; }
.cta-band .mark--a { left: -5%; bottom: -26%; width: clamp(140px, 20vw, 320px); opacity: .34; }
.cta-band .mark--b { right: 44%; top: -20%; width: clamp(110px, 14vw, 210px); opacity: .26; }

/* A page seal: the badge that stamps a section, like a wax mark on paper. */
.seal { display: block; width: clamp(96px, 11vw, 168px); height: auto; }
.seal--lg { width: clamp(150px, 20vw, 300px); }


/* A full-width dynamic element used as a section divider. */
.divider-art {
  display: grid; place-items: center;
  padding-block: clamp(2.5rem, 7vh, 6rem);
  position: relative;
}
/* The upper bound used to be 520px on a 30vw curve, which is the right weight
   on a phone and a billboard on a desktop — the break was reading louder than
   the sections it separates. The vw term is unchanged so mobile is untouched;
   only the ceiling comes down. */
.divider-art img { width: clamp(180px, 30vw, 300px); height: auto; }
@media (min-width: 901px) {
  .divider-art { padding-block: clamp(2rem, 5vh, 4rem); }
}
.divider-art::before, .divider-art::after {
  content: ''; position: absolute; top: 50%; width: min(24vw, 300px); height: 1px; background: var(--rule);
}
.divider-art::before { left: var(--gut); }
.divider-art::after { right: var(--gut); }
:is(.night,.ftr,.menu,.tier--feature,.mcard--dark) .divider-art::before, :is(.night,.ftr,.menu,.tier--feature,.mcard--dark) .divider-art::after { background: var(--rule-night); }

.sg-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s-5); }
.sg-logo { border: 1px solid var(--rule); background: var(--paper-hi); padding: var(--s-6) var(--s-4) var(--s-4); text-align: center; }
.sg-logo img { height: 8.5rem; width: auto; margin: 0 auto var(--s-4); }

/* =========================================================================
   v1.1 — polaroid-first photography, the ledger, the mark taxonomy
   ========================================================================= */

/* -- POLAROID MARQUEE ---------------------------------------------------- */
/* The member wall, moved to the top of the page and set in motion. Two rows
   travelling in opposite directions at different speeds so the band never
   reads as a single sliding strip. */

.pol-marquee {
  padding-block: clamp(1.5rem, 3.5vh, 3rem);
  background: var(--paper-lo);
  border-block: 1px solid var(--rule);
  overflow: hidden;
}
.pol-marquee .ticker + .ticker { margin-top: clamp(.6rem, 1.2vw, 1rem); }
.pol-marquee .ticker__set { gap: clamp(.6rem, 1.2vw, 1rem); padding-right: clamp(.6rem, 1.2vw, 1rem); }
.pol-marquee .pol {
  flex: none;
  width: clamp(104px, 12.5vw, 178px);
  padding: clamp(.35rem, .55vw, .5rem) clamp(.35rem, .55vw, .5rem) clamp(1.1rem, 1.8vw, 1.6rem);
}
.pol-marquee .pol:hover { transform: rotate(0deg) translateY(-5px) scale(1.03); }
.pol-marquee__rev .ticker__track { animation-direction: reverse; }
.pol-marquee__cap {
  display: flex; justify-content: space-between; gap: var(--s-5);
  padding-inline: var(--gut); padding-bottom: clamp(.9rem, 1.8vh, 1.4rem);
}

/* -- THE LEDGER ---------------------------------------------------------- */

.ledger { border-top: 1px solid var(--rule-night); }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 12ch) 1fr minmax(0, 34ch);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.5rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--rule-night);
  transition: background-color 620ms var(--e-expo), padding-inline 620ms var(--e-expo);
}
.ledger__row:hover { background: var(--night-2); padding-inline: clamp(.5rem, 1.4vw, 1.25rem); }
.ledger__n {
  font-family: var(--f-display);
  font-size: clamp(2.9rem, 6.2vw, 5.6rem);
  line-height: .86; letter-spacing: -.03em;
  font-variant-numeric: lining-nums;
  color: var(--on-night);
}
.ledger__n sup {
  font-family: var(--f-label); font-size: .28em; font-weight: 700;
  vertical-align: super; letter-spacing: .02em; color: var(--rust-night);
}
.ledger__t { font-family: var(--f-display); font-size: var(--t-d3); line-height: 1.1; letter-spacing: -.014em; }
.ledger__d { font-size: var(--t-small); color: var(--on-night-2); }
@media (max-width: 820px) {
  .ledger__row { grid-template-columns: 1fr; gap: .45rem; }
  .ledger__n { font-size: clamp(3.4rem, 17vw, 5rem); }
}

/* -- TIER VALUE TABLE ---------------------------------------------------- */

.tier--feature .tier__value { border-color: var(--rule-night); }
.tier--feature .tier__value .vr dt { color: var(--on-night-2); }
.tier--feature .tier__value .vr dd { color: var(--rust-night); }
.tier--feature .tier__value .vr--total { border-color: var(--rule-night); }
.tier--feature .tier__value .vr--foot { border-color: var(--rule-night); }
.tier__terms {
  margin-top: .5rem;
  font-family: var(--f-label); font-size: var(--t-meta); color: var(--ink-3);
}
.tier--feature .tier__terms { color: var(--on-night-2); }

/* -- MARK TAXONOMY ------------------------------------------------------- */
/* Each event type owns a mark for good. Repeated on the index, the detail
   page, the calendar and the door of the venue, it becomes something members
   read faster than the words. */

.taxonomy {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.5rem, 1.4vw, 1.25rem);
}
@media (max-width: 1000px) { .taxonomy { grid-template-columns: repeat(3, 1fr); } }
/* Two across on anything phone-sized. At three the labels wrap to two lines
   and the grid reads as noise rather than a set of marks. */
@media (max-width: 900px)  { .taxonomy { grid-template-columns: repeat(2, 1fr); } }
.tax {
  display: grid; justify-items: center; text-align: center; gap: .6rem;
  padding: clamp(1rem, 1.8vw, 1.5rem) .5rem clamp(.9rem, 1.6vw, 1.25rem);
  border: 1px solid var(--rule); text-decoration: none;
  transition: background-color 520ms var(--e-expo), border-color 520ms var(--e-expo), transform 520ms var(--e-expo);
}
:is(.night,.ftr,.menu,.tier--feature,.mcard--dark) .tax { border-color: var(--rule-night); }
.tax:hover { background: var(--paper-hi); transform: translateY(-3px); }
:is(.night,.ftr,.menu,.tier--feature,.mcard--dark) .tax:hover { background: var(--night-2); }
.tax img { height: clamp(48px, 5.4vw, 74px); width: auto; }
.tax span { font-family: var(--f-label); font-size: var(--t-micro); font-weight: 620;
  letter-spacing: .11em; text-transform: uppercase; line-height: 1.3; }

/* The mark now lives permanently at the head of every event row. */
.ev { grid-template-columns: 3.6rem 4.5rem 1fr auto; }
.ev__mark { width: 3.6rem; height: auto; align-self: center; opacity: .95;
  transition: transform 620ms var(--e-expo); }
.ev:hover .ev__mark { transform: scale(1.09) rotate(-3deg); }
@media (max-width: 760px) {
  .ev { grid-template-columns: 2.6rem 1fr; grid-template-areas: "mark n" "mark body"; column-gap: 1rem; }
  .ev__mark { grid-area: mark; width: 2.6rem; align-self: start; }
  .ev__n { grid-area: n; }
  .ev > span:not(.ev__n):not(.ev__mark):not(.ev__go):not(.ev__art) { grid-area: body; }
}

/* -- MEMBERSHIP CARD ----------------------------------------------------- */

.card-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 2rem); }
@media (max-width: 860px) { .card-strip { grid-template-columns: 1fr; } }
.mcard {
  position: relative; aspect-ratio: 1.586;      /* ISO/IEC 7810 ID-1 — a real card */
  border: 1px solid var(--rule-strong);
  background: var(--paper-hi);
  display: grid; align-content: space-between;
  padding: clamp(.9rem, 1.6vw, 1.35rem);
  overflow: hidden;
  transition: transform 720ms var(--e-expo), box-shadow 720ms var(--e-expo);
}
.mcard:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 24px 40px -30px rgba(28,22,16,.6); }
.mcard--dark { background: var(--night); color: var(--on-night); border-color: var(--rule-night); }
.mcard__seal { position: absolute; right: -8%; bottom: -18%; width: 52%; opacity: .22; pointer-events: none; }
.mcard--dark .mcard__seal { opacity: .3; }
.mcard__name { font-family: var(--f-poster); font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: .9; }
.mcard__no { font-family: var(--f-label); font-size: var(--t-micro); letter-spacing: .22em; }

/* -- LINEAGE BUST ---------------------------------------------------------- */
/* Sunk low enough to sit under the type as a watermark rather than compete
   with it — just legible enough that you notice him on the second look. */
.mark--bust {
  z-index: 0; opacity: .10;
  right: 4%; top: 50%; transform: translateY(-50%);
  width: min(38vw, 620px);
}
@media (min-width: 1400px) { .mark--bust { opacity: .12; } }
/* On a phone the copy fills the column, so he goes behind it rather than
   beside it — bottom-anchored and wider than the viewport so the crop reads
   as a detail rather than a shrunken whole. */
@media (max-width: 900px) {
  /* There is no room beside the copy on a phone — the band is only about one
     screen tall and the text fills the column — and the band clips its own
     overflow, so anything anchored to an edge gets cut in half. He goes
     behind the type instead, centred and oversized: the actual watermark
     treatment rather than a decoration squeezed into a margin. */
  .mark--bust {
    left: 50%; right: auto; top: 50%; bottom: auto;
    transform: translate(-50%, -50%);
    width: min(96vw, 400px); opacity: .20;
  }
}

/* -- SHELF --------------------------------------------------------------- */

/* Fixed column counts rather than auto-fill. With auto-fill the number of
   columns floats with the viewport, so no fixed item count can ever fill the
   last row — at 1440 it landed 7 across and left a four-wide hole. Each
   breakpoint now divides the item count exactly: 18 over 6 or 3, 10 over 2. */
.shelf { display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(.85rem, 1.8vw, 1.5rem); }
@media (max-width: 1099px) { .shelf { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .shelf { grid-template-columns: repeat(2, 1fr); } }
.shelf__item { border: 1px solid var(--rule-night); padding: var(--s-4); display: grid; gap: .4rem;
  align-content: start; min-height: 11rem; }
.shelf__item .num { color: var(--on-night-3); }
.shelf__t { font-family: var(--f-display); font-size: 1.06rem; line-height: 1.22; }
.shelf__m { font-family: var(--f-label); font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-night-2); margin-top: auto; }
/* The grid runs seven across on a wide screen, so ten items left a ragged
   three-wide hole in the second row. Entries 011+ square it off. On a phone
   the grid is two across and ten already lands even, so they are dropped
   rather than rendered and hidden — no point shipping the DOM for them. */
@media (max-width: 900px) { .shelf__item--fill { display: none; } }


/* -- CHAPTERS ON A PHONE ------------------------------------------------- */
/* The pinned three-panel section is a desktop device. On a phone a 400vh
   sticky box that only swaps text is a scroll trap, so it unpacks into three
   ordinary stacked chapters, each with its own picture. Declared here, after
   the desktop rules, so the absolute positioning is actually overridden. */

@media (max-width: 900px) {
  .chapters { height: auto !important; }
  .chapters__sticky {
    position: static; height: auto; display: block;
    padding-block: var(--band); overflow: visible;
  }
  .chapters__grid { display: block; }
  .chapters__media { display: none; }             /* each chapter carries its own */
  .ch__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: var(--s-4); }
  .chapters__panel { position: static; min-height: 0; display: grid; gap: 0; }
  .chapters__panel > .ch {
    position: static; inset: auto; opacity: 1; transform: none; pointer-events: auto;
    display: block; padding-block: clamp(1.6rem, 4vh, 2.4rem);
    border-top: 1px solid var(--rule-night);
  }
  .chapters__panel > .ch:first-child { border-top: 0; padding-top: 0; }
  .ch h3 { font-size: var(--t-d3); }
  .ch p { max-width: none; }
  .chapters__rail { display: none; }
}