@font-face {
  font-family: "Imbue";
  src: url("../fonts/imbue-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --ground: #f5f4f0;
  --ink: #151515;
  --ink-display: #0a0a0a;
  --ink-soft: #4d4a45;
  --ochre: #e9a820;
  --cobalt: #2f5bd8;
  --coral: #e8553d;

  --display: "Imbue", "Bodoni 72", "Didot", serif;
  --text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* one comp pixel (the approved comp is 1792 wide) */
  --u: calc(100vw / 1792);
  --gutter: clamp(16px, 5.9vw, 106px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--ink) var(--ground);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.55;
  caret-color: var(--cobalt);
}

::selection { background: var(--ochre); color: var(--ink); }

img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

a { color: inherit; }

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 16px;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--ground);
}
.skip:focus { top: 16px; }

/* stones run off the page edges on purpose; nothing here needs to escape the clip */
.page { position: relative; overflow-x: clip; }

.display {
  color: var(--ink-display);
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 40;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0.005em;
}

/* The only control the world knows: an underlined link that fills with paint. */
.link {
  display: inline-block;
  padding-block: 0.15em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  background: linear-gradient(var(--ochre), var(--ochre)) no-repeat 0 100% / 100% 0;
  transition: background-size 0.35s var(--ease-out), text-decoration-color 0.2s;
}
.link:hover,
.link:focus-visible {
  background-size: 100% 100%;
  text-decoration-color: transparent;
}

/* ---------- Masthead ---------- */

.masthead {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  height: calc(var(--u) * 116);
}

.masthead__logo {
  position: absolute;
  left: 5.8%;
  top: calc(var(--u) * 8);
  height: calc(var(--u) * 104);
}
.masthead__logo img { height: 100%; width: auto; }

.masthead__nav {
  position: absolute;
  left: 43.1%;
  top: calc(var(--u) * 40);
  font-size: max(14px, calc(var(--u) * 19));
  line-height: calc(var(--u) * 34);
}
.masthead__nav ul { display: flex; white-space: nowrap; }
.masthead__nav li + li::before {
  content: "·";
  margin-inline: 0.62em;
}
.masthead__nav a {
  text-decoration: underline transparent 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.25s;
}
.masthead__nav a:hover,
.masthead__nav a:focus-visible { text-decoration-color: currentColor; }

/* ---------- Hero: the great stone and its trail ---------- */

.hero {
  position: relative;
  aspect-ratio: 1792 / 1024;
}

.hero__stone {
  position: absolute;
  left: 66.2%;
  top: 0;
  width: 33.8%;
  height: 88.9%;
  max-width: none;
  object-fit: cover;
  object-position: left top;
  z-index: 1;
}

