/* ============================================================================
   Deck framework — component kit
   Structural pieces every talk can use: typography scale, bullets, two-column
   inner, annotation + lead line, cards + grids, pipeline, source line + citation
   link, tap-to-reveal, stack layout,
   Q&A donate (qr-card + mission), definition / quote. Semantic tokens only.
   Every :hover here has an .is-hot twin (the presenter's sticky highlight).
   ============================================================================ */

/* ── Typography ── */
.display { font-family: var(--font-display); font-size: clamp(44px, 7.6vw, 100px); font-weight: 600; letter-spacing: -1.4px; line-height: 1.0; text-wrap: balance; color: var(--text-strong); }
h2 { font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 56px); font-weight: 600; letter-spacing: -.5px; line-height: 1.08; text-wrap: balance; color: var(--text-strong); margin-bottom: clamp(16px, 2.4vh, 30px); }
h2 + .hair { margin-top: 0; }
.kicker { font-family: var(--font-mono); font-size: clamp(11px, 1.2vw, 15px); font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: var(--accent); margin-bottom: clamp(12px, 2vh, 20px); display: inline-flex; align-items: center; gap: 10px; }
.subtitle { font-family: var(--font-display); font-style: italic; font-size: clamp(16px, 2.1vw, 28px); color: var(--muted); line-height: 1.3; }
.body { font-size: clamp(16px, 1.9vw, 23px); line-height: 1.6; color: var(--muted); }
.body b, .body strong { color: var(--text-strong); font-weight: 600; }
.hair { height: 1px; background: linear-gradient(90deg, var(--accent), transparent); margin: clamp(14px, 2.2vh, 24px) 0; }
.hair--short { width: clamp(120px, 20vw, 240px); }
em { color: var(--text-strong); font-style: italic; }
code { font-family: var(--font-mono); font-size: .86em; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); padding: 1px 6px; border-radius: 4px; }
.lead-in { margin-top: clamp(14px, 2.4vh, 26px); }
.takeaway { font-family: var(--font-display); font-size: clamp(19px, 2.5vw, 34px); font-weight: 500; line-height: 1.22; color: var(--text-strong); text-wrap: balance; }
.takeaway b { color: var(--accent); }

/* annotation (cartographer) */
.annot { font-family: var(--font-mono); font-size: clamp(13px, 1.35vw, 17px); color: var(--accent); letter-spacing: .04em; }
.lead { display: flex; align-items: center; gap: 12px; margin: clamp(10px,1.8vh,18px) 0; color: var(--muted); font-size: clamp(13px,1.5vw,18px); }
.lead::before { content: ''; flex: none; width: clamp(40px, 7vw, 90px); height: 1px; border-top: 1.5px dotted var(--accent); }

