/* Topic 04 — The Director.
   The subject is two archives describing the same events from opposite sides,
   so the page is built out of archival furniture: a dated spine, catalogue
   slips with box numbers, and one split panel where the two records meet.
   Same two materials as the rest of the yard: drafting stock, enamelled steel. */

.dir-standfirst{ margin-bottom:0 }
.berth[id]{ scroll-margin-top:4.6rem }

/* ─── section rail ───────────────────────────────────────────────────────── */
.dir-rail{
  position:sticky; top:0; z-index:10; display:flex; gap:.25rem; overflow-x:auto;
  padding:.5rem max(.75rem,calc((100vw - 62rem)/2));
  background:var(--steel); border-block:2px solid var(--rule-hard);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.dir-rail::-webkit-scrollbar{ display:none }
.dir-rail a{
  display:flex; flex:0 0 auto; align-items:center; gap:.45rem; min-height:42px; padding:.5rem .6rem;
  color:var(--bone); font:600 .64rem/1 var(--mono); letter-spacing:.07em;
  text-decoration:none; text-transform:uppercase; white-space:nowrap;
}
.dir-rail a:hover,.dir-rail a:focus-visible{ background:var(--steel-2); color:var(--bone) }
.dir-rail a:focus-visible{ outline:3px solid var(--amber); outline-offset:-3px }
.dir-rail a.is-here{ background:var(--steel-2) }
.dir-rail a.is-here b{ color:var(--red) }
.dir-rail b{ color:var(--amber) }

/* ─── the evidence filter: an instrument, so it is steel ─────────────────── */
.tier-panel{
  margin:1.1rem 0 1.3rem; padding:.85rem .9rem 1rem;
  background:var(--steel); border:2px solid var(--rule-hard); color:var(--bone);
}
.tier-panel .instrument-label{ color:var(--amber) }
.tier-btns{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem }
.tier-btn{
  display:flex; align-items:center; gap:.45rem; min-height:44px; padding:.45rem .7rem;
  background:var(--steel-2); color:var(--bone); border:2px solid var(--steel-lit);
  font:600 .68rem/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; cursor:pointer;
}
.tier-btn:focus-visible{ outline:3px solid var(--amber); outline-offset:2px }
.tier-btn .pip{ width:.6rem; height:.6rem; border:2px solid currentColor; border-radius:50% }
.tier-btn[aria-pressed="true"]{ border-color:var(--bone) }
.tier-btn[aria-pressed="true"] .pip{ background:currentColor }
.tier-btn[aria-pressed="false"]{ color:#7d8a92 }
.tier-btn[data-tier="filed"][aria-pressed="true"]{ color:#6fd3a0 }
.tier-btn[data-tier="published"][aria-pressed="true"]{ color:var(--amber) }
.tier-btn[data-tier="stated"][aria-pressed="true"]{ color:#ff8e93 }
.tier-btn[data-tier="structural"][aria-pressed="true"]{ color:#9fc4d8 }
.tier-note{ margin:.7rem 0 0; color:#b6c2c9; font:600 .68rem/1.5 var(--mono); letter-spacing:.04em }

/* ─── the chain: a dated spine ───────────────────────────────────────────── */
.chain{ position:relative; margin:0; padding:0 0 0 2.1rem; list-style:none }
.chain::before{
  position:absolute; top:.6rem; bottom:1.2rem; left:.62rem; width:2px;
  background:var(--rule-hard); content:"";
}
.chain-step{ position:relative; margin:0 0 .85rem }
.chain-step::before{
  position:absolute; top:1rem; left:-1.6rem; width:.78rem; height:.78rem;
  background:var(--stock); border:2px solid var(--rule-hard); border-radius:50%; content:"";
}
.chain-step[data-tier="filed"]::before{ background:var(--green) }
.chain-step[data-tier="published"]::before{ background:var(--amber) }
.chain-step[data-tier="stated"]::before{ background:var(--red) }
.chain-step[hidden]{ display:none }
.chain-card{
  padding:.85rem .9rem; background:var(--stock-2);
  border:2px solid var(--rule-hard); border-left-width:7px;
  box-shadow:4px 4px 0 rgba(19,26,31,.1);
}
.chain-step[data-tier="filed"]    .chain-card{ border-left-color:var(--green) }
.chain-step[data-tier="published"] .chain-card{ border-left-color:var(--amber) }
.chain-step[data-tier="stated"]   .chain-card{ border-left-color:var(--red) }
.chain-when{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline;
  color:var(--red); font:600 .66rem/1.2 var(--mono); letter-spacing:.09em; text-transform:uppercase;
}
.chain-when .where{ color:var(--ink-3) }
.chain-card h3{ margin:.3rem 0 .4rem; font:700 clamp(1.1rem,3.6vw,1.45rem)/1.02 var(--display); text-transform:uppercase }
.chain-card p{ margin:0; color:var(--ink-2); font-size:.89rem; line-height:1.5 }
.chain-quote{
  margin:.65rem 0 0; padding:.6rem .75rem; background:#fff;
  border-left:3px solid var(--rule-hard); font-size:.87rem; line-height:1.5;
}
.chain-quote q{ font-style:italic }
.chain-quote cite{
  display:block; margin-top:.4rem; color:var(--ink-3);
  font:600 .62rem/1.3 var(--mono); font-style:normal; letter-spacing:.06em; text-transform:uppercase;
}
.chain-slip{
  display:flex; flex-wrap:wrap; gap:.35rem .6rem; margin-top:.6rem;
  padding-top:.55rem; border-top:1px dashed var(--rule);
  font:600 .61rem/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase;
}
.chain-slip .tier-tag{ color:var(--ink) }
.chain-slip a{ color:var(--ink-3) }
.chain-names{ display:flex; flex-wrap:wrap; gap:.3rem; margin:.6rem 0 0; padding:0; list-style:none }
.chain-names li{
  padding:.22rem .45rem; background:var(--stock); border:1px solid var(--rule);
  font:600 .63rem/1.3 var(--mono); letter-spacing:.03em;
}

/* ─── reading panels and slabs ───────────────────────────────────────────── */
.read-panel{
  margin:1.1rem 0 0; padding:.9rem; background:var(--stock-2);
  border:2px solid var(--rule-hard); border-top-width:7px;
}
.read-panel p{ margin:.4rem 0 0; color:var(--ink-2); font-size:.9rem; line-height:1.55 }
.read-panel.is-refusal{ border-top-color:var(--red); background:#fff }
.read-panel.is-refusal p{ color:var(--ink) }
.slab{ min-width:0; padding:.9rem; background:var(--stock-2); border:2px solid var(--rule-hard) }
.slab.is-amber{ border-top:7px solid var(--amber) }
.slab p{ margin:.4rem 0 0; color:var(--ink-2); font-size:.89rem; line-height:1.5 }
.two-up{ display:grid; gap:.75rem; margin-top:1rem }
@media (min-width:46rem){ .two-up{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ─── pull quotes: the page's only large type besides headings ──────────── */
.quote-slab{ margin:1.1rem 0 0; padding:1rem; background:var(--steel); border:2px solid var(--rule-hard) }
.quote-slab blockquote{
  margin:0; color:var(--bone);
  font:600 clamp(1rem,4vw,1.3rem)/1.4 var(--body); font-style:italic;
}
.quote-slab blockquote::before{ content:"\201C" }
.quote-slab blockquote::after{ content:"\201D" }
.quote-slab figcaption{
  margin-top:.75rem; padding-top:.6rem; border-top:1px solid var(--steel-lit);
  color:#b6c2c9; font-size:.76rem; line-height:1.5;
}
.quote-slab.is-rule blockquote{ color:#ffd98a }
.quote-slab.is-small blockquote{ font-size:clamp(.95rem,3.4vw,1.1rem) }

/* ─── the rung table ─────────────────────────────────────────────────────── */
.gate-quotes{ display:grid; gap:.6rem; margin:1rem 0 }
.gate-q{
  margin:0; padding:.75rem .85rem; background:#fff; border:2px solid var(--rule-hard);
  border-left-width:7px; border-left-color:var(--amber);
}
.gate-q q{ font-size:.92rem; line-height:1.55; font-style:italic }
.gate-q cite{
  display:block; margin-top:.45rem; color:var(--ink-3);
  font:600 .62rem/1.3 var(--mono); font-style:normal; letter-spacing:.06em; text-transform:uppercase;
}
.rung-table{ margin-top:1rem; border:2px solid var(--rule-hard); background:var(--stock-2) }
.rung-head{ display:none }
.rung-row{ display:grid; gap:.3rem .7rem; padding:.8rem .85rem; border-top:2px solid var(--rule-hard) }
.rung-row:first-of-type{ border-top:0 }
.rung-row.is-closed{ background:#fff; border-left:7px solid var(--red) }
.rung-row .rung-name{ font:700 1.05rem/1.05 var(--display); text-transform:uppercase }
.rung-row dl{ display:grid; gap:.25rem; margin:.3rem 0 0 }
.rung-row dt{ color:var(--ink-3); font:600 .6rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase }
.rung-row dd{ margin:0 0 .25rem; color:var(--ink-2); font-size:.86rem; line-height:1.45 }
.rung-flag{
  display:inline-block; padding:.18rem .45rem; background:var(--red); color:#fff;
  font:600 .6rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase;
}
.rung-flag.is-ok{ background:var(--green) }
@media (min-width:52rem){
  .rung-head{
    display:grid; grid-template-columns:1.1fr 1fr 1.6fr 1.5fr; gap:.7rem;
    padding:.55rem .85rem; background:var(--steel); color:var(--amber);
    font:600 .62rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  }
  .rung-row{ grid-template-columns:1.1fr 1fr 1.6fr 1.5fr; align-items:start }
  .rung-row dl{ display:contents }
  .rung-row dt{ display:none }
  .rung-row dd{ margin:0; grid-row:1 }
}

/* ─── the split panel: the two archives ──────────────────────────────────── */
.split{ display:grid; gap:.8rem; margin-top:1.1rem }
@media (min-width:50rem){ .split{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.split-side{ min-width:0; padding:.95rem; border:2px solid var(--rule-hard) }
.split-side.is-state{ background:var(--steel); color:var(--bone) }
.split-side.is-state .instrument-label{ color:#6fd3a0 }
.split-side.is-private{ background:var(--stock-2) }
.split-side.is-private .instrument-label{ color:var(--red) }
.split-side h3{ margin:.35rem 0 .2rem; font:700 clamp(1.15rem,3.8vw,1.5rem)/1.02 var(--display); text-transform:uppercase }
.split-sub{ margin:0 0 .7rem; font:600 .64rem/1.4 var(--mono); letter-spacing:.05em; text-transform:uppercase }
.split-side.is-state .split-sub{ color:#9fb0b8 }
.split-side.is-private .split-sub{ color:var(--ink-3) }
.split-foot{ margin:.8rem 0 0; padding-top:.6rem; border-top:1px solid var(--steel-lit); font-size:.8rem; line-height:1.5 }
.split-side.is-private .split-foot{ border-top-color:var(--rule); color:var(--ink-2) }
.diary,.folders{ margin:0; padding:0; list-style:none; display:grid; gap:.5rem }
.diary li{ display:grid; grid-template-columns:4.6rem minmax(0,1fr); gap:.6rem; align-items:start }
.diary .t{ color:var(--amber); font:600 .68rem/1.5 var(--mono); letter-spacing:.03em }
.diary .l{ font-size:.86rem; line-height:1.5 }
.folders li{ padding:.55rem .65rem; background:#fff; border:1px solid var(--rule); border-left:4px solid var(--red) }
.folders .w{ display:block; font:700 .86rem/1.3 var(--body) }
.folders .v{ display:block; margin-top:.1rem; color:var(--ink-3); font-size:.78rem }
.folders .r{ display:block; margin-top:.35rem; color:var(--ink-2); font:600 .63rem/1.45 var(--mono); letter-spacing:.02em }

/* ─── the straddle ledger ────────────────────────────────────────────────── */
.straddle{ margin:1.1rem 0 0; padding:0; list-style:none; display:grid; gap:.55rem }
.straddle li{
  display:grid; grid-template-columns:4.2rem minmax(0,1fr); gap:.7rem;
  padding:.7rem .8rem; background:var(--stock-2); border:2px solid var(--rule-hard);
}
.straddle li.in-office{ background:#fff; border-color:var(--red) }
.straddle .yr{ font:700 1.5rem/1 var(--display) }
.straddle li.in-office .yr{ color:var(--red) }
.straddle .ti{ margin:0; font-size:.88rem; line-height:1.45 }
.straddle .ref{ display:block; color:var(--ink-3); font:600 .62rem/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase }
.straddle .off{
  display:inline-block; margin-top:.4rem; padding:.18rem .45rem; background:var(--red); color:#fff;
  font:600 .6rem/1.3 var(--mono); letter-spacing:.07em; text-transform:uppercase;
}
.straddle .with{ margin:.35rem 0 0; color:var(--ink-3); font-size:.78rem; line-height:1.45 }

/* ─── chips, limits, sources, figures ────────────────────────────────────── */
.chips{ display:grid; gap:.5rem; margin-top:1rem }
@media (min-width:44rem){ .chips{ grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)) } }
.chip{ min-width:0; padding:.65rem .75rem; background:var(--stock-2); border:2px solid var(--rule-hard) }
.chip b{ display:block; font:700 1rem/1.1 var(--display); text-transform:uppercase }
.chip span{ display:block; margin-top:.25rem; color:var(--ink-2); font-size:.82rem; line-height:1.45 }
.limits{ display:grid; gap:.7rem; margin-top:1rem }
.limit{ min-width:0; padding:.9rem; background:var(--stock-2); border:2px solid var(--rule-hard); border-top-width:7px; border-top-color:var(--amber) }
.limit h3{ margin:0 0 .45rem; font:700 clamp(1rem,3.4vw,1.2rem)/1.15 var(--display); text-transform:uppercase }
.limit p{ margin:0 0 .5rem; color:var(--ink-2); font-size:.88rem; line-height:1.5 }
.limit .needs{ margin:0; padding-top:.5rem; border-top:1px dashed var(--rule); color:var(--ink-3); font-size:.82rem }
.limit .needs b{ color:var(--ink); font:600 .62rem/1.3 var(--mono); letter-spacing:.07em; text-transform:uppercase }
.sources{ margin:1rem 0 0; padding:0 0 0 1.4rem; display:grid; gap:.7rem }
.sources li{ padding-left:.3rem }
.sources .st{ display:block; font:700 .98rem/1.25 var(--body) }
.sources .sp{ display:block; margin-top:.15rem; color:var(--ink-3); font:600 .66rem/1.4 var(--mono); letter-spacing:.04em; text-transform:uppercase }
.sources .sn{ display:block; margin-top:.3rem; color:var(--ink-2); font-size:.85rem; line-height:1.5 }
.figures{ display:grid; gap:.6rem; margin-top:1.3rem }
@media (min-width:40rem){ .figures{ grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)) } }
.fig{ min-width:0; padding:.8rem; background:var(--steel); border:2px solid var(--rule-hard); color:var(--bone) }
.fig b{ display:block; font:700 clamp(1.7rem,6vw,2.3rem)/1 var(--display); color:var(--amber) }
.fig span{ display:block; margin-top:.35rem; font-size:.8rem; line-height:1.4; color:#cad2d6 }

@media (prefers-reduced-motion:no-preference){
  .chain-step{ transition:opacity .18s ease }
}