.hero__trail {
  position: absolute;
  left: 6.7%;
  top: 22.5%;
  width: 61.8%;
  height: 72.5%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

.hero__title {
  position: absolute;
  left: 5.9%;
  top: 12.9%;
  z-index: 2;
  color: var(--ink-display);
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 40;
  font-size: calc(var(--u) * 117);
  line-height: 0.875;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__title > span:not(.sr-only) { display: block; }

.hero__intro {
  position: absolute;
  left: 6%;
  top: 54.2%;
  z-index: 2;
  font-size: max(15px, calc(var(--u) * 20.5));
  line-height: 1.52;
  white-space: nowrap;
}

.hero__cta {
  position: absolute;
  left: 6.1%;
  top: 64.6%;
  z-index: 2;
  font-size: max(15px, calc(var(--u) * 21.5));
  line-height: 1.2;
}

.dates__title {
  color: var(--ink-display);
  position: absolute;
  left: 1.7%;
  top: 67%;
  height: 21.7%;
  z-index: 2;
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 40;
  font-size: max(18px, calc(var(--u) * 36));
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.dates__note {
  position: absolute;
  left: 1.8%;
  top: 95.1%;
  font-size: max(12px, calc(var(--u) * 15.5));
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}

.date {
  position: absolute;
  z-index: 2;
  white-space: nowrap;
}
.date--1 { left: 59.5%; top: 43.6%; }
.date--2 { left: 53.8%; top: 58.6%; }
.date--3 { left: 41%; top: 77.1%; }

.date__show {
  color: var(--ink-display);
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 40;
  font-size: max(24px, calc(var(--u) * 42));
  line-height: 1;
  text-transform: uppercase;
}
.date__when {
  margin-top: calc(var(--u) * 8);
  font-size: max(14px, calc(var(--u) * 18.5));
  line-height: 1.35;
}
.date .link {
  margin-top: calc(var(--u) * 3);
  font-size: max(14px, calc(var(--u) * 18.5));
  line-height: 1.2;
}

/* ---------- Sections: the trail goes on down the page ---------- */

main > section,
.colophon {
  position: relative;
  padding-inline: var(--gutter);
}

main > section p,
.colophon p { max-width: 34em; }

.section-title {
  font-size: clamp(3rem, 6.2vw, 6rem);
  text-wrap: balance;
}

.pebble {
  width: clamp(116px, 13vw, 236px);
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.sample-note {
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* A photograph is a print laid flat on the ground, a little askew, held by a stone on its corner.
   No border, no CSS shadow: the only shadow on it is the one the stone brought with it. */
.print {
  position: relative;
  margin: 0;
}
.print__photo { width: 100%; }
.print__weight {
  position: absolute;
  z-index: 1;
  max-width: none;
  pointer-events: none;
}
.print figcaption { margin-top: 0.6rem; }

/* Actualités: two notes left where they fell, never side by side on a line */
.news {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2vw, 32px);
  padding-top: clamp(5rem, 11vw, 11rem);
}
.news__title { grid-column: 1 / span 6; }
.news__item { position: relative; }
.news__item--1 {
  grid-column: 1 / span 5;
  margin-top: clamp(2.5rem, 5vw, 5rem);
}
.news__item--2 {
  grid-column: 8 / span 5;
  margin-top: clamp(-9rem, -8vw, -3rem);
}
/* stones carry their photographed shadow, so they only ever turn a few degrees */
.print--news-1 { rotate: -1.2deg; }
.print--news-1 .print__weight { right: -9%; bottom: -12%; width: 30%; rotate: -5deg; }
.print--news-2 { rotate: 1deg; }
.print--news-2 .print__weight { left: -10%; top: -16%; width: 27%; rotate: 6deg; }
.news__date {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.news__headline {
  color: var(--ink-display);
  margin-block: 0.35rem 0.75rem;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 40;
  font-size: clamp(1.9rem, 2.7vw, 2.75rem);
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}
.news__item .link { margin-top: 0.9rem; }
.news .sample-note {
  grid-column: 2 / span 6;
  margin-top: 3rem;
}

/* Spectacles: each show is a print running off one side of the page, held by its own stone */
.shows { padding-top: clamp(6rem, 12vw, 12rem); }
.shows__title { margin-bottom: clamp(1.5rem, 3vw, 3rem); }

.show {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2vw, 32px);
  align-items: start;
}
.show__stone { max-width: none; pointer-events: none; }
.show__text { position: relative; z-index: 1; }
.show__name { font-size: clamp(3.5rem, 8.4vw, 8.5rem); }
.show__by {
  margin-block: 0.6rem 1.4rem;
  font-weight: 600;
}
.show__pending { margin-top: 0.4rem; color: var(--ink-soft); }
.show .link { margin-top: 1.5rem; }

.show--huis-clos { margin-top: clamp(1rem, 3vw, 3rem); }
.show--huis-clos .show__print {
  grid-column: 1 / span 7;
  grid-row: 1;
  margin-left: calc(-1 * var(--gutter) - 3vw);
  rotate: -1deg;
}
.show--huis-clos .show__stone { right: -17%; bottom: -22%; width: 56%; rotate: -4deg; }
.show--huis-clos .show__print figcaption { margin-left: calc(var(--gutter) + 3vw); }
.show--huis-clos .show__text {
  grid-column: 9 / span 4;
  grid-row: 1;
  margin-top: 4%;
}

.show--titou { margin-top: clamp(7rem, 13vw, 13rem); }
.show--titou .show__print {
  grid-column: 6 / span 7;
  grid-row: 1;
  margin-right: calc(-1 * var(--gutter) - 3vw);
  rotate: 1.2deg;
}
.show--titou .show__stone { left: -14%; bottom: -20%; width: 38%; rotate: 5deg; }
.show--titou .show__print figcaption { margin-left: 28%; }
.show--titou .show__text {
  grid-column: 2 / span 4;
  grid-row: 1;
  margin-top: 8%;
}

/* La compagnie: the sentence, whole, with one stone set down at its end */
.company {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2vw, 32px);
  padding-top: clamp(6rem, 12vw, 12rem);
}
.company__quote {
  grid-column: 1 / span 10;
  margin: 0;
  font-size: clamp(2.4rem, 5.1vw, 5.25rem);
  line-height: 1.1;
  text-transform: none;
  letter-spacing: -0.005em;
}
.company__quote p { max-width: none; text-wrap: balance; }
.company__quote p::before { content: "« "; }
.company__quote p::after { content: " »"; }
.company__print {
  grid-column: 1 / span 6;
  margin-top: clamp(3rem, 6vw, 6rem);
  margin-left: calc(-1 * var(--gutter) - 3vw);
  rotate: 1deg;
}
.company__print .print__weight { right: -9%; top: -15%; width: 27%; rotate: 6deg; }
.company__print figcaption { margin-left: calc(var(--gutter) + 3vw); }
.company__text {
  grid-column: 8 / span 4;
  align-self: center;
  margin-top: clamp(3rem, 6vw, 6rem);
}
.company__text .link { margin-top: 1.25rem; }

/* Action culturelle */
.culture {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2vw, 32px);
  padding-top: clamp(6rem, 13vw, 13rem);
}
.culture__title { grid-column: 1 / span 6; grid-row: 1; }
.culture__text {
  grid-column: 2 / span 4;
  grid-row: 2;
  margin-top: clamp(1.5rem, 3vw, 3rem);
}
.culture__text .link { margin-top: 1.25rem; }
.culture__print {
  grid-column: 7 / span 6;
  grid-row: 1 / span 2;
  margin-right: calc(-1 * var(--gutter) - 3vw);
  rotate: -1.3deg;
}
.culture__print .print__weight { left: -11%; bottom: -10%; width: 28%; rotate: -6deg; }
.culture__print figcaption { margin-left: 22%; }
.culture__pebble { position: absolute; }
.culture__pebble--2 { left: 34%; bottom: -16%; rotate: 5deg; }

/* Nous soutenir */
.support {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2vw, 32px);
  padding-top: clamp(6rem, 13vw, 13rem);
}
.support__title { grid-column: 5 / span 8; }
.support__pebble {
  grid-column: 2 / span 2;
  grid-row: 1 / span 2;
  align-self: center;
  rotate: -7deg;
  width: clamp(130px, 16vw, 290px);
}
.support__text {
  grid-column: 5 / span 7;
  margin-top: clamp(1.5rem, 3vw, 3rem);
}
.support__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem clamp(2rem, 5vw, 5rem);
  margin-block: 1.75rem 2rem;
}
.support__action {
  font-size: clamp(1.9rem, 2.7vw, 2.75rem);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}
