deck.css

/* deck.css  ·  section styles for the presentation kit
   ------------------------------------------------------------------
   DO NOT EDIT THIS FILE. Every colour, typeface and rhythm value here
   is a CSS custom property that lives in theme.css. To change how a
   deck looks, rewrite theme.css. Nothing in this file names a colour.
   ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-family: var(--sans);
}

::selection { background: var(--green); color: var(--on-accent); }
::-webkit-scrollbar { width: 0; height: 0; }

a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--link-line); }
a:hover { color: var(--link-hover); border-bottom-color: var(--link-hover); }

@keyframes nowPulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } }
@keyframes cueDrift { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(5px) } }

/* ─── accent map ─────────────────────────────────────────────────────────
   gold = personal, green = brand, navy = work, red = family/alert */
[data-accent="gold"]  { --accent: var(--gold); }
[data-accent="green"] { --accent: var(--green); }
[data-accent="navy"]  { --accent: var(--navy); }
[data-accent="red"]   { --accent: var(--red); }
[data-accent="muted"] { --accent: var(--muted); }

/* ─── chrome ─────────────────────────────────────────────────────────── */
.chrome {
  position: fixed; inset: 0 0 auto 0; height: 54px; z-index: 60;
  background: var(--chrome);
  border-bottom: 1px solid rgba(var(--chrome-ink-rgb),0.10);
  display: flex; align-items: center; gap: 20px;
  padding: 0 22px 0 18px;
  transition: opacity .3s var(--ease);
}
body.is-focus .chrome,
body.is-focus .rail { opacity: 0; pointer-events: none; }

