/* =========================================================================
   قرینه / Qarineh — public OSINT archive
   Visual system: "case file on archival paper".
   Two accents with fixed meaning:
     --seal   (ink blue)  = the site's own structure — nav, type labels, links
     --thread (oxide red) = provenance & evidence — rights blocks, active state
   Light palette is complete on bare :root; the dark block overrides tokens only.
   ========================================================================= */

/* ---------- tokens: light ---------- */
:root {
  color-scheme: light;

  /* surfaces */
  --paper:          #f2f0ea;   /* archival stock */
  --paper-raised:   #fbfaf7;   /* cards, panels */
  --paper-sunken:   #e9e6dd;   /* wells, code, hero plate */

  /* ink */
  --ink:            #14171a;
  --ink-2:          #3b4249;
  --ink-3:          #646b72;   /* meta, captions — ≥4.5:1 on --paper */

  /* structure */
  --rule:           #d9d4c9;
  --rule-strong:    #b6afa1;

  /* accents */
  --seal:           #1e3a54;
  --seal-soft:      #e4eaf0;
  --thread:         #9d3018;
  --thread-soft:    #f5e5df;

  /* rights basis accents */
  --basis-own:      #1e3a54;
  --basis-own-soft: #e4eaf0;
  --basis-lic:      #1d5b4c;
  --basis-lic-soft: #e0eee9;
  --basis-pd:       #7a5a0d;
  --basis-pd-soft:  #f3ecd9;
  --basis-ind:      #9d3018;
  --basis-ind-soft: #f7e6e0;

  /* type */
  --font-fa: "Vazirmatn", "Vazir", "IRANSans", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Vazirmatn", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step--2: 0.75rem;
  --step--1: 0.8125rem;
  --step-0:  1.0625rem;
  --step-1:  clamp(1.15rem, 0.5vw + 1.02rem, 1.3rem);
  --step-2:  clamp(1.35rem, 1vw + 1.12rem, 1.65rem);
  --step-3:  clamp(1.7rem, 2vw + 1.25rem, 2.35rem);
  --step-4:  clamp(2.1rem, 3.4vw + 1.35rem, 3.4rem);

  /* metrics */
  --measure: 38rem;          /* article column */
  --shell:   74rem;          /* page shell */
  --radius:  3px;            /* documents are not rounded */
  --shadow:  0 1px 0 rgba(20, 23, 26, .04), 0 6px 18px -14px rgba(20, 23, 26, .5);
}

/* ---------- tokens: dark ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --paper:        #111214;
    --paper-raised: #17191c;
    --paper-sunken: #1d2023;

    --ink:          #e9e6df;
    --ink-2:        #b4b1a9;
    --ink-3:        #97948d;

    --rule:         #2a2d31;
    --rule-strong:  #464c52;

    --seal:         #94b8dd;
    --seal-soft:    #17232e;
    --thread:       #e2704e;
    --thread-soft:  #2c1a14;

    --basis-own:      #94b8dd;
    --basis-own-soft: #17232e;
    --basis-lic:      #6ec4a8;
    --basis-lic-soft: #132521;
    --basis-pd:       #d7b45c;
    --basis-pd-soft:  #262015;
    --basis-ind:      #e2704e;
    --basis-ind-soft: #2c1a14;

    --shadow: 0 1px 0 rgba(0,0,0,.4), 0 8px 22px -16px rgba(0,0,0,.9);
  }
}

/* =========================================================================
   base
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-fa);
  font-size: var(--step-0);
  line-height: 1.85;
  font-feature-settings: "ss01";
  overflow-x: hidden;
  /* faint fibre in the paper, one gradient, no images */
  background-image:
    linear-gradient(180deg, color-mix(in oklab, var(--seal) 4%, transparent) 0, transparent 22rem);
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: .28em;
  text-decoration-thickness: 1px;
  transition: color .12s ease, text-decoration-color .12s ease;
}
a:hover {
  color: var(--thread);
  text-decoration-color: var(--thread);
}

img { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-block-start: 1px solid var(--rule);
  margin: 2.5rem 0;
}

:focus-visible {
  outline: 2px solid var(--thread);
  outline-offset: 3px;
  border-radius: 2px;
}
:where(a, button, input, summary):focus:not(:focus-visible) { outline: none; }

::selection { background: var(--thread); color: var(--paper-raised); }

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -4rem;
  z-index: 60;
  background: var(--ink);
  color: var(--paper);
  padding: .55rem 1rem;
  text-decoration: none;
  border-radius: var(--radius);
  transition: inset-block-start .15s ease;
}
.skip-link:focus { inset-block-start: 1rem; color: var(--paper); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* monospaced meta: Latin from Plex, Persian falls through to Vazirmatn */
.mono, .meta, .stat-value, .chip-count, .card-date, .article-meta, .badge {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}

/* =========================================================================
   shell
   ========================================================================= */

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}
@media (max-width: 34rem) {
  .shell { width: min(100% - 1.75rem, var(--shell)); }
}

/* ---------- masthead ---------- */

.site-bar {
  border-block-end: 1px solid var(--rule);
  background: var(--paper);
  background: color-mix(in oklab, var(--paper) 88%, var(--paper-raised));
  backdrop-filter: saturate(1.1) blur(6px);
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
}
.site-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.5rem;
  flex-wrap: wrap;
}
.site-bar__mark {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.site-bar__mark:hover { color: var(--ink); }
.site-bar__mark::before {
  content: "";
  width: 3px;
  height: 1.05em;
  background: var(--thread);
  transform: translateY(.12em);
  border-radius: 1px;
}
.site-bar__mark .latin {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.site-nav {
  display: flex;
  gap: 1.35rem;
  font-size: var(--step--1);
}
.site-nav a {
  text-decoration: none;
  color: var(--ink-2);
  padding-block: .25rem;
  border-block-end: 1px solid transparent;
}
.site-nav a:hover { color: var(--thread); border-block-end-color: var(--thread); }

/* ---------- footer ---------- */

.site-foot {
  margin-block-start: 5rem;
  border-block-start: 1px solid var(--rule);
  padding-block: 2.25rem 3rem;
  color: var(--ink-3);
  font-size: var(--step--1);
}
.site-foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
}
.site-foot nav { display: flex; gap: 1.35rem; flex-wrap: wrap; }
.site-foot a { text-decoration-color: var(--rule); }
.site-foot__note {
  margin-block-start: 1.25rem;
  max-width: 46rem;
  font-size: var(--step--2);
  line-height: 1.9;
  color: var(--ink-3);
}

/* =========================================================================
   homepage — masthead block
   ========================================================================= */

.home-hero {
  padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2rem, 4vw, 3rem);
  border-block-end: 1px solid var(--rule);
}
.home-hero__wordmark {
  font-size: var(--step-4);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0;
}
.home-hero__latin {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-start: .85rem;
  margin-inline-start: .2em;
}
/* the "lead" — a single thread pulled across the page */
.home-hero__thread {
  height: 2px;
  width: min(100%, 22rem);
  margin-block: 1.6rem;
  background: linear-gradient(to left, var(--thread) 0 38%, var(--rule-strong) 38% 100%);
}
.home-hero__tagline {
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--ink);
  max-width: 34ch;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.home-hero__desc {
  max-width: 56ch;
  color: var(--ink-2);
  margin: 0;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2.25rem;
  margin-block-start: 2rem;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  color: var(--ink-3);
}
.stats li {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
}
.stats li + li { position: relative; }
.stats li + li::before {
  content: "";
  position: absolute;
  inset-inline-end: -1.15rem;
  inset-block: .35em;
  border-inline-end: 1px solid var(--rule-strong);
}
.stat-value {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
}

/* =========================================================================
   filter bar
   ========================================================================= */

