/* Site-wide stylesheet — the only CSS (CSP: style-src 'self'; no inline styles, no JS).
   Direction "the page is the object" (taste-skill draw, seed 81446807): every page is cream
   paper (the artefact) on an oxblood field, printed in two colours. The brand colours are
   cream #F6E7D0 and oxblood #6B1E2A; the other tokens are tone steps of those two.
   Contrast (WCAG 2.x, computed): ink on paper 13.8:1 · oxblood on paper 9.4:1 · oxblood on
   paper-2 8.0:1 · paper on oxblood 9.4:1 · paper-soft on oxblood 7.6:1 · paper on oxblood-light 7.6:1.
   Motion is CSS-only (keyframes + scroll-driven animation-timeline where supported) and is
   switched off entirely under prefers-reduced-motion. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-latin-wdth-italic.woff2") format("woff2");
}

:root {
  --oxblood: #6b1e2a;
  --oxblood-deep: #561722; /* one tone step down: bars and spines on the field */
  --oxblood-light: #7e2a36; /* one tone step up: alternate spines */
  --ink: #3a0e16; /* running text on paper */
  --paper: #f6e7d0;
  --paper-2: #ebd5b3; /* one tone step down on paper: filled bars, highlights */
  --paper-soft: #e8cfae; /* secondary text on the oxblood field */

  --margin: clamp(16px, 3.2vw, 44px); /* the page's one pair of outer margins */
  --wide: 1360px;
  --gap-section: clamp(96px, 12vw, 200px); /* between sections: clearly larger than any gap inside one */
  --target: 24px; /* WCAG 2.2 SC 2.5.8 minimum target */

  /* Five type steps, no more. */
  --step-small: 0.875rem; /* 14px */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.75rem, 1.6rem + 5vw, 6rem);
  --step-display: clamp(4rem, 21vw, 9.75rem);

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}

@media (pointer: coarse) {
  :root {
    --target: 44px; /* touch: WCAG 2.5.5 enhanced target size */
  }
}

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

html {
  background: var(--oxblood);
}

body {
  margin: 0;
  background: var(--oxblood);
  color: var(--paper);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: var(--step-body);
  line-height: 1.5;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 800;
  font-stretch: 62%;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.88;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition:
    text-decoration-thickness 160ms var(--ease-out),
    color 160ms var(--ease-out);
}

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

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

::selection {
  background: var(--oxblood);
  color: var(--paper);
}

.skip-link {
  position: absolute;
  left: var(--margin);
  top: -10rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--paper);
  color: var(--oxblood);
}

.skip-link:focus {
  top: 1rem;
}

/* ---------- The curtain: the sheet slides up to uncover the footer beneath it. ---------- */

.sheet {
  position: relative;
  z-index: 1;
  background: var(--oxblood);
  padding-bottom: var(--gap-section);
}

.curtain {
  /* Overlaps the sheet's last stretch so the footer is pinned only while it is being uncovered. */
  --reveal: 40vh;
  position: relative;
  z-index: 0;
  margin-top: calc(-1 * var(--reveal));
  padding-top: var(--reveal);
}

.card-back {
  position: sticky;
  bottom: 0;
  padding: 0 var(--margin) var(--margin);
}

/* ---------- Buttons: flat, square, one fill. ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.25rem;
  font-weight: 500;
  font-size: var(--step-body);
  text-decoration: none;
  transition:
    transform 160ms var(--ease-out),
    background-color 160ms var(--ease-out);
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

.button-paper {
  background: var(--paper);
  color: var(--oxblood);
}

.button-paper:hover {
  background: #fff3e0;
}

.button-ink {
  background: var(--oxblood);
  color: var(--paper);
}

.button-ink:hover {
  background: var(--ink);
}

/* ---------- Top row on the field: monogram, three links, one action. ---------- */

.top-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 28px var(--margin);
}

.monogram {
  justify-self: start;
  display: block;
  transition: transform 200ms var(--ease-out);
}

.monogram:hover {
  transform: rotate(-4deg);
}

