/* Fonts: Playtype trial, evaluation only. local() uses the copies installed in Font Book;
   the trial TTFs are rejected by Chromium. Swap for licensed woff2 before launch. */
@font-face {
  font-family: "Berlingske Serif";
  src:
    local("Berlingske Serif Regular"),
    local("BerlingskeSerif-Regular"),
    url("../fonts/Berlingske-Serif-Trial/BerlingskeSerif/BerlingskeSerif-Rg-Trial.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Berlingske Serif";
  src:
    local("Berlingske Serif Italic"),
    local("BerlingskeSerif-Italic"),
    url("../fonts/Berlingske-Serif-Trial/BerlingskeSerif/BerlingskeSerif-It-Trial.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Berlingske Sans";
  src:
    local("Berlingske Sans Dsp"),
    local("BerlingskeSansDsp-Regular"),
    url("../fonts/Berlingske-Sans-Display-Trial/BerlingskeSansDisplay/BerlingskeSansDisplay-Regular-Trial.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Berlingske Sans";
  src:
    local("Berlingske Sans Dsp Medium"),
    local("BerlingskeSansDsp-Medium"),
    url("../fonts/Berlingske-Sans-Display-Trial/BerlingskeSansDisplay/BerlingskeSansDisplay-Medium-Trial.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Colour (DESIGN.md §2) */
  --paper: #f3efe6;
  --ink: #1b1b1b;
  --rubric: #b5442b;
  --hair: rgba(27, 27, 27, 0.18);

  /* Type */
  --serif: "Berlingske Serif", Georgia, serif;
  --sans: "Berlingske Sans", system-ui, sans-serif;
  --size-h1: clamp(2.75rem, 5.6vw, 5.5rem);
  --size-chapter: clamp(1.25rem, 1.5vw, 1.4375rem);
  --size-project: clamp(1.375rem, 1.7vw, 1.75rem);
  --size-body: 1.1875rem;
  --size-lead: clamp(1.1875rem, 1.5vw, 1.4375rem);
  --size-meta: 0.9375rem;
  --size-label: 0.8125rem;

  /* Spacing (DESIGN.md §4) */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: clamp(2rem, 3vw, 3rem);
  --s5: clamp(4rem, 8vw, 7rem);
  --margin: clamp(1.25rem, 4vw, 4.5rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --max-width: 1440px;
}

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

body,
h1,
h2,
h3,
p,
figure,
ol,
ul {
  margin: 0;
}

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

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--size-body);
  line-height: 1.5;
  text-size-adjust: 100%;
}

p {
  max-width: 62ch;
}

/* Serif roles */
h1,
h3,
.name,
.chapter,
.aside,
.contact .lead {
  font-family: var(--serif);
  font-weight: 400;
  font-variant-numeric: oldstyle-nums;
}

h1 {
  font-size: var(--size-h1);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.site-header .name {
  font-size: 1.25rem;
}

.chapter,
.aside {
  font-size: var(--size-chapter);
  line-height: 1.35;
}

.aside {
  font-style: italic;
}

.numeral {
  color: var(--rubric);
}

h3,
.contact .lead {
  font-size: var(--size-project);
}

/* Section labels */
h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--size-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Metadata */
.identity,
.site-footer {
  font-size: var(--size-meta);
}

/* Links and focus (DESIGN.md §7) */
a {
  color: var(--ink);
  text-decoration: underline 1px var(--rubric);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--rubric);
}

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

/* Page frame: content box is the two columns; rules span exactly both */
body {
  padding-inline: var(--margin);
}

.site-header,
main,
.site-footer {
  max-width: calc(var(--max-width) - 2 * var(--margin));
  margin-inline: auto;
}

/* Header */
.site-header {
  padding-block: var(--s3);
  border-bottom: 1px solid var(--hair);
}

/* Hero */
.hero {
  padding-top: var(--s4);
}

.hero .lead {
  margin-top: var(--s4);
  font-size: var(--size-lead);
  line-height: 1.45;
}

/* Section pattern: red rule, --s3, label beside first content */
main > section + section {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--rubric);
}

h2 {
  margin-bottom: var(--s2);
}

/* Chapter rows: numeral column, shared text edge */
.chapter {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--gutter);
}

.chapter + .chapter {
  margin-top: var(--s2);
}

.numeral {
  text-align: right;
}

.chapter .text,
.aside,
.work-row p {
  max-width: 62ch;
}

.now {
  margin-top: var(--s4);
}

.aside {
  margin-top: var(--s3);
}

/* Selected work: name over description */
.work-row {
  padding-block: var(--s3);
}

.work-row:first-child {
  padding-top: 0;
}

.work-row:last-child {
  padding-bottom: 0;
}

.work-row + .work-row {
  border-top: 1px solid var(--hair);
}

.work-row .name {
  line-height: 1.2;
}

.work-row p {
  margin-top: var(--s1);
}

/* Contact: text with a small portrait beside it; the portrait drops below when there is no room */
.contact-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s4);
}

.portrait {
  width: 9rem;
}

.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.contact-links {
  margin-top: var(--s3);
}

.contact-links li + li {
  margin-top: var(--s1);
}

/* Footer */
.site-footer {
  margin-top: var(--s5);
  padding-block: var(--s2) var(--s4);
  border-top: 1px solid var(--hair);
}

.items {
  display: flex;
  flex-wrap: wrap;
}

.items li + li::before {
  content: "·";
  padding-inline: 0.5em;
}

@media (max-width: 479px) {
  h1 {
    font-size: clamp(2.5rem, 5.6vw, 5.5rem);
  }
}

/* The row: margin column for structure, block column for content (DESIGN.md §5, §9) */
@media (min-width: 768px) {
  .row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    column-gap: var(--gutter);
    align-items: start;
  }

  .row > .margin {
    grid-column: 1;
    grid-row: 1;
  }

  .row > .block {
    grid-column: 2;
  }

  /* Chapter lists span both columns and share the first row with their label */
  .row > .full {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .site-header {
    align-items: baseline;
  }

  /* Labels leave room for a numeral on their line; they may wrap to two lines */
  h2 {
    max-width: calc(100% - 2.5rem);
    margin-bottom: 0;
  }

  .hero h1 {
    text-box: trim-start cap alphabetic;
  }
}

@media (min-width: 1024px) {
  .row {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  }
}