/* ─────────────────────────────────────────────────────────────────────────
   Ktav — ktav.dev

   Palette is the application's own (src/renderer/src/styles/base.css) so the
   site and the product are visibly one thing.

   Type is IBM Plex throughout: Sans for the interface, Serif for statements,
   Sans Hebrew and Sans Arabic for the scripts the product exists to get
   right, Mono for labels. One superfamily covering three scripts is the
   argument of the page, restated in its typography.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --paper:       #fbfbfa;
  --raised:      #ffffff;
  --subtle:      #f2f2ef;
  --zebra:       #faf9f7;
  --ink:         #1f2328;
  --ink-muted:   #5f666d;
  --ink-faint:   #929aa1;
  --rule:        #e4e4de;
  --rule-strong: #cfcfc8;
  --accent:      #2f6fd0;
  --accent-ink:  #1e3f80;
  --accent-fg:   #ffffff;
  --accent-soft: rgba(47, 111, 208, 0.09);
  --accent-line: rgba(47, 111, 208, 0.30);
  --warn:        #c0392b;
  --warn-soft:   rgba(192, 57, 43, 0.08);
  --good:        #2e7d4f;
  --good-soft:   rgba(46, 125, 79, 0.09);
  --shadow-sm:   0 1px 2px rgba(20, 24, 30, 0.05);
  --shadow:      0 1px 2px rgba(20, 24, 30, 0.05), 0 12px 34px rgba(20, 24, 30, 0.08);

  --sans:  'IBM Plex Sans', 'IBM Plex Sans Hebrew', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;
  --he:    'IBM Plex Sans Hebrew', 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --ar:    'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Segoe UI', sans-serif;

  --page: 1120px;
  --measure: 64ch;
  --radius: 8px;
  --radius-lg: 13px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #16181d;
    --raised:      #1c1f26;
    --subtle:      #22262e;
    --zebra:       #1a1d23;
    --ink:         #e4e6ea;
    --ink-muted:   #a2aab5;
    --ink-faint:   #6e7681;
    --rule:        #2c313a;
    --rule-strong: #3d434e;
    --accent:      #6ea8fe;
    --accent-ink:  #a8c8ff;
    --accent-fg:   #10131a;
    --accent-soft: rgba(110, 168, 254, 0.12);
    --accent-line: rgba(110, 168, 254, 0.34);
    --warn:        #e06c60;
    --warn-soft:   rgba(224, 108, 96, 0.11);
    --good:        #63b884;
    --good-soft:   rgba(99, 184, 132, 0.11);
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow:      0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 34px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --paper:       #16181d;
  --raised:      #1c1f26;
  --subtle:      #22262e;
  --zebra:       #1a1d23;
  --ink:         #e4e6ea;
  --ink-muted:   #a2aab5;
  --ink-faint:   #6e7681;
  --rule:        #2c313a;
  --rule-strong: #3d434e;
  --accent:      #6ea8fe;
  --accent-ink:  #a8c8ff;
  --accent-fg:   #10131a;
  --accent-soft: rgba(110, 168, 254, 0.12);
  --accent-line: rgba(110, 168, 254, 0.34);
  --warn:        #e06c60;
  --warn-soft:   rgba(224, 108, 96, 0.11);
  --good:        #63b884;
  --good-soft:   rgba(99, 184, 132, 0.11);
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow:      0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 34px rgba(0, 0, 0, 0.45);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: 26px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.71rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── Navigation ─────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.nav-in {
  max-width: var(--page);
  margin: 0 auto;
  padding: 13px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }

.mark {
  width: 31px; height: 31px;
  border-radius: 8px;
  background: linear-gradient(155deg, #3b7ae0, #1e3f80);
  display: grid; place-items: center;
  flex: none;
  box-shadow: var(--shadow-sm);
}

.brand-name {
  font-weight: 600;
  font-size: 1.09rem;
  letter-spacing: -0.02em;
}

.brand-tag {
  font-size: 0.84rem;
  color: var(--ink-muted);
  border-inline-start: 1px solid var(--rule-strong);
  padding-inline-start: 14px;
  margin-inline-start: 3px;
}

.nav-spacer { flex: 1; }

.nav-link {
  font-size: 0.9rem;
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink); }

@media (max-width: 720px) {
  .brand-tag, .nav-link.hide-sm { display: none; }
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 11px 20px;
  font-family: var(--sans);
  font-size: 0.97rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn small { font-weight: 400; font-size: 0.74rem; opacity: 0.86; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
  box-shadow: none;
}
.btn-ghost:hover { border-color: var(--ink-faint); background: var(--subtle); }

.btn-sm { padding: 7px 15px; font-size: 0.88rem; font-weight: 500; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding: 74px 0 0; }

.hero-grid { display: flex; flex-direction: column; gap: 26px; }

h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.35rem, 5.6vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  max-width: 15ch;
}

h1 .em { color: var(--accent); font-style: italic; }

.hero-sub {
  font-size: clamp(1.04rem, 1.6vw, 1.19rem);
  color: var(--ink-muted);
  max-width: 56ch;
  line-height: 1.58;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.hero-meta {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

/* ── The demonstration ──────────────────────────────────────────────── */
.demo { margin-top: 54px; }