.filterbar {
  position: sticky;
  inset-block-start: 3.5rem;
  z-index: 30;
  background: var(--paper);
  background: color-mix(in oklab, var(--paper) 92%, var(--paper-raised));
  backdrop-filter: saturate(1.1) blur(6px);
  border-block-end: 1px solid var(--rule);
  padding-block: .85rem;
}
.filterbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0; padding: 0;
  list-style: none;
}
.chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--step--1);
  line-height: 1.6;
  padding: .25rem .8rem;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.chip:hover { border-color: var(--thread); color: var(--thread); }
.chip-count {
  font-size: var(--step--2);
  color: var(--ink-3);
  padding-inline-start: .4rem;
  border-inline-start: 1px solid var(--rule);
}
.chip[aria-pressed="true"] {
  background: var(--thread);
  border-color: var(--thread);
  color: #fff;
}
.chip[aria-pressed="true"] .chip-count {
  color: rgba(255,255,255,.82);
  border-inline-start-color: rgba(255,255,255,.35);
}
@media (prefers-color-scheme: dark) {
  .chip[aria-pressed="true"] { color: #14171a; }
  .chip[aria-pressed="true"] .chip-count { color: rgba(20,23,26,.72); border-inline-start-color: rgba(20,23,26,.3); }
}

.search {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding-inline: .65rem;
  min-width: min(100%, 17rem);
  flex: 0 1 17rem;
}
.search:focus-within { border-color: var(--thread); box-shadow: 0 0 0 3px var(--thread-soft); }
.search svg { flex: none; width: 15px; height: 15px; stroke: var(--ink-3); fill: none; stroke-width: 1.7; }
.search input {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  padding-block: .45rem;
  width: 100%;
  min-width: 0;
}
.search input:focus { outline: none; }
.search input::placeholder { color: var(--ink-3); }

.result-note {
  font-size: var(--step--2);
  color: var(--ink-3);
  font-family: var(--font-mono);
}

/* =========================================================================
   card grid
   ========================================================================= */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19.5rem, 1fr));
  gap: 1.25rem;
  padding-block: 2.5rem 1rem;
  margin: 0;
  list-style: none;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.card:focus-within { border-color: var(--thread); box-shadow: 0 0 0 3px var(--thread-soft); }
.card[hidden] { display: none; }

.card__figure {
  margin: 0;
  background: var(--paper-sunken);
  border-block-end: 1px solid var(--rule);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.card__figure img { width: 100%; height: 100%; object-fit: cover; }
.card__figure figcaption { display: none; }
.card__figure:empty { display: none; }

.card__inner {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.1rem 1.15rem 1.2rem;
  flex: 1;
}
.card__head {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  font-size: var(--step--2);
}
.card-date { color: var(--ink-3); }

.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--step--2);
  letter-spacing: .02em;
  padding: .1rem .5rem;
  border-radius: 2px;
  border: 1px solid color-mix(in oklab, var(--seal) 40%, transparent);
  background: var(--seal-soft);
  color: var(--seal);
  white-space: nowrap;
}

/* the five content types read at a glance, colour-coded to their rights basis */
.badge[data-type="report"]      { --b: var(--seal);      --bs: var(--seal-soft); }
.badge[data-type="translation"] { --b: var(--basis-lic); --bs: var(--basis-lic-soft); }
.badge[data-type="osint"]       { --b: var(--basis-ind); --bs: var(--basis-ind-soft); }
.badge[data-type="dossier"]     { --b: var(--basis-pd);  --bs: var(--basis-pd-soft); }
.badge[data-type="analysis"]    { --b: var(--ink-2);     --bs: var(--paper-sunken); }
.badge[data-type] {
  color: var(--b, var(--seal));
  background: var(--bs, var(--seal-soft));
  border-color: color-mix(in oklab, var(--b, var(--seal)) 40%, transparent);
}

