* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth}
body {
  margin:0;
  background:#fafaf9;
  color:#282923;
  font:15px/1.6 "DM Sans",sans-serif}
a {
  color:inherit;
  text-underline-offset:5px}
a:hover {
  color:#687453}
a:focus-visible {
  outline:2px solid #687453;
  outline-offset:6px}
header {
  max-width:1320px;
  margin:auto;
  padding:30px 6%;
  display:flex;
  justify-content:space-between;
  gap:24px}
header a {
  text-decoration:none}
.name {
  font-weight:500}
nav {
  display:flex;
  gap:28px}
nav [aria-current] {
  text-decoration:underline}
main {
  max-width:1180px;
  margin:auto;
  padding:0 40px}
.intro {
  padding:92px 0 90px;
  max-width:650px}
.eyebrow,.chapter,.placeholder>span,.type {
  font-size:11px;
  letter-spacing:.08em}
.eyebrow {
  text-transform:uppercase;
  color:#63705b}
h1 {
  font:400 clamp(60px,8vw,104px)/1.08 "Source Serif 4",Georgia,serif;
  letter-spacing:-.055em;
  margin:18px 0 26px}
h1 span {
  color:#8e9b77}
.intro>p:not(.eyebrow):not(.preview-note) {
  font:400 23px/1.5 "Source Serif 4",Georgia,serif}
.preview-note {
  font-size:12px;
  color:#686b60;
  margin-top:28px}
.chapter {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #d6d8ce;
  padding:16px 0 40px;
  color:#606650}
.desk-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:6%;
  row-gap:82px;
  align-items:start}
.entry {
  margin:0;
  min-width:0}
.wide {
  grid-column:span 7}
.narrow {
  grid-column:span 5}
.small {
  grid-column:span 4}
.medium {
  grid-column:span 7}
.offset {
  grid-column:6 / span 7;
  padding-top:70px}
.lowered {
  padding-top:100px}
.full {
  grid-column:2 / span 10}
.pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px}
.entry img {
  display:block;
  width:100%;
  height:auto}
.placeholder {
  position:relative;
  overflow:hidden;
  background:#e5e4da;
  isolation:isolate}
.landscape {
  aspect-ratio:4/3}
.portrait {
  aspect-ratio:3/4}
.square {
  aspect-ratio:1}
.placeholder>span {
  position:absolute;
  left:20px;
  top:16px;
  z-index:1;
  color:#4d574b}
.placeholder i {
  position:absolute;
  display:block}
.fold {
  background:#e9dfd1}
.fold i {
  width:60%;
  height:65%;
  left:20%;
  top:21%;
  background:linear-gradient(135deg,#d7c5ad 0 49.6%,#f4ebdd 50%);
  clip-path:polygon(0 24%,68% 0,100% 78%,30% 100%);
  transform:rotate(-8deg)}
.thread {
  background:#dce1d4}
.thread i {
  width:70%;
  height:63%;
  left:15%;
  top:24%;
  border:2px solid #7f8e70;
  border-radius:50% 20% 55% 30%;
  transform:rotate(-24deg);
  box-shadow:8px 6px 0 -1px #dce1d4,10px 7px 0 #7f8e70,19px 14px 0 -1px #dce1d4,21px 15px 0 #7f8e70}
.grid {
  background:#e6e6df}
.grid i {
  inset:24% 17% 17%;
  background:repeating-linear-gradient(0deg,transparent 0 22px,#959e8e 23px 24px),repeating-linear-gradient(90deg,transparent 0 22px,#959e8e 23px 24px);
  transform:rotate(9deg)}
.curves {
  background:#e1d9d5}
.curves i {
  width:70%;
  height:60%;
  left:15%;
  top:26%;
  border:1px solid #9d8074;
  border-radius:50%;
  box-shadow:0 -13px 0 -1px #e1d9d5,0 -14px 0 #9d8074,0 -27px 0 -1px #e1d9d5,0 -28px 0 #9d8074,0 13px 0 -1px #e1d9d5,0 14px 0 #9d8074;
  transform:rotate(-35deg)}
figcaption {
  font:16px/1.5 "Source Serif 4",Georgia,serif;
  padding-top:14px}
.type {
  display:block;
  font-family:"DM Sans",sans-serif;
  letter-spacing:0;
  color:#676b61;
  margin-top:4px}
footer {
  border-top:1px solid #d6d8ce;
  margin-top:100px;
  padding:35px 0 55px;
  display:flex;
  gap:24px;
  align-items:center;
  font-size:12px}
footer p {
  margin-right:auto;
  font:italic 20px "Source Serif 4",Georgia,serif}
.skip {
  position:absolute;
  left:16px;
  top:-100px;
  background:white;
  padding:12px;
  z-index:10}
.skip:focus {
  top:12px}
.entry.reveal-pending {
  opacity:0;
  transform:translateY(24px)}
.entry {
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.65,.3,1)}
@media(max-width:650px) {
  header {
  padding:22px 24px;
  font-size:13px}
nav {
  gap:16px}
main {
  padding:0 24px}
.intro {
  padding:58px 0 54px}
.intro>p:not(.eyebrow):not(.preview-note) {
  font-size:20px}
.desk-grid {
  grid-template-columns:1fr;
  gap:45px}
.entry,.offset,.full {
  grid-column:1;
  padding-top:0}
.small {
  width:80%}
.narrow {
  width:85%}
.lowered.narrow {
  justify-self:end}
.pair {
  gap:12px}
.placeholder>span {
  left:12px;
  top:12px;
  font-size:9px}
footer {
  flex-wrap:wrap;
  margin-top:65px}
footer p {
  width:100%;
  margin:0}
.chapter {
  font-size:10px}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
.entry {
  transition:none}
.entry.reveal-pending {
  opacity:1;
  transform:none}
}