.support__fineprint { font-size: 0.875rem; color: var(--ink-soft); }

/* Contact */
/* the page ends with the amulets met on the way, gathered, the trail leaving by the left edge */
.colophon {
  margin-top: clamp(7rem, 14vw, 14rem);
  padding-left: calc(var(--gutter) + 25%);
  padding-bottom: 2.5rem;
}
.colophon__trail {
  display: flex;
  align-items: flex-end;
  margin: clamp(3rem, 6vw, 6rem) 0 0 calc(-25vw - var(--gutter) - 4vw);
  pointer-events: none;
}
.colophon__trail img {
  width: clamp(120px, 17vw, 320px);
  max-width: none;
  flex: none;
}
.colophon__trail img:nth-child(1) { rotate: 7deg; translate: 0 20%; }
.colophon__trail img:nth-child(2) { rotate: -5deg; margin-left: -5vw; translate: 0 -6%; width: clamp(100px, 13vw, 250px); }
.colophon__trail img:nth-child(3) { rotate: 8deg; margin-left: -4vw; translate: 0 14%; }
.colophon__trail img:nth-child(4) { rotate: -3deg; margin-left: -5.5vw; translate: 0 -16%; width: clamp(140px, 21vw, 400px); }
.colophon__trail img:nth-child(5) { rotate: 6deg; margin-left: -5vw; translate: 0 6%; width: clamp(104px, 14vw, 270px); }
.colophon__trail img:nth-child(6) { rotate: -8deg; margin-left: -3.5vw; translate: 0 -22%; }
.colophon__title { font-size: clamp(3rem, 6.2vw, 6rem); }
.colophon__cols {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem clamp(2.5rem, 5vw, 5rem);
  margin-top: 2.5rem;
}
.colophon__nav { display: grid; gap: 0.35rem; }
.colophon__note {
  position: relative;
  margin-top: 4rem;
}

