/* ==========================================================================
   Rotate the Strike
   One stylesheet. Tokens at the top, everything downstream references them.
   ==========================================================================

   COLOUR AND CONTRAST

   The six brand colours come from BRIEF.md and are used unaltered. Two
   neutrals are derived because a real page needs a second paper tone and a
   secondary text colour, and both are noted as derived below.

   Every text and background pair used on the site, measured:

     slate on cream .......... 10.09:1   body copy
     slate on paper-2 ......... 9.40:1   body copy in a tinted band
     muted on cream ........... 6.60:1   secondary and meta text
     leather on cream ......... 6.30:1   links, labels, headings
     leather on paper-2 ....... 5.87:1   links inside a tinted band
     grass on cream ........... 8.20:1   headings
     grass on paper-2 ......... 7.65:1   headings in a tinted band
     cream on grass ........... 8.20:1   inverted bands
     cream on leather ......... 6.30:1   inverted bands
     slate on gold ............ 5.41:1   the verdict marker
     ink-deep on spark ........ 5.81:1   the breaking-news flag

   Measured in the rendered pages with getComputedStyle, walking to the
   nearest painted ancestor background, rather than read off the tokens.

   Two colours are restricted because they fail at body size, which is the
   reason the restriction is written here rather than discovered later:

     gold on cream ............ 1.87:1   never text. Illustration only.
     gold on grass ............ 4.40:1   display sizes only (>=24px bold),
                                         which clears the 3:1 large-text bar.
     spark on cream ........... 2.52:1   never text, and never a border or
                                         other graphical object on cream,
                                         which also needs 3:1. Spark is a
                                         solid background for near-black
                                         text, and nothing else.
     slate on spark ........... 4.01:1   short of AA at the flag's 12px, so
                                         the flag uses ink-deep instead.
   ========================================================================== */

:root {
  /* colour, from the brief */
  --leather: #8b4513;
  --grass: #2d5016;
  --cream: #f5f1e8;
  --gold: #d4af37;
  --slate: #3a3a3a;
  --spark: #ff6b35;

  /* colour, derived. A second paper tone, a secondary text tone, and one
     deep ink used only on the spark flag, where slate does not reach AA at
     the small size the flag is set in. */
  --paper: var(--cream);
  --paper-2: #efe9dc;
  --muted: #5c544b;
  --ink-deep: #241e19;
  --rule: #d9d0bd;
  --rule-strong: #b9ab90;

  /* type */
  --font-display: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --font-body: "Fira Sans", Calibri, Candara, "Segoe UI", system-ui, sans-serif;

  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.1875rem;
  --step-2: 1.4375rem;
  --step-3: 1.75rem;
  --step-4: 2.25rem;
  --step-5: clamp(2.25rem, 5.2vw, 3.5rem);
  --step-6: clamp(2.75rem, 7.4vw, 5rem);

  /* spacing */
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1.125rem;
  --space-4: 1.75rem;
  --space-5: 2.5rem;
  --space-6: 3.5rem;
  --space-7: 5rem;
  --space-8: 7rem;

  /* measure and shell */
  --measure: 38rem;
  --shell: 72rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

/* --------------------------------------------------------------- fonts */

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/immutable/fonts/zilla-slab-600.afeeae1f.woff2) format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/immutable/fonts/zilla-slab-700.6d5ec30c.woff2) format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/immutable/fonts/fira-sans-400.7b8f0fbf.woff2) format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/immutable/fonts/fira-sans-400-italic.f49e39ea.woff2) format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/immutable/fonts/fira-sans-500.8a76b4c5.woff2) format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/immutable/fonts/fira-sans-600.f3cc7b27.woff2) format("woff2");
}

/* --------------------------------------------------------------- reset */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--slate);
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

a {
  color: var(--leather);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--leather);
  outline-offset: 3px;
}

.band--grass :focus-visible,
.band--leather :focus-visible {
  outline-color: var(--gold);
}

::selection {
  background: var(--gold);
  color: var(--slate);
}

/* ------------------------------------------------------------- layout */

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

.band {
  padding-block: var(--space-7);
}

.band--tight {
  padding-block: var(--space-6);
}

.band--paper2 {
  background: var(--paper-2);
}

.band--grass {
  background: var(--grass);
  color: var(--cream);
}

.band--leather {
  background: var(--leather);
  color: var(--cream);
}

.band--grass h1,
.band--grass h2,
.band--grass h3,
.band--leather h1,
.band--leather h2,
.band--leather h3 {
  color: var(--cream);
}

.band--grass a,
.band--leather a {
  color: var(--cream);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--slate);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

/* ------------------------------------------------------------- header */

.site-header {
  border-bottom: 2px solid var(--grass);
  background: var(--paper);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-block: var(--space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--slate);
}

.brand img {
  width: 46px;
  height: 46px;
  border-radius: 2px;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 6.5em;
}

