@charset "UTF-8";

/* Fonts */

@font-face {
  font-display: swap;
  font-family: 'Aboreto';
  src: url('../fonts/aboreto.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  src: url('../fonts/garamond-400-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: italic;
  src: url('../fonts/garamond-400-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-weight: 500;
  src: url('../fonts/garamond-500-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/garamond-500-italic.woff2') format('woff2');
}

/* Tokens: one 1.272 modular scale for type, space and measure (DESIGN.md). */

:root {
  --ratio: 1.272;
  --base: 1.272rem;

  --2xs: var(--base);
  --3xs: calc(var(--2xs) / var(--ratio));
  --4xs: calc(var(--3xs) / var(--ratio));
  --5xs: calc(var(--4xs) / var(--ratio));
  --6xs: calc(var(--5xs) / var(--ratio));
  --xs: calc(var(--2xs) * var(--ratio));
  --s: calc(var(--xs) * var(--ratio));
  --m: calc(var(--s) * var(--ratio));
  --l: calc(var(--m) * var(--ratio));
  --xl: calc(var(--l) * var(--ratio));
  --2xl: calc(var(--xl) * var(--ratio));
  --3xl: calc(var(--2xl) * var(--ratio));

  --page: calc(96rem + var(--l) * 2);
  --measure: calc(var(--page) / var(--ratio));
  --measure-m: calc(var(--measure) / var(--ratio));
  --measure-s: calc(var(--measure-m) / var(--ratio));
  --measure-xs: calc(var(--measure-s) / var(--ratio));
  --measure-2xs: calc(var(--measure-xs) / var(--ratio));
  --measure-3xs: calc(var(--measure-2xs) / var(--ratio));
  --measure-4xs: calc(var(--measure-3xs) / var(--ratio));
  --measure-5xs: calc(var(--measure-4xs) / var(--ratio));
  --measure-6xs: calc(var(--measure-5xs) / var(--ratio));

  --primary: #b11a29;
  --foreground: #1a1a16;
  --background: #fffff8;
  --muted: #6b6b66;
  --surface: #fff;

  --serif: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --display: 'Aboreto', 'Century Gothic', Arial, sans-serif;
}

@media screen and (max-width: 640px) {
  :root {
    --base: 1rem;
  }
}

/* Base */

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

html {
  font-family: var(--serif);
  font-size: 62.5%;
  font-variant-numeric: oldstyle-nums;
  font-synthesis: none;
  line-height: 1.4;
  overflow-wrap: break-word;
  scrollbar-gutter: stable;
  tab-size: 4;
  text-size-adjust: 100%;
  text-wrap: pretty;
}

body {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--l);
  color: var(--foreground);
  background: var(--background);
  accent-color: var(--primary);
  font-size: var(--m);
}

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

/* Flow: blocks share the reading measure and a left inset; lists and
   quotations indent further. Each block's margin is its own size step. */

:where(h1, h2, h3, h4, p, blockquote, ol, ul, form, table, figure:not(.hero, .collage, .pages figure), .button, .pages, .testimonial, .support) {
  max-width: var(--measure);
  padding-inline-start: var(--s);
}

:where(blockquote, ol, ul, form, table) {
  padding-inline: calc(var(--s) + var(--3xl)) var(--3xl);
}

nav ul,
footer ul,
form ul,
blockquote p,
.pages p,
.pages figure {
  padding: 0;
}

h1 {
  margin: var(--xl) 0 var(--l);
  scroll-margin-top: var(--xl);
  font-size: var(--2xl);
}

h2 {
  margin: var(--l) 0 var(--m);
  scroll-margin-top: var(--l);
  font-size: var(--xl);
}

h3,
.support {
  margin: var(--m) 0 var(--s);
  scroll-margin-top: var(--m);
}

h3 {
  font-size: var(--l);
}

h4 {
  font-size: var(--m);
}

:where(blockquote, ol, ul, hr, figure, table, .newsletter, .button, .testimonial) {
  margin: var(--m) 0;
  scroll-margin-top: var(--m);
}

:where(h4, p, .pages) {
  margin: var(--s) 0;
  scroll-margin-top: var(--s);
}

main > article > :last-child {
  margin-block-end: 0;
}

figcaption {
  margin: var(--xs) 0;
  scroll-margin-top: var(--xs);
}

figure:not(.hero, .collage, .pages figure) > img {
  display: block;
  width: 100%;
}

ul {
  list-style-type: square;
}

hr {
  border: 0;
  border-top: 1px solid var(--foreground);
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  padding: var(--xs);
  vertical-align: top;
}

td:first-child {
  padding-inline-end: var(--s);
}

/* Type */

h1,
nav header,
button,
.button-link,
.footer-title,
.event-summary {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

h2,
h3,
h4,
blockquote,
figcaption,
form label,
nav ul,
footer ul {
  font-style: italic;
  font-weight: 400;
}

strong,
b {
  font-weight: 500;
}

small,
figcaption,
blockquote cite,
form,
.button-link,
.testimonial .arrow {
  font-size: var(--s);
}

sub,
sup {
  font-size: smaller;
  line-height: 0;
}

figcaption,
footer {
  text-align: center;
}

blockquote p::before {
  content: open-quote;
}

blockquote p::after {
  content: close-quote;
}

blockquote cite,
.essay-meta > small,
.list-navigation > small {
  display: block;
  text-align: end;
  text-wrap: balance;
}

.page-lede {
  margin: var(--m) 0 var(--s);
  scroll-margin-top: var(--m);
  font-size: var(--l);
  font-style: italic;
}

.event-summary {
  width: fit-content;
  max-width: var(--measure);
  margin: var(--s) 0;
  padding-inline-start: var(--s);
  font-size: var(--xs);
  scroll-margin-top: var(--s);
}

.event-summary > p {
  display: inline;
  margin: 0;
  padding: 0;
}

.event-summary > p + p::before {
  content: ' · ';
}

.visually-hidden,
.testimonial > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Links: crimson, underlined on hover and focus; navigation and footer
   links start in ink. */

a {
  color: var(--primary);
  text-decoration: none;
}

a:is(:hover, :focus) {
  text-decoration: underline;
}

:where(nav, footer) a {
  color: var(--foreground);
}

:where(nav, footer) a:is(:hover, :focus) {
  color: var(--primary);
}

nav header a:is(:hover, :focus) {
  color: var(--foreground);
  text-decoration: none;
}

:is(a, button, input[type='radio'], input[type='checkbox']):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  z-index: 10;
  inset-block-start: var(--2xs);
  inset-inline-start: var(--2xs);
  padding: var(--3xs) var(--2xs);
  border: 1px solid var(--primary);
  border-radius: var(--3xs);
  color: var(--background);
  background: var(--primary);
  transform: translateY(calc(-100% - var(--l)));
}

.skip-link:focus {
  color: var(--background);
  text-decoration: none;
  transform: none;
}

/* Buttons: a primary action is crimson and reverses on hover; a
   secondary one is the inverse. */

button,
.button-link {
  width: fit-content;
  padding: var(--3xs) var(--2xs);
  border: 1px solid var(--primary);
  border-radius: var(--3xs);
  color: var(--background);
  background: var(--primary);
  font-size: var(--s);
  font-style: normal;
  line-height: 1.4;
  text-align: center;
}

button:is(:hover, :focus),
a.button-link[data-variant='primary']:is(:hover, :focus),
.button-link[data-variant='secondary'] {
  color: var(--primary);
  background: var(--background);
  text-decoration: none;
}

.button-link[data-variant='secondary']:is(:hover, :focus) {
  color: var(--background);
  background: var(--primary);
}

button,
input[type='radio'],
.arrow {
  cursor: pointer;
}

.button {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: var(--2xs);
}

/* Forms: centred rows of serif fields on white. */

form ul {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--2xs);
  margin-block: 0;
  padding-block-end: 1px;
}

