@font-face{font-family:Alegreya;src:url(/assets/fonts/alegreya-normal.woff2)format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:Alegreya;src:url(/assets/fonts/alegreya-italic.woff2)format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:Newsreader;src:url(/assets/fonts/newsreader-normal.woff2)format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url(/assets/fonts/newsreader-italic.woff2)format("woff2");font-weight:200 800;font-style:italic;font-display:swap}

:root{
  /* paper and ink, taken from the cover of Every Tree Has Its Place */
  --paper:#faf3e2;
  --paper-deep:#f3e9d1;
  --paper-warm:#efe0bd;
  --ink:#16283f;
  --ink-soft:#3c4f66;
  --ink-faint:#5a6b80;
  --rule:rgba(22,40,63,.15);
  --rule-soft:rgba(22,40,63,.09);
  --canopy:#d9b362;
  --cardinal:#a8503f;
  --cardinal-lit:#8e3f30;
  --bark-leaf:#9a7a33;

  --display:Alegreya,Georgia,serif;
  --text:Newsreader,Georgia,serif;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4.5rem; --s7:7rem;
  --r-sm:4px; --r-md:10px; --r-lg:18px;
  --shell:74rem;
  --lift:0 1px 2px rgba(22,40,63,.08),0 6px 14px rgba(22,40,63,.10),0 18px 36px rgba(22,40,63,.10);
  --ease-out:cubic-bezier(.23,1,.32,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scrollbar-color:var(--ink-faint) var(--paper-deep);scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 1.125rem/1.62 var(--text);
  font-variant-numeric:oldstyle-nums proportional-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--canopy);color:var(--ink)}
:focus-visible{outline:2px solid var(--cardinal);outline-offset:3px;border-radius:var(--r-sm)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper-deep)}
::-webkit-scrollbar-thumb{background:var(--ink-faint);border:3px solid var(--paper-deep);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-soft)}

img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.022em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.num{font-variant-numeric:tabular-nums lining-nums}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:var(--s2) var(--s3);z-index:20;border-radius:0 0 var(--r-md) 0}
.skip:focus{left:0}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--s3)}

/* ---- links ---- */
.textlink{
  color:var(--cardinal);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.18em;
  text-decoration-color:rgba(168,80,63,.4);
  transition:text-decoration-thickness .18s var(--ease-out),text-decoration-color .18s var(--ease-out),color .18s var(--ease-out);
}
.textlink:hover{color:var(--cardinal-lit);text-decoration-thickness:2px;text-decoration-color:currentColor}

.btn{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:1.02rem;
  letter-spacing:.005em;line-height:1;
  padding:.95rem 1.5rem .9rem;border-radius:var(--r-md);
  background:var(--ink);color:var(--paper);text-decoration:none;border:1px solid var(--ink);
  transition:background .18s var(--ease-out),transform .12s var(--ease-out),box-shadow .18s var(--ease-out);
}
.btn:hover{background:#22384f;box-shadow:0 4px 12px rgba(22,40,63,.18)}
.btn:active{transform:scale(.97)}
.btn--quiet{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--quiet:hover{background:rgba(22,40,63,.05);box-shadow:none}

/* ---- masthead ---- */
.masthead{border-bottom:1px solid var(--rule-soft);background:var(--paper)}
.masthead__in{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding-block:var(--s3)}
.wordmark{
  font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none
}
.nav ul{display:flex;gap:var(--s3);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{
  color:var(--ink-soft);text-decoration:none;font-size:.95rem;letter-spacing:.04em;
  text-transform:uppercase;padding-block:.4rem;border-bottom:2px solid transparent;
  transition:color .18s var(--ease-out),border-color .18s var(--ease-out);
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--canopy)}
.nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--ink)}

/* ---- hero ---- */
.hero{padding-block:var(--s6) var(--s5)}
.hero__in{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s6);align-items:center}
.hero h1{
  font-size:clamp(3.1rem,7.8vw,5.5rem);line-height:.98;letter-spacing:-.028em;font-weight:800;
  margin-bottom:var(--s3);
}
.lede{font-size:1.2rem;line-height:1.66;color:var(--ink-soft);max-width:34rem}
.cap{
  float:left;font-family:var(--display);font-weight:800;color:var(--cardinal);
  font-size:3.5rem;line-height:.78;padding:.1em .1em 0 0;
}
.hero__links{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4);flex-wrap:wrap}
.hero__photo{margin:0}
.hero__photo img{
  border-radius:var(--r-lg);box-shadow:var(--lift);
  outline:1px solid rgba(0,0,0,.1);outline-offset:-1px;
}

