/* ===========================================================================
   briefings.css · the Insights index and every single briefing (2026-09-04)
   Dark ground in the ink family, the display face for every title, mono
   labels, rounded cards. One sheet serves both editions: logical properties
   throughout, arrows flip under [dir="rtl"].
   =========================================================================== */

main.p-briefing, main.p-briefings{
  --bg:var(--ink);
  --card:var(--ink-2);
  --card-line:var(--ink-3);
  --fg:var(--paper);
  --fg-2:color-mix(in srgb, var(--paper) 84%, transparent);
  --fg-3:color-mix(in srgb, var(--paper) 56%, transparent);
  --pad:var(--gutter);
  display:block; background:var(--bg); color:var(--fg); overflow-x:clip;
}
.p-briefing p, .p-briefings p{margin:0}
.p-briefing a, .p-briefings a{color:inherit}
.p-briefing .mono, .p-briefings .mono{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase}
[dir="rtl"] .p-briefing .mono, [dir="rtl"] .p-briefings .mono{letter-spacing:0}
.bf-arr{display:inline-block}
[dir="rtl"] .bf-arr{transform:scaleX(-1)}
.bf-back{display:inline-flex; gap:.6rem; align-items:center; color:var(--fg-3); text-decoration:none; transition:color .3s}
.bf-back:hover{color:var(--fg)}

/* ---- shared cards ------------------------------------------------------ */
.bf-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem}
.bf-card{
  display:flex; flex-direction:column; gap:.9rem; min-width:0;
  padding:1.6rem 1.5rem 1.5rem; border:1px solid var(--card-line); border-radius:1rem; background:var(--card);
  text-decoration:none; transition:border-color .35s var(--e-out), transform .45s var(--e-out), background .35s;
}
.bf-card:hover{border-color:color-mix(in srgb, var(--paper) 32%, transparent); transform:translateY(-3px); background:var(--ink-3)}
.bf-card:active{border-color:color-mix(in srgb, var(--paper) 32%, transparent); transform:translateY(-1px) scale(.995); background:var(--ink-3); transition-duration:.12s}
.bf-card:active .bf-card-r{color:var(--fg)}
.bf-card-d{color:var(--fg-3)}
.bf-card-t{font-family:var(--display); font-weight:400; font-size:clamp(1.25rem, 1.55vw, 1.5rem); line-height:1.12; letter-spacing:.01em; color:var(--fg); text-wrap:balance}
[dir="rtl"] .bf-card-t{line-height:1.5; letter-spacing:0}
.bf-card-x{color:var(--fg-3); font-size:.95rem; line-height:1.6; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.bf-card-r{margin-top:auto; padding-top:.6rem; color:var(--fg-3); display:inline-flex; gap:.5rem; align-items:center; transition:color .3s}
.bf-card:hover .bf-card-r{color:var(--fg)}
.bf-card-r .bf-arr{transition:transform .35s var(--e-out)}
.bf-card:hover .bf-card-r .bf-arr{transform:translateX(4px)}
[dir="rtl"] .bf-card:hover .bf-card-r .bf-arr{transform:scaleX(-1) translateX(4px)}
.bf-grid .rv:nth-child(3n+2){transition-delay:.08s} .bf-grid .rv:nth-child(3n+3){transition-delay:.16s}

/* ---- index -------------------------------------------------------------- */
.bfi{padding:clamp(6.5rem, 14vh, 9.5rem) var(--pad) clamp(4rem, 9vh, 7rem); max-width:90rem; margin-inline:auto}
.bfi-k{margin-top:2.6rem; color:var(--fg-3); animation:bf-rise .8s .05s var(--e-out) both}
.bfi-title{
  font-family:var(--display); font-weight:400; font-size:clamp(3.4rem, 10vw, 8.6rem); line-height:.95; letter-spacing:.01em;
  margin:1rem 0 1.2rem; animation:bf-rise .9s .1s var(--e-out) both;
}
[dir="rtl"] .bfi-title{line-height:1.25; letter-spacing:0}
.bfi-lede{color:var(--fg-2); font-size:clamp(1rem, 1.3vw, 1.2rem); max-width:52ch; animation:bf-rise .9s .18s var(--e-out) both}
.bfi-grid{margin-top:clamp(2.5rem, 5vh, 4rem)}
.bfi-grid .bf-card{min-height:22rem}
@keyframes bf-rise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}

/* ---- single briefing --------------------------------------------------- */
.bf{padding:clamp(6.5rem, 14vh, 9.5rem) var(--pad) clamp(4rem, 9vh, 7rem); max-width:90rem; margin-inline:auto}
.bf-col{max-width:48rem; margin-inline:auto}
.bf-head{max-width:48rem; margin-inline:auto}
.bf-head > *{animation:bf-rise .8s var(--e-out) both}
.bf-head > :nth-child(2){animation-delay:.06s} .bf-head > :nth-child(3){animation-delay:.12s} .bf-head > :nth-child(4){animation-delay:.2s}
.bf-date{margin-top:2.4rem; color:var(--fg-3); display:flex; flex-wrap:wrap; gap:.5rem 1.4rem}
.bf-title{
  font-family:var(--display); font-weight:400; font-size:clamp(2.3rem, 5.4vw, 4.8rem); line-height:1.02; letter-spacing:.01em;
  margin:1rem 0 2.2rem; text-wrap:balance;
}
[dir="rtl"] .bf-title{line-height:1.35; letter-spacing:0}
.bf-summary{border:1px solid var(--card-line); background:var(--card); border-radius:1rem; padding:1.5rem 1.6rem 1.6rem}
.bf-summary-l{display:block; color:var(--fg-3); margin-bottom:.8rem}
.bf-summary p{font-size:clamp(1.05rem, 1.3vw, 1.2rem); line-height:1.65; color:var(--fg)}
.bf-summary .bf-pillar{margin-top:.9rem; color:var(--fg-3); font-size:.95rem}
.bf-summary .bf-pillar a{text-decoration-color:var(--fg-3); text-underline-offset:3px}

