@charset "UTF-8";

/* Fonts */

@font-face {
  font-display: swap;
  font-family: 'Aboreto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/aboreto.woff2') format('woff2'), url('../fonts/aboreto.ttf') format('truetype');
}

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

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

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

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

/* Variables */

: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));

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

  --color-fg: #1a1a16;
  --color-bg: #fffff8;
  --color-hl: #b11a29;
  --color-gr: #6b6b66;
  --color-white: #fff;
}

/* Base */

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

html {
  font-family: 'EB Garamond', Garamond, 'Times New Roman', serif;
  font-size: 62.5%;
  font-variant-numeric: oldstyle-nums;
  font-synthesis: none;
  overflow-wrap: break-word;
  scrollbar-gutter: stable;
  tab-size: 4;
  text-wrap: pretty;
  text-size-adjust: 100%;
}

html,
button,
input,
select,
textarea {
  line-height: 1.4;
}

body {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--l);
  color: var(--color-fg);
  background: var(--color-bg);
  accent-color: var(--color-hl);
  font-size: var(--m);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

button,
input,
select,
textarea,
blockquote p,
nav ul,
footer ul,
.testimonial blockquote,
.seasons p,
.pages p,
.pages figure {
  margin: 0;
}

ul {
  list-style-type: square;
}

form ul,
form li,
nav,
nav header,
nav ul,
footer ul,
.button,
.seasons div,
.seasons div a,
.events,
.events > div,
.events-list,
.support,
.collage {
  gap: var(--2xs);
}

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

.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(--color-hl);
  border-radius: var(--3xs);
  color: var(--color-bg);
  background: var(--color-hl);
  transform: translateY(calc(-100% - var(--l)));
}

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

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

.event-summary {
  width: fit-content;
  max-width: var(--container-l);
  margin: var(--s) 0;
  padding-inline-start: var(--s);
  font-family: 'Aboreto', 'Century Gothic', Arial, sans-serif;
  font-size: var(--xs);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-align: start;
  text-transform: uppercase;
  scroll-margin-top: var(--s);
}

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

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

/* Typography */

strong,
b {
  font-weight: 500;
}

nav header,
h1,
.footer-title,
.seasons header,
button,
.button-link,
.season-title {
  font-family: 'Aboreto', 'Century Gothic', Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

h2,
h3,
h4 {
  font-style: italic;
  font-weight: 400;
}

h1 {
  font-size: var(--2xl);
}

h2 {
  font-size: var(--xl);
}

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

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

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

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

input,
select,
textarea {
  font-family: inherit;
}

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

sub {
  vertical-align: sub;
}

sup {
  vertical-align: super;
}

.translations .button-link {
  font-size: var(--2xs);
}

figcaption,
form li,
footer,
button,
input[type='submit'],
.button-link,
::placeholder,
.seasons * {
  text-align: center;
}

blockquote {
  text-align: start;
}

blockquote,
figcaption,
::placeholder,
form label,
nav ul,
footer ul {
  font-style: italic;
}

input,
select,
textarea,
button,
input[type='button'],
input[type='submit'],
input[type='reset'],
.button-link {
  font-style: normal;
}

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

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

blockquote cite {
  display: block;
  text-align: end;
  text-wrap: balance;
}

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

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

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

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

thead {
  display: table-header-group;
}

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

/* Links and focus */

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

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

/* In-text links need more than color to be distinguishable. */
main p a,
main li a {
  text-decoration: underline;
}

:where(nav, footer, .seasons) a {
  color: var(--color-fg);
}

:where(nav, footer, .seasons) a:hover,
:where(nav, footer, .seasons) a:focus {
  color: var(--color-hl);
}

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

.seasons a:hover,
.seasons a:focus {
  text-decoration: none;
}

a:focus-visible:not(.button-link),
.skip-link:focus-visible,
button:focus-visible,
.button-link:focus-visible {
  outline: 2px solid var(--color-hl);
  outline-offset: 2px;
}

a.email {
  color: var(--color-hl);
  text-decoration: underline;
}

/* Forms */

form ul {
  display: flex;
  flex-flow: column nowrap;
  margin-block: 0;
  padding-block-end: 1px;
}

form li {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

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

:where(
  input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='reset']):not([type='hidden']),
  select,
  textarea
) {
  flex: 0 1 var(--container-s);
  width: 100%;
  padding: var(--3xs) var(--2xs);
  border: 1px solid var(--color-gr);
  border-radius: var(--3xs);
  color: var(--color-fg);
  background: var(--color-white);
}

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

