/* Citadel Fitness: the newsletter on the website.
 *
 * Marketing mode, the same commitment as index, pricing and about: dark
 * ground, Sora for display, ember for the one accent. Colour, easing and
 * the type stack come from tokens.css, so a change there reaches this.
 *
 * A file rather than a <style> block, because every page under
 * /newsletter/ is generated and there are as many of them as there are
 * letters. Inlining would ship the same two hundred lines into each one and
 * defeat the browser cache on the second article somebody reads.
 */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--ink900);
  color: var(--ink100);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }

.head, .letter-head { padding: 64px 0 8px; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--primary); margin: 0 0 14px;
}
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

h1 {
  font-family: var(--font-display);
  font-weight: 800; font-size: clamp(34px, 6vw, 52px);
  line-height: 1.04; letter-spacing: -0.03em; color: var(--white);
  margin: 0 0 18px; text-wrap: balance;
}

.standfirst { font-size: 19px; color: var(--ink300); margin: 0; text-wrap: pretty; }

p { margin: 0 0 17px; text-wrap: pretty; }
strong { color: var(--white); font-weight: 600; }
a { color: var(--primary); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 3px; }

/* The date and the reading time, under the standfirst. Quiet: they are
   what you check, not what you came for. */
.letter-meta {
  margin: 22px 0 0;
  color: var(--ink500);
  font-size: 14.5px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
}

.letter-body { padding: 36px 0 8px; }
.letter-body p { color: var(--ink300); }

/* The listing. One rule down the left of each card, the same device the
   about page uses for its refusals, so the two pages are recognisably the
   same site rather than two templates that happen to share a palette. */
.letter-list {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}

.letter-card a {
  display: block;
  border-left: 2px solid var(--border);
  padding: 20px 0 20px 20px;
  color: inherit;
  text-decoration: none;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
  border-radius: 0 8px 8px 0;
}
.letter-card a:hover,
.letter-card a:focus-visible {
  border-left-color: var(--primary);
  background: var(--ink800);
}

.letter-card-cat {
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink500); margin: 0 0 8px;
}
.letter-card h2 {
  font-family: var(--font-display);
  font-weight: 700; font-size: 22px; letter-spacing: -0.02em;
  color: var(--white); margin: 0 0 8px; text-wrap: balance;
}
.letter-card-sum { color: var(--ink300); font-size: 16px; margin: 0 0 10px; }
.letter-card-meta {
  margin: 0; color: var(--ink500); font-size: 14px;
  display: flex; flex-wrap: wrap; gap: 9px; align-items: baseline;
}

.letter-empty { margin-top: 44px; color: var(--ink300); }

/* The one thing being sold on a page whose job is to be read. Set apart
   rather than dropped into the middle of the letter, because an invitation
   inside an article is an advert and one at the end of it is an offer. */
.letter-cta {
  margin: 48px 0 0;
  padding: 26px 24px;
  background: var(--ink800);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.letter-cta h2 {
  font-family: var(--font-display);
  font-weight: 800; font-size: 21px; letter-spacing: -0.02em;
  color: var(--white); margin: 0 0 10px; text-wrap: balance;
}
.letter-cta p { color: var(--ink300); font-size: 16px; }
.letter-cta p:last-child { margin-bottom: 0; }

.btn {
  display: inline-block;
  margin-top: 4px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--ink900);
  font-weight: 700;
  text-decoration: none;
  transition: transform 140ms var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.letter-back { padding: 36px 0 80px; margin: 0; }

main.wrap { padding-bottom: 60px; }

@media (max-width: 620px) {
  .head, .letter-head { padding-top: 34px; }
  .standfirst { font-size: 17px; }
  .letter-card h2 { font-size: 20px; }
  .letter-card a { padding-left: 16px; }
  .letter-cta { padding: 20px 18px; }
}