/* ══ the inks ═════════════════════════════════════════════
   Two spot colours on newsprint. Everything that overlaps is
   set to multiply, so pink over blue really does make violet.
   ═══════════════════════════════════════════════════════════ */
:root{
  --paper:#f7f2e4;
  --paper-2:#efe8d6;
  --pink:#ff48b0;
  --blue:#2340e8;
  --blue-deep:#1a2f9e;
  --soot:#241d2b;

  --face:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --pad:clamp(18px,4.4vw,70px);
  --rule:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--blue-deep);
  font:400 clamp(15.5px,1.05vw,17.5px)/1.56 var(--face);
  overflow-x:hidden;
}
h1,h2,h3,p,dl,dt,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--pink);color:var(--paper)}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

/* paper fibre and press speckle */
.fiber{
  position:fixed;inset:0;z-index:40;pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)' opacity='.42'/%3E%3C/svg%3E");
}

/* the pass of the roller, once, on arrival */
.roller{
  position:fixed;left:0;right:0;top:0;
  height:46vh;z-index:38;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,72,176,0) 0%,rgba(255,72,176,.3) 58%,rgba(35,64,232,.34) 78%,rgba(35,64,232,0) 100%);
  mix-blend-mode:multiply;
  transform:translateY(-120vh);
}
.roller.is-rolling{animation:press 1.15s cubic-bezier(.4,0,.2,1) forwards}
@keyframes press{
  0%{transform:translateY(-70vh)}
  100%{transform:translateY(130vh)}
}

/* the sheet feeding through */
.sheet{
  position:relative;z-index:1;
  max-width:1320px;margin:0 auto;
  padding:0 var(--pad);
  clip-path:inset(0 0 100% 0);
}
.sheet.is-printed{
  animation:feed 1.15s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes feed{to{clip-path:inset(0 0 -2% 0)}}

/* ══ masthead ═════════════════════════════════════════════ */
.masthead{
  position:relative;
  padding-block:clamp(44px,8vh,92px) clamp(34px,5vh,60px);
  border-bottom:var(--rule) solid var(--blue);
}
/* two solids that overprint into a third colour */
.ink{
  position:absolute;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:0;
}
.ink--dot{
  right:6%;top:clamp(30px,6vh,70px);
  width:clamp(130px,19vw,280px);aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(36,29,43,.16) 1.9px,transparent 2px) 0 0/9px 9px,
    linear-gradient(var(--pink),var(--pink));
  opacity:.85;
  animation:sway 14s ease-in-out infinite;
}
.ink--square{
  right:16%;top:clamp(84px,14vh,170px);
  width:clamp(100px,14vw,210px);aspect-ratio:1;
  background:repeating-linear-gradient(45deg,var(--blue) 0 2px,transparent 2px 8px);
  opacity:.9;
  animation:sway 17s ease-in-out infinite reverse;
}
@keyframes sway{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-14px,12px) rotate(5deg)}}

.slug{
  position:relative;z-index:2;
  display:inline-block;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  background:var(--pink);color:var(--paper);
  padding:6px 13px;
  margin-bottom:clamp(16px,2.6vh,26px);
}
.title{
  position:relative;z-index:2;
  font-size:clamp(2.3rem,10.4vw,9rem);
  font-weight:800;
  line-height:.9;
  letter-spacing:-.045em;
  color:var(--blue);
  /* the second ink, landing out of register */
  text-shadow:var(--rx,14px) var(--ry,-10px) 0 var(--pink);
  transition:text-shadow 1.1s cubic-bezier(.2,.8,.2,1);
  margin-bottom:clamp(20px,3.2vh,34px);
}
.title.is-registered{text-shadow:3px -2px 0 var(--pink)}

.standfirst{
  position:relative;z-index:2;
  max-width:44ch;
  font-size:clamp(1.04rem,1.6vw,1.34rem);
  line-height:1.4;
  color:var(--soot);
}
.stamps{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:clamp(20px,3vh,32px);
}
.stamps li{
  font-size:.78rem;
  padding:6px 13px;
  border:2px solid var(--blue);
  color:var(--blue);
  transform:rotate(-1.2deg);
}
.stamps li:nth-child(2){border-color:var(--pink);color:var(--pink);transform:rotate(.9deg)}
.stamps li:nth-child(3){transform:rotate(-.4deg)}

