/* ============================================================
   THE NAMESAKE PAGE, a layer on the section system.

   Load order: rummel-page.css, rummel-blocks.css, THEN this.
   Pairs with rummel-namesake.js. Used by archbishop-rummel.html only.

   This page is one man and one archive, so it invents five blocks the
   section library does not have: the portrait hero lockup, the film
   facade, the ERA timeline, the letter reader, and the relic chain.
   Everything else on the page is stock .lightsec / .bandsec / .cta.

   Namespaces, all new so nothing here can collide with the library:
     .nm-*    the hero, the film, the 1962 stand, the crest
     .era-*   the historical timeline. NOT .tl-*, which is the admissions
              timeline and fills against the real clock, which on a page
              about 1876 would sit at 100% and mean nothing.
     .pm-*    the 1953 pastoral letter and its reader
     .rel-*   the relics and their chain of hands

   Columbia Blue leads. Red punctuates and is softened on the dark fields,
   because a fully saturated red glows on a backlit screen. No crimson, no
   pink, no clip-path.
   ============================================================ */

.nm{
  /* Kelly, 2026-08-15: NEVER brown. The archive-cream and sepia tokens read
     brown against the blue, so the trio is remapped to cool neutrals. The
     names stay so every use below keeps working. */
  --paper-warm:#F7F9FC;      /* the paper surfaces: a cool off-white */
  --paper-edge:#D6E2EE;      /* hairlines and connectors: pale blue-grey */
  --sepia-ink:#4A5B6E;       /* secondary ink: slate, never sepia */
  --red-web:#B4142F;         /* red, deepened for dark fields only */
}

/* ============================================================
   HERO. Kelly's own lockup off the display case, set for a screen.

   The library hero is one photograph bled behind the copy. That is wrong
   for a seated studio portrait: a 16:9 crop of a 4:5 frame takes his head
   off. So the photograph becomes a figure beside the type and dissolves
   into the band on every side rather than ending on an edge.
   ============================================================ */
header.open.nm-hero{align-items:center;min-height:min(clamp(620px,62vw,1020px),96vh);}
header.open.nm-hero .wrap{padding-top:7.5rem;padding-bottom:5.5rem;}

.nm-lock{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);
  gap:clamp(1.8rem,3.4vw,3.6rem);align-items:center;}

/* THE FIGURE.
   The real photograph, untinted. An earlier version graded it into the brand
   blue to kill the grey studio ground, and it killed the photograph with it.
   (Kelly: "the real photo is much more impactful.") The dissolve does the work
   on its own: a deep radial mask feathers every edge, and it starts fading well
   inside the frame so there is no rectangle left to find. */
.nm-fig{position:relative;
  --nm-mask:radial-gradient(70% 64% at 50% 44%,#000 38%,rgba(0,0,0,.86) 58%,
            rgba(0,0,0,.42) 78%,rgba(0,0,0,.12) 90%,transparent 99%);}
.nm-fig img{width:100%;height:auto;display:block;
  -webkit-mask-image:var(--nm-mask);mask-image:var(--nm-mask);
  filter:contrast(1.06) brightness(1.03) saturate(1.04);
  /* Ken Burns (Kelly, 2026-08-16): a slow push in with a drift up and to the
     left, out and back over half a minute, so he is never quite still. */
  animation:nmKenBurns 30s ease-in-out infinite alternate;transform-origin:50% 40%;}
@keyframes nmKenBurns{from{transform:scale(1) translate3d(0,0,0);}to{transform:scale(1.11) translate3d(-1.6%,-2.4%,0);}}

/* light behind him, so the dissolve has something to dissolve into */
.nm-fig::before{content:"";position:absolute;left:50%;top:44%;
  width:126%;height:112%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(117,178,221,.26),rgba(117,178,221,0) 66%);}

.nm-type{min-width:0;}
/* Kelly, 2026-08-15: tighter tracking on the eyebrow. At .34em it drifted
   wider than JOSEPH FRANCIS underneath it and read loose against the lockup. */
.nm-type .pre{font-family:var(--sans);font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;font-size:clamp(.74rem,1.1vw,.9rem);color:var(--rb);   /* Rummel blue, Kelly 2026-08-16 */
  line-height:1;}
.nm-type .given{font-family:var(--sans);font-weight:400;text-transform:uppercase;
  letter-spacing:.11em;line-height:1;color:#fff;   /* tried Rummel blue 2026-08-16; Kelly: "I like the white better" */
  /* Kelly, 2026-08-15: pulled up under the eyebrow so ARCHBISHOP reads as part
     of the name rather than a label floating above it. */
  font-size:clamp(1.25rem,3.1vw,2.5rem);margin-top:4.5px;}
/* the surname is the moment. it is fitted to the column in JS rather than
   clamped, so it spans exactly edge to edge at every width instead of nearly. */
.nm-type .sur{font-family:var(--slab);text-transform:uppercase;
  line-height:.84;letter-spacing:.005em;color:#fff;white-space:nowrap;
  font-size:clamp(3.4rem,13vw,11rem);margin-top:.1rem;
  text-shadow:0 22px 60px rgba(6,23,48,.45);}
.nm-type .creed{display:flex;align-items:center;gap:1rem;margin-top:1.25rem;}
.nm-type .creed i{flex:none;width:52px;height:3px;background:var(--rb);border-radius:2px;}
.nm-type .creed span{font-family:var(--sans);font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;font-size:clamp(.76rem,1.35vw,1rem);color:#fff;}
/* Kelly, 2026-08-15: the tenure years came off the office line. His life spans
   sit under it instead, quieter than the office and set in the same face.
   The 4.5px matches the ARCHBISHOP / JOSEPH FRANCIS gap at the top of the
   lockup, so the pair above the name and the pair below it are set the same. */
.nm-type .lifespan{font-family:var(--sans);font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;font-size:clamp(.68rem,1.1vw,.84rem);color:var(--rb);   /* Rummel blue, Kelly 2026-08-16 */
  line-height:1;margin-top:4.5px;}

@media(max-width:1080px){
  header.open.nm-hero{min-height:0;}
  header.open.nm-hero .wrap{padding-top:5rem;padding-bottom:4rem;}
  .nm-lock{grid-template-columns:1fr;gap:1.6rem;justify-items:center;text-align:center;}
  .nm-fig{max-width:340px;}
  .nm-type .creed{justify-content:center;}
  .nm-type .lifespan{text-align:center;}
}
@media(max-width:560px){
  /* the whole lockup, portrait to the Hear button, fits one phone screen
     (Kelly, 2026-08-16: "move everything up so the bottom button fits") */
  header.open.nm-hero{min-height:calc(100svh - 72px);}   /* one screen: portrait, name, the button, air. The next row waits below the fold. */
  header.open.nm-hero .wrap{padding-top:2.8rem;padding-bottom:2.2rem;}   /* down a touch, Kelly 2026-08-16 */
  .nm-lock{gap:1rem;}
  .nm-fig{max-width:228px;}
  .nm-type .sur{font-size:clamp(2.7rem,15.5vw,4.6rem);}
  .nm-type .creed{margin-top:.9rem;}
  .nm-hear{margin-top:1rem;}
}

/* ============================================================
   THE BIO. Kelly's own wall copy, set in the two columns the vinyl
   uses. Real columns rather than a two up grid, so the text flows from
   the foot of one into the head of the next exactly as it does on the
   panel, instead of leaving a short column beside a long one.
   ============================================================ */
.nm-bio{columns:2;column-gap:clamp(2rem,4vw,3.6rem);
  font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-soft);
  orphans:3;widows:3;}
.nm-bio p{margin-bottom:1.05rem;}
.nm-bio p:last-child{margin-bottom:0;}
@media(max-width:820px){.nm-bio{columns:1;}}
/* a touch smaller on phones (Kelly, 2026-08-16); still above the 16px floor */
@media(max-width:700px){.nm-bio{font-size:1rem;line-height:1.66;}}

/* ============================================================
   THE FILM. A facade: nothing loads from Vimeo until it is asked for.
   ============================================================ */
.nm-film{position:relative;margin-top:3.2rem;background:var(--navy-3);
  box-shadow:var(--shadow-lg);overflow:hidden;}
.nm-film .frame{position:relative;aspect-ratio:16/10;width:100%;}
.nm-film .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 18%;   /* the arrival photo is nearly 5:4; keep the heads (Kelly, 2026-08-16: "the top is being cut off") */
  filter:grayscale(1) sepia(.32) contrast(1.06) brightness(.82);
  transition:filter .7s cubic-bezier(.22,.61,.36,1),transform 1.2s cubic-bezier(.22,.61,.36,1);}
.nm-film .frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 70% at 50% 44%,rgba(6,23,48,0) 30%,rgba(6,23,48,.72) 100%);}
.nm-film button.play{position:absolute;inset:0;z-index:3;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.15rem;
  background:transparent;border:0;cursor:pointer;color:#fff;}
/* the label was set straight onto a crowd of a thousand straw hats and could not
   be read. it gets its own ground now. */
.nm-film button.play .lab{padding:.62rem 1.15rem;border-radius:2px;
  background:rgba(6,23,48,.72);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.18);}
.nm-film button.play .disc{width:104px;height:104px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.1);
  border:2px solid rgba(255,255,255,.72);backdrop-filter:blur(3px);
  transition:transform .3s cubic-bezier(.2,.85,.25,1),background .3s ease,border-color .3s ease;}
.nm-film button.play .disc::before{content:"";width:0;height:0;margin-left:6px;
  border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;}
.nm-film button.play .lab{font-family:var(--sans);font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;font-size:var(--t-label);}
.nm-film button.play:hover .disc,.nm-film button.play:focus-visible .disc{
  transform:scale(1.09);background:rgba(117,178,221,.28);border-color:var(--rb);}
.nm-film button.play:hover ~ .frame img{filter:grayscale(1) sepia(.2) contrast(1.06) brightness(.94);}
.nm-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4;}
.nm-film .cap{padding:1.15rem 1.5rem 1.25rem;font-size:var(--t-label);line-height:1.6;
  color:var(--rb-type);background:var(--navy-3);}