.chrome__brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.chrome__mark {
  width: 28px; height: 28px; border: 1.5px solid var(--gold); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font: 500 italic 15px/1 var(--serif);
}
.chrome__names { display: flex; flex-direction: column; gap: 3px; }
.chrome__name { font: 500 13px/1 var(--serif); color: var(--ink); letter-spacing: .01em; }
.chrome__sub {
  font: 600 8.5px/1 var(--sans); letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(var(--chrome-ink-rgb),0.5);
}
.chrome__rule { width: 1px; height: 24px; background: rgba(var(--chrome-ink-rgb),0.14); }
.chrome__now { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
.chrome__counter { font: 400 10.5px/1 var(--mono); color: var(--gold); }
.chrome__label {
  font: 600 10.5px/1 var(--sans); letter-spacing: 1.47px; text-transform: uppercase;
  color: rgba(var(--chrome-ink-rgb),0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chrome__tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.chrome__clock { font: 400 11px/1 var(--mono); color: rgba(var(--chrome-ink-rgb),0.62); }
body:not(.is-timer) .chrome__clock { opacity: 0; }

.btn-chrome {
  background: rgba(var(--chrome-ink-rgb),0.06); border: 1px solid rgba(var(--chrome-ink-rgb),0.16);
  color: rgba(var(--chrome-ink-rgb),0.8); font: 500 11px/1 var(--sans); letter-spacing: .25px;
  padding: 6px 10px; border-radius: var(--radius); cursor: pointer; transition: all .12s;
}
.btn-chrome:hover { background: rgba(var(--chrome-ink-rgb),0.13); color: var(--ink); }
.btn-chrome kbd { font-family: var(--mono); opacity: .6; font-size: inherit; }

.chrome__progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .18s linear;
}

/* ─── section rail ───────────────────────────────────────────────────── */
.rail {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 55;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-end;
  transition: opacity .3s var(--ease);
}
.rail__item {
  display: flex; align-items: center; gap: 9px; justify-content: flex-end;
  height: 15px; cursor: pointer; background: none; border: 0; padding: 0;
}
.rail__num {
  font: 400 9px/1 var(--mono); letter-spacing: .04em; color: var(--muted); opacity: .5;
  white-space: nowrap; transition: all .2s var(--ease);
}
.rail__tick { height: 1.5px; width: 12px; background: var(--hairline-strong); transition: all .2s var(--ease); }
.rail__item.is-on .rail__num { color: var(--gold); opacity: 1; }
.rail__item.is-on .rail__tick { width: 26px; background: var(--gold); }
/* data-break on a section marks the start of a module: longer tick, gap above */
.rail__item--break { margin-top: 10px; }
.rail__item--break .rail__num { opacity: .8; }
.rail__item--break .rail__tick { width: 24px; background: var(--muted); }
.rail__item--break.is-on .rail__tick { width: 34px; background: var(--gold); }

/* ─── presenter notes ────────────────────────────────────────────────── */
.notes {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
  background: var(--surface); border-top: 1px solid var(--hairline);
  padding: 16px 24px 18px; display: flex; gap: 18px; align-items: flex-start;
}
body:not(.is-notes) .notes { display: none; }
.notes__label {
  font: 600 10.5px/1 var(--sans); letter-spacing: 1.47px; text-transform: uppercase;
  color: var(--gold); flex: 0 0 auto; padding-top: 3px;
}
.notes__text {
  margin: 0; font: 400 italic 16px/1.5 var(--serif); color: var(--body);
  max-width: 900px; flex: 1 1 auto;
}
.notes__hide {
  background: transparent; border: 1px solid var(--hairline); color: var(--muted);
  font: 500 11px/1 var(--sans); padding: 6px 10px; border-radius: var(--radius);
  cursor: pointer; flex: 0 0 auto;
}

/* ─── jump modal ─────────────────────────────────────────────────────── */
.jump {
  position: fixed; inset: 0; z-index: 70;
  background: var(--scrim); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 60px 40px;
}
body:not(.is-jump) .jump { display: none; }
.jump__panel {
  width: min(1000px, 100%); max-height: 80vh; overflow: auto;
  background: var(--panel); border-radius: var(--radius-lg);
  box-shadow: var(--panel-shadow);
  padding: 26px 28px 28px;
}
.jump__head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--hairline); padding-bottom: 14px; margin-bottom: 18px;
}
.jump__title { font: 400 italic 20px/1 var(--serif); color: var(--ink); }
.jump__hint { font: 400 10.5px/1 var(--mono); color: var(--muted); }
.jump__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1px; background: var(--hairline);
}
.jump__cell {
  background: var(--panel); padding: 13px 14px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 7px;
  border: 0; border-left: 3px solid var(--hairline-strong); transition: background .12s;
}
.jump__cell:hover { background: var(--panel-hover); }
.jump__cell.is-on { border-left-color: var(--gold); }
.jump__cell-num { font: 400 10px/1 var(--mono); color: var(--muted); }
.jump__cell-title { font: 500 15px/1.2 var(--serif); color: var(--body); }
.jump__cell.is-on .jump__cell-title { color: var(--gold); }
.jump__cell--break .jump__cell-num { color: var(--gold); }

/* ─── section shell ──────────────────────────────────────────────────── */
.s {
  min-height: 100vh; padding: 130px var(--gutter) 90px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; border-bottom: 1px solid var(--hairline);
}
.s--surface { background: var(--surface); }
.s--chrome { background: var(--chrome); border-bottom: 0; }
.s > .wrap { max-width: 1180px; margin: 0 auto; width: 100%; }
.wrap--narrow { max-width: 1020px; }
.wrap--tight { max-width: 900px; }
.wrap--wide { max-width: 1240px; }
.wrap--center { text-align: center; }

