@font-face {
  font-family: 'geomanist';
  src: url('../fonts/geomanist-regular-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: 'geomanist';
  src: url('../fonts/geomanist-light-webfont.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist';
  src: url('../fonts/geomanist-medium-webfont.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
:root {

  --size-space: var(--step-0);
  --size-logo: 25vi;
  --size-linelength: 60rem;
  --size-gutter: 5vi;
  --size-constrain: calc(var(--size-logo) + var(--size-gutter) + var(--size-linelength));

  --font-stack: 'geomanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --named-color-blue: #49498D;
  --named-color-yellow: #FFFF73;
  --named-color-pink: #F2AEFA;
  --named-color-lightblue: #AAAAF9;
  --named-color-aqua: #BDFDFE;
  --named-color-white: #FFFFFF;

  --color-page-default: oklch(from var(--named-color-blue) l c h);
  --color-page-dark: oklch(from var(--color-page-default) calc(l / 2) c h);
  --color-page-mid: oklch(from var(--named-color-lightblue) l c h);
  --color-page-highlight: oklch(from var(--named-color-aqua) l c h);
  --color-ink-default: oklch(from var(--named-color-white) l c h);
  --color-ink-mid: oklch(from var(--named-color-pink) l c h);
  --color-ink-highlight: oklch(from var(--named-color-yellow) l c h);
  @media (prefers-color-scheme: dark) {
    --color-page-default: oklch(from var(--named-color-blue) calc(l / 2) c h);
  }
  @media (prefers-contrast: more) {
    --color-page-default: oklch(from var(--named-color-blue) calc(l / 4) c h);
  }

  --image-star: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" fill="none"><path stroke="%23FFFFFF" stroke-linecap="round" stroke-width="4" d="m3 3 10 10M13 3 3 13M3 8h10M8 3v10"/></svg>');

  --image-cross: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1750 1750"><symbol id="cross"><path fill="%23BDFDFE" d="M12.5526 73.1615C-4.18419 56.4247 -4.18419 29.2893 12.5526 12.5525C29.2893 -4.18416 56.425 -4.18416 73.1617 12.5525L150 89.3907L226.838 12.5525C243.575 -4.18416 270.711 -4.18416 287.447 12.5525C304.184 29.2893 304.184 56.4247 287.447 73.1615L210.609 150L287.447 226.838C304.184 243.575 304.184 270.711 287.447 287.447C270.711 304.184 243.575 304.184 226.838 287.447L150 210.609L73.1617 287.447C56.425 304.184 29.2893 304.184 12.5526 287.447C-4.18419 270.711 -4.18419 243.575 12.5526 226.838L89.3908 150L12.5526 73.1615Z"/></symbol><g><use href="%23cross" x="0" y="0"/><use href="%23cross" x="350" y="350"/><use href="%23cross" x="700" y="700"/><use href="%23cross" x="1050" y="1050"/><use href="%23cross" x="1400" y="1400"/><use href="%23cross" x="1400" y="0"/><use href="%23cross" x="1050" y="350"/><use href="%23cross" x="350" y="1050"/><use href="%23cross" x="0" y="1400"/></g></svg>');

  --image-slash: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1750 1750"><symbol id="slash"><path fill="%23FFFF73" d="M287.447 12.5916C304.184 29.3236 304.184 56.4518 287.447 73.1835L73.1617 287.409C56.425 304.14 29.2893 304.14 12.5526 287.409C-4.18419 270.677 -4.18419 243.548 12.5526 226.817L226.838 12.5916C243.575 -4.14054 270.711 -4.14054 287.447 12.5916Z"/></symbol><g><use href="%23slash" x="0" y="0"/><use href="%23slash" x="350" y="350"/><use href="%23slash" x="700" y="700"/><use href="%23slash" x="1050" y="1050"/><use href="%23slash" x="1400" y="1400"/></g></svg>');

  --image-splat: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1750 1750"><symbol id="splat"><path fill="%23F2AEFA" d="M12.553 73.162c-16.737-16.737-16.737-43.873 0-60.61 16.736-16.736 43.872-16.736 60.609 0l33.981 33.982v-3.677C107.143 19.187 126.331 0 150 0s42.857 19.188 42.857 42.857v3.677l33.981-33.981c16.737-16.737 43.873-16.737 60.609 0 16.737 16.736 16.737 43.872 0 60.609l-33.981 33.981h3.677C280.812 107.143 300 126.331 300 150s-19.188 42.857-42.857 42.857h-3.677l33.981 33.981c16.737 16.737 16.737 43.873 0 60.609-16.736 16.737-43.872 16.737-60.609 0l-33.981-33.981v3.677C192.857 280.812 173.669 300 150 300s-42.857-19.188-42.857-42.857v-3.677l-33.981 33.981c-16.737 16.737-43.873 16.737-60.61 0-16.736-16.736-16.736-43.872 0-60.609l33.982-33.981h-3.677C19.187 192.857 0 173.669 0 150s19.188-42.857 42.857-42.857h3.677L12.553 73.162Z"/></symbol><g><use href="%23splat" x="0" y="0"/><use href="%23splat" x="700" y="0"/><use href="%23splat" x="1400" y="0"/><use href="%23splat" x="350" y="350"/><use href="%23splat" x="700" y="350"/><use href="%23splat" x="1050" y="350"/><use href="%23splat" x="350" y="700"/><use href="%23splat" x="700" y="700"/><use href="%23splat" x="1050" y="700"/><use href="%23splat" x="350" y="1050"/><use href="%23splat" x="700" y="1050"/><use href="%23splat" x="1050" y="1050"/><use href="%23splat" x="0" y="1400"/><use href="%23splat" x="700" y="1400"/><use href="%23splat" x="1400" y="1400"/></g></svg>');

}

/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1400,25,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.6944rem, 0.6039rem + 0.4527vw, 1rem);
  --step--1: clamp(0.8333rem, 0.7099rem + 0.6173vw, 1.25rem);
  --step-0: clamp(1rem, 0.8333rem + 0.8333vw, 1.5625rem);
  --step-1: clamp(1.2rem, 0.9769rem + 1.1157vw, 1.9531rem);
  --step-2: clamp(1.44rem, 1.1433rem + 1.4836vw, 2.4414rem);
  --step-3: clamp(1.728rem, 1.3358rem + 1.9611vw, 3.0518rem);
  --step-4: clamp(2.0736rem, 1.5577rem + 2.5794vw, 3.8147rem);
  --step-5: clamp(2.4883rem, 1.8127rem + 3.3779vw, 4.7684rem);
  --step-6: clamp(2.986rem, 2.1047rem + 4.4066vw, 5.9605rem);
}

/* Elements */

:where(*,*::after,*::before) {
  box-sizing: border-box;
}
:where(a) {
  transition: color 0.5s;
  text-underline-offset: 0.15em;
  text-decoration-color: oklch(from currentColor l c h / 50%);
}
:where(a:link,a:visited) {
  color: var(--color-page-highlight);
}
:where(a:hover,a:focus) {
  color: var(--color-ink-highlight);
}
:where(a:focus-visible) {
  outline-offset: 0.25em;
  outline-width: 0.25em;
  outline-color: currentColor;
}
:where(img,picture,video,[role="img"]) {
  max-inline-size: 100%;
  block-size: auto;
}
:where(figure img,figure picture, figure video) {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--size-space);
  background-color: var(--color-ink-default);
  padding: calc(var(--size-space) / 6);
}
:where(figcaption) {
  max-inline-size: max-content;
  margin-inline: auto;
}
:where(input,button,textarea,select) {
  font: inherit;
}
:where(ul,ol,dl,dt,dd,p,figure,blockquote) {
  hanging-punctuation: first last;
  text-wrap: pretty;
  margin-block-end: 0;
  margin-block-start: var(--size-space);
  margin-inline: 0;
}
:where(ul:not([class])) {
  list-style: none;
  padding-inline: 0;
}
:where(ul:not([class]) li) {
  margin-inline: 0;
  margin-block: 0.5em;
  padding-inline-start: 1.5em;
  background-image: var(--image-star);
  background-position: 0 0.3333em;
  background-size: 1em 1em;
  background-repeat: no-repeat;
}
:where(b,strong,em,i,cite,address) {
  font-style: normal;
  font-weight: 500;
}
:where(abbr) {
  text-decoration: none;
}
:where(small) {
  font-size: var(--step--1);
}
:where(h1,h2,h3,h4,h5,h6) {
  color: var(--color-ink-mid);
  text-wrap: balance;
  margin-block-end: 0;
  margin-block-start: var(--size-space);
}
:where(h1, h2, h3, h4) {
  font-weight: 300;
}
:where(h1 a:not(:hover,:focus), h2 a:not(:hover,:focus)) {
  color: inherit;
}
:where(h5, h6) {
  font-weight: 400;
}
:where(h1) {
  font-size: var(--step-5);
  line-height: 1.1;
}
:where(h2) {
  font-size: var(--step-4);
  line-height: 1.1;
}
:where(h3) {
  font-size: var(--step-3);
  line-height: 1.2;
}
:where(h4) {
  font-size: var(--step-2);
  line-height: 1.2;
}
:where(h5) {
  font-size: var(--step-1);
  line-height: 1.4;
}
:where(h6) {
  font-size: var(--step-0);
}

/* Structural elements */

html {
  interpolate-size: allow-keywords;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scrollbar-gutter: stable;
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-stack);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.5;
  background-color: var(--color-page-default);
  color: var(--color-ink-default);
}