.nm-film .cap b{color:#fff;font-weight:600;}

/* ============================================================
   THE ERA TIMELINE.

   Two columns. The left one is pinned and carries one colossal year, the
   era it belongs to, and the photograph for the moment currently in view.
   Year, word and photograph cross fade together on one curve and one
   duration so it reads as a single motion rather than three animations.

   The right column is the list. Rows are NOT boxed: no border, no fill, no
   left bar. The spine is the structure, and it fills to where you have
   read. (Kelly, 2026-08-14: "way less clunky, sleek and modern." A row is
   not a card and should not pretend to be liftable.)
   ============================================================ */
.era{--era-when:132px;--era-gap:26px;}

/* the switch. filtering re-deals the list. */
.era-switch{display:flex;gap:0;margin-bottom:2.4rem;border-bottom:2px solid var(--line);
  flex-wrap:wrap;}
.era-switch button{appearance:none;background:transparent;border:0;cursor:pointer;
  font-family:var(--sans);font-weight:500;text-transform:uppercase;letter-spacing:.13em;
  font-size:var(--t-label);color:var(--ink-soft);padding:1rem 1.35rem;
  border-bottom:3px solid transparent;margin-bottom:-2px;transition:color .2s ease,border-color .2s ease;}
.era-switch button:hover{color:var(--navy);}
/* the thread you are on is FILLED red, not just underlined (Kelly, 2026-08-16:
   "make it more obvious"). Rummel red, white type, squared to the row's rule. */
.era-switch button.active{color:#fff;background:var(--red);border-bottom-color:var(--red);border-radius:3px 3px 0 0;}   /* squared: "sleeker, not as curved" (Kelly, 2026-08-16) */
.era-switch button.active:hover{color:#fff;}
.era-count{font-family:var(--sans);font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;font-size:var(--t-label);color:var(--ink-soft);margin-bottom:1.5rem;}

.era-track{position:relative;}
.era-track::before{content:"";position:absolute;top:.9rem;bottom:1rem;
  left:calc(var(--era-when) + var(--era-gap));width:2px;background:var(--line);}
/* the fill spans the whole spine and is scaled down, rather than being grown by
   height. height is a layout property and animating it on every scroll frame
   costs a reflow each time; scaleY runs on the compositor and costs nothing. */
.era-fill{position:absolute;top:.9rem;bottom:1rem;left:calc(var(--era-when) + var(--era-gap));
  width:2px;background:linear-gradient(180deg,var(--rb-deep),var(--rb));
  transform:scaleY(0);transform-origin:top center;
  transition:transform .18s linear;}

.era-steps{list-style:none;padding-left:0;margin:0;}
.era-step{position:relative;display:grid;
  grid-template-columns:var(--era-when) calc(var(--era-gap)*2) minmax(0,1fr);
  padding-bottom:2.1rem;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.85,.25,1);}
.era-step:last-child{padding-bottom:0;}
.era-step.leaving{opacity:0;transform:translateY(-6px);}
.era-step[hidden]{display:none;}

.era-when{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:var(--t-label);color:var(--ink-soft);
  text-align:right;padding-top:.72rem;line-height:1.35;}
.era-when .y{display:block;font-family:var(--slab);text-transform:uppercase;
  font-size:1.16rem;letter-spacing:.01em;color:var(--navy);}

.era-dot{position:relative;justify-self:center;margin-top:.95rem;
  width:13px;height:13px;border-radius:50%;background:#fff;
  border:2px solid var(--line);transition:background .25s ease,border-color .25s ease,
  box-shadow .25s ease,transform .45s cubic-bezier(.2,.85,.25,1);}
.era-step.read .era-dot{background:var(--rb-deep);border-color:var(--rb-deep);}
.era-step.here .era-dot{background:var(--rb);border-color:var(--rb-deep);
  box-shadow:0 0 0 5px rgba(117,178,221,.26);}
.era-step.pivot .era-dot{background:var(--accent);border-color:var(--accent);}
.era-step.pivot.here .era-dot{box-shadow:0 0 0 5px rgb(var(--accent-rgb) / .22);}

/* THE DOTS, ALIVE.
   Three states you can feel rather than read. A moment you have not reached
   yet sits small and hollow. The one you are on comes forward and sends a
   single soft ring out of itself, once every few seconds, like a locator.
   A moment you have passed settles back a touch. The ring is the only thing
   on the spine that repeats, so it stays the eye's anchor and never becomes
   a throb. */
.era-dot{transform:scale(1);}
.era-step.read .era-dot{transform:scale(.84);}
.era-step.here .era-dot{transform:scale(1.2);}
.era-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--rb);opacity:0;pointer-events:none;}
.era-step.here .era-dot::after{animation:eraBeacon 3.1s cubic-bezier(.2,.7,.3,1) infinite;}
.era-step.pivot.here .era-dot::after{border-color:var(--accent);}
@keyframes eraBeacon{
  0%{transform:scale(1);opacity:.62;}
  62%{transform:scale(2.7);opacity:0;}
  100%{transform:scale(2.7);opacity:0;}
}
@media(prefers-reduced-motion:reduce){
  .era-dot,.era-step.read .era-dot,.era-step.here .era-dot{transform:none;}
  .era-step.here .era-dot::after{animation:none;}
}

/* THE PIVOTS.
   Twenty three rows at one weight is a list, and a list has no rhythm. The four
   moments the whole page is actually about get the red year and a heavier line,
   so a reader skimming the spine can see where the story turns without reading
   a word. Still no box: the emphasis is in the type, not in a container. */
.era-step.pivot{padding-bottom:2.5rem;}
.era-step.pivot .era-when .y{color:var(--accent);}
.era-step.pivot .era-card h3{font-size:1.52rem;line-height:1.12;}
.era-step.pivot .era-card > p{color:var(--ink);font-size:1.1rem;}

.era-card{grid-column:3;grid-row:1;
  width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  padding:.55rem .9rem .55rem 1.05rem;margin-left:-.35rem;font:inherit;color:inherit;
  transition:background .2s ease,transform .2s cubic-bezier(.2,.85,.25,1);}
.era-card:hover{background:var(--rb-pale);transform:translateX(3px);}
/* A card with nothing to expand. No pointer, no lift, no hover tint, so it
   never promises a panel that is not there. */
.era-card--static{cursor:default;}
.era-card--static:hover{background:transparent;transform:none;}
.era-card--static:hover h3{color:var(--navy);}
.era-card:focus-visible{outline:2px solid var(--rb-deep);outline-offset:3px;}
/* Rummel blue and bigger (Kelly, 2026-08-16); the same blue the headings' second line uses */
.era-card h3{font-family:var(--slab);text-transform:uppercase;font-size:1.32rem;
  line-height:1.2;color:var(--rb-deep);letter-spacing:.01em;transition:color .2s ease;}
.era-card:hover h3{color:var(--navy);}
.era-card > p{font-size:var(--t-body);line-height:1.6;color:var(--ink-soft);margin-top:.4rem;}
.era-card .go{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;
  font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:.7rem;color:var(--rb-deep);opacity:.78;transition:opacity .2s ease;}
/* Kelly, 2026-08-15: More stays visible. Hover only brightens it. */
.era-card:hover .go,.era-card:focus-visible .go,.era-step.open .era-card .go{opacity:1;}
.era-card .go span{transition:transform .2s ease;}
.era-step.open .era-card .go span{transform:rotate(90deg);}

/* THE PHOTOGRAPH.
   This archive runs from a 1.89:1 panoramic of the cathedral to a 0.54:1
   funeral card. Nothing sensible fits all of that, so nothing tries: there is
   no frame and no aspect-ratio here at all. Each picture is laid out at its own
   proportions and is never cropped. (Kelly: "they do not need to be cropped.")

   The only limit is height, so a tall document cannot run past a screenful, and
   when that limit bites the width gives way instead of the picture. */
.era-shot{margin:1.35rem 0 .3rem;}
.era-shot img{display:block;
  width:auto;height:auto;
  max-width:100%;max-height:76vh;
  background:var(--paper-warm);
  box-shadow:0 2px 5px rgba(11,34,64,.10), 0 30px 56px -26px rgba(11,34,64,.55);
  transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s ease;}
.era-shot:hover img{transform:translateY(-5px);
  box-shadow:0 2px 6px rgba(11,34,64,.12), 0 46px 74px -28px rgba(11,34,64,.6);}
.era-shot figcaption{margin-top:.85rem;font-size:var(--t-label);line-height:1.55;
  color:var(--ink-soft);max-width:64ch;}

/* NEXT, at the foot of each thread (2026-08-15). One control, one job. */
.era-next{display:flex;justify-content:flex-end;margin-top:clamp(1.6rem,3vw,2.6rem);
  padding-top:1.4rem;border-top:1px solid var(--line,#E3E9F0);}
.era-next[hidden]{display:none;}
.era-next button{appearance:none;cursor:pointer;background:transparent;border:0;
  font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:.78rem;color:var(--rb-deep);padding:.9rem 1.1rem;min-height:44px;
  display:inline-flex;align-items:center;gap:.5rem;
  transition:color .2s ease,transform .25s cubic-bezier(.2,.85,.25,1);}
.era-next button b{font-weight:600;color:var(--navy);}
.era-next button span{display:inline-block;transition:transform .25s cubic-bezier(.2,.85,.25,1);}
.era-next button:hover,.era-next button:focus-visible{color:var(--navy);transform:translateX(3px);}
.era-next button:hover span{transform:translateX(3px);}
.era-next button:focus-visible{outline:2px solid var(--rb-deep);outline-offset:3px;}

/* a wide picture earns the full column, a tall one is held to a readable
   measure so a portrait card does not tower over its own caption */
.era-shot img[width][height]{width:auto;}
/* Kelly, 2026-08-15: the expansion opens directly under the card, and the
   photograph follows it, so More never buries its own text under a picture. */
.era-step .era-shot{grid-column:3;grid-row:3;}

/* the expansion. height is animated on a wrapper so the inner text never reflows.
   grid-column is NOT optional: the step is a three column grid and without it
   the panel auto places into the date column, which is 112px wide, and sets the
   whole account one word per line. */
.era-more{grid-column:3;grid-row:2;overflow:hidden;height:0;
  transition:height .42s cubic-bezier(.16,1,.3,1);}
.era-more .in{padding:.35rem 1.05rem 1.15rem;}
.era-more p{font-size:var(--t-body);line-height:1.72;color:var(--ink-soft);}
.era-more p + p{margin-top:.9rem;}
/* a short list inside an expansion (the schools, 2026-08-15) */
.era-list{list-style:none;padding:0;margin:.9rem 0;}
.era-list li{position:relative;padding-left:1.25rem;font-size:var(--t-body);line-height:1.62;color:var(--ink-soft);}
.era-list li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--rb);}
.era-list li b{color:var(--navy);font-weight:600;}
/* Kelly, 2026-08-15: the quotation itself in italic, and air after the
   citation so the next paragraph does not crowd it. */
.era-more .said{margin:1.2rem 0 1.4rem;padding-left:1.1rem;border-left:3px solid var(--accent);
  font-family:var(--serif);font-style:italic;font-size:1.06rem;line-height:1.62;color:var(--navy);}
.era-more .said cite{display:block;margin-top:.65rem;font-family:var(--sans);font-style:normal;
  font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  font-size:.7rem;color:var(--ink-soft);}
.era-more .said + p{margin-top:0;}

@media(max-width:1080px){
  .era{--era-when:0px;--era-gap:16px;}
  .era-step{grid-template-columns:calc(var(--era-gap)*2) minmax(0,1fr);}
  .era-when{grid-column:2;grid-row:1;text-align:left;padding-top:0;padding-bottom:.3rem;
    display:flex;align-items:baseline;gap:.55rem;}
  .era-when .y{display:inline;font-size:1.1rem;}
  .era-dot{grid-column:1;grid-row:1;margin-top:.2rem;}
  .era-card{grid-column:2;grid-row:2;margin-left:0;padding-left:0;padding-right:0;}
  .era-card:hover{background:transparent;transform:none;}
  .era-step .era-shot{grid-column:2;grid-row:4;}
  .era-shot img{max-height:62vh;}
  .era-more{grid-column:2;grid-row:3;}
  .era-more .in{padding-left:0;padding-right:0;}
  .era-track::before,.era-fill{left:var(--era-gap);}
}

/* ============================================================
   THE 1953 LETTER, and its reader.
   ============================================================ */
/* ---- THE SENTENCE (Kelly, 2026-08-15, twice: first "a bit weak", then
   "lacks impact and the font is too big"). Display scale was the problem, not
   the answer: centred ragged lines at 3rem read soft and posterish. It is set
   as a document now. Left aligned against a hard left edge, a size smaller so
   the eye takes a whole clause at once, tight leading, an oversized opening
   quotation mark anchoring the corner, and the year pushed off to the right
   where it does not sit under the words. Impact comes from the structure and
   the contrast, not from scale. ---- */