:where(
  input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='reset']):not([type='hidden']),
  select,
  textarea
):focus {
  border-color: transparent;
}

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

:where(
  input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='reset']):not([type='hidden']),
  select,
  textarea
):focus:not(:user-invalid) {
  outline: 1px solid var(--color-fg);
  outline-offset: 1px;
}

:where(
  input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='reset']):not([type='hidden']),
  select,
  textarea
):user-invalid:focus {
  border-color: transparent;
  outline: 1px solid var(--color-hl);
  outline-offset: 1px;
}

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

:focus::placeholder {
  color: transparent;
}

::placeholder {
  color: var(--color-gr);
}

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

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

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

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

form li:has(label + label):has(input[type='radio']) {
  flex-flow: column;
  width: fit-content;
  align-self: center;
  margin-block-end: var(--2xs);
}

form.newsletter li:has(label + label):has(input[type='radio']):last-child {
  margin-block-end: 0;
}

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

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

form li:has(input[type='radio']) label {
  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(--container-xs));
  text-align: start;
}

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

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

.error {
  color: var(--color-hl);
}

/* Navigation and footer */

nav {
  display: flex;
  flex-flow: column nowrap;
}

nav header {
  display: flex;
  flex-flow: row nowrap;
}

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

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

nav ul,
footer ul {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  list-style: none;
}

nav ul {
  max-width: none;
}

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

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

.translations {
  display: flex;
}

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

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

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

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

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

.footer-title {
  display: block;
}

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

footer ul {
  justify-content: center;
}

/* Buttons and action links */

.button {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
}

button,
input[type='button'],
input[type='submit'],
input[type='reset'],
.button-link {
  width: fit-content;
  padding: var(--3xs) var(--2xs);
  border: 1px solid var(--color-hl);
  border-radius: var(--3xs);
  cursor: pointer;
}

button,
input[type='submit'],
.button-link[data-variant='primary'] {
  color: var(--color-bg);
  background: var(--color-hl);
}

button:hover,
button:focus,
input[type='submit']:hover,
input[type='submit']:focus,
.button-link[data-variant='primary']:hover,
.button-link[data-variant='primary']:focus {
  color: var(--color-hl);
  background: var(--color-bg);
  text-decoration: none;
}

.button-link[data-variant='secondary'] {
  color: var(--color-hl);
  background: var(--color-bg);
}

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

.translations .button-link {
  padding: var(--6xs) var(--5xs);
}

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

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

.translations > :not(:first-child):not(:last-child) {
  border-inline-start: 0;
  border-radius: 0;
}

.translations [aria-current='page'],
.translations [aria-current='page']:hover,
.translations [aria-current='page']:focus {
  color: var(--color-bg);
  background: var(--color-hl);
  cursor: default;
  text-decoration: none;
}

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

/* Hero, video and collage */

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

.hero img,
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  object-position: center;
}

.hero {
  max-width: var(--container-xl);
  aspect-ratio: 2.4 / 1;
}

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

.collage {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  max-width: var(--container-xl);
  aspect-ratio: 2.4 / 1;
}

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

.collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Newsletter */

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

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

.newsletter-language label {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--4xs);
  white-space: nowrap;
}

/* Seasons and support */

.seasons div {
  display: flex;
  flex-flow: row nowrap;
  align-items: start;
  justify-content: center;
}

.seasons div a {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.seasons img {
  max-width: var(--3xl);
}

.support {
  display: flex;
  flex-flow: row nowrap;
  align-items: baseline;
  justify-content: space-between;
}

.support h2,
.support p {
  margin: 0;
  padding-inline-start: 0;
}

.support h2 {
  min-width: 0;
}

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

/* Testimonials */

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

.testimonial > input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.testimonial:has(> input[type='radio']:focus-visible) {
  outline: 2px solid var(--color-hl);
  outline-offset: var(--4xs);
}

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

.testimonial > input[type='radio']:checked + .testimonial-slide {
  visibility: visible;
}

.testimonial blockquote {
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
  padding-inline: var(--3xl);
}

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

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

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

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

.testimonial .arrow:hover,
.testimonial .arrow:focus,
.testimonial .arrow:active {
  color: var(--color-hl);
}

/* Cards */

.pages {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
}

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

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

.pages img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.events > div {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-flow: column nowrap;
}

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

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

.events-list div + div {
  display: flex;
  flex: 1;
  flex-flow: column nowrap;
}

.essays {
  display: flex;
  flex-flow: column nowrap;
}

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

/* Responsive */

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

  body {
    padding: var(--m);
  }

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

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

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

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

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

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

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