/* ===========================================================================
   Advocacy v2 — Resources section (hub, press releases, articles, RSVP).
   Builds on css/base.css (tokens + .v2-* components). No dark backgrounds,
   no cards with shadows — hairlines, whitespace and type do the work.
   =========================================================================== */

/* ---------- Shared: labels that read lowercase, like the design ---------- */
.r-lower { text-transform: lowercase; }

/* ---------- Page title block (hub + subpages) ---------- */
.r-title {
    position: relative; z-index: 1;
    padding: 14vh var(--gutter) 12vh;
    display: flex; flex-direction: column; gap: 2.2em;
}
.r-title .v2-h1 { max-width: 15em; }
.r-title--long .v2-h1 { font-size: clamp(38px, 4.6vw, 80px); line-height: 1.04; max-width: 17em; }
.r-title .v2-lede { max-width: 34em; }
.r-meta {
    font-size: clamp(12px, 1vw, 15px);
    font-weight: 500;
    letter-spacing: .22em;
    color: var(--muted);
    text-transform: lowercase;
}
.r-back {
    align-self: flex-start;
    margin-left: -.4em;
    padding: .4em;
    font-size: clamp(12px, 1vw, 15px);
    letter-spacing: .22em;
    color: var(--muted);
    text-transform: lowercase;
    transition: color 250ms ease;
}
.r-back:hover { color: var(--ink); }

/* ---------- Hub: section headers ---------- */
.r-section {
    position: relative; z-index: 1;
    padding: 0 var(--gutter);
    display: flex; flex-direction: column; gap: 6vh;
}
.r-section + .r-section { padding-top: 22vh; }
.r-section-head {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: 3em 6vw; align-items: end;
}

/* ---------- Hub: announcements & interviews ("the record") ---------- */
.r-record { display: flex; flex-direction: column; border-bottom: 1px solid var(--rule); }
.r-row {
    display: grid;
    grid-template-columns: minmax(170px, 22%) minmax(0, 1fr);
    gap: 1.4em 6vw;
    padding: 2.6em 0 2.8em;
    border-top: 1px solid var(--rule);
    color: inherit;
}
.r-row:hover { color: inherit; }
.r-row-marker { display: flex; flex-direction: column; gap: .7em; }
.r-sec {
    display: flex; align-items: baseline; gap: .45em;
    font-size: clamp(26px, 2.2vw, 36px);
    font-style: italic; line-height: 1;
    color: var(--accent);
}
.r-sec .num {
    font-size: clamp(12px, 1vw, 15px);
    font-style: normal; letter-spacing: .22em;
    color: var(--muted);
}
.r-row-body { display: flex; flex-direction: column; gap: .9em; }
.r-row-title {
    margin: 0; max-width: 22em;
    font-size: clamp(26px, 2.4vw, 40px);
    font-weight:400; line-height: 1.12; letter-spacing: -.005em;
    color: var(--ink);
    transition: color 250ms ease;
}
.r-row-title em { font-style: italic; color: var(--accent); }
.r-row-desc {
    margin: 0; max-width: 34em;
    font-size: clamp(16px, 1.2vw, 20px); line-height: 1.6;
    color: var(--body); text-wrap: pretty;
}
.r-read {
    margin-top: .4em;
    font-size: clamp(12px, 1vw, 15px);
    letter-spacing: .22em;
    color: var(--muted);
    text-transform: lowercase;
    transition: color 250ms ease;
}
.r-row:hover .r-read, .r-row:focus-visible .r-read { color: var(--ink); }
.r-row:hover .r-row-title { color: var(--accent); }
.r-row:hover .r-row-title em { color: var(--ink); }

/* ---------- Hub: events docket ---------- */
.r-docket { display: flex; flex-direction: column; border-bottom: 1px solid var(--rule); }
.r-docket-head, .r-event {
    display: grid;
    grid-template-columns: minmax(150px, 18%) minmax(0, 1fr) minmax(150px, auto);
    gap: 1.2em 5vw;
}
.r-docket-head { padding-bottom: 1.2em; }
.r-docket-head span:last-child { text-align: right; }
.r-event { padding: 2.4em 0 2.6em; border-top: 1px solid var(--rule); align-items: start; }
.r-when { display: flex; flex-direction: column; gap: .5em; }
.r-date {
    font-size: clamp(30px, 2.6vw, 44px);
    font-weight:400; font-style: italic; line-height: 1;
    color: var(--ink); white-space: nowrap;
}
.r-entry { display: flex; flex-direction: column; gap: .8em; }
.r-no {
    font-size: clamp(11px, .95vw, 14px);
    font-weight: 500; letter-spacing: .3em;
    color: var(--muted); text-transform: lowercase;
}
.r-no .tag { color: var(--accent); }
.r-no .tag::before { content: '· '; color: var(--muted); }
.r-event-title {
    margin: 0; max-width: 24em;
    font-size: clamp(24px, 2.1vw, 34px);
    font-weight:400; line-height: 1.15;
    color: var(--ink);
}
.r-event-title em { font-style: italic; color: var(--accent); }
.r-event-desc {
    margin: 0; max-width: 34em;
    font-size: clamp(16px, 1.2vw, 20px); line-height: 1.6;
    color: var(--body); text-wrap: pretty;
}
.r-event-desc .venue { display: block; margin-top: .3em; font-style: italic; color: var(--ink); }
.r-action { display: flex; justify-content: flex-end; padding-top: .2em; }
.r-status {
    padding: .6em 0;
    font-size: clamp(11px, .95vw, 14px);
    letter-spacing: .3em;
    color: var(--muted); text-transform: lowercase;
}