.pm-quote{font-family:var(--serif);font-size:clamp(1.22rem,2.3vw,1.9rem);
  line-height:1.36;color:#fff;max-width:30ch;margin:0;
  text-shadow:0 18px 44px rgba(0,0,0,.42);}
.pm-quote .ln{display:block;}
.pm-quote .ln.lit{color:var(--rb);font-style:italic;}
.pm-quote em{font-style:normal;color:var(--rb);}

/* SPOKEN, ONE WORD AT A TIME (Kelly, 2026-08-15: "let the words slowly animate
   like he is speaking them"). rummel-namesake.js wraps every word in .w and
   numbers it with --i; the words arrive at speaking pace, each rising out of a
   soft blur, and the attribution lands a beat after the last one. Nothing here
   fires until the block is in view. Without JS the words are simply there. */
.pm-quote .w{display:inline-block;}
.js .pm-quote .w{opacity:0;transform:translateY(.32em);filter:blur(5px);
  transition:opacity .55s ease,transform .6s cubic-bezier(.2,.85,.25,1),filter .55s ease;
  transition-delay:calc(var(--i) * 118ms);}
.js .pm-open.in .pm-quote .w{opacity:1;transform:none;filter:none;}
.js .pm-attrib{opacity:0;transform:translateY(8px);
  transition:opacity .7s ease,transform .7s ease;
  transition-delay:calc(var(--n, 40) * 118ms + 380ms);}
.js .pm-open.in .pm-attrib{opacity:1;transform:none;}
/* the last two lines carry the promise; they warm from white to Columbia Blue
   as they land, so the colour is part of the speaking rather than pre-set */
.js .pm-quote .ln.lit .w{color:#fff;transition-property:opacity,transform,filter,color;}
.js .pm-open.in .pm-quote .ln.lit .w{color:var(--rb);
  transition-duration:.55s,.6s,.55s,1.4s;}

/* THE MAN BESIDE HIS WORDS, as a stage (Kelly, 2026-08-15: "we want people
   in AWE"). The block takes most of the viewport. He is large, at his desk,
   dissolving into the band, and he sits a hair deeper than the words: on
   scroll he moves a little slower than the page and the year moves a little
   faster, so the frame has depth. Behind him a Columbia Blue field breathes.
   The words arrive one at a time; when the promise lands it blooms. */
.pm-open{position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4rem);align-items:center;max-width:72rem;
  min-height:min(82vh,860px);padding-block:clamp(1rem,3vw,2.5rem);}
.pm-portrait{margin:0;position:relative;height:100%;min-height:clamp(380px,64vh,720px);
  will-change:transform;}
.pm-portrait .ph{position:absolute;inset:0;overflow:hidden;}
.pm-portrait .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:58% 46%;
  filter:grayscale(1) contrast(1.06) brightness(.98);
  /* the photograph dissolves into the band on every side. no edge anywhere. */
  -webkit-mask-image:radial-gradient(74% 80% at 52% 50%,#000 40%,rgba(0,0,0,.55) 64%,transparent 90%);
          mask-image:radial-gradient(74% 80% at 52% 50%,#000 40%,rgba(0,0,0,.55) 64%,transparent 90%);
  transform:scale(1.06);animation:pmPortraitDrift 40s ease-in-out infinite alternate;
  animation-play-state:paused;}
.pm-open.in .pm-portrait .ph img{animation-play-state:running;}
@keyframes pmPortraitDrift{
  from{transform:scale(1.06) translate3d(1%,0,0);}
  to{transform:scale(1.13) translate3d(-1.2%,-1%,0);}
}
/* the breathing field behind him */
.pm-portrait::before{content:"";position:absolute;inset:-6% -10%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(117,178,221,.26),rgba(117,178,221,.07) 52%,transparent 74%);
  animation:pmBreathe 9s ease-in-out infinite;animation-play-state:paused;}
.pm-open.in .pm-portrait::before{animation-play-state:running;}
@keyframes pmBreathe{0%,100%{opacity:.75;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}
.pm-portrait figcaption{position:absolute;left:10%;bottom:6%;z-index:1;
  font-family:var(--sans);font-weight:500;text-transform:uppercase;letter-spacing:.18em;
  font-size:.66rem;color:rgba(255,255,255,.72);
  opacity:0;transition:opacity 1s ease 4.6s;}
.pm-open.in .pm-portrait figcaption{opacity:1;}
.pm-words{min-width:0;position:relative;}

/* the promise blooms as it lands: a soft light behind the last two lines,
   there for a breath and then settling */
.js .pm-open.in .pm-quote .ln.lit .w{
  animation:pmBloom 2.4s ease-out calc(var(--i) * 118ms + .5s) both;}
@keyframes pmBloom{
  0%{text-shadow:0 18px 44px rgba(0,0,0,.42);}
  40%{text-shadow:0 0 22px rgba(117,178,221,.75),0 0 60px rgba(117,178,221,.35),0 18px 44px rgba(0,0,0,.42);}
  100%{text-shadow:0 0 10px rgba(117,178,221,.28),0 18px 44px rgba(0,0,0,.42);}
}
/* a hairline draws itself under the sentence after the last word, and the
   attribution follows it in */
.pm-attrib{position:relative;padding-top:1.1rem;}
.pm-attrib::before{content:"";position:absolute;left:0;top:0;height:1px;width:5.5rem;
  background:linear-gradient(90deg,var(--rb),transparent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .9s cubic-bezier(.16,1,.3,1) calc(var(--n, 40) * 118ms + 200ms);}
.js .pm-open.in .pm-attrib::before{transform:scaleX(1);}

/* the year, watermarked above the words on the right. Kelly, 2026-08-15:
   it has to READ, so it sits fully inside the frame, clear of the sentence,
   and a good step brighter than a ghost. */
/* Kelly, 2026-08-15: 1953 much bigger, laid behind the WHOLE card, portrait
   and words alike. It is the ground the scene sits on. */
.pm-year{position:absolute;inset:0;z-index:-1;pointer-events:none;user-select:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--slab);text-transform:uppercase;line-height:1;
  font-size:clamp(11rem,30vw,28rem);letter-spacing:.04em;
  color:rgba(117,178,221,.10);}
/* the shadow quotation mark, hung on the first word */
.pm-mark{position:absolute;left:-.38em;top:-.42em;z-index:-1;
  pointer-events:none;user-select:none;
  font-family:var(--serif);font-size:clamp(6rem,11vw,10rem);line-height:1;
  color:rgba(117,178,221,.22);text-shadow:0 12px 40px rgba(0,0,0,.25);}

@media(max-width:860px){
  /* STACKED, AS CINEMA (Kelly, 2026-08-16: "make this look cooler on mobile").
     The photograph is the ground of the scene: full bleed, square, his face
     high in the frame, dissolving down into the band. The words rise up over
     its foot with the year behind them, so the sentence lands on him rather
     than under him. */
  .pm-open{grid-template-columns:1fr;gap:0;text-align:left;min-height:0;padding-block:0;overflow:visible;}
  .pm-portrait{max-width:none;width:calc(100% + 30px);margin-inline:-15px;height:auto;min-height:0;}
  .pm-portrait .ph{position:relative;aspect-ratio:1/1;}
  .pm-portrait .ph img{object-position:58% 38%;
    /* solid through his face and desk, then gone by the foot of the frame; a
       breath of fade at the top too, so neither edge is ever a line */
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 50%,rgba(0,0,0,.55) 72%,transparent 97%);
            mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 50%,rgba(0,0,0,.55) 72%,transparent 97%);}
  .pm-portrait::before{inset:-4% -6% 10%;}
  /* the caption moves to the top corner; the words own the bottom of the frame */
  .pm-portrait figcaption{left:15px;right:15px;top:6%;bottom:auto;}
  .pm-words{margin-top:-24%;padding-inline:0;z-index:1;}
  /* on a phone the sentence FLOWS. The desktop's deliberate line breaks turned
     into a ragged stack at 393px (Kelly, 2026-08-16: "can still be cleaner"),
     so the lines run together and wrap where the width says; the promise at
     the end is still italic Columbia. */
  .pm-quote{max-width:none;font-size:clamp(1.18rem,5.1vw,1.45rem);line-height:1.42;text-shadow:0 10px 30px rgba(0,0,0,.45);text-wrap:pretty;}
  .pm-quote .ln{display:inline;}
  .pm-quote .ln.lit{display:inline;}
  .pm-mark{left:-.2em;top:-.5em;font-size:clamp(5.5rem,22vw,8rem);color:rgba(117,178,221,.28);}
  /* the year sits ON the frame here, top right, a light watermark over the room */
  .pm-year{z-index:1;align-items:flex-start;justify-content:flex-end;padding:1% 3% 0 0;
    font-size:clamp(6.5rem,34vw,11rem);color:rgba(255,255,255,.12);}
  .pm-attrib{margin-top:1.4rem;}
}
/* two deliberate lines: the man, then the day. never a stray wrap. */
.pm-attrib span{display:block;}
.pm-attrib span + span{margin-top:.3rem;color:var(--rb-type);font-weight:500;}
@media(prefers-reduced-motion:reduce){
  .js .pm-quote .w,.js .pm-open.in .pm-quote .w{opacity:1;transform:none;filter:none;transition:none;}
  .js .pm-attrib,.js .pm-open.in .pm-attrib{opacity:1;transform:none;transition:none;}
  .js .pm-quote .ln.lit .w{color:var(--rb);}
  .pm-portrait .ph img,.pm-open.in .pm-portrait .ph img{animation:none;transform:none;will-change:auto;}
}
/* a long, soft field behind the sentence. no edge anywhere on it. */
/* width stays inside the column. a wider field looked better but pushed the
   document 120% of the container and gave the whole page a horizontal scroll. */
.pm-glow{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  z-index:-2;pointer-events:none;width:min(1100px,100%);aspect-ratio:1.6/1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(117,178,221,.20),
             rgba(117,178,221,.07) 45%,rgba(117,178,221,0) 72%);}

.pm-attrib{margin-top:clamp(1.5rem,2.6vw,2.1rem);font-family:var(--sans);font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;font-size:var(--t-label);color:var(--rb);}
.pm-context{margin-top:1.5rem;max-width:44rem;}
/* the heading is off screen now; keep it out of the flow without hiding it
   from a screen reader. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

@media(prefers-reduced-motion:reduce){
  .js .pm-quote .ln,.js .pm-open.in .pm-quote .ln{opacity:1;transform:none;transition:none;}
}
@media(max-width:560px){
  .pm-quote{max-width:none;}
}

.pm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4rem);align-items:center;}
.pm-pages{display:grid;grid-template-columns:repeat(5,1fr);gap:.85rem;}
.pm-page{position:relative;background:var(--paper-warm);border:0;cursor:pointer;padding:0;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.7);
  transition:transform .34s cubic-bezier(.2,.85,.25,1),box-shadow .34s ease;}
.pm-page img{width:100%;height:auto;display:block;}
.pm-page .n{position:absolute;left:0;right:0;bottom:0;padding:.4rem 0 .45rem;
  font-family:var(--sans);font-weight:600;letter-spacing:.14em;font-size:.62rem;
  text-transform:uppercase;text-align:center;color:#fff;
  background:linear-gradient(180deg,rgba(6,23,48,0),rgba(6,23,48,.86));
  opacity:0;transition:opacity .3s ease;}
.pm-page:hover,.pm-page:focus-visible{transform:translateY(-10px) rotate(-1.2deg);
  box-shadow:0 34px 60px -18px rgba(0,0,0,.8),0 0 0 1px rgba(117,178,221,.5);}
.pm-page:hover .n,.pm-page:focus-visible .n{opacity:1;}
.pm-page:focus-visible{outline:2px solid var(--rb);outline-offset:4px;}
.pm-credit{margin-top:1.6rem;font-size:var(--t-label);line-height:1.6;color:var(--rb-type);}

/* THE PAGES INVITE THE CLICK (Kelly, 2026-08-15).
   Three things, all quiet. The five pages deal themselves in on first sight,
   one after another, so the eye reads them as a stack of objects rather than
   a row of thumbnails. Each one then rests on a slow breath, staggered by
   --i so they are never in step. And a light sweeps across the paper on
   hover, which is the part that says "this opens." */