/* ── Bullets ── */
.bullets { list-style: none; display: flex; flex-direction: column; gap: clamp(10px, 1.9vh, 18px); }
.bullets li { padding-left: 28px; position: relative; font-size: clamp(16px, 1.9vw, 23px); line-height: 1.5; color: var(--text); }
.bullets li::before { content: ''; position: absolute; left: 2px; top: .58em; width: 10px; height: 10px; border: 1.5px solid var(--accent); transform: rotate(45deg); }
.bullets li b { color: var(--text-strong); font-weight: 600; }
.bullets .dim { color: var(--muted); }
.mini { list-style: none; margin-top: 6px; }
.mini li { padding: 3px 0 3px 18px; position: relative; font-size: clamp(14px, 1.6vw, 20px); line-height: 1.5; color: var(--muted); }
.mini li::before { content: '›'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.mini b { color: var(--text); }

/* ── Two-column inner ── */
.inner { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(20px, 3.5vw, 52px); align-items: center; width: 100%; }
.inner--even { grid-template-columns: 1fr 1fr; }
.inner > * { min-width: 0; }

/* ── Cards ── */
.card { --tick: var(--accent); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: clamp(14px, 2.4vh, 24px) clamp(16px, 1.7vw, 24px); position: relative; min-width: 0; transition: border-color .25s ease; }

/* hover: reveal blueprint corner registration marks (top-left + bottom-right) */
.card::before, .card::after { content: ''; position: absolute; width: 13px; height: 13px; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.card::before { top: 7px; left: 7px; border-top: 1.5px solid var(--tick); border-left: 1.5px solid var(--tick); transform: translate(-3px, -3px); }
.card::after { bottom: 7px; right: 7px; border-bottom: 1.5px solid var(--tick); border-right: 1.5px solid var(--tick); transform: translate(3px, 3px); }
/* .is-hot: sticky remote-highlight twin of :hover, driven by the presenter window
   (engine.js hotController). A plain :hover-mimic reads fine up close but washes out
   from the back of the room, so give every .is-hot element one extra outline. */
.is-hot { outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.card:hover, .card.is-hot { border-color: color-mix(in srgb, var(--line) 40%, var(--tick) 60%); }
.card:hover::before, .card:hover::after, .card.is-hot::before, .card.is-hot::after { opacity: .85; transform: translate(0, 0); }
@media (prefers-reduced-motion: reduce) { .card::before, .card::after { transition: opacity .2s ease; transform: none; } .card:hover::before, .card:hover::after, .card.is-hot::before, .card.is-hot::after { transform: none; } }
.card--hero { background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%); border-color: color-mix(in srgb, var(--line) 30%, var(--accent) 70%); }
.card__label { font-family: var(--font-mono); font-size: clamp(12px, 1.2vw, 15px); font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.card__label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.card__body { font-size: clamp(13px, 1.55vw, 19px); line-height: 1.5; color: var(--text); }
.card__body b { color: var(--text-strong); }
.card-stack { display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 16px); }
.card-grid { display: grid; gap: clamp(12px, 1.7vw, 20px); }
.card-grid--2 { grid-template-columns: 1fr 1fr; }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.card-grid > * { min-width: 0; }

/* capability / limit tint */
.card--good { --tick: var(--good); border-color: color-mix(in srgb, var(--line) 30%, var(--good) 70%); }
.card--good .card__label { color: var(--good); }
.card--bad { --tick: var(--bad); border-color: color-mix(in srgb, var(--line) 30%, var(--bad) 70%); }
.card--bad .card__label { color: var(--bad); }

/* ── Pipeline (orchestration / encoder chains) ── */
.pipeline { display: flex; align-items: stretch; gap: 0; margin-top: clamp(12px, 2.2vh, 24px); }
.pipeline__step { --step-accent: var(--accent); flex: 1; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--step-accent); border-radius: 10px; padding: clamp(11px, 2vh, 20px) clamp(9px, 1.2vw, 16px); display: flex; flex-direction: column; min-width: 0; transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, box-shadow .25s ease; }
.pipeline__step--loop { --step-accent: var(--accent-2); }
/* hover: lift the process node, brighten sides toward its accent, keep the accent top bar */
.pipeline__step:hover, .pipeline__step.is-hot { transform: translateY(-4px); border-color: color-mix(in srgb, var(--line) 35%, var(--step-accent) 65%); border-top-color: var(--step-accent); box-shadow: 0 10px 26px rgba(0,0,0,.30), 0 0 26px -6px color-mix(in srgb, var(--step-accent) 55%, transparent); }
@media (prefers-reduced-motion: reduce) { .pipeline__step { transition: border-color .2s ease, box-shadow .2s ease; } .pipeline__step:hover, .pipeline__step.is-hot { transform: none; } }
.pipeline__num { font-family: var(--font-mono); font-size: clamp(11px, 1.2vw, 14px); font-weight: 600; color: var(--accent); letter-spacing: 1px; }
.pipeline__name { font-size: clamp(14px, 1.7vw, 21px); font-weight: 700; margin: 5px 0; color: var(--text-strong); }
.pipeline__desc { font-size: clamp(13px, 1.4vw, 17px); color: var(--muted); line-height: 1.45; }
.pipeline__arrow { display: flex; align-items: center; padding: 0 clamp(4px, .5vw, 8px); color: var(--accent); flex: none; opacity: .6; font-size: clamp(14px,1.6vw,20px); }

/* Source citation line (reusable) */
.srcline { font-family: var(--font-mono); font-size: clamp(10px,1.05vw,13px); color: var(--muted); margin-top: clamp(8px,1.4vh,16px); }
.srcline a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.srcline a:hover, .srcline a:focus { color: var(--text-strong); }
/* citation link (reusable) */
.cc-src { color: var(--accent); opacity: .8; text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--accent) 55%, transparent); }
.cc-src:hover, .cc-src:focus { opacity: 1; }

