/* ==========================================================================
   BEYOND THE LINE — shared stylesheet
   Every page links to this one file. Change a colour here and it changes
   everywhere. You should not need to touch this file to publish an article.
   ========================================================================== */

:root{
  --paper:#F0D0C7;          /* salmon newsprint — the page */
  --sheet:#FBF5F2;          /* the printed sheet articles sit on */
  --ink:#16110F;            /* body text */
  --ink-2:#6A544D;          /* captions, datelines, labels */
  --pine:#1C4A43;           /* the single accent — links on hover, the split marks */
  --rule:rgba(22,17,15,.22);
  --wrap:64rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Newsreader",Georgia,serif;
  font-size:1.0625rem;
  line-height:1.65;
  font-optical-sizing:auto;
}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--pine);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}

/* utility face — datelines, labels, disciplines, numbers */
.mono{
  font-family:"Space Mono",ui-monospace,monospace;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.7rem;
  color:var(--ink-2);
}

/* ---------------------------------------------------------------- top bar */
.bar{border-bottom:1px solid var(--rule)}
.bar .wrap{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;padding-top:1.05rem;padding-bottom:1.05rem;flex-wrap:wrap;
}
.bar nav{display:flex;gap:1.4rem}
.bar a{text-decoration:none}
.bar a:hover{color:var(--pine);text-decoration:underline;text-underline-offset:.25em}

/* homepage-only variant — flows straight into the dark video hero below it,
   so there's no colour break where the bar meets the masthead */
.bar.bar-dark{background:var(--ink);border-bottom-color:rgba(251,245,242,.15)}
.bar.bar-dark .mono{color:var(--sheet)}
.bar.bar-dark a{color:var(--sheet)}
.bar.bar-dark a:hover{color:var(--paper)}

/* --------------------------------------------------------------- masthead */
.masthead{border-bottom:2px solid var(--ink);padding:clamp(2.6rem,8vw,5.5rem) 0 clamp(1.6rem,4vw,2.6rem)}

/* masthead with the hero video behind it — video sits full-bleed, a dark
   scrim keeps the wordmark readable no matter what's in the footage, and
   the text switches to light-on-dark for the same reason. */
.masthead.has-video{
  position:relative;overflow:hidden;padding:0;
  min-height:min(78vh,42rem);
  display:flex;align-items:flex-end;
  background:var(--ink); /* shows briefly before the video paints, no white flash */
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(22,17,15,.5) 0%,
    rgba(22,17,15,.28) 45%,
    rgba(22,17,15,.72) 100%);
}
.hero-text{
  position:relative;z-index:2;
  padding:clamp(2.4rem,7vw,4rem) 1.5rem clamp(2.2rem,6vw,3.4rem);
  color:var(--sheet);
}
.hero-text .wordmark{color:var(--sheet)}
.hero-text .tagline{color:var(--sheet)}
.hero-text .dateline{border-top-color:rgba(251,245,242,.3)}
.hero-text .dateline .mono{color:var(--sheet);opacity:.82}
/* when the video carries its own title card, only the info strip shows —
   drop its top border/padding since there's no wordmark above it to divide from */
.hero-text .dateline.dateline-solo{border-top:none;padding-top:0;margin-top:0}

@media (max-width:30rem){
  .masthead.has-video{min-height:34rem}
}
.wordmark{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;
  font-size:clamp(3rem,13vw,8.5rem);
  line-height:.92;
  letter-spacing:-.025em;
  margin:0;
}
.wordmark em{font-style:italic}
.tagline{
  display:block;
  margin-top:clamp(.9rem,2.5vw,1.4rem);
  font-family:"Space Mono",ui-monospace,monospace;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:clamp(.62rem,1.9vw,.78rem);
  color:var(--ink);
}
.dateline{
  display:flex;gap:1.2rem;flex-wrap:wrap;
  margin-top:clamp(1.2rem,3vw,1.8rem);
  padding-top:.9rem;
  border-top:1px solid var(--rule);
}

