/* dossier.css — the topic pages (fatherhood, suicide, family law, education).
   One shared system so the four dossiers read as chapters of one document
   instead of four copies of one template. Loaded after styles.css, which
   owns the tokens. Everything here is night-palette only: the dossiers do
   not follow the site theme, they are always the dark record. */

body.dossier {
  background:
    radial-gradient(ellipse 120% 70% at 80% -10%, rgba(43, 76, 172, .28), transparent 55%),
    linear-gradient(180deg, #0a0f20 0%, #090e1d 60%, #06090f 100%);
  color: var(--night-ink);
  min-height: 100vh;
}

/* Paper grain over the whole page: the plates are printed, so is the page. */
body.dossier::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.dz-shell { position: relative; z-index: 1; max-width: 62rem; margin: 0 auto; padding: 1.2rem 1.2rem 5rem; }

/* ---- top bar: sticky, so the ask is never off screen ---- */
.dz-top {
  position: sticky; isolation: isolate; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 0 .7rem; margin-bottom: 2.4rem;
  background: rgba(7, 11, 21, .88);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--night-rule), 0 18px 30px -28px #000;
}
/* The bar spans the shell's gutters so nothing shows through beside it. */
.dz-top::before {
  content: ""; position: absolute; inset: 0 -1.2rem; z-index: -1;
  background: inherit; box-shadow: inherit;
}
.dz-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--night-ink); font-family: var(--mono); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.dz-brand img { width: 1.5rem; height: 1.5rem; filter: brightness(1.6) saturate(.85); }
.dz-top-acts { display: flex; align-items: center; gap: .9rem; }
.dz-back { font-family: var(--mono); font-size: .8rem; color: var(--night-ink-3); text-decoration: none; text-underline-offset: 3px; }
.dz-back:hover { color: var(--night-ink); }
.dz-pin {
  border: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
  padding: .5rem .9rem; border-radius: 8px;
  background: var(--night-men); color: #06121f; font-weight: 600;
  transition: transform .18s var(--snap), filter .18s var(--ease);
}
.dz-pin:hover { transform: translateY(-1px); filter: brightness(1.08); }
.dz-pin.is-voiced { background: transparent; color: var(--night-ink-3); border: 1px solid var(--night-rule); font-weight: 400; }
@media (max-width: 34rem) { .dz-brand span { display: none; } .dz-back { display: none; } }

/* ---- hero ---- */
.fh-hero { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; margin-bottom: 3rem; }
@media (min-width: 54rem) { .fh-hero { grid-template-columns: 1.5fr 1fr; } }
.dz-kicker { font-family: var(--mono); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--night-ink-3); margin-bottom: 1rem; }
.dz-kicker::before { content: ""; display: inline-block; width: 1.6rem; height: 1px; background: var(--night-men); vertical-align: middle; margin-right: .7rem; opacity: .8; }
.dz-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 5rem); line-height: .94; letter-spacing: -.035em;
  max-width: 14ch; margin-bottom: 1.5rem; text-wrap: balance;
}
.dz-title em { font-style: normal; color: var(--night-men); }
.dz-lead { font-size: clamp(1.02rem, 1.9vw, 1.18rem); line-height: 1.65; color: var(--night-ink-2); max-width: 56ch; margin-bottom: .9rem; }
.dz-lead::first-line { color: var(--night-ink); }
.dz-rules {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .05em; line-height: 1.8;
  color: var(--night-ink-3); border-left: 2px solid var(--night-rule);
  padding-left: 1rem; margin: 1.6rem 0 0; max-width: 60ch;
}
.dz-rules b { color: var(--night-ink-2); font-weight: 600; }

/* Plate: printed, tipped in, with a plate number like an old edition. */
.fh-art { position: relative; padding-bottom: 1.5rem; }
.fh-art img {
  width: 100%; max-width: 22rem; margin: 0 auto; display: block;
  border: 1px solid var(--night-rule); border-radius: 12px;
  filter: sepia(.14) contrast(1.02);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
  transform: rotate(-.6deg);
}
.fh-art::after {
  content: attr(data-plate);
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--night-ink-3);
}

/* ---- the big-number strip ---- */
.fh-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: .7rem; margin: 0 0 2rem;
}
.fh-big {
  position: relative; overflow: hidden;
  border: 1px solid var(--night-rule); border-radius: 12px;
  background: color-mix(in srgb, var(--night-surface) 45%, transparent);
  padding: 1.1rem 1.2rem;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.fh-big:hover { border-color: color-mix(in srgb, var(--night-men) 45%, var(--night-rule)); transform: translateY(-2px); }
.fh-big::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--night-men); opacity: .55;
}
.fh-big.is-ghost::after { background: var(--night-ink-3); opacity: .3; }
.fh-big b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.02em; color: var(--night-men); line-height: 1; font-variant-numeric: tabular-nums; }
.fh-big.is-ghost b { color: var(--night-ink-3); }
.fh-big span { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--night-ink-3); margin-top: .5rem; line-height: 1.6; }