/* ── Tap-to-reveal (slide 6): click a blank/trigger to pop its insight line ── */
/* .tap is the clickable affordance; .pop starts hidden and fades in once the
   parent .card gets .is-open. A gentle pulse invites the click during a talk. */
.tap { cursor: pointer; color: var(--accent); font-style: normal; border-bottom: 1.5px dotted var(--accent); border-radius: 2px; padding: 0 2px 1px; transition: color .2s, background .2s; animation: tapHint 1.9s ease-in-out infinite; }
.tap:hover, .tap:focus { color: var(--text-strong); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.card.is-open .tap { animation: none; opacity: .8; }
@keyframes tapHint { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.pop { opacity: 0; transform: translateY(6px); transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.card.is-open .pop { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .tap { animation: none; } .pop { transition: opacity .2s linear; } }

/* ── stack-layout: two-column diagram + text (slides 17-22) ── */
.stack-layout { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px,4vw,60px); align-items: center; }

/* ── donate / Q&A slide: QR card + playful numbered mission ── */
.qr-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(16px,2.4vh,26px); display: flex; flex-direction: column; align-items: center; gap: clamp(10px,1.6vh,16px); box-shadow: 0 10px 30px -12px rgba(0,0,0,.4); }
.qr-card img { width: clamp(190px, 30vh, 290px); height: auto; display: block; border-radius: 8px; background: #fff; padding: 8px; }
.qr-card__cap { font-family: var(--font-mono); font-size: clamp(12px,1.3vw,16px); color: var(--muted); text-align: center; line-height: 1.5; }
.qr-card__cap b { color: var(--text-strong); }
.mission { counter-reset: m; display: flex; flex-direction: column; gap: clamp(12px,2.2vh,22px); margin-top: clamp(10px,2vh,20px); }
.mission li { list-style: none; position: relative; padding-left: 2.7em; font-size: clamp(15px,1.75vw,22px); line-height: 1.45; color: var(--muted); }
.mission li b { color: var(--text-strong); font-weight: 600; }
.mission li::before { counter-increment: m; content: counter(m); position: absolute; left: 0; top: -.05em; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--accent); color: var(--bg); font-family: var(--font-mono); font-weight: 700; font-size: .8em; display: flex; align-items: center; justify-content: center; }
.mission .vn { font-family: var(--font-mono); color: var(--accent); font-size: .82em; }

/* definition slide */
.def { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 5.2vw, 66px); line-height: 1.02; color: var(--text-strong); letter-spacing: -.5px; text-wrap: balance; }
.def b { color: var(--accent); }

/* quote / closer */
.quote { font-family: var(--font-display); font-weight: 600; font-size: clamp(48px, 11vw, 150px); line-height: 0.94; color: var(--text-strong); letter-spacing: -1.5px; }
.quote b { color: var(--accent); }

/* ── Responsive ── */
@media (max-height: 720px) { .display { font-size: clamp(32px, 6.2vw, 66px); } }
@media (max-width: 860px) {
  .inner, .inner--even, .stack-layout { grid-template-columns: 1fr; }
  .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr 1fr; }
  .pipeline { flex-direction: column; }
  .pipeline__arrow { transform: rotate(90deg); padding: 4px 0; justify-content: center; }
}