/* ============================================================
   ARKSALES.LTD — Tacto design, ported from tacto-inc.com's own
   stylesheet at all three of its tiers.

   Units (measured):
     base   <980px    calc(N * 0.266667vw)   375 canvas
     >=980px          calc(N * 0.073206vw)   1366 canvas
     >=1920px         calc(N * 1.405564px)   frozen

   Values below are theirs. Where a component has no equivalent on
   tacto-inc.com (the film block, the ARK interiors) it is styled in
   the same idiom. Font: Switzer 500 stands in for Neue Haas Grotesk
   Display, which is licensed only to their domain.

   Background is pure white by the owner's decision, replacing
   their #efeeea. Everything else is as measured.

   Overrides Colours.md and Typography.md for this site.
   ARK-system version: .ark-system-backup/ark.css
   ============================================================ */

:root {
  --paper:   #FFFFFF;
  --surface: #FFFFFF;
  --ink:     #1f1f1d;
  --muted:   #878683;
  --rule:    #1f1f1d;
  --accent:  #0f870e;

  --sage-fill: #FFFFFF; --sage: #1f1f1d; --sage-text: #1f1f1d; --clay: #1f1f1d;

  --u: 0.266667vw;

  --s1: calc(5 * var(--u));   --s2: calc(10 * var(--u));  --s3: calc(15 * var(--u));
  --s4: calc(20 * var(--u));  --s5: calc(30 * var(--u));  --s6: calc(40 * var(--u));
  --s7: calc(50 * var(--u));  --s8: calc(70 * var(--u));  --s9: calc(100 * var(--u));
  --s10: calc(130 * var(--u)); --s11: calc(150 * var(--u));

  --pad: calc(20 * var(--u));      /* their .container padding */
  --indent: calc(70 * var(--u));   /* their inner indent */
  --gutter: calc(71 * var(--u));
  --header-h: calc(60 * var(--u));
}
@media screen and (min-width: 980px) {
  :root {
    --u: 0.073206vw;
    --pad: calc(40 * var(--u));
    --indent: calc(472 * var(--u));  /* their section.nav / footer indent */
    --gutter: calc(150 * var(--u));
    --header-h: calc(80 * var(--u));
  }
}
@media screen and (min-width: 1920px) {
  :root { --u: 1.405564px; }
  .container { width: 1920px; margin: 0 auto; }
}