.card__title {
  font-size: var(--step-1);
  line-height: 1.55;
  margin: 0;
}
.card__title a { text-decoration: none; }
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card__title a:hover { color: var(--thread); }
.card__summary {
  margin: 0;
  color: var(--ink-2);
  font-size: .95rem;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__foot {
  margin-block-start: auto;
  padding-block-start: .85rem;
  border-block-start: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  align-items: baseline;
  font-size: var(--step--2);
  color: var(--ink-3);
  font-family: var(--font-mono);
}
.card__source { color: var(--ink-2); }
.card__basis {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.card__basis::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--thread);
  flex: none;
}
.card__basis:empty { display: none; }

.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.tag {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .05rem .4rem;
  background: var(--paper);
  white-space: nowrap;
}
.card .tags { position: relative; z-index: 1; }

.empty-state {
  display: none;
  padding: 3.5rem 0 4rem;
  text-align: center;
  color: var(--ink-3);
  border-block-start: 1px dashed var(--rule-strong);
}
.empty-state.is-visible { display: block; }

/* =========================================================================
   article
   ========================================================================= */

.article-shell { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }

.article-hero {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
  max-width: calc(var(--measure) + 8rem);
  padding-block-end: 1.75rem;
  border-block-end: 1px solid var(--rule);
  margin-block-end: 2.25rem;
}
.article-kicker {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .06em;
  color: var(--thread);
  margin: 0 0 .9rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.article-kicker::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: var(--thread);
  flex: none;
}
.article-kicker:empty { display: none; }

.article-hero h1 {
  font-size: var(--step-3);
  line-height: 1.42;
  letter-spacing: -0.025em;
  margin: 0 0 1.2rem;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  font-size: var(--step--1);
  color: var(--ink-3);
}
.article-meta .sep { color: var(--rule-strong); }

.article-figure {
  width: min(100% - 2.5rem, var(--shell));
  max-width: calc(var(--measure) + 12rem);
  margin: 0 auto 2.5rem;
}
.article-figure img {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-sunken);
}
.article-figure figcaption {
  font-size: var(--step--1);
  color: var(--ink-3);
  margin-block-start: .6rem;
  padding-inline-start: .7rem;
  border-inline-start: 2px solid var(--rule-strong);
  line-height: 1.7;
}

/* ---------- the readable column (article + standalone pages) ---------- */

.article-body,
.page-body {
  width: min(100% - 2.5rem, var(--measure));
  margin-inline: auto;
  font-size: 1.075rem;
  line-height: 1.95;
  color: var(--ink);
}
.article-body > * + *,
.page-body > * + * { margin-block-start: 0; }

.article-body h2, .page-body h2 {
  font-size: var(--step-2);
  margin-block: 2.6rem .9rem;
  padding-block-end: .45rem;
  border-block-end: 1px solid var(--rule);
}
.article-body h3, .page-body h3 {
  font-size: var(--step-1);
  margin-block: 2rem .7rem;
  color: var(--ink);
}
.article-body h4, .page-body h4 {
  font-size: 1rem;
  margin-block: 1.6rem .5rem;
  color: var(--ink-2);
}
.article-body p a, .page-body p a,
.article-body li a, .page-body li a {
  text-decoration-color: color-mix(in oklab, var(--seal) 55%, transparent);
  color: var(--ink);
}
.article-body p a:hover, .page-body p a:hover,
.article-body li a:hover, .page-body li a:hover { color: var(--thread); }

.article-body ul, .article-body ol,
.page-body ul, .page-body ol {
  padding-inline-start: 1.3rem;
  margin-block: 0 1.2rem;
}
.article-body li, .page-body li { margin-block-end: .5rem; }
.article-body li::marker, .page-body li::marker { color: var(--thread); }

