/* =====================================================================
   Rational Times — V12 additions to the public site (same paper, ink & burgundy theme).
   The career path, testimonials, events, podcasts, the new games, the jump bar and premium motion.
   Every movement stops for visitors whose device asks for less motion, and when the owner switches it off.
   ===================================================================== */

/* ---------- the career path: member → permanent member → a job in the newsroom ---------- */
.job12 { scroll-margin-top: 96px; margin: 46px 0; padding: 34px 34px 26px; background: var(--card); border: 1px solid var(--rule); border-top: 4px solid var(--burgundy); position: relative; }
.job12 h2 { font: 400 clamp(26px, 3.2vw, 38px)/1.12 var(--serif-display); margin: 10px 0 8px; letter-spacing: -.3px; }
.job12-lead { color: var(--ink-soft); max-width: 760px; margin: 0 0 22px; }
.job12-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: j12; position: relative; }
.job12-steps::before { content: ''; position: absolute; top: 25px; left: 16.6%; right: 16.6%; height: 2px; background: linear-gradient(90deg, var(--burgundy), var(--blue-2)); opacity: .55; }
.job12-steps li { position: relative; padding: 0 18px 6px; text-align: center; }
.job12-n { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--paper); border: 2px solid var(--burgundy); color: var(--burgundy); font: 400 24px/1 var(--serif-display); transition: transform .4s var(--ease), background .3s, color .3s; }
.job12-steps li b { display: block; font: 400 22px/1.2 var(--serif-display); margin: 12px 0 6px; }
.job12-steps li p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.job12-steps li:hover .job12-n { transform: translateY(-3px) scale(1.06); background: var(--burgundy); color: var(--on-dark); }
.job12-steps li.done .job12-n { background: var(--burgundy); color: var(--on-dark); }
.job12-steps li.here .job12-n { background: var(--burgundy); color: var(--on-dark); box-shadow: 0 0 0 6px rgba(125, 48, 57, .14); }
.job12-you { display: inline-block; margin-top: 8px; font: 700 10.5px/1 var(--sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--burgundy); }
.job12-fine { margin: 22px 0 0; padding-top: 14px; border-top: 1px dashed var(--rule); font: 12.5px/1.6 var(--sans); color: var(--quiet); display: flex; gap: 8px; align-items: flex-start; }
.job12-fine .ico { flex-shrink: 0; margin-top: 2px; }
@media (max-width: 760px) {
  .job12 { padding: 24px 18px 18px; }
  .job12-steps { grid-template-columns: 1fr; gap: 18px; }
  .job12-steps::before { top: 25px; bottom: 25px; left: 24px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--burgundy), var(--blue-2)); }
  .job12-steps li { text-align: left; padding: 0 0 0 66px; min-height: 50px; }
  .job12-n { position: absolute; left: 0; top: 0; }
  .job12-steps li b { margin-top: 2px; }
}

/* ---------- featured correspondent ---------- */
.badge11.feat12 { background: var(--burgundy); color: var(--on-dark); border-color: var(--burgundy); }