/* ---- reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Switzer', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(16 * var(--u));
  line-height: calc(23 * var(--u));
}
h1,h2,h3,h4,h5,h6,p,li,dt,dd,a,span,button,input,textarea,label,figcaption {
  font-family: inherit; font-weight: 500; font-style: normal;
}
h1,h2,h3,h4,h5,h6,p { margin: 0; }
b, strong { font-weight: 500; }
* { border-radius: 0 !important; transition: none !important; animation: none !important; }
img, video { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.muted { color: var(--muted); }
.hl { color: var(--accent); }

.container { padding: var(--pad); }

/* ---- header — fixed, as theirs ------------------------------- */
header.masthead {
  position: fixed; z-index: 999; top: 28px; /* under the family bar */ left: 0; width: 100%;
  display: flex; align-items: flex-start;
  padding: var(--pad) var(--pad) 0 var(--pad);
  background: transparent;
}
header.masthead .masthead-in { display: flex; align-items: flex-start; width: 100%; padding: 0; gap: 0; }
.brand { display: flex; align-items: baseline; gap: calc(14 * var(--u)); }
.wordmark { font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); color: var(--ink); }
.clock { font-size: calc(13 * var(--u)); line-height: calc(23 * var(--u)); color: var(--muted); font-variant-numeric: tabular-nums; }
.nav {
  flex: 1; display: flex; align-items: flex-start; justify-content: flex-end;
  gap: calc(24 * var(--u)); margin: 0;
  font-size: calc(13 * var(--u)); line-height: calc(15 * var(--u));
}
.nav a { color: var(--ink); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
.index-btn { display: none; }
@media screen and (min-width: 980px) {
  .wordmark { font-size: calc(18 * var(--u)); line-height: calc(25 * var(--u)); }
  .clock { font-size: calc(16 * var(--u)); line-height: calc(25 * var(--u)); }
  .nav { font-size: calc(16 * var(--u)); line-height: calc(18.3 * var(--u)); }
}
@media screen and (max-width: 979px) {
  .nav { display: none; }
  .nav.open { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: var(--header-h); background: var(--paper); padding: var(--pad); gap: var(--s3); }
  .index-btn { display: block; margin-left: auto; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; font-size: calc(13 * var(--u)); }
}

/* ---- fv ------------------------------------------------------ */
main.top { display: block; }
section { padding: 0; border: 0; }
section.fv .container { padding: var(--pad); }
section.fv .motion-text {
  box-sizing: content-box;
  padding: calc(72 * var(--u)) 0 0 0;
  font-size: calc(76 * var(--u)); line-height: calc(68 * var(--u));
  margin-left: calc(-3 * var(--u));
}
section.fv .copy { padding-top: calc(10 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(27 * var(--u)); letter-spacing: .02em; }
section.fv .desc { padding-top: calc(40 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(21 * var(--u)); }
@media screen and (min-width: 980px) {
  section.fv .motion-text { padding: calc(96 * var(--u)) 0 0 0; font-size: calc(200 * var(--u)); line-height: calc(189 * var(--u)); margin-left: calc(-2 * var(--u)); }
  section.fv .copy { padding-top: calc(15 * var(--u)); font-size: calc(52 * var(--u)); line-height: calc(52 * var(--u)); letter-spacing: 0; }
  section.fv .desc { padding-top: calc(22 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(35 * var(--u)); max-width: calc(700 * var(--u)); }
}

/* ---- work — the film. The one thing on the page. --------------- */
section.work .container { padding: calc(100 * var(--u)) var(--pad) 0 var(--pad); }
section.work .film { width: 100%; border: 1px solid var(--rule); background: var(--paper); }
section.work .header { display: flex; align-items: center; font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); padding-top: calc(30 * var(--u)); }
section.work .header .date { padding-right: calc(68 * var(--u)); }
section.work .header .new { color: var(--accent); }
section.work h4 { padding-top: calc(15 * var(--u)); font-size: calc(22 * var(--u)); line-height: calc(34 * var(--u)); }
section.work .external { display: block; padding-top: calc(15 * var(--u)); }
section.work .external a { text-decoration: underline; text-underline-offset: 3px; }
@media screen and (min-width: 980px) {
  section.work .container { padding: calc(160 * var(--u)) var(--pad) 0 var(--pad); }
  section.work .header { font-size: calc(18 * var(--u)); line-height: calc(25 * var(--u)); padding-top: calc(40 * var(--u)); }
  section.work h4 { padding-top: calc(20 * var(--u)); font-size: calc(34 * var(--u)); line-height: calc(46 * var(--u)); max-width: calc(900 * var(--u)); }
  section.work .external { padding-top: calc(25 * var(--u)); }
}

/* ---- proof — examples, not prose ------------------------------- */
section.proof .container { border-top: 1px solid var(--rule); padding: calc(40 * var(--u)) var(--pad); }
section.proof .header { display: flex; align-items: center; font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); padding-bottom: calc(30 * var(--u)); }
section.proof .header .date { padding-right: calc(68 * var(--u)); color: var(--muted); }
section.proof .header .new { color: var(--accent); }
section.proof .compare { display: grid; grid-template-columns: 1fr; gap: calc(40 * var(--u)); }
section.proof p.muted { padding-bottom: calc(15 * var(--u)); }
@media screen and (min-width: 980px) {
  section.proof .container { padding: calc(60 * var(--u)) var(--pad); }
  section.proof .header { font-size: calc(18 * var(--u)); line-height: calc(25 * var(--u)); }
  section.proof .compare { grid-template-columns: 1fr 1fr; gap: calc(80 * var(--u)); }
}

/* ---- message -------------------------------------------------- */
section.message .container { padding: calc(130 * var(--u)) var(--pad) calc(100 * var(--u)) calc(70 * var(--u)); }
section.message .en { font-size: calc(26 * var(--u)); line-height: calc(26 * var(--u)); }
section.message .ja { padding-top: calc(50 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(17 * var(--u)); color: var(--muted); }
@media screen and (min-width: 980px) {
  section.message .container {
    padding: calc(286 * var(--u)) var(--pad) calc(250 * var(--u)) var(--pad);
    display: flex; flex-direction: row-reverse; align-items: flex-end; justify-content: space-between;
  }
  section.message .en { text-align: right; font-size: calc(28 * var(--u)); line-height: calc(35 * var(--u)); width: calc(538 * var(--u)); }
  section.message .ja { padding-top: 0; font-size: calc(18 * var(--u)); line-height: calc(25 * var(--u)); width: calc(408 * var(--u)); }
}

/* ---- nav (the three big links) -------------------------------- */
section.sectionnav .container { padding: calc(150 * var(--u)) 0 calc(150 * var(--u)) calc(70 * var(--u)); }
section.sectionnav a { display: flex; color: var(--ink); font-size: calc(36 * var(--u)); line-height: calc(53 * var(--u)); }
section.sectionnav a:hover { text-decoration: none; color: var(--accent); }
@media screen and (min-width: 980px) {
  section.sectionnav .container { padding: calc(240 * var(--u)) var(--pad) calc(240 * var(--u)) var(--indent); }
  section.sectionnav a { font-size: calc(52 * var(--u)); line-height: calc(70 * var(--u)); }
}

/* ---- news ----------------------------------------------------- */
section.news h2 { font-size: calc(36 * var(--u)); line-height: calc(53 * var(--u)); padding: 0 0 calc(50 * var(--u)) var(--pad); }
ul.news { list-style: none; margin: 0; padding: 0; }
ul.news li { border-top: 1px solid var(--rule); padding: calc(40 * var(--u)) var(--pad) calc(40 * var(--u)) calc(71 * var(--u)); }
ul.news li .header { display: flex; align-items: center; font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); }
ul.news li .header .date { padding-right: calc(68 * var(--u)); }
ul.news li .header .new { color: var(--accent); }
ul.news li .body h4 { font-size: calc(22 * var(--u)); line-height: calc(34 * var(--u)); }
ul.news li .body h4 + h4 { padding-top: calc(15 * var(--u)); }
ul.news li .body .external { display: block; padding-top: calc(15 * var(--u)); }
@media screen and (min-width: 980px) {
  section.news h2 { font-size: calc(52 * var(--u)); line-height: calc(52 * var(--u)); padding: 0 0 calc(70 * var(--u)) var(--pad); }
  ul.news li { padding: calc(40 * var(--u)); display: flex; align-items: flex-start; }
  ul.news li .header { width: calc(432 * var(--u)); flex: 0 0 auto; flex-direction: row-reverse; font-size: calc(18 * var(--u)); line-height: calc(25 * var(--u)); }
  ul.news li .header .date { flex: 1; padding-right: 0; }
  ul.news li .header .new { width: calc(217 * var(--u)); }
  ul.news li .body { flex: 1; }
  ul.news li .body h4 { font-size: calc(34 * var(--u)); line-height: calc(46 * var(--u)); }
  ul.news li .body .external { padding-top: calc(25 * var(--u)); }
}

/* ---- footer — dashed, as theirs ------------------------------ */
footer {
  background: var(--paper);
  border-top: 1px dashed #000;
  padding: calc(110 * var(--u)) var(--pad) calc(35 * var(--u)) var(--pad);
  position: relative;
}
footer p, footer a { font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); }
footer .row { display: grid; grid-template-columns: calc(40 * var(--u)) 1fr; }
footer .row + .row, footer .lines + .row { margin-top: var(--s2); }
footer .idx { margin-top: calc(50 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(24 * var(--u)); }
footer .split { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: calc(24 * var(--u)); }
footer .split a { color: var(--muted); }
footer .lines.mt6 { margin-top: calc(50 * var(--u)); }
@media screen and (min-width: 980px) {
  footer { padding: calc(174 * var(--u)) var(--pad) calc(130 * var(--u)) calc(255 * var(--u)); }
}

/* ---- interior page shell (generated pages) --------------------- */
.wrap { padding-left: var(--pad); padding-right: var(--pad); }
main.top > section.wrap { padding-block: calc(60 * var(--u)); }
main.top > section.wrap:first-of-type { padding-top: calc(120 * var(--u)); }
@media screen and (min-width: 980px) {
  main.top > section.wrap { padding-block: calc(90 * var(--u)); }
  main.top > section.wrap:first-of-type { padding-top: calc(180 * var(--u)); }
}
.row, .v-only { display: grid; grid-template-columns: var(--gutter) minmax(0,1fr); column-gap: 0; }
.v-only > * { grid-column: 2; }
.measure { max-width: calc(538 * var(--u)); }
.sec-label, .page-label { margin-bottom: calc(40 * var(--u)); color: var(--muted); }

/* type scale for interior pages, mapped to their sizes */
.d-hero, .motion-text { font-size: calc(76 * var(--u)); line-height: calc(68 * var(--u)); }
.d-page, .tagline { font-size: calc(36 * var(--u)); line-height: calc(53 * var(--u)); text-transform: none; letter-spacing: 0; }
.d-open, .doctrine .line, .signature .line, .s-section { font-size: calc(26 * var(--u)); line-height: calc(30 * var(--u)); max-width: none; letter-spacing: 0; }
.s-head, .s-title, .s-item { font-size: calc(22 * var(--u)); line-height: calc(34 * var(--u)); }
.s-body, .s-cap, .e-sec { font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); }
.s-cap { color: var(--muted); }
.e-lede { font-size: calc(24 * var(--u)); line-height: calc(27 * var(--u)); }
.e-body { font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); }
.e-it { font-style: normal; }
.m-label, .m-nav, .m-btn, .m-val, .m-meta, .m-time, .m-big, .data {
  font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u));
  letter-spacing: 0; text-transform: none; color: inherit; font-variant-numeric: tabular-nums;
}
.m-label, .m-meta, .m-time { color: var(--muted); }
.m-big { font-size: calc(36 * var(--u)); line-height: calc(53 * var(--u)); }
@media screen and (min-width: 980px) {
  .d-hero { font-size: calc(200 * var(--u)); line-height: calc(189 * var(--u)); }
  .d-page, .tagline, .m-big { font-size: calc(52 * var(--u)); line-height: calc(52 * var(--u)); }
  .d-open, .doctrine .line, .signature .line, .s-section { font-size: calc(28 * var(--u)); line-height: calc(35 * var(--u)); }
  .s-head, .s-title, .s-item { font-size: calc(34 * var(--u)); line-height: calc(46 * var(--u)); }
  .e-lede { font-size: calc(28 * var(--u)); line-height: calc(35 * var(--u)); }
  .e-body { font-size: calc(18 * var(--u)); line-height: calc(35 * var(--u)); }
  .m-label, .m-nav, .m-btn, .m-val, .m-meta, .m-time, .data, .s-body, .s-cap, .e-sec { font-size: calc(18 * var(--u)); line-height: calc(25 * var(--u)); }
}
.ink { color: var(--ink); } .sage-text { color: var(--ink); } .clay { color: var(--ink); }
.cta-fill { background: none; color: var(--ink); padding: 0; border: 0; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   ARK COMPONENTS — kept working, restyled to Tacto
   ============================================================ */
.stream { margin: 0; padding: 0; list-style: none; }
.stream li { display: grid; grid-template-columns: var(--gutter) minmax(0,1fr); column-gap: 0; padding-block: var(--s1); }
.stream li + li { margin-top: 0; }
.stream .ev { font-size: calc(18 * var(--u)); line-height: calc(28 * var(--u)); }
.stream .who { color: var(--accent); }
.stream .fail { color: var(--muted); }
.stream .status { font-size: calc(16 * var(--u)); color: var(--muted); margin-left: var(--s3); }
.stream .end { color: var(--muted); }
.stream li[hidden] { display: none; }

.threshold { display: grid; grid-template-columns: var(--gutter) minmax(0,1fr); margin-top: var(--s2); }
.threshold .bar { display: flex; align-items: center; gap: var(--s3); }
.threshold .bar::before { content: ""; width: calc(24 * var(--u)); border-top: 1px solid var(--ink); }
.threshold .bar::after { content: ""; flex: 1; border-top: 1px solid var(--ink); }

.talk { margin: 0; }
.talk .turn { display: grid; grid-template-columns: var(--gutter) minmax(0,1fr); column-gap: 0; }
.talk .turn + .turn { margin-top: var(--s4); }
.talk .spk { font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); color: var(--muted); }
.talk .spk.cust { color: var(--ink); }
.talk .spk.rep { color: var(--accent); }
.talk .spk.bad { color: var(--muted); }
.talk .said { font-size: calc(22 * var(--u)); line-height: calc(34 * var(--u)); max-width: calc(900 * var(--u)); margin: 0; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: calc(60 * var(--u)); }
@media screen and (max-width: 979px) { .compare { grid-template-columns: 1fr; } }

