/* Engraved, the shared system.
   One world: security paper, intaglio slate ink, lathe-cut ornament, microtype.
   Every rendition in this folder loads this file, so the hero cannot drift between them. */

/* self-hosted, subset to the characters this site actually sets: no third party in the
   critical path, and no system serif standing in for the display voice if a CDN is slow */
@font-face{
  font-family:"Source Serif Var";
  src:url("assets/fonts/source-serif-4-sub.woff2") format("woff2-variations");
  font-weight:200 900;font-stretch:normal;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Hanken Var";
  src:url("assets/fonts/hanken-grotesk-sub.woff2") format("woff2-variations");
  font-weight:100 900;font-stretch:normal;font-style:normal;font-display:swap;
}

:root{
  --paper:#E6EBEE;
  --paper-2:#DDE4E8;
  --paper-3:#CFD8DE;
  --ink:#1B2941;
  --ink-2:#44546A;
  --ink-3:#5A6878;
  --ink-4:#77869A;   /* microtype only, never live text */
  --copper:#8E5B3A;
  --hair:rgba(27,41,65,.18);
  --hair-2:rgba(27,41,65,.1);
  /* Type on the inked side. Not the flat paper colour: the measured average of the TEXTURED
     paper (the tooth darkens the sheet by two levels). Type in this tone is invisible where it
     lies on bare paper and appears only where ink is behind it; in flat #E6EBEE it ghosted. */
  --latent:228 233 236;
  --rule:rgb(var(--latent) / .2);       /* a ruled line on the inked side */
  --rule-2:rgb(var(--latent) / .11);    /* the ledger's column rules */
  --ease:cubic-bezier(.16,1,.3,1);

  /* Spacing: one scale on a 4-unit base. It is set in rem and the root grows with the
     sheet (see html below), so a 27 inch monitor gets the same composition as a laptop,
     larger, instead of laptop-sized furniture stranded on a bigger page. */
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4rem;--s9:6rem;--s10:8rem;

  /* The plate. The frame is inset from the viewport, its inner rule sits 5px inside it,
     and ONE margin is used from that rule to the content on every side. That is what makes
     the corners square: the monogram and the nav stand the same distance from the top rule
     as from the side rule. */
  --frame:clamp(.625rem,1.25vw,1.5rem);
  --pad:clamp(.875rem,2.6vw,3.5rem);
  --gut:calc(var(--frame) + 5px + var(--pad));
  --ctl:2.625rem;                   /* one height for every control in the masthead */
  --measure:92rem;                  /* the reading sheets below the hero share one measure */
}

/* 16px up to a 1440 sheet, then the root follows the sheet: 18.7px at 1920, 22px at 2560 and
   held there. Everything below is in rem or vw, so the whole plate scales as one object. */
html{font-size:clamp(100%,.5rem + .5556vw,137.5%);scroll-behavior:smooth}
html.lenis{scroll-behavior:auto}

*{box-sizing:border-box}
html,body{scrollbar-color:var(--ink-3) var(--paper-2)}
body{
  margin:0;color:var(--ink);
  background:var(--paper) url("assets/paper-tooth.png") repeat;background-size:256px 256px;
  font:400 1rem/1.55 "Hanken Var","Hanken Grotesk",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;caret-color:var(--copper);
}
::selection{background:var(--ink);color:var(--paper)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--ink-3);border:3px solid var(--paper-2)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
[tabindex="-1"]:focus{outline:none}   /* a section focused by a jump link, not by the keyboard */
.reverse a:focus-visible{outline-color:var(--paper)}
img{max-width:100%}