.bf-body{max-width:48rem; margin:clamp(2.5rem, 6vh, 4rem) auto 0}
.bf-sec{margin-top:clamp(2.2rem, 5vh, 3.4rem)}
.bf-sec:first-child{margin-top:0}
.bf-h2{
  font-family:var(--display); font-weight:400; font-size:clamp(1.45rem, 2.5vw, 2.15rem); line-height:1.12; letter-spacing:.01em;
  margin:0 0 1.1rem; text-wrap:balance;
}
[dir="rtl"] .bf-h2{line-height:1.5; letter-spacing:0}
.bf-sec p, .bf-sec li{font-size:clamp(1rem, 1.2vw, 1.12rem); line-height:1.72; color:var(--fg-2)}
.bf-sec p + p, .bf-sec p + ul, .bf-sec p + ol, .bf-sec ul + p, .bf-sec ol + p, .bf-sec p + table, .bf-sec table + p{margin-top:1.1rem}
.bf-sec ul, .bf-sec ol{padding-inline-start:1.3rem; margin:0}
.bf-sec li + li{margin-top:.45rem}
.bf-sec li::marker{color:var(--fg-3)}
/* Older article data contains decorative arrow markers from article.css.
   Briefings use native list bullets; do not render both marker systems. */
.bf-sec li > svg.ar-mk{display:none}
.bf-sec strong{color:var(--fg); font-weight:600}
.bf-sec a{text-decoration-color:var(--fg-3); text-underline-offset:3px; transition:text-decoration-color .3s}
.bf-sec a:hover{text-decoration-color:var(--fg)}
.bf-sec h3{font-family:var(--sans); font-weight:600; font-size:1.05rem; margin:1.6rem 0 .5rem; color:var(--fg)}
.bf-sec table{width:100%; border-collapse:collapse; font-size:.95rem; line-height:1.5; margin-top:1.1rem}
.bf-sec th{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; font-weight:400; color:var(--fg-3); text-align:start; padding:.5rem .6rem .5rem 0; border-bottom:1px solid var(--card-line)}
[dir="rtl"] .bf-sec th{letter-spacing:0; padding:.5rem 0 .5rem .6rem}
.bf-sec td{padding:.6rem .6rem .6rem 0; border-bottom:1px solid var(--card-line); vertical-align:top; color:var(--fg-2)}
[dir="rtl"] .bf-sec td{padding:.6rem 0 .6rem .6rem}
.bf-sec figure{margin:1.2rem 0}
.bf-sec figcaption{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); margin-top:.5rem}
.bf-sec blockquote{margin:1.2rem 0; padding-inline-start:1rem; border-inline-start:2px solid var(--card-line); color:var(--fg)}

.bf-faq{max-width:48rem; margin:clamp(2.6rem, 6vh, 4rem) auto 0}
.bf-qa{margin:0}
.bf-q{padding:1.2rem 0; border-top:1px solid var(--card-line)}
.bf-q:last-child{border-bottom:1px solid var(--card-line)}
.bf-q dt{font-weight:600; font-size:1.05rem; line-height:1.4; color:var(--fg)}
.bf-q dd{margin:.55rem 0 0; font-size:1rem; line-height:1.7; color:var(--fg-2)}

.bf-links{max-width:48rem; margin:clamp(2rem, 5vh, 3rem) auto 0; display:flex; flex-wrap:wrap; gap:.8rem 2rem}
.bf-links a{display:inline-flex; gap:.5rem; align-items:center; color:var(--fg-3); text-decoration:none; transition:color .3s}
.bf-links a:hover{color:var(--fg)}
.bf-links .bf-arr{transition:transform .35s var(--e-out)}
.bf-links a:hover .bf-arr{transform:translateX(4px)}
[dir="rtl"] .bf-links a:hover .bf-arr{transform:scaleX(-1) translateX(4px)}

.bf-more{margin-top:clamp(3.5rem, 8vh, 6rem)}
.bf-more-l{color:var(--fg-3); margin-bottom:1rem}
.bf-more .bf-card{min-height:16rem}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1023px){ .bf-grid{grid-template-columns:repeat(2, minmax(0,1fr))} .bf-grid .rv:nth-child(3n+2), .bf-grid .rv:nth-child(3n+3){transition-delay:0s} .bf-grid .rv:nth-child(2n){transition-delay:.08s} }
@media (max-width:639px){
  .bf-grid{grid-template-columns:1fr} .bf-grid .rv{transition-delay:0s !important}
  .bfi-grid .bf-card, .bf-more .bf-card{min-height:0}
  .bf-card{padding:1.3rem 1.2rem 1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .bfi-k, .bfi-title, .bfi-lede, .bf-head > *{animation:none}
  .bf-card, .bf-card-r .bf-arr, .bf-links .bf-arr{transition:none}
}

/* keep the page title clear of the header column nav, which runs to ~224px at desktop */
@media (min-width:1024px){ .bfi, .bf{padding-top:max(16rem, 30vh)} }