form li {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: var(--2xs);
  text-align: center;
}

form label {
  flex: 1 1 var(--measure-xs);
  min-width: 0;
  max-width: 100%;
}

input,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: var(--s);
  line-height: 1.4;
}

:where(input[type='email'], input[type='text'], input[type='tel'], textarea) {
  flex: 0 1 var(--measure-s);
  width: 100%;
  padding: var(--3xs) var(--2xs);
  border: 1px solid var(--muted);
  border-radius: var(--3xs);
  color: var(--foreground);
  background: var(--surface);
}

:where(input[type='email'], input[type='text'], input[type='tel'], textarea):focus {
  border-color: transparent;
  outline: 1px solid var(--foreground);
  outline-offset: 1px;
}

:where(input, textarea):user-invalid {
  border-color: var(--primary);
}

:where(input[type='email'], input[type='text'], input[type='tel'], textarea):user-invalid:focus {
  border-color: transparent;
  outline-color: var(--primary);
}

textarea {
  resize: none;
  vertical-align: top;
}

::placeholder {
  color: var(--muted);
  font-style: italic;
  text-align: center;
}

:focus::placeholder {
  color: transparent;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  margin-block-end: var(--2xs);
}

fieldset > span {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--3xs);
}

form li:has(input[type='radio'], input[type='checkbox']) {
  flex-wrap: nowrap;
  align-items: baseline;
}