/* ---------- type ---------- */
.serif{font-family:"Source Serif Var","Source Serif 4",serif;font-optical-sizing:auto}
.legend{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
.rule-legend{display:flex;align-items:center;gap:var(--s4);margin:0}
.rule-legend::after{content:"";flex:1;height:1px;background:var(--hair)}

/* ---------- the masthead: a monogram plate and two routes ----------
   Three objects, one shape. The monogram is cut as a square plate at the same height as the
   nav, so the two top corners of the note balance and both sit square to the frame. Resume is
   the primary and is inked solid; LinkedIn carries the copper rule that fills on hover. */
.mast{position:relative;z-index:6;display:flex;justify-content:space-between;align-items:center;
  padding:var(--gut) var(--gut) 0}
.mark,.mast nav a{
  position:relative;display:inline-flex;align-items:center;justify-content:center;height:var(--ctl);
  border:1px solid var(--ink);text-decoration:none;color:var(--ink);overflow:hidden;line-height:1
}
.mark{width:var(--ctl);font-family:"Source Serif Var","Source Serif 4",serif;font-weight:600;
  font-size:1.06rem;letter-spacing:.05em;padding-left:.05em;transition:background .45s var(--ease),color .45s var(--ease)}
.mark:hover{background:var(--ink);color:var(--paper)}
.mast nav{display:flex;gap:var(--s3);align-items:center}
.mast nav a{gap:var(--s2);padding:0 1.375rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.mast nav a::before{
  content:"";position:absolute;inset:0;background:var(--copper);
  transform-origin:50% 100%;transform:scaleY(.048);transition:transform .5s var(--ease)   /* a 2px rule on a 42px plate */
}
.mast nav a:hover::before{transform:none}
.mast nav a span,.mast nav a svg{position:relative;z-index:1;transition:color .45s var(--ease)}
.mast nav a:hover span,.mast nav a:hover svg{color:var(--paper)}
.mast nav a.icon{width:var(--ctl);padding:0}
.mast nav a.icon svg{flex:none;width:.875rem;height:.875rem}
.mast nav a.solid::before{transform:none;background:var(--ink)}
.mast nav a.solid span{color:var(--paper)}
.mast nav a.solid:hover::before{background:var(--copper)}
.mast nav a.solid:hover span{color:var(--paper)}   /* paper on copper is 4.7:1; the old dark text was 2.8:1 */

/* ---------- hero ----------
   A flex row: the copy hangs on the left margin under the monogram, the portrait stands on the
   right margin under the nav, and the space between them is the only thing that flexes. The
   oval is sized from the height of the sheet, so it holds its proportion of the note at any
   width instead of stopping at a laptop size. */
.note{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:transparent}
.frame{position:absolute;inset:var(--frame);border:1px solid var(--hair);pointer-events:none;z-index:1}
.frame::after{content:"";position:absolute;inset:4px;border:1px solid var(--hair-2)}

.grid{
  position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s8);padding:var(--s6) var(--gut) var(--s7)
}
.copy{flex:0 1 56%;min-width:0}
h1.name{
  font-family:"Source Serif Var","Source Serif 4",serif;font-optical-sizing:auto;font-weight:660;
  font-size:clamp(3.5rem,9.6vw,11.5rem);line-height:.88;letter-spacing:-.022em;margin:0 0 .3em
}
h1.name .l{display:block}
h1.name .l:last-child{padding-left:.48em}
.hook{
  font-family:"Source Serif Var","Source Serif 4",serif;font-weight:400;font-size:clamp(1.3rem,2vw,2.1rem);
  line-height:1.3;max-width:34ch;margin:0 0 var(--s7);color:var(--ink);text-wrap:balance
}
.hook strong{font-weight:640}
.cta{
  position:relative;display:inline-flex;align-items:center;gap:var(--s4);padding:1.1875rem 2.125rem;text-decoration:none;
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;background:var(--ink);color:var(--paper);
  transition:transform .5s var(--ease)
}
.cta::before{content:"";position:absolute;inset:-6px;border:1px solid var(--hair);transition:inset .5s var(--ease)}
.cta svg{width:.8125rem;height:.8125rem}
.cta:hover{transform:translateY(-2px)}
.cta:hover::before{inset:-11px}
/* the credential stands at the foot of the note, on the left margin above the microtype band:
   the copy block is then three things (name, hook, action) and the button ends the hook
   instead of heading the Baylor line */
.note-foot{position:relative;z-index:2}
.cred{margin:0 var(--gut) var(--s3);font-size:.84rem;color:var(--ink-2)}
.cred b{font-weight:500;color:var(--ink)}

.portrait{position:relative;flex:0 0 auto;margin:0;height:min(68svh,60vw);aspect-ratio:430/560;isolation:isolate}
.oval{position:relative;width:100%;height:100%}
.oval canvas{position:absolute;inset:0;width:100%;height:100%}
/* no JavaScript, no engraving: the photograph itself stands in the oval, inside the same 20px margin */
.oval .plain{position:absolute;inset:20px;width:calc(100% - 40px);height:calc(100% - 40px);object-fit:cover;border-radius:50%;
  box-shadow:0 0 0 1px var(--hair),0 0 0 9px var(--paper),0 0 0 10px var(--hair)}

/* microtype band, the security line along the foot of the note */
.micro{
  position:relative;z-index:2;margin:0 var(--gut) calc(var(--frame) + 5px + var(--s4));border-top:1px solid var(--hair);padding-top:var(--s2);
  font-size:6px;letter-spacing:.24em;white-space:nowrap;overflow:hidden;text-transform:uppercase;color:var(--ink-4)
}

/* progress: in the margin between the edge of the screen and the frame, reading as a plate
   gauge rather than a scrollbar */
.gauge{position:fixed;z-index:8;left:calc((var(--frame) - 7px) / 2);top:50%;translate:0 -50%;height:32vh;width:7px;display:flex;align-items:stretch;pointer-events:none;mix-blend-mode:difference}
.gauge .track{position:relative;width:7px}
.gauge .track::before{content:"";position:absolute;left:3px;top:0;bottom:0;width:1px;background:rgba(230,235,238,.3)}
.gauge .fill{position:absolute;left:0;top:0;width:7px;height:calc(var(--p,0) * 100%);border-left:1.5px solid #E6EBEE;border-right:1.5px solid #E6EBEE}
.gauge .pct{display:none}

/* ---------- shared section furniture ---------- */
.sheet{position:relative;background:var(--paper-2) url("assets/paper-tooth.png") repeat;background-size:256px 256px;padding:0 var(--gut)}
.sheet .in{position:relative;z-index:2;max-width:var(--measure);margin-inline:auto;padding:clamp(4.5rem,13vh,9rem) 0}
h2.head{
  font-family:"Source Serif Var","Source Serif 4",serif;font-weight:640;font-size:clamp(2.1rem,4.4vw,4.6rem);
  line-height:1.02;letter-spacing:-.022em;margin:0 0 .5em;max-width:17ch;text-wrap:balance
}
.lede{font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.6;max-width:56ch;color:var(--ink-2);margin:0}
.lede strong{color:var(--ink);font-weight:600}

/* ---------- the reverse: every reveal in this family opens onto the same inked sheet ----------
   A ledger. Four columns on a wide sheet: when, who, what was built, and the figure, which is
   set flush right so it ends on the rule the way an amount does. */
.reverse{position:relative;background:var(--ink);color:rgb(var(--latent))}
.reverse .head{color:rgb(var(--latent));margin-bottom:0}
.reverse .lede{color:rgb(var(--latent) / .76)}
.track{--c1:9.5rem;--c2:17rem;--c4:clamp(11rem,14vw,18rem);--g:clamp(1.5rem,3.4vw,5.5rem)}
/* the head hangs on the ledger's own columns: the heading over when and who, the lede starting
   where the third column starts */
.track-head{display:flex;align-items:flex-end;gap:var(--g)}
.track-head .head{flex:0 0 calc(var(--c1) + var(--g) + var(--c2))}
.track-head .lede{flex:1 1 0;min-width:0;max-width:60ch;padding-bottom:.35em}
.stations{list-style:none;margin:clamp(2.5rem,7vh,5.25rem) 0 0;padding:0;border-top:1px solid var(--rule)}
.station{display:flex;align-items:flex-start;gap:var(--g);position:relative;
  padding:clamp(1.625rem,4vh,2.75rem) 0 clamp(1.875rem,4.4vh,3.125rem);border-bottom:1px solid var(--rule)}
/* ruled in copper. That is the resting state, so it is what a visitor without JavaScript gets;
   only the stage holds a rule back until its station arrives. */
.station::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--copper);
  transform-origin:0 50%;transition:transform .9s var(--ease)}