.demo-shell {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--raised);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.demo-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--subtle);
}

.demo-bar-label {
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.seg {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  padding: 3px;
  gap: 2px;
}

.seg button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 6px 15px;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
}

.seg button:hover { color: var(--ink); }

.seg button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-fg);
}

.demo-body {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.demo-src, .demo-out { padding: 22px 24px 26px; min-width: 0; }
.demo-out { border-inline-start: 1px solid var(--rule); background: var(--zebra); }

.pane-label {
  font-family: var(--mono);
  font-size: 0.69rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 13px;
}

pre.src {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.85;
  color: var(--ink-muted);
  overflow-x: auto;
  /* The source block is isolated on purpose: pipes and dashes in an RTL line
     wander otherwise, and that is a different problem from the one being
     shown here. Ktav does exactly this in its own source view. */
  unicode-bidi: isolate;
  direction: ltr;
  text-align: start;
}

.demo-scroll { overflow-x: auto; }

table.cat {
  border-collapse: collapse;
  font-size: 0.87rem;
  width: 100%;
}

table.cat th, table.cat td {
  border: 1px solid var(--rule-strong);
  padding: 8px 13px;
  white-space: nowrap;
  unicode-bidi: isolate;
}

table.cat th { background: var(--subtle); font-weight: 600; }
table.cat td.num { font-variant-numeric: tabular-nums; }

.he { font-family: var(--he); }
.ar { font-family: var(--ar); }

.verdict {
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

.verdict .pip {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 7px;
  flex: none;
}
.verdict.bad .pip  { background: var(--warn); }
.verdict.good .pip { background: var(--good); }
.verdict b { color: var(--ink); font-weight: 600; }

.demo-foot {
  border-top: 1px solid var(--rule);
  padding: 12px 18px;
  font-size: 0.82rem;
  color: var(--ink-faint);
  background: var(--subtle);
}

@media (max-width: 860px) {
  .demo-body { grid-template-columns: 1fr; }
  .demo-out { border-inline-start: 0; border-top: 1px solid var(--rule); }
}

/* ── Sections ───────────────────────────────────────────────────────── */
section.band { padding: 84px 0; }
section.band + section.band { border-top: 1px solid var(--rule); }

.sec-head { display: flex; flex-direction: column; gap: 9px; margin-bottom: 34px; }

h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.68rem, 3.1vw, 2.28rem);
  letter-spacing: -0.018em;
  line-height: 1.16;
  max-width: 20ch;
}

.sec-sub { color: var(--ink-muted); max-width: var(--measure); }