.pm-page{--i:0;animation:pmDeal .62s cubic-bezier(.2,.85,.25,1) both;
  animation-delay:calc(var(--i) * 90ms);}
@keyframes pmDeal{
  from{opacity:0;transform:translateY(22px) rotate(-3deg) scale(.94);}
  to{opacity:1;transform:none;}
}
.pm-page::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-120%);opacity:0;}
.pm-page:hover::after,.pm-page:focus-visible::after{
  animation:pmSheen .85s cubic-bezier(.25,.6,.3,1) forwards;}
@keyframes pmSheen{
  0%{transform:translateX(-120%);opacity:0;}
  18%{opacity:1;}
  100%{transform:translateX(120%);opacity:0;}
}
/* the resting breath, so the stack is alive before anyone touches it */
.pm-pages.in-view .pm-page{animation:pmDeal .62s cubic-bezier(.2,.85,.25,1) both,
  pmPageBreathe 7.5s ease-in-out calc(1s + var(--i) * 700ms) infinite;}
/* pmPageBreathe, not pmBreathe: that name belongs to the portrait glow above,
   and a second definition of it had been quietly overriding the glow. */
@keyframes pmPageBreathe{
  0%,100%{transform:none;}
  50%{transform:translateY(-4px);}
}
@media(prefers-reduced-motion:reduce){
  .pm-page,.pm-pages.in-view .pm-page{animation:none;opacity:1;transform:none;}
  .pm-page:hover::after,.pm-page:focus-visible::after{animation:none;}
}

@media(max-width:900px){
  .pm-grid{grid-template-columns:1fr;}
  .pm-quote{max-width:none;}
}

/* the reader */
.rdr{position:fixed;inset:0;z-index:120;display:none;padding:clamp(15px,3vw,2.4rem);
  align-items:center;justify-content:center;
  background:rgba(6,23,48,.82);backdrop-filter:blur(7px);}
.rdr.on{display:flex;}
/* Kelly, 2026-08-15: the reader reads in light blue tones rather than the
   archive cream. Columbia Blue tinted all the way down, so the panel sits in
   the brand instead of beside it. The scan itself stays untouched. */
.rdr-panel{position:relative;width:min(1180px,100%);max-height:94vh;overflow:auto;
  background:#F4F9FD;box-shadow:0 40px 90px -30px rgba(6,23,48,.85);
  display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .4s cubic-bezier(.2,.7,.2,1),transform .4s cubic-bezier(.2,.7,.2,1);}
.rdr.on .rdr-panel{opacity:1;transform:none;}
.rdr-pic{background:#DCEBF7;padding:clamp(1rem,2vw,1.9rem);}
.rdr-pic img{width:100%;height:auto;display:block;box-shadow:0 14px 34px -14px rgba(0,0,0,.5);}
.rdr-txt{padding:clamp(1.4rem,2.6vw,2.6rem);}
.rdr-txt h3{font-family:var(--slab);text-transform:uppercase;font-size:1.3rem;
  color:var(--navy);letter-spacing:.01em;}
.rdr-txt .meta{margin-top:.5rem;font-family:var(--sans);font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--rb-deep);}
.rdr-txt .body{margin-top:1.3rem;font-family:var(--serif);font-size:.99rem;line-height:1.78;
  color:#22384F;white-space:pre-line;}
.rdr-txt .body mark{background:rgba(244,196,48,.42);color:inherit;padding:.05em .12em;}
.rdr-nav{display:flex;align-items:center;gap:.8rem;margin-top:1.8rem;
  padding-top:1.3rem;border-top:1px solid #CFE3F2;}
.rdr-nav button{appearance:none;cursor:pointer;background:transparent;
  border:1.5px solid rgba(43,110,158,.36);color:var(--rb-deep);
  width:44px;height:44px;border-radius:50%;font-size:1.1rem;line-height:1;
  transition:background .2s ease,border-color .2s ease,color .2s ease;}
.rdr-nav button:hover:not(:disabled){background:var(--rb-deep);border-color:var(--rb-deep);color:#fff;}
.rdr-nav button:disabled{opacity:.3;cursor:default;}
.rdr-nav .of{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:.7rem;color:var(--rb-deep);}
.rdr-x{position:absolute;top:.7rem;right:.7rem;z-index:5;width:44px;height:44px;
  border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--navy);
  font-size:1.5rem;line-height:1;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.85,.25,1),background .25s ease,color .25s ease;}
.rdr-x:hover{transform:rotate(90deg);background:var(--accent);color:#fff;}

@media(max-width:820px){
  .rdr-panel{grid-template-columns:1fr;}
  .rdr-pic{padding:15px;}
}

/* ============================================================
   THE MARKED PAGE.

   Somebody read page five with a pen in hand. The marks are baked into the
   scan, so nothing here is drawn or reconstructed: the page itself travels
   and enlarges to each real mark in turn, and a ring lands on it. A caption
   says what was marked. Then the page pulls back and you see that all three
   marks are around one paragraph.
   ============================================================ */
.mk{margin-top:clamp(3.4rem,6vw,5.4rem);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.8rem,3.4vw,3.4rem);align-items:center;}
.mk-frame{position:relative;overflow:hidden;aspect-ratio:4/3;
  background:var(--paper-warm);box-shadow:0 40px 80px -30px rgba(0,0,0,.8);}
.mk-frame img{position:absolute;left:50%;top:50%;width:100%;height:auto;
  transform-origin:0 0;
  transform:translate(-50%,-35%) scale(1);
  transition:transform 1.15s cubic-bezier(.16,1,.3,1);}
/* the ring sits dead centre because the page moves, not the ring */
.mk-ring{position:absolute;left:50%;top:50%;width:clamp(96px,17%,150px);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.5);opacity:0;pointer-events:none;
  border:3px solid var(--accent);border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.5), 0 0 34px rgba(200,16,46,.45);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.85,.25,1);}
.mk-frame.ringed .mk-ring{opacity:1;transform:translate(-50%,-50%) scale(1);}
.mk-frame .vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 58% at 50% 50%,rgba(6,23,48,0) 42%,rgba(6,23,48,.5) 100%);
  opacity:0;transition:opacity .6s ease;}
.mk-frame.ringed .vig{opacity:1;}

.mk-read h3{font-family:var(--slab);text-transform:uppercase;
  font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.08;color:#fff;letter-spacing:.01em;}
.mk-read h3 em{font-style:normal;color:var(--rb);}
.mk-cap{margin-top:1.2rem;min-height:8.5rem;}
.mk-cap .step{display:none;}
.mk-cap .step.on{display:block;animation:mkIn .55s cubic-bezier(.2,.85,.25,1) both;}
@keyframes mkIn{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}
.mk-cap .n{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.72rem;color:var(--rb);}
.mk-cap p{margin-top:.55rem;font-family:var(--serif);font-size:1.12rem;line-height:1.66;
  color:rgba(255,255,255,.94);}
.mk-dots{display:flex;gap:.55rem;margin-top:1.6rem;}
.mk-dots button{appearance:none;border:0;cursor:pointer;padding:0;
  width:34px;height:4px;border-radius:2px;background:rgba(255,255,255,.26);
  transition:background .3s ease,transform .3s ease;}
.mk-dots button:hover{background:rgba(255,255,255,.5);}
.mk-dots button.on{background:var(--accent);transform:scaleY(1.6);}
.mk-dots button:focus-visible{outline:2px solid var(--rb);outline-offset:4px;}

@media(max-width:900px){
  .mk{grid-template-columns:1fr;}
  .mk-cap{min-height:0;}
}
@media(prefers-reduced-motion:reduce){
  .mk-frame img,.mk-ring,.mk-frame .vig{transition:none!important;}
  .mk-cap .step.on{animation:none;}
}

/* ============================================================
   THE 1962 STAND. Type only, on purpose.
   ============================================================ */
/* this section follows the letter band, which is --ink-band, and precedes white.
   two different darks meeting would draw a line across the page, so the field
   starts ON the band's exact color and only sinks to navy over the first
   third. the same trick lands it on white at the foot. no seam either end. */
.nm-stand{position:relative;overflow:hidden;
  background:
    linear-gradient(180deg,
      rgb(var(--ink-band-rgb) / 1)   0%,
      rgb(var(--ink-band-rgb) / .72) 9%,
      rgb(var(--ink-band-rgb) / .34) 20%,
      rgb(var(--ink-band-rgb) / 0)   36%),
    var(--navy-2);}
.nm-stand::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--dots);background-size:13px 13px;opacity:.3;}
.nm-stand::after{content:"";position:absolute;left:50%;top:50%;
  width:1100px;height:1100px;margin:-550px 0 0 -550px;pointer-events:none;
  background:radial-gradient(circle,rgba(180,20,47,.20),rgba(11,34,64,0) 64%);
  animation:nmPulse 9s ease-in-out infinite;}
@keyframes nmPulse{0%,100%{transform:scale(1);opacity:.8;}50%{transform:scale(1.14);opacity:1;}}
.nm-stand .wrap{position:relative;z-index:2;}
.nm-stand .date{font-family:var(--slab);text-transform:uppercase;
  font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:.94;color:#fff;letter-spacing:.01em;}
.nm-stand .date em{font-style:normal;color:var(--rb);}
.nm-stand .say{margin-top:1.8rem;font-family:var(--serif);
  font-size:clamp(1.1rem,1.9vw,1.42rem);line-height:1.72;color:rgba(255,255,255,.94);
  max-width:62ch;}
.nm-stand .say strong{color:#fff;font-weight:600;}
/* the TIME quotations: italic, in Rummel blue at full strength so they read
   against the navy (Kelly, 2026-08-15) */
.nm-stand .say em{font-style:italic;color:var(--rb);}
.nm-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:3rem;}
.nm-three .who{padding:1.7rem 1.6rem;background:rgba(255,255,255,.07);
  border-left:4px solid var(--red-web);}
.nm-three .who h3{font-family:var(--slab);text-transform:uppercase;font-size:1.06rem;
  color:#fff;letter-spacing:.01em;}
.nm-three .who .role{margin-top:.4rem;font-family:var(--sans);font-weight:500;
  text-transform:uppercase;letter-spacing:.15em;font-size:.7rem;color:var(--rb-type);}
.nm-three .who p{margin-top:.8rem;font-size:var(--t-body);line-height:1.62;
  color:rgba(255,255,255,.9);}
@media(max-width:860px){.nm-three{grid-template-columns:1fr;}}

/* ============================================================
   THE FULL BLEED BREATH.

   The only element on the page that leaves the container. It runs the whole
   width of #below, which is the viewport minus the rail, so it stays a true
   bleed with the rail in or out and never causes a horizontal scrollbar.
   ============================================================ */
.nm-bleed{position:relative;margin:0;overflow:hidden;
  height:clamp(360px,52vw,660px);background:var(--navy-3);
  display:flex;align-items:flex-end;}
/* KEN BURNS on the full bleed photographs, plus the frame sits higher in the
   crop (Kelly, 2026-08-15: "move this photo up"). The drift is deliberately
   small: 18s, under 6% of travel, so it reads as the room breathing rather
   than a slideshow. It only runs while the figure is actually on screen,
   which the JS toggles with .in-view, and it never runs for a reader who has
   asked for reduced motion. */
.nm-bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 30%;
  filter:grayscale(1) sepia(.22) contrast(1.06) brightness(.94);
  transform:scale(1.06);
  animation:bleedDrift 34s ease-in-out infinite alternate;
  animation-play-state:paused;}
/* only while the figure is on screen, so a phone is not compositing a
   full bleed photograph it cannot see. rummel-namesake.js sets .in-view. */
.nm-bleed.in-view img{animation-play-state:running;will-change:transform;}
@keyframes bleedDrift{
  from{transform:scale(1.06) translate3d(0,0,0);}
  to{transform:scale(1.16) translate3d(1.6%,-1.2%,0);}
}
@media(prefers-reduced-motion:reduce){
  .nm-bleed img,.nm-bleed.in-view img{animation:none;transform:scale(1.02);will-change:auto;}
}
/* the veil lands on the exact colour of the section below, so the photograph
   hands over rather than stopping on a line. */
.nm-bleed .veil{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,23,48,.44) 0%,rgba(6,23,48,.10) 26%,
      rgba(6,23,48,.42) 62%,rgba(6,23,48,.88) 100%),
    radial-gradient(70% 60% at 20% 92%,rgba(29,90,133,.42),transparent 70%);}