.motion .station:not(.lit)::before{transform:scaleX(0)}
.station .yr{flex:0 0 var(--c1);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--latent) / .64);padding-top:.55em}
.station .what{flex:1 1 0;min-width:0;display:flex;align-items:flex-start;gap:var(--g)}
.station .who{flex:0 0 var(--c2)}
.station h3{margin:0 0 .3em;font-family:"Source Serif Var","Source Serif 4",serif;font-weight:640;
  font-size:clamp(1.3rem,2.1vw,2.1rem);line-height:1.1;letter-spacing:-.02em}
.station .role{margin:0;font-size:.88rem;letter-spacing:.01em;color:rgb(var(--latent) / .66)}
.station .body{flex:1 1 0;margin:0;font-size:1rem;line-height:1.62;color:rgb(var(--latent) / .84);max-width:68ch;padding-top:.2em}
.station .fig{flex:0 0 var(--c4);text-align:right;font-family:"Source Serif Var","Source Serif 4",serif;font-weight:700;
  font-size:clamp(1.6rem,2.8vw,3.4rem);line-height:.95;color:rgb(var(--latent));font-variant-numeric:lining-nums tabular-nums}
.station .fig small{display:block;font-family:"Hanken Var","Hanken Grotesk",sans-serif;font-weight:400;
  font-size:.76rem;letter-spacing:.01em;color:rgb(var(--latent) / .64);margin:var(--s3) 0 0 auto;max-width:16ch;line-height:1.35}