body > .page {
  margin-block-start: 2vb;
}

nav {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--size-space);
  padding-block: var(--size-space);
}
nav a[aria-current] {
  color: var(--color-ink);
  text-decoration: none;
}

main {
  container-type: inline-size;
  max-inline-size: var(--size-linelength);
  padding-block-end: calc(var(--size-space) * 4);
}
main > .heading {
  padding-block: 2em;
}
main > article {
  margin-block-start: calc(var(--size-space) * 4);
  border-block-start-width: calc(var(--size-space) / 4);
  border-block-start-style: solid;
  border-block-start-color: var(--color-page-mid);
}

body > footer {
  background-color: var(--color-page-dark);
  padding-block: calc(var(--size-space) * 4);
  font-size: var(--step--1);
}


/* Utility classes */

.centre {
  max-inline-size: max-content;
  margin-inline: auto;
}

.h {
  color: var(--color-ink-mid);
  text-wrap: balance;
  margin-block-end: 0;
  margin-block-start: var(--size-space);
  font-weight: 300;
}
.size5 {
  font-size: var(--step-5);
  line-height: 1.1;
}
.size4 {
  font-size: var(--step-4);
  line-height: 1.1;
}
.size3 {
  font-size: var(--step-3);
  line-height: 1.2;
}
.size2 {
  font-size: var(--step-2);
  line-height: 1.2;
}
.size1 {
  font-size: var(--step-1);
  line-height: 1.4;
}
.size-1 {
  font-size: var(--step--1);
}
.size-2 {
  font-size: var(--step--2);
}

