/* NeoSimply Spira. One surface for the whole page, the NMN grammar:
   eyebrow in caps, one huge serif line, short quiet copy, photography edge to
   edge with the words ON the image bottom left, never a caption under a photo,
   numbers in a band between hairlines. Gold is the only accent. */
:root{
  --ground:#0a1114;          /* one surface, sampled off the films */
  --ink:#f2ede3;
  --gold:#c9a86a;
  --hair:rgba(242,237,227,.16);
  --display:"Cormorant Garamond", Georgia, serif;
  --body:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{ box-sizing:border-box }
html{ background:var(--ground) }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

/* ---------- the two scrubbed films ---------- */
[data-scrub]{ position:relative }
.hold{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center; background:var(--ground);
}
.scrub__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block }
/* on a phone the film is cropped to portrait. The century keeps its mirror in
   the middle so it survives; the heads film has the woman on the left, so it
   gets a shorter stage and sits as a band with the words beneath, like the
   photographs do. */
/* film grain and a soft gate vignette, faded by the scrubber as the decades pass */
.grain{
  position:absolute; inset:0; pointer-events:none; opacity:0; z-index:1;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='160' height='160' filter='url(%23n)' opacity='.55'/></svg>");
  background-size:160px 160px;
}
/* the old picture plays on a tube: scanlines, a phosphor bloom and a curved
   glass edge. Tied to the same age value as the grain, so the television
   dissolves as the decades arrive at the present day. */
.tube{
  position:absolute; inset:0; pointer-events:none; opacity:0; z-index:1;
  background:
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.34) 0px, rgba(0,0,0,.34) 1px,
      rgba(255,255,255,.02) 2px, rgba(255,255,255,.02) 3px);
  background-size:100% 3px;
}
.tube::before{        /* the bulge of the glass, brighter in the middle */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 92% at 50% 46%, rgba(190,225,255,.10) 0%, rgba(0,0,0,0) 58%);
  mix-blend-mode:screen;
}
.tube::after{         /* the dark rounded corners of the tube itself */
  content:""; position:absolute; inset:-2%;
  border-radius:14% / 10%;
  box-shadow:inset 0 0 12vw 6vw rgba(0,0,0,.85);
}
.grain::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 88% at 50% 50%, rgba(0,0,0,0) 46%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;
}
.hold::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(74% 56% at 50% 50%, rgba(6,10,13,.95) 0%, rgba(6,10,13,.80) 44%, rgba(6,10,13,.30) 72%, rgba(6,10,13,0) 92%);
  opacity:0; transition:opacity .5s ease;
}
[data-lines].is-lit .hold::before{ opacity:1 }

.words{
  position:relative; z-index:2; display:grid; place-items:center;
  perspective:900px; width:min(92vw, 60ch); text-align:center;
}
.line{
  grid-area:1/1; margin:0; max-width:26ch;
  transform-style:preserve-3d; backface-visibility:hidden;
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.7rem, 3.4vw, 3rem); line-height:1.28;
  opacity:0; will-change:opacity,transform; pointer-events:none;
  text-shadow:0 2px 26px rgba(6,10,13,.96), 0 0 54px rgba(6,10,13,.85), 0 0 110px rgba(6,10,13,.6);
}

/* ---------- the frame: photography edge to edge, words on it ---------- */
.frame{
  position:relative; min-height:92svh; display:flex; align-items:flex-end;
  background:var(--ground) center/cover no-repeat;
  padding:0 0 8svh;
}
.frame::after{           /* the words need ground, never the whole picture */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,10,13,0) 42%, rgba(6,10,13,.72) 78%, rgba(6,10,13,.94) 100%);
}
.frame > .say{ position:relative; z-index:2; padding:0 clamp(1.4rem, 5vw, 5rem); max-width:44ch }
/* some plates carry their subject on the left, so the words move to the
   emptier side rather than sitting on top of the picture */
.frame.right{ justify-content:flex-end }
.frame.right > .say{ text-align:left }
@media (max-width:860px){ .frame.right{ justify-content:flex-start } }
.eyebrow{
  display:block; font-size:.64rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1rem;
}
.big{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem, 5.2vw, 4.2rem); line-height:1.08; margin:0;
}
.quietcopy{
  margin:1.1rem 0 0; font-size:.95rem; line-height:1.7;
  color:rgba(242,237,227,.72); max-width:34ch;
}

/* a section whose background is a looping film rather than a photograph */
.frame.loop{ background:var(--ground) }
.frame .bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; pointer-events:none;
}

/* the air band: a break between two screens that does not stop the airflow */
.bridge{
  height:46svh; background:var(--ground) center/cover no-repeat;
  position:relative;
}
.bridge::before, .bridge::after{
  content:""; position:absolute; left:0; right:0; height:26%; pointer-events:none;
}
.bridge::before{ top:0;    background:linear-gradient(180deg, var(--ground), rgba(10,17,20,0)) }
.bridge::after { bottom:0; background:linear-gradient(0deg,  var(--ground), rgba(10,17,20,0)) }
@media (max-width:860px){ .bridge{ height:34svh } }

/* ---------- a plain chapter, no photograph ---------- */
.chapter{ padding:14svh clamp(1.4rem,5vw,5rem) }
.chapter .tag{ display:none }   /* no section labels on the page, ever */
.chapter p{
  font-family:var(--display); font-size:clamp(1.8rem, 4vw, 3.2rem);
  line-height:1.24; margin:0; max-width:20ch;
}

/* ---------- the number band ---------- */
.band{
  padding:9svh clamp(1.4rem,5vw,5rem);
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  display:grid; gap:.7rem; justify-items:start;
}
.band .n{
  font-family:var(--display); font-weight:400;
  font-size:clamp(3.4rem, 12vw, 9rem); line-height:.9; letter-spacing:-.02em;
}
.band .u{ font-size:.95rem; color:rgba(242,237,227,.72) }
.band .t{ font-size:.64rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold) }

.fine{
  padding:12svh clamp(1.4rem,5vw,5rem) 16svh;
  font-size:.8rem; letter-spacing:.05em; line-height:2.1;
  color:rgba(242,237,227,.55);
}

@media (max-width:860px){
  .line{ font-size:clamp(1.35rem, 5.6vw, 2rem) }
  /* a 16:9 photograph cover-cropped into a portrait screen loses most of the
     picture, so on phones the image becomes a band at the top and the words
     sit under it on the page's own ground */
  .frame{
    min-height:auto; display:block;
    padding:calc(56.25vw + 4svh) 0 9svh;
    background-size:100% auto; background-position:top center; background-repeat:no-repeat;
  }
  .frame::after{
    top:0; bottom:auto; height:calc(56.25vw + 4svh);
    background:linear-gradient(180deg, rgba(10,17,20,0) 62%, rgba(10,17,20,.85) 88%, var(--ground) 100%);
  }
  .frame.right{ justify-content:flex-start }
  .frame .bg{ position:absolute; top:0; left:0; width:100%; height:56.25vw; object-fit:cover }
  .frame.loop{ padding-top:calc(56.25vw + 4svh) }
  .heads .hold{
    height:100svh; display:flex; flex-direction:column;
    justify-content:center; align-items:stretch;
  }
  .heads .scrub__canvas{ position:relative; width:100%; height:56.25vw; flex:0 0 auto }
  .heads .words{
    width:100%; max-width:none; text-align:left; place-items:start;
    padding:4svh clamp(1.4rem,5vw,5rem) 0;
  }
  .heads .line{ max-width:22ch }
  .heads .hold::before{ display:none }
  .big{ font-size:clamp(1.7rem, 7vw, 2.4rem) }
}