/* ------------------------------------------------------- section headings */
.section-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;flex-wrap:wrap;
  margin:clamp(2.6rem,6vw,4rem) 0 0;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--rule);
}
.section-head h2{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;font-size:1.55rem;letter-spacing:-.01em;
  margin:0;
}

/* ------------------------------------------------------------- the archive
   One entry = the split marker (a single figure from the story) + the text.
   The figure is the thing that makes this read as endurance sport rather
   than as a blog: a time, a distance, an altitude, an age, a placing.        */
.entry{
  display:grid;
  grid-template-columns:9.5rem 1fr;
  gap:clamp(1.2rem,4vw,2.6rem);
  padding:clamp(1.6rem,4vw,2.2rem) 0;
  border-bottom:1px solid var(--rule);
  text-decoration:none;
}
.entry:hover h3{color:var(--pine)}
.entry:hover .split b{color:var(--pine)}
.split{border-left:2px solid var(--ink);padding-left:.85rem}
.split b{
  display:block;
  font-family:"Space Mono",ui-monospace,monospace;
  font-weight:700;
  font-size:clamp(1.15rem,3.4vw,1.5rem);
  line-height:1.1;
  letter-spacing:-.02em;
}
.split span{
  display:block;margin-top:.4rem;
  font-family:"Space Mono",ui-monospace,monospace;
  text-transform:uppercase;letter-spacing:.09em;
  font-size:.62rem;color:var(--ink-2);line-height:1.4;
}
.entry h3{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;
  font-size:clamp(1.5rem,4.2vw,2.1rem);
  line-height:1.12;letter-spacing:-.015em;
  margin:0 0 .55rem;
}
.entry p{margin:0 0 .6rem;max-width:52ch;color:var(--ink)}
.entry .mono{display:block}

@media (max-width:33rem){
  .entry{grid-template-columns:1fr;gap:.9rem}
}

/* ------------------------------------------------- the next generation
   Dormant until there are real interviews to put in it. See READ-ME-FIRST. */
.nextgen{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1.2rem,3vw,2rem);
  margin-top:2rem;
}
.card{
  background:var(--sheet);
  padding:1.3rem;
  text-decoration:none;
  display:flex;flex-direction:column;gap:.6rem;
}
.card:hover h3{color:var(--pine)}
.card img{aspect-ratio:4/5;object-fit:cover;margin-bottom:.3rem}
.card h3{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;font-size:1.4rem;line-height:1.1;margin:0;
}
.card p{margin:0;font-size:.95rem;line-height:1.55}

/* --------------------------------------------------------- reading sheets */
.sheet{
  background:var(--sheet);
  max-width:46rem;margin:0 auto;
  padding:clamp(2.5rem,7vw,5rem) clamp(1.4rem,5vw,4rem);
}
.sheet h1{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;
  font-size:clamp(2.2rem,6.5vw,3.7rem);
  line-height:1.04;letter-spacing:-.02em;
  margin:0 0 1.1rem;
}
.standfirst{
  font-size:1.2rem;line-height:1.5;color:var(--ink-2);
  margin:0 0 1.8rem;max-width:44ch;
}
.byline{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:.8rem 0;margin-bottom:2.2rem;
  display:flex;gap:1.2rem;flex-wrap:wrap;
}
.sheet p{margin:0 0 1.35rem;max-width:62ch;font-size:1.1rem;line-height:1.68}
.sheet h2{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;font-size:1.65rem;margin:2.6rem 0 1rem;
}
.sheet ul{margin:0 0 1.35rem;padding-left:1.2rem;max-width:62ch}
.sheet li{margin-bottom:.55rem;font-size:1.05rem}

/* article photography — full width within the sheet, own margin, caption
   in the same mono/label style used everywhere else on the site */