.top-row ul {
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-row nav a {
  display: inline-flex;
  align-items: center;
  min-height: max(var(--target), 44px);
  text-decoration: none;
  font-weight: 500;
}

.top-row nav a:hover,
.top-row nav a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

.top-action {
  justify-self: end;
}

/* ---------- The title card: the artefact itself. ---------- */

.title-card {
  padding: clamp(32px, 6vw, 90px) var(--margin) 0;
}

.card {
  /* Scalloped inner corners: four circles cut from the paper. A shape mask, not a visible gradient. */
  --notch: 28px;
  position: relative;
  width: min(100%, 620px);
  min-height: calc(min(100vw - 2 * var(--margin), 620px) * 1.4);
  margin-inline: auto;
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4.5vw, 56px);
  background: var(--paper);
  color: var(--oxblood);
  text-align: center;
  /* prettier-ignore */
  mask:
    radial-gradient(circle at 0 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) top left / 51% 51% no-repeat, /* taste-skill-ignore: shape mask */
    radial-gradient(circle at 100% 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) top right / 51% 51% no-repeat, /* taste-skill-ignore: shape mask */
    radial-gradient(circle at 0 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) bottom left / 51% 51% no-repeat, /* taste-skill-ignore: shape mask */
    radial-gradient(circle at 100% 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) bottom right / 51% 51% no-repeat; /* taste-skill-ignore: shape mask */
}

.title-card-short + * {
  margin-top: 64px;
}

.title-card-short .card {
  width: min(100%, 980px);
  min-height: 0;
  padding-block: clamp(48px, 7vw, 96px);
}

.card-title {
  font-size: var(--step-display);
}

.card-title span {
  display: block;
}

.card-title span:first-child {
  transform: translateX(-7%);
}

.card-title span:last-child {
  transform: translateX(7%);
}

.card-title-fit {
  font-size: var(--step-display);
}

.card-lede {
  max-width: 34ch;
  margin: 40px auto 0;
  font-size: var(--step-lead);
  line-height: 1.3;
  color: var(--ink);
}

.title-card-short .card-lede {
  max-width: 44ch;
}

.card-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--step-small);
  font-weight: 500;
}

.card-details li {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
}

.card-details li + li::before {
  content: "";
  width: 10px;
  height: 10px;
  background: currentColor;
  transform: rotate(45deg);
}

.card-details a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}

/* ---------- Pictures: one treatment everywhere, a two-colour print (oxblood on cream). ---------- */

.duo {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
}

.duo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: multiply;
}

.duo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--oxblood);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Screenshots of Matthew's own software: true colour, framed in paper like a tipped-in print. */
.shot {
  display: block;
  padding: 10px;
  background: var(--paper);
}

.shot img {
  width: 100%;
}

figure {
  margin: 0;
}

figcaption {
  margin-top: 12px;
  font-size: var(--step-small);
}

.plate {
  margin-top: 48px;
}

.plate .duo {
  aspect-ratio: 4 / 3;
}

.plate figcaption {
  color: var(--ink);
}

/* ---------- Facts: title, note, the row of facts like a printed programme. ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  width: min(100% - 2 * var(--margin), var(--wide));
  margin: var(--gap-section) auto 0;
}

.facts-title {
  grid-column: 1 / 9;
  font-size: var(--step-head);
}

.facts-note {
  grid-column: 9 / 13;
  grid-row: 3;
  align-self: end;
  max-width: 34ch;
  font-size: var(--step-lead);
  line-height: 1.35;
}

.facts-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 32px;
  margin: 96px 0 0;
}

.facts-row div {
  flex: 1;
  max-width: 17rem;
}

.facts-row dt {
  font-weight: 800;
  font-stretch: 62%;
  text-transform: uppercase;
  font-size: var(--step-head);
  line-height: 0.9;
}

.facts-row dd {
  margin: 12px 0 0;
  font-size: var(--step-small);
  color: var(--paper-soft);
}

.facts-picture {
  grid-column: 1 / 8;
  grid-row: 3;
  margin-top: 96px;
}

.facts-picture .duo {
  aspect-ratio: 4 / 3;
}

.facts-picture figcaption {
  color: var(--paper-soft);
}

/* ---------- The shelf: stories as book spines, width by length. ---------- */