[data-reveal] { will-change: opacity, transform; }
[data-reveal].is-armed { opacity: 0; transform: translateY(16px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

/* ─── type primitives ────────────────────────────────────────────────── */
.kicker {
  font: 600 10.5px/1 var(--sans); letter-spacing: 1.47px; text-transform: uppercase;
  color: var(--muted); display: block;
}
.kicker--gold { color: var(--gold); }
.kicker--green { color: var(--green); }
.kicker--red { color: var(--red); }

.display {
  margin: 0; font: 500 clamp(52px, 7.4vw, 116px)/0.98 var(--serif);
  letter-spacing: -.022em; color: var(--ink); text-wrap: balance;
}
.title {
  margin: 16px 0 46px; font: 500 clamp(36px, 4vw, 60px)/1.05 var(--serif);
  letter-spacing: -.014em; color: var(--ink);
}
.title--tight { margin-bottom: 12px; }
.statement {
  margin: 0; font: 500 clamp(38px, 4.6vw, 72px)/1.12 var(--serif);
  letter-spacing: -.016em; color: var(--ink); max-width: 1000px; text-wrap: pretty;
}
.thesis {
  margin: 28px 0 0; font: 500 clamp(40px, 5.2vw, 80px)/1.1 var(--serif);
  letter-spacing: -.018em; color: var(--ink); text-wrap: balance;
}
.lead {
  margin: 30px 0 0; font: 400 italic clamp(18px, 1.6vw, 24px)/1.5 var(--serif);
  color: var(--body); max-width: 620px;
}
.note { margin: 0 0 36px; font: 400 italic 19px/1.5 var(--serif); color: var(--muted); }
.aside { margin: 30px 0 0; font: 400 italic 19px/1.5 var(--serif); color: var(--body); max-width: 720px; }
.copy { margin: 0; font: 400 14.5px/1.6 var(--sans); color: var(--body); max-width: 760px; }
.mono { font: 400 11px/1 var(--mono); color: var(--muted); }
.mono--green { color: var(--green); }
.mono--gold { color: var(--gold); }
.mono--navy { color: var(--navy); }
.mono--red { color: var(--red); }
em { font-style: italic; }
.em-gold { font-style: italic; color: var(--gold); }
.em-green { font-style: italic; color: var(--green); }
.em-navy { font-style: italic; color: var(--navy); }
.em-red { font-style: italic; color: var(--red); }

/* ─── cover ──────────────────────────────────────────────────────────── */
.cover__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; }
.cover__meta .rule { height: 1px; flex: 1 1 auto; background: var(--hairline); }
.cover__facts {
  display: flex; gap: 28px; align-items: center; margin-top: 52px;
  padding-top: 24px; border-top: 1px solid var(--hairline); flex-wrap: wrap;
}
.cue {
  position: absolute; left: var(--gutter); bottom: 46px;
  display: flex; align-items: center; gap: 10px;
  animation: cueDrift 2.6s ease-in-out infinite;
}
.cue span:last-child { width: 34px; height: 1px; background: var(--green); }

/* ─── byline ─────────────────────────────────────────────────────────── */
.byline {
  display: flex; align-items: center; gap: 16px; padding-top: 20px;
  border-top: 1px solid var(--hairline); max-width: 1000px;
}
.byline__avatar {
  width: 32px; height: 32px; border-radius: 999px; background: var(--gold);
  color: var(--chrome); display: flex; align-items: center; justify-content: center;
  font: 500 13px/1 var(--sans); flex: 0 0 auto;
}
.byline__text { font: 400 14px/1.5 var(--sans); color: var(--body); }

/* ─── column grid (agenda, roadmap, recap) ───────────────────────────── */
.cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-top: 1px solid var(--hairline);
}
.cols--wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.col {
  padding: 26px; border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 12px;
}
.col:first-child { padding-left: 0; }
.col:last-child { padding-right: 0; border-right: 0; }
.col__title { font: 500 22px/1.2 var(--serif); color: var(--ink); }
.col__title--lg { font-size: clamp(24px, 2.3vw, 32px); }
.col__num { font: 500 44px/1 var(--serif); color: var(--accent, var(--gold)); }
.col__body { font: 400 14px/1.55 var(--sans); color: var(--body); }
.pill {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  border: 1px solid var(--accent, var(--green)); color: var(--accent, var(--green));
  border-radius: 999px; padding: 3px 10px; font: 500 11px/1.4 var(--sans);
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* ─── stats ──────────────────────────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--hairline);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.stat { background: var(--canvas); padding: 34px 26px; display: flex; flex-direction: column; gap: 14px; }
.s--surface .stat { background: var(--surface); }
.stat__value {
  font: 500 clamp(40px, 4.4vw, 64px)/1 var(--serif); letter-spacing: -.018em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.bar { height: 3px; background: var(--hairline); width: 100%; overflow: hidden; }
.bar > i {
  display: block; height: 3px; width: 100%; background: var(--accent, var(--green));
  transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease);
}

