/* Institute layer over the shared ventriloquism.org tokens.
   Institutional, not browse-y: more air, longer measure, fewer entry points. */
.brand-text{font-family:var(--serif);font-size:1.32rem;font-weight:600;letter-spacing:.005em;
  color:var(--ink);text-decoration:none}
.brand-text:hover{color:var(--brass)}
.nav a.here{color:var(--brass);font-weight:600}

.lede{max-width:var(--measure);font-size:1.13rem;line-height:1.72;color:var(--ink-soft)}
.pagehead{padding:3.6rem 0 1.4rem;border-bottom:1px solid var(--rule-soft);margin-bottom:2.4rem}
.pagehead h1{font-family:var(--serif);font-size:clamp(2rem,4.4vw,2.9rem);line-height:1.12;margin:0 0 .7rem}
.pagehead .kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;color:var(--brass);margin:0 0 .8rem;font-weight:600}

.prose{max-width:var(--measure)}
.prose h2{font-family:var(--serif);font-size:1.5rem;margin:2.6rem 0 .8rem;line-height:1.25}
.prose h3{font-family:var(--sans);font-size:1.02rem;letter-spacing:.01em;margin:2rem 0 .5rem}
.prose p,.prose li{line-height:1.72;color:var(--ink-soft)}
.prose strong{color:var(--ink)}

.creed{font-family:var(--serif);font-size:clamp(1.35rem,2.9vw,1.85rem);line-height:1.4;
  color:var(--ink);border-left:3px solid var(--brass);padding:.2rem 0 .2rem 1.5rem;margin:2.2rem 0;
  max-width:34ch}
blockquote.pull{font-family:var(--serif);font-size:1.16rem;line-height:1.6;color:var(--ink);
  border-left:3px solid var(--rule);padding-left:1.3rem;margin:1.8rem 0;max-width:var(--measure)}
blockquote.pull cite{display:block;font-family:var(--sans);font-style:normal;font-size:.85rem;
  color:var(--ink-faint);margin-top:.6rem}

.three{display:grid;gap:1.6rem;grid-template-columns:repeat(3,1fr);margin:2.4rem 0}
@media(max-width:820px){.three{grid-template-columns:1fr}}
.three .t{border-top:2px solid var(--brass);padding-top:.9rem}
.three .t h3{font-family:var(--serif);font-size:1.2rem;margin:0 0 .4rem}
.three .t p{font-size:.95rem;line-height:1.6;color:var(--ink-soft);margin:0}

.progs{display:grid;gap:1.2rem;grid-template-columns:repeat(2,1fr);margin:2.4rem 0}
@media(max-width:820px){.progs{grid-template-columns:1fr}}
.prog{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:1.4rem 1.5rem}
.prog h3{font-family:var(--serif);font-size:1.18rem;margin:0 0 .45rem}
.prog h3 a{color:var(--ink);text-decoration:none}.prog h3 a:hover{color:var(--brass)}
.prog p{margin:0;font-size:.95rem;line-height:1.62;color:var(--ink-soft)}

.stat{display:flex;gap:2.4rem;flex-wrap:wrap;margin:2rem 0;padding:1.4rem 0;
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.stat div{min-width:9rem}
.stat b{display:block;font-family:var(--serif);font-size:1.9rem;line-height:1;color:var(--ink)}
.stat span{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint)}

.people{display:grid;gap:1.4rem;grid-template-columns:repeat(3,1fr);margin:1.8rem 0}
@media(max-width:820px){.people{grid-template-columns:1fr}}
.person{border-top:1px solid var(--rule);padding-top:.9rem}
.person h3{font-family:var(--serif);font-size:1.1rem;margin:0 0 .2rem}
.person .role{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--brass);
  margin:0 0 .5rem;font-weight:600}
.person p{font-size:.92rem;line-height:1.6;margin:0;color:var(--ink-soft)}

