/* Fivemile Software — one stylesheet. Tokens first; every component below uses them. */

:root{
  --ink:#1e2320;
  --ink-alt:#181c19;
  --panel:#232925;
  --cream:#f0e8d6;
  --brass:#c9a45c;
  --brass-hi:#e0bd78;
  --ember:#a8452c;
  --indigo:#233a52;
  --fleur:#2a322c;

  --rule:rgba(240,232,214,.22);
  --rule-soft:rgba(240,232,214,.18);
  --rule-faint:rgba(240,232,214,.14);
  --dim-90:rgba(240,232,214,.9);
  --dim-75:rgba(240,232,214,.75);
  --dim-72:rgba(240,232,214,.72);
  --dim-70:rgba(240,232,214,.7);
  --dim-68:rgba(240,232,214,.68);
  --dim-62:rgba(240,232,214,.62);
  --dim-60:rgba(240,232,214,.6);
  --dim-55:rgba(240,232,214,.55);
  --dim-50:rgba(240,232,214,.5);
  --dim-45:rgba(240,232,214,.45);
  --dim-42:rgba(240,232,214,.42);
  --dim-35:rgba(240,232,214,.35);

  --display:"Bevan",Georgia,serif;
  --serif:"Playfair Display",Georgia,serif;
  --gothic:"Archivo Narrow","Archivo Narrow Fallback",sans-serif;

  --wrap:1180px;
  --pad:52px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--ink)}