.nm-bleed figcaption{position:relative;z-index:2;width:100%;
  max-width:1280px;margin:0 auto;padding:0 2.4rem clamp(2.2rem,4vw,3.4rem);}
.nm-bleed .line{font-family:var(--slab);text-transform:uppercase;
  font-size:clamp(1.5rem,3.5vw,3rem);line-height:1.06;color:#fff;
  letter-spacing:.01em;max-width:20ch;text-shadow:0 18px 44px rgba(0,0,0,.55);}
.nm-bleed .line em{font-style:normal;color:var(--rb);}
.nm-bleed .src{margin-top:1rem;font-family:var(--sans);font-weight:500;
  text-transform:uppercase;letter-spacing:.19em;font-size:var(--t-label);
  color:rgba(255,255,255,.82);}
@media(max-width:760px){.nm-bleed figcaption{padding-left:15px;padding-right:15px;}}

/* ============================================================
   THE RELICS, and the chain of hands each one travelled.
   ============================================================ */
/* the whole section is the case: a warm ground, so the paper on it reads as
   paper under glass rather than as pictures on a website. */
.nm-vitrine{background:var(--paper-warm);
  background-image:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%);}
.nm-vitrine .h2{color:var(--navy);}

.rel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.4rem,2.6vw,2.4rem);margin-top:clamp(3rem,5vw,4.6rem);}
.rel{background:#fff;border-top:4px solid var(--rb-deep);
  padding:2rem 1.9rem 1.8rem;box-shadow:var(--shadow);
  transition:transform .34s cubic-bezier(.16,1,.3,1),box-shadow .34s ease;}
.rel:nth-child(2n){border-top-color:var(--accent);}
.rel:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);}
.rel h3{font-family:var(--slab);text-transform:uppercase;font-size:1.52rem;
  color:var(--navy);letter-spacing:.01em;line-height:1.1;}
.rel .when{margin-top:.5rem;font-family:var(--sans);font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;font-size:.86rem;color:var(--rb-deep);}
.rel p{margin-top:1rem;font-size:1.14rem;line-height:1.66;color:var(--ink-soft);}

/* THE CHAIN.
   Every hand the object passed through, in order, ending at the case. It is a
   journey, so it draws itself: the connector grows downward and each hand
   arrives a beat after the one above it, ending on the red dot. */
.rel-chain{list-style:none;padding:0;margin:1.5rem 0 0;
  border-top:1px solid var(--paper-edge);padding-top:1.2rem;}
.rel-chain li{position:relative;padding-left:1.6rem;padding-bottom:.95rem;
  font-size:1.04rem;line-height:1.5;color:var(--sepia-ink);}
.js .rel-chain li{opacity:0;transform:translateY(6px);}
.js .rel-chain.on li{opacity:1;transform:none;
  transition:opacity .5s ease var(--d),transform .5s cubic-bezier(.2,.85,.25,1) var(--d);}
.js .rel-chain li::after{transform:scaleY(0);transform-origin:top center;}
.js .rel-chain.on li::after{transform:scaleY(1);
  transition:transform .42s cubic-bezier(.16,1,.3,1) var(--d);}
/* the last hand is where the object is now, so it lands with a little weight */
.js .rel-chain.on li:last-child::before{animation:chainLand .5s cubic-bezier(.2,.85,.25,1) var(--d) both;}
@keyframes chainLand{
  0%{transform:scale(.4);opacity:0;}
  60%{transform:scale(1.35);opacity:1;}
  100%{transform:scale(1);opacity:1;}
}
.rel-chain li:last-child{padding-bottom:0;color:var(--navy);font-weight:500;}
.rel-chain li::before{content:"";position:absolute;left:3px;top:.48em;
  width:8px;height:8px;border-radius:50%;background:var(--paper-edge);
  border:2px solid var(--paper-warm);box-shadow:0 0 0 1.5px var(--paper-edge);}
.rel-chain li:last-child::before{background:var(--accent);box-shadow:0 0 0 1.5px var(--accent);}
.rel-chain li::after{content:"";position:absolute;left:6px;top:1.35em;bottom:0;
  width:1.5px;background:var(--paper-edge);}
.rel-chain li:last-child::after{display:none;}
.rel-chain b{color:var(--navy);font-weight:600;}

@media(max-width:700px){.rel-grid{grid-template-columns:1fr;}}

/* THE CASE ITSELF (2026-08-15).
   Kelly's photographs of the install. The wide frame carries the section: it
   is the one place on the page a reader sees the objects where they actually
   are. It drifts on the same slow Ken Burns as the bleeds, only while on
   screen. The pair beneath it is the two ends closer, and the photographs
   read as photographs: a soft floor shadow, no border, no tint. */
.nm-case{margin-top:clamp(2.2rem,4vw,3.4rem);}
.nm-case figure{margin:0;}
.nm-case .ph{position:relative;overflow:hidden;background:var(--paper-edge);
  border-radius:2px;box-shadow:0 30px 60px -28px rgba(11,34,64,.45);}
.nm-case .ph img{display:block;width:100%;height:auto;}
.nm-case figcaption{margin-top:.95rem;font-size:var(--t-label);line-height:1.6;
  color:var(--ink-soft);}
.nm-case figcaption b{color:var(--navy);}
/* the wide frame: a fixed 5:2 letterbox on the whole case, sitting high in
   the crop so the motto on the wall stays in, and drifting very slowly */
.nm-case-hall .ph{aspect-ratio:5/2;}
.nm-case-hall .ph img{position:absolute;inset:0;height:100%;object-fit:cover;
  object-position:50% 58%;transform:scale(1.04);
  animation:caseDrift 30s ease-in-out infinite alternate;animation-play-state:paused;}
.nm-case.in .nm-case-hall .ph img{animation-play-state:running;will-change:transform;}
@keyframes caseDrift{
  from{transform:scale(1.04) translate3d(0,0,0);}
  to{transform:scale(1.11) translate3d(-1.4%,.6%,0);}
}
.nm-case-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2.2rem);margin-top:clamp(1.4rem,2.6vw,2.2rem);}
.nm-case-pair .ph{aspect-ratio:2.9/1;}
.nm-case-pair .ph img{position:absolute;inset:0;height:100%;object-fit:cover;
  transform:scale(1.05);animation-play-state:paused;}
/* each end drifts the opposite way to the other, and both are slower than the
   wide frame above them, so the three are never moving in step. */
/* the shorthand resets animation-play-state, so it is restated after it in
   each rule. Without that these two run off screen while the wide frame above
   them is correctly paused. */
.nm-case-pair figure:first-child .ph img{object-position:60% 50%;
  animation:caseDriftL 38s ease-in-out infinite alternate;
  animation-play-state:paused;}
.nm-case-pair figure:last-child  .ph img{object-position:40% 50%;
  animation:caseDriftR 42s ease-in-out infinite alternate;
  animation-play-state:paused;}