/* ---------- Hub: newsletter ---------- */
.r-newsletter {
    position: relative; z-index: 1;
    padding: 26vh var(--gutter) 20vh;
    display: flex; flex-direction: column; align-items: center; gap: 2.2em;
    text-align: center;
}
.r-newsletter .v2-label { padding-left: .3em; text-transform: lowercase; }
.r-newsletter .v2-lede { max-width: 28em; text-wrap: balance; }
.r-subscribe {
    display: flex; align-items: flex-end; gap: 1.6em 2.4em;
    width: 100%; max-width: 38em; margin-top: 1em;
}
.r-subscribe input { flex: 1 1 auto; }

/* ---------- Form fields (newsletter + RSVP) ---------- */
.r-input {
    width: 100%; min-width: 0;
    padding: .5em 0 .45em;
    border: 0; border-bottom: 1px solid rgba(74, 12, 18, .28);
    border-radius: 0;
    background: transparent;
    font-family: var(--serif);
    font-size: clamp(18px, 1.4vw, 23px);
    color: var(--ink);
    outline: none;
    transition: border-color 250ms ease;
}
.r-input::placeholder { color: #b39ea2; font-style: italic; }
.r-input:focus { border-bottom-color: var(--accent); }

/* ---------- Long-form reading layout (subpages) ---------- */
.r-doc {
    position: relative; z-index: 1;
    padding: 0 var(--gutter) 22vh;
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 8vh 6vw;
}
.r-aside { flex: 1 1 220px; max-width: 320px; }
.r-aside-inner {
    position: sticky; top: 10vh;
    display: flex; flex-direction: column; gap: 1.2em;
    padding-top: 1.9em;
    border-top: 1px solid var(--rule);
}
.r-aside .v2-label { text-transform: lowercase; }
.r-aside .r-meta { line-height: 1.7; }
.r-aside-val { font-size: clamp(18px, 1.35vw, 22px); font-style: italic; line-height: 1.35; color: var(--ink); }
.r-toc { display: flex; flex-direction: column; margin-top: 1.4em; }
.r-toc .v2-label { margin-bottom: .6em; }
.r-toc-link {
    display: flex; align-items: baseline; gap: .75em;
    padding: .38em 0;
    font-size: clamp(15px, 1.1vw, 18px); line-height: 1.3;
    color: var(--muted);
    transition: color 250ms ease;
}
.r-toc-link .n { flex: none; min-width: 1.9em; font-style: italic; transition: color 250ms ease; }
.r-toc-link:hover { color: var(--ink); }
.r-toc-link:hover .n { color: var(--accent); }
.r-part[id] { scroll-margin-top: 8vh; }
@media (max-width: 760px) {
    .r-aside { max-width: none; }
    .r-aside-inner { position: static; }
}

.r-article {
    flex: 999 1 520px; min-width: 0;
    display: flex; flex-direction: column; gap: clamp(64px, 11vh, 120px);
    font-size: clamp(17px, 1.3vw, 21px); line-height: 1.66;
    color: var(--body);
}
.r-part {
    display: flex; flex-direction: column; gap: 1.15em;
    padding-top: 1.9em;
    border-top: 1px solid var(--rule);
}
.r-article p { margin: 0; max-width: 34em; text-wrap: pretty; }
.r-article strong { font-weight: 500; color: var(--ink); }
.r-article a:not(.v2-pill):not(.r-back) {
    color: var(--ink);
    text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: .2em; text-decoration-color: rgba(160, 21, 43, .45);
    transition: color 250ms ease;
}
.r-article a:not(.v2-pill):not(.r-back):hover { color: var(--accent); }
.r-article h2 {
    margin: 0;
    display: flex; align-items: baseline; gap: .5em;
    font-size: clamp(28px, 2.4vw, 40px);
    font-weight:400; line-height: 1.12; letter-spacing: -.005em;
    color: var(--ink);
}
.r-article h2 .n { flex: none; font-style: italic; color: var(--accent); }
.r-article h3 {
    margin: .9em 0 -.35em;
    font-size: clamp(20px, 1.55vw, 26px);
    font-weight:500; font-style: italic; line-height: 1.2;
    color: var(--ink);
}

/* Lists: italic roman numerals, as in the privacy policy */
.r-list {
    margin: .2em 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: .6em;
    max-width: 34em;
    counter-reset: r-item;
}
.r-list li { display: flex; align-items: baseline; gap: .9em; counter-increment: r-item; text-wrap: pretty; }
.r-list li::before {
    content: counter(r-item, lower-roman) '.';
    flex: none; min-width: 1.5em;
    font-style: italic; color: var(--accent);
}

/* Pull quotes: large, light, italic; hairline at left */
.r-quote {
    position: relative;
    margin: 1.1em 0;
    max-width: 30em;
    padding-left: 1.3em;
    border-left: 1px solid var(--rule);
    display: flex; flex-direction: column; gap: .9em;
}
.r-quote p {
    font-size: clamp(21px, 1.75vw, 29px);
    font-weight:400; font-style: italic;
    line-height: 1.38; letter-spacing: -.003em;
    color: var(--ink);
    text-wrap: pretty;
}
.r-quote cite, .r-quote .by {
    font-style: normal;
    font-size: clamp(14px, 1.05vw, 17px);
    line-height: 1.5;
    letter-spacing: .06em;
    color: var(--muted);
}
.r-quote .by a { color: var(--muted); }
.r-quote .by a:hover { color: var(--accent); }
/* Variant with the pale oversized quotation mark (About "mission") —
   for quotes whose text carries no quotation marks of its own */
.r-quote--mark { border-left: 0; padding-left: 0; }
.r-quote--mark::before {
    content: '\201C';
    position: absolute; left: -.5em; top: -.28em;
    font-size: clamp(40px, 3.3vw, 56px);
    font-style: italic; line-height: 1;
    color: var(--quote-mark);
    pointer-events: none;
}

.r-rule { width: 100%; max-width: 34em; height: 1px; margin: .8em 0; border: 0; background: var(--rule); }
.r-article p.r-note { font-size: .86em; line-height: 1.6; }
.r-article p.r-note--muted { color: var(--muted); }

/* ---------- Closing call-to-action (subpages) ---------- */
.r-close {
    position: relative; z-index: 1;
    padding: 0 var(--gutter) 18vh;
    display: flex; flex-direction: column; align-items: center; gap: 2.2em;
    text-align: center;
}
.r-close .v2-break { margin-bottom: 10vh; }

/* ---------- RSVP pages ---------- */
.r-details { display: flex; flex-direction: column; }
.r-detail { display: flex; flex-direction: column; gap: .35em; padding: 1.1em 0; border-bottom: 1px solid var(--rule); }
.r-detail:first-child { padding-top: 0; }
.r-agenda { display: flex; flex-direction: column; max-width: 34em; }
.r-agenda-row {
    display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 1em;
    padding: .7em 0; border-bottom: 1px solid var(--rule);
}
.r-agenda-row:first-child { border-top: 1px solid var(--rule); }
.r-agenda-time { font-style: italic; color: var(--accent); white-space: nowrap; }
.r-agenda-desc { color: var(--ink); }

.r-form { display: flex; flex-direction: column; gap: 1.8em; max-width: 30em; margin-top: .4em; }
.r-field { display: flex; flex-direction: column; gap: .2em; }
.r-field label {
    font-size: clamp(11px, .95vw, 14px);
    font-weight: 500; letter-spacing: .3em;
    color: var(--muted); text-transform: lowercase;
}
.r-form .v2-pill { align-self: flex-start; margin-top: .6em; }
.r-form .v2-pill:disabled { opacity: .55; cursor: default; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    .r-title { padding: 10vh var(--gutter) 9vh; gap: 1.8em; }
    .r-row { grid-template-columns: minmax(0, 1fr); gap: 1.1em; padding: 2.2em 0 2.4em; }
    .r-row-marker { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1em; }
    .r-docket-head { display: none; }
    .r-event { grid-template-columns: minmax(0, 1fr); gap: 1em; }
    .r-when { flex-direction: row; align-items: baseline; gap: .8em; }
    .r-action { justify-content: flex-start; }
    .r-subscribe { flex-direction: column; align-items: stretch; }
    .r-subscribe .v2-pill { align-self: center; }
    .r-section + .r-section { padding-top: 16vh; }
    .r-newsletter { padding-top: 18vh; }
    .v2-footer { flex-wrap: wrap; gap: .4em 1em; }
    .v2-footer a { font-size: 11px; }
    .r-quote--mark { padding-left: .9em; }
    .r-quote--mark::before { left: -.15em; }
}
@media (max-width: 420px) {
    .v2-footer nav { gap: .2em; }
}