/* ==========================================================================
   THE HISTORY OF LETTERPRESS
   A horizontal timeline. You scroll down and six hundred years go past
   sideways.

   THE FRAME AND THE PAPER ARE NOT TOUCHED. This file only lays out what
   travels inside the sheet; style.css still owns the moulding, the paper and
   the impression.

   HOW IT MOVES
   The wheel stays vertical, because a page that hijacks the wheel into a
   horizontal scrollbar fights every trackpad and every scrollbar in the
   world. Instead the track is pinned and its X is driven by how far you have
   scrolled:

     .tl          tall. Its height IS the length of the timeline
     .tl__stage   sticky, one sheet tall, clipping
     .tl__track   a flex row that translates left across the whole run

   A SCREENFUL HERE IS THE SHEET, NOT THE WINDOW. The feature lives inside a
   fixed frame, so svh overshoots by the width of the moulding on every edge.
   --sheet-h is measured from the sheet by app.js and every full-height rule
   below is expressed in it; the svh values are fallbacks for the moment
   before the script runs.
   ========================================================================== */

:root{
  --band-plate: #241E17;      /* the ink, laid solid */
  --on-plate:   #E2DCD3;
  --on-plate-soft: rgba(226,220,211,.82);
  --on-plate-faint: rgba(226,220,211,.66);
  --plate-rule: rgba(226,220,211,.28);
  --tag-bg: var(--ink);

  --panel-gap: clamp(2.5rem, 6vw, 7rem);
}

/* every photograph is pulled to one ink-on-paper register, so archive
   engravings and studio shots sit in the same print */
/* the base register for anything not handled more specifically below */
.feature img{ filter:grayscale(1) contrast(1.16); }

.band-plate{
  background:var(--band-plate); color:var(--on-plate);
  --ink:var(--on-plate);
  --ink-soft:var(--on-plate-soft);
  --ink-faint:var(--on-plate-faint);
  --rule:var(--plate-rule);
}

/* Type knocked out of a solid, not pressed into paper. A white catch under a
   pale letter on a dark ground is a glow, not a recess. */
.tag{
  display:inline-block;
  background:var(--tag-bg); color:#D7D0C6;
  padding:.42rem .8rem .38rem;
  font-family:var(--f-mono);
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  text-shadow:none;
}


/* ==========================================================================
   THE OPENING
   ========================================================================== */
.open{
  min-height:calc(var(--sheet-h, 100svh) - var(--nav-h, 96px));
  display:grid; align-content:center; gap:1.6rem;
  padding:clamp(2rem,5vw,4rem) var(--gut);
  max-width:var(--feat, 1240px); margin:0 auto; width:100%;
}
.open__t{
  font-family:var(--f-hi);
  font-size:clamp(2.4rem,7vw,5.6rem); line-height:1;
  max-width:16ch;
}
.open__lede{ max-width:46ch; color:var(--ink-soft); font-size:1.06em; }
.open__hint{
  font-family:var(--f-mono); font-size:.64rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint);
}


/* ==========================================================================
   THE TIMELINE
   ========================================================================== */
.tl{
  position:relative;
  /* The length of the run. This is the ONLY number that changes how fast the
     centuries go past: the track's width decides the distance, this decides
     how much scrolling covers it. */
  height:calc(var(--sheet-h, 100svh) * 9);

  view-timeline-name:--tl;
  view-timeline-axis:block;
}
/* Stuck BELOW the masthead, not under it. --nav-h is measured and published
   by app.js; a full-height stage at top 0 puts every panel half behind the
   sticky nav, and the nav's paper gradient turns whatever passes under it to
   mud. */
.tl__stage{
  position:sticky; top:var(--nav-h, 96px);
  height:calc(var(--sheet-h, 100svh) - var(--nav-h, 96px));
  overflow:hidden;
}

/* The track. Translated by its own overflow, so the last panel finishes flush
   against the right edge of the sheet however wide the sheet happens to be.
   --run is published by history.js, which is the only thing it does. */
.tl__track{
  display:flex; align-items:center;
  height:100%;
  width:max-content;
  padding:0 clamp(2rem,8vw,10rem);
  gap:var(--panel-gap);
  will-change:transform;
  animation:tlRun linear both;
  animation-timeline:--tl;
  animation-range:contain 0% contain 100%;
}
@keyframes tlRun{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(var(--run, 0px) * -1)); }
}


/* --------------------------------------------------------------- PANELS */
.pn{ flex:none; position:relative; }

/* the year plate: eyebrow, the year, a rule with a mark on it, a caption */
.pn--year{
  width:clamp(320px, 42vw, 560px);
  text-align:center;
  display:grid; gap:1.1rem; justify-items:center;
}
.pn__eyebrow{
  font-family:var(--f-mono); font-size:.64rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint);
}
/* Inria, not Megalito: Megalito's numeral slots are ornaments, so a year set
   in the display face comes out as four little decorations. */
