/* case.css (Fable, 2026-10-30, V9.7): the dossier pages' own parts, on top of v9.css (header, footer, contact, buttons). One card: its
   head, the verdict beside the map, the key facts beside the summary, the four findings, the sources beside what you receive, the mention.
   The layout Z validated (brick 12, layout a), measured on the legacy page and written again without it. Marine and white; the language's
   accent only in the figures' lit strokes; nothing moves. */
.d-page { padding: 100px var(--edge) 0; }
.dossier { --div: #101C3A; --ln-w: 1.25px; --ln-off: rgba(255,255,255,.08); --ln-ring: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: #0A1328; box-shadow: 0 1px 2px rgba(0,0,0,.4); overflow: hidden; }
.dossier h1, .dossier h2, .dossier h3, .dossier p, .dossier dl, .dossier dd, .dossier ol, .dossier ul, .dossier figure { margin: 0; }

/* the head: title, dates and places, the family on the right */
/* review 2026-10-30 (item 30): the title stands above the card, at page-title size, not inside the card's bar */
.d-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 24px; }
.d-head h1 { flex: 1 0 100%; margin: 0; font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
/* review bg70 item 1 (2026-10-31): under the title, what the page is; its first sentence links to the home */
.d-sample { flex: 1 0 100%; margin: 0; font-size: 15px; line-height: 1.45; color: var(--fg-1); }
.d-sample a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; transition: text-decoration-color var(--fast) var(--ease); }
.d-sample a:hover { text-decoration-color: var(--acc); }
.d-meta { margin: 0; font-size: 15px; line-height: 1.4; color: var(--fg-2); }
.d-meta b { font-weight: 400; color: var(--fg-2); }
.d-fam { display: flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 6px; box-shadow: inset 0 0 0 1.25px rgba(255,255,255,.6); font-size: 14px; line-height: 1; font-weight: 500; }

/* the body: row 1 verdict | map, row 2 key facts | summary, hairlines between */
.d-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.d-verdict { grid-column: 1 / 5; padding: 24px; border-right: 1px solid var(--div); }
.d-verdict p { font-size: 17px; line-height: 1.4; font-weight: 500; }
.d-verdict p + p { margin-top: 16px; }
.d-k { display: block; margin-bottom: 2px; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--fg-2); }
.d-map { grid-column: 5 / 13; padding: 24px; }
.d-map img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.d-map figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.d-map figcaption b { font-weight: 500; color: var(--fg-1); }
.d-facts { grid-column: 1 / 7; padding: 24px; border-top: 1px solid var(--div); border-right: 1px solid var(--div); }
.d-summary { grid-column: 7 / 13; padding: 24px; border-top: 1px solid var(--div); }
.d-h { font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--fg-2); }
.d-facts dl > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 0 16px; padding: 9px 0; font-size: 14px; line-height: 1.5; }
.d-facts dl > div + div { border-top: 1px solid rgba(255,255,255,.06); }
.d-facts dt { color: var(--fg-2); }
.d-facts dd b { font-weight: 500; }
.d-facts .d-nolabel dd { grid-column: 1 / -1; }
.d-summary p { max-width: 62ch; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--fg-1); }
.d-summary b { font-weight: 500; color: var(--fg); }

/* the figures (tools/line.py): drawn from a number written beside them; the lit strokes in the language's accent */
.d-fig { display: block; margin: 10px 0 8px; }
.d-facts .d-fig { margin: 6px 0 0; }
.lg { display: block; max-width: 100%; height: auto; overflow: visible; fill: none; stroke-linecap: butt; shape-rendering: geometricPrecision; }
.lg * { vector-effect: non-scaling-stroke; stroke-width: var(--ln-w); }
.lg .g-off { stroke: var(--ln-off); }
.lg .g-on { stroke: var(--acc); filter: drop-shadow(0 0 2.5px rgba(var(--acc-rgb), .55)); }
.lg .g-pt-on { fill: var(--acc); stroke: none; filter: drop-shadow(0 0 2.5px rgba(var(--acc-rgb), .55)); }
.lg .g-pt-off { fill: none; stroke: var(--ln-ring); }

/* the findings: two by two, the number in a ring */
.d-finds { padding: 24px; border-top: 1px solid var(--div); }
.d-finds ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; padding: 0; list-style: none; }   /* 2 x 2 (V9.7): four abreast left 200 px per card, the headlines ran to four or five lines */
.d-finds li { position: relative; padding: 16px 16px 16px 52px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.024); }
.d-n { position: absolute; left: 16px; top: 17px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; box-shadow: inset 0 0 0 1.25px rgba(255,255,255,.6); font-size: 14px; line-height: 1; font-weight: 500; }
.d-finds h3 { font-size: 19px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.d-finds p { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--fg-1); }
.d-finds h3 + .d-fig + p { margin-top: 0; }
.d-finds b { font-weight: 500; color: var(--fg); }
.d-finds .d-src { font-size: 14px; color: var(--fg-2); }

/* the sources with their grades, beside what you receive */
.d-foot { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; padding: 24px; border-top: 1px solid var(--div); }
.d-sources { margin-top: 4px; padding: 0; list-style: none; }
.d-sources li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 20px; padding: 10px 0; }
.d-sources li + li { border-top: 1px solid rgba(255,255,255,.06); }
.d-sk { font-size: 14px; line-height: 1.5; font-weight: 500; }
.d-sv { grid-column: 1; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.d-g { grid-column: 2; grid-row: 1 / span 2; align-self: start; display: flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); font-size: 14px; line-height: 1; font-weight: 500; }
.d-read { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.09); font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.d-receive { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--fg-1); }
.d-price { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.d-mention { padding: 14px 24px 18px; border-top: 1px solid var(--div); font-size: 14px; line-height: 1.5; color: var(--fg-2); }

/* the link to the other dossier */
.d-next { display: flex; justify-content: flex-end; margin-top: 16px; }
.d-next a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 17px; line-height: 1.3; color: var(--fg-1); transition: color var(--fast) var(--ease); }
.d-next a:hover { color: var(--fg); }
.d-next .i-r { width: 16px; height: 16px; flex: none; transition: transform var(--fast) var(--ease); }
.d-next a:hover .i-r { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .d-next .i-r { transform: none !important; } }

/* the contact of a dossier stands alone (no examples beside it) */
.d-page + .contact { margin-top: 48px; }

/* tablet: one column in the body */
@media (max-width: 1023.98px) {
  .d-body { grid-template-columns: minmax(0, 1fr); }
  .d-verdict, .d-map, .d-facts, .d-summary { grid-column: 1; padding: 20px 16px; border-right: 0; }
  .d-map, .d-facts, .d-summary { border-top: 1px solid var(--div); }
  .d-finds ol { grid-template-columns: minmax(0, 1fr); }   /* two columns of 330 px pressed the headlines to four lines */
}
/* phone */
@media (max-width: 767.98px) {
  .d-page { padding-top: 80px; }
  .d-head { margin-bottom: 16px; }
  .d-head h1 { font-size: 28px; }
  .d-finds { padding: 20px 16px; }
  .d-finds ol { grid-template-columns: minmax(0, 1fr); }
  .d-finds li { padding: 14px 14px 14px 48px; }
  .d-n { left: 14px; top: 15px; }
  .d-finds h3 { font-size: 17px; }   /* the longest headline held four lines at 19 px */
  .d-foot { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; }
  .d-mention { padding: 12px 16px 16px; }
  .d-page + .contact { margin-top: 32px; }
}