.article-body blockquote, .page-body blockquote {
  margin: 1.8rem 0;
  padding: .3rem 1.1rem;
  border-inline-start: 3px solid var(--thread);
  background: var(--thread-soft);
  color: var(--ink-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.article-body blockquote p:last-child, .page-body blockquote p:last-child { margin-block-end: 0; }

.article-body figure, .page-body figure { margin: 2rem 0; }
.article-body figure img, .page-body figure img {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-sunken);
  cursor: zoom-in;
}
.article-body figcaption, .page-body figcaption {
  font-size: var(--step--1);
  color: var(--ink-3);
  margin-block-start: .6rem;
  padding-inline-start: .7rem;
  border-inline-start: 2px solid var(--rule-strong);
  line-height: 1.7;
}

.article-body code, .page-body code {
  font-family: var(--font-mono);
  font-size: .86em;
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .05em .35em;
}
.article-body pre, .page-body pre {
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
  line-height: 1.7;
  font-size: .86rem;
}
.article-body pre code, .page-body pre code { background: none; border: 0; padding: 0; }

/* tables: JS wraps them in .scroll-x; this is the no-JS fallback */
.article-body table, .page-body table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  margin-block: 1.8rem;
}
.scroll-x {
  overflow-x: auto;
  max-width: 100%;
  margin-block: 1.8rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.scroll-x table { display: table; width: 100%; margin: 0; border: 0; }
.article-body th, .article-body td,
.page-body th, .page-body td {
  border: 1px solid var(--rule);
  padding: .5rem .75rem;
  text-align: start;
  vertical-align: top;
}
.article-body thead th, .page-body thead th {
  background: var(--paper-sunken);
  font-size: var(--step--1);
  color: var(--ink-2);
  font-weight: 600;
}

/* Latin runs inside Persian prose keep LTR ordering */
.article-body :lang(en), .page-body :lang(en) { unicode-bidi: isolate; }

/* =========================================================================
   appendix: rights + source + tags (always AFTER </article>)
   ========================================================================= */

.article-appendix {
  width: min(100% - 2.5rem, var(--measure));
  margin: 3.5rem auto 0;
}

/* ---------- the rights block ---------- */

.rights {
  --rights-accent: var(--seal);
  --rights-soft: var(--seal-soft);
  position: relative;
  margin-block-start: 2.5rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-inline-start: 4px solid var(--rights-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 1.35rem 1.35rem;
}
.rights::before {
  /* faint tint from the basis accent, kept behind the content */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rights-soft);
  opacity: .55;
  pointer-events: none;
  border-radius: inherit;
}
.rights > * { position: relative; }

.rights__tab {
  position: absolute;
  inset-block-start: -.75rem;
  inset-inline-start: -4px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--rights-accent);
  color: var(--paper-raised);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .03em;
  padding: .1rem .65rem;
  border-radius: 2px;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .rights__tab { color: #101113; }
}

.rights__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .08em;
  color: var(--ink-3);
  margin: 0 0 .35rem;
}
.rights__title {
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--rights-accent);
  margin: 0 0 .6rem;
  line-height: 1.5;
}
.rights__body {
  margin: 0;
  color: var(--ink-2);
  font-size: .96rem;
  line-height: 1.85;
}
.rights__body + .rights__body { margin-block-start: .8rem; }
.rights__body strong { color: var(--ink); }

.rights__notice {
  margin-block-start: 1rem;
  padding: .75rem .9rem;
  background: var(--paper);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  font-size: .9rem;
  line-height: 1.8;
  color: var(--ink-2);
}
.rights__notice-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .05em;
  color: var(--ink-3);
  margin-block-end: .3rem;
}

