/* The reading pages: same paper and ink as the home page, none of the motion. */
:root{
  --flame: #C5341E;
  --coral: #FF5A3C;
  --paper: #FAFAF8;
  --soot:  #0C0C0C;
  --dim:   rgba(250,250,248,.62);
  --line:  rgba(250,250,248,.16);
  --face:  'Archivo', system-ui, sans-serif;
  --gut:   clamp(22px, 5vw, 56px);
  color-scheme: dark;
}
*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; background: var(--soot); }
body{
  margin: 0; background: var(--soot); color: var(--paper);
  font-family: var(--face); font-size: clamp(17px, 1.05vw, 18.5px); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover{ color: var(--coral); }
:focus-visible{ outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 2px; }

.bar{ padding: 22px var(--gut); display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.bar .mark{ font-weight: 900; letter-spacing: -.02em; text-decoration: none; font-size: 1.05rem; }
.bar .mark i{ font-style: normal; color: var(--flame); }
.bar nav{ display: flex; gap: 22px; font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; }
.bar nav a{ text-decoration: none; color: var(--dim); }
.bar nav a:hover, .bar nav a[aria-current="true"]{ color: var(--paper); }

main{ max-width: 720px; margin: 0 auto; padding: clamp(36px, 7vw, 96px) var(--gut) clamp(60px, 9vw, 120px); }
.kicker{ font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 0 0 18px; }
h1{
  font-size: clamp(2.1rem, 6.2vw, 3.9rem); line-height: .98; letter-spacing: -.03em; font-weight: 900;
  margin: 0 0 clamp(22px, 4vw, 40px); text-wrap: balance;
}
h1 i{ font-style: normal; color: var(--flame); }
.lede{ font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.45; color: var(--paper); margin: 0 0 clamp(36px, 5vw, 56px); }
h2{ font-size: clamp(1.45rem, 2.8vw, 1.9rem); line-height: 1.1; letter-spacing: -.02em; font-weight: 800; margin: clamp(44px, 6vw, 72px) 0 16px; }
h3{ font-size: 1.1rem; font-weight: 700; margin: 30px 0 8px; }
p{ margin: 0 0 18px; }
ul, ol{ padding-left: 1.2em; margin: 0 0 18px; }
li{ margin-bottom: 8px; }
.facts{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 32px;
  margin: 0 0 clamp(36px, 5vw, 56px); padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.facts dt{ font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.facts dd{ margin: 2px 0 0; font-weight: 700; }
.facts dd a{ text-decoration: none; }
.facts dd a:hover{ text-decoration: underline; }
@media (max-width: 520px){ .facts{ grid-template-columns: 1fr; } }
.cta{
  display: inline-flex; align-items: center; gap: 10px; margin: 10px 0 8px;
  background: var(--paper); color: var(--soot); text-decoration: none; font-weight: 800;
  padding: 14px 20px; border-radius: 999px;
}
.cta:hover{ background: var(--coral); color: var(--soot); }
.cta i{ width: 9px; height: 9px; border-radius: 50%; background: var(--flame); font-style: normal; }
.cta:hover i{ background: var(--soot); }
.aside{ color: var(--dim); font-size: .95rem; }
.timetable{ width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.timetable td{ padding: 10px 0; border-top: 1px solid var(--line); vertical-align: top; }
.timetable td:first-child{ width: 5.5em; font-variant-numeric: tabular-nums; color: var(--dim); }
.more{ margin-top: clamp(44px, 6vw, 72px); padding-top: 24px; border-top: 1px solid var(--line); }
.more p{ margin-bottom: 8px; }
footer{ padding: 30px var(--gut) 50px; color: var(--dim); font-size: .88rem; }
footer .links{ display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 14px; }
footer .links a{ text-decoration: none; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; }