/* Probably singular classes */

.logo  {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--size-space);
}
.logo > * {
  inline-size: 100%;
}

.clearleft .underline {
  fill: var(--color-ink-mid);
}


/* Reusable classes */

.button {
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  color: var(--color-ink-highlight);
  padding-inline: 1em;
  padding-block: 0.5em;
  border-radius: 1.5em;
  border-style: solid;
  border-width: 0.1em;
  transition: background-color 0.5s;
}
.button:hover,
.button:focus {
  background-color: var(--color-ink-highlight);
  color: var(--color-page-dark);
}

@property --shiny-angle {
  inherits: false;
  initial-value: 175deg;
  syntax: '<angle>';
}
.shiny {
  background-image: linear-gradient(var(--shiny-angle), var(--color-ink-mid) 10%, var(--color-page-mid) 40%,  var(--color-page-mid) 60%, var(--color-ink-highlight) 90%);
  background-size: 150%;
  background-position: center;
}
@media (prefers-reduced-motion: no-preference) {
  .shiny {
    animation: spin 5s infinite linear paused;
  }
  .shiny:hover {
    animation-play-state: running;
  }
  @keyframes spin {
    to {
      --shiny-angle: 535deg;
    }
  }
}

.sticker {
  inline-size: 8em;
  block-size: 8em;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background-color: var(--color-page-mid);
  color: var(--color-page-default);
  transform: rotate(-5deg);
}