/* ---- sections ---- */
.dz-section { margin-top: 4.5rem; scroll-margin-top: 5rem; }
.dz-sec-head { display: flex; align-items: baseline; gap: .9rem; margin-bottom: .7rem; }
.dz-sec-no {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; color: var(--night-men);
  border: 1px solid color-mix(in srgb, var(--night-men) 30%, var(--night-rule));
  border-radius: 6px; padding: .2rem .55rem; flex: none;
}
.dz-section h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.5rem); letter-spacing: -.025em; color: var(--night-ink); line-height: 1.02; }
.dz-sec-lead { color: var(--night-ink-2); line-height: 1.65; max-width: 58ch; margin-bottom: 1.6rem; }
.dz-section::before {
  content: ""; display: block; height: 1px; margin-bottom: 2.4rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--night-men) 55%, transparent), var(--night-rule) 38%, transparent);
}

/* ---- fact nodes ---- */
.fnode {
  border-bottom: 1px solid color-mix(in srgb, var(--night-rule) 60%, transparent);
  position: relative;
}
.fnode::before {
  content: ""; position: absolute; left: -1.2rem; top: 0; bottom: 0; width: 2px;
  background: var(--night-men); opacity: 0; transform: scaleY(.3); transform-origin: top;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.fnode:has(.fnode-head[aria-expanded="true"])::before { opacity: .75; transform: scaleY(1); }
.fnode-head {
  display: grid; grid-template-columns: minmax(6.5rem, 11rem) 1fr auto;
  align-items: baseline; column-gap: 1.1rem;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1rem 0;
}
.fnode-fig {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem); letter-spacing: -.02em; line-height: 1.1;
  color: var(--night-men); font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
.fnode-claim {
  font-size: clamp(.95rem, 1.9vw, 1.08rem); line-height: 1.5;
  color: var(--night-ink); max-width: 60ch;
}
.fnode-head:hover .fnode-claim { color: var(--night-men); }
.node-chev { color: var(--night-ink-3); transition: transform .22s var(--snap); }
.fnode-head[aria-expanded="true"] .node-chev { transform: rotate(90deg); }
.fnode-panel { padding: 0 0 1.2rem; }
.fnode-panel > * { max-width: 64ch; }
.fnode-detail { font-size: .92rem; line-height: 1.65; color: var(--night-ink-2); }
.fnode-quote {
  font-size: .95rem; line-height: 1.6; font-style: italic; color: var(--night-ink-2);
  margin-top: .9rem; border-left: 2px solid color-mix(in srgb, var(--night-men) 40%, transparent);
  padding-left: 1rem;
}
.node-src { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .9rem; }
.node-src a { font-family: var(--mono); font-size: .74rem; color: var(--night-ink-2); text-underline-offset: 3px; }
.node-src a:hover { color: var(--night-ink); }
.node-no { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; color: var(--night-ink-3); margin-left: auto; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.fnode-panel:not([hidden]) { animation: panel-in .28s var(--ease); }

/* Phones: the figure is a heading over its claim, not a squeezed column. */
@media (max-width: 44rem) {
  .fnode-head { grid-template-columns: 1fr auto; column-gap: .8rem; row-gap: .3rem; }
  .fnode-fig { grid-column: 1 / -1; font-size: 1.25rem; }
  .fnode::before { left: -.7rem; }
}

/* ---- refuse block ---- */
.dz-refuse { border: 1px dashed var(--night-rule); border-radius: 12px; padding: 1.3rem 1.5rem; background: rgba(255, 255, 255, .012); }
.dz-refuse ul { list-style: none; display: grid; gap: .8rem; }
.dz-refuse li { font-size: .88rem; line-height: 1.6; color: var(--night-ink-3); max-width: 70ch; padding-left: 1.6rem; position: relative; }
.dz-refuse li::before { content: "✕"; position: absolute; left: 0; top: .05rem; color: var(--night-ink-3); opacity: .55; font-size: .8rem; }
.dz-refuse li b { color: var(--night-ink-2); font-weight: 600; }

/* ---- the reading rail: where you are in the record ---- */
.dz-rail {
  position: fixed; right: max(1rem, calc((100vw - 62rem) / 2 - 4.6rem)); top: 50%;
  transform: translateY(-50%); z-index: 30;
  display: none; flex-direction: column; gap: .55rem;
}
@media (min-width: 78rem) { .dz-rail { display: flex; } }
.dz-rail a {
  display: flex; align-items: center; gap: .55rem; text-decoration: none;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  color: var(--night-ink-3); opacity: .55; transition: opacity .2s var(--ease), color .2s var(--ease);
}
.dz-rail a i { display: block; width: 1.1rem; height: 2px; background: currentColor; font-style: normal; transition: width .25s var(--snap); }
.dz-rail a:hover { opacity: 1; color: var(--night-ink-2); }
.dz-rail a.is-here { opacity: 1; color: var(--night-men); }
.dz-rail a.is-here i { width: 2.1rem; }

/* ---- closing ---- */
.dz-close { margin-top: 5rem; text-align: center; }
.dz-close > p { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 3.8vw, 2.3rem); letter-spacing: -.025em; max-width: 28ch; margin: 0 auto 1.6rem; text-wrap: balance; line-height: 1.06; }
.dz-close > p em { font-style: normal; color: var(--night-men); }
.dz-acts { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.dz-acts .voice-btn { font-size: clamp(1rem, 2vw, 1.2rem); padding: .95rem 2rem; }
.dz-acts .voice-btn.is-voiced { background: transparent; color: var(--night-ink); border: 1px solid var(--night-rule); box-shadow: none; opacity: 1; }
.dz-count { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; color: var(--night-ink-3); }
.dz-count b { color: var(--night-ink); font-variant-numeric: tabular-nums; }
.dz-links { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.dz-link {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; border: 1px solid var(--night-rule); border-radius: 8px;
  background: color-mix(in srgb, var(--night-surface) 60%, transparent);
  color: var(--night-ink-2); font-family: var(--mono); font-size: .82rem;
  text-decoration: none; cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.dz-link:hover { color: var(--night-ink); border-color: var(--night-ink-3); }
.dz-foot { text-align: center; margin-top: 3rem; font-size: .8rem; color: var(--night-ink-3); }
.dz-foot a { color: var(--night-ink-2); }

/* ---- reveal ---- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .fnode-panel:not([hidden]) { animation: none; }
}

/* ---- the tally (suicide.html): the page's one live element.
   One mark per 64.0 seconds, which is WHO's 2021 male suicide count
   divided into the year. Nothing is estimated live; the rate is fixed
   and the arithmetic is printed under it. ---- */
.tally {
  margin: 3.2rem 0 1rem; padding: 1.6rem 1.5rem 1.4rem;
  border: 1px solid var(--night-rule); border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(124, 192, 245, .07), transparent 60%),
    color-mix(in srgb, var(--night-surface) 40%, transparent);
  position: relative; overflow: hidden;
}
.tally-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.2rem; }
.tally-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--night-ink-3); }
.tally-clock { font-family: var(--mono); font-size: .8rem; color: var(--night-ink-2); font-variant-numeric: tabular-nums; margin-left: auto; }
.tally-n {
  font-family: var(--display); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(2.6rem, 9vw, 4.6rem); color: var(--night-men);
  font-variant-numeric: tabular-nums; margin: .5rem 0 .2rem;
}
.tally-n small { font-family: var(--mono); font-weight: 400; font-size: .8rem; letter-spacing: .06em; color: var(--night-ink-2); margin-left: .8rem; text-transform: none; }
.tally-marks { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .34rem; min-height: 2.2rem; margin: 1rem 0 .9rem; }
.tally-marks .tk {
  display: block; width: 2px; height: 1.7rem; background: var(--night-men);
  transform: skewX(-8deg); transform-origin: bottom;
  animation: tk-in .5s var(--snap);
}
.tally-marks .tk.is-five {
  width: 2px; height: 2rem; margin-left: -1.5rem; margin-right: .55rem;
  transform: rotate(-72deg); transform-origin: center;
}
@keyframes tk-in { from { transform: skewX(-8deg) scaleY(0); opacity: .2; } to { opacity: 1; } }
.tally-sweep { height: 2px; background: var(--night-rule); border-radius: 2px; overflow: hidden; }
.tally-sweep i { display: block; height: 100%; width: 0; background: var(--night-men); opacity: .8; }
.tally-note { font-family: var(--mono); font-size: .72rem; line-height: 1.75; color: var(--night-ink-3); margin-top: .9rem; max-width: 66ch; }
.tally-note a { color: var(--night-ink-2); }
@media (prefers-reduced-motion: reduce) {
  .tally-marks .tk { animation: none; }
  .tally-sweep { display: none; }
}

/* Some figures are not numbers, they are one-line findings. Set those as
   a label instead of a headline so the column keeps its rhythm and the
   real numbers keep their weight. The builders add is-long past 22 chars. */
.fnode-fig.is-long {
  font-family: var(--mono); font-weight: 500;
  font-size: .78rem; line-height: 1.55; letter-spacing: .01em;
  color: var(--night-ink-2); text-transform: none;
  align-self: start; padding-top: .3rem;
}