/* ---------- testimonials ---------- */
.tst12-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tst12-grid.wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tst12 { margin: 0; background: var(--card); border: 1px solid var(--rule); padding: 24px 24px 18px; display: flex; flex-direction: column; gap: 16px; position: relative; transition: transform .35s var(--ease), box-shadow .35s; }
.tst12::before { content: '“'; position: absolute; top: -6px; left: 16px; font: 400 72px/1 var(--serif-display); color: var(--burgundy); opacity: .25; }
.tst12:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tst12 blockquote { margin: 0; font: 400 17px/1.6 var(--serif-body); color: var(--ink); flex: 1; }
.tst12 figcaption { display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--rule-soft); padding-top: 12px; }
.tst12 figcaption img, .tst12-ini { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tst12-ini { display: inline-grid; place-items: center; background: var(--blue); font: 400 20px/1 var(--serif-display); }
.tst12 figcaption b { display: block; font-size: 14px; }
.tst12 figcaption small { color: var(--quiet); font-size: 12.5px; }
@media (max-width: 900px) { .tst12-grid { grid-template-columns: 1fr; } }

/* ---------- events ---------- */
.ev12-empty { text-align: center; padding: 46px 24px; color: var(--quiet); }
.ev12-empty .ico { color: var(--burgundy); }
.ev12-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.ev12-card { display: flex; gap: 18px; background: var(--card); border: 1px solid var(--rule); padding: 18px; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.ev12-card:hover { transform: translateY(-3px); border-color: var(--burgundy); box-shadow: var(--shadow); }
.ev12-card.is-cancelled { opacity: .62; }
.ev12-date { flex-shrink: 0; width: 70px; text-align: center; border: 1px solid var(--ink); padding: 8px 4px; font: 600 11px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .6px; align-self: flex-start; }
.ev12-date b { display: block; font: 400 34px/1 var(--serif-display); letter-spacing: 0; margin-bottom: 2px; color: var(--burgundy); }
.ev12-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ev12-body b { font: 400 21px/1.2 var(--serif-display); }
.ev12-body small { color: var(--quiet); font-size: 12.5px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.ev12-sum { color: var(--ink-soft); font-size: 14px; }
.ev12-past { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.ev12-past li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); flex-wrap: wrap; }
.ev12-past a { font: 400 18px/1.3 var(--serif-display); }
.ev12-past small { color: var(--quiet); }
.ev12-cover { margin: 0 0 20px; }
.ev12-cover img { width: 100%; height: auto; display: block; }
.ev12-cover figcaption { font-size: 12px; color: var(--quiet); margin-top: 6px; }
.ev12-facts p { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; }

/* ---------- podcasts ---------- */
.pod12-shows { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.pod12-card { display: flex; flex-direction: column; gap: 8px; }
.pod12-card img, .pod12-ph { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--ink); color: var(--paper); display: grid; place-items: center; transition: transform .4s var(--ease), box-shadow .4s; }
.pod12-card:hover img, .pod12-card:hover .pod12-ph { transform: translateY(-4px); box-shadow: var(--shadow); }
.pod12-card b { font: 400 21px/1.2 var(--serif-display); }
.pod12-card span { color: var(--ink-soft); font-size: 14px; }
.pod12-show { display: flex; gap: 24px; align-items: flex-start; margin-top: 14px; }
.pod12-show img { width: 180px; height: 180px; object-fit: cover; flex-shrink: 0; box-shadow: var(--shadow); }
.pod12-list { border-top: 1px solid var(--rule); }
.pod12-ep { display: grid; grid-template-columns: 1fr minmax(240px, 340px); gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rule-soft); }
.pod12-ep h2 { font: 400 22px/1.25 var(--serif-display); margin: 4px 0; }
.pod12-ep p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.pod12-audio { width: 100%; }
.pod12-embed { position: relative; aspect-ratio: 16/9; background: #000; margin-bottom: 14px; }
.pod12-embed.sp { aspect-ratio: auto; height: 232px; background: transparent; }
.pod12-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pod12-sum { font: 400 19px/1.5 var(--serif-body); }
@media (max-width: 760px) { .pod12-ep { grid-template-columns: 1fr; } .pod12-show { flex-direction: column; } .pod12-show img { width: 140px; height: 140px; } }

/* ---------- games: flags and order the dates ---------- */
.gq-img { display: block; width: 220px; max-width: 70%; height: auto; margin: 10px 0 14px; border: 1px solid var(--rule); box-shadow: 4px 4px 0 var(--blue-2); }
.otd12-list { list-style: none; counter-reset: otd; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
.otd12-list li { counter-increment: otd; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; background: var(--paper); border: 1px solid var(--rule); padding: 10px 12px; transition: transform .25s var(--ease), background .3s, border-color .3s; }
.otd12-list li::before { content: counter(otd); font: 400 22px/1 var(--serif-display); color: var(--burgundy); text-align: center; }
.otd12-list li.hint::before { content: ''; }
.otd12-list li span { font-size: 15px; line-height: 1.4; }
.otd12-list li em { display: block; font-style: normal; font-size: 12.5px; color: var(--quiet); margin-top: 3px; }
.otd12-list li em[hidden] { display: none; }
.otd12-list li .otd12-mv { display: flex; gap: 4px; }
.otd12-list li button { width: 32px; height: 32px; border: 1px solid var(--rule); background: var(--card); cursor: pointer; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.otd12-list li button:hover { border-color: var(--burgundy); color: var(--burgundy); }
.otd12-list li.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--paper)); }
.otd12-list li.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 7%, var(--paper)); }
.otd12-list.done button { visibility: hidden; }