/* ══ spreads ══════════════════════════════════════════════ */
.spread{
  padding-block:clamp(40px,6vh,76px);
  border-bottom:1px solid rgba(35,64,232,.4);
}
.rubric{
  margin-bottom:clamp(22px,3.4vh,36px);
  border-top:var(--rule) solid var(--pink);
  padding-top:10px;
}
.rubric span{
  display:inline-block;
  font-size:clamp(1.3rem,2.9vw,2.1rem);
  font-weight:800;letter-spacing:-.03em;
  color:var(--blue);
}

/* the essay, in real columns */
.flow{
  columns:2;
  column-gap:clamp(24px,3.4vw,56px);
  column-rule:1px solid rgba(35,64,232,.35);
  font-size:clamp(1rem,1.22vw,1.1rem);
  color:var(--soot);
}
.flow p{margin-bottom:1em;break-inside:avoid}
.flow p:first-child::first-letter{
  float:left;
  font-size:3.3em;line-height:.78;
  font-weight:800;
  color:var(--pink);
  padding:.06em .1em 0 0;
}
@media (max-width:760px){.flow{columns:1}}

.margin{
  margin-top:clamp(20px,3vh,30px);
  max-width:46ch;
  padding:14px 18px;
  background:var(--pink);
  color:var(--paper);
  font-size:.9rem;
  transform:rotate(-.5deg);
}

/* ══ the bench ════════════════════════════════════════════ */
.specimens{
  columns:3;
  column-gap:clamp(22px,3vw,48px);
}
@media (max-width:980px){.specimens{columns:2}}
@media (max-width:640px){.specimens{columns:1}}
.specimens li{
  break-inside:avoid;
  margin-bottom:clamp(20px,3vh,32px);
  padding-top:12px;
  border-top:2px solid var(--blue);
}
.num{
  display:block;
  font-size:clamp(1.9rem,3.4vw,2.8rem);
  font-weight:800;line-height:1;
  color:transparent;
  -webkit-text-stroke:2px var(--pink);
  margin-bottom:8px;
}
.specimens h3{
  font-size:clamp(1.02rem,1.4vw,1.16rem);
  font-weight:700;color:var(--blue);
  margin-bottom:6px;
}
.specimens p{font-size:.93rem;color:var(--soot)}

/* ══ notes ════════════════════════════════════════════════ */
.notes{display:grid}
.notes > div{
  display:grid;gap:4px clamp(20px,3.4vw,56px);
  padding-block:clamp(14px,2.2vh,22px);
  border-bottom:1px solid rgba(35,64,232,.35);
}
.notes > div:first-child{border-top:1px solid rgba(35,64,232,.35)}
@media (min-width:860px){
  .notes > div{grid-template-columns:minmax(0,.5fr) minmax(0,1fr);align-items:baseline}
}
.notes dt{font-size:clamp(1.02rem,1.4vw,1.18rem);font-weight:700;color:var(--blue)}
.notes dd{margin:0;font-size:.95rem;color:var(--soot);max-width:60ch}

/* ══ colophon ═════════════════════════════════════════════ */
.colophon{padding-block:clamp(40px,6vh,76px) clamp(50px,8vh,100px)}
.imprint{
  font-size:clamp(1.3rem,3vw,2.2rem);
  font-weight:800;letter-spacing:-.03em;
  color:var(--pink);
  margin-bottom:clamp(20px,3vh,32px);
}
.address{display:grid;border-top:var(--rule) solid var(--blue);max-width:1040px}
.address > div{
  display:grid;gap:3px clamp(18px,3vw,44px);
  padding-block:clamp(12px,1.9vh,18px);
  border-bottom:1px solid rgba(35,64,232,.35);
}
@media (min-width:680px){.address > div{grid-template-columns:106px 1fr;align-items:baseline}}
.address dt{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--pink);
}
.address dd{
  margin:0;font-size:clamp(.98rem,1.2vw,1.1rem);font-weight:600;
  color:var(--blue-deep);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.edition{margin-top:clamp(20px,3vh,32px);font-size:.77rem;color:#7a7185}

/* ══ arrival of each spread ═══════════════════════════════ */
.off{opacity:0;transform:translateY(12px)}
.off.is-on{
  opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.75,.2,1);
}

/* on a phone the solids move out from behind the title */
@media (max-width:700px){
  .ink--dot{
    right:-26%;top:auto;bottom:-18%;
    width:clamp(130px,42vw,210px);
    opacity:.6;
  }
  /* the hatch has nowhere to sit without covering the copy */
  .ink--square{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sheet{clip-path:none;animation:none}
  .roller{display:none}
  .title{text-shadow:3px -2px 0 var(--pink);transition:none}
  .ink{animation:none}
  .off{opacity:1;transform:none;transition:none}
}