.doctrine { padding-block: var(--s11); }
.doctrine .line { max-width: calc(900 * var(--u)); }
.doctrine .after { margin-top: var(--s6); }

.essay > section { padding-block: var(--s8) 0; padding-left: 0; }
.essay .esec { display: grid; grid-template-columns: var(--gutter) minmax(0,1fr); column-gap: 0; }
.essay .esec .num { font-size: calc(16 * var(--u)); color: var(--muted); }
.essay p { max-width: calc(900 * var(--u)); }

.card { background: none; border: 0; border-top: 1px solid var(--rule); padding: var(--s5) 0; }
.card + .card { margin-top: 0; }
.fields { display: grid; grid-template-columns: calc(200 * var(--u)) minmax(0,1fr); gap: var(--s2) 0; margin: 0; }
.fields dt { font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); color: var(--muted); }
.fields dd { margin: 0; font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); }
.fields dd.why { background: none; color: var(--accent); padding: 0; }
@media screen and (max-width: 979px) { .fields { grid-template-columns: 1fr; } .fields dd { margin-bottom: var(--s3); } }

.funnel { margin: 0; }
.funnel .stage { display: grid; grid-template-columns: var(--gutter) minmax(0,1fr); column-gap: 0; align-items: baseline; }
.funnel .n { text-align: right; padding-right: calc(30 * var(--u)); font-size: calc(52 * var(--u)); line-height: calc(60 * var(--u)); font-variant-numeric: tabular-nums; }
.funnel .name { font-size: calc(16 * var(--u)); color: var(--ink); }
.funnel .leak { font-size: calc(16 * var(--u)); color: var(--muted); font-style: normal; }
.funnel .arrow { display: grid; grid-template-columns: var(--gutter) minmax(0,1fr); color: var(--muted); }
.funnel .arrow span:first-child { text-align: right; padding-right: calc(30 * var(--u)); }
.funnel .stage.big .name { color: var(--accent); }
.funnel .row-body { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: baseline; }

.inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(240 * var(--u)), 1fr)); gap: var(--s5); }
.field label { display: block; margin-bottom: var(--s1); color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font-size: calc(18 * var(--u)); line-height: calc(28 * var(--u));
  color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  padding: var(--s1) 0; font-variant-numeric: tabular-nums;
}
.field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--accent); }
.field textarea { resize: vertical; min-height: calc(90 * var(--u)); }
.field.err input, .field.err textarea { border-bottom-color: var(--muted); }
.field .msg { color: var(--muted); }

.radios { display: flex; flex-wrap: wrap; gap: var(--s4); }
.radios label { border: 0; padding: 0; cursor: pointer; font-size: calc(16 * var(--u)); color: var(--muted); }
.radios input { position: absolute; opacity: 0; width: 0; height: 0; }
.radios label:has(input:checked) { background: none; color: var(--accent); }

button.cta { background: none; color: var(--ink); border: 0; border-bottom: 1px solid var(--ink); padding: var(--s1) 0; cursor: pointer; font-size: calc(22 * var(--u)); }
button.ghost { background: none; border: 0; color: var(--muted); padding: 0 calc(20 * var(--u)) 0 0; cursor: pointer; font-size: calc(16 * var(--u)); }
button.ghost[aria-pressed="true"], button.ghost.on { background: none; color: var(--accent); }

