@font-face{font-family:"GP Sans";src:url("fonts/poppins-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"GP Sans";src:url("fonts/poppins-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"GP Serif";src:url("fonts/bodoni.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"GP Serif";src:url("fonts/bodoni-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
  --black:#000;--ink:#1A1A1A;--graphite:#2F2F2F;--stone:#6B6B6B;--numeral:#8C8C8C;--mist:#C8C8C8;--cloud:#F4F4F2;--white:#fff;
  --cream:#F6F1E6;--cream-line:#E2D9C6;--coral:#E63946;
  --sans:"GP Sans",Poppins,"Helvetica Neue",Arial,sans-serif;
  --serif:"GP Serif","Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  --gut:clamp(20px,5vw,64px);--max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--black)}
body{font-family:var(--sans);font-weight:300;color:var(--ink);background:var(--white);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
strong,b{font-weight:600}
em,cite{font-style:italic}
.skip{position:absolute;left:-999px;top:8px;background:var(--white);color:var(--black);padding:8px 12px;z-index:9}
.skip:focus{left:8px}

/* Hero: black ground */
.hero{background:var(--black);color:var(--white);padding:clamp(48px,8vw,104px) var(--gut) clamp(56px,7vw,96px)}
.hero-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,6vw,88px);align-items:end}
.kicker{font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);line-height:1.8}
.kicker i{font-style:normal;color:var(--stone);padding:0 .35em}
h1{margin-top:22px}
.h1-name{display:block;font-weight:600;font-size:clamp(54px,9.6vw,132px);line-height:.9;letter-spacing:-.045em}
.h1-sub{display:block;margin-top:18px;font-weight:300;font-size:clamp(20px,2.3vw,28px);line-height:1.25;letter-spacing:-.01em;color:var(--mist)}
.accent{display:block;width:40px;height:3px;background:var(--coral);margin:30px 0 28px}
.lede{max-width:40em;font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:#E6E6E6}
.lede em{font-family:var(--serif);font-size:1.08em}
.lede.soft{margin-top:14px;color:var(--mist)}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.toc a{display:inline-block;padding:8px 14px;border:1px solid var(--graphite);border-radius:999px;font-size:13px;line-height:1.2;text-decoration:none;color:#E6E6E6;transition:border-color .2s,color .2s}
.toc a.li{border-color:var(--mist)}
.toc a:hover{border-color:var(--white);color:var(--white)}
.portrait img{width:100%;filter:contrast(1.04);-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 97%),linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,#000 62%,transparent 97%),linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}

/* Epigraph */
.epigraph{padding:clamp(72px,10vw,140px) var(--gut) clamp(48px,6vw,80px);max-width:calc(var(--max) + 2*var(--gut));margin:0 auto}
.epigraph blockquote{text-align:center;max-width:15em;margin:0 auto clamp(48px,6vw,80px);font-family:var(--serif);font-style:italic;font-size:clamp(34px,5vw,64px);line-height:1.08;letter-spacing:-.01em}
.epigraph blockquote footer{margin-top:22px;font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.epigraph blockquote footer cite{text-transform:none;letter-spacing:0;font-size:14px;font-family:var(--serif);font-style:italic;color:var(--ink)}

/* Plates: lit gallery pictures, edge to edge of the column, no boxes */
.plate{margin:0}
.plate-frame{overflow:hidden}
.plate img{width:100%}
.js .plate img{transform:scale(1.035);transition:transform 2.4s cubic-bezier(.2,.6,.2,1)}
.js .plate.in img{transform:scale(1)}
.plate figcaption{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.6vw,20px);line-height:1.4;color:var(--ink)}
.plate figcaption span{font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.14em;color:var(--stone);margin-left:.5em}

/* Sections */
.block{max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:clamp(56px,7vw,104px) var(--gut);border-top:1px solid #E6E6E6}
.epigraph + .block{border-top:0}
.eyebrow{font-family:var(--serif);font-size:28px;line-height:1;color:var(--numeral);letter-spacing:.06em}
h2{margin-top:6px;font-weight:600;font-size:clamp(36px,5.4vw,72px);line-height:.98;letter-spacing:-.035em;max-width:14em}
h2 em{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.h2-sub{margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);margin-top:clamp(28px,4vw,48px);align-items:start}
.prose p{max-width:36em}
.prose p + p,.prose p + blockquote,.prose blockquote + p{margin-top:1.05em}
.prose.narrow{max-width:40em;margin-top:clamp(28px,4vw,48px)}
.wide{max-width:38em;margin-top:22px;font-size:clamp(17px,1.5vw,19px)}
.pull{margin-top:1.6em!important;padding-top:1.1em;border-top:1px solid var(--ink);font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.6vw,32px);line-height:1.18;color:var(--ink);max-width:18em!important}
.pull span{display:block;margin-top:10px;font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
blockquote.inline{margin:1.3em 0;padding-left:20px;border-left:1px solid var(--ink)}
blockquote.inline p{font-family:var(--serif);font-style:italic;font-size:1.18em;line-height:1.42}
blockquote.inline footer,blockquote.big footer,blockquote.question footer{margin-top:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
blockquote.big p{font-family:var(--serif);font-style:italic;font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.01em}
blockquote.big footer{margin-top:16px}

.stat{background:var(--black);color:var(--white);padding:28px 28px 22px}
.stat-lead{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);margin-bottom:12px}
.stat-row{display:grid;grid-template-columns:5.2em 1fr;gap:14px;align-items:baseline;padding:13px 0;border-top:1px solid var(--graphite);font-size:15px;line-height:1.4;color:#E6E6E6}
.stat-row .num{font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--white)}

/* Method: the black exception */
.dark{max-width:none;background:var(--black);color:var(--white);border-top:0}
.dark-inner{max-width:var(--max);margin:0 auto}
.dark .eyebrow{color:var(--stone)}
.dark .wide{color:#E6E6E6}
.dark .plate{margin-top:clamp(32px,4vw,56px)}
.dark .plate figcaption{color:var(--mist)}
.marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);margin-top:clamp(40px,5vw,72px)}
.mark{border-top:1px solid var(--graphite);padding-top:26px}
.mark img{height:38px;width:auto;margin-bottom:22px}
.mark img.mz{height:21px;margin:9px 0 30px}
.mark p{font-size:16px;line-height:1.6;color:#DADADA}

.mark.solo{max-width:640px;margin-top:clamp(40px,5vw,72px)}

.mark.solo p{font-size:clamp(17px,1.5vw,19px)}

.mark.solo p.beneath{margin-top:18px;font-size:14px;color:var(--mist)}

/* Book: cream where it suits */
.cream{max-width:none;background:var(--cream);border-top:0}
.cream-inner{max-width:var(--max);margin:0 auto}
.question{margin-top:clamp(32px,4vw,56px)}
.question p{max-width:15em;font-family:var(--serif);font-style:italic;font-size:clamp(30px,4vw,54px);line-height:1.06;letter-spacing:-.01em}
.question footer{margin-top:16px}
.cream .prose a{color:var(--ink)}
.parts{list-style:none;border-top:1px solid var(--ink)}
.parts li{padding:16px 0;border-bottom:1px solid var(--cream-line);font-weight:600;font-size:clamp(19px,1.8vw,23px);letter-spacing:-.015em;line-height:1.2}
.parts li span{display:block;margin-bottom:4px;font-weight:300;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.cream .plate{margin-top:clamp(48px,6vw,88px)}

/* The date */
.date{border-top:1px solid var(--ink);padding-top:18px}
.date-big{font-weight:600;font-size:clamp(56px,7vw,96px);line-height:1;letter-spacing:-.045em}
.date-row{margin-top:10px;font-size:15px;color:var(--stone)}
.date-big + .date-row{margin-top:18px}

/* Timeline */
.timeline{list-style:none;margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--ink)}
.timeline li{display:grid;grid-template-columns:11em 1fr;gap:24px;padding:20px 0;border-bottom:1px solid #E6E6E6;align-items:baseline}
.timeline .yr{font-weight:600;font-size:clamp(18px,1.8vw,22px);letter-spacing:-.015em}
.timeline p{max-width:34em}

/* Close */
.close{background:var(--black);color:var(--white);padding:clamp(72px,10vw,140px) var(--gut) 40px}
.close-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.close blockquote p{font-family:var(--serif);font-style:italic;font-size:clamp(40px,6.2vw,84px);line-height:1;letter-spacing:-.015em}
.close blockquote footer{margin-top:20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.close blockquote footer cite{text-transform:none;letter-spacing:0;font-size:14px;color:var(--mist);font-family:var(--serif)}
.contact .ask{font-weight:600;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.015em;margin-bottom:10px}
.contact p{font-size:17px;color:#E6E6E6}
.contact .links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:6px;font-size:15px;color:var(--mist)}
/* Buttons */
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn{display:inline-block;padding:13px 22px;border-radius:999px;background:var(--white);color:var(--black);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;line-height:1.2;transition:background .2s,color .2s}
.btn:hover{background:var(--coral);color:var(--white)}
.btn.ghost{background:transparent;color:var(--white);border:1px solid var(--graphite)}
.btn.ghost:hover{border-color:var(--white);background:transparent}
.foot{max-width:var(--max);margin:clamp(72px,9vw,120px) auto 0;padding-top:24px;border-top:1px solid var(--graphite);display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}
.foot img{height:30px;width:auto}
.foot p{font-size:12.5px;line-height:1.55;color:var(--stone);max-width:52em}
.foot .top{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);text-decoration:none;white-space:nowrap}

/* Motion: quiet reveals, only when scripting is on and motion is welcome */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.6,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .h1-name{opacity:0;letter-spacing:-.01em;transition:opacity 1.1s ease,letter-spacing 1.6s cubic-bezier(.2,.6,.2,1)}
.js.ready .h1-name{opacity:1;letter-spacing:-.045em}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .h1-name,.plate img{opacity:1!important;transform:none!important;transition:none!important}
  .js .h1-name{letter-spacing:-.045em}
}

/* Tablet and phone */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;align-items:start}
  .portrait{max-width:340px}
  .split,.close-inner{grid-template-columns:1fr}
  .marks{grid-template-columns:1fr}
  .stat{max-width:30em}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .hero{padding-top:40px}
  .portrait{max-width:none;margin:0 calc(-1*var(--gut))}
  .portrait img{width:100%}
  .toc a{font-size:12.5px;padding:7px 12px}
  .timeline li{grid-template-columns:1fr;gap:4px;padding:16px 0}
  .stat{padding:22px 20px 16px}
  .stat-row{grid-template-columns:4.6em 1fr}
  .plate-frame{margin:0 calc(-1*var(--gut))}
  .plate figcaption{font-size:16px}
  .foot{grid-template-columns:1fr;gap:16px}
}