/* O meni: his story as a long-read. */

/* ============ hero: the title across the grid, a photo filling the left half, the story beside it ============ */
.oh{align-items:start;padding:112px 0 clamp(110px,11vw,180px)}
.oh-h{grid-column:m 1/m-end;grid-row:1;--span:12;--fmax:190px;line-height:.98;margin-bottom:clamp(56px,8vw,128px)}
.oh-h .ln:nth-child(2){text-align:right;margin-right:0}
.oh-ph{grid-column:full-start/m 7;grid-row:2;aspect-ratio:3/4;overflow:hidden;background:var(--band)}
.oh-body{grid-column:m 8/m-end;grid-row:2;padding-top:4px}
.oh-p{font-size:clamp(18px,1.4vw,21px);line-height:1.62;max-width:30em}
.oh-drop::first-letter{float:left;font-weight:800;font-size:4.6em;line-height:.78;letter-spacing:-.01em;margin:.07em .1em 0 -.03em}
.oh-q{margin:1.1em 0 1em;max-width:30em}
.oh-q p{font-weight:700;font-size:clamp(28px,2.6vw,44px);letter-spacing:-.006em;line-height:1.06;text-wrap:balance}
.qm{color:#BDB8AF}
/* the reading light: phrases start grey and turn ink as they pass the middle of the screen */
.rl b{font-weight:700;color:var(--ink);transition:color .6s}
html.js .rl b{color:#BDB8AF}
html.js .rl b.is-lit{color:var(--ink)}
@media (max-width:899px){
  .oh{padding-top:96px}
  .oh-h{--fmaxm:84px}
  .oh-ph{grid-column:full-start/full-end}
  .oh-body{grid-column:m 1/m-end;grid-row:3;padding-top:34px}
  .oh-p{font-size:18px}
}

/* ============ the November: three sentences in three sizes ============ */
.on{background:var(--band);padding:clamp(110px,11vw,180px) 0}
.on-g{align-items:start}
.on-1{grid-column:1/8;font-weight:600;font-size:clamp(24px,2.3vw,38px);letter-spacing:-.005em;line-height:1.15;color:var(--ink2);text-wrap:balance}
.on-2{grid-column:5/12;margin-top:clamp(30px,3.4vw,56px);font-weight:700;font-size:clamp(30px,3.4vw,58px);letter-spacing:-.008em;line-height:1.05;text-wrap:balance}
.on-3{grid-column:1/-1;margin-top:clamp(50px,6vw,100px);--span:12;--fmax:220px;line-height:.98}
.on-3 .ln:nth-child(2){padding-left:calc((100% - 11 * var(--gut)) / 12 * 3 + 3 * var(--gut))}
@media (max-width:899px){
  .on-1,.on-2{grid-column:1/-1}
  .on-1{font-size:clamp(22px,6vw,28px)}
  .on-2{grid-column:2/-1;font-size:clamp(26px,7.4vw,34px)}
  .on-3{--fmaxm:90px}
  .on-3 .ln:nth-child(2){padding-left:0;text-align:right;margin-right:0}
}

/* ============ the best moment ============ */
.ob{padding:clamp(110px,11vw,180px) 0;align-items:end}
.ob-t{grid-column:m 1/m 7;grid-row:1;padding-bottom:6px}
.ob-k{font-weight:600;font-size:clamp(18px,1.5vw,24px)}
.ob-q{padding-right:.12em;margin-top:.45em;font-weight:700;font-size:clamp(34px,5vw,86px);letter-spacing:-.01em;line-height:.98;text-wrap:balance}
.ob-ph{grid-column:m 8/m-end;grid-row:1;aspect-ratio:4/5;overflow:hidden;background:var(--band)}
@media (max-width:899px){
  .ob-t{grid-column:m 1/m-end}
  .ob-q{font-size:clamp(32px,9.6vw,46px)}
  .ob-ph{grid-column:m 1/m-end;grid-row:2;margin-top:40px}
}

/* ============ the red band: two figures facing each other across the seam ============ */
.og{background:var(--red);color:#fff;padding:clamp(90px,9vw,150px) 0 clamp(100px,10vw,170px)}
.og-g{align-items:start}
.og-h{grid-column:1/-1;font-weight:800;font-size:clamp(40px,5.4vw,92px);letter-spacing:-.01em;line-height:1;margin-bottom:clamp(50px,6vw,100px)}
.og-l{grid-column:1/7}
.og-r{grid-column:7/13}
.og-v{font-weight:800;font-size:clamp(70px,11.4vw,200px);letter-spacing:-.015em;line-height:.84;white-space:nowrap}
.og-v .ln{margin-right:0}
.og-k{margin-top:18px;font-weight:600;font-size:clamp(18px,1.5vw,24px)}
.og-r{transition-delay:.15s}
@media (max-width:899px){
  .og-l,.og-r{grid-column:1/-1}
  .og-r{margin-top:44px}
  .og-v{font-size:clamp(72px,21vw,110px)}
}

/* ============ his name, as the signature ============ */
.os{padding:clamp(110px,11vw,180px) 0 clamp(100px,10vw,170px)}
.os-g{align-items:end}
.os-h{grid-column:1/9;--span:8;--fmax:220px;line-height:.98}
.os-r{grid-column:9/13;padding-bottom:.5em}
.os-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.os-ig{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-weight:600;font-size:16px}
.os-ig svg{width:20px;height:20px}
@media (max-width:899px){
  .os-h{grid-column:1/-1;--span:12;--fmaxm:110px}
  .os-r{grid-column:1/-1;margin-top:30px}
}