.shelf-section,
.volume,
.contents-section,
.paper-section,
.credits {
  width: min(100% - 2 * var(--margin), var(--wide));
  margin: var(--gap-section) auto 0;
  padding: clamp(28px, 4vw, 56px);
  background: var(--paper);
  color: var(--ink);
}

.shelf-head,
.volume-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 32px;
  margin-bottom: 40px;
}

.shelf-head h2,
.volume-head h2 {
  font-size: var(--step-head);
  color: var(--oxblood);
}

.volume-head h2 a {
  text-decoration: none;
}

.shelf-head p,
.volume-head p {
  max-width: 48ch;
}

.shelf {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 440px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spine {
  min-width: 36px;
  height: 100%;
}

.spine.w1 {
  flex: 1;
}
.spine.w2 {
  flex: 2;
}
.spine.w3 {
  flex: 3;
}
.spine.w4 {
  flex: 4;
}
.spine.w5 {
  flex: 5;
}
.spine.w6 {
  flex: 6;
}

.spine:nth-child(3n + 2) a {
  background: var(--oxblood-deep);
}

.spine:nth-child(3n + 3) a {
  background: var(--oxblood-light);
}

.spine:nth-child(4n + 1) {
  height: 92%;
}

.spine:nth-child(5n + 3) {
  height: 96%;
}

.spine a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 18px 0 14px;
  background: var(--oxblood);
  color: var(--paper);
  text-decoration: none;
  transition:
    transform 220ms var(--ease-out),
    background-color 220ms var(--ease-out);
}

.spine-title,
.spine-meta {
  writing-mode: vertical-rl;
}

.spine-title {
  font-weight: 800;
  font-stretch: 62%;
  text-transform: uppercase;
  font-size: var(--step-lead);
  letter-spacing: 0.01em;
}

.spine-meta {
  padding: 8px 4px;
  background: var(--paper-2);
  color: var(--oxblood);
  font-size: var(--step-small);
  font-weight: 500;
}

.spine a:hover,
.spine a:focus-visible {
  transform: translateY(-14px);
  background: var(--ink);
}

.spine a:focus-visible {
  outline: 3px solid var(--oxblood);
  outline-offset: 3px;
}

/* ---------- A full-bleed picture band: the page's one rest. ---------- */

.band {
  margin-top: var(--gap-section);
}

.band .duo {
  height: min(78vh, 760px);
}

.band figcaption {
  padding: 0 var(--margin);
  color: var(--paper-soft);
}

/* ---------- A featured project on the home page: framed screenshot beside its pitch. ---------- */

.feature-project {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  align-items: end;
  width: min(100% - 2 * var(--margin), var(--wide));
  margin: var(--gap-section) auto 0;
}

.feature-project-figure {
  grid-column: 1 / 8;
}

.feature-project-figure figcaption {
  color: var(--paper-soft);
}

.feature-project-text {
  grid-column: 9 / 13;
}

.feature-project-text h2 {
  margin-bottom: 28px;
  font-size: var(--step-head);
}

.feature-project-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 32px;
}

.feature-project-actions a:last-child {
  display: inline-flex;
  align-items: center;
  min-height: max(var(--target), 44px);
  font-weight: 500;
}

@media (max-width: 900px) {
  .feature-project-figure,
  .feature-project-text {
    grid-column: 1 / -1;
  }

  .feature-project-text {
    margin-top: 40px;
  }
}

/* ---------- The record: the giant word over filled bars. ---------- */

.record {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  align-items: start;
  width: min(100% - 2 * var(--margin), var(--wide));
  margin: var(--gap-section) auto 0;
}

.record-column {
  grid-column: 1 / 8;
  container-type: inline-size;
}

.giant-word {
  font-size: 33cqi; /* "RECORD" sets about 2.9em wide in Archivo 800 at 62%: 33cqi fills the column */
  line-height: 0.8;
  margin-bottom: 24px;
}