/* ---------- Motion: the trail is laid down from the great stone ---------- */

@property --laid {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 130%;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__trail {
    mask-image: linear-gradient(to bottom left, var(--ink) calc(var(--laid) - 22%), transparent var(--laid));
    animation: lay-trail 1.9s var(--ease-out) 0.25s both;
  }
  @keyframes lay-trail {
    from { --laid: 0%; }
    to { --laid: 130%; }
  }

  .hero__stone { animation: settle-stone 1.6s var(--ease-out) both; }
  @keyframes settle-stone {
    from { translate: 3% -2%; rotate: 2.5deg; }
  }

  .date { animation: land 0.9s var(--ease-out) both; }
  .date--1 { animation-delay: 0.75s; }
  .date--2 { animation-delay: 1.05s; }
  .date--3 { animation-delay: 1.35s; }
  @keyframes land {
    from { opacity: 0; translate: 0 0.6em; filter: blur(3px); }
  }

  /* stones further down roll the last few degrees into place as they come into view */
  @supports (animation-timeline: view()) {
    .pebble,
    .show__stone {
      animation: roll-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 38%;
    }
    /* a print comes up like one in the tray: colour arrives as it enters the screen */
    .print__photo {
      animation: develop linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }
    @keyframes develop {
      from { filter: grayscale(1) contrast(0.7) brightness(1.25); }
    }
    @keyframes roll-in {
      from { translate: 7vw 1.5vw; rotate: 12deg; }
    }
  }
}

/* ---------- Narrow screens: the stone leads, the trail turns into a band ---------- */

/* on the staircase the place sits under the date, so no caption ever runs onto the great stone */
@media (min-width: 1100px) {
  .date__sep { display: none; }
  .date__place { display: block; }
}

/* type has reached its floor here, so the navigation steps left to stay clear of the stone */
@media (min-width: 1100px) and (max-width: 1439px) {
  .masthead__nav { left: 36%; }
}