body{color:var(--cream);font-family:var(--gothic);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
figure{margin:0}
h1,h2,h3,h4{margin:0}
p{margin:0}
a{color:var(--brass);text-decoration:none}
a:hover{color:var(--brass-hi)}
::selection{background:rgba(168,69,44,.4)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;min-height:100vh}
.grayscale{filter:grayscale(1) contrast(1.08)}

/* — small type helpers — */
.kicker{font:600 11px/1 var(--gothic);letter-spacing:.3em;text-transform:uppercase;color:var(--brass)}
.kicker-sm{font:600 10.5px/1 var(--gothic);letter-spacing:.26em;text-transform:uppercase;color:var(--brass)}
.kicker-xs{font:600 9.5px/1 var(--gothic);letter-spacing:.26em;text-transform:uppercase;color:var(--brass)}
.fr{font:400 12px/1 var(--serif);font-style:italic;color:var(--dim-45)}
.hair{height:1px;flex:1;background:var(--rule)}
.dia{width:7px;height:7px;background:var(--brass);transform:rotate(45deg);flex:none}
.dia--sm{width:5px;height:5px;background:var(--dim-35)}
.dia--lg{width:9px;height:9px}
.dia--ember{background:var(--ember)}
.dia--muted{width:6px;height:6px;background:var(--dim-42)}

/* — masthead — */
.masthead{display:flex;align-items:center;gap:24px;padding:20px var(--pad);border-bottom:1px solid var(--rule)}
.masthead__brand{display:flex;align-items:baseline;gap:12px;margin-right:auto;color:var(--cream)}
.masthead__brand:hover{color:var(--cream)}
.brand__mark{font:400 19px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.brand__fr{font:400 10px/1 var(--serif);font-style:italic;letter-spacing:.06em;color:var(--dim-50)}
.masthead__link{font:400 11px/1 var(--gothic);letter-spacing:.22em;text-transform:uppercase;color:var(--dim-70)}
.masthead__link:hover{color:var(--brass)}
.masthead__link--current{font-weight:500;color:var(--cream);border-bottom:1px solid rgba(240,232,214,.4);padding-bottom:3px}
.masthead__link--mail{color:var(--brass);border-bottom:1px solid rgba(201,164,92,.5);padding-bottom:3px}

/* — hero — */
.hero{padding:74px var(--pad) 58px;position:relative;overflow:hidden}
.hero__fleur{position:absolute;top:-210px;left:47%;font-family:"Noto Sans Symbols 2","Segoe UI Symbol","Apple Symbols",serif;font-size:1180px;line-height:.78;color:var(--fleur);pointer-events:none;user-select:none;z-index:0}
.hero__inner{position:relative;z-index:1}
.hero__kicker{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.display-1{font:400 76px/.94 var(--display);text-transform:uppercase;letter-spacing:.005em;max-width:1000px}
.hero__lede{font:400 24px/1.4 var(--serif);font-style:italic;margin:28px 0 26px;max-width:820px;color:rgba(240,232,214,.85)}
.hero__body{font:400 16.5px/1.7 var(--gothic);max-width:620px;color:var(--dim-70)}

.ornament-row{display:flex;align-items:center;gap:12px;padding:0 var(--pad) 34px}

/* — the work — */
.work{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);scroll-margin-top:12px}
.work__cell{padding:32px 26px 36px;border-right:1px solid var(--rule-faint)}
.work__cell:first-child{padding-left:var(--pad)}
.work__cell:last-child{padding-right:var(--pad);border-right:0}
.work__num{font:400 46px/1 var(--serif);color:var(--ember);margin-bottom:16px}
.work__title{font:400 20px/1.2 var(--display);text-transform:uppercase;margin-bottom:10px}
.work__gloss{font:400 11px/1 var(--serif);font-style:italic;color:var(--brass);margin:-4px 0 10px}
.work__body{font:400 14px/1.65 var(--gothic);color:var(--dim-70)}

/* — landings + photograph — */
.split{display:grid;grid-template-columns:1fr 380px;gap:48px;padding:56px var(--pad) 60px;align-items:start;scroll-margin-top:12px}
.section-sub{font:400 13px/1 var(--serif);font-style:italic;color:var(--dim-45);margin:6px 0 26px}
.stations{border-left:1px solid rgba(240,232,214,.28);padding-left:34px;margin-left:5px;display:flex;flex-direction:column;gap:30px}
.station{position:relative}
.station__dot{position:absolute;left:-38px;top:8px}
.station__mile{font:400 10.5px/1 var(--gothic);letter-spacing:.22em;text-transform:uppercase;color:var(--dim-50);margin-bottom:7px}
.station--last .station__mile{color:var(--brass)}
.station__title{font:700 20px/1.25 var(--serif);margin-bottom:6px}
.station__body{font:400 14.5px/1.6 var(--gothic);color:var(--dim-70);max-width:560px}
.figure__img{width:100%;height:462px;object-fit:cover;border:1px solid var(--rule)}
.figure__cap{margin-top:10px;font:400 10px/1.5 var(--gothic);letter-spacing:.14em;text-transform:uppercase;color:var(--dim-45)}

/* — cartouche (concerning the name) — */
.cartouche-wrap{padding:0 var(--pad) 60px}
.cartouche{border:1px solid rgba(240,232,214,.28);padding:5px}
.cartouche__inner{border:1px solid var(--rule-soft);padding:30px 34px 34px}
.cartouche__head{display:flex;align-items:baseline;gap:12px;margin-bottom:24px}
.cartouche__head .fr{white-space:nowrap}
.cartouche__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:34px 44px;align-items:start}
.prose-serif{font:400 14.5px/1.65 var(--serif);color:rgba(240,232,214,.8)}
.note{font:400 13.5px/1.6 var(--gothic);color:var(--dim-68)}
.note + .note{margin-top:11px;color:var(--dim-62)}

/* — route diagram — */
.route{border-top:1px solid var(--rule-soft);padding-top:22px}
.route__title{margin-bottom:12px}
.route__body{position:relative}
.route__spine{position:absolute;left:6px;top:14px;bottom:14px;width:1px;background:var(--rule)}
.route__grid{position:relative;display:grid;grid-template-columns:13px 1fr;column-gap:13px}
.route__leg{font:400 11px/1 var(--serif);font-style:italic;color:var(--dim-42);padding:7px 0 5px}
.route__tick{display:flex;align-items:center;justify-content:center;height:21px}
.route__stop{display:flex;align-items:center;height:21px;font:400 10.5px/1 var(--gothic);letter-spacing:.16em;text-transform:uppercase;color:var(--dim-60)}
.route__stop--end{font-weight:500;color:var(--cream)}

/* — who runs it — */
.principal{display:grid;grid-template-columns:420px 1fr;gap:56px;padding:60px var(--pad) 64px;border-bottom:1px solid var(--rule);align-items:start;scroll-margin-top:12px}
.principal__figure{margin:0}
.principal__img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--rule)}
.principal__img--empty{background:repeating-linear-gradient(135deg,#2b322c 0 8px,#343c35 8px 16px);display:flex;align-items:flex-end;padding:20px}
.principal__img--empty span{font:400 9.5px/1.5 ui-monospace,Menlo,monospace;letter-spacing:.05em;text-transform:uppercase;color:#9aa08f}
.principal__name{font:700 44px/1.08 var(--serif);letter-spacing:-.015em;margin-bottom:8px}
.placeholder-name{text-decoration:underline;text-decoration-style:dashed;text-decoration-color:var(--brass);text-underline-offset:8px}
.principal__role{font:400 11px/1 var(--gothic);letter-spacing:.22em;text-transform:uppercase;color:var(--dim-50);margin-bottom:26px}
.principal__lede{font:400 18.5px/1.7 var(--serif);margin-bottom:18px;max-width:620px;color:rgba(240,232,214,.88)}
.principal__body{font:400 15.5px/1.7 var(--gothic);margin-bottom:30px;max-width:600px;color:var(--dim-70)}
.principal__facts{display:flex;align-items:center;gap:18px;padding-top:22px;border-top:1px solid var(--rule-soft);flex-wrap:wrap}
.principal__fact{font:400 10.5px/1 var(--gothic);letter-spacing:.2em;text-transform:uppercase;color:var(--dim-60)}
.principal__mail{font:400 10.5px/1 var(--gothic);letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid rgba(201,164,92,.45);padding-bottom:3px}
.teaser-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.teaser-head__all{font:400 10.5px/1 var(--gothic);letter-spacing:.16em;text-transform:uppercase;color:var(--dim-55)}
.teaser{display:block;padding:12px 0;border-top:1px solid var(--rule-soft);color:var(--cream);font:700 17.5px/1.35 var(--serif)}
.teaser:last-child{border-bottom:1px solid var(--rule-soft)}
.teaser:hover{color:var(--brass)}

/* — send word — */
.sendword{background:var(--indigo);color:var(--cream);padding:64px var(--pad) 68px;display:grid;grid-template-columns:1fr;gap:56px;align-items:start}
.sendword--split{grid-template-columns:1fr 420px}
.who{display:flex;gap:22px;align-items:flex-start}
.who__avatar{width:118px;height:118px;flex:none;border-radius:50%;object-fit:cover;border:1px solid rgba(240,232,214,.3)}
.who__avatar--empty{background:repeating-linear-gradient(135deg,#1d3247 0 6px,#26405b 6px 12px)}
.who__name{font:700 22px/1.2 var(--serif);margin-bottom:3px}
.who__role{font:400 10.5px/1 var(--gothic);letter-spacing:.2em;text-transform:uppercase;color:var(--dim-55);margin-bottom:12px}
.who__body{font:400 14px/1.65 var(--gothic);color:var(--dim-75)}
.sendword__aside-note{font:400 13.5px/1.6 var(--serif);font-style:italic;margin-bottom:14px;color:var(--dim-55)}
.teaser--onblue{border-top-color:rgba(240,232,214,.22)}
.teaser--onblue:last-child{border-bottom-color:rgba(240,232,214,.22)}
.sendword--tight{padding:56px var(--pad) 60px;border-top:1px solid var(--rule)}
.sendword__head{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.display-2{font:400 58px/.96 var(--display);text-transform:uppercase;margin-bottom:20px;max-width:780px}
.display-3{font:400 46px/.98 var(--display);text-transform:uppercase;margin-bottom:18px;max-width:700px}
.sendword__mail{display:inline-block;font:400 23px/1 var(--serif);color:var(--cream);border-bottom:1px solid rgba(240,232,214,.45);padding-bottom:6px;margin-bottom:20px}
.sendword__mail:hover{color:#fff}
.sendword__note{font:400 14px/1.7 var(--gothic);max-width:480px;color:var(--dim-75)}

/* — footer — */
.site-foot{display:flex;align-items:center;gap:18px;padding:18px var(--pad);border-top:1px solid var(--rule-soft);flex-wrap:wrap}
.site-foot__item{font:400 11px/1 var(--gothic);letter-spacing:.22em;text-transform:uppercase;color:var(--dim-55)}
a.site-foot__item{margin-right:auto}
a.site-foot__item:hover{color:var(--brass)}
.site-foot__orn{color:var(--brass)}
.site-foot__orn--dim{color:var(--dim-35)}

/* — dispatches index — */
.index-head{padding:64px var(--pad) 40px;display:flex;flex-wrap:wrap;gap:28px 56px;align-items:flex-end;border-bottom:1px solid var(--rule)}
.index-head__main{flex:1 1 420px;min-width:0}
.index-head__stand{flex:1 1 260px;max-width:340px;font:400 17px/1.45 var(--serif);font-style:italic;margin-bottom:8px;color:var(--dim-75)}
.display-index{font:400 clamp(38px,7.5vw,84px)/.92 var(--display);text-transform:uppercase;letter-spacing:.005em}
.index-body{display:grid;grid-template-columns:1fr 260px}
.index-list{border-right:1px solid var(--rule-soft)}
.dispatch{display:grid;grid-template-columns:124px 1fr;gap:26px;padding:26px 44px 28px var(--pad);color:var(--cream);border-bottom:1px solid var(--rule-soft)}
.dispatch:hover{background:var(--panel);color:var(--cream)}
.dispatch:last-child{border-bottom:0}
.dispatch--lead{padding:38px 44px 40px var(--pad)}
.dispatch__no{font:500 11px/1 var(--gothic);letter-spacing:.18em;text-transform:uppercase;color:var(--dim-60);margin-bottom:8px}
.dispatch--lead .dispatch__no{display:flex;align-items:center;gap:9px;color:var(--brass);margin-bottom:10px}
.dispatch__facts{font:400 10.5px/1.6 var(--gothic);letter-spacing:.12em;text-transform:uppercase;color:var(--dim-55)}
.dispatch__title{font:700 25px/1.2 var(--serif);margin-bottom:8px;max-width:600px}
.dispatch--lead .dispatch__title{font-size:38px;line-height:1.12;margin-bottom:14px;max-width:640px}
.dispatch__stand{font:400 14px/1.6 var(--gothic);color:rgba(240,232,214,.65);max-width:600px}
.dispatch--lead .dispatch__stand{font:400 17px/1.5 var(--serif);font-style:italic;color:var(--dim-75);max-width:620px;margin-bottom:14px}
.dispatch__more{font:500 11px/1 var(--gothic);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.rail{padding:38px var(--pad) 40px 30px}
.rail__list{display:flex;flex-direction:column;gap:9px;margin-bottom:34px}
.rail__row{display:flex;justify-content:space-between;font:400 12px/1 var(--gothic);letter-spacing:.14em;text-transform:uppercase;color:var(--dim-60)}
.rail__row span{color:var(--dim-35)}
.rail__years{display:flex;gap:14px;margin-bottom:34px}
.rail__year{font:400 12px/1 var(--gothic);letter-spacing:.14em;color:var(--dim-42)}
.rail__year--current{font-weight:500;color:var(--cream);border-bottom:1px solid rgba(240,232,214,.4);padding-bottom:3px}
.rail__note{border-top:1px solid var(--rule-soft);padding-top:18px}
.rail__note p{font:400 13.5px/1.65 var(--serif);font-style:italic;margin-bottom:12px;color:var(--dim-70)}
.rail__note a{font:400 13px/1 var(--gothic);letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid rgba(201,164,92,.45);padding-bottom:3px}

/* — a dispatch — */
.article-head{padding:56px var(--pad) 40px;border-bottom:1px solid var(--rule)}
.back{display:inline-block;font:500 11px/1 var(--gothic);letter-spacing:.24em;text-transform:uppercase;margin-bottom:26px}
.article-head__grid{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:end}
.article-head__meta{font:600 11px/1 var(--gothic);letter-spacing:.28em;text-transform:uppercase;color:var(--dim-50);margin-bottom:22px}
.article-title{font:700 62px/1.05 var(--serif);letter-spacing:-.015em;max-width:820px}
.article-head__stand{font:400 17px/1.45 var(--serif);font-style:italic;margin-bottom:6px;color:var(--dim-75)}
.article{display:grid;grid-template-columns:190px minmax(0,1fr);gap:48px;padding:44px var(--pad) 60px}
.article__rail{border-right:1px solid var(--rule-soft);padding-right:24px;display:flex;flex-direction:column;gap:22px}
.rail-block__label{margin-bottom:8px}
.rail-block__name{font:700 17px/1.25 var(--serif)}
.rail-block__lines{font:400 10.5px/1.5 var(--gothic);letter-spacing:.16em;text-transform:uppercase;color:var(--dim-45);margin-top:6px}
.rail-block__facts{font:400 11px/1.6 var(--gothic);letter-spacing:.16em;text-transform:uppercase;color:var(--dim-60)}
.article__body{max-width:700px}
.article__body p{font:400 18.5px/1.75 var(--serif);margin-bottom:22px;color:var(--dim-90)}
.article__body h2{font:600 12px/1 var(--gothic);letter-spacing:.28em;text-transform:uppercase;color:var(--brass);margin:38px 0 18px}
.article__body h3{font:700 26px/1.25 var(--serif);margin:32px 0 14px}
.article__body ul,.article__body ol{font:400 18.5px/1.75 var(--serif);color:var(--dim-90);padding-left:22px;margin:0 0 22px}
.article__body li{margin-bottom:8px}
.article__body a{border-bottom:1px solid rgba(201,164,92,.45)}
.article__body em{font-style:italic}
.article__body blockquote{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:26px 0;margin:0 0 30px}
.article__body blockquote p{font:400 27px/1.35 var(--serif);font-style:italic;color:var(--cream);margin:0}
.article__body img{margin:0 0 12px;border:1px solid var(--rule)}
.article__body > p:first-of-type::first-letter{float:left;font:400 76px/.72 var(--display);color:var(--brass);margin:6px 14px 0 0}
.endmark{display:flex;align-items:center;gap:12px;margin:0 0 34px}
.authorbox{border:1px solid rgba(240,232,214,.28);padding:5px}
.authorbox__inner{border:1px solid var(--rule-soft);padding:22px 24px 24px;display:flex;gap:20px;align-items:flex-start}
.authorbox__avatar{width:74px;height:74px;flex:none;border-radius:50%;object-fit:cover;border:1px solid var(--rule)}
.authorbox p{font:400 14px/1.65 var(--gothic);color:var(--dim-72)}
.nearby{border-top:1px solid var(--rule);padding:34px var(--pad) 44px}
.nearby__grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.nearby__item{display:block;border-top:1px solid var(--rule-soft);padding-top:14px;color:var(--cream)}
.nearby__item:hover{border-top-color:var(--brass);color:var(--cream)}
.nearby__label{font:400 10.5px/1 var(--gothic);letter-spacing:.18em;text-transform:uppercase;color:var(--dim-45);margin-bottom:9px}
.nearby__title{font:700 22px/1.25 var(--serif)}

/* — narrower screens — */
@media (max-width:1100px){
  .split{grid-template-columns:1fr;gap:36px}
  .principal{grid-template-columns:340px 1fr;gap:40px}
  .article{grid-template-columns:1fr;gap:28px}
  .article__rail{border-right:0;border-bottom:1px solid var(--rule-soft);padding-right:0;padding-bottom:22px;flex-direction:row;flex-wrap:wrap;gap:34px}
  .article-title{font-size:48px}
  .figure__img{height:360px}
}
@media (max-width:900px){
  :root{--pad:28px}
  .masthead{flex-wrap:wrap;gap:16px 20px}
  .display-1{font-size:56px}
  .hero__fleur{font-size:760px;top:-120px}
  .hero__lede{font-size:21px}
  .work{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work__cell:nth-child(2){border-right:0}
  .work__cell:nth-child(2n){padding-right:var(--pad)}
  .work__cell:nth-child(2n+1){padding-left:var(--pad)}
  .index-body,.nearby__grid,.sendword,.sendword--split,.principal{grid-template-columns:1fr}
  .principal__name{font-size:34px}
  .principal__figure{max-width:420px}
  .index-list{border-right:0;border-bottom:1px solid var(--rule-soft)}
  .rail{padding:32px var(--pad) 40px}
  .article-head__grid{grid-template-columns:1fr;gap:24px}
  .article-title{font-size:40px}
  .display-2,.display-3{font-size:38px}
}
@media (max-width:620px){
  .work{grid-template-columns:1fr}
  .cartouche__inner{padding:22px 20px 26px}
  .route__stop{letter-spacing:.12em}
  .who{flex-direction:column;gap:16px}
  .dispatch,.dispatch--lead{padding-right:var(--pad)}
  .index-head{gap:20px 32px}
  .work__cell{border-right:0;border-bottom:1px solid var(--rule-faint);padding-left:var(--pad);padding-right:var(--pad)}
  .dispatch{grid-template-columns:1fr;gap:12px}
  .display-1{font-size:42px}
  .article__body p,.article__body ul,.article__body ol{font-size:17px}
}