:root{
  --kraft:#E8DCC8;
  --sheet:#F4ECDC;
  --ink:#12141A;
  --prussian:#1B2838;
  --gold:#C4A35A;
  --gold-deep:#8C7030;
  --mute:#5A5346;
  --rule:#C9B99A;
  --paper:#FBF6EA;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--kraft);
  color:var(--ink);
  font:18px/1.6 "Source Serif 4",Georgia,serif;
}
a{color:inherit}
svg{max-width:100%;display:block}
.grain{
  pointer-events:none;position:fixed;inset:0;z-index:50;opacity:.042;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.wrap{width:min(1080px,calc(100% - 32px));margin:0 auto}
.dateline{
  background:var(--prussian);
  color:var(--gold);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:8px 0;
}
.dateline .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.nameplate{
  text-align:center;
  padding:28px 0 8px;
  border-bottom:3px double var(--ink);
}
.nameplate a{text-decoration:none}
.nameplate .flag{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);
}
.nameplate h1.word{
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(40px,8vw,84px);
  line-height:.9;
  margin:8px 0 6px;
  font-weight:400;
}
.nameplate .deck{
  font-style:italic;
  color:var(--mute);
  margin:0 0 10px;
}
.folio{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 0 18px;
  border-bottom:1px solid var(--ink);
}
.folio a{text-decoration:none;border-bottom:1px solid transparent}
.folio a:hover{border-bottom-color:var(--gold-deep)}
.lede{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:36px;
  padding:36px 0 20px;
  align-items:start;
}
.kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.lede h2{
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(32px,4.6vw,52px);
  line-height:1.05;
  font-weight:400;
  margin:8px 0 16px;
}
.lede .drop{
  font-size:20px;
  max-width:38em;
}
.lede .drop::first-letter{
  font-family:"Libre Caslon Display",Georgia,serif;
  float:left;
  font-size:78px;
  line-height:.8;
  padding-right:10px;
  color:var(--prussian);
}
.colophon{
  background:var(--prussian);
  color:var(--sheet);
  padding:18px;
  min-height:280px;
}
h2,h3{font-family:"Libre Caslon Display",Georgia,serif;font-weight:400}
.sec{padding:52px 0}
.sec h2{font-size:clamp(28px,4vw,42px);margin:8px 0 14px}
.rule{height:0;border-top:1px solid var(--ink);margin:0}
.letters{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:8px 0 18px;
  scroll-snap-type:x mandatory;
}
.letter{
  min-width:min(320px,80vw);
  background:var(--sheet);
  border:1px solid var(--rule);
  padding:18px;
  scroll-snap-align:start;
}
.letter p{margin:0 0 12px}
.letter .from{font-size:13px;color:var(--mute)}
.table-wrap{overflow-x:auto}
table.jobs{
  width:100%;
  border-collapse:collapse;
  background:var(--sheet);
}
table.jobs th,table.jobs td{
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
table.jobs th{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--prussian);
  color:var(--gold);
}
table.jobs td:first-child{font-family:"Libre Caslon Display",Georgia,serif;font-size:22px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.edition{counter-reset:ed}
.edition article{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid var(--rule);
}
.edition .n{
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:36px;
  color:var(--gold-deep);
  line-height:1;
}
.faq details{border-bottom:1px solid var(--rule);padding:12px 0}
.faq summary{cursor:pointer;font-weight:600}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.box{background:var(--sheet);border:1px solid var(--rule);padding:20px}
label{display:block;font-size:13px;margin:8px 0 4px}
input,textarea{width:100%;font:inherit;padding:9px 11px;border:1px solid var(--rule);background:var(--paper)}
button.send{
  margin-top:12px;background:var(--prussian);color:var(--gold);
  border:0;padding:11px 16px;font:inherit;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;font-size:13px;
}
.foot{
  background:var(--prussian);
  color:#d8cfc0;
  text-align:center;
  padding:40px 16px 22px;
  font-size:15px;
}
.foot a{color:var(--gold)}
.foot h3{color:var(--sheet);font-size:28px;margin:0 0 8px}
.foot .stack p{margin:0 0 6px}
.foot .legal{margin-top:18px;padding-top:14px;border-top:1px solid #334155;font-size:13px}
.reveal{animation:shift .65s ease both}
.d1{animation-delay:.05s}.d2{animation-delay:.12s}.d3{animation-delay:.2s}
@keyframes shift{from{transform:translateY(6px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none}}
@media (max-width:800px){
  .lede,.cols2,.contact{grid-template-columns:1fr}
  .lede h2{font-size:30px}
  .nameplate h1.word{font-size:42px}
  table.jobs td:first-child{font-size:18px}
}