/* ─── timeline ───────────────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; }
.tl {
  display: grid; grid-template-columns: 120px 1fr; gap: 34px;
  padding: 24px 0 24px 26px; border-top: 1px solid var(--hairline);
  border-left: 3px solid var(--accent, var(--gold));
}
.timeline .tl:last-child { border-bottom: 1px solid var(--hairline); }
.tl__when { font: 400 11px/1.5 var(--mono); color: var(--muted); }
.tl__main { display: flex; flex-direction: column; gap: 8px; }
.tl__title { font: 500 24px/1.2 var(--serif); color: var(--ink); }

/* ─── figure ─────────────────────────────────────────────────────────── */
.fig__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; margin-bottom: 26px; flex-wrap: wrap;
}
.fig__head .title { margin: 0; font-size: clamp(32px, 3.4vw, 52px); }
.fig__stack { display: flex; flex-direction: column; gap: 14px; }
.fig__label { font: 400 11px/1.6 var(--mono); color: var(--muted); max-width: 280px; }
.fig__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border: 1px solid var(--hairline); background: var(--surface);
}
.s--surface .fig__frame { background: var(--canvas); }
.fig__caption { margin: 22px 0 0; font: 400 italic 18px/1.5 var(--serif); color: var(--body); max-width: 760px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.gallery__item { display: flex; flex-direction: column; gap: 14px; }
.gallery__frame {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline); background: var(--surface);
}