@media (min-width: 22rem) {
  .brand__name {
    max-width: none;
    white-space: nowrap;
  }
}

.brand:hover .brand__name {
  color: var(--leather);
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 3vw, 1.6rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav a {
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--slate);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--leather);
  border-bottom-color: var(--leather);
}

.site-nav a[aria-current="page"] {
  color: var(--leather);
  border-bottom-color: var(--leather);
}

/* ---------------------------------------------------------------- hero */

.hero {
  background: var(--grass);
  color: var(--cream);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  padding-block: var(--space-7) var(--space-6);
}

.hero__art {
  align-self: end;
  margin-inline: calc(var(--gutter) * -1);
}

.hero__art img {
  width: 100%;
}

.hero h1 {
  font-size: var(--step-6);
  color: var(--cream);
  margin-bottom: var(--space-3);
}

.hero p {
  font-size: var(--step-1);
  max-width: 30rem;
  color: #ece5d6;
}

.hero__rule {
  width: 6.5rem;
  height: 5px;
  background: var(--gold);
  margin-bottom: var(--space-4);
  transform-origin: left center;
}

@media (min-width: 56rem) {
  .hero__inner {
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: var(--space-6);
    padding-block: var(--space-8) var(--space-7);
  }
  .hero__art {
    margin-inline: 0 calc(var(--gutter) * -1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__rule {
    animation: draw 700ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
}

@keyframes draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ---------------------------------------------------------- page heads */

.page-head {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .page-head {
    grid-template-columns: 6fr 5fr;
    gap: var(--space-7);
    align-items: end;
  }
}

.page-head h1 {
  font-size: var(--step-5);
}

.page-head p {
  font-size: var(--step-1);
  max-width: 34rem;
}

/* --------------------------------------------------------------- bits */

.flag {
  display: inline-block;
  background: var(--spark);
  color: var(--ink-deep);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  vertical-align: 0.15em;
}

.meta {
  font-size: var(--step--1);
  color: var(--muted);
}

.band--grass .meta,
.band--leather .meta {
  color: #d8d0bd;
}

.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--slate);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: 0.01em;
  padding: 0.8rem 1.4rem;
  text-decoration: none;
  border: 2px solid var(--gold);
}

.btn:hover {
  background: transparent;
  color: var(--gold);
}

.band--grass .btn,
.band--leather .btn {
  color: var(--slate);
}

.band--grass .btn:hover,
.band--leather .btn:hover {
  color: var(--gold);
}

.btn--ghost {
  background: transparent;
  color: var(--leather);
  border-color: var(--leather);
}

.btn--ghost:hover {
  background: var(--leather);
  color: var(--cream);
}

/* ----------------------------------------------------------- front page */

.front {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .front {
    grid-template-columns: 7fr 4fr;
    gap: var(--space-7);
  }
}

.lead__art {
  margin-bottom: var(--space-4);
  border: 1px solid var(--rule);
}

.lead h2 {
  font-size: var(--step-5);
  margin-bottom: var(--space-3);
}

.lead h2 a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}

.lead h2 a:hover {
  color: var(--leather);
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

.lead__standfirst {
  font-size: var(--step-1);
  max-width: var(--measure);
  margin-bottom: var(--space-3);
}

.rail {
  border-top: 3px solid var(--slate);
  padding-top: var(--space-3);
}

.rail__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leather);
  margin-bottom: var(--space-4);
}

.rail ol,
.rail ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rail li + li {
  border-top: 1px solid var(--rule);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
}

.rail h3 {
  font-size: var(--step-2);
  margin-bottom: var(--space-2);
}