.rights__meta {
  margin: 1.1rem 0 0;
  padding-block-start: .9rem;
  border-block-start: 1px solid color-mix(in oklab, var(--rights-accent) 22%, transparent);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem 1rem;
  font-size: .9rem;
}
.rights__meta > div {
  display: contents;
}
.rights__meta dt {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-3);
  letter-spacing: .02em;
  padding-block-start: .28em;
}
.rights__meta dd {
  margin: 0;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* an unsupplied field renders as an empty dd — hide the whole row */
.rights__meta > div:has(> dd:empty) { display: none; }
.rights__meta > div.is-empty { display: none; }

.rights__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-block-start: 1.15rem;
  background: var(--rights-accent);
  color: var(--paper-raised);
  text-decoration: none;
  font-size: .93rem;
  font-weight: 600;
  padding: .45rem .95rem;
  border-radius: var(--radius);
  border: 1px solid var(--rights-accent);
  transition: opacity .12s ease;
}
.rights__cta:hover { opacity: .86; color: var(--paper-raised); }
.rights__cta::after {
  content: "↗";
  font-family: var(--font-mono);
  font-size: .85em;
  transform: scaleX(-1);
}
@media (prefers-color-scheme: dark) {
  .rights__cta, .rights__cta:hover { color: #101113; }
}

/* basis variants */
.rights--own-work           { --rights-accent: var(--basis-own); --rights-soft: var(--basis-own-soft); }
.rights--license            { --rights-accent: var(--basis-lic); --rights-soft: var(--basis-lic-soft); }
.rights--public-domain      { --rights-accent: var(--basis-pd);  --rights-soft: var(--basis-pd-soft); }
.rights--independent-report { --rights-accent: var(--basis-ind); --rights-soft: var(--basis-ind-soft); }

/* the independent report is the site's central claim — give it more weight */
.rights--independent-report {
  border-inline-start-width: 6px;
  padding-block-start: 1.75rem;
}
.rights--independent-report .rights__title { font-size: var(--step-2); }
.rights__not-translation {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-block-start: 1rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--basis-ind);
  border: 1px solid color-mix(in oklab, var(--basis-ind) 45%, transparent);
  border-radius: 2px;
  padding: .2rem .6rem;
  background: var(--paper);
}

/* ---------- source strip ---------- */

.source-strip {
  margin-block-start: 1.25rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  font-size: .93rem;
}
.source-strip__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .05em;
  color: var(--ink-3);
  margin-block-end: .35rem;
}
.source-strip a { overflow-wrap: anywhere; }
.source-strip:has(> :last-child:empty) { display: none; }

.article-tags {
  margin-block-start: 2rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--rule);
}
.article-tags .tags { gap: .4rem; }
.article-tags .tag { font-size: var(--step--1); padding: .12rem .55rem; }

.back-home {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-block-start: 2.5rem;
  font-size: var(--step--1);
  color: var(--ink-3);
  text-decoration: none;
}
.back-home::before { content: "→"; font-family: var(--font-mono); }
.back-home:hover { color: var(--thread); }

/* =========================================================================
   standalone page
   ========================================================================= */

.page-head {
  width: min(100% - 2.5rem, var(--measure));
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 2rem;
  padding-block-end: 1.5rem;
  border-block-end: 1px solid var(--rule);
}
.page-head h1 {
  font-size: var(--step-3);
  letter-spacing: -0.025em;
}
.page-head::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  background: var(--thread);
  margin-block-start: 1.1rem;
}

/* =========================================================================
   lightbox
   ========================================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 11, 12, .82);
  background: color-mix(in oklab, var(--paper) 82%, #000);
  backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.8);
}
.lightbox__caption {
  max-width: 46rem;
  text-align: center;
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.8;
  margin: 0;
}
.lightbox__caption:empty { display: none; }
.lightbox__close {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font-mono);
}
.lightbox__close:hover { border-color: var(--thread); color: var(--thread); }
body.lightbox-open { overflow: hidden; }

/* =========================================================================
   print
   ========================================================================= */

@media print {
  .site-bar, .filterbar, .site-foot, .lightbox, .back-home { display: none !important; }
  body { background: #fff; color: #000; }
  .article-body, .page-body, .article-appendix { width: 100%; }
  .rights { break-inside: avoid; border-inline-start-width: 3px; }
  a::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
  .rights__cta::after { content: ""; }
}