.sheet figure{margin:0 0 2rem;padding:0}
.sheet figure img{width:100%;display:block}
.sheet figcaption{
  margin-top:.6rem;
  font-family:"Space Mono",ui-monospace,monospace;
  text-transform:uppercase;letter-spacing:.09em;
  font-size:.68rem;color:var(--ink-2);
}
.sheet blockquote{
  margin:2.2rem 0;padding-left:1.2rem;
  border-left:2px solid var(--pine);
  font-family:"Instrument Serif",Georgia,serif;
  font-size:1.55rem;line-height:1.28;
}
.sheet blockquote cite{
  display:block;margin-top:.8rem;
  font-family:"Space Mono",ui-monospace,monospace;
  font-style:normal;text-transform:uppercase;
  letter-spacing:.09em;font-size:.65rem;color:var(--ink-2);
}
.pullstat{
  margin:2.4rem 0;padding:1.2rem 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.pullstat b{
  display:block;
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:2rem;letter-spacing:-.02em;line-height:1;
}
.pullstat span{
  display:block;margin-top:.6rem;
  font-size:.98rem;color:var(--ink-2);max-width:44ch;
}
.contact{border-top:1px solid var(--rule);margin-top:2.6rem;padding-top:1.6rem}
.contact a{border-bottom:1px solid var(--rule);text-decoration:none}
.contact a:hover{color:var(--pine)}

.back{max-width:46rem;margin:0 auto;padding:2.2rem 1.5rem 4rem}
.back a{text-decoration:none;border-bottom:1px solid var(--rule)}
.back a:hover{color:var(--pine)}

/* ----------------------------------------------------------------- footer */
footer{border-top:2px solid var(--ink);margin-top:clamp(3rem,8vw,5rem)}
footer .wrap{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:1.6rem;padding-bottom:2.6rem;
}
footer a{text-decoration:none;border-bottom:1px solid var(--rule)}
footer a:hover{color:var(--pine)}

/* ==========================================================================
   ADDITIONS — homepage restructure, Subscribe, article Subscribe/Related,
   Privacy/About page prose, nav Subscribe treatment.
   Everything below reuses the tokens and type scale already defined above.
   No new colours, no new fonts, no new border-radius, no shadows.
   ========================================================================== */

/* ---- Nav: Subscribe treatment (thin border, restrained) ---------------- */
.mono.nav-subscribe{
  border:1px solid currentColor;
  padding:.35em .8em;
  text-decoration:none;
}
.mono.nav-subscribe:hover{
  background:var(--pine);
  border-color:var(--pine);
  color:var(--sheet);
  text-decoration:none;
}
.bar.bar-dark .mono.nav-subscribe:hover{color:var(--ink)}

/* ---- Latest Story (homepage lead) --------------------------------------- */
.lead-story{
  margin:clamp(2.6rem,6vw,4rem) 0 0;
  padding-bottom:clamp(2.6rem,6vw,4rem);
  border-bottom:1px solid var(--rule);
}
.lead-story__grid{
  display:grid;
  gap:clamp(1.6rem,4vw,3rem);
  margin-top:1.4rem;
}
@media(min-width:52rem){
  .lead-story__grid{grid-template-columns:1.3fr 1fr;align-items:start}
}
.lead-story__media{display:block;text-decoration:none}
/* 4:5 chosen to fit this specific photograph (a portrait-orientation
   finish-line shot) without cropping the composition badly. If a future
   lead story uses a landscape image, this ratio should change with it. */
.lead-story__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.lead-story h3{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;
  font-size:clamp(1.8rem,4.4vw,2.9rem);
  line-height:1.06;letter-spacing:-.015em;
  margin:.9rem 0 .8rem;
}
.lead-story h3 a{text-decoration:none}
.lead-story h3 a:hover{color:var(--pine)}
.lead-story p{margin:0 0 1.1rem;max-width:44ch;color:var(--ink)}
.lead-story .mono{display:block;margin-bottom:.3rem}
.lead-story .more{
  display:inline-block;
  text-decoration:none;
  border-bottom:1px solid var(--rule);
}
.lead-story .more:hover{color:var(--pine);border-bottom-color:var(--pine)}

/* Latest Stories grid reuses .entry exactly as designed — no override here.
   On the homepage the grid is simply the two most recent .entry blocks that
   are not the lead. See index.html. */

/* ---- Subscribe (beehiiv wrapper) ---------------------------------------- */
/* Page background is already var(--paper), the same pink the beehiiv form
   is designed on, so the section needs no background colour of its own —
   only the same rule treatment used elsewhere on the site to read as a
   distinct section rather than a floating widget. */
.subscribe{
  margin:clamp(2.6rem,6vw,4rem) 0;
  padding:clamp(2rem,5vw,3.2rem) 0;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--rule);
}
.subscribe__intro{margin-bottom:1.6rem;max-width:44ch}
.subscribe__intro h2{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;font-size:clamp(1.4rem,3vw,1.9rem);
  margin:0 0 .5rem;
}
.subscribe__embed{min-height:200px}
@media(max-width:30rem){.subscribe__embed{min-height:280px}}
.subscribe__embed iframe{width:100% !important;border:0;display:block}
.subscribe__note{margin-top:1.1rem}