.score { background: none; border: 0; border-top: 1px solid var(--rule); padding: var(--s5) 0; max-width: calc(538 * var(--u)); }
.score .lines { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s5); margin-top: var(--s4); }
.score .lines .l { font-size: calc(16 * var(--u)); color: var(--muted); }
.score .lines .n { font-size: calc(16 * var(--u)); text-align: right; font-variant-numeric: tabular-nums; }
.score .lines .low { color: var(--accent); }
.score .total { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.score .verdict { margin-top: var(--s4); font-style: normal; }

.queue { background: none; border: 0; }
.queue .qrow { width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--rule); padding: var(--s5) 0; cursor: pointer; display: grid; grid-template-columns: calc(150 * var(--u)) calc(180 * var(--u)) calc(220 * var(--u)) minmax(0,1fr); gap: var(--s4); align-items: baseline; color: var(--ink); }
.queue .qrow:hover { border-left: 0; }
.queue .qrow:hover .s-item { text-decoration: underline; text-underline-offset: 3px; }
.queue .sev { font-size: calc(16 * var(--u)); color: var(--muted); }
.queue .sev.critical, .queue .sev.high { color: var(--accent); }
.queue .detail { padding: 0 0 var(--s5) 0; border-bottom: 0; background: none; }
@media screen and (max-width: 979px) { .queue .qrow { grid-template-columns: 1fr; gap: var(--s1); } }

