/* Immagini larghe e strette */
:root {
  --paper: #fbfaf6;              /* the page */
  --ink: #1d1b17;                /* the words */
  --ink-soft: #6a645a;           /* captions, bylines, small print */
  --rule: #d9d3c7;               /* hairlines */
  --accent: #9b4a2b;             /* kicker, drop cap, links */
  --frame: #ebe6dc;              /* behind a photo while it loads */
  --col: 620px;                  /* the text column (the narrow photos follow it) */
  --gutter: clamp(20px, 4vw, 48px);
  --box: 100vh;                  /* the box each photo moves in: one screen */
}
@supports (height: 100lvh) {
  :root { --box: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  background: var(--paper);
}
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  color: var(--ink);
  font-family: 'Newsreader Variable', Georgia, serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------------- the masthead */
.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--rule);
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
}
.masthead__brand {
  font-family: 'Newsreader Variable', Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.masthead__brand em { font-weight: 380; }
.masthead__nav {
  display: flex;
  gap: clamp(14px, 2.6vw, 34px);
}
.masthead__nav a,
.masthead__join {
  position: relative;
  font-size: 12px;
  font-weight: 520;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.35s ease;
}
.masthead__join {
  justify-self: end;
  padding: 9px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* the subscribe button fills with ink from below, like ink rising in a nib */
.masthead__join::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  transform: translateY(102%);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 0.55s ease;
}
@media (hover: hover) {
  .masthead__nav a:hover { color: var(--accent); }
  .masthead__join:hover { color: var(--paper); }
  .masthead__join:hover::before { transform: translateY(0); border-radius: 0; }
}
@media (max-width: 700px) {
  .masthead { grid-template-columns: 1fr auto; }
  .masthead__nav { display: none; }
}

/* ---------------------------------------------------------------- the opening */
.story > :not(.spread) {
  width: min(var(--col), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.opening {
  padding: clamp(56px, 10vh, 120px) 0 clamp(40px, 7vh, 72px);
  text-align: center;
}
.story > .opening { width: min(980px, 100% - 2 * var(--gutter)); }
.opening__kicker {
  margin: 0 0 22px;
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.opening__title {
  margin: 0;
  font-size: clamp(46px, 8.4vw, 118px);
  font-weight: 360;
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.opening__title em { font-weight: 300; }
.riga {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.riga > span { display: block; }
.opening__dek {
  max-width: 34ch;
  margin: 28px auto 0;
  font-size: clamp(20px, 2.1vw, 25px);
  font-style: italic;
  font-weight: 340;
  line-height: 1.4;
  color: #3b372f;
}
.opening__byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 28px;
  margin: 36px auto 0;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  max-width: 620px;
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.opening__byline strong { font-weight: 600; color: var(--ink); }

/* ---------------------------------------------------------------- the text */
.story > p {
  margin-top: 0;
  margin-bottom: 1.15em;
  font-size: clamp(18px, 1.45vw, 20.5px);
  font-weight: 380;
  line-height: 1.62;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.lead::first-letter {
  float: left;
  margin: 0.06em 0.05em -0.1em -0.02em;
  font-size: 4.6em;
  font-weight: 340;
  line-height: 0.82;
  color: var(--accent);
}
.pull {
  margin: 56px auto;
  padding: 26px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.pull p {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 40px);
  font-style: italic;
  font-weight: 330;
  line-height: 1.16;
  letter-spacing: -0.015em;
}
.story > .note {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- the photos */
.spread {
  margin: clamp(36px, 5vh, 64px) 0 clamp(28px, 4vh, 56px);
}
.spread__box {
  position: relative;
  height: var(--box);
}
/* the frame is always full width: the script narrows it with clip-path, so nothing reflows */
.spread__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--frame);
  clip-path: inset(0);
}
.spread__photo {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.spread__photo > svg,
.spread__photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.grana {
  opacity: 0.55;
  mix-blend-mode: overlay;
}

/* the caption follows the bottom corners of the frame */
.spread__caption {
  position: relative;
  height: 64px;
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
}
.spread__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  height: 1px;
  background: var(--rule);
}
.spread__place,
.spread__credit {
  position: absolute;
  top: 24px;
  max-width: 62%;
}
.spread__place { left: 0; }
.spread__credit { right: 0; text-align: right; }
.spread__place > span,
.spread__credit > span { display: block; }
.spread__place > span {
  font-family: 'Newsreader Variable', Georgia, serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 380;
  line-height: 1.3;
}
.spread__credit > span {
  padding-top: 3px;
  font-size: 11px;
  font-weight: 520;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* without the script the caption still sits in the gutter */
html:not(.pronto) .spread__place { left: var(--gutter); }
html:not(.pronto) .spread__credit { right: var(--gutter); }
@media (max-width: 640px) {
  .spread__caption { height: 78px; }
  .spread__place,
  .spread__credit { max-width: 88%; }
  .spread__credit { right: auto; left: 0; top: 48px; text-align: left; }
  html:not(.pronto) .spread__credit { left: var(--gutter); }
}

/* ---------------------------------------------------------------- the end */
.next {
  display: block;
  width: min(var(--col), 100% - 2 * var(--gutter));
  margin: 72px auto 0;
  padding: 30px 0 34px;
  border-top: 1px solid var(--ink);
}
.next__label {
  display: block;
  margin-bottom: 10px;
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.next__title {
  display: inline;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 360;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.next__arrow {
  display: inline-block;
  width: 34px;
  height: 14px;
  margin-left: 10px;
  vertical-align: 0.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.next__title {
  transition: color 0.4s ease;
}
@media (hover: hover) {
  .next:hover .next__title { color: var(--accent); }
  .next:hover .next__arrow { transform: translateX(10px); }
}
.colophon {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  padding: 22px var(--gutter) 28px;
  border-top: 1px solid var(--rule);
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
}
.colophon span:first-child {
  font-family: 'Newsreader Variable', Georgia, serif;
  font-size: 18px;
  color: var(--ink);
}