/* ─── accordion (steps + faq) ────────────────────────────────────────── */
.acc { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.acc__item {
  border: 0; border-bottom: 1px solid var(--hairline);
  border-left: 3px solid var(--accent, var(--gold));
  padding: 22px 26px; cursor: pointer; display: grid; grid-template-columns: 76px 1fr;
  gap: 30px; transition: background .12s; text-align: left;
  background: none; color: inherit; font: inherit; width: 100%;
}
.acc__item:hover { background: var(--tint); }
.acc__num { font: 400 11px/1.6 var(--mono); color: var(--muted); transition: color .16s; }
.acc__item.is-open .acc__num { color: var(--accent, var(--gold)); }
.acc__main { display: flex; flex-direction: column; min-width: 0; }
.acc__title {
  font: 500 clamp(24px, 2.2vw, 32px)/1.2 var(--serif); color: var(--body);
  transition: color .16s;
}
.acc__item.is-open .acc__title { color: var(--ink); }
.acc__body {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .32s var(--ease), opacity .32s;
}
.acc__item.is-open .acc__body { grid-template-rows: 1fr; opacity: 1; }
.acc__body > div { overflow: hidden; min-height: 0; }
.acc__body p { margin: 14px 0 0; font: 400 15px/1.65 var(--sans); color: var(--body); max-width: 740px; }
.acc__metric { margin: 12px 0 4px !important; font: 400 11px/1.5 var(--mono) !important; color: var(--green) !important; }

.acc--faq .acc__item { grid-template-columns: 1fr 28px; gap: 20px; align-items: start; padding: 22px 4px; border-left: 0; }
.acc--faq .acc__title { font: 400 italic clamp(21px, 2vw, 28px)/1.35 var(--serif); color: var(--ink); }
.acc__plus {
  font: 400 20px/1 var(--serif); color: var(--green); justify-self: end;
  transition: transform .28s var(--ease);
}
.acc__item.is-open .acc__plus { transform: rotate(45deg); }

/* ─── before / after ─────────────────────────────────────────────────── */
.compare__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; margin-bottom: 38px; flex-wrap: wrap;
}
.compare__head .title { margin: 0; }
.compare__heading { display: flex; flex-direction: column; gap: 16px; }
.seg { display: flex; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.seg button {
  background: transparent; color: var(--body); border: 0;
  font: 500 12.5px/1 var(--sans); letter-spacing: .25px; padding: 11px 18px;
  cursor: pointer; transition: all .16s;
}
.seg button + button { border-left: 1px solid var(--hairline); }
.seg button.is-on { background: var(--green); color: var(--on-accent); }
.compare__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline);
}
.compare__col {
  background: var(--canvas); padding: 34px 32px;
  display: flex; flex-direction: column; gap: 22px;
  transition: opacity .28s var(--ease);
}
.compare__col.is-dim { opacity: .22; }
.compare__tag { display: flex; align-items: center; gap: 10px; }
.compare__tag::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--accent, var(--green)); }
.compare__tag span {
  font: 600 10.5px/1 var(--sans); letter-spacing: 1.47px; text-transform: uppercase;
  color: var(--accent, var(--green));
}
.compare__title { font: 500 30px/1.15 var(--serif); color: var(--ink); }
.compare__list { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.compare__list span {
  font: 400 14.5px/1.5 var(--sans); color: var(--body);
  padding: 14px 0; border-bottom: 1px solid var(--hairline);
}
.compare__list span:last-child { border-bottom: 0; }
.compare__col--after .compare__list span { color: var(--ink); }

/* ─── quote ──────────────────────────────────────────────────────────── */
.quote {
  margin: 30px 0 0; font: 400 italic clamp(30px, 3.6vw, 54px)/1.28 var(--serif);
  color: var(--ink); text-wrap: pretty;
}
.attrib {
  display: flex; align-items: center; gap: 16px; margin-top: 38px;
  padding-top: 22px; border-top: 1px solid var(--hairline);
}
.attrib__photo { width: 44px; height: 44px; flex: 0 0 auto; }
.attrib__who { display: flex; flex-direction: column; gap: 5px; }
.attrib__name { font: 500 16px/1.2 var(--serif); color: var(--ink); }

/* ─── live build ─────────────────────────────────────────────────────── */
.live__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 24px; flex-wrap: wrap;
}
.live__head .title { margin: 0; }
.live__dot { display: flex; align-items: center; gap: 10px; }
.live__dot::before {
  content: ''; width: 7px; height: 7px; border-radius: 999px;
  background: var(--red); animation: nowPulse 1.8s ease-in-out infinite;
}
.live__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 8;
  border: 1px solid var(--green); background: var(--canvas);
}
.live__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live__steps { display: flex; margin-top: 24px; border-top: 1px solid var(--hairline); flex-wrap: wrap; }
.live__step { flex: 1 1 200px; padding: 20px 24px 0; border-right: 1px solid var(--hairline); }
.live__step:first-child { padding-left: 0; }
.live__step:last-child { padding-right: 0; border-right: 0; }
.live__step p { margin: 10px 0 0; font: 400 14.5px/1.6 var(--sans); color: var(--body); }