form li:has(label + label) {
  flex-flow: column;
  align-self: center;
  width: fit-content;
  margin-block-end: var(--2xs);
}

form.newsletter li:has(label + label):last-child {
  margin-block-end: 0;
}

form li:has(input[type='radio'], input[type='checkbox']) :is(input, label) {
  flex: 0 0 auto;
}

form label:has(input[type='radio']) {
  display: inline-flex;
  align-items: center;
  gap: var(--4xs);
}

form li span:has(input[type='checkbox']) {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: var(--2xs);
  width: min(100%, var(--measure-xs));
  text-align: start;
}

form li span:has(input[type='checkbox']) label {
  flex: 1 1 0;
}

form li > small {
  flex: 0 0 100%;
}

/* Navigation: the identity, then a wrapping row of links with the
   language switch at its end. */

nav,
nav header {
  display: flex;
  gap: var(--2xs);
}

nav {
  flex-flow: column nowrap;
}

nav header a {
  display: flex;
  align-self: center;
  align-items: center;
  gap: var(--2xs);
}

nav header img {
  width: auto;
  max-width: none;
  height: var(--s);
}

nav ul,
footer ul {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--2xs);
  margin: 0;
  list-style: none;
}

nav ul {
  max-width: none;
}

nav li {
  display: flex;
  align-items: center;
}

.language-switch {
  margin-inline-start: auto;
}

.translations {
  display: flex;
}

.translations .button-link {
  padding: var(--6xs) var(--5xs);
  border-radius: 0;
  font-size: var(--2xs);
}

.translations > :first-child {
  border-inline-end: 0;
  border-start-start-radius: var(--4xs);
  border-end-start-radius: var(--4xs);
}

.translations > :last-child {
  border-inline-start: 0;
  border-start-end-radius: var(--4xs);
  border-end-end-radius: var(--4xs);
}

.translations [aria-current='page'] {
  cursor: default;
}

/* Footer: centred under a rule, inside the reading measure. */

footer {
  max-width: var(--measure);
  text-wrap: balance;
}

footer hr {
  margin-inline-start: var(--s);
}

footer div {
  max-width: var(--measure-m);
  margin: auto;
}

footer div > :is(h2, p) {
  padding-inline-start: 0;
}

footer div > h2 {
  margin-block-end: var(--2xs);
  font-size: var(--m);
  line-height: 1.2;
}

footer div ul {
  justify-content: center;
  margin-block-start: var(--2xs);
}

footer button {
  font-size: var(--xs);
}

