/* Home v4 (Fable, 11 Nov 2026): the parts shared by the three directions, loaded after site.css.
   Images in media/: sky-dither.png, horizon-dither.png, clouds-dither.png are Freepik stock (free on Oto's plan),
   ordered-dithered to ink and cream by media/_source/dither.cjs. Sources beside them. */
@font-face{font-family:"Instrument Serif";src:url(../fonts/InstrumentSerif-Italic.ttf);font-weight:400;font-style:italic;font-display:swap}

/* the captions under the section words are helper text; the word and the link at the foot say it */
.sec .h span{display:none}
.sec .h{border-bottom:0;padding-bottom:0;margin-bottom:40px}

/* film grain, the hero's own noise tile, for any dark plate */
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;mix-blend-mode:overlay;opacity:.7;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px}
.grain>*{position:relative;z-index:2}

/* a four-point star, cream, used as the node on every timeline */
.star{display:inline-block;width:18px;height:18px;flex:0 0 auto}
.star svg{width:100%;height:100%;display:block;fill:currentColor}

/* dark plate: ink, rounded like a device, cream type */
.plate{background:#0E0D0B;color:#EFEBE0;border-radius:24px;overflow:hidden}
.plate .mute{color:rgba(239,235,224,.62)}
.plate .ul{border-bottom-color:#EFEBE0}
@media (max-width:640px){.plate{border-radius:18px}}

/* dotted leader rows (index lists) */
.leader{display:flex;align-items:baseline;gap:12px;min-width:0}
.leader .dots{flex:1;border-bottom:1px dotted var(--line-2);transform:translateY(-.3em);min-width:24px}