/* ─── checklist ──────────────────────────────────────────────────────── */
.check { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.check__item {
  display: flex; align-items: center; gap: 20px; padding: 20px 4px;
  border-bottom: 1px solid var(--hairline); cursor: pointer; min-height: 44px;
  transition: background .12s; background: none; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left; color: inherit; font: inherit;
}
.check__item:hover { background: var(--tint); }
.check__box {
  width: 20px; height: 20px; flex: 0 0 auto; border: 1.4px solid var(--hairline-strong);
  background: transparent; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--canvas); font: 600 12px/1 var(--sans); transition: all .16s;
}
.check__item.is-done .check__box { background: var(--green); border-color: var(--green); }
.check__item.is-done .check__box::after { content: '✓'; }
.check__label {
  font: 500 clamp(20px, 1.9vw, 26px)/1.3 var(--serif); color: var(--ink);
  transition: all .16s;
}
.check__item.is-done .check__label { color: var(--muted); text-decoration: line-through; }
.check__time { margin-left: auto; font: 400 11px/1 var(--mono); color: var(--muted); flex: 0 0 auto; }

/* ─── resources ──────────────────────────────────────────────────────── */
.res { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.res__row {
  display: grid; grid-template-columns: 130px 1fr auto; gap: 24px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--hairline); min-height: 44px;
}
.res__title { font: 500 20px/1.3 var(--serif); color: var(--ink); }

/* ─── close ──────────────────────────────────────────────────────────── */
.close__title {
  margin: 24px 0 0; font: 500 clamp(44px, 5.6vw, 88px)/1.02 var(--serif);
  letter-spacing: -.02em; color: var(--ink); text-wrap: balance;
}
.close__lead {
  margin: 30px 0 0; max-width: 600px;
  font: 400 italic clamp(18px, 1.6vw, 23px)/1.5 var(--serif); color: rgba(var(--chrome-ink-rgb),0.72);
}
.close__actions { display: flex; gap: 12px; align-items: center; margin-top: 44px; flex-wrap: wrap; }
.btn {
  border-radius: var(--radius); padding: 14px 22px; font: 500 12.5px/1 var(--sans);
  letter-spacing: .25px; text-decoration: none; min-height: 44px;
  display: inline-flex; align-items: center; border: 1px solid transparent;
}
.btn--solid { background: var(--green); color: var(--on-accent); }
.btn--solid:hover { background: var(--green-hover); color: var(--on-accent); }
.btn--ghost { background: transparent; color: rgba(var(--chrome-ink-rgb),0.86); border-color: rgba(var(--chrome-ink-rgb),0.28); }
.btn--ghost:hover { color: var(--ink); border-color: rgba(var(--chrome-ink-rgb),0.5); }
.close__meta {
  display: flex; gap: 28px; align-items: center; margin-top: 56px;
  padding-top: 22px; border-top: 1px solid rgba(var(--chrome-ink-rgb),0.14); flex-wrap: wrap;
}
.close__meta .mono { color: rgba(var(--chrome-ink-rgb),0.55); }

/* ─── image slot ─────────────────────────────────────────────────────── */
image-slot { display: block; position: absolute; inset: 0; }
.gallery__frame image-slot, .fig__frame image-slot, .live__frame image-slot { inset: 0; }
.attrib__photo image-slot { position: relative; width: 44px; height: 44px; }

/* ─── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --gutter: 48px; }
  .rail { display: none; }
  .tl { grid-template-columns: 1fr; gap: 10px; }
  .acc__item { grid-template-columns: 1fr; gap: 8px; }
  .acc--faq .acc__item { grid-template-columns: 1fr 28px; }
}
@media (max-width: 720px) {
  :root { --gutter: 24px; }
  .s { padding: 100px var(--gutter) 64px; }
  .chrome { gap: 12px; padding: 0 12px; }
  .chrome__rule, .chrome__names { display: none; }
  .cols { grid-template-columns: 1fr; }
  .col { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .col:last-child { border-bottom: 0; }
  .live__steps { flex-direction: column; }
  .live__step { padding: 20px 0 0; border-right: 0; }
  .res__row { grid-template-columns: 1fr auto; }
  .res__row .mono:first-child { grid-column: 1 / -1; }
  .cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* ── inline editing (press E) ───────────────────────────────────────────
   Every text-bearing element becomes editable in place. The outline is a
   hairline in the brand green, not a browser focus ring, so the deck still
   looks like itself while you work in it. */

