/* ============================================================== TOKENS ==== */
:root{
  --paper:#F7F4EE;
  --ink:#24261F;
  --ink-soft:#4A5244;
  --rule:rgba(36,38,31,.42);
  --blue:#275C8C;                /* 05 key takeaway stays blue */
  --f:"Cormorant Garamond","EB Garamond",Garamond,Georgia,"Times New Roman",serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f); font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,p{ margin:0; }
img{ max-width:100%; display:block; }

/* laid stock, so the cream is not a flat fill */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)'/%3E%3C/svg%3E");
}

.back{
  position:fixed; top:clamp(14px,2.4vw,26px); left:clamp(14px,2.4vw,30px); z-index:3;
  font-size:13.5px; letter-spacing:.04em; color:var(--ink-soft); text-decoration:none;
  transition:color .25s ease;
}
.back:hover{ color:var(--ink); }

/* =============================================================== SHEET ==== */
.sheet{
  position:relative; z-index:1;
  max-width:640px; margin-inline:auto;
  padding:clamp(72px,11vw,132px) clamp(22px,5vw,40px) clamp(48px,7vw,80px);
  text-align:center;
}

/* ============================================================ 01 TITLE ==== */
.tt{
  position:relative;
  display:inline-block; text-align:center;
  font-weight:400; line-height:1;
  padding-right:clamp(16px,3vw,30px);
  margin-bottom:clamp(18px,2.6vw,28px);
}
/* the bracket that closes the title block on the reference */
.tt::after{
  content:""; position:absolute; right:0; top:6%; bottom:6%; width:clamp(9px,1.4vw,15px);
  border:1.6px solid var(--ink); border-left:0;
}
.tt__lead, .tt__conn{
  font-style:italic; font-weight:400;
  font-size:clamp(26px,4.3vw,44px); line-height:1.02;
  letter-spacing:.005em;
}
.tt__lead{ display:block; }
.tt__big{
  display:block;
  font-size:clamp(40px,7.6vw,78px); font-weight:500; line-height:1.03;
  letter-spacing:.012em; text-transform:uppercase;
}
/* connector and second line share a baseline, as "of NEWS" does */
.tt__row{ display:flex; align-items:baseline; justify-content:center; gap:.24em; }

/* ========================================================= 02 SUBTITLE ==== */
.sub{
  font-size:clamp(14px,1.72vw,19px); line-height:1.56;
  letter-spacing:.17em; text-transform:uppercase; text-indent:.17em;
  color:var(--ink);
}

/* =========================================================== 03 BYLINE ==== */
.byline{
  margin:clamp(20px,2.8vw,30px) auto 0;
  max-width:23em;
  padding:.62em 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  font-size:clamp(13px,1.5vw,17px);
  letter-spacing:.27em; text-transform:uppercase; text-indent:.27em;
  color:var(--ink);
}

/* ===================================================== 04 OPENING TEXT ==== */
.opening{ margin-top:clamp(30px,4.4vw,52px); }
.opening p{
  text-align:justify; hyphens:auto;
  font-size:clamp(15px,1.62vw,18px); line-height:1.62;
  color:var(--ink);
}

/* ====================================================== 05 KEY TAKEAWAY ==== */
.takeaway{
  margin-top:clamp(20px,2.8vw,32px);
  font-size:clamp(18px,2.3vw,26px); line-height:1.4;
  color:var(--blue);
  text-wrap:balance;
}

/* ==================================================== 06 FIXED BRAND MARK == */
.mark{ margin:clamp(30px,4.6vw,56px) 0 clamp(24px,3.4vw,40px); }
.mark img{
  height:clamp(120px,17vw,186px); width:auto; margin-inline:auto;
  opacity:.9;
}

/* ================================================ 07 PUBLICATION FOOTER ==== */
.colophon p{
  font-size:clamp(14px,1.6vw,18px); line-height:1.58;
  color:var(--ink);
}
.colophon__loc{
  font-size:clamp(15px,1.75vw,20px);
  letter-spacing:.2em; text-transform:uppercase; text-indent:.2em;
}
.colophon em{ font-style:italic; }
.colophon__last{ color:var(--ink-soft); }

@media (max-width:520px){
  .tt{ padding-right:12px; }
  .opening p{ text-align:left; hyphens:manual; }
  .byline{ letter-spacing:.2em; text-indent:.2em; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ===================================================== LONGER ESSAYS ======
   For First Principles pieces: section headings, reproduced figures, and a
   source list. Shares the sheet with the deal notes. */
.sheet--long{ max-width:720px; }
.sheet--long .opening p + p{ margin-top:1.1em; }
.sheet--long .body{ margin-top:1.1em; }
.h2{
  margin:clamp(34px,4.6vw,54px) 0 clamp(12px,1.6vw,18px);
  font-size:clamp(21px,2.4vw,30px); font-weight:500; line-height:1.18;
  letter-spacing:-.012em; text-align:left; color:var(--ink);
}
.body p{
  text-align:justify; hyphens:auto; margin:0 0 1.1em;
  font-size:clamp(15px,1.62vw,18px); line-height:1.62; color:var(--ink);
}
.body p:last-child{ margin-bottom:0; }
.lede{ font-size:clamp(16px,1.78vw,20px) !important; line-height:1.55 !important; }

.fig{ margin:clamp(26px,3.6vw,44px) 0; }
.fig img{
  width:100%; height:auto; display:block;
  border:1px solid rgba(36,38,31,.18); background:#fff;
}
.fig figcaption{
  margin-top:.75em; font-size:clamp(12px,1.25vw,13.5px); line-height:1.5;
  color:var(--ink-soft); text-align:left;
}
.asks{ margin:clamp(14px,2vw,22px) 0 0; padding:0; list-style:none; }
.asks li{
  padding:.62em 0; border-top:1px solid rgba(36,38,31,.16);
  font-size:clamp(15px,1.58vw,17.5px); line-height:1.5; text-align:left;
}
.asks li:last-child{ border-bottom:1px solid rgba(36,38,31,.16); }
.srcs{
  margin:clamp(30px,4vw,48px) 0 0; padding-top:clamp(14px,1.8vw,20px);
  border-top:1px solid rgba(36,38,31,.22); text-align:left;
}
.srcs h3{
  margin:0 0 .7em; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500;
}
.srcs ol{ margin:0; padding-left:1.2em; }
.srcs li{
  font-size:clamp(12.5px,1.3vw,14px); line-height:1.55; color:var(--ink-soft);
  margin-bottom:.45em;
}
.srcs .rights{ margin-top:1em; font-size:12px; color:var(--ink-soft); font-style:italic; }
@media (max-width:520px){
  .body p, .asks li{ text-align:left; hyphens:manual; }
}
.pullish{
  font-size:clamp(17px,1.9vw,22px) !important; line-height:1.4 !important;
  text-align:center !important; font-style:italic;
  margin:1.4em 0 !important; color:var(--ink);
}