@font-face{font-family:'Newsreader';font-weight:400;font-style:normal;src:url('/assets/fonts/newsreader-400.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Newsreader';font-weight:500;font-style:normal;src:url('/assets/fonts/newsreader-500.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Newsreader';font-weight:600;font-style:normal;src:url('/assets/fonts/newsreader-600.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Newsreader';font-weight:400;font-style:italic;src:url('/assets/fonts/newsreader-400i.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Newsreader';font-weight:500;font-style:italic;src:url('/assets/fonts/newsreader-500i.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Work Sans';font-weight:400;font-style:normal;src:url('/assets/fonts/worksans-400.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Work Sans';font-weight:500;font-style:normal;src:url('/assets/fonts/worksans-500.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Work Sans';font-weight:600;font-style:normal;src:url('/assets/fonts/worksans-600.woff2') format('woff2');font-display:swap;}

:root{
  --bg:#FBFAF6;
  --panel:#F2EFE6;
  --dodo-tint:#F5EFE2;
  --koko-tint:#EDF1E5;
  --ink:#32332D;
  --ink-soft:#75725F;
  --ink-faint:#A9A48E;
  --clay:#B96C46;
  --clay-deep:#9C5636;
  --moss:#6C8452;
  --moss-deep:#516339;
  --line:#E2DDCB;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Work Sans',ui-sans-serif,system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Newsreader',ui-serif,Georgia,serif;
  font-weight:500;
  text-wrap:balance;
  margin:0;
}
em, .em{
  font-family:'Newsreader',serif;
  font-style:italic;
  font-weight:500;
  color:var(--clay-deep);
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}

.wrap{max-width:1040px;margin:0 auto;padding-inline:clamp(20px,5vw,56px);}
.col{max-width:640px;margin:0 auto;padding-inline:clamp(20px,5vw,40px);}

/* ---------- NAV ---------- */
header.nav{padding-top:clamp(26px,4vw,44px);padding-bottom:clamp(10px,2vw,18px);}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand img, .brand svg{height:38px;width:auto;}
.brand-word{font-family:'Newsreader',serif;font-weight:600;font-size:1.2rem;letter-spacing:0.01em;}
.crumb{font-size:0.88rem;font-weight:500;color:var(--ink-soft);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.crumb a:hover{color:var(--clay-deep);}
.crumb .sep{color:var(--ink-faint);}
.crumb .current{color:var(--ink);}

/* ---------- WAVE ---------- */
.wave{width:100%;height:32px;display:block;}

/* ---------- HOME HERO ---------- */
.home-hero{padding-block:clamp(40px,7vw,84px) clamp(20px,4vw,40px);text-align:center;}
.home-hero .mark{width:min(150px,40%);margin:0 auto 28px;}
.kicker{display:block;font-size:0.78rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--moss-deep);margin-bottom:16px;}
.home-hero h1{font-size:clamp(2rem,4.2vw,3rem);line-height:1.14;max-width:16ch;margin-inline:auto;}
.home-hero p.lede{margin:20px auto 0;max-width:46ch;color:var(--ink-soft);font-size:1.05rem;}

/* ---------- HOME PANELS ---------- */
.panels{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(18px,3vw,28px);
  padding-block:clamp(30px,5vw,54px) clamp(64px,9vw,110px);
}
.panel{
  border-radius:32px;
  padding:clamp(34px,5vw,52px) clamp(28px,4vw,40px);
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
  position:relative;
  overflow:hidden;
}
.panel:hover{transform:translateY(-6px);box-shadow:0 22px 44px -28px rgba(50,51,45,0.28);}
.panel.dodo{background:var(--dodo-tint);}
.panel.koko{background:var(--koko-tint);}
.panel .icon-wrap{
  width:64px;height:64px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.panel .icon-wrap svg, .panel .icon-wrap img{width:40px;height:40px;object-fit:contain;}
.panel h2{font-size:clamp(1.5rem,2.6vw,1.9rem);}
.panel p{margin:0;color:var(--ink-soft);font-size:0.98rem;max-width:34ch;}
.panel .meta{
  margin-top:auto;
  padding-top:10px;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:0.92rem;
}
.panel.dodo .meta{color:var(--clay-deep);}
.panel.koko .meta{color:var(--moss-deep);}
.panel .meta svg{width:16px;height:16px;transition:transform .25s ease;}
.panel:hover .meta svg{transform:translateX(4px);}

/* ---------- ARCHIVE ---------- */
.archive-hero{padding-block:clamp(36px,6vw,64px) clamp(20px,3vw,32px);}
.archive-hero .mark{width:64px;margin-bottom:20px;}
.archive-hero h1{font-size:clamp(2.1rem,4vw,3rem);}
.archive-hero p.lede{margin-top:16px;max-width:52ch;color:var(--ink-soft);font-size:1.05rem;}

.archive{padding-block:clamp(20px,4vw,40px) clamp(70px,9vw,110px);}
.trail{position:relative;padding-left:34px;}
.trail::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:0;border-left:2px dashed var(--line);}
.letter-item{position:relative;padding-block:26px;border-bottom:1px solid var(--line);}
.letter-item:last-child{border-bottom:none;}
.letter-item::before{
  content:"";position:absolute;left:-34px;top:32px;width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:2px solid var(--marker,var(--clay));
}
.letter-item:hover::before{background:var(--marker,var(--clay));}
.letter-date{font-size:0.76rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:8px;}
.letter-item h3{font-size:1.35rem;font-weight:500;margin-bottom:8px;}
.letter-item a.title-link:hover h3{color:var(--marker,var(--clay-deep));}
.letter-item p{margin:0 0 12px;color:var(--ink-soft);max-width:56ch;font-size:0.98rem;}
.letter-item a.read{font-size:0.9rem;font-weight:500;color:var(--marker-deep,var(--moss-deep));border-bottom:1px solid transparent;}
.letter-item a.read:hover{border-color:currentColor;}

.letter-item.ghost{padding-block:22px;}
.letter-item.ghost::before{background:var(--bg);border-color:var(--ink-faint);}
.letter-item.ghost h3{font-size:1.1rem;font-style:italic;font-family:'Newsreader',serif;font-weight:500;color:var(--ink-faint);margin-bottom:4px;}
.letter-item.ghost p{margin:0;color:var(--ink-faint);font-size:0.92rem;}

.next-month{
  margin-top:30px;padding:22px 26px;border-radius:20px;background:var(--panel);
  display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--ink-faint);
  font-size:0.92rem;font-weight:500;
}

/* ---------- LETTER PAGE ---------- */
.letter-page{padding-block:clamp(30px,5vw,54px) clamp(60px,8vw,100px);}
.letterhead{text-align:center;margin-bottom:clamp(30px,5vw,48px);}
.letterhead .mark{width:70px;margin:0 auto 18px;}
.letterhead .eyebrow{display:block;font-size:0.78rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px;}
.letterhead h1{font-size:clamp(1.9rem,3.6vw,2.6rem);}
.letter-body{font-size:1.08rem;color:var(--ink);}
.letter-body p{margin:0 0 1.3em;max-width:62ch;}
.letter-body > *:last-child{margin-bottom:0;}
.letter-body .epigraph{
  font-family:'Newsreader',serif;font-style:italic;font-weight:500;
  font-size:1.2rem;color:var(--ink-soft);max-width:56ch;margin:0 0 1.6em;
  padding-left:18px;border-left:2px solid var(--line);
}
.letter-body ol{margin:0 0 1.3em;padding-left:1.3em;max-width:60ch;}
.letter-body ol li{margin-bottom:0.5em;}
.letter-body ol li:last-child{margin-bottom:0;}
.letter-body .stage{
  font-weight:600;font-size:0.78rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-faint);margin:2.4em 0 1em;padding-top:1.6em;border-top:1px solid var(--line);
  max-width:none;
}
.letter-body .divider{
  text-align:center;font-size:0.85rem;font-weight:500;color:var(--ink-faint);
  letter-spacing:0.02em;margin:1.8em 0;font-style:italic;font-family:'Newsreader',serif;
}
.signoff{margin-top:2.2em;font-family:'Newsreader',serif;font-style:italic;font-weight:500;font-size:1.15rem;color:var(--ink);}
.signoff.small-gap{margin-top:1.4em;}

.letter-nav{
  margin-top:clamp(48px,7vw,72px);
  padding-top:clamp(24px,4vw,32px);
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
}
.letter-nav a{font-size:0.92rem;font-weight:500;color:var(--ink-soft);}
.letter-nav a:hover{color:var(--clay-deep);}
.letter-nav .to-archive{font-weight:600;color:var(--ink);}
.letter-nav span.lbl{display:block;font-size:0.74rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-faint);margin-bottom:4px;}

/* ---------- FOOTER ---------- */
footer{padding:36px 0 60px;text-align:center;color:var(--ink-faint);font-size:0.85rem;}
footer .brand{justify-content:center;margin-bottom:14px;}
footer .brand img, footer .brand svg{height:30px;}

@media (max-width:720px){
  .panels{grid-template-columns:1fr;}
  .letter-nav{flex-direction:column;}
}