/* ============================================================
   Resources + Newsroom — board / list (V3 system, rnd-row look)
   Quiet, tabular, generous rows. Title is the link. No source,
   no author, no views. One muted number color (--ink-3, AA-safe).
   ============================================================ */

/* visually-hidden (a11y) — CSP-clean, no inline styles. Used for the eyebrow
   separator so screen readers / text extraction read "Resources, 17 items"
   instead of the concatenated "Resources17 items". */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* --- Prominent segmented tab bar [ RESOURCES | NEWSROOM ] --- */
.board-tabs{display:inline-flex;gap:0;margin-top:30px;border:1px solid var(--ink);background:var(--paper);padding:5px;border-radius:2px;}
.board-tabs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 26px;font-family:var(--ff-m);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border-radius:1px;transition:background .15s,color .15s;}
.board-tabs a:hover{color:var(--ink);background:var(--bg-2);}
.board-tabs a[aria-current="page"]{background:var(--pine-d);color:#fff;}
.board-tabs a[aria-current="page"]:hover{background:var(--pine-dd);color:#fff;}

.board-shell{padding:clamp(56px,7vh,92px) 56px;background:var(--bg-2);}
.board-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:8px;}
.board-head .ml{display:inline-flex;align-items:center;font-size:clamp(16px,1.8vw,21px);letter-spacing:.12em;color:var(--ink-2);}
.board-head .ml .dot{width:8px;height:8px;margin-right:11px;}
.board-head h2{font-family:var(--ff-d);font-weight:600;font-size:clamp(30px,3.4vw,50px);line-height:1.02;letter-spacing:-.022em;margin:10px 0 0;}
.board-head h2 em{font-style:italic;color:var(--green);font-weight:500;}
.board-head .board-count{font-family:var(--ff-m);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums;}

/* Shared row grid: No. | Title | Date — never overlaps at any width. */
.board-list{margin-top:26px;border-top:2px solid var(--ink);}
.board-row,.board-head-row{display:grid;grid-template-columns:64px minmax(0,1fr) 132px;gap:24px;align-items:center;}
.board-head-row{padding:14px 8px;border-bottom:1px solid var(--rule);}
.board-head-row span{font-family:var(--ff-m);font-size:var(--fs-tag);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.board-head-row .col-date{text-align:right;}
.board-row{padding:20px 8px;border-bottom:1px solid var(--rule);background:none;transition:background .14s;}
.board-row:hover{background:var(--paper);}
.board-row .no{font-family:var(--ff-m);font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;align-self:start;padding-top:2px;}/* ink-3 = 4.5:1 AA on bg-2 (was ink-4 = 2.45:1, failed) */
.board-row h3{font-family:var(--ff-b);font-size:16.5px;font-weight:500;line-height:1.4;margin:0;}
.board-row h3 a{color:var(--ink);transition:color .14s;}
.board-row h3 a:hover{color:var(--green);}
.board-row h3 a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.board-row .row-tag{display:block;margin-top:7px;font-family:var(--ff-m);font-size:var(--fs-tag);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.board-row .row-tag.video{color:var(--accent-d);}
.board-row .meta{font-family:var(--ff-m);font-size:var(--fs-xs);color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right;align-self:start;padding-top:1px;}

@media(max-width:720px){
  .board-tabs{display:flex;width:100%;}
  .board-tabs a{flex:1;padding:0 14px;}
  .board-row,.board-head-row{grid-template-columns:48px minmax(0,1fr);gap:6px 16px;}
  .board-head-row .col-date{display:none;}
  .board-row .meta{grid-column:2;text-align:left;padding-top:6px;}
}
@media(max-width:560px){
  .board-shell{padding:48px 22px;}
}

/* --- Newsroom article pages --- */
.article-shell{padding:clamp(40px,6vh,72px) 56px clamp(56px,8vh,96px);background:var(--bg-2);}
.article{max-width:74ch;margin:0 auto;}
.article .crumbs{display:flex;align-items:center;gap:10px;font-family:var(--ff-m);font-size:var(--fs-tag);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 26px;}
.article .crumbs a{color:var(--ink-3);}
.article .crumbs a:hover{color:var(--green);}
.article .crumbs .sep{color:var(--ink-4);}
.article-head{border-bottom:2px solid var(--ink);padding-bottom:24px;margin-bottom:34px;}
.article-head .kicker{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-family:var(--ff-m);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 16px;}
.article-head .kicker .tag{color:var(--accent-d);font-weight:500;}
.article-head h1{font-family:var(--ff-d);font-weight:600;font-size:clamp(28px,3.1vw,44px);line-height:1.1;letter-spacing:-.022em;margin:0;color:var(--ink);text-wrap:balance;}
.article-head h1 em{font-style:italic;color:var(--green);font-weight:500;}
.article-body{font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink-2);}
.article-body p{margin:0 0 1.05em;max-width:68ch;}
.article-body h2,.article-body h3{font-family:var(--ff-d);font-weight:600;font-size:clamp(20px,1.9vw,26px);line-height:1.2;letter-spacing:-.012em;color:var(--ink);margin:1.6em 0 .5em;}
.article-body .lede{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--ink);margin-bottom:1.4em;}
.article-body .news-figure{margin:26px 0;max-width:none;}
.article-body .news-figure img{display:block;width:100%;height:auto;border:1px solid var(--rule);background:var(--paper);}
.article-body figure{margin:26px 0;}
.article-body figure img{display:block;width:100%;height:auto;border:1px solid var(--rule);background:var(--paper);}
.article-foot{margin-top:44px;border-top:1px solid var(--rule);padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.article-foot .back{display:inline-flex;align-items:center;gap:8px;min-height:44px;border:1px solid var(--ink);padding:0 18px;font-size:13px;font-weight:600;color:var(--ink);}
.article-foot .back:hover{background:var(--ink);color:#fff;}
.article-foot .full{display:inline-flex;align-items:center;gap:8px;min-height:44px;border:1px solid var(--rule-2);padding:0 16px;font-family:var(--ff-m);font-size:12px;font-weight:600;color:var(--green);background:var(--paper);}
.article-foot .full:hover{border-color:var(--green);background:var(--bg-2);}
.article .meta-line{font-family:var(--ff-m);font-size:var(--fs-xs);color:var(--ink-3);}
@media(max-width:560px){
  .article-shell{padding:40px 22px 64px;}
  .article-foot{flex-direction:column;align-items:stretch;}
  .article-foot .back,.article-foot .full{justify-content:center;}
}

/* ============================================================
   Resource DETAIL pages — reuses .article-shell / .article /
   .crumbs / .article-head / .article-foot from above, plus the
   download block, lazy PDF preview and YouTube embed below.
   The generator (tools/qa/build-resource-pages.mjs) emits these.
   ============================================================ */
.res-desc{font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink-2);margin:0 0 8px;max-width:68ch;}

/* Download block: one prominent button per file, with type + size. */
.dl-block{margin-top:34px;border-top:1px solid var(--rule);padding-top:30px;}
.dl-block .dl-h{font-family:var(--ff-m);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 18px;}
.dl-list{display:grid;gap:12px;}
.dl-item{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--rule);background:var(--paper);padding:16px 18px;transition:border-color .15s,box-shadow .15s;}
.dl-item:hover{border-color:var(--green);box-shadow:0 14px 30px -24px rgba(22,20,18,.5);}
.dl-item .dl-meta{display:flex;align-items:center;gap:14px;min-width:0;}
.dl-item .dl-ext{flex-shrink:0;font-family:var(--ff-m);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--green);padding:6px 9px;border-radius:2px;line-height:1;}
.dl-item .dl-name{font-size:15.5px;font-weight:500;color:var(--ink);line-height:1.35;word-break:break-word;}
.dl-item .dl-size{font-family:var(--ff-m);font-size:var(--fs-xs);color:var(--ink-3);font-variant-numeric:tabular-nums;}
.dl-item .dl-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;min-height:44px;background:var(--pine-d);color:#fff;border:1px solid var(--pine-d);padding:0 20px;font-family:var(--ff-m);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:background .15s;}
.dl-item .dl-btn:hover{background:var(--pine-dd);}
.dl-item .dl-btn .arr{font-size:14px;}