.nm-case.in .nm-case-pair .ph img{animation-play-state:running;will-change:transform;}
@keyframes caseDriftL{
  from{transform:scale(1.05) translate3d(0,0,0);}
  to{transform:scale(1.12) translate3d(1.8%,-.8%,0);}
}
@keyframes caseDriftR{
  from{transform:scale(1.05) translate3d(0,0,0);}
  to{transform:scale(1.12) translate3d(-1.8%,-.8%,0);}
}
@media(max-width:700px){
  .nm-case-hall .ph{aspect-ratio:16/10;}
  .nm-case-pair{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .nm-case .ph img,.nm-case.in .ph img,
  .rel-photo .ph img,.rel-grid.in .rel-photo .ph img{
    animation:none;transform:none;will-change:auto;}
}

/* THE PAPER, at a size worth stopping for.
   Three across rather than four, each sheet sitting on the ground at a slight
   angle with a real shadow under it, the way something laid in a case does.
   Six sheets over three columns ends on a full row. */
.rel-paper{margin-top:clamp(2.6rem,5vw,4.4rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.6rem,3vw,3rem) clamp(1.4rem,2.6vw,2.6rem);}
.rel-paper figure{margin:0;}
.rel-paper .sheet{position:relative;background:#fff;padding:10px;
  box-shadow:0 2px 4px rgba(60,45,25,.10), 0 26px 46px -22px rgba(60,45,25,.55);
  transform:rotate(var(--tilt,0deg));
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease;}
.rel-paper figure:nth-child(3n+1) .sheet{--tilt:-1.1deg;}
.rel-paper figure:nth-child(3n+2) .sheet{--tilt:.7deg;}
.rel-paper figure:nth-child(3n+3) .sheet{--tilt:-.5deg;}
.rel-paper figure:hover .sheet{transform:rotate(0deg) translateY(-10px) scale(1.015);
  box-shadow:0 2px 6px rgba(60,45,25,.12), 0 46px 70px -26px rgba(60,45,25,.62);}
.rel-paper img{width:100%;height:auto;display:block;
  transition:filter .5s ease;filter:saturate(.9) contrast(1.02);}
.rel-paper figure:hover img{filter:saturate(1.04) contrast(1.05);}
.rel-paper figcaption{margin-top:1.05rem;font-size:.9rem;line-height:1.6;
  color:var(--sepia-ink);}
.rel-paper figcaption b{color:var(--navy);font-weight:600;}
.rel-paper figcaption i{font-style:italic;}
@media(max-width:980px){.rel-paper{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){
  .rel-paper{grid-template-columns:1fr;}
  .rel-paper .sheet{--tilt:0deg!important;}
}

/* ============================================================
   THE CREST AND THE MOTTO.
   ============================================================ */
/* Rebuilt 2026-08-15 as a centred plate. See the markup comment. */
.nm-crest{max-width:60rem;margin-inline:auto;text-align:center;}

/* the motto, with a hairline either side of the Latin */
.nm-motto{display:flex;align-items:center;justify-content:center;gap:clamp(.9rem,2vw,1.6rem);
  font-family:var(--slab);text-transform:uppercase;
  font-size:clamp(1.55rem,3.6vw,3rem);line-height:1.04;color:var(--navy);
  letter-spacing:.012em;flex-wrap:wrap;}
/* Kelly, 2026-08-15: one colour on the Latin, and the English directly under
   it in Oswald as a tracked line, so the two read as a single lockup. */
.nm-motto .hairline{flex:1 1 2rem;max-width:7rem;height:1px;
  background:linear-gradient(90deg,transparent,var(--rb) 40%,var(--rb) 60%,transparent);}
.nm-motto .hairline:first-child{background:linear-gradient(90deg,transparent,var(--rb));}
.nm-motto .hairline:last-child{background:linear-gradient(90deg,var(--rb),transparent);}
.nm-motto-en{margin:.7rem auto 0;font-family:var(--sans);font-weight:500;
  text-transform:uppercase;letter-spacing:.22em;
  font-size:clamp(.78rem,1.3vw,1rem);line-height:1.4;color:var(--rb-deep);}

/* two shields side by side, and the inheritance drawn between them */
.nm-shields{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:clamp(1.2rem,3vw,2.6rem);
  margin:clamp(2.4rem,4.4vw,3.6rem) auto 0;max-width:46rem;}
.nm-shields figure{margin:0;}
.nm-shields img{display:block;margin:0 auto;height:clamp(150px,22vw,230px);width:auto;object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(11,34,64,.16));}
.nm-shields figure:first-child img{mix-blend-mode:multiply;filter:contrast(1.05)
  drop-shadow(0 18px 30px rgba(11,34,64,.16));}
.nm-shields figcaption{margin-top:.95rem;font-family:var(--sans);font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;font-size:var(--t-label);color:var(--ink-soft);}
.nm-shields figcaption b{color:var(--navy);font-weight:600;}
/* the pass: a line that draws itself from his shield to the school's, then a
   dot travels it once. runs when the block arrives, and never loops. */
.nm-pass{position:relative;width:clamp(2.6rem,7vw,5.5rem);height:2px;
  background:var(--line);overflow:visible;}
.nm-pass::before{content:"";position:absolute;inset:0;background:var(--rb);
  transform:scaleX(0);transform-origin:left center;}
.nm-pass span{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;background:var(--accent);opacity:0;
  box-shadow:0 0 0 4px rgb(var(--accent-rgb) / .16),0 0 16px 4px rgb(var(--accent-rgb) / .45);}
.js .nm-crest.in .nm-pass::before{animation:passLine 1.2s cubic-bezier(.2,.85,.25,1) .5s both;}
.js .nm-crest.in .nm-pass span{animation:passDot 1.5s cubic-bezier(.35,.7,.3,1) .6s both;}
/* and the school's shield BLOOMS as the dot lands: the horn received (2026-08-16,
   Kelly: "make this look cooler"). Columbia light, once, then it settles. */
.js .nm-crest.in .nm-shields figure:last-child img{animation:crestReceive 1.6s ease-out 1.9s both;}
@keyframes crestReceive{
  0%{filter:drop-shadow(0 18px 30px rgba(11,34,64,.16));transform:scale(1);}
  35%{filter:drop-shadow(0 18px 30px rgba(11,34,64,.16)) drop-shadow(0 0 22px rgba(117,178,221,.9)) drop-shadow(0 0 60px rgba(117,178,221,.5));transform:scale(1.04);}
  100%{filter:drop-shadow(0 18px 30px rgba(11,34,64,.16)) drop-shadow(0 0 12px rgba(117,178,221,.25));transform:scale(1);}
}
@keyframes passLine{to{transform:scaleX(1);}}
@keyframes passDot{
  0%{left:0;opacity:0;}
  12%{opacity:1;}
  88%{opacity:1;}
  100%{left:100%;opacity:0;}
}
.nm-horn-note{margin:clamp(1.8rem,3vw,2.4rem) auto 0;max-width:38rem;
  font-size:var(--t-body);line-height:1.68;color:var(--ink-soft);}
/* the small line out to the crest on Traditions (Kelly, 2026-08-16) */
.nm-horn-more{margin:.9rem auto 0;max-width:38rem;}
.nm-horn-more a{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;
  font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rb-deep);transition:color .2s ease;}
.nm-horn-more a span{font-size:1.1em;line-height:1;transition:transform .2s ease;}
.nm-horn-more a:hover{color:var(--navy);}
.nm-horn-more a:hover span{transform:translateX(3px);}

@media(max-width:560px){
  .nm-motto .hairline{display:none;}
  /* bigger shields and a longer pass on a phone, so the handoff is the moment
     rather than a dash between two stamps (Kelly, 2026-08-16) */
  .nm-shields{gap:.6rem;max-width:none;}
  /* sized by WIDTH here. Sized by height, the shared img{max-width:100%} capped
     the round crest inside its narrow column and squashed it into an oval
     (Kelly, 2026-08-16: "make sure the logo is not squished"). */
  .nm-shields img{height:auto;width:100%;max-width:190px;object-fit:contain;}
  .nm-shields figure:first-child img{max-width:150px;}
  .nm-pass{width:clamp(2.8rem,13vw,4.2rem);}
  .nm-shields figcaption{font-size:.68rem;letter-spacing:.14em;}
}
@media(prefers-reduced-motion:reduce){
  .js .nm-crest.in .nm-pass::before{animation:none;transform:scaleX(1);}
  .js .nm-crest.in .nm-pass span{animation:none;opacity:0;}
  .js .nm-crest.in .nm-shields figure:last-child img{animation:none;}
}

/* ============================================================
   REVEAL. Content is readable immediately; motion is a layer on top.
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.js .reveal.in{opacity:1;transform:none;}

/* ============================================================
   THE MOBILE FLOOR. Nothing on this page touches an edge.
   ============================================================ */