.bar {
  margin-top: 6px;
  background: var(--oxblood-deep);
}

.bar summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  padding: 0 18px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: background-color 160ms var(--ease-out);
}

.bar summary::-webkit-details-marker {
  display: none;
}

.bar summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 200ms var(--ease-out);
}

.bar[open] summary::after {
  transform: rotate(45deg);
}

.bar summary:hover {
  background: var(--ink);
}

.bar-items {
  margin: 0;
  padding: 6px 18px 20px;
  list-style: none;
}

.bar-items li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 7px 0;
}

.bar-items li span:last-child {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--paper-soft);
}

.record-column .button {
  margin-top: 32px;
}

.record-picture {
  grid-column: 9 / 13;
  position: sticky;
  top: 32px;
  margin-top: 12cqi;
}

.record-picture .duo {
  aspect-ratio: 4 / 5;
}

.record-picture figcaption {
  color: var(--paper-soft);
}

/* ---------- The letter, with its tear-off strip. ---------- */

.letter-section {
  width: min(100% - 2 * var(--margin), 680px);
  margin: var(--gap-section) auto 0;
}

.letter {
  /* Bottom edge cut into small scallops. */
  padding: clamp(28px, 6vw, 64px) clamp(24px, 6vw, 64px) calc(clamp(28px, 6vw, 64px) + 12px);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  /* prettier-ignore */
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat, /* taste-skill-ignore: shape mask */
    radial-gradient(circle at 50% 0, #000 11.5px, #0000 12px) bottom / 24px 12px repeat-x; /* taste-skill-ignore: shape mask */
}

.letter-mark {
  margin-bottom: 28px;
}

.letter p + p {
  margin-top: 1.1em;
}

.letter mark {
  padding: 0 0.15em;
  background: var(--paper-2);
  color: var(--oxblood);
}

.letter .letter-sign {
  margin-top: 2em;
  font-size: var(--step-lead);
  font-style: italic;
  font-weight: 500;
  color: var(--oxblood);
}

.letter .letter-role {
  margin-top: 0.25em;
  font-size: var(--step-small);
}

.tear-off {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  margin-top: 14px;
  padding: 18px clamp(24px, 6vw, 64px);
  min-height: 72px;
  background: var(--paper);
  color: var(--oxblood);
  border-top: 6px dotted var(--paper);
  font-weight: 500;
}

.tear-off a {
  display: inline-flex;
  align-items: center;
  min-height: max(var(--target), 44px);
}

/* ---------- The coupon: notched, perforated, cut along the dots. ---------- */

.coupon-section {
  width: min(100% - 2 * var(--margin), 1120px);
  margin: var(--gap-section) auto 0;
}

.coupon {
  --cut: 46%;
  display: grid;
  grid-template-columns: var(--cut) 1fr;
  min-height: 340px;
  background: var(--paper);
  color: var(--ink);
  /* prettier-ignore */
  mask:
    radial-gradient(circle at var(--cut) 0, #0000 14px, #000 14.5px) top / 100% 51% no-repeat, /* taste-skill-ignore: shape mask */
    radial-gradient(circle at var(--cut) 100%, #0000 14px, #000 14.5px) bottom / 100% 51% no-repeat; /* taste-skill-ignore: shape mask */
}

.coupon-stub {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 48px;
}

.coupon-stub h2 {
  font-size: var(--step-head);
  color: var(--oxblood);
}

.coupon-links {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 48px;
  list-style: none;
  border-left: 6px dotted var(--oxblood);
}

.coupon-links .button {
  width: 100%;
  min-height: 56px;
}

.coupon-link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 18px;
  background: var(--paper-2);
  color: var(--oxblood);
  font-weight: 500;
  text-decoration: none;
  transition: transform 160ms var(--ease-out);
}

.coupon-link:hover {
  transform: translateX(6px);
  text-decoration: underline;
}

/* ---------- The footer: the back of the card. ---------- */

.card-back-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 56px;
  width: min(100%, 1180px);
  margin-inline: auto;
  padding: 88px clamp(24px, 5vw, 64px) 28px;
  background: var(--paper);
  color: var(--ink);
  /* prettier-ignore */
  mask:
    linear-gradient(#000 0 0) bottom / 100% calc(100% - 48px) no-repeat, /* taste-skill-ignore: shape mask */
    radial-gradient(circle at 50% 100%, #000 49.5px, #0000 50px) top / 100px 48px repeat-x; /* taste-skill-ignore: shape mask */
}

.card-back-signoff {
  grid-column: 1 / -1;
  order: 3;
  font-weight: 800;
  font-stretch: 62%;
  text-transform: uppercase;
  font-size: var(--step-head);
  line-height: 0.9;
  color: var(--oxblood);
}

.card-back-message p:last-child {
  max-width: 44ch;
}

.card-back-address {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.card-back-address ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-back-address a {
  display: inline-flex;
  align-items: center;
  min-height: max(var(--target), 40px);
  color: var(--oxblood);
  font-weight: 500;
}

.stamp {
  flex: none;
  order: 2;
  width: 88px;
  height: 117px;
  padding: 6px;
  background: var(--paper-2);
  object-fit: cover;
  transform: rotate(3deg);
}

.imprint {
  grid-column: 1 / -1;
  order: 4;
  text-align: center;
  font-size: var(--step-small);
}

/* ---------- Projects, contents and the reader. ---------- */

.volume .shelf {
  height: 360px;
}

.contents-section h2,
.paper-section h2,
.credits h2 {
  margin-bottom: 40px;
  font-size: var(--step-head);
  color: var(--oxblood);
}

.contents {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 40px 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contents li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  gap: 8px 16px;
}

.contents a {
  font-weight: 800;
  font-stretch: 62%;
  text-transform: uppercase;
  font-size: var(--step-lead);
  line-height: 1;
  color: var(--oxblood);
  text-decoration: none;
}

.contents a:hover {
  text-decoration: underline;
}

.contents-time {
  align-self: center;
  padding: 4px 8px;
  background: var(--paper-2);
  color: var(--oxblood);
  font-size: var(--step-small);
  font-weight: 500;
}

.contents p {
  grid-column: 1 / -1;
  max-width: 52ch;
}

.contents-plate {
  grid-column: 1 / -1;
  order: -1;
  margin-bottom: 12px;
}

.contents-plate .duo {
  aspect-ratio: 16 / 9;
}

/* Contact: the Toronto postcard beside the coupon. */
.postcard {
  width: min(100% - 2 * var(--margin), 1120px);
  margin: 12px auto 0;
}

.postcard .duo {
  aspect-ratio: 21 / 9;
}

.postcard figcaption {
  color: var(--paper-soft);
}

.reader {
  width: min(100% - 2 * var(--margin), 800px);
  margin: clamp(32px, 6vw, 90px) auto 0;
  padding: clamp(28px, 7vw, 80px);
  background: var(--paper);
  color: var(--ink);
}

.reader-title {
  font-size: var(--step-display);
  color: var(--oxblood);
}

.reader-meta {
  margin-top: 28px;
  font-size: var(--step-lead);
  line-height: 1.3;
  color: var(--oxblood);
}

.reader-body {
  margin-top: 56px;
  line-height: 1.65;
  max-width: 64ch;
}

.reader-body p + p {
  margin-top: 1em;
}

.reader-body pre {
  margin: 1.5em 0;
  padding: 20px;
  overflow-x: auto;
  background: var(--paper-2);
  color: var(--oxblood);
  font-size: var(--step-small);
  white-space: pre-wrap;
}

.reader-body hr {
  width: 10px;
  height: 10px;
  margin: 2.5em auto;
  border: 0;
  background: var(--oxblood);
  transform: rotate(45deg);
}

.pager {
  width: min(100% - 2 * var(--margin), 800px);
  margin-inline: auto;
}

/* ---------- External-site projects (e.g. the drill simulator). ---------- */

.volume-figure {
  margin-top: 8px;
}

.volume-figure .shot {
  background: var(--paper-2);
}

.volume-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}

.volume-action > a:last-child {
  display: inline-flex;
  align-items: center;
  min-height: max(var(--target), 44px);
  color: var(--oxblood);
  font-weight: 500;
}

.paper-section > p + p {
  margin-top: 1em;
}

.feature-list {
  margin: 28px 0 0;
  padding-left: 1.1em;
}

.feature-list li + li {
  margin-top: 0.6em;
}

.site-action {
  margin-top: 40px;
}

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 48px 24px;
  width: min(100% - 2 * var(--margin), var(--wide));
  margin: var(--gap-section) auto 0;
}

.gallery-figure:first-child {
  grid-column: 1 / -1;
}

.gallery figcaption {
  color: var(--paper-soft);
}

@media (max-width: 640px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

/* ---------- Resume. ---------- */

/* Heading column on the left, a 68-character text column flush to the right edge. */
.paper-section,
.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 68ch);
  column-gap: clamp(24px, 4vw, 64px);
}

.paper-section > h2,
.entry > h3,
.entry > .entry-picture {
  grid-column: 1;
}

.paper-section > :not(h2),
.entry > .role,
.entry > p,
.entry > ul {
  grid-column: 2;
}

.paper-section > h2 {
  grid-row: 1 / span 9;
}

.summary-picture {
  margin-top: 40px;
}

.summary-picture .duo {
  aspect-ratio: 16 / 9;
}

.experience {
  width: min(100% - 2 * var(--margin), var(--wide));
  margin: var(--gap-section) auto 0;
}

.experience > h2 {
  margin-bottom: 40px;
  font-size: var(--step-head);
}

.entry {
  margin-top: 12px;
  padding: clamp(24px, 4vw, 48px);
  background: var(--paper);
  color: var(--ink);
}

.entry > h3 {
  align-self: start;
  font-size: var(--step-lead);
  line-height: 1;
  color: var(--oxblood);
}

.entry-picture {
  grid-row: 2 / span 3;
  align-self: start;
  margin-top: 32px;
}

.entry-picture .duo {
  aspect-ratio: 4 / 3;
}

.role + .role {
  margin-top: 36px;
}

.role h4 {
  font-size: var(--step-lead);
  font-stretch: 100%;
  font-weight: 700;
  text-transform: none;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--oxblood);
}

