:root{
  --paper:#EDEFE9;
  --ink:#232A20;
  --moss:#6C7365;
  --rule:#D2D7C9;
  --tint:#E5E7DC;
  --butterfly:#C39A22;
  --measure:34rem;
  --rail:13rem;
  --gap:3rem;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-size:1.125rem;
  font-weight:300;
  line-height:1.72;
  font-optical-sizing:auto;
}

img{display:block;width:100%;height:auto;}
a{color:inherit;text-decoration-color:var(--butterfly);text-underline-offset:.18em;}
:focus-visible{outline:2px solid var(--butterfly);outline-offset:3px;}

/* ---------- masthead ---------- */

.masthead{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1.5rem;max-width:64rem;margin:0 auto;padding:1.8rem 1.5rem;
}
.masthead a{text-decoration:none;}
.wordmark{
  font-family:"Instrument Serif",Georgia,serif;
  font-size:1.5rem;letter-spacing:.13em;margin:0;font-weight:400;
}
.nav{display:flex;gap:1.6rem;font-size:.95rem;font-style:italic;color:var(--moss);}
.nav a:hover{color:var(--ink);}

/* ---------- home ---------- */

.intro{max-width:46rem;margin:0 auto;padding:3.5rem 1.5rem 0;text-align:center;}
.intro .lockup{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(3rem,9vw,5.4rem);line-height:1;margin:0;letter-spacing:-.01em;
}
.intro .tagline{
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;
  font-size:clamp(1.2rem,3.2vw,1.5rem);color:var(--moss);margin:1rem 0 0;
}

.banner{max-width:70rem;margin:3rem auto 0;padding:0 1.5rem;}
.banner img{aspect-ratio:2/1;object-fit:cover;}

.credo{
  max-width:34rem;margin:3.5rem auto 0;padding:0 1.5rem;
  font-size:1.28rem;line-height:1.62;text-align:center;
}

.journeys{max-width:60rem;margin:0 auto;padding:4.5rem 1.5rem 2rem;}
.journeys h2{
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;
  font-size:1.6rem;margin:0 0 2rem;color:var(--moss);
}
.journeys h2::after{
  content:"";display:block;width:100%;height:1px;background:var(--rule);margin-top:1rem;
}

.trip{display:block;text-decoration:none;margin-bottom:4rem;}
.trip img{aspect-ratio:3/2;object-fit:cover;}
.trip h3{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(1.9rem,4.5vw,2.5rem);line-height:1.1;margin:1.4rem 0 0;
}
.trip .meta{font-style:italic;font-size:.92rem;color:var(--moss);margin:.5rem 0 0;}
.trip .pull{margin:.9rem 0 0;max-width:38rem;}
.trip .more{
  display:inline-block;margin-top:.7rem;font-style:italic;
  color:var(--moss);border-bottom:1px solid var(--butterfly);
}
.trip:hover .more{color:var(--ink);}

/* ---------- article ---------- */

.opening{max-width:46rem;margin:0 auto;padding:3.5rem 1.5rem 0;text-align:center;}
h1{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(2.9rem,8vw,4.6rem);line-height:1.02;margin:0;letter-spacing:-.01em;
}
.standfirst{
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;
  font-size:clamp(1.25rem,3.4vw,1.6rem);line-height:1.35;
  color:var(--moss);margin:1.1rem auto 0;max-width:28ch;
}
.dateline{font-style:italic;font-size:.95rem;color:var(--moss);margin:2rem 0 0;}
.dateline::before{
  content:"";display:block;width:2.5rem;height:1px;
  background:var(--rule);margin:0 auto 1.6rem;
}

@media (prefers-reduced-motion:no-preference){
  .opening h1,.opening .standfirst,.opening .dateline,
  .intro .lockup,.intro .tagline{
    animation:settle .9s cubic-bezier(.22,.61,.36,1) both;
  }
  .opening .standfirst,.intro .tagline{animation-delay:.12s;}
  .opening .dateline{animation-delay:.24s;}
  @keyframes settle{from{opacity:0;transform:translateY(.5rem);}to{opacity:1;transform:none;}}
}