/* the ledger's column rules, drawn in the middle of each gap */
@media (min-width:1280px){
  .stations{background:
    linear-gradient(var(--rule-2),var(--rule-2)) calc(var(--c1) + var(--g) / 2) 0/1px 100% no-repeat,
    linear-gradient(var(--rule-2),var(--rule-2)) calc(var(--c1) + var(--c2) + var(--g) * 1.5) 0/1px 100% no-repeat,
    linear-gradient(var(--rule-2),var(--rule-2)) calc(100% - var(--c4) - var(--g) / 2) 0/1px 100% no-repeat}
}

/* now, and why finance: hangs on the same columns as the ledger above it */
.now{display:flex;align-items:flex-start;gap:var(--g);margin-top:clamp(3rem,9vh,6rem)}
.now .now-head{flex:0 0 calc(var(--c1) + var(--g) + var(--c2));margin:0;font-family:"Source Serif Var","Source Serif 4",serif;font-weight:640;
  font-size:clamp(1.6rem,3vw,2.9rem);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.now-body{flex:1 1 0;min-width:0}
.now p{margin:0 0 1em;font-size:1rem;line-height:1.66;color:rgb(var(--latent) / .84);max-width:68ch}
/* the measure belongs to the paragraphs; the two routes sit on one line beside each other */
.track-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5) var(--s6);margin-top:var(--s6)}
.reverse .cta{background:var(--paper);color:var(--ink)}
.reverse .cta::before{border-color:rgb(var(--latent) / .4)}
.quiet-link,.foot-link{display:inline-block;padding:.5rem 0}   /* a 24px target at least */
.quiet-link{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--latent) / .84);
  text-underline-offset:7px;text-decoration-thickness:1px}
.quiet-link:hover{color:var(--paper);text-decoration-thickness:2px}

/* ---------- outside the work: back on paper ----------
   The head stands still in the left column while the three entries pass it. Each entry is a row
   on the ledger's own widths: what it was and its honours, then the account of it. */
/* back on light paper, so text is ink, not the page's light default: headings inherit this and
   were invisible without it (only .lede, .body and .marks set their own dark colour) */