.rail h3 a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.rail h3 a:hover {
  color: var(--leather);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.rail p {
  font-size: var(--step--1);
  color: var(--muted);
}

/* ------------------------------------------------------------- listings */

.index-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.index-list > li {
  padding-block: var(--space-5);
  border-top: 1px solid var(--rule);
}

.index-list > li:first-child {
  border-top: 3px solid var(--slate);
}

.entry {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 46rem) {
  .entry {
    grid-template-columns: 15rem 1fr;
  }
}

.entry__art {
  border: 1px solid var(--rule);
}

.entry h2,
.entry h3 {
  font-size: var(--step-3);
  margin-bottom: var(--space-2);
}

.entry h2 a,
.entry h3 a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.entry h2 a:hover,
.entry h3 a:hover {
  color: var(--leather);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.entry p {
  max-width: var(--measure);
  margin-bottom: var(--space-2);
}

/* ------------------------------------------------------- editorial page */

.piece-head {
  padding-block: var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--rule);
}

.piece-head h1 {
  font-size: var(--step-5);
  max-width: 18ch;
  margin-bottom: var(--space-4);
}

.piece-head__standfirst {
  font-size: var(--step-2);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.28;
  color: var(--grass);
  max-width: 32rem;
  margin-bottom: var(--space-4);
}

.piece-art {
  margin-block: var(--space-5);
  border: 1px solid var(--rule);
}

.prose {
  max-width: var(--measure);
  font-size: var(--step-1);
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose h2 {
  font-size: var(--step-3);
  margin-top: var(--space-6);
  color: var(--grass);
}

.prose h3 {
  font-size: var(--step-2);
  margin-top: var(--space-5);
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose blockquote {
  border-left: 1px solid var(--rule-strong);
  padding-left: var(--space-4);
  font-style: italic;
  color: var(--muted);
}

.prose blockquote p + p {
  margin-top: var(--space-3);
}

.prose cite {
  display: block;
  font-style: normal;
  font-size: var(--step--1);
  margin-top: var(--space-2);
  color: var(--muted);
}

.verdict {
  background: var(--paper-2);
  border-top: 4px solid var(--gold);
  padding: var(--space-4);
  max-width: var(--measure);
  margin-top: var(--space-6);
}

.verdict h2 {
  font-size: var(--step-2);
  margin: 0 0 var(--space-2);
  color: var(--slate);
}

.verdict p {
  margin: 0;
}

.piece-layout > div > h1 {
  font-size: var(--step-5);
  max-width: 18ch;
  margin-bottom: var(--space-4);
}

.piece-layout {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  padding-block: var(--space-5) var(--space-7);
}

@media (min-width: 62rem) {
  .piece-layout {
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: var(--space-7);
  }
}

.aside {
  font-size: var(--step--1);
}

.aside h2 {
  font-size: var(--step-1);
  margin-bottom: var(--space-3);
  padding-top: var(--space-3);
  border-top: 3px solid var(--slate);
}

.aside ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.aside li + li {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}

.aside a {
  font-weight: 500;
}

/* ---------------------------------------------------------- breadcrumb */

.crumbs {
  font-size: var(--step--1);
  color: var(--muted);
  padding-block: var(--space-3);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.crumbs li + li::before {
  content: "/";
  color: var(--rule-strong);
  margin-right: 0.6rem;
}

/* --------------------------------------------------------- text blocks */

.split {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: 4fr 7fr;
    gap: var(--space-7);
  }

  /* The heading column travels with the list beside it, so a long list does
     not leave an abandoned half-section above the fold. */
  .split > *:first-child {
    position: sticky;
    top: var(--space-5);
    align-self: start;
  }
}

.split h2 {
  font-size: var(--step-4);
}

.split__art {
  margin-top: var(--space-5);
  border: 1px solid var(--rule);
}

.band--grass .split__art,
.band--leather .split__art {
  border-color: rgba(245, 241, 232, 0.3);
}

/* A statement band: one column, given room, no abandoned second column. */
.statement {
  max-width: 46rem;
}

.statement h2 {
  font-size: var(--step-4);
  margin-bottom: var(--space-4);
}

.statement p + p {
  margin-top: var(--space-3);
}

.stack {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stack > li {
  padding-block: var(--space-4);
  border-top: 1px solid var(--rule);
}

.stack > li:first-child {
  border-top: 0;
  padding-top: 0;
}

.band--grass .stack > li,
.band--leather .stack > li {
  border-color: rgba(245, 241, 232, 0.28);
}

.stack h3 {
  font-size: var(--step-2);
  margin-bottom: var(--space-2);
}

.stack h3 a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.stack h3 a:hover {
  color: var(--leather);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.band--grass .stack h3 a,
.band--leather .stack h3 a {
  text-decoration-color: rgba(245, 241, 232, 0.5);
}

.band--grass .stack h3 a:hover,
.band--leather .stack h3 a:hover {
  color: var(--gold);
  text-decoration-color: var(--gold);
}

.stack p {
  max-width: var(--measure);
}

.note {
  max-width: var(--measure);
}

.note + .note {
  margin-top: var(--space-4);
}

/* -------------------------------------------------------------- footer */

.site-footer {
  background: var(--slate);
  color: var(--cream);
  padding-block: var(--space-6);
  font-size: var(--step--1);
}

.site-footer a {
  color: var(--cream);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  color: var(--gold);
}

.site-footer :focus-visible {
  outline-color: var(--gold);
}

.footer-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-6);
  }
}

.footer-grid h2 {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-grid li + li {
  margin-top: var(--space-2);
}

.footer-about p {
  max-width: 24rem;
  color: #ded7c8;
}

.footer-about img {
  width: 42px;
  height: 42px;
  margin-bottom: var(--space-3);
}

.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(245, 241, 232, 0.25);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: space-between;
  color: #ded7c8;
}

/* --------------------------------------------------------------- utils */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mt-6 {
  margin-top: var(--space-6);
}

.mt-4 {
  margin-top: var(--space-4);
}