.hero{max-width:60rem;margin:3rem auto 0;padding:0 1.5rem;}

article{
  max-width:calc(var(--rail) + var(--gap) + var(--measure));
  margin:0 auto;padding:0 1.5rem 2rem;
}

.row{display:grid;grid-template-columns:var(--rail) var(--measure);column-gap:var(--gap);}
.rail{grid-column:1;}
.col{grid-column:2;}
.row.section{margin-top:3.4rem;}

p{margin:0 0 1.35em;}

.lede{font-size:1.32rem;line-height:1.6;margin-top:3.2rem;}
.lede::first-letter{
  color:var(--butterfly);font-family:"Instrument Serif",Georgia,serif;
  font-size:3.1em;float:left;line-height:.82;padding:.06em .1em 0 0;
}

.day{
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;
  font-size:1.75rem;line-height:1.15;margin:0 0 1.4rem;text-align:right;
}

figure{margin:0;}
figcaption{
  font-size:.86rem;font-style:italic;color:var(--moss);
  margin-top:.55rem;line-height:1.45;
}
.rail figcaption{text-align:right;}
.plate{margin:2.6rem 0 2.8rem;}
.rail figure{margin-bottom:1.6rem;}

.coda{background:var(--tint);margin-top:4rem;padding:2.6rem 0 1.6rem;}
.coda .inner{
  max-width:calc(var(--rail) + var(--gap) + var(--measure));
  margin:0 auto;padding:0 1.5rem 2rem;
}
.coda h2{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-style:italic;
  font-size:1.75rem;line-height:1.2;margin:0;text-align:right;
}

/* ---------- previous / next ---------- */

.adjacent{
  max-width:calc(var(--rail) + var(--gap) + var(--measure));
  margin:0 auto;padding:3rem 1.5rem;
  display:flex;justify-content:space-between;gap:2rem;
  border-top:1px solid var(--rule);
}
.adjacent a{text-decoration:none;font-style:italic;color:var(--moss);}
.adjacent a:hover{color:var(--ink);}
.adjacent .label{display:block;font-size:.8rem;letter-spacing:.08em;}
.adjacent .name{font-style:normal;font-size:1.05rem;color:var(--ink);}
.adjacent .none{color:var(--moss);opacity:.5;}

/* ---------- about ---------- */

.page{max-width:38rem;margin:0 auto;padding:3.5rem 1.5rem 4rem;}
.page h1{font-size:clamp(2.4rem,6vw,3.2rem);text-align:left;margin-bottom:2rem;}
.page img{margin:2.5rem 0;}

/* ---------- footer ---------- */

footer{
  text-align:center;padding:3rem 1.5rem 4rem;
  color:var(--moss);font-style:italic;font-size:.92rem;
  border-top:1px solid var(--rule);
}
footer .wordmark{font-style:normal;font-size:1.05rem;color:var(--ink);margin-bottom:.4rem;}
footer a{color:inherit;}

/* ---------- narrow screens ---------- */

@media (max-width:56rem){
  :root{--measure:100%;}
  .row{grid-template-columns:1fr;}
  .rail,.col{grid-column:1;}
  .day{text-align:left;margin-bottom:1.2rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule);}
  .rail figcaption{text-align:left;}
  .rail figure{margin:0 0 1.8rem;}
  .hero,.banner{padding:0;}
  .hero figcaption{padding:0 1.5rem;}
  .banner img{aspect-ratio:3/2;}
  .coda h2{text-align:left;margin-bottom:1.4rem;}
  .masthead{padding:1.4rem 1.5rem;}
  .nav{gap:1.2rem;}
  body{font-size:1.06rem;}
}