/* Article variant sits inside the reading sheet, so it is narrower and
   uses the sheet's own rule colour instead of the full-bleed page rule. */
.sheet .subscribe{
  border-top:1px solid var(--rule);
  border-bottom:none;
  padding:clamp(1.8rem,5vw,2.6rem) 0 0;
  margin:clamp(2.2rem,5vw,3rem) 0 0;
}

/* ---- Why Beyond The Line ------------------------------------------------- */
.mission{
  margin:clamp(2.6rem,6vw,4rem) 0;
  max-width:52ch;
}
.mission h2{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;font-size:clamp(1.5rem,3.4vw,2rem);
  margin:0 0 1rem;
}
.mission p{margin:0 0 1rem;font-size:1.05rem;line-height:1.6}
.mission .more{text-decoration:none;border-bottom:1px solid var(--rule)}
.mission .more:hover{color:var(--pine);border-bottom-color:var(--pine)}

/* ---- Related stories (article pages) ------------------------------------ */
.related{margin:clamp(2.2rem,5vw,3rem) 0 0}
.related h2{
  font-family:"Space Mono",ui-monospace,monospace;
  font-weight:400;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-2);
  margin:0 0 1.1rem;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--rule);
}
.related__grid{display:grid;gap:1.6rem}
@media(min-width:34rem){.related__grid{grid-template-columns:repeat(2,1fr)}}
.related__item{text-decoration:none;display:block}
.related__item img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  margin-bottom:.7rem;
}
.related__item .mono{display:block;margin-bottom:.4rem}
.related__item h3{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;font-size:1.25rem;line-height:1.15;
  margin:0 0 .4rem;
}
.related__item:hover h3{color:var(--pine)}
.related__item p{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink-2)}

/* ---- About / Editorial Standards / Privacy prose pages ------------------ */
.sheet .masthead-block{margin-bottom:clamp(2rem,5vw,3rem)}
.sheet .eyebrow{
  font-family:"Space Mono",ui-monospace,monospace;
  text-transform:uppercase;letter-spacing:.14em;
  font-size:.7rem;color:var(--ink-2);margin:0 0 .6rem;
}
.sheet .updated{margin-top:.6rem}
.editor{
  display:grid;gap:clamp(1.4rem,4vw,2.4rem);
  margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--rule);
}
@media(min-width:40rem){
  .editor:has(.editor__media){grid-template-columns:0.85fr 1.15fr;align-items:start}
}
.editor__media img{aspect-ratio:4/5;object-fit:cover}
.editor__name{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;font-size:1.5rem;margin:0 0 .3rem;
}
.standards-addendum{
  margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--rule);
}
.standards-addendum h2{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;font-size:1.5rem;margin:2rem 0 .9rem;
}
.standards-addendum h2:first-child{margin-top:0}