/* ═══════════════════════════════════════════════════════════════════════
   DIGICHER Decision Support Tool

   Aesthetic: archival broadsheet. This is an instrument for allocating public
   money to minority cultural heritage — it should read like a well-set European
   cultural report, not like a consumer app. Warm paper, ink, hairline rules,
   section numerals, one decisive accent.

   Only two faces are available offline (Playfair Display 600, Inter 400), so
   hierarchy is carried by scale, case, letter-spacing and rule-work rather than
   by weight. That is the constraint and also the point.

   Palette sampled from DIGICHER; the official kit is decision D-06. The logo
   orange fails text contrast, so ink-accent is the darker variant used for text
   and the brand orange is reserved for fills and marks (Gate A).
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Playfair Display';
  src: url('assets/playfairdisplay-600-latin.woff2') format('woff2');
  font-weight: 600; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/playfairdisplay-600-latin-ext.woff2') format('woff2');
  font-weight: 600; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/inter-400-latin.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/inter-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  --paper:      #F4EDE1;   /* the page */
  --paper-2:    #EFE6D6;   /* recessed */
  --card:       #FFFCF6;   /* raised leaf */
  --ink:        #16120D;
  --ink-2:      #514738;
  --ink-3:      #837767;
  --rule:       #D9CDB6;
  --rule-soft:  #E7DDCA;

  --accent:     #D2571E;   /* marks, fills, rules — not text */
  --accent-ink: #9A3B0C;   /* text and interactive labels: passes AA on paper */
  --accent-wash:#F6E3D5;

  --good:       #1B6B45;
  --good-wash:  #E2EFE6;
  --attention:  #A32218;
  --attention-wash:#F6E2E0;

  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;

  --maxw: 1120px;
  --gap: clamp(1rem, 2.4vw, 1.9rem);
  --shadow-leaf: 0 1px 0 rgba(22,18,13,.04), 0 6px 22px -14px rgba(22,18,13,.34);
  --shadow-lift: 0 2px 0 rgba(22,18,13,.05), 0 20px 44px -22px rgba(22,18,13,.45);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme='light'])) { color-scheme: dark;
    --paper: #14120F; --paper-2: #1A1713; --card: #1E1A15;
    --ink: #F6F1E7; --ink-2: #C6BCAB; --ink-3: #8F8574;
    --rule: #352F26; --rule-soft: #2A251E;
    --accent: #E9773D; --accent-ink: #F2A277; --accent-wash: #2E2018;
    --good: #5FC08D; --good-wash: #16261D; --attention: #EE8B80; --attention-wash: #2B1917;
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181;
    --shadow-leaf: 0 1px 0 rgba(0,0,0,.3), 0 6px 22px -14px rgba(0,0,0,.8);
    --shadow-lift: 0 2px 0 rgba(0,0,0,.35), 0 20px 44px -22px rgba(0,0,0,.9);
  }
}
:root[data-theme='dark'] { color-scheme: dark;
  --paper: #14120F; --paper-2: #1A1713; --card: #1E1A15;
  --ink: #F6F1E7; --ink-2: #C6BCAB; --ink-3: #8F8574;
  --rule: #352F26; --rule-soft: #2A251E;
  --accent: #E9773D; --accent-ink: #F2A277; --accent-wash: #2E2018;
  --good: #5FC08D; --good-wash: #16261D; --attention: #EE8B80; --attention-wash: #2B1917;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181;
  --shadow-leaf: 0 1px 0 rgba(0,0,0,.3), 0 6px 22px -14px rgba(0,0,0,.8);
  --shadow-lift: 0 2px 0 rgba(0,0,0,.35), 0 20px 44px -22px rgba(0,0,0,.9);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink);
  background-color: var(--paper);
  /* Paper grain — inline, self-contained. Sits under everything at low opacity. */
  background-image:
    radial-gradient(1100px 620px at 88% -8%, color-mix(in oklab, var(--accent) 11%, transparent), transparent 62%),
    radial-gradient(820px 520px at -6% 4%, color-mix(in oklab, var(--series-1) 7%, transparent), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  background-attachment: fixed, fixed, fixed;
}

/* ── type ─────────────────────────────────────────────────────────────── */
h1, h2, h3, .display {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-weight: 600; line-height: 1.08;
  letter-spacing: -.012em; margin: 0 0 .55rem;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.4vw, 3.5rem); letter-spacing: -.022em; }