.pn__yr{
  font-family:var(--f-num); font-weight:300;
  font-size:clamp(3.6rem, 9vw, 7.5rem); line-height:.92;
}
.pn__rule{
  display:flex; align-items:center; gap:.9rem;
  width:min(100%, 15rem); color:var(--ink-faint);
}
.pn__rule::before, .pn__rule::after{
  content:''; flex:1; height:1px; background:var(--rule);
}
.pn__rule i{ font-style:normal; font-size:.7rem; }
.pn__cap{
  max-width:34ch; color:var(--ink-soft);
  font-size:.94em; line-height:1.7;
}

/* a plate of running text */
.pn--text{ width:clamp(280px, 34vw, 420px); }
.pn--text h3{
  font-family:var(--f-body); font-weight:400;
  font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.18;
  margin-bottom:.9rem; max-width:18ch;
}
.pn--text p + p{ margin-top:.9rem; }
.pn--text p{ color:var(--ink-soft); }

/* photographs. Three sizes, so the run has a rhythm rather than a beat. */
.pn--fig{ width:clamp(230px, 30vw, 440px); }
.pn--fig.is-tall{ width:clamp(200px, 24vw, 340px); }
.pn--fig.is-wide{ width:clamp(300px, 46vw, 680px); }
/* NO BOX. The archive material is engravings and scans on white grounds, and
   a white rectangle on this paper reads as a sticker laid on it.

   multiply is what removes the ground: white multiplied by the paper IS the
   paper, so the sheet shows straight through it and only the ink survives.
   It costs nothing, needs no cut-outs, and works on every one of them.

   Two consequences to respect. The blend has to be against the sheet, so
   there can be no box-shadow and no background under it: either would be
   what the image multiplies into instead of the paper. And the images are
   pushed hard to black and white first, because multiply on a mid-grey
   photographic ground darkens the paper instead of vanishing into it. */
.pn--fig img{
  display:block; width:100%; height:auto;
  mix-blend-mode:multiply;
  filter:grayscale(1) contrast(1.5) brightness(1.06);
}
.pn__fc{
  margin-top:.7rem;
  font-family:var(--f-mono); font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}

/* the solid plate, for the turns in the story */
.pn--plate{
  width:clamp(280px, 34vw, 460px);
  align-self:stretch;
  display:grid; align-content:center; gap:1rem;
  padding:clamp(2rem,4vw,3.2rem);
  margin:clamp(2rem,6vw,5rem) 0;
}
.pn--plate p{ color:var(--on-plate-soft); }
.pn--plate h3{
  font-family:var(--f-hi);
  font-size:clamp(1.5rem,3vw,2.4rem); line-height:1.1;
}
/* knocked out of a solid, so no impression */
.pn--plate, .pn--plate *{ text-shadow:none; }

/* the chapter break */
.pn--era{
  width:clamp(260px, 30vw, 400px);
  text-align:center;
}
.pn--era h2{
  font-family:var(--f-hi);
  font-size:clamp(1.8rem,4vw,3rem); line-height:1.06;
}

/* the closing call */
.pn--end{
  width:clamp(300px, 40vw, 560px);
  text-align:center;
  display:grid; gap:1.4rem; justify-items:center;
}


/* --------------------------------------------------------------- DEPTH
   Photographs travel a little faster than the plates they pass, which is
   what stops the run reading as one flat strip sliding by. It is a second
   translation on top of the track's, on the same timeline. */
.pn--fig img, .pn--plate{
  animation:tlDrift linear both;
  animation-timeline:--tl;
  animation-range:contain 0% contain 100%;
}
@keyframes tlDrift{
  from{ transform:translateX(clamp(-60px, -6vw, -30px)); }
  to  { transform:translateX(clamp(30px, 6vw, 60px)); }
}


/* --------------------------------------------------------------- PROGRESS
   Six hundred years is a long way sideways with nothing to say how far you
   have come. */
.tl__rail{
  position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(1rem,3vw,2rem);
  height:1px; background:var(--rule-soft); z-index:5;
}
.tl__rail i{
  display:block; height:100%; background:var(--ink);
  transform:scaleX(0); transform-origin:0 50%;
  animation:tlRail linear both;
  animation-timeline:--tl;
  animation-range:contain 0% contain 100%;
}
@keyframes tlRail{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.tl__years{
  position:absolute; left:var(--gut); bottom:calc(clamp(1rem,3vw,2rem) + .7rem);
  z-index:5;
  font-family:var(--f-mono); font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
}


/* ==========================================================================
   NARROW SCREENS
   A horizontal run needs width to be worth travelling. Below this the track
   stops being pinned and the panels stack, which is the same story read the
   ordinary way. Nothing is lost but the sideways motion.
   ========================================================================== */
@media (max-width:820px), (prefers-reduced-motion: reduce){
  .tl{ height:auto; }
  .tl__stage{ position:relative; height:auto; overflow:visible; }
  .tl__track{
    display:grid; width:auto; gap:clamp(2.5rem,8vw,4rem);
    padding:clamp(2rem,8vw,4rem) var(--gut);
    animation:none; transform:none;
    justify-items:center;
  }
  .pn{ width:100% !important; max-width:34rem; }
  .pn--fig img, .pn--plate{ animation:none; transform:none; }
  .pn--plate{ margin:0; }
  .tl__rail, .tl__years{ display:none; }
}