.spotlight {
  display: block;
  padding: calc(var(--size-space) / 4);
  background-color: var(--color-ink-default);
  border-radius: 50%;
  shape-outside: circle();
}

.tint {
  opacity: 0.9;
}

.pull {
  display: block;
  margin-inline: auto;
  margin-block: var(--size-space);
  @container (width > 30em) {
    inline-size: calc(33.3333% + var(--size-space));
    float: inline-end;
    margin-inline-start: var(--size-space);
  }
}

.confetti {
  display: inline-block;
  position: relative;
  text-align: start;
}
.confetti::before {
  content: ' ';
  aspect-ratio: 1;
  width: 100%;
  position: absolute;
  background-image: var(--image-slash), var(--image-splat), var(--image-cross);
  background-position: top left, top right, bottom right;
  background-size: 15%, 12%, 17%;
  background-repeat: no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .confetti::before {
    animation: rotation auto linear;
    animation-timeline: scroll();
  }
}
@keyframes rotation {
  from {
    transform: rotate(15deg);
  }
  to {
    transform: rotate(60deg);
  }
}

.callout {
  font-weight: 500;
  padding: calc(var(--size-space) * 2);
  margin-block: calc(var(--size-space) * 3);
  background-color: var(--color-page-mid);
  color: var(--color-page-default);
}
.callout .button {
  border-width: 0;
}
.callout .button:not(:hover,:focus) {
  background-color: var(--color-page-default);
}
.callout.split,
.callout.split-reverse {
  align-items: center;
  column-gap: 0;
}

.gallery {
  padding-block: calc(var(--size-space) * 4);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--size-space);
}
.gallery img {
  inline-size: 100%;
}
@container (width > 30em) {
  .gallery {
    grid-template-columns: 1fr 1fr;
  }
}

.schedule {
  border-block-start: 0.1em solid oklch(from var(--color-page-mid) l c h / 30%);
  padding-block: var(--size-space);
}
.schedule:first-of-type {
  margin-block-start: var(--size-space);
}
.schedule:last-of-type {
  border-block-end: 0.1em solid oklch(from var(--color-page-mid) l c h / 30%);
}
.schedule .schedule__title {
  margin-block-start: 0;
  text-wrap: pretty;
}
@container (min-width: 25em) {
  .schedule {
    display: grid;
    grid-gap: var(--step-0);
    grid-template-columns: repeat(18, 1fr);
    align-items: baseline;
  }
  .schedule .schedule__time {
    grid-column: 1/4;
    text-wrap: nowrap;
  }
  .schedule .schedule__content {
    grid-column: 5/18;
  }
}

.cast {
  display: grid;
  gap: var(--size-space);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr) ) ;
  padding-block: var(--size-space);
  padding-inline: 0;
}
.cast > * {
  text-align: center;
  margin-inline: auto;
  list-style: none;
}

/* Structural classes */

.page {
  max-inline-size: var(--size-constrain);
  margin-inline: auto;
  padding: var(--size-space);
}

body > .page {
  min-block-size: 100vb;
}
body > .page > nav {
  font-weight: 500;
  font-size: var(--step--1);
}
body > .page > nav a {
  text-decoration: none;
}

.heading {
  max-inline-size: max-content;
}

.info {
  font-weight: 500;
}

/* Layout */

footer a[href*="clearleft.com"] {
  display: block;
  inline-size: 8em;
}