/* ---------- the home page's jump bar ---------- */
.jump12 { position: sticky; z-index: 45; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); transform: translateY(-110%); opacity: 0; transition: transform .35s var(--ease), opacity .3s; }
.jump12.show { transform: none; opacity: 1; }
.jump12-in { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 14px; min-height: 40px; }
.jump12-k { font: 700 10.5px/1 var(--sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--burgundy); display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.jump12-row { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.jump12-row::-webkit-scrollbar { display: none; }
.jump12-row a { white-space: nowrap; padding: 6px 11px; font: 600 12.5px/1 var(--sans); border-radius: 20px; color: var(--ink-soft); transition: background .25s, color .25s; }
.jump12-row a:hover { color: var(--ink); background: var(--paper-2); }
.jump12-row a.on { background: var(--ink); color: var(--paper); }
@media (max-width: 760px) { .jump12-in { padding: 0 16px; } .jump12-k { display: none; } }

/* ---------- grievance reports ---------- */
.comp12-report table { width: 100%; border-collapse: collapse; margin: 14px 0; font: 14px/1.5 var(--sans); }
.comp12-report th, .comp12-report td { border-bottom: 1px solid var(--rule); padding: 9px 8px; text-align: left; }
.comp12-report th { background: var(--paper-2); }

/* =====================================================================
   Premium motion (classic and quiet: nothing bounces or spins)
   ===================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }

/* links inside articles and pages draw their underline */
.prose a:not(.btn), .art-body a:not(.btn) { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .35s var(--ease), color .2s; }
.prose a:not(.btn):hover, .art-body a:not(.btn):hover { background-size: 0 1px; background-position: 100% 100%; }

/* pictures fade in as they arrive */
html.anim12 img.v12-fade { opacity: 0; transition: opacity .6s var(--ease); }
html.anim12 img.v12-fade.in { opacity: 1; }

/* a slow sheen over placeholders while live blocks load */
.sk12 { position: relative; overflow: hidden; background: var(--paper-2); }
.sk12::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: sk12 1.4s infinite; }
@keyframes sk12 { to { transform: translateX(100%); } }

/* the press card and certificate previews tilt gently towards the pointer */
html.anim12 .v12-tilt { transition: transform .5s var(--ease); transform-style: preserve-3d; will-change: transform; }

/* the "back to top" button shows how far down the page you are */
.to-top .v12-ring { position: absolute; inset: -3px; pointer-events: none; }
.to-top .v12-ring circle { fill: none; stroke: var(--burgundy); stroke-width: 2.4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .15s linear; }

/* buttons answer the pointer */
html.anim12 .btn { transition: transform .2s var(--ease), box-shadow .25s, background .2s, color .2s, border-color .2s; }
html.anim12 .btn:active { transform: translateY(1px) scale(.985); }

/* numbers that count up already exist; headings in view rise in once */
html.anim12 .v12-rise { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.anim12 .v12-rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .sk12::after { animation: none; }
  html.anim12 img.v12-fade, html.anim12 .v12-rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  .job12-n, .tst12, .ev12-card, .pod12-card img, .jump12 { transition: none !important; }
}
@media print { .jump12, .to-top .v12-ring { display: none !important; } }

/* ---------- the new tools ---------- */
.v12-copy { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.v12-copy textarea { width: 100%; font: 14px/1.5 var(--sans); padding: 10px 12px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); resize: vertical; }
.v12-copy .btn { align-self: flex-start; }
.v12-qr { background: #fff; padding: 12px; border: 1px solid var(--rule); max-width: 300px; margin: 8px 0 12px; }
.v12-qr svg { display: block; width: 100%; height: auto; }

/* ---------- small pieces the V12 pages share with the member desk ---------- */
.chk { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 14px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.chk input { margin-top: 3px; accent-color: var(--burgundy); flex-shrink: 0; }
.notice { padding: 12px 16px; margin: 0 0 14px; border-left: 3px solid var(--ink); background: var(--paper-2); font-size: 14px; line-height: 1.55; }
.notice.ok { border-color: var(--ok); } .notice.bad { border-color: var(--bad); } .notice.info { border-color: var(--blue-2); }
.ev12-one aside .box + .box { margin-top: 16px; }
.ev12-one .form .field, .ev12 .form .field { margin-bottom: 12px; }