/* one authored moment: the page settles in like a turned page */
.hero__text>*{animation:settle .7s var(--ease-out) both}
.hero__text>*:nth-child(2){animation-delay:.06s}
.hero__text>*:nth-child(3){animation-delay:.12s}
.hero__photo{animation:settle .8s var(--ease-out) .08s both}
@keyframes settle{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- leaf rule: the divider from the book's canopy ---- */
.leafrule{
  border:0;height:26px;margin:0;
  background:
    linear-gradient(var(--rule),var(--rule)) center/100% 1px no-repeat;
  position:relative;
}
.leafrule::before{
  content:"";position:absolute;left:50%;top:0;width:58px;height:100%;
  transform:translateX(-50%);background:var(--paper);
}
.leafrule::after{
  content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;
  transform:translate(-50%,-50%);
  background-color:var(--bark-leaf);
  -webkit-mask:var(--leaf) center/contain no-repeat;mask:var(--leaf) center/contain no-repeat;
}
:root{--leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5 3.2 7.4 7 7.4 11 0 4.3-3.3 7.4-7.4 9-4.1-1.6-7.4-4.7-7.4-9C4.6 9 7 5.2 12 2z'/%3E%3C/svg%3E")}

/* ---- the book ---- */
.book{padding-block:var(--s6)}
.book__in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s6);align-items:center}
.book__cover{margin:0}
.book__cover img{border-radius:var(--r-md);box-shadow:var(--lift);outline:1px solid rgba(0,0,0,.1);outline-offset:-1px}
.book__label{
  font-family:var(--display);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:var(--s2);
}
.book h2{
  font-size:clamp(2.1rem,4.4vw,3.1rem);line-height:1.04;margin-bottom:var(--s1)
}
.book__credit{font-style:italic;color:var(--ink-faint);margin-bottom:var(--s3)}
.book__text p+p{margin-top:var(--s3)}
.book__text>p:not(.book__label):not(.book__credit):not(.book__meta):not(.book__buy){max-width:36rem}
.book__meta{font-size:.98rem;color:var(--ink-faint)}
.book__buy{margin-top:var(--s4)}

/* ---- contents page ---- */
.writing{padding-block:var(--s6)}
.writing h2{font-size:clamp(1.9rem,3.6vw,2.5rem);margin-bottom:var(--s1)}
.writing__intro{color:var(--ink-faint);margin-bottom:var(--s5);max-width:34rem}
.contents{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.contents li{
  border-bottom:1px solid var(--rule-soft);
  display:grid;grid-template-columns:1.4rem minmax(0,17rem) minmax(0,1fr);
  column-gap:var(--s3);row-gap:var(--s1);align-items:baseline;padding-block:var(--s3);
  transition:background .2s var(--ease-out);
}
.contents li:hover{background:rgba(217,179,98,.11)}
.contents li::before{
  content:"";width:14px;height:14px;align-self:start;margin-top:.45rem;
  background-color:var(--bark-leaf);
  -webkit-mask:var(--leaf) center/contain no-repeat;mask:var(--leaf) center/contain no-repeat;
}
.contents h3{font-size:1.34rem;font-weight:700;letter-spacing:-.015em}
.contents p{color:var(--ink-soft);font-size:1.02rem;max-width:38rem}

/* ---- panels ---- */
.journal{padding-block:var(--s4) var(--s5)}
.journal__in{border-left:1px solid var(--rule);padding-left:var(--s4);max-width:46rem}
.journal__in h2{font-size:1.5rem;margin-bottom:var(--s2)}
.journal__in p{color:var(--ink-soft)}
.signup{padding-block:var(--s2) var(--s7)}
.panel{
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s5);background:var(--paper-deep);
}
.panel--warm{background:var(--paper-warm);border-color:rgba(22,40,63,.12)}
.panel h2{font-size:1.7rem;margin-bottom:var(--s2)}
.panel p{color:var(--ink-soft);max-width:44rem}
.panel p+p{margin-top:var(--s3)}

/* ---- footer ---- */
.foot{border-top:1px solid var(--rule);background:var(--paper-deep)}
.foot__in{padding-block:var(--s5);display:grid;gap:var(--s1)}
.foot__name{font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--ink)}
.foot__note{color:var(--ink-soft)}
.foot__copy{color:var(--ink-faint);font-size:.95rem;margin-top:var(--s2)}

/* ---- narrow ---- */
@media (max-width:60rem){
  .hero__in,.book__in{grid-template-columns:1fr;gap:var(--s4)}
  .hero{padding-block:var(--s5) var(--s4)}
  .hero__photo{order:-1;max-width:20rem}
  .book__cover{max-width:17rem}
  .contents li{grid-template-columns:1.4rem minmax(0,1fr);row-gap:var(--s1)}
  .contents p{grid-column:2}
}
@media (max-width:34rem){
  body{font-size:1.06rem}
  .shell{padding-inline:var(--s2)}
  .masthead__in{flex-direction:column;align-items:flex-start;gap:var(--s1)}
  .nav{margin-left:-.65rem}
  .nav ul{gap:.2rem}
  .nav a{padding:.75rem .65rem;border-bottom:0;border-top:2px solid transparent}
  .nav a:hover{border-top-color:var(--canopy)}
  .nav a[aria-current=page]{border-top-color:var(--ink)}
  .hero__links a.textlink{padding-block:.7rem}
  .panel{padding:var(--s4) var(--s3)}
  .hero__links{gap:var(--s2)}
  .btn{width:100%;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}