/* Pillars */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; }

.pillar {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--raised);
  padding: 24px 23px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pillar h3 {
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.008em;
}

.pillar p { font-size: 0.94rem; color: var(--ink-muted); }

.pillar ul {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px dashed var(--rule-strong);
  padding-top: 13px;
}

.pillar li {
  font-family: var(--mono);
  font-size: 0.745rem;
  line-height: 1.45;
  color: var(--ink-faint);
  padding-inline-start: 15px;
  position: relative;
}

.pillar li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-line);
}

/* Screenshot gallery */
.shots { display: flex; flex-direction: column; gap: 18px; }

.shots-tabs { align-self: flex-start; flex-wrap: wrap; }

.shot-frame {
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--raised);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--subtle);
  /* No cover-crop and no fixed ratio. A screenshot of an interface is 16:9-ish
     and varies; cropping it to a tidy box removes the status bar, which is part
     of what the reader is being shown. Layout shift is handled instead by
     setting the intrinsic width and height from the probe, below. */
}

.shot-frame figcaption {
  border-top: 1px solid var(--rule);
  padding: 15px 20px;
  font-size: 0.91rem;
  color: var(--ink-muted);
  background: var(--zebra);
}

.shot-frame figcaption b { color: var(--ink); font-weight: 600; }

/* Coverage figures */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }

.fig {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--raised);
  padding: 19px 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fig-name { font-size: 0.87rem; color: var(--ink-muted); }

.fig-num {
  font-family: var(--serif);
  font-size: 2.15rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--good);
  font-variant-numeric: tabular-nums;
}

.fig-was {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.fig-bar {
  margin-top: 9px;
  height: 5px;
  border-radius: 3px;
  background: var(--subtle);
  overflow: hidden;
  position: relative;
}

.fig-bar i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--good);
  border-radius: 3px;
  display: block;
}

.fig-bar u {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--rule-strong);
  border-radius: 3px;
  display: block;
}

/* Download */
.dl {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--raised);
  padding: 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--shadow-sm);
}

.dl-top { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }

.dl-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 22px;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--ink-muted);
}