@media(max-width:760px){
  /* four tabs will not fit in a row. A sideways scroll with the bar hidden left
     the last tab looking cut off (Kelly, 2026-08-16: "clunky"), so: one row of
     four, each tab an equal share, down to where that stops fitting, then two
     rows of two. Never three and one. */
  .era-switch{border-bottom:0;}
  .era-switch button{flex:1 1 0;white-space:nowrap;text-align:center;padding:.85rem .3rem;
    font-size:.72rem;letter-spacing:.1em;border-bottom:3px solid var(--line);margin-bottom:0;}
  .era-switch button.active{border-bottom-color:var(--red);border-radius:3px;}
}
@media(max-width:600px){
  .era-switch{display:grid;grid-template-columns:1fr 1fr;}
  .era-switch button{padding:.95rem .4rem;font-size:.76rem;}
}
@media(max-width:560px){
  .rel{padding:1.6rem 1.35rem 1.5rem;}
  .rel-paper{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Five pages will not divide into any column count a phone can hold, and a grid
   of cards has to end on a FULL row. So on a narrow screen it stops being a grid
   and becomes one row you swipe, which is a full row by definition and reads
   like turning the pages anyway. */
@media(max-width:700px){
  .pm-pages{display:flex;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    padding-bottom:.6rem;margin-inline:-15px;padding-inline:15px;}
  .pm-pages::-webkit-scrollbar{display:none;}
  .pm-page{flex:0 0 44%;scroll-snap-align:center;}
  .pm-page:hover,.pm-page:focus-visible{transform:none;}
  .pm-doc-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
  .pm-doc-foot .pm-credit{margin:0;flex:1 1 auto;}
  .pm-arrows{display:flex;gap:.55rem;flex:none;}
  .pm-arrows button{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);
    background:transparent;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;
    display:grid;place-items:center;padding:0 0 3px;transition:background .2s ease,color .2s ease,opacity .2s ease;}
  .pm-arrows button:hover{background:#fff;color:var(--navy);}
  .pm-arrows button:disabled{opacity:.28;cursor:default;background:transparent;color:#fff;}
}
/* the arrows are for the swiping row only; the desktop grid shows every page */
@media(min-width:701px){ .pm-arrows{display:none;} }

/* ============================================================
   REDUCED MOTION.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .nm-fig img,.nm-stand::after{animation:none!important;}
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .era-fill,.era-more,.era-shot img,
  .rdr-panel,.pm-page,.rel,.rel-paper img{transition:none!important;}
}

/* ============================================================
   2026-08-15 REVISION. Kelly's review of the built page.

   Section 3 reads top to bottom instead of in two columns, the ink on the
   marked page draws itself on, the vitrine is set square instead of
   scattered, the relic chains carry a travelling dot, and the page ends on
   a new closer over the Requiem.
   ============================================================ */

/* Kelly, 2026-08-15: no dotted underline under a flagged fact on this page.
   Scoped to .nm so the shared marker still works on the event template. The
   data-confirm attribute stays in the markup, so the open question survives
   even though the reader never sees a mark. */
.nm [data-confirm]{border-bottom:0;}

/* ---- 3.0 NO TICK RULES. Kelly, 2026-08-15: the little red dash above
   each heading reads cheap. Scoped to .nm so the rest of the site keeps
   its own. The headings carry themselves. ---- */
.nm .sec-head .rule,
.nm .pm-open .rule{display:none;}

/* ---- 3.1 THE WORDS. One measure, hard left edge. ---- */
.pm-open{max-width:52rem;margin-inline:auto;text-align:left;}
.pm-open .sec-head{margin-bottom:clamp(1.8rem,3.4vw,2.8rem);}
.pm-open .pm-quote{margin-top:0;text-wrap:balance;}
.pm-open .pm-attrib{margin-top:1.7rem;}
.pm-context{max-width:44rem;margin:clamp(2rem,3.6vw,3rem) auto 0;
  padding-top:clamp(1.6rem,2.8vw,2.4rem);
  border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--serif);font-size:clamp(1rem,1.5vw,1.15rem);
  line-height:1.72;color:var(--rb-type);}

/* ---- 3.2 THE PEN. First pass drew a second set of ink on top of the
   marks and the two sets did not line up, which read as a scribble. The
   marks stay exactly as they are in the scan. What is animated is the
   annotator's own gesture: the ring strokes itself around the mark the way
   a pen circles a line, and the note beside it writes on left to right.
   Nothing is drawn onto the document. ---- */
.mk-ring{width:clamp(112px,19%,168px);border:0;border-radius:0;
  box-shadow:none;overflow:visible;z-index:3;
  transform:translate(-50%,-50%) scale(1);
  transition:opacity .35s ease;}
.mk-frame.ringed .mk-ring{transform:translate(-50%,-50%) scale(1);}
.mk-ring circle{fill:none;stroke:var(--red-web);stroke-width:2.6;
  stroke-linecap:round;vector-effect:non-scaling-stroke;
  transform:rotate(-96deg);transform-origin:50% 50%;
  stroke-dasharray:289;stroke-dashoffset:289;
  filter:drop-shadow(0 0 10px rgba(180,20,47,.55));}
.mk-ring.draw circle{animation:ringDraw .82s cubic-bezier(.22,.85,.3,1) forwards;}
@keyframes ringDraw{
  from{stroke-dashoffset:289;}
  to{stroke-dashoffset:0;}
}
/* the note writes itself on, in step with the pen */
.mk-cap .step.on p{animation:mkWrite .72s .14s cubic-bezier(.22,.85,.3,1) both;}
@keyframes mkWrite{
  from{clip-path:inset(0 100% 0 0);}
  to{clip-path:inset(0 0 0 0);}
}

/* ---- 3.3 THE DOCUMENT. Last in the section, as an invitation. ---- */
.pm-doc{margin-top:clamp(3.4rem,6vw,5.6rem);
  padding-top:clamp(2.4rem,4vw,3.4rem);
  border-top:1px solid rgba(255,255,255,.14);}
.pm-doc-h{font-family:var(--slab);text-transform:uppercase;
  font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.14;color:#fff;
  letter-spacing:.012em;margin-bottom:clamp(1.4rem,2.4vw,2rem);}
.pm-doc-h em{font-style:normal;color:var(--rb);}
.pm-doc .pm-credit{margin-top:1.4rem;max-width:52rem;}

/* ---- 5.1 THE VITRINE, set square. The scattered tilts and the ragged
   bottom edge were what read as sloppy. Every sheet now sits in an
   identical field and the row lines up. ---- */
.rel-paper .sheet{padding:14px;transform:none;
  aspect-ratio:3/4;display:grid;place-items:center;overflow:hidden;
  box-shadow:0 1px 2px rgba(60,45,25,.10), 0 20px 38px -20px rgba(60,45,25,.48);}
.rel-paper figure:nth-child(3n+1) .sheet,
.rel-paper figure:nth-child(3n+2) .sheet,
.rel-paper figure:nth-child(3n+3) .sheet{--tilt:0deg;}
.rel-paper figure:hover .sheet{transform:translateY(-8px);
  box-shadow:0 2px 4px rgba(60,45,25,.12), 0 38px 58px -24px rgba(60,45,25,.55);}
.rel-paper img{width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;}

/* ---- 5.2 THE CHAIN LIGHTS UP AS YOU SCROLL (Kelly, 2026-08-15).
   Replaces the old looping pulse, which fired whether anyone was looking or
   not. Now each dot is dark until its line arrives, then lights Columbia Blue
   in order down the chain, so scrolling is what draws the eye to the last
   line. The final dot, where the object sits today, lights red. ---- */
.rel-chain li::before{transform-origin:50% 50%;
  transition:background .45s ease var(--d),box-shadow .45s ease var(--d),
             transform .45s cubic-bezier(.2,.85,.25,1) var(--d);}
.js .rel-chain.on li::before{background:var(--rb);
  box-shadow:0 0 0 1.5px var(--rb-deep),0 0 12px 2px rgba(117,178,221,.55);}
.js .rel-chain.on li:last-child::before{background:var(--accent);
  box-shadow:0 0 0 1.5px var(--accent),0 0 16px 3px rgb(var(--accent-rgb) / .5);}
/* the connector fills behind the dot as it lights */
.js .rel-chain.on li::after{background:linear-gradient(180deg,var(--rb),var(--paper-edge));}
@media(prefers-reduced-motion:reduce){
  .rel-chain li::before{transition:none;}
}

/* ---- 7. THE CLOSER. The Requiem in the cathedral he was installed in,
   which is the photograph the page opens on. Cream above dissolves into
   the photograph rather than meeting it on a line. ---- */
.nm-close{position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(6rem,13vw,11rem);}
.nm-close .bg{position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 34%;
  filter:saturate(.5) contrast(1.06) brightness(.92);}
.nm-close .veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,
      #FBF9F5 0%,
      rgba(251,249,245,.55) 6%,
      rgba(251,249,245,0) 13%,
      rgba(11,34,64,.55) 26%,
      rgba(11,34,64,.86) 56%,
      rgba(11,34,64,.90) 78%,
      #0B2240 100%),
    radial-gradient(115% 85% at 50% 58%,
      rgba(11,34,64,0) 0%, rgba(11,34,64,.55) 100%);}
.nm-close .wrap{position:relative;z-index:2;text-align:center;
  max-width:58rem;}
.nm-close .h2{color:#fff;}
.nm-close .h2 em{font-style:normal;color:var(--rb);}
/* the school's name on top, in red (Kelly, 2026-08-16) */
.nm-close .h2 .school{display:block;color:var(--red);font-size:.66em;letter-spacing:.03em;margin-bottom:.35em;}
.nm-close .lede{margin-top:1.5rem;margin-inline:auto;max-width:46rem;
  color:var(--rb-type);}
.nm-close .acts{margin-top:clamp(2rem,3.4vw,2.8rem);}

@media(max-width:760px){
  .pm-open{text-align:left;}
  .pm-open .rule{margin-inline:0;}
  /* THE CLOSER ON A PHONE (Kelly, 2026-08-16: "rethink this bottom, it seems
     clunky"). Words over the whole photograph did not read. Now the photograph
     is a band across the top that dissolves down into the navy, the headline
     sits at its foot where it is already dark, and the paragraph has solid
     navy under it. */
  .nm-close{padding:0 0 4.5rem;background:#0B2240;--band:min(62vh,460px);}
  .nm-close .bg{inset:0 0 auto 0;height:var(--band);object-position:50% 28%;}
  .nm-close .veil{inset:0 0 auto 0;height:var(--band);
    background:linear-gradient(180deg,#FBF9F5 0%,rgba(251,249,245,.5) 5%,rgba(251,249,245,0) 12%,
      rgba(11,34,64,.12) 42%,rgba(11,34,64,.72) 76%,#0B2240 100%);}
  .nm-close .wrap{text-align:left;padding-top:calc(var(--band) - 8rem);}
  .nm-close .h2{font-size:clamp(1.9rem,8vw,2.7rem);text-shadow:0 10px 30px rgba(0,0,0,.45);}
  .nm-close .lede{margin-inline:0;margin-top:1.4rem;}
  .rel-paper .sheet{aspect-ratio:auto;}
  .rel-paper img{width:100%;}
}

/* ---- THE TIME CITATION (Kelly, 2026-08-15).
   Headline and date only. Set as a plate rather than a pull quote so it reads
   as a press citation, which is what it is, and so it cannot be mistaken for
   Archbishop Rummel's own words. ---- */
/* THE CLIPPING (2026-08-16). The section is about the TIME piece, so the piece
   is a plate of paper on the navy: masthead line, headline, what it reported
   in our words, one short line quoted, the credit and the link. Cool white,
   never cream, so it does not read brown against the blue. */
.nm-clip{position:relative;margin-top:clamp(1.8rem,3.4vw,2.6rem);max-width:46rem;
  background:#fff;color:var(--ink);border-radius:14px;
  padding:clamp(1.4rem,3vw,2.2rem) clamp(1.3rem,3vw,2.4rem) clamp(1.5rem,3vw,2.2rem);
  box-shadow:0 2px 6px rgba(0,0,0,.18),0 40px 80px -30px rgba(0,0,0,.6);}
.nm-clip::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--red);border-radius:14px 14px 0 0;}
/* .nm-clip .x, not bare .x: the .nm-clip p rule below outranks a bare class and
   was putting the masthead and the kicker into the serif (Kelly, 2026-08-16:
   "this font is not correct") */
.nm-clip .nm-clip-mast{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .9rem;
  font-family:var(--sans);font-weight:500;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#6f7a86;}
.nm-clip .nm-clip-mast b{font-family:var(--slab);font-weight:400;font-size:1.05rem;letter-spacing:.06em;color:var(--red);text-transform:uppercase;}
.nm-clip-h{font-family:var(--slab);text-transform:uppercase;font-size:clamp(1.5rem,3.4vw,2.35rem);line-height:1.02;
  letter-spacing:.01em;color:var(--navy);margin:.7rem 0 .9rem;}
.nm-clip .nm-clip-lede{font-family:var(--serif);font-size:clamp(1.02rem,1.5vw,1.14rem);line-height:1.6;color:var(--navy);font-weight:600;
  letter-spacing:0;text-transform:none;margin-bottom:.9rem;}
.nm-clip p{font-family:var(--serif);font-size:clamp(1.02rem,1.5vw,1.14rem);line-height:1.7;color:var(--ink-soft);}
.nm-clip p+p{margin-top:.95rem;}
.nm-clip p em{font-style:italic;color:var(--red-deep);}
.nm-clip .nm-clip-credit{margin-top:1.2rem;padding-top:1rem;border-top:1px solid #E6ECF2;font-size:.9rem;color:#6f7a86;}
.nm-clip .nm-clip-credit cite{font-style:italic;color:var(--ink-soft);}
.nm-clip-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;min-height:46px;padding:0 1.25rem;
  border-radius:999px;background:var(--gold,#F4C430);color:var(--navy);font-family:var(--sans);font-weight:600;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;transition:background .2s ease,transform .2s ease;}   /* gold, Kelly 2026-08-16 */
.nm-clip-btn span{font-size:1.15em;line-height:1;transition:transform .2s ease;}
.nm-clip-btn:hover{background:var(--gold-lift,#FFD451);}
.nm-clip-btn:hover span{transform:translateX(3px);}
@media(max-width:700px){ .nm-clip{border-radius:12px;} }

.nm-time{margin:clamp(2.2rem,4vw,3.2rem) 0 0;padding:clamp(1.3rem,2.4vw,1.9rem) 0 0;
  border-top:1px solid rgba(117,178,221,.34);max-width:34rem;}
.nm-time p{font-family:var(--slab);text-transform:uppercase;
  font-size:clamp(1.25rem,3vw,2.1rem);line-height:1.04;letter-spacing:.01em;
  color:#fff;text-shadow:0 14px 34px rgba(0,0,0,.4);}
.nm-time cite{display:block;margin-top:.85rem;font-style:normal;
  font-family:var(--sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.19em;font-size:var(--t-label);}
.nm-time cite a{color:var(--rb-type);text-decoration:none;
  border-bottom:1px solid rgba(117,178,221,.45);padding-bottom:2px;
  transition:color .25s ease,border-color .25s ease;}
.nm-time cite a:hover,.nm-time cite a:focus-visible{color:#fff;border-color:#fff;}

@media(prefers-reduced-motion:reduce){
  .mk-ring circle{stroke-dashoffset:0;}
  .mk-ring.draw circle{animation:none;}
  .mk-cap .step.on p{animation:none;clip-path:none;}
  .rel-chain li::before{animation:none;}
  .rel-paper figure:hover .sheet{transform:none;}
}


/* ============================================================
   THE LIGHTBOX (2026-08-15). Click any archive photograph to enlarge.
   ============================================================ */
.zoomable{cursor:zoom-in;}
.zoomable:focus-visible{outline:2px solid var(--rb);outline-offset:4px;}
.lb{position:fixed;inset:0;z-index:130;display:none;padding:clamp(15px,3vw,2.4rem);
  align-items:center;justify-content:center;
  background:rgba(6,23,48,.9);backdrop-filter:blur(7px);}
.lb.on{display:flex;}
.lb-fig{margin:0;max-width:min(1400px,100%);max-height:100%;display:flex;flex-direction:column;
  align-items:center;opacity:0;transform:scale(.96);
  transition:opacity .35s ease,transform .4s cubic-bezier(.2,.7,.2,1);}
.lb.on .lb-fig{opacity:1;transform:none;}
.lb-fig img{display:block;max-width:100%;max-height:84vh;width:auto;height:auto;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);}
.lb-fig figcaption{margin-top:.9rem;font-family:var(--sans);font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;
  color:rgba(255,255,255,.78);text-align:center;max-width:60ch;}
.lb-x{position:absolute;top:.8rem;right:.8rem;z-index:2;width:44px;height:44px;
  border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--navy);
  font-size:1.5rem;line-height:1;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.85,.25,1),background .25s ease,color .25s ease;}
.lb-x:hover{transform:rotate(90deg);background:var(--accent);color:#fff;}
@media(prefers-reduced-motion:reduce){.lb-fig{transition:none;}}


/* ═══════════════ 2026-08-15 additions: hear him, film chapters, seven places ═══ */
/* the hear him chip, under the lifespan in the hero */
.nm-hear{margin-top:1.4rem;display:inline-flex;align-items:center;gap:.9rem;background:rgba(255,255,255,.08);border:1px solid rgba(117,178,221,.4);border-radius:999px;padding:.55rem 1.2rem .55rem .6rem;color:#fff;cursor:pointer;text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 34px -18px rgba(117,178,221,.8);transition:background .25s ease,border-color .25s ease,transform .25s ease;}
.nm-hear:hover{background:rgba(255,255,255,.14);border-color:var(--rb);transform:translateY(-2px);}
.nm-hear .disc{width:40px;height:40px;border-radius:50%;background:var(--red);flex:none;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 0 rgba(200,16,46,.5);animation:nmHearPulse 2.6s ease-out infinite;}
.nm-hear .disc::after{content:"";display:block;width:0;height:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px;}
@keyframes nmHearPulse{0%{box-shadow:0 0 0 0 rgba(200,16,46,.55);}70%{box-shadow:0 0 0 14px rgba(200,16,46,0);}100%{box-shadow:0 0 0 0 rgba(200,16,46,0);}}
.nm-hear .t{font-family:var(--sans);font-weight:600;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;}
.nm-hear .t small{display:block;font-weight:500;font-size:.62rem;letter-spacing:.14em;color:var(--rb-type);opacity:.85;margin-top:.15rem;}
@media(max-width:900px){ .nm-hear{margin-left:auto;margin-right:auto;} }
@media(prefers-reduced-motion:reduce){ .nm-hear .disc{animation:none;} }

/* the film chapters, under the caption */
.nm-chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;padding:0 1.5rem 1.4rem;}
.nm-chapters button{display:flex;align-items:center;gap:.8rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.7rem .9rem;color:#fff;cursor:pointer;text-align:left;min-height:56px;transition:background .25s ease,border-color .25s ease;}
.nm-chapters button:hover{background:rgba(255,255,255,.12);border-color:var(--rb);}
.nm-chapters button b{font-family:var(--slab);text-transform:uppercase;font-size:1rem;color:var(--rb);letter-spacing:.06em;}
.nm-chapters button span{font-family:var(--slab);text-transform:uppercase;font-size:.9rem;letter-spacing:.06em;line-height:1.1;}
.nm-chapters button span em{display:block;font-family:var(--sans);font-style:normal;text-transform:none;font-weight:500;font-size:.72rem;letter-spacing:.04em;color:rgba(255,255,255,.75);margin-top:.15rem;}
@media(max-width:640px){ .nm-chapters{grid-template-columns:1fr;} .nm-film .frame{aspect-ratio:5/4;} }

/* ============================================================
   SEVEN PLACES: the heat map. Rebuilt 2026-08-16 (Kelly: tap a place, it
   says when he was there; the timeline animates the moves that earn it;
   country outlines, very subtle; everything easy to read).

   Web Mercator, 1000 by 392, the same shape on every screen (a first pass
   stretched latitude and Kelly said it did not look like America); strokes
   are non-scaling so lines stay hairlines whatever the size. Everything
   a person reads is HTML on top, at real pixel sizes: the place names and
   the card. --hs scales the heat on small screens.
   ============================================================ */
.nm-map{position:relative;margin-top:.4rem;background:#fff;border-radius:18px;padding:1.2rem;
  box-shadow:0 1px 3px rgba(11,34,64,.05),0 34px 70px -40px rgba(11,34,64,.5);}
.nm-stage{position:relative;aspect-ratio:1000/392;--hs:1;}
.nm-stage>svg{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:14px;overflow:hidden;}
.nm-stage .grid line{stroke:#0B2240;stroke-opacity:.06;stroke-width:1;vector-effect:non-scaling-stroke;}
/* the outlines. Hairlines, barely there: they place the points, they do not compete with them */
.nm-stage .coast{fill:none;stroke:#0B2240;stroke-opacity:.17;stroke-width:1;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.nm-stage .border{fill:none;stroke:#0B2240;stroke-opacity:.10;stroke-width:1;stroke-dasharray:2 3;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
/* the legs: the order he lived them, faint until the intro reaches each */
.nm-stage .leg{fill:none;stroke:var(--rb-deep);stroke-opacity:.5;stroke-width:1.5;stroke-dasharray:3 5;stroke-linecap:round;
  vector-effect:non-scaling-stroke;opacity:0;transition:opacity .6s ease;}
.nm-stage .leg.lit{opacity:1;}
/* the leg being travelled */
.nm-stage .hot{fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 3px rgba(200,16,46,.35));}
.nm-sea-lab{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;
  font-family:var(--slab);text-transform:uppercase;letter-spacing:.2em;color:#0B2240;opacity:.08;font-size:clamp(14px,2.6vw,32px);}

/* the places */
.nm-spot{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;
  background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;z-index:2;}
.nm-spot.small{width:34px;height:34px;margin:-17px 0 0 -17px;}
.nm-spot:focus-visible{outline:none;}
.nm-spot:focus-visible .dot{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--rb-deep);}
.nm-spot .heat{position:absolute;left:50%;top:50%;width:calc(var(--d)*var(--hs));height:calc(var(--d)*var(--hs));
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(200,16,46,.30) 0%,rgba(200,16,46,.15) 40%,rgba(200,16,46,0) 70%);
  opacity:0;transform:translate(-50%,-50%) scale(.3);transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1);}
.nm-spot.lit .heat{opacity:1;transform:translate(-50%,-50%) scale(1);animation:nmHeatBreathe 3.6s ease-in-out 1s infinite;}
@keyframes nmHeatBreathe{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.14);}}
.nm-spot .dot{position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 3px #fff,0 2px 6px rgba(11,34,64,.28);
  transform:translate(-50%,-50%) scale(0);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .25s ease;}
.nm-spot.small .dot{width:9px;height:9px;background:var(--rb-deep);}
.nm-spot.big .dot{width:15px;height:15px;}
.nm-spot.lit .dot{transform:translate(-50%,-50%) scale(1);}
.nm-spot:hover .dot,.nm-spot.on .dot{box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(200,16,46,.28),0 2px 8px rgba(11,34,64,.3);}
.nm-spot.small.on .dot{box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(43,110,158,.3);}
/* the ring that goes out when he arrives */
.nm-spot .dot::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--red);opacity:0;pointer-events:none;}
.nm-spot.small .dot::after{border-color:var(--rb-deep);}
.nm-spot.arrive .dot::after{animation:nmRing 1s ease-out;}
@keyframes nmRing{0%{transform:scale(.5);opacity:.85;}100%{transform:scale(3.2);opacity:0;}}
/* the names. HTML, so they never shrink with the map. A white halo so they read over the outlines and the heat */
.nm-spot .tag{position:absolute;white-space:nowrap;pointer-events:none;line-height:1;
  font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);
  text-shadow:0 0 6px #fff,0 0 3px #fff,0 0 1px #fff;opacity:0;transition:opacity .45s ease .25s,color .2s ease;}
.nm-spot.lit .tag{opacity:1;}
.nm-spot[data-tag="r"] .tag{left:calc(50% + 13px);top:50%;transform:translateY(-50%);}
.nm-spot[data-tag="l"] .tag{right:calc(50% + 13px);top:50%;transform:translateY(-50%);}
.nm-spot[data-tag="t"] .tag{left:50%;bottom:calc(50% + 12px);transform:translateX(-50%);}
.nm-spot[data-tag="b"] .tag{left:50%;top:calc(50% + 12px);transform:translateX(-50%);}
.nm-spot.big .tag{font-size:.82rem;}
.nm-spot:hover .tag,.nm-spot.on .tag{color:var(--red);}
.nm-spot.small:hover .tag,.nm-spot.small.on .tag{color:var(--rb-deep);}
/* the traveller: one dot moving along the leg, the line growing behind it */
.nm-ship{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 3px #fff,0 0 16px 5px rgba(200,16,46,.42);opacity:0;pointer-events:none;z-index:3;transition:opacity .25s ease;}
.nm-ship.go{opacity:1;}

/* the card: when he was there */
.nm-pop{position:absolute;z-index:6;width:300px;background:#fff;border-radius:14px;padding:1.05rem 1.15rem .9rem;
  box-shadow:0 2px 6px rgba(11,34,64,.08),0 30px 60px -22px rgba(11,34,64,.5);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease,visibility 0s .3s;}
.nm-pop.show{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .3s ease;}
.nm-pop::before{content:'';position:absolute;top:var(--ay,50%);width:14px;height:14px;background:#fff;transform:translateY(-50%) rotate(45deg);}
.nm-pop[data-side="r"]::before{left:-7px;box-shadow:-2px 2px 4px -2px rgba(11,34,64,.18);}
.nm-pop[data-side="l"]::before{right:-7px;box-shadow:2px -2px 4px -2px rgba(11,34,64,.18);}
.nm-pop .x{position:absolute;top:.4rem;right:.4rem;width:38px;height:38px;border:0;border-radius:50%;background:none;color:#6f7a86;
  font-size:1.45rem;line-height:1;cursor:pointer;transition:background .2s ease,color .2s ease;}
.nm-pop .x:hover{background:#F0F4F8;color:var(--navy);}
.nm-pop .when{font-family:var(--slab);text-transform:uppercase;font-size:.9rem;letter-spacing:.06em;color:var(--red);padding-right:2rem;}
.nm-pop .where{font-family:var(--slab);text-transform:uppercase;font-size:1.28rem;line-height:1.1;letter-spacing:.01em;color:var(--navy);margin:.22rem 0 .55rem;padding-right:2rem;}
.nm-pop p{font-family:var(--serif);font-size:.98rem;line-height:1.6;color:var(--ink-soft);margin:0;}
.nm-pop nav{display:flex;justify-content:space-between;gap:.6rem;margin-top:.85rem;padding-top:.6rem;border-top:1px solid #E6ECF2;}
.nm-pop nav button{display:flex;align-items:center;gap:.35rem;min-height:44px;padding:.4rem .2rem;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rb-deep);transition:color .2s ease;}
.nm-pop nav button.next{margin-left:auto;text-align:right;}
.nm-pop nav button:hover{color:var(--navy);}
.nm-pop nav button:disabled{opacity:.28;cursor:default;}

/* one line under the map, wide screens only; on a phone the card says it */
.nm-hint{margin:.9rem .2rem 0;font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#6f7a86;}
@media(max-width:700px){
  .nm-map{padding:.75rem;}
  .nm-stage{--hs:.6;}
  .nm-spot .tag{font-size:.6rem;letter-spacing:.09em;}
  .nm-spot.big .tag{font-size:.68rem;}
  /* the college sits a finger's width from New York on a phone: its name goes above,
     New York's to the right, and Omaha's drops below so the three never touch */
  .nm-spot[data-place="omaha"] .tag{bottom:auto;top:calc(50% + 11px);}
  .nm-sea-lab{opacity:.1;}
  /* the card lives under the map, always there, so nothing floats over a small map */
  .nm-pop{position:static;width:auto;margin-top:.8rem;padding:1rem 1rem .8rem;box-shadow:none;border:1px solid #E6ECF2;
    opacity:1;visibility:visible;transform:none;transition:none;}
  .nm-pop::before,.nm-pop .x{display:none;}
  .nm-pop .when,.nm-pop .where{padding-right:0;}
  .nm-hint{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .nm-spot.lit .heat{animation:none;}
  .nm-spot.arrive .dot::after{animation:none;}
}