body.is-edit [contenteditable="true"] {
  outline: 1px dashed var(--hairline-strong);
  outline-offset: 6px;
  border-radius: var(--radius);
  cursor: text;
  transition: outline-color .12s;
}
body.is-edit [contenteditable="true"]:hover { outline-color: var(--green); }
body.is-edit [contenteditable="true"]:focus {
  outline: 1px solid var(--green);
  outline-offset: 6px;
  background: var(--green-wash);
}
body.is-edit .cue { display: none; }

/* Controls stay put while you retype their labels. */
body.is-edit .acc__item,
body.is-edit .check__item,
body.is-edit .seg button { cursor: text; }

.editbar {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(140%);
  z-index: 90; display: flex; align-items: center; gap: 14px;
  padding: 11px 14px 11px 16px;
  background: var(--panel); border: 1px solid var(--hairline-strong); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  transition: transform .22s var(--ease);
}
body.is-edit .editbar { transform: translateX(-50%) translateY(0); }

/* Clear the presenter-notes drawer when it's open underneath. */
body.is-edit.is-notes .editbar { bottom: 108px; }

.editbar__dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--green); flex: 0 0 auto;
}
.editbar__label {
  font: 600 10.5px/1 var(--sans); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink);
}
.editbar__count {
  font: 400 11px/1 var(--mono); color: var(--gold);
  padding-left: 14px; border-left: 1px solid var(--hairline-strong);
}
.editbar__hint {
  font: 400 11px/1 var(--sans); color: var(--muted);
  padding-left: 14px; border-left: 1px solid var(--hairline-strong);
}
.editbar__btn {
  background: transparent; border: 1px solid var(--hairline-strong); color: var(--body);
  font: 500 11px/1 var(--sans); padding: 7px 11px; border-radius: var(--radius); cursor: pointer;
  transition: all .12s;
}
.editbar__btn:hover { border-color: var(--green); color: var(--ink); }
.editbar__btn--solid {
  background: var(--green); border-color: var(--green); color: var(--on-accent);
}
.editbar__btn--solid:hover { filter: brightness(1.12); color: var(--on-accent); }

@media (max-width: 900px) {
  .editbar { left: 12px; right: 12px; transform: translateY(140%); flex-wrap: wrap; }
  body.is-edit .editbar { transform: translateY(0); }
  .editbar__hint { display: none; }
}

/* ── selection accent bar ────────────────────────────────────────────────
   Appears above a selection while editing. The four accents are the ones
   DESIGN.md defines, so this stays a system, not a colour picker. */

.selbar {
  position: fixed; z-index: 95; top: 0; left: 0;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--panel); border: 1px solid var(--hairline-strong); border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none; transform: translateY(3px);
  transition: opacity .12s, transform .12s;
}
.selbar.is-on { opacity: 1; pointer-events: auto; transform: translateY(0); }

.selbar__btn {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: 0; border-radius: var(--radius);
  color: var(--body); font: 500 11px/1 var(--sans);
  padding: 7px 9px; cursor: pointer; transition: background .1s, color .1s;
}
.selbar__btn:hover { background: var(--panel-hover); color: var(--ink); }
.selbar__btn.is-on { background: var(--panel-hover); color: var(--ink); }

.selbar__dot {
  width: 9px; height: 9px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
.selbar__dot--gold  { background: var(--gold); }
.selbar__dot--green { background: var(--green); }
.selbar__dot--navy  { background: var(--navy); }
.selbar__dot--red   { background: var(--red); }

.selbar__btn.is-on .selbar__dot { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 0 0 2px var(--panel), 0 0 0 3px currentColor; }
.selbar__sep { width: 1px; align-self: stretch; margin: 4px 3px; background: var(--hairline-strong); }