/* ===========================================================================
   A Bunch of Assholes — stylesheet
   ---------------------------------------------------------------------------
   The page is a football field, end to end. The masthead IS the top end zone
   and the footer IS the bottom one — nine painted stripes at 42 degrees,
   goal lines facing the field, and the post itself a navy card sitting on
   the turf between them.

   Nine stripes and 42 degrees are the real Notre Dame end zone: nine per
   side, eighteen total, angled at the Dome, for 1842. No monogram, no
   shamrock — those are registered marks.

   Dark only. System fonts only. Nothing here can rot.
   =========================================================================== */

:root {
  --navy:      #0A1524;
  --navy-deep: #0C2340;
  --rule:      #1B3557;
  --rule-soft: #142943;

  --ink:      #E9E7E0;
  --ink-soft: #8FA0B5;

  --gold:      #C99700;
  --gold-lit:  #E6C463;
  --gold-deep: #8A6A17;

  --turf:       #17492B;
  --chalk:      rgba(255,255,255,0.55);
  --chalk-soft: rgba(255,255,255,0.20);
  --turf-ink:   rgba(255,255,255,0.72);

  --f-display: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Bold", sans-serif;
  --f-body:    Georgia, "Iowan Old Style", "Times New Roman", serif;
  --f-ui:      ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --gutter: 1.5rem;

  /* Both set by app.js. --yard is one yard in pixels, --stripe is the
     spacing that lands exactly nine stripes in a band. */
  --yard: 18px;
  --stripe: 26px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font: 400 1.0625rem/1.7 var(--f-body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wrap {
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

a { color: var(--gold-lit); text-underline-offset: 0.18em; }
a:hover { color: #F2D98A; }

:focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--gutter); top: 0.5rem; z-index: 10;
  background: var(--navy-deep); color: var(--ink);
  padding: 0.5rem 0.75rem; font-family: var(--f-ui);
}

/* --- the striped surfaces: masthead and footer --------------------------- */

.striped {
  background-color: var(--turf);
  background-image: repeating-linear-gradient(42deg,
    rgba(255,255,255,0.26) 0 2px,
    transparent 2px var(--stripe));
  position: relative;
}

.masthead {
  padding-block: 1.6rem 1.4rem;
  border-bottom: 3px solid var(--chalk);   /* the goal line */
}
.masthead-in {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.wordmark { color: inherit; text-decoration: none; display: block; }
.wordmark-main {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 5vw, 2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: #FFF;
}
.wordmark-sub {
  display: block; margin-top: 0.4rem;
  font-family: var(--f-ui); font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--turf-ink);
}

.nav {
  display: flex; gap: 1.25rem;
  font-family: var(--f-ui); font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.nav a { text-decoration: none; color: #FFF; }
.nav a:hover { text-decoration: underline; color: #FFF; }

/* The bottom end zone: an empty striped band with the goal line on top.
   Fixed height rather than ten scaled yards, so a long post can't inflate it
   into a wall of green. */
.endzone {
  height: 6.5rem;
  border-top: 3px solid var(--chalk);      /* the other goal line */
}

/* The disclaimer sits below the field entirely, on navy. It's housekeeping,
   not part of the newsletter, and it reads better out of the turf. */
.foot {
  background: var(--navy-deep);
  padding-block: 1.5rem 1.9rem;
}
.privacy {
  margin: 0; max-width: 42rem;
  font-family: var(--f-ui); font-size: 0.75rem; line-height: 1.6;
  color: var(--ink-soft);
}

/* --- the field ------------------------------------------------------------
   Yard lines every 5, a wider mown band every 10. Everything is expressed in
   multiples of --yard, which app.js sets to (field height / 100). That's what
   makes the page exactly one hundred yards no matter how long the post runs. */

.field {
  flex: 1;
  position: relative;
  background-color: var(--turf);
  padding-block: calc(var(--yard) * 2.5);
  background-image:
    repeating-linear-gradient(to bottom,
      var(--chalk-soft) 0 1px, transparent 1px calc(var(--yard) * 5)),
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,0.04) 0 calc(var(--yard) * 10),
      transparent calc(var(--yard) * 10) calc(var(--yard) * 20));
}

/* Yard numbers: the NUMBER rotates to face its own sideline, the ARROW does
   not, so arrows point up or down the page. Above the 50 they aim at the top
   goal line, below it at the bottom, and the 50 gets none. */
.yard {
  position: absolute; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
}
.yard.l { left:  max(1.9rem, calc(50% - 29.9rem)); }
.yard.r { right: max(1.9rem, calc(50% - 29.9rem)); }
.yard .num {
  font-family: var(--f-display); font-size: 1.35rem; line-height: 1;
  letter-spacing: 0.06em; color: rgba(255,255,255,0.34);
  width: 1.7em; text-align: center;
}
.yard.l .num { transform: rotate(-90deg); }
.yard.r .num { transform: rotate(90deg); }
.yard .arw { width: 0; height: 0; border-inline: 0.34rem solid transparent; }
.yard.up   .arw { border-bottom: 0.44rem solid rgba(255,255,255,0.34); }
.yard.down .arw { border-top:    0.44rem solid rgba(255,255,255,0.34); }

.hashes {
  position: absolute; top: 0; bottom: 0; width: 10px;
  background-image: repeating-linear-gradient(to bottom,
    var(--chalk-soft) 0 1px, transparent 1px var(--yard));
}
.hashes.a { left:  max(4.5rem, calc(50% - 27rem)); }
.hashes.b { right: max(4.5rem, calc(50% - 27rem)); }

.field .wrap { position: relative; z-index: 3; }

/* --- the content card ---------------------------------------------------- */

.col {
  position: relative;
  max-width: 34rem;
  margin-inline: auto;
  background: var(--navy);
  border: 1px solid var(--rule);
  padding: 2.25rem 2rem 2.5rem;
}

.eyebrow {
  margin: 0;
  font-family: var(--f-ui); font-size: 0.6875rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
}

.status {
  font-family: var(--f-ui); font-size: 0.8125rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}

.notice { border-left: 3px solid var(--gold); padding: 0.25rem 0 0.25rem 1.1rem; }
.notice-title { margin: 0 0 0.4rem; font-size: 1.2rem; line-height: 1.3; }
.notice-body { margin: 0; color: var(--ink-soft); }

/* --- post ---------------------------------------------------------------- */

.post-head { position: relative; margin-bottom: 2rem; }

/* The week numeral in gold leaf. `background-clip: text` paints the gradient
   through the letterform; `color` is the fallback if that isn't supported. */
.week-mark {
  display: block;
  font-family: var(--f-display);
  font-size: 3rem; line-height: 0.8;
  margin-bottom: 0.5rem;
  color: var(--gold);
  background-image: linear-gradient(160deg,
    var(--gold-deep) 0%, var(--gold-lit) 38%, var(--gold) 62%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.post-title {
  margin: 0.35rem 0 0;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  line-height: 1.14; letter-spacing: -0.012em; font-weight: 700;
}

.standfirst {
  margin: 0.9rem 0 0;
  color: var(--ink-soft); font-size: 1.0625rem; font-style: italic;
}

/* --- prose (rendered markdown) ------------------------------------------- */

.prose > :first-child { margin-top: 0; }

.prose h2 {
  /* Less air above the gold rule, more between the rule and the words under
     it. The rule opens a section; it shouldn't float between two. */
  margin: 2.1rem 0 1.15rem;
  padding-top: 1rem;
  border-top: 2px solid var(--gold);
  font-family: var(--f-ui);
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
}

.prose h3 { margin: 2rem 0 0.4rem; font-size: 1.1875rem; line-height: 1.3; }
.prose p { margin: 0 0 1.15rem; }
.prose ul, .prose ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.4rem; }

.prose blockquote {
  margin: 1.5rem 0; padding-left: 1.1rem;
  border-left: 3px solid var(--gold-deep);
  color: var(--ink-soft); font-style: italic;
}

.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.25rem 0; }
.prose img { max-width: 100%; height: auto; }
.prose code { font-size: 0.9em; background: var(--navy-deep); padding: 0.1em 0.3em; }

/* --- tables ---------------------------------------------------------------
   `tabular-nums` forces every digit to the same width, so .733 sits directly
   above .667 instead of drifting. Harmless on text cells, so it goes on all
   of them.

   Markdown's `---:` and `:---:` markers become align attributes on BOTH the
   th and the td. Setting text-align on th separately silently overrides the
   header while leaving the cells alone — which is what put "Rk" on the left
   with right-aligned numbers under it. Let the attribute win, and default to
   left only when it's absent. */

.prose table {
  width: 100%; border-collapse: collapse; margin: 1.75rem 0;
  font-family: var(--f-ui); font-size: 0.8125rem;
}
.prose thead th {
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.prose tbody td {
  border-bottom: 1px solid var(--rule-soft);
  font-variant-numeric: tabular-nums;
}
.prose tbody tr:last-child td { border-bottom: 1px solid var(--rule); }

.prose th { padding: 0 0.85rem 0.45rem 0; }
.prose td { padding: 0.42rem 0.85rem 0.42rem 0; }
.prose th:last-child, .prose td:last-child { padding-right: 0; }

.prose th, .prose td { text-align: left; }
.prose th[align="center"], .prose td[align="center"] { text-align: center; }
.prose th[align="right"],  .prose td[align="right"]  { text-align: right; }
.prose th[align="left"],   .prose td[align="left"]   { text-align: left; }

/* Bold inside a table cell is the one highlight. Use **.733** in the markdown
   on the single value that carries the point. One per table, no more. */
.prose tbody td strong { color: var(--gold-lit); font-weight: 600; }

/* --- pager --------------------------------------------------------------- */

.pager {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: baseline;
  margin-top: 3rem; padding-top: 1rem;
  border-top: 2px solid var(--gold);
  font-family: var(--f-ui); font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.pager-link { text-decoration: none; }
.pager-link:hover { text-decoration: underline; }
.pager-link.all { margin-inline: auto; color: var(--ink-soft); }

/* --- archive ------------------------------------------------------------- */

.archive-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
}
.archive-note {
  margin: 0.6rem 0 1.75rem;
  font-family: var(--f-ui); font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}

.issue-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--gold); }
.issue { border-bottom: 1px solid var(--rule-soft); }

.issue-link {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  grid-template-areas: "week title" "week date" "week summary";
  column-gap: 1rem; align-items: baseline;
  padding: 1.1rem 0;
  text-decoration: none; color: inherit;
}
.issue-link:hover { background: var(--navy-deep); }
.issue-link:hover .issue-title { text-decoration: underline; }

.issue-week {
  grid-area: week; align-self: start;
  font-family: var(--f-display); font-size: 1.85rem; line-height: 0.9;
  color: var(--gold);
}
.issue-title { grid-area: title; font-size: 1.125rem; line-height: 1.3; }
.issue-date {
  grid-area: date; margin-top: 0.2rem;
  font-family: var(--f-ui); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}
.issue-summary {
  grid-area: summary; margin-top: 0.5rem;
  color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.55;
}

/* --- wide screens: the numeral moves out onto the turf -------------------- */

@media (min-width: 62rem) {
  .week-mark {
    position: absolute;
    left: -6.6rem; top: -0.4rem;
    width: 4.5rem; text-align: right;
    margin: 0;
    font-size: 4.25rem;
  }
}

/* --- narrow screens: no margins left to hold a field ---------------------- */

@media (max-width: 62rem) {
  .field {
    background-color: var(--navy);
    background-image: none;
    padding-block: 2rem 2.5rem;
  }
  .hashes, .yard { display: none; }
  .endzone { height: 5rem; }
  .col {
    max-width: none; border: 0; background: none;
    padding-inline: 0; padding-block: 0 0.5rem;
  }
}

/* --- print --------------------------------------------------------------- */

@media print {
  .masthead, .foot, .endzone, .pager, .skip, .hashes, .yard { display: none; }
  body, .field { background: #fff; color: #000; background-image: none; }
  .col { border: 0; padding: 0; background: none; max-width: none; }
  a { color: #000; }
  .week-mark { position: static; color: #000; -webkit-text-fill-color: #000; background: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}