.footer-title {
  display: block;
}

/* Newsletter: a small basis keeps the button beside the field wherever
   both fit; the field then grows to its measure. */

.newsletter input[name='email'] {
  flex: 1 1 6em;
  max-width: var(--measure-3xs);
}

.newsletter-language {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: var(--2xs);
}

.newsletter-language label {
  flex: none;
  white-space: nowrap;
}

/* Images: panoramic heroes and collages, 16:9 video, cover-cropped. */

.hero,
.video {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero {
  max-width: var(--page);
  aspect-ratio: 2.4;
}

.video {
  aspect-ratio: 16 / 9;
}

.hero img,
.video iframe {
  position: absolute;
  inset: 0;
  border: 0;
}

.hero img,
.video iframe,
.collage img,
.pages img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collage {
  display: flex;
  gap: var(--2xs);
  width: 100%;
  max-width: var(--page);
  aspect-ratio: 2.4;
}

.collage div {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Support tiers: name and price on one baseline. */

.support {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--2xs);
}

.support > * {
  margin: 0;
  padding-inline-start: 0;
}

.support h2 {
  min-width: 0;
}

.support > p {
  flex: none;
  white-space: nowrap;
}

/* Testimonials: one slide at a time, chosen by hidden radios. */

.testimonial {
  display: grid;
  position: relative;
}

.testimonial:has(> input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: var(--4xs);
}

.testimonial-slide {
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  visibility: hidden;
}

.testimonial > input:checked + .testimonial-slide {
  visibility: visible;
}

.testimonial blockquote {
  grid-area: 1 / 2;
  margin: 0;
  padding-inline: var(--3xl);
}

.testimonial cite {
  display: grid;
  justify-content: end;
}

.arrow {
  grid-row: 1;
  z-index: 1;
  user-select: none;
}

.arrow:is(:hover, :focus, :active) {
  color: var(--primary);
}

.arrow-prev {
  grid-column: 1;
}

.arrow-next {
  grid-column: 3;
}

/* Page previews: a cover-cropped figure beside unboxed copy. */

.pages {
  display: flex;
}

.pages:first-of-type {
  margin-block-start: var(--m);
}

.pages:last-of-type {
  margin-block-end: var(--m);
}

.page-card-title {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-style: normal;
  font-weight: 400;
  line-height: inherit;
}

blockquote p,
.pages p {
  margin: 0;
}

.pages figure {
  flex: 0 1 var(--measure-xs);
  margin: 0;
  overflow: hidden;
}

.pages img {
  display: block;
}

.event-cards > .events:nth-child(even) {
  flex-direction: row-reverse;
}

.events,
.events > div,
.events-list {
  gap: var(--2xs);
}

.events > div,
.events-list div + div {
  display: flex;
  flex-direction: column;
}

.events > div {
  flex: 1 1 0;
  min-width: 0;
}

.events-list div + div {
  flex: 1;
}

.events-list div {
  flex: 0 1 var(--measure-3xs);
}

.essays {
  flex-direction: column;
}

.essays div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

/* Small screens: the base step contracts and blocks align to the
   viewport; previews and events stack. */

@media screen and (max-width: 640px) {
  body {
    padding: var(--m);
  }

  :where(h1, h2, h3, h4, p, figure:not(.hero, .collage, .pages figure), .button, .pages, .testimonial, .support) {
    padding-inline-start: 0;
  }

  :where(blockquote, ol, ul, form) {
    padding-inline: var(--xl);
  }

  .newsletter input[name='email'] {
    max-width: var(--measure-5xs);
  }

  .testimonial blockquote {
    padding-inline: var(--s);
  }

  .pages figure {
    flex: none;
    width: 100%;
    aspect-ratio: 2.4;
  }

  .events,
  .event-cards > .events:nth-child(even) {
    flex-direction: column;
  }

  .events-list div {
    flex: 0 1 auto;
    width: var(--measure-6xs);
  }
}