h2 { font-size: clamp(1.35rem, 3vw, 1.95rem); }
h3 { font-size: 1.12rem; letter-spacing: -.006em; }
p { margin: 0 0 .9rem; max-width: 68ch; }
a { color: var(--accent-ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* Tracked small caps carry every label. With one weight available, case and
   letter-spacing do the work that bold would normally do. */
.eyebrow {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); display: flex; align-items: center; gap: .6rem; margin: 0 0 .7rem;
}
.eyebrow::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--rule); }
.eyebrow .num { color: var(--accent-ink); font-variant-numeric: tabular-nums; }

.lede { font-size: 1.06rem; color: var(--ink-2); max-width: 60ch; }

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

/* ── masthead ─────────────────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.masthead-in {
  max-width: var(--maxw); margin: 0 auto; padding: .7rem clamp(1rem, 3vw, 2rem);
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.masthead img.logo { height: 30px; width: auto; }
.masthead .spacer { flex: 1 1 auto; }

/* REQ-34 — present on every screen, at every width, and in print. Never hidden. */
.hm-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding: .5rem .9rem; border: 1px solid var(--ink); border-radius: 1px;
  position: relative; overflow: hidden; transition: color .28s ease;
}
.hm-link span { position: relative; z-index: 1; }
.hm-link::before {
  content: ''; position: absolute; inset: 0; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .34s cubic-bezier(.2,.7,.3,1);
}
.hm-link:hover { color: #fff; border-color: var(--accent); }
.hm-link:hover::before { transform: scaleX(1); }

.langswitch, .themeswitch {
  background: none; border: 1px solid var(--rule); color: var(--ink-2);
  border-radius: 1px; padding: .42rem .6rem; font: inherit; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.langswitch:hover, .themeswitch:hover { border-color: var(--ink); color: var(--ink); }

/* ── trail ────────────────────────────────────────────────────────────── */
.trail { max-width: var(--maxw); margin: 0 auto; padding: 1rem clamp(1rem, 3vw, 2rem) 0; }
.trail ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: .1rem; margin: 0; padding: 0;
  font-size: .69rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
.trail li { display: flex; align-items: center; gap: .1rem; }
.trail li::after { content: '/'; margin: 0 .5rem; color: var(--rule); }
.trail li:last-child::after { content: ''; }
.trail li[aria-current] { color: var(--accent-ink); }
.trail li[aria-current]::before { content: '●'; font-size: .5em; margin-right: .45rem; }

main { max-width: var(--maxw); margin: 0 auto; padding: clamp(1.6rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem) 5rem; }
/* One vertical rhythm for every screen, so sections never crowd each other. */
main > * + * { margin-top: clamp(1.9rem, 4.2vw, 3rem); }

/* One orchestrated entrance per screen. Nothing scattered, nothing looping. */
@media (prefers-reduced-motion: no-preference) {
  main > * { animation: rise .58s cubic-bezier(.16,.84,.34,1) backwards; }
  main > :nth-child(1) { animation-delay: .02s; }
  main > :nth-child(2) { animation-delay: .07s; }
  main > :nth-child(3) { animation-delay: .12s; }
  main > :nth-child(4) { animation-delay: .17s; }
  main > :nth-child(5) { animation-delay: .21s; }
  main > :nth-child(n+6) { animation-delay: .25s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── the guide (REQ-38) ───────────────────────────────────────────────── */
.guide {
  display: flex; gap: 1rem; align-items: center;
  padding: .9rem 0 1.1rem; margin: 0 0 1.6rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.guide figure { margin: 0; flex: 0 0 auto; width: 46px; height: 46px; }
.guide svg { width: 100%; height: 100%; display: block; overflow: visible; }
.guide .said { margin: 0; font-size: .97rem; color: var(--ink-2); font-style: italic; }
.guide .who {
  font-family: Inter, sans-serif; font-style: normal;
  font-size: .64rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--ink-3); display: block; margin-bottom: .14rem;
}
@media (prefers-reduced-motion: no-preference) {
  .guide .g-blink { animation: blink 6.5s infinite; transform-origin: center; }
}
@keyframes blink { 0%,95%,100% { transform: scaleY(1); } 97.5% { transform: scaleY(.08); } }

/* ── leaves (cards) ───────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }

.card {
  position: relative; background: var(--card);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 1.35rem 1.4rem 1.5rem; text-align: left; font: inherit; color: inherit;
  display: flex; flex-direction: column; gap: .45rem;
  box-shadow: var(--shadow-leaf);
}
/* The accent keyline draws across the top edge on hover. */
.card::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
button.card, a.card { cursor: pointer; transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s; }
button.card:hover, a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--rule); }
button.card:hover::before, a.card:hover::before { transform: scaleX(1); }
button.card[disabled] { cursor: not-allowed; box-shadow: none; background: transparent; border-style: dashed; }
button.card[disabled]:hover { transform: none; }
button.card[disabled] h3 { color: var(--ink-3); }
.card h3 { margin: 0; }
.card .muted { color: var(--ink-2); font-size: .92rem; margin: 0; }
.card .fine { color: var(--ink-3); font-size: .82rem; margin: 0; }

/* Direction cards carry an index numeral, broadsheet style. */
.card .idx {
  font-family: 'Playfair Display', Georgia, serif; font-size: 2.4rem; line-height: 1;
  color: var(--rule); margin-bottom: .2rem; font-variant-numeric: tabular-nums;
  transition: color .34s ease;
}
button.card:hover .idx { color: var(--accent); }
.card .go {
  margin-top: auto; padding-top: .9rem;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: .5rem;
}
.card .go::after { content: '→'; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
button.card:hover .go::after { transform: translateX(5px); }

.tag {
  display: inline-flex; align-items: center; gap: .38rem; width: fit-content;
  font-size: .64rem; letter-spacing: .15em; text-transform: uppercase;
  padding: .28rem .6rem; border: 1px solid var(--rule); border-radius: 1px;
  color: var(--ink-3); background: var(--paper-2);
}
.tag.ready { color: var(--good); border-color: color-mix(in oklab, var(--good) 40%, transparent); background: var(--good-wash); }
.tag.pending { color: var(--attention); border-color: color-mix(in oklab, var(--attention) 40%, transparent); background: var(--attention-wash); }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  font: inherit; font-size: .76rem; letter-spacing: .13em; text-transform: uppercase;
  cursor: pointer; border-radius: 1px; padding: .82rem 1.5rem;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  position: relative; overflow: hidden; transition: color .28s, border-color .28s;
}
.btn span { position: relative; z-index: 1; }
.btn::before {
  content: ''; position: absolute; inset: 0; background: var(--accent);
  transform: translateY(101%); transition: transform .34s cubic-bezier(.2,.7,.3,1);
}
.btn:hover:not([disabled]) { border-color: var(--accent); color: #fff; }
.btn:hover:not([disabled])::before { transform: translateY(0); }
.btn[disabled] { opacity: .38; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover:not([disabled]) { color: #fff; }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.actions .counter { margin: 0; flex-basis: 100%; }

/* ── naming the projects ──────────────────────────────────────────────── */
.project-row {
  display: flex; gap: .9rem; align-items: center; padding: .55rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.project-row .swatch { width: 10px; height: 26px; border-radius: 1px; flex: 0 0 auto; }
.project-row input {
  flex: 1 1 auto; font: inherit; font-size: 1.02rem; padding: .5rem 0;
  border: 0; border-bottom: 1px solid transparent; background: none; color: var(--ink);
  transition: border-color .25s;
}
.project-row input::placeholder { color: var(--ink-3); }
.project-row input:focus { outline: none; border-bottom-color: var(--accent); }
.project-row .drop {
  background: none; border: 0; cursor: pointer; color: var(--ink-3);
  font: inherit; font-size: 1rem; padding: .3rem .5rem; border-radius: 1px; transition: color .2s;
}
.project-row .drop:hover { color: var(--attention); }
.counter { font-size: .8rem; color: var(--ink-3); margin: .9rem 0 0; }

/* ── questionnaire ────────────────────────────────────────────────────── */
.subject-tabs { display: flex; gap: 0; flex-wrap: wrap; margin: 1.4rem 0 .3rem; border-bottom: 1px solid var(--rule); }
.subject-tabs button {
  font: inherit; font-size: .84rem; cursor: pointer; background: none;
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: .6rem .95rem; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: .5rem; transition: color .22s, border-color .22s;
}
.subject-tabs button:hover { color: var(--ink); }
.subject-tabs button[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--accent); }
.subject-tabs .swatch { width: 8px; height: 8px; border-radius: 50%; }
.subject-tabs .n { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: .78rem; }

.progress { background: var(--rule-soft); height: 2px; overflow: hidden; margin: .55rem 0 2rem; }
.progress i { display: block; height: 100%; background: var(--accent); transition: width .45s cubic-bezier(.2,.7,.3,1); }

.block { padding: 0 0 .5rem; margin: 0 0 2.6rem; }
.block > .bhead { border-top: 2px solid var(--ink); padding-top: .85rem; margin-bottom: 1.1rem; }
.block > .bhead h3 { margin-bottom: .3rem; }
.block .desc { color: var(--ink-2); font-size: .93rem; margin: 0; max-width: 74ch; }

.q { padding: 1.15rem 0; border-top: 1px solid var(--rule-soft); }
.q:first-of-type { border-top: 0; }
.q .qhead { display: flex; gap: .75rem; align-items: baseline; margin-bottom: .75rem; }
.q .qcode {
  font-size: .64rem; letter-spacing: .12em; color: var(--ink-3);
  font-variant-numeric: tabular-nums; flex: 0 0 auto; min-width: 3.4rem; padding-top: .18rem;
}
.q .qtext { font-size: 1.02rem; color: var(--ink); margin: 0; }
.q .qhelp { color: var(--ink-3); font-size: .87rem; margin: .2rem 0 0; }

/* The scale: a finite answer set with a number on every answer (REQ-11/12),
   set as one continuous meter rather than eleven loose pills. Still radios. */
.scale { margin-left: calc(3.4rem + .75rem); }
@media (max-width: 620px) { .scale { margin-left: 0; } }
.opts {
  display: grid; grid-template-columns: repeat(11, 1fr);
  border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; background: var(--card);
}
.opt { position: relative; display: block; }
.opt + .opt { border-left: 1px solid var(--rule-soft); }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.opt .cell {
  display: block; text-align: center; padding: .62rem .1rem;
  font-size: .92rem; font-variant-numeric: tabular-nums; color: var(--ink-2);
  transition: background .18s, color .18s;
}
.opt:hover .cell { background: var(--accent-wash); color: var(--accent-ink); }
.opt input:checked + .cell { background: var(--ink); color: var(--paper); }
.opt input:focus-visible + .cell { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.scale-anchors {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .7rem; color: var(--ink-3); margin-top: .4rem;
}
.scale-anchors span:nth-child(2) { text-align: center; }
.scale-anchors span:last-child { text-align: right; }
.unanswered {
  color: var(--attention); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  margin: .45rem 0 0;
}

.ctx-field {
  width: 100%; max-width: 30rem; font: inherit; font-size: 1.15rem;
  font-family: 'Playfair Display', Georgia, serif;
  padding: .5rem 0; border: 0; border-bottom: 1px solid var(--rule);
  background: none; color: var(--ink); transition: border-color .25s;
}
.ctx-field:focus { outline: none; border-bottom-color: var(--accent); }

/* ── results ──────────────────────────────────────────────────────────── */
.results-grid {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(300px, 1.05fr) 1fr; align-items: start;
}
@media (max-width: 880px) { .results-grid { grid-template-columns: 1fr; } }

.chart-leaf {
  background: var(--card); border: 1px solid var(--rule); border-radius: 2px;
  padding: 1.1rem 1.1rem 1.3rem; box-shadow: var(--shadow-leaf);
}
.radar { width: 100%; height: auto; display: block; }
.radar-ring { fill: none; stroke: var(--rule); stroke-width: 1; }
.radar-ring.outer { stroke: var(--ink-3); }
.radar-spoke { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; }
.radar-ringlabel { fill: var(--ink-3); font-size: 9px; font-family: Inter, sans-serif; font-variant-numeric: tabular-nums; }
.radar-axislabel { fill: var(--ink-2); font-size: 11px; font-family: Inter, sans-serif; letter-spacing: .02em; }
.radar-hit { cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .radar-series { animation: draw .85s cubic-bezier(.2,.7,.3,1) backwards; }
  .radar-series:nth-of-type(2) { animation-delay: .09s; }
  .radar-series:nth-of-type(3) { animation-delay: .18s; }
  .radar-series:nth-of-type(4) { animation-delay: .27s; }
  .radar-series:nth-of-type(5) { animation-delay: .36s; }
}
@keyframes draw { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.radar-series { transform-origin: center; transform-box: view-box; }

.legend {
  list-style: none; margin: 1rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: .45rem 1.3rem; font-size: .85rem; color: var(--ink-2);
}
.legend li { display: flex; align-items: center; gap: .5rem; }
.legend-swatch { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.legend-dash {
  width: 16px; height: 0; display: inline-block; flex: 0 0 auto;
  border-top: 1.5px dashed var(--ink-3);
}

/* Spider / compass — two views of the same numbers, never two sets of numbers. */
.viewswitch { display: inline-flex; border: 1px solid var(--rule); border-radius: 2px; margin-bottom: .9rem; }
.viewswitch button {
  font: inherit; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  background: none; border: 0; color: var(--ink-3); cursor: pointer; padding: .48rem .95rem;
  transition: background .2s, color .2s;
}
.viewswitch button + button { border-left: 1px solid var(--rule); }
.viewswitch button:hover { color: var(--ink); }
.viewswitch button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.compass-benchmark { pointer-events: none; }
.chart-note { font-size: .8rem; color: var(--ink-3); margin: .9rem 0 0; max-width: none; }

/* Index tiles — the third required output, set as broadsheet numerals. */
.index-tiles { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); margin: 0 0 1.8rem; }
.tile { border-top: 2px solid var(--ink); padding: .75rem 0 0; }
.tile .n {
  font-family: 'Playfair Display', Georgia, serif; font-size: 2.9rem; line-height: .95;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em; display: block; margin-bottom: .35rem;
}
.tile .lbl { font-size: .87rem; color: var(--ink-2); display: flex; align-items: center; gap: .45rem; }
.tile .rank { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: .3rem; }

.table-wrap { overflow-x: auto; }
table.scores { border-collapse: collapse; width: 100%; font-size: .89rem; min-width: 350px; }
table.scores th, table.scores td { text-align: right; padding: .62rem .55rem; border-bottom: 1px solid var(--rule-soft); }
table.scores th:first-child, table.scores td:first-child { text-align: left; padding-left: 0; }
table.scores td:last-child, table.scores th:last-child { padding-right: 0; }
table.scores thead th {
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  border-bottom-color: var(--ink); vertical-align: bottom;
}
table.scores tbody th { color: var(--ink-2); font-weight: 400; }
table.scores td { font-variant-numeric: tabular-nums; color: var(--ink-2); }
table.scores tr.index-row th, table.scores tr.index-row td {
  border-top: 2px solid var(--ink); border-bottom: 0; padding-top: .7rem;
  color: var(--ink); font-size: 1rem;
}
td.b-high { color: var(--good); }
td.b-low { color: var(--attention); }
td.b-high::after, td.b-low::after { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-left: .45rem; vertical-align: middle; background: currentColor; }

.rec { border-top: 1px solid var(--rule); padding: 1.5rem 0 .4rem; }
.rec:first-of-type { border-top: 2px solid var(--ink); }
.rec h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.rec .dim { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); display: block; margin-bottom: .1rem; }
.rec p { font-size: .95rem; color: var(--ink-2); }
.rec .use { color: var(--ink-3); font-size: .89rem; padding-left: .9rem; border-left: 1px solid var(--rule); }
.rec .fromdisc { border-top: 1px solid var(--rule-soft); padding-top: .8rem; margin-top: 1rem; color: var(--ink-3); font-size: .89rem; }

.formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem;
  background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 2px;
  padding: .9rem 1rem; overflow-x: auto; color: var(--ink-2); white-space: pre; line-height: 1.7;
}
details.method { margin-top: 1.8rem; }
details.method > summary {
  cursor: pointer; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); padding: .6rem 0; border-top: 1px solid var(--rule-soft); list-style: none;
}
details.method > summary::marker, details.method > summary::-webkit-details-marker { display: none; }
details.method > summary::before { content: '+ '; color: var(--accent-ink); }
details.method[open] > summary::before { content: '– '; }

/* ── discussion ───────────────────────────────────────────────────────── */
.dilemma { margin-top: .3rem; }
.dilemma textarea {
  width: 100%; min-height: 104px; font: inherit; font-size: .95rem; padding: .7rem .8rem;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--paper);
  color: var(--ink); resize: vertical; transition: border-color .25s;
}
.dilemma textarea:focus { outline: none; border-color: var(--accent); }
.card .prompt { font-family: 'Playfair Display', Georgia, serif; font-size: 1.05rem; line-height: 1.42; color: var(--ink); margin: .2rem 0 .8rem; }

/* The cross-matrix (macro instrument, §Step 5). Band is never colour-alone: every cell shows its
   number, and the green/red lists are restated as text in the interpretation below the grid. */
table.matrix { font-size: .82rem; min-width: 640px; }
table.matrix thead th { text-align: right; vertical-align: bottom; font-size: .62rem; line-height: 1.25; }
table.matrix tbody th { font-weight: 400; color: var(--ink-2); font-size: .8rem; max-width: 15rem; }
table.matrix td { font-variant-numeric: tabular-nums; }
td.mx-green { color: var(--good); background: var(--good-wash); }
td.mx-red { color: var(--attention); background: var(--attention-wash); }
td.mx-green::after, td.mx-red::after {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  margin-left: .4rem; vertical-align: middle; background: currentColor;
}

/* Custom weights — the advanced option the source document recommends. */
.weights { padding: .9rem 0 .2rem; }
.wrow { display: flex; align-items: center; gap: .8rem; padding: .38rem 0; border-bottom: 1px solid var(--rule-soft); }
.wrow > span:first-child { flex: 1 1 auto; font-size: .92rem; color: var(--ink-2); }
.wrow input {
  width: 6.5rem; font: inherit; font-size: .9rem; text-align: right;
  font-variant-numeric: tabular-nums; padding: .32rem .5rem;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--card); color: var(--ink);
}
.wrow input:focus { outline: none; border-color: var(--accent); }
.wrow .pct { color: var(--ink-3); font-size: .85rem; width: 1rem; }

/* Long-form pages: the privacy notice and anything like it. */
.prose { max-width: 68ch; }
.prose section + section { margin-top: 2rem; }
.prose h2 {
  font-size: 1.15rem; margin-bottom: .6rem;
  border-top: 1px solid var(--rule); padding-top: .9rem;
}
.prose p { color: var(--ink-2); }

.notice {
  border-left: 2px solid var(--accent); background: var(--accent-wash);
  padding: .9rem 1.1rem; font-size: .9rem; color: var(--ink-2); margin: 0 0 1.8rem; border-radius: 0 2px 2px 0;
}
.notice strong { color: var(--ink); }
.notice p { margin: 0; max-width: none; }

/* ── footer ───────────────────────────────────────────────────────────── */
footer.site { border-top: 1px solid var(--rule); margin-top: 3rem; background: var(--paper-2); }
footer.site .in {
  max-width: var(--maxw); margin: 0 auto; padding: 1.6rem clamp(1rem, 3vw, 2rem);
  display: flex; gap: 1.3rem; align-items: center; flex-wrap: wrap;
  font-size: .8rem; color: var(--ink-3);
}
footer.site img { height: 34px; }
footer.site .spacer { flex: 1 1 auto; }

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

/* Nothing is hidden at any breakpoint — small screens reflow, they never drop a feature. */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .masthead img.logo { height: 25px; }
  .hm-link { font-size: .66rem; padding: .42rem .6rem; letter-spacing: .08em; }
  .opt .cell { padding: .55rem .05rem; font-size: .82rem; }
  .q .qhead { flex-direction: column; gap: .1rem; }
  .q .qcode { padding-top: 0; }
  .tile .n { font-size: 2.4rem; }
}

/* ── print / PDF (REQ-29) ─────────────────────────────────────────────── */
@media print {
  :root { --paper: #fff; --paper-2: #fff; --card: #fff; --ink: #000; --ink-2: #222; --ink-3: #555; --rule: #bbb; --rule-soft: #ddd; }
  body { background: #fff; background-image: none; font-size: 10.5pt; }
  main > * { animation: none !important; }
  .masthead { position: static; backdrop-filter: none; }
  .no-print, .actions, .subject-tabs, .langswitch, .themeswitch, .trail, details.method { display: none !important; }
  /* The Heritage Monitor link stays in print — it was hidden here last time. */
  .hm-link { display: inline-flex !important; border-color: #000; color: #000; }
  .hm-link::before { display: none; }
  .hm-link::after { content: ' (' attr(href) ')'; letter-spacing: 0; text-transform: none; font-size: .82em; }
  .guide { display: flex !important; break-inside: avoid; }
  .card, .block, .tile, .chart-leaf { break-inside: avoid; box-shadow: none; }
  .rec { break-inside: auto; }
  .rec h3 { break-after: avoid; }
  main { max-width: none; padding: 0; }
  .results-grid { grid-template-columns: 1fr; }
  .radar { max-width: 430px; }
  a { color: #000; }
}