/* Lazy inline PDF preview (single-file PDF resources). */
.pdf-preview{margin-top:28px;}
.pdf-preview .pdf-cap{font-family:var(--ff-m);font-size:var(--fs-tag);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;}
.pdf-preview iframe{display:block;width:100%;height:min(70vh,720px);border:1px solid var(--rule);background:var(--paper);}

/* YouTube embed (video resources). */
.yt-embed{margin-top:30px;}
.yt-frame{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--rule);background:var(--pine-dd);}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.yt-watch{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:16px;border:1px solid var(--accent-d);padding:0 18px;font-family:var(--ff-m);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-d);background:var(--paper);transition:background .15s,color .15s;}
.yt-watch:hover{background:var(--accent-d);color:#fff;}

@media(max-width:560px){
  .dl-item{align-items:stretch;}
  .dl-item .dl-btn{justify-content:center;flex:1;}
}

/* ============================================================
   Resources index CTA — orange band (resources-specific, NOT the
   shared .cta-final). Two balanced columns inside a constrained
   container so the band never reads as a sparse empty orange strip:
   left = eyebrow + inviting heading + lead line; right = actions.
   Depth: radial glow + inner gold hairline frame, like the masthead.
   ============================================================ */
.res-cta{position:relative;background:var(--accent);color:#fff;padding:clamp(48px,6.5vh,82px) 56px;overflow:hidden;}
.res-cta::before{content:'';position:absolute;left:-6%;top:-44%;width:46%;height:150%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);pointer-events:none;z-index:0;}
.res-cta::after{content:'';position:absolute;inset:16px;border:1px solid rgba(255,255,255,.16);pointer-events:none;z-index:0;}
.res-cta-in{position:relative;z-index:1;max-width:1020px;margin:0 auto;display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(32px,4vw,56px);}
.res-cta .rc-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-m);font-size:var(--fs-tag);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);margin:0 0 14px;}
.res-cta .rc-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#fff;flex-shrink:0;}
.res-cta h2{font-family:var(--ff-d);font-weight:600;font-size:clamp(28px,3vw,44px);line-height:1.06;letter-spacing:-.024em;margin:0;max-width:18ch;text-wrap:balance;}
.res-cta h2 em{font-style:italic;font-weight:600;color:var(--em-orange);}
.res-cta .rc-lead{font-size:clamp(15px,1.25vw,17.5px);line-height:1.6;color:rgba(255,255,255,.9);margin:16px 0 0;max-width:46ch;}
.res-cta .rc-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:230px;}
.res-cta .rc-actions .btn{justify-content:center;}
.res-cta .rc-actions .btn-w{box-shadow:0 16px 34px -18px rgba(9,26,18,.6);}
.res-cta .rc-actions .btn-line2{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.res-cta .rc-actions .btn-line2:hover{background:#fff;color:var(--accent);}
@media(max-width:880px){
  .res-cta-in{grid-template-columns:1fr;gap:30px;}
  .res-cta .rc-actions{min-width:0;}
}
@media(max-width:560px){
  .res-cta{padding:44px 22px;}
  .res-cta::after{inset:10px;}
}