@media (18em < width <= 45em) {
  body > .page.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  body > .page.split > header {
    grid-row: 1 / 3;
  }
  body > .page.split > header .logo {
    grid-template-columns: 1fr;
  }
  body > .page.split > nav {
    flex-direction: column;
    align-items: end;
  }
  body > .page.split > nav > * {
    margin-inline-end: var(--size-space);
  }
  body > .page.split > nav > .button {
    order: -1;
    margin-inline-end: 0;
  }
  body > .page.split > aside {
    margin: auto;
  }
  body > .page.split > main {
    grid-column: 1 / 3;
    padding-block-start: var(--size-gutter);
  }
  .sticker .p-location {
    font-size: var(--step-2);
  }
}
@media (width > 45em) {
  .split,
  .split-reverse {
    display: grid;
    column-gap: var(--size-gutter);
  }
  .split {
    grid-template-columns: var(--size-logo) 3fr;
  }
  .split-reverse {
    grid-template-columns: 3fr 1fr;
  }
  .page.split > header {
    grid-column: 1;
    grid-row: 1 / span 3;
    padding-block: var(--size-space);
  }
  .page.split > header .logo {
    grid-template-columns: 1fr;
  }
  .page.split > nav {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    padding-block: var(--size-space);
  }
  .page.split > aside {
    grid-column: 1;
    justify-self: end;
    margin-block: calc(var(--size-space) / 3);
  }
  .page.split > main {
    grid-column: 2;
    grid-row: 2 / span 4;
  }
  main > .heading {
    view-transition-name: heading;
    display: flex;
    align-items: center;
  }
  footer .clearleft {
    inline-size: 100%;
  }
  footer nav {
    flex-direction: column;
  }
  .sticker {
    inline-size: 12em;
    block-size: 12em;
    margin-block: calc(var(--size-space) * 2);
  }
  .sticker .dt-start,
  .sticker .p-location {
    display: block;
  }
  .sticker .dt-start {
    font-size: var(--step-1);
  }
  .sticker .p-location {
    font-size: var(--step-3);
  }
}

/* Motion */

@media (prefers-reduced-motion: no-preference) {
  
  .logo g {
    transform-box: content-box;
    transform-origin: center;
    transition: transform 0.6s ease-in-out;
  }
  .logo g + g {
    transition-delay: 0.2s;
  }
  .logo g + g + g {
    transition-delay: 0.4s;
  }
  body:has(.sticker:hover) .logo g {
    transform: rotateY(360deg);
  }
  .sticker:hover {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="112" fill="none"><path stroke="%23F2AEFA" stroke-linecap="round" stroke-width="4" d="m3 3 10 10M13 3 3 13M3 8h10M8 3v10M19 3l10 10M29 3 19 13M19 8h10M24 3v10M35 3l10 10M45 3 35 13M35 8h10M40 3v10M51 3l10 10M61 3 51 13M51 8h10M56 3v10M67 3l10 10M77 3 67 13M67 8h10M72 3v10M3 19l10 10M13 19 3 29M3 24h10M8 19v10M19 19l10 10M29 19 19 29M19 24h10M24 19v10M3 35l10 10M13 35 3 45M3 40h10M8 35v10M35 35l10 10M45 35 35 45M35 40h10M40 35v10M3 51l10 10M13 51 3 61M3 56h10M8 51v10M51 51l10 10M61 51 51 61M51 56h10M56 51v10M3 67l10 10M13 67 3 77M3 72h10M8 67v10M67 67l10 10M77 67 67 77M67 72h10M72 67v10" style="transform: scale(0.75)"/></svg>'), auto;
  }
}

/*

W W W EEEEE BBBB    XXXX   XXX  X     X   ///  /   / /////
W W W E     B   B   X   X X   X X     X  /   / /   /   /
W W W E     B   B   X   X X   X X     X  /   / /   /   /
W W W EEEE  BBBB    X   X XXXXX  XXXXX   /   / /   /   /
W W W E     B   B   X   X X   X    X     /   / /   /   /
W W W E     B   B   X   X X   X    X     /   / /   /   /
 W W  EEEE  BBBB    XXXX  X   X    X      ///   ///    /