/* Resources page layer - extracted VERBATIM from the prototype's inline
   <style> block (handoff/site/Resources.html) by tools/port-page.py. Loads at the SAME
   cascade position the inline block held (after site-iie.css, before print.css). */

  main { position: relative; z-index: 1; }

  .page-hero { padding: var(--hero-y-top) 0 64px; position: relative; overflow: hidden; }
  #beam { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
  .beamfb { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 80% at 82% 40%, rgba(202,169,11,0.10), transparent 60%); }
  .page-hero .wrap { position: relative; z-index: 2; }
  .page-hero h1 { font-size: clamp(44px, 6.2vw, 88px); margin-top: 22px; max-width: 15ch; }
  .page-hero .lead { margin-top: 26px; max-width: 56ch; font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-lead); line-height: 1.55; color: var(--text-secondary); } /* lead floor */

  .res { padding: 26px 0 150px; position: relative; z-index: 1; }

  /* featured lead */
  .res-feat { margin-bottom: 8px; }
  .res-feat .panel-in { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; padding: 38px 40px; align-items: center; }
  .res-feat .ft-meta { display: flex; gap: 16px; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 18px; } /* 11px micro floor */
  .res-feat .ft-meta .cat { color: var(--periwinkle); }
  .res-feat h2 { font-family: 'Rajdhani', sans-serif; font-weight: 600; text-transform: uppercase; font-size: clamp(28px, 3vw, 40px); line-height: 1.04; color: var(--text-primary); letter-spacing: 0; }
  .res-feat .dek { font-family: var(--font-ui); font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin-top: 18px; max-width: 52ch; }
  .res-feat .read { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--marigold); }
  .res-feat .glyph { display: flex; align-items: center; justify-content: center; }
  .res-feat .glyph svg { width: 100%; max-width: 240px; height: auto; overflow: visible; }

  /* index list */
  .res-list { margin-top: 40px; border-top: 1px solid var(--hair-strong); }
  .res-item { display: grid; grid-template-columns: 150px 1fr 40px; gap: 30px; align-items: start; padding: 30px 4px; border-bottom: 1px solid var(--hair); cursor: pointer; transition: background 160ms; text-decoration: none; }
  .res-item:hover { background: rgba(255,255,255,0.018); }
  .res-item .meta { display: flex; flex-direction: column; gap: 9px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); padding-top: 4px; } /* 11px micro floor */
  .res-item .meta .cat { color: var(--periwinkle); }
  .res-item .ti { font-family: 'Rajdhani', sans-serif; font-weight: 600; text-transform: uppercase; font-size: clamp(19px, 1.9vw, 25px); line-height: 1.08; color: var(--text-primary); letter-spacing: 0; transition: color 160ms; }
  .res-item:hover .ti { color: var(--marigold); }
  .res-item .dek { font-family: var(--font-ui); font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin-top: 11px; max-width: 64ch; }
  .res-item .arr { justify-self: end; align-self: center; color: var(--text-tertiary); font-size: 18px; transition: color 160ms, transform 200ms var(--ease-out-quint); }
  .res-item:hover .arr { color: var(--marigold); transform: translateX(5px); }

  .res-note { margin-top: 40px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); }

  @media (max-width: 760px) { .page-hero h1 { font-size: clamp(40px, 10.5vw, 44px); } }

  @media (max-width: 880px) {
    .res-feat .panel-in { grid-template-columns: 1fr; gap: 28px; }
    .res-feat .glyph { display: none; }
    .res-item { grid-template-columns: 120px 1fr; }
    .res-item .arr { display: none; }
  }
  /* phone: index rows stack to a single column — title above meta,
     the whole row stays one full-width tap target */
  @media (max-width: 560px) {
    .res-item { grid-template-columns: 1fr; gap: 12px; }
    .res-item .bd { order: -1; }
    .res-item .meta { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding-top: 0; }
  }

/* ============================================================
   POST-TRANSPLANT ADDITIONS (dev-scope — not part of the verbatim
   block above; keep appended, never interleave).
   D173 applied here too (owner, 2026-07-24): the hero lead ran
   through the beam core (pages.js draws it at 78vw; the 56ch cap
   stops protecting below ~640px). Same 66vw gutter as Contact.
   ============================================================ */
@media (max-width: 760px) {
  .page-hero .lead { max-width: 66vw; }
}

/* D213 — the featured card kept DESKTOP padding on a phone.
   The carried ≤880px rule above changes `grid-template-columns` and `gap` but not
   `padding`, so `.panel-in` stayed at `38px 40px` all the way down. Stacked on the
   20px `.wrap` gutter that base.css applies at this width, that is 60px of inset on
   each side of a 375px screen — 120px of a 375px viewport spent on padding, leaving
   255px for a headline set in uppercase Rajdhani.
   This was invisible until today: `/resources` was parked behind `noindex` with
   placeholder cards from launch until the first real briefing landed, so the
   featured branch had never been looked at on a phone. */
@media (max-width: 620px) {
  .res-feat .panel-in { padding: 26px 20px; gap: 22px; }
  /* The carried desktop cap is 52ch, which at this width is wider than the column
     and therefore does nothing. Dropping it lets the dek use the full measure. */
  .res-feat .dek { max-width: none; }
}