/* ---------------------------------------------------------------------------
   Tokens
   Monochrome palette carried over from Ito's design system.
--------------------------------------------------------------------------- */

:root {
  --bg: #ffffff;
  --surface: #f0f0f0;
  --border: #e8e8e8;
  /* Boundary for interactive controls. WCAG 1.4.11 asks 3:1 of anything needed
     to identify a control, which --border (1.2:1) cannot carry. 3.36:1 here. */
  --border-control: #8c8c8c;
  --text: #111111;
  --text-secondary: #5a5a5a;
  /* 5.25:1 on --bg and 4.61:1 on --surface. The old #949494 sat at 3.03:1, which
     fails WCAG AA for the 12px labels and captions that use this token. */
  --text-tertiary: #6c6c6c;

  --measure: 46rem;
  --gutter: 1.5rem;
  --thumb: 200px;

  --step-1: 1.1875rem;
  --step-0: 1.0625rem;
  --step--1: 0.9375rem;
  --step--2: 0.8125rem;

  --leading: 1.6;
  --radius: 6px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0d0d;
    --surface: #1c1c1c;
    --border: #262626;
    --border-control: #666666; /* 3.39:1 */
    --text: #f2f2f2;
    --text-secondary: #a0a0a0;
    /* 5.20:1 on --bg and 4.56:1 on --surface; #6b6b6b was 3.65:1. */
    --text-tertiary: #848484;
  }
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", sans-serif;
  font-size: var(--step-0);
  line-height: var(--leading);
  font-feature-settings: "cv05", "ss01";
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  margin: 0 0 1em;
  color: var(--text-secondary);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

/* Links inherit the colour of their surroundings, so the underline is the only
   thing marking them as links. Tying it to --border put it at 1.2:1 against the
   page, effectively invisible; deriving it from the text colour keeps the
   hairline quiet but perceptible whatever tier of grey it sits in. */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 60%, transparent);
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}

a:hover {
  border-bottom-color: currentColor;
}

a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 2px;
}

img,
video {
  display: block;
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Layout
--------------------------------------------------------------------------- */

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 7rem var(--gutter) 6rem;
}

.section {
  margin-top: 4.5rem;
}

.section__heading {
  margin: 0 0 1.5rem;
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--text);
}

/* ---------------------------------------------------------------------------
   Intro
--------------------------------------------------------------------------- */

.avatar {
  width: 56px;
  height: 56px;
  margin-bottom: 2rem;
  border-radius: 50%;
  background-color: var(--surface);
  background-size: cover;
  background-position: center;
}

.intro p {
  color: var(--text);
}

.intro p + p {
  color: var(--text-secondary);
}

.intro__links {
  margin-top: 1.5rem;
  font-size: var(--step--1);
}

.intro__links a {
  color: var(--text-secondary);
}

.intro__links a + a {
  margin-left: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Entry list
   Thumbnail on the left, title and supporting copy on the right.
--------------------------------------------------------------------------- */

.entries {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Square thumbnail spanning the full entry, with the text set beside it. The
   head and body are separate rows so that narrow screens can slot the image
   between them. */
.entry {
  display: grid;
  grid-template-columns: var(--thumb) 1fr;
  grid-template-areas:
    "thumb head"
    "thumb body";
  align-content: start;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  padding: 1rem 0.875rem;
  margin-left: -0.875rem;
  margin-right: -0.875rem;
  border-radius: var(--radius);
  transition: background-color 0.15s var(--ease);
}

.entry:hover {
  background: color-mix(in srgb, var(--surface) 45%, transparent);
}

.entry__thumb {
  grid-area: thumb;
  display: block;
  align-self: start;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 5px;
  background-color: var(--surface);
  background-size: cover;
  background-position: center;
  /* Several thumbnails are near-white, so give every one a defined edge. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
}

.entry__thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.entry__head {
  grid-area: head;
  min-width: 0;
}

.entry__body {
  grid-area: body;
  min-width: 0;
}

.entry__title {
  margin: 0;
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  text-wrap: balance;
}

.entry__title a {
  border-bottom: 0;
}

.entry__title a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Marks a title or row that leads off-site. */
.arrow {
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.2em;
  color: var(--text-tertiary);
  vertical-align: -0.02em;
}

.arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.entry__meta {
  margin: 0.125rem 0 0;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--text);
}

.entry__meta p {
  margin: 0;
  color: inherit;
}

.entry__desc {
  margin: 0;
  font-size: var(--step--1);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.entry__links {
  margin: 0.5rem 0 0;
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.entry__links a + a {
  margin-left: 0.75rem;
}

/* ---------------------------------------------------------------------------
   Plain rows (intellectual property)
--------------------------------------------------------------------------- */

.rows {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
}

.rows li {
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
}

.rows li:last-child {
  border-bottom: 1px solid var(--border);
}

.rows a {
  display: grid;
  grid-template-columns: 11rem 1fr auto;
  gap: 1.5rem;
  padding: 0.6rem 0;
  color: inherit;
  border-bottom: 0;
}

.rows a:hover {
  color: var(--text);
}

.rows a:hover span:first-child {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Number, status and year are peers on one row, so they share a colour. */
.rows span:first-child,
.rows span:last-child {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */

.footer {
  margin-top: 4.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
  color: var(--text-tertiary);
}

.footer a {
  color: var(--text-secondary);
}

.footer a + a {
  margin-left: 1rem;
}

/* Narrow screens: one column, with the image dropping below the title block. */
@media (max-width: 40rem) {
  .page {
    padding-top: 4rem;
  }

  .entry {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "thumb"
      "body";
    row-gap: 0.875rem;
  }

  .entry__thumb {
    width: 13rem;
    justify-self: start;
  }

  .rows a {
    grid-template-columns: 9.5rem 1fr auto;
    gap: 0.75rem;
  }

  .intro__links a + a {
    margin-left: 1rem;
  }
}