.role .meta {
  margin-top: 6px;
  font-size: var(--step-small);
  font-weight: 500;
}

.role ul {
  margin: 16px 0 0;
  padding-left: 1.1em;
}

.role li + li {
  margin-top: 0.6em;
}

.education .entry {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
}

.education .entry h3 {
  font-size: var(--step-lead);
  font-stretch: 100%;
  text-transform: none;
  line-height: 1.2;
}

.education .entry p {
  margin-top: 8px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step-lead);
  font-weight: 500;
  color: var(--oxblood);
}

.publications ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step-lead);
}

/* ---------- Credits. ---------- */

.credits-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 40px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.credits-list img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: multiply;
}

.credits-list p {
  margin-top: 16px;
}

.credits-list a {
  display: inline-flex;
  align-items: center;
  min-height: max(var(--target), 32px);
  margin-top: 4px;
  color: var(--oxblood);
  font-weight: 500;
}

.credits-fonts {
  margin-top: 48px;
}

/* ---------- Tablet and phone: each its own composition. ---------- */

@media (max-width: 900px) {
  .facts-title,
  .facts-note,
  .facts-picture {
    grid-column: 1 / -1;
  }

  .facts-note,
  .facts-picture {
    grid-row: auto;
  }

  .facts-note {
    margin-top: 48px;
  }

  .facts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    margin-top: 64px;
  }

  .record-column,
  .record-picture {
    grid-column: 1 / -1;
  }

  .record-picture {
    position: static;
    margin-top: 48px;
  }

  .paper-section,
  .entry {
    grid-template-columns: minmax(0, 1fr);
  }

  .paper-section > h2,
  .paper-section > :not(h2),
  .entry > h3,
  .entry > .entry-picture,
  .entry > .role,
  .entry > p,
  .entry > ul {
    grid-column: 1;
    grid-row: auto;
  }

  .entry > h3 {
    margin-bottom: 24px;
  }

  .entry-picture {
    order: 9;
  }

  .card-back-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .top-row {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }

  .top-row nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .card {
    --notch: 18px;
  }

  .card-title span:first-child,
  .card-title span:last-child {
    transform: none;
  }

  .card-details {
    flex-direction: column;
    gap: 6px;
  }

  .card-details li + li::before {
    display: none;
  }

  .shelf,
  .volume .shelf {
    flex-wrap: wrap;
    align-items: stretch;
    height: auto;
    gap: 10px;
  }

  .spine,
  .spine[class] {
    flex: 0 1 auto;
    height: auto;
    min-width: 0;
  }

  .spine a {
    flex-direction: row;
    gap: 10px;
    padding: 10px 10px 10px 14px;
  }

  .spine-title,
  .spine-meta {
    writing-mode: horizontal-tb;
  }

  .spine-meta {
    padding: 4px 8px;
  }

  .spine a:hover,
  .spine a:focus-visible {
    transform: translateY(-3px);
  }

  .coupon {
    --cut: 50%;
    grid-template-columns: 1fr;
    /* prettier-ignore */
    mask:
      radial-gradient(circle at 0 var(--cut), #0000 14px, #000 14.5px) left / 51% 100% no-repeat, /* taste-skill-ignore: shape mask */
      radial-gradient(circle at 100% var(--cut), #0000 14px, #000 14.5px) right / 51% 100% no-repeat; /* taste-skill-ignore: shape mask */
  }

  .coupon-stub,
  .coupon-links {
    padding: 32px 24px;
  }

  .coupon-links {
    border-left: 0;
    border-top: 6px dotted var(--oxblood);
  }
}

/* ---------- Motion: entrances, the moving plate, scroll reveals. Reduced motion gets none. ---------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from {
      opacity: 0;
      translate: 0 28px;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  /* Scroll reveals never start invisible: content is readable even before its entrance runs. */
  @keyframes surface {
    from {
      opacity: 0.35;
      translate: 0 32px;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  @keyframes fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes drift {
    from {
      scale: 1.02;
    }
    to {
      scale: 1.12;
      translate: -2% -1%;
    }
  }

  .top-row > * {
    animation: fade 600ms var(--ease-out) both;
  }

  .top-row > :nth-child(2) {
    animation-delay: 80ms;
  }

  .top-row > :nth-child(3) {
    animation-delay: 160ms;
  }

  .card {
    animation: rise 900ms var(--ease-out) both;
  }

  .card > * {
    animation: rise 800ms var(--ease-out) both;
  }

  .card > :nth-child(1) {
    animation-delay: 150ms;
  }
  .card > :nth-child(2) {
    animation-delay: 230ms;
  }
  .card > :nth-child(3) {
    animation-delay: 310ms;
  }
  .card > :nth-child(4) {
    animation-delay: 390ms;
  }

  .plate img {
    animation: drift 22s ease-in-out 1s infinite alternate;
  }

  .reader {
    animation: rise 800ms var(--ease-out) both;
  }

  @supports (animation-timeline: view()) {
    .facts-title,
    .facts-note,
    .facts-row > div,
    .reveal,
    .shelf-head,
    .volume-head,
    .spine,
    .giant-word,
    .bar,
    .letter p,
    .tear-off,
    .coupon,
    .card-back-panel,
    .contents li,
    .paper-section > *,
    .entry,
    .credits-list li,
    .reader-body > *,
    .contents-plate,
    .postcard,
    .gallery-figure,
    .volume-figure {
      animation: surface linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }

    .facts-row > div:nth-child(2),
    .spine:nth-child(3n + 2),
    .bar:nth-of-type(2n),
    .contents li:nth-child(2n) {
      animation-range: entry 8% entry 78%;
    }

    .facts-row > div:nth-child(3),
    .spine:nth-child(3n + 3),
    .bar:nth-of-type(3n) {
      animation-range: entry 16% entry 86%;
    }

    .facts-row > div:nth-child(4) {
      animation-range: entry 24% entry 94%;
    }

    .band img {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}