.rec { display: grid; grid-template-columns: calc(200 * var(--u)) minmax(0,1fr); column-gap: 0; row-gap: var(--s3); }
.rec dt { font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); color: var(--muted); }
.rec dd { margin: 0; font-size: calc(18 * var(--u)); line-height: calc(28 * var(--u)); max-width: calc(900 * var(--u)); }
.rec dd.weak { color: var(--muted); }
.rec dd.better { color: var(--accent); }
@media screen and (max-width: 979px) { .rec { grid-template-columns: 1fr; row-gap: var(--s1); } .rec dd { margin-bottom: var(--s3); } }

.list { border-top: 0; }
.list .item { display: grid; grid-template-columns: var(--gutter) minmax(0,1fr) auto; column-gap: 0; padding: var(--s6) 0; border-top: 1px solid var(--rule); border-bottom: 0; align-items: baseline; color: var(--ink); }
.list .item:hover { border-left: 0; }
.list .item:hover .s-item { text-decoration: underline; text-underline-offset: 3px; }
.list .item[hidden] { display: none; }
@media screen and (max-width: 979px) { .list .item { grid-template-columns: 1fr; } }

.timeline .entry { display: grid; grid-template-columns: var(--gutter) minmax(0,1fr); column-gap: 0; padding-block: var(--s6); border-bottom: 0; border-top: 1px solid var(--rule); }
.timeline .yr { font-size: calc(16 * var(--u)); font-variant-numeric: tabular-nums; }
.timeline .yr.now { background: none; color: var(--accent); padding: 0; }

.three { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.three > div { padding-inline: var(--s5); }
.three > div:first-child { padding-left: 0; }
.three > div + div { border-left: 1px solid var(--rule); }
.three ul { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.three li { font-size: calc(16 * var(--u)); line-height: calc(26 * var(--u)); color: var(--muted); }
@media screen and (max-width: 979px) {
  .three { grid-template-columns: 1fr; }
  .three > div { padding: 0; }
  .three > div + div { border-left: 0; border-top: 1px solid var(--rule); margin-top: var(--s6); padding-top: var(--s6); }
}

.principle { max-width: calc(900 * var(--u)); }
.principle + .principle { margin-top: var(--s8); }
.principle .stmt { font-size: calc(28 * var(--u)); line-height: calc(35 * var(--u)); margin: 0; }
.principle .p { font-size: calc(18 * var(--u)); line-height: calc(28 * var(--u)); margin-top: var(--s3); }
.principle .fig { margin-top: var(--s3); color: var(--accent); }

.outcome + .outcome { margin-top: var(--s9); }
.outcome .n { font-size: calc(140 * var(--u)); line-height: calc(140 * var(--u)); background: none; color: var(--ink); padding: 0; display: block; margin: 0; font-variant-numeric: tabular-nums; }
.outcome .means { font-size: calc(28 * var(--u)); line-height: calc(35 * var(--u)); margin-top: var(--s3); }
.outcome .says { font-size: calc(18 * var(--u)); line-height: calc(28 * var(--u)); max-width: calc(900 * var(--u)); margin-top: var(--s5); }
.outcome.unmeasured .n { color: var(--muted); }

.film { border: 1px solid var(--rule); width: 100%; background: var(--paper); }
.lead-open { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: calc(60 * var(--u)); }
@media screen and (max-width: 979px) { .lead-open { grid-template-columns: 1fr; } }
.clock-lg { font-size: calc(140 * var(--u)); line-height: calc(140 * var(--u)); color: var(--ink); margin: 0; font-variant-numeric: tabular-nums; }

.evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(300 * var(--u)), 1fr)); gap: var(--s5); }
.evidence figure { margin: 0; }
.evidence img { border: 1px solid var(--rule); width: 100%; height: auto; }
.evidence figcaption { margin-top: var(--s2); color: var(--muted); }