.notice {
  border-inline-start: 3px solid var(--warn);
  background: var(--warn-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notice h3 { font-size: 0.94rem; font-weight: 600; color: var(--warn); }
.notice p { font-size: 0.89rem; color: var(--ink-muted); max-width: 70ch; }

.privacy {
  border-inline-start: 3px solid var(--good);
  background: var(--good-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.privacy h3 { font-size: 0.94rem; font-weight: 600; color: var(--good); }
.privacy p { font-size: 0.89rem; color: var(--ink-muted); max-width: 70ch; }

/* Signup */
.signup {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}

.signup h2 { text-align: center; max-width: 24ch; }
.signup p { color: var(--ink-muted); max-width: 52ch; }

form.mail {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
  width: 100%;
  max-width: 470px;
}

form.mail input {
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--sans);
  font-size: 0.96rem;
  padding: 11px 15px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--raised);
  color: var(--ink);
}

form.mail input::placeholder { color: var(--ink-faint); }
form.mail input:focus { border-color: var(--accent); }

.mail-note { font-size: 0.8rem; color: var(--ink-faint); min-height: 1.4em; }

/* Footer */
footer {
  border-top: 1px solid var(--rule);
  padding: 34px 0 46px;
}

.foot-in {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  font-size: 0.86rem;
  color: var(--ink-faint);
}

.foot-in a { color: var(--ink-muted); text-decoration: none; }
.foot-in a:hover { color: var(--accent); }
.foot-spacer { flex: 1; }

@media (max-width: 620px) {
  .hero { padding-top: 48px; }
  section.band { padding: 58px 0; }
  .dl { padding: 22px 20px; }
}

/* ── Language switch ────────────────────────────────────────────────── */
.lang {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-decoration: none;
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  padding: 4px 12px;
  white-space: nowrap;
}
.lang:hover { border-color: var(--accent); color: var(--accent); }

/* ── What it replaces — the Swiss-army-knife table ──────────────────── */
.replaces { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--raised); }

table.rep { border-collapse: collapse; width: 100%; font-size: 0.94rem; min-width: 540px; }

table.rep th {
  text-align: start;
  font-family: var(--mono);
  font-size: 0.69rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  padding: 12px 18px;
  background: var(--subtle);
  border-bottom: 1px solid var(--rule);
}

table.rep td { padding: 13px 18px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.rep tr:last-child td { border-bottom: none; }
table.rep td.job { color: var(--ink); font-weight: 500; }
table.rep td.was { color: var(--ink-faint); }
table.rep td.now { color: var(--good); font-weight: 500; }

/* ── Deep capability blocks ─────────────────────────────────────────── */
.caps { display: flex; flex-direction: column; gap: 4px; }

.cap {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 26px;
  padding: 30px 0;
  border-top: 1px solid var(--rule);
}

.cap:last-child { border-bottom: 1px solid var(--rule); }

.cap-side { display: flex; flex-direction: column; gap: 7px; }

.cap-n {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.cap-kind {
  font-size: 0.83rem;
  color: var(--ink-faint);
  line-height: 1.45;
}

.cap-body { display: flex; flex-direction: column; gap: 13px; min-width: 0; }

.cap-body h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.32rem;
  letter-spacing: -0.014em;
  line-height: 1.25;
}

.cap-body p { color: var(--ink-muted); max-width: var(--measure); }
.cap-body p b, .cap-body p strong { color: var(--ink); font-weight: 600; }

ul.spec {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 8px 22px;
}

ul.spec li {
  font-size: 0.88rem;
  color: var(--ink-muted);
  line-height: 1.5;
  padding-inline-start: 15px;
  position: relative;
}

ul.spec li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-line);
}

ul.spec li b { color: var(--ink); font-weight: 600; }

kbd {
  font-family: var(--mono);
  font-size: 0.82em;
  background: var(--subtle);
  border: 1px solid var(--rule-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
  unicode-bidi: isolate;
}

/* A remark that earns its own weight inside a capability block. */
.aside {
  border-inline-start: 3px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 17px;
  font-size: 0.9rem;
  color: var(--ink-muted);
  max-width: var(--measure);
}
.aside b { color: var(--accent-ink); font-weight: 600; }

@media (max-width: 700px) {
  .cap { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
  .cap-side { flex-direction: row; align-items: baseline; gap: 12px; flex-wrap: wrap; }
}

/* Inline code. Isolated because on a right-to-left page an unisolated Latin
   identifier drags the punctuation around it to the wrong side — the exact
   defect this site exists to talk about. */
code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--subtle);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.06em 0.34em;
  unicode-bidi: isolate;
}

/* The vocalised Hebrew name beside the wordmark. Lighter, so "Ktav" stays the
   name and (כְּתָב) reads as the gloss it is. */
.brand-he { font-weight: 500; color: var(--ink-muted); }

/* A submit button that sits on one line, unlike the stacked download button. */
.btn-row { flex-direction: row; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── A screenshot inside a capability block ─────────────────────────── */
.shot {
  margin: 6px 0 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--raised);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--subtle);
  cursor: zoom-in;
  transition: opacity 120ms ease;
}

.shot img:hover { opacity: 0.93; }
.shot img:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.shot figcaption {
  border-top: 1px solid var(--rule);
  padding: 11px 16px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-muted);
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.shot figcaption .zoom {
  margin-inline-start: auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ── Lightbox ───────────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(12, 14, 18, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vmin;
  cursor: zoom-out;
}

.lightbox[hidden] { display: none; }

.lightbox img {
  max-width: 100%;
  max-height: 94vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  cursor: default;
}

.lightbox-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lightbox-cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 14px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.87rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

body.lightbox-open { overflow: hidden; }