.give{display:grid;gap:1.2rem;grid-template-columns:repeat(3,1fr);margin:2rem 0}
@media(max-width:820px){.give{grid-template-columns:1fr}}
.give .g{border:1px solid var(--rule);border-radius:var(--r);padding:1.3rem;background:var(--card)}
.give .g h3{font-family:var(--serif);font-size:1.1rem;margin:0 0 .4rem}

.note{background:var(--field);border:1px solid var(--field-edge);border-radius:var(--r);
  padding:1rem 1.2rem;font-size:.92rem;line-height:1.6;color:var(--ink-soft);margin:1.8rem 0;
  max-width:var(--measure)}
.foot{border-top:1px solid var(--rule);margin-top:4.5rem;padding:2.4rem 0 3rem;background:var(--card)}
.foot-in{display:grid;gap:.9rem}
.foot-org{margin:0;font-size:.93rem;line-height:1.6}
.foot-links{margin:0;font-size:.9rem}
.foot-fine{margin:0;font-size:.82rem;color:var(--ink-faint);max-width:60ch}

/* Wordmark. The supplied lockup is ~2000x600 with generous white space baked in, so it is
   sized on height and given a little optical lift rather than being boxed. */
.brandmark{height:30px;width:auto;display:block}
@media(max-width:700px){.brandmark{height:23px}}
/* The mark is black type + brand red. In dark mode invert only the black by lifting
   luminance, keeping the red: a straight invert would turn #bf1e2e cyan. */
@media(prefers-color-scheme:dark){.brandmark{filter:invert(1) hue-rotate(180deg) saturate(1.15)}}

/* Figures with a job. Freddy speaks for the Institute; Dusty keeps its history.
   Both are given a caption naming the role, because an unlabelled puppet photo is
   decoration and a named one is a member of staff. */
.withfig{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3.5rem;align-items:center}
/* In a hero the heading already carries the top margin, so the block does not need its own. */
.vi-hero .withfig .vi-copy>:first-child{margin-top:0}
.vi-hero .withfig .creed{margin-bottom:0}
@media(max-width:900px){.withfig{grid-template-columns:1fr;gap:1.8rem}}
figure.fig{margin:0;max-width:280px}
@media(max-width:900px){figure.fig{max-width:200px}}
figure.fig.plain{max-width:240px}
figure.fig img{width:100%;height:auto;display:block;border-radius:var(--r);box-shadow:var(--shadow)}
figure.fig.plain img{border-radius:0;box-shadow:none}
figure.fig figcaption{font-family:var(--sans);font-size:.8rem;line-height:1.5;color:var(--ink-faint);
  margin-top:.7rem}
figure.fig figcaption b{display:block;font-family:var(--serif);font-size:1.02rem;color:var(--ink);
  margin-bottom:.15rem}
figure.fig figcaption .role{color:var(--brass);font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;font-size:.7rem}

figure.fig.wide{max-width:640px;margin:2.2rem 0}
figure.fig.wide img{border-radius:var(--r)}
figure.fig.wide figcaption{max-width:56ch}
.give.give-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.give.give-2{grid-template-columns:1fr}}
.give.give-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.give.give-2{grid-template-columns:1fr}}

/* Timeline — a story, not a defence. */
ol.timeline{list-style:none;margin:2.4rem 0;padding:0;border-left:2px solid var(--rule)}
ol.timeline li{position:relative;padding:0 0 1.7rem 1.6rem}
ol.timeline li::before{content:"";position:absolute;left:-6px;top:.55rem;width:10px;height:10px;
  border-radius:50%;background:var(--brass)}
ol.timeline b{font-family:var(--sans);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);display:block;margin-bottom:.25rem}
ol.timeline p{margin:0;line-height:1.68;color:var(--ink-soft);max-width:var(--measure)}

/* The shelf */
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin:1.8rem 0 2.4rem}
@media(max-width:820px){.shelf{grid-template-columns:repeat(2,1fr)}}
.shelf .bk{margin:0}
.shelf .bk img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:var(--shadow)}
.shelf .bk figcaption{font-size:.78rem;line-height:1.45;color:var(--ink-faint);margin-top:.5rem}