.journey { display: grid; grid-template-columns: calc(340 * var(--u)) minmax(0,1fr); gap: calc(60 * var(--u)); }
.journey .stages { border-top: 0; }
.journey .stage-btn { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--rule); padding: var(--s3) 0; cursor: pointer; color: var(--ink); font-size: calc(16 * var(--u)); }
.journey .stage-btn[aria-selected="true"] { background: none; color: var(--accent); padding-left: 0; }
@media screen and (max-width: 979px) { .journey { grid-template-columns: 1fr; } }

.opts { display: grid; gap: 0; }
.opt { display: grid; grid-template-columns: calc(40 * var(--u)) minmax(0,1fr); gap: 0; text-align: left; background: none; border: 0; border-top: 1px solid var(--rule); padding: var(--s5) 0; cursor: pointer; color: var(--ink); }
.opt:hover { border-color: var(--rule); }
.opt:hover .t { text-decoration: underline; text-underline-offset: 3px; }
.opt .k { font-size: calc(16 * var(--u)); color: var(--muted); }
.opt .t { font-size: calc(22 * var(--u)); line-height: calc(34 * var(--u)); }
.opt.dim, .opt.dim .t { color: var(--muted); }
.opt.picked { border-top-color: var(--accent); }
.opt.picked .t { color: var(--accent); }

/* ============================================================
   FOOTER — 1px dashed, as measured
   ============================================================ */
footer {
  background: #FFFFFF;
  border-top: 1px dashed var(--ink);
  padding: var(--s9) var(--margin) var(--s6) var(--indent);
}
footer .lines > * + * { margin-top: var(--s1); }
footer .idx { margin-top: var(--s7); display: flex; flex-wrap: wrap; gap: var(--s5); }
footer .idx a, footer .split a { color: var(--ink); }
footer .split { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s5); }
footer .split a { color: var(--muted); }

.stack > * + * { margin-top: var(--s5); }
.stack-s > * + * { margin-top: var(--s3); }
.mt2 { margin-top: var(--s2); } .mt3 { margin-top: var(--s3); } .mt4 { margin-top: var(--s4); }
.mt5 { margin-top: var(--s5); } .mt6 { margin-top: var(--s6); } .mt7 { margin-top: var(--s7); }
.mt8 { margin-top: var(--s8); } .mt9 { margin-top: var(--s9); }
.tags { display: flex; flex-wrap: wrap; gap: var(--s4); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--margin); top: var(--s2); background: var(--paper); padding: var(--s2); z-index: 10; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- The family bar — the strip every ARK site carries ---------------
   Lifted verbatim from ark.business (28px, Sometype Mono 600 10px, Colours.md
   values written out so it is identical on every site). Pinned above the
   fixed masthead, which starts 28px down. */
.fam { position: sticky; top: 0; z-index: 1000; display: flex; justify-content: space-between; gap: 24px; min-height: 28px; align-items: center; box-sizing: border-box; margin: 0; padding: 0 24px;
       background: #FFFFFF; border-bottom: 1px solid #DEDFDA; color: #676964; white-space: nowrap;
       font-family: "Sometype Mono", monospace; font-weight: 600; font-size: 10px; line-height: 1.65; letter-spacing: 0.05em; text-transform: uppercase; }
.fam * { font: inherit; letter-spacing: inherit; text-transform: inherit; } /* nothing local reaches inside the bar */
@media (min-width: 1024px) { .fam { padding: 0 64px; } }
@media (max-width: 767px) { .fam-right { display: none; } }
.fam a { color: #676964; text-decoration: none; }
.fam b, .fam b a { color: #151613; font-weight: 600; }