.outside{background-color:var(--paper);color:var(--ink)}
/* the seam where the ink ends is cut, like every other edge in this world: copper, then a hair */
.outside::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--copper)}
.outside::after{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--hair)}
.outside .in{display:flex;align-items:flex-start;gap:var(--g)}
.out-head{flex:0 0 calc(var(--c1) + var(--g) + var(--c2));position:sticky;top:var(--s9)}
.out-head .lede{margin-top:var(--s4)}
.pursuits{flex:1 1 0;min-width:0;list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.pursuit{display:flex;align-items:flex-start;gap:var(--g);padding:var(--s6) 0 var(--s7);border-bottom:1px solid var(--hair)}
.pursuit .lead{flex:0 0 var(--c2)}
.pursuit h3{margin:0;font-family:"Source Serif Var","Source Serif 4",serif;font-weight:640;
  font-size:clamp(1.5rem,2.4vw,2.5rem);line-height:1.06;letter-spacing:-.02em}
.pursuit .body{flex:1 1 0;min-width:0;margin:0;padding-top:.3em;font-size:1.0625rem;line-height:1.66;color:var(--ink-2);max-width:68ch}
.pursuit .marks{list-style:none;margin:var(--s4) 0 0;padding:0;font-size:.84rem;line-height:1.45;color:var(--ink-3)}
.pursuit .more{display:none}   /* a phone control; see the phone block */
.pursuit .marks li{padding:var(--s1) 0}
.pursuit .marks li + li{border-top:1px solid var(--hair-2)}

/* ---------- the foot of the note ----------
   A plate leaves a mark outside the printed area; the page ends on one, with the two
   outbound routes and the way back up, so the scroll never simply stops. */
.plate-foot{position:relative;background:var(--paper) url("assets/paper-tooth.png") repeat;background-size:256px 256px;
  padding:clamp(3.5rem,9vh,7rem) var(--gut) calc(var(--frame) + var(--s4));border-top:1px solid var(--hair)}
.plate-mark{position:relative;max-width:var(--measure);margin-inline:auto;border:1px solid var(--hair);padding:clamp(1.75rem,5vh,3.75rem) clamp(1.375rem,4vw,3.5rem)}
.plate-mark::after{content:"";position:absolute;inset:4px;border:1px solid var(--hair-2);pointer-events:none}
.foot-line{margin:0;font-family:"Source Serif Var","Source Serif 4",serif;font-weight:640;
  font-size:clamp(1.7rem,3.4vw,3.4rem);line-height:1;letter-spacing:-.02em}
.foot-sub{margin:.7em 0 0;font-size:.9rem;color:var(--ink-2)}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s5);margin-top:clamp(1.625rem,4vh,2.75rem)}
.foot-cta{position:relative;display:inline-flex;align-items:center;gap:var(--s4);padding:1.0625rem 1.875rem;text-decoration:none;
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;background:var(--ink);color:var(--paper);
  transition:transform .5s var(--ease)}
.foot-cta::before{content:"";position:absolute;inset:-6px;border:1px solid var(--hair);transition:inset .5s var(--ease)}
.foot-cta:hover{transform:translateY(-2px)}
.foot-cta:hover::before{inset:-10px}
.foot-cta svg{width:.8125rem;height:.8125rem}
.foot-link{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;text-underline-offset:7px;text-decoration-thickness:1px}
.foot-link:hover{text-decoration-thickness:2px}
.foot-micro{max-width:var(--measure);margin:var(--s6) auto 0;border-top:0;padding-top:0}

/* ---------- the stage: how the note hands over to its reverse ----------
   Only with JavaScript and motion allowed. Without them none of this applies: the reverse is
   simply the next section, already inked, and the record reads top to bottom.

   The note holds still. If it is taller than the screen (a small phone, a short window) it
   scrolls until its foot meets the foot of the screen and holds there, which is what the
   negative top does; --note-h is measured by stage.js. The reverse lies over it from the first pixel of scroll, transparent
   for its first screen, and an empty ink layer (the flood) opens behind the record by whichever
   mechanism the rendition uses. The record's type is set in paper colour, so it is invisible
   on paper and appears exactly where ink arrives behind it: nothing with text in it is ever
   clipped or repainted, which is what keeps the reveal smooth on a large screen. */
.motion .note{position:sticky;top:min(0px,calc(100svh - var(--note-h,100svh)));min-height:100svh}   /* never shorter than the screen, or the run would have started at rest */
.motion .stage2{position:relative;z-index:3;margin-top:-100svh;pointer-events:none}
/* the run: how far the page scrolls while the reverse is held. It has to be content, not
   padding, because a sticky box may only travel inside its parent's content box. */
.motion .stage2::after{content:"";display:block;height:var(--run,120svh)}
.motion .stage2.open{pointer-events:auto}
.motion .reverse{position:sticky;top:0;min-height:100svh;background:linear-gradient(transparent 100svh,var(--ink) 100svh)}
.motion .stage2.open .reverse{background:var(--ink)}
.motion .stage2.open .flood{display:none}      /* the reverse is inked itself now; the ink layer and its compositing can go */
.flood{display:none}
.motion .flood{display:block;position:absolute;top:0;left:0;right:0;height:100svh;overflow:hidden;pointer-events:none;z-index:1;contain:strict}
/* the ledger's rules are paper toned too, and would lie faintly across the live note: they are
   drawn once the ink is under all of them */
