/* ================================================================
   FOOLSCAP — an article page only. The shell lives in foolscap.css.
   ================================================================ */
html{background:var(--paper);color-scheme:only light;}
body{font-feature-settings:"onum" 1,"liga" 1;}
/* hero */
.lead{position:relative;z-index:2;padding:clamp(2.4rem,7vh,5.5rem) 1.25rem 0;}
.lead figure{margin:0 auto;max-width:1080px;}
.lead img{display:block;width:100%;height:auto;border:1px solid var(--dust);}
.lead figcaption{font-family:var(--label);font-weight:400;font-size:.62rem;line-height:1.5;
  letter-spacing:.03em;font-stretch:125%;color:#857d70;margin-top:.7rem;text-align:center;}

/* centred title block */
.titleblock{position:relative;z-index:2;max-width:38em;margin:0 auto;padding:2.6rem 1.5rem 0;text-align:center;}
.kicker{margin:0 0 1.2rem;}
.kicker .tag{clip-path:inset(0 100% 0 0);transition:clip-path 1.05s cubic-bezier(.4,.05,.2,1);}
.kicker.in .tag{clip-path:inset(0 0 0 0);}
h1{font-family:var(--display);font-weight:500;font-size:clamp(2.8rem,6.6vw,3.7rem);line-height:1.04;margin:.2rem 0 1rem;letter-spacing:.005em;}
/* placeline / "distance line": always takes the piece's rubric pigment,
   same micro-type as the byline. Format: [time] by [mode] from Cannes */
.placeline{font-family:var(--label);font-weight:500;font-stretch:125%;font-size:.64rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--azur);margin:0 0 1.4rem;}
.standfirst{font-family:var(--body);font-weight:400;font-size:1.5rem;line-height:1.36;margin:0 auto 1.6rem;max-width:32em;color:#33302b;}
.byline{font-family:var(--label);font-weight:500;font-stretch:125%;font-size:.64rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--azur);margin:0;}
footer .foot-byline{font-family:var(--label);font-weight:500;font-stretch:125%;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--foxing);margin:0 0 1.5rem;}
.titleblock .rule{border:0;border-top:1px solid var(--azur);width:4rem;margin:2.2rem auto 0;}

/* body */
.article{position:relative;z-index:2;max-width:40em;margin:0 auto;padding:2.4rem 1.5rem 2rem;}
p{margin:0 0 1.35rem;}
p.first::first-letter{font-family:var(--display);font-weight:600;float:left;font-size:3.5rem;line-height:.78;padding:.06em .08em 0 0;color:var(--ink);}

figure{margin:2.5rem 0;opacity:0;transform:translateY(22px);
  transition:opacity 1.1s cubic-bezier(.16,.7,.2,1),transform 1.1s cubic-bezier(.16,.7,.2,1);}
figure.in{opacity:1;transform:none;}
figure img{display:block;width:100%;height:auto;border:1px solid var(--dust);
  transform:scale(1.04);transition:transform 1.5s cubic-bezier(.16,.7,.2,1);}
figure.in img{transform:scale(1);}
figure.portrait img{max-width:24em;margin-left:auto;margin-right:auto;}
figcaption{font-family:var(--label);font-weight:400;font-size:.64rem;line-height:1.5;
  letter-spacing:.03em;font-stretch:125%;color:#857d70;margin-top:.7rem;}

.endmark{display:block;width:7px;height:7px;border-radius:50%;background:var(--foxing);opacity:.85;margin:3rem auto 0;}

@media (max-width:560px){
  body{font-size:20.5px;}
  .standfirst{font-size:1.4rem;}
  .lead{padding-left:0;padding-right:0;}
  .lead img{border-left:0;border-right:0;}
}

@media (prefers-color-scheme:dark){
  html,body,.topbar,.menu{background:#F4F1E8 !important;}
  body{color:#1C1A17 !important;}
}

@media (prefers-reduced-motion:reduce){
  figure,figure img{opacity:1 !important;transform:none !important;transition:none !important;}
  .kicker .tag{clip-path:none !important;transition:none !important;}
}

.lead .sketch{display:block;width:100%;height:auto;border:1px solid var(--dust);}
.lead .sketch svg{display:block;width:100%;height:auto;}
figure .ph-slot{margin:0;}
footer.byline-only{padding:3.2rem 1.5rem 0;}
footer.byline-only .foot-byline{margin:0;}
footer.byline-only + footer{padding-top:1.6rem;}