ul.want{max-width:var(--measure);padding-left:1.1rem}
ul.want li{margin-bottom:.6rem;line-height:1.66}
ul.want b{color:var(--ink)}

/* ═══ DENSITY PASS ═══
   The pages were a 68ch stripe centred in an 1120px shell: a narrow column of text
   floating in dead space, with book covers the size of dinner plates. Content now uses
   the width of the page — a main column plus a rail that is always occupied — and the
   vertical rhythm is roughly 40% tighter. */
.prose{max-width:none}
.pagehead{padding:2rem 0 1.05rem;margin-bottom:1.5rem}
.pagehead h1{font-size:clamp(1.85rem,3.7vw,2.5rem);margin-bottom:.55rem}
.lede{max-width:66ch;font-size:1.05rem;line-height:1.6}
.prose p,.prose li{line-height:1.62}
.prose h2{margin:1.8rem 0 .55rem;font-size:1.34rem}
.prose h3{margin:1.25rem 0 .3rem}
.three,.progs,.give,.people{margin:1.5rem 0}
.creed{margin:1.3rem 0}
.note,blockquote.pull{margin:1.3rem 0}
.stat{margin:1.3rem 0;padding:1.05rem 0}
.foot{margin-top:2.6rem;padding:1.9rem 0 2.2rem}
.withfig{gap:2.4rem}
figure.fig{max-width:230px}
figure.fig.wide{max-width:560px;margin:1.5rem 0}

/* Main column + rail. The rail carries the pictures and the quick facts, so the right
   half of the page is doing work instead of sitting empty. */
.dual{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:2.6rem;align-items:start}
@media(max-width:900px){.dual{grid-template-columns:1fr;gap:1.5rem}}
.dual .main>:first-child{margin-top:0}
.dual .main p,.dual .main li{max-width:74ch}
.rail{display:grid;gap:1.15rem;align-content:start}
@media(max-width:900px){.rail{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rail{grid-template-columns:1fr}}
.rail figure{margin:0}
.rail figure img{width:100%;height:auto;display:block;border-radius:var(--r);box-shadow:var(--shadow)}
.rail figcaption{font-size:.76rem;line-height:1.45;color:var(--ink-faint);margin-top:.45rem}
.rail .card{border-top:2px solid var(--brass);padding-top:.65rem}
.rail .card h3{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);margin:0 0 .45rem;font-weight:600}
.rail .card p{font-size:.86rem;line-height:1.5;margin:0 0 .45rem;color:var(--ink-soft)}
.rail .card p:last-child{margin-bottom:0}
.rail .card ul{margin:0;padding-left:1.05rem;font-size:.86rem;line-height:1.5;color:var(--ink-soft)}
.rail .card ul li{margin-bottom:.3rem}

/* A shelf, not a wall. Eight covers in a row you can take in at a glance. */
.shelf{display:flex;flex-wrap:wrap;gap:.8rem;margin:1rem 0 1.5rem}
.shelf .bk{width:100px}
.shelf .bk img{border-radius:4px}
.shelf .bk figcaption{font-size:.67rem;line-height:1.3;margin-top:.35rem}

/* Timeline: the year sits in its own rail so each entry is one line deep, not two. */
ol.timeline{margin:1.5rem 0}
ol.timeline li{display:grid;grid-template-columns:6.2rem minmax(0,1fr);gap:.9rem;padding:0 0 .85rem 1.3rem}
@media(max-width:620px){ol.timeline li{grid-template-columns:1fr;gap:.1rem}}
ol.timeline b{margin:0;padding-top:.2rem}
ol.timeline p{max-width:72ch}

/* padding shorthand on .pagehead was zeroing the .wrap gutter, so headings sat 20px
   left of every other line on the page. Block-only padding keeps the gutter. */
.pagehead{padding:2rem 0 1.05rem;padding-inline:20px}
/* Rail captions carry a name and a role, same as the figure captions do. */
.rail figcaption b{display:block;font-family:var(--serif);font-size:1rem;color:var(--ink);
  margin-bottom:.1rem}
.rail figcaption .role{display:block;color:var(--brass);font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;font-size:.68rem}