@media (max-width: 1099px) {
  :root { --stone-size: min(96vw, 600px); }

  .masthead {
    position: relative;
    height: auto;
    padding: 14px var(--gutter) 0;
  }
  .masthead__logo {
    position: static;
    display: block;
    height: 62px;
    width: max-content;
  }
  /* the navigation stands as a short column in the lee of the stone */
  .masthead__nav {
    position: static;
    margin-top: 10px;
    max-width: 46%;
    font-size: 1.0625rem;
    line-height: 1.3;
  }
  .masthead__nav ul { display: block; white-space: normal; }
  .masthead__nav li + li::before { content: none; }
  .masthead__nav a { display: inline-block; padding-block: 0.55rem; }

  /* static, so the stone hangs from the top right corner of the page, beside the masthead */
  .hero {
    position: static;
    aspect-ratio: auto;
    padding: 2rem var(--gutter) 0;
  }
  .hero__stone {
    left: auto;
    right: calc(var(--stone-size) * -0.42);
    top: calc(var(--stone-size) * -0.3);
    width: var(--stone-size);
    height: auto;
    z-index: 0;
  }
  .hero__title,
  .hero__intro,
  .hero__cta,
  .dates__title,
  .dates__note,
  .date { position: static; }

  .hero__title {
    position: relative;
    left: auto;
    top: auto;
    font-size: min(16.8vw, 7rem);
  }
  .hero__intro {
    margin-top: 0.5rem;
    font-size: 1.0625rem;
    white-space: normal;
    max-width: 30em;
  }
  .br-wide { display: none; }
  .hero__cta { margin-top: 1.1rem; font-size: 1.0625rem; }

  .hero__trail {
    position: static;
    display: block;
    width: calc(100% + 2 * var(--gutter) + 10vw);
    max-width: 820px;
    height: auto;
    margin: 1.5rem 0 0 calc(-1 * var(--gutter) - 4vw);
  }

  .dates__title {
    writing-mode: horizontal-tb;
    rotate: none;
    height: auto;
    margin-top: 1.75rem;
    font-size: 1.9rem;
  }
  .dates__list { margin-top: 0.9rem; display: grid; gap: 1.1rem; }
  .date { white-space: normal; }
  .date--2 { margin-left: 14%; }
  .date--3 { margin-left: 28%; }
  .date__show { font-size: 1.9rem; }
  .date__when,
  .date .link { font-size: 1.0625rem; margin-top: 0.3rem; }
  .date .link { padding-block: 0.45rem; }
  .dates__note { margin-top: 2rem; }

  .news,
  .company,
  .culture,
  .support { display: block; }

  .news__item--1 { margin-top: 2.5rem; }
  .news__item--2 { margin: 5rem 0 0 auto; }
  .print--news-1 { margin-left: calc(-1 * var(--gutter) - 2vw); margin-right: 12%; }
  .print--news-1 figcaption { margin-left: calc(var(--gutter) + 2vw); }
  .print--news-2 { margin-left: 14%; margin-right: calc(-1 * var(--gutter) - 2vw); }
  .news__item--2 > :not(.print) { margin-left: 14%; }
  .news .sample-note { margin-top: 2.5rem; }

  .shows__title { margin-left: 0; }
  .show { display: block; }
  .show--huis-clos .show__print {
    margin: 2rem 8% 0 calc(-1 * var(--gutter) - 2vw);
  }
  .show--huis-clos .show__print figcaption { margin-left: calc(var(--gutter) + 2vw); }
  .show--huis-clos .show__stone { right: -12%; bottom: -20%; width: 58%; }
  .show--huis-clos .show__text { margin-top: 4.5rem; }
  .show--titou { margin-top: 5rem; }
  .show--titou .show__print {
    margin: 0 calc(-1 * var(--gutter) - 2vw) 0 10%;
  }
  .show--titou .show__stone { left: -12%; bottom: -22%; width: 42%; }
  .show--titou .show__text { margin-top: 4.5rem; }

  .company__print {
    margin: 3.5rem 10% 0 calc(-1 * var(--gutter) - 2vw);
  }
  .company__print figcaption { margin-left: calc(var(--gutter) + 2vw); }
  .company__text { margin-top: 2rem; }

  .culture__print {
    margin: 2.5rem calc(-1 * var(--gutter) - 2vw) 0 12%;
  }
  .culture__pebble--2 { position: static; display: block; margin: 2.5rem 0 0 10%; }
  .culture__text { margin-top: 3.5rem; }

  .support__pebble { display: block; margin: 0 0 1rem 58%; }
  .support__text { margin-top: 1.5rem; }
  .support__actions { flex-direction: column; gap: 0.5rem; }

  .colophon { padding-left: var(--gutter); }
  .colophon__trail { margin-left: calc(-1 * var(--gutter) - 9vw); }
  .colophon__trail img { width: 24vw; }
  .colophon__trail img:nth-child(2) { width: 19vw; }
  .colophon__trail img:nth-child(4) { width: 28vw; }
  .colophon__trail img:nth-child(5) { width: 20vw; }
}

/* tablets: the navigation is one row beside the stone, so the hero keeps the first screen */
@media (min-width: 700px) and (max-width: 1099px) {
  .masthead__nav {
    max-width: calc(100vw - var(--stone-size) * 0.5 - 2 * var(--gutter));
  }
  .masthead__nav ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.25rem;
  }
}