.motion .stations,.motion .station{transition:border-color .5s var(--ease),background-size .6s var(--ease)}
/* drawn slowly, cleared at once: on the way back up to the hero no line may outlast the ink */
.motion .stations:not(.ruled),.motion .stations:not(.ruled) .station{transition-duration:.12s}
.motion .stage2:not(.open) .station::before{transition-duration:.12s}
.motion .stations:not(.ruled),.motion .stations:not(.ruled) .station{border-color:transparent}
.motion .stations:not(.ruled){background-size:1px 0,1px 0,1px 0}

@media (max-width:1279px){
  .track-head{display:block}
  .track-head .head{margin-bottom:.5em}
  .station .what{flex-direction:column;gap:var(--s3)}
  .station .who{flex:none}
  .station .body{flex:none;padding-top:0}
  .now .now-head{flex-basis:calc(var(--c1) + var(--g) * .5 + 8rem)}
  .out-head{flex-basis:18rem}
  /* an entry stacks: what it was, the account, then its honours on one wrapped line */
  .pursuit{flex-direction:column;gap:var(--s3)}
  .pursuit .lead{display:contents}
  .pursuit .body{padding-top:0}
  .pursuit .marks{order:3;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);margin-top:var(--s2)}
  .pursuit .marks li,.pursuit .marks li + li{padding:0;border:0}
}
@media (max-width:900px){
  :root{--ctl:2.25rem}   /* 36px masthead plates, lighter over the photograph; their tap areas are extended to 44px in _head.part */
  .note{min-height:0}
  .sheet .in{padding:var(--s8) 0}   /* the reading sheet's desktop padding is a screen's worth on a phone */
  /* one group, centred in the height of the note: on a tablet, spreading the portrait and the copy
     to opposite ends left a void between them */
  .grid{flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--s7);padding-top:var(--s5);padding-bottom:var(--s7)}
  .copy{flex:none}
  .portrait{order:-1;align-self:center;height:min(42svh,70vw)}
  h1.name .l:last-child{padding-left:.3em}
  .mast nav a{letter-spacing:.12em;padding:0 1rem}
  .gauge{top:auto;bottom:0;left:0;right:0;translate:0;height:2px;width:auto}
  .gauge .track{width:100%;height:2px}
  .gauge .track::before{left:0;right:0;top:1px;bottom:auto;width:auto;height:1px}
  .gauge .fill{width:calc(var(--p,0) * 100%);height:2px;border:0;border-top:2px solid #E6EBEE}
  .station{flex-direction:column;gap:var(--s2)}
  .station .yr,.station .fig{flex:none}
  .station .fig{text-align:left;margin-top:var(--s3)}   /* paper, as on a wide sheet: copper on ink is 2.6:1 and copper is never a fill */
  .station .fig small{margin-left:0}
  .now{flex-direction:column;gap:var(--s4)}
  .now .now-head{flex:none}
  .outside .in{flex-direction:column;gap:var(--s6)}
  .out-head{position:static;flex:none}
  /* each pursuit opens on its first sentence; Read more shows the rest. Only once the handler in
     _tail.part has set .more-js, so without it the whole account is simply there. */
  .more-js .pursuit:not(.open) .body .rest{display:none}
  .more-js .pursuit:not(.open) .more{display:inline-block;margin:var(--s2) 0 0;padding:.75rem 0;border:0;background:none;
    font:inherit;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
    text-decoration:underline;text-underline-offset:6px;cursor:pointer}
  .pursuit .more:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* On paper, or saved as a PDF: no stage. The note, then the record, each where it belongs. */
@media print{
  html{font-size:100%}
  .motion .note,.motion .reverse{position:relative;top:auto}
  .motion .stage2{margin-top:0;pointer-events:auto}
  .motion .stage2::after,.flood,.gauge{display:none !important}
  .motion .reverse{background:var(--ink)}
  .note,.note *,.reverse .in,.reverse .in *{opacity:1 !important;transform:none !important;visibility:visible !important}
  .motion .stations,.motion .stations .station{border-color:var(--rule) !important}
  .motion .stations{background-size:1px 100%,1px 100%,1px 100% !important}
  .motion .station::before{transform:none !important}
  .out-head{position:static}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}