@charset "UTF-8";
/* ==================================================================
   The Old Byre — styles

   One file on purpose: it's a prototype. The section headers below
   show where each block lands when you port into your real partials.
   ================================================================== */
/* ---- @font-face ---------------------------------- → _fonts.scss --

   Your declaration, unchanged. Preview falls back to Helvetica because
   the trial .otf isn't loaded here; on the real site Diatype takes over
   the moment the file resolves (font-display: swap). */
@font-face {
  font-family: 'FS';
  font-style: normal;
  src: url("../fonts/ABCDiatypeEdu-Medium.woff2") format("woff2");
  font-display: swap; }
@font-face {
  font-family: 'FS';
  font-style: italic;
  src: url("../fonts/ABCDiatypeEdu-MediumItalic.woff2") format("woff2");
  font-display: swap; }
/* ---- fluid type ---------------------------------- → _fonts.scss --

   Your two-numbers-to-touch pattern, exactly as you wrote it. The "/"
   is division here because you're on LibSass; that's correct for your
   compiler. (Only if you ever move to Dart Sass would you swap these
   three for math.div() — don't, on your current setup it errors.) */
/* ---- variables ------------------------------- → _variables.scss --

   Plain Sass $vars: they exist only at build time and vanish from the
   output. Good for anything fixed at compile. */
/* ---- the one runtime value ----------------------------------------

   :root is just a selector — it matches <html>, same as `html { }` but
   with a touch more specificity. Its one job here is to hold a CSS
   custom property (a "--variable").

   The difference from a Sass $var: a $var is gone after compilation, so
   nothing at runtime can read or change it. A custom property is real in
   the browser, which means JavaScript can WRITE to it. That's the whole
   reason this one exists: the fixed strip's height depends on the fluid
   font-size, so its pixel value shifts with viewport width. JS measures
   the rendered strip and pushes the number in here; the hero and masthead
   margins below read it and stay in sync. A $var could not do that — it
   doesn't exist when the page is running. */
:root {
  --strip: 52px;
  /* fallback; JS overwrites with the measured height */ }

/* ---- base -------------------------------------- → _structure.scss */
* {
  box-sizing: border-box; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: 'FS', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.0625rem, calc(0.9483695652rem + 0.5217391304vw), 1.4375rem);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased; }

h2, h1, h3 {
  margin: 0;
  font-size: 1em;
  font-weight: normal; }

/* ---- page colours -------------------------------------------------

   One pair of tokens per CMS colour, and one place that consumes them.
   Adding a fifth colour is two lines here and nothing anywhere else.

   Anything that needs to match the page reads var(--page-bg) rather than
   being named in a `body.orange .thing { }` rule. That old pattern is
   what kept outranking the state rules and sending us round in circles —
   nothing below has to know which colour the page is. */
body {
  --page-bg: #f5f5f5;
  --page-ink: #111111;
  background: var(--page-bg);
  color: var(--page-ink); }

body.white {
  --page-bg: #f5f5f5;
  --page-ink: #111111;
  --btn-hover-bg: #000000;
  --btn-hover-ink: #ffffff; }

body.black {
  --page-bg: #000000;
  --page-ink: #ffffff;
  --btn-hover-bg: #ffffff;
  --btn-hover-ink: #000000; }

body.orange {
  --page-bg: #fb5420;
  --page-ink: #000000;
  --btn-hover-bg: #000000;
  --btn-hover-ink: #fb5420; }

body.blue {
  --page-bg: #1a44ff;
  --page-ink: #ffffff;
  --btn-hover-bg: #ffffff;
  --btn-hover-ink: #1a44ff; }

body.red {
  --page-bg: #FF3B00;
  --page-ink: #000000;
  --btn-hover-bg: #000000;
  --btn-hover-ink: #FF3B00; }

body.gray {
  --page-bg: #cbcbcb;
  --page-ink: #000000;
  --btn-hover-bg: #000000;
  --btn-hover-ink: #cbcbcb; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em; }

a.button {
  display: inline-block;
  border: 1px solid currentColor;
  padding: 0.3em 0.67em;
  color: inherit;
  text-decoration: none;
  transition: background 280ms, color 280ms; }

a.button:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-ink); }

.each-element.move-up {
  margin-top: -2em; }

/* ---- strip + overlay + menu ----------------------- → _menu.scss --

   The overlay now sits ABOVE the strip and carries its own title in the
   same position. That single change removed all the timing work: the
   strip never goes transparent, so nothing behind it can show through,
   so the canvas colour stopped mattering, so no rule anywhere needs a
   delay. One opacity is the only thing that animates on this page. */
.topbar {
  z-index: 20;
  background: var(--page-bg); }

.topbar__trigger,
.overlay__title {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #000000;
  color: #ffffff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 0s linear 280ms; }
  .overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 280ms ease; }

.overlay__inner {
  padding: 1.4em 1rem 1rem; }

.menu ul {
  margin: 0;
  padding: 0;
  list-style: none; }
.menu li.offset {
  margin-top: 1rem; }
.menu li a.active {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  text-underline-offset: 0.18em; }
.menu ul + ul {
  margin-top: 1.4em; }
.menu a {
  color: inherit;
  text-decoration: none; }
.menu a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  text-underline-offset: 0.18em; }

/* ---- page content ------------------------------ → _homepage.scss */
img {
  width: 100%;
  height: auto; }

.content {
  /* the last block in the column ends on its last line, not 4em below it —
     this is what makes the menu release at the right moment */ }
  .content h2 {
    margin-bottom: 1rem; }
  .content p {
    margin-top: 0; }
    @media (min-width: 900px) {
      .content p {
        max-width: 50ch; } }
  .content ol {
    max-width: 50ch;
    padding: 0 0 0 1em; }
  .content ul.plain {
    list-style: none;
    list-style-type: none;
    padding: 0; }
    .content ul.plain.no-margin {
      margin: 0; }
  .content .small {
    font-size: .9em; }
  .content .date {
    white-space: nowrap; }
  .content .artists ul {
    list-style: none;
    list-style-type: none;
    padding: 0; }
  .content > :last-child,
  .content > :last-child .each-element {
    margin-bottom: 0; }
  @media (max-width: 899px) {
    .content .session_block span {
      white-space: nowrap; }
    .content .session_block ul {
      margin-left: 1em;
      text-indent: -1em; } }
  .content .headed-list ul {
    list-style: none;
    list-style-type: none;
    max-width: 50ch;
    padding: 0;
    margin-left: 1em;
    text-indent: -1em; }

.block, .each-element {
  margin: 0 0 4em 0; }
  .block.inter-heading, .each-element.inter-heading {
    margin: 0 0 1em 0; }
    .block.inter-heading.offset, .each-element.inter-heading.offset {
      margin: 0 0 2em 0; }

/* ----- FOOTER --------------------------------------- */
.footer {
  margin-top: auto;
  padding-top: 8rem;
  position: relative;
  z-index: 100; }
  .footer ul.legal {
    font-size: 1rem; }
    @media (max-width: 899px) {
      .footer ul.legal {
        font-size: .9rem; } }
  .footer ul.legal {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: left;
    justify-content: left; }
    .footer ul.legal a {
      text-decoration: none; }
    .footer ul.legal a:hover {
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.14em; }
    .footer ul.legal li {
      margin-right: 1rem; }

.footer-menu {
  margin-bottom: 4em; }
  .footer-menu ul {
    list-style-type: none;
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0; }
    .footer-menu ul a {
      text-decoration: none; }
      .footer-menu ul a.active {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.14em; }

/* ------ MASTHEAD ------------------------------------- */
.masthead_display {
  padding-top: 4em; }

.masthead {
  display: flex;
  justify-content: center;
  width: 100%; }

.image-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--custom-width); }
  @media (max-width: 899px) {
    .image-wrapper {
      width: 100%; } }
  .image-wrapper .image-box {
    display: inline-block;
    text-align: left;
    width: 100%;
    margin: 0 auto 0 auto;
    position: relative; }
    .image-wrapper .image-box.has-offset {
      padding-bottom: 1.2em; }
    .image-wrapper .image-box .caption {
      font-size: .7em;
      line-height: 1.5;
      margin-top: 0.3em; }
      .image-wrapper .image-box .caption p {
        margin: 0; }
    .image-wrapper .image-box.has-offset .caption {
      position: absolute;
      top: calc(100% - 1.5em - var(--custom-offset-y, 0px));
      left: var(--custom-offset-x, 0px);
      margin-top: 0; }
    .image-wrapper .image-box img {
      width: 100%;
      height: auto; }

/* --- BIOGRAPHIES --------------------------- */
.biographies {
  position: relative;
  font-size: .7em; }
  @media (max-width: 899px) {
    .biographies {
      font-size: .8em; } }

.biographies__item {
  width: calc(25% - 1.5em);
  margin-bottom: 1em; }
  .biographies__item p {
    margin-bottom: 0;
    line-height: 1.4; }

@media (max-width: 900px) {
  .biographies__item {
    width: calc(50% - 1.5em); } }
@media (max-width: 500px) {
  .biographies__item {
    width: 100%; } }
.biogs h3 {
  margin-bottom: 2em; }
  @media (max-width: 900px) {
    .biogs h3 {
      margin-bottom: .5em; } }
  .biogs h3.list-only {
    margin-bottom: 0; }

/* MALING LIST -------------------------------- */
.mailing-list h1 {
  margin-bottom: 2em; }
.mailing-list form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 30rem; }
.mailing-list input[type="email"] {
  font: inherit;
  font-size: 1.4rem;
  line-height: 1.4;
  width: 100%;
  padding: 0.6rem 1rem 0.6rem 0.6rem;
  color: #000;
  background-color: #cbcbcb;
  border: 1px solid #000;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none; }
  @media (max-width: 899px) {
    .mailing-list input[type="email"] {
      font-size: 1.2rem;
      max-width: 300px; } }
  .mailing-list input[type="email"]::placeholder {
    color: #000;
    opacity: 0.5; }
  .mailing-list input[type="email"]:focus {
    outline: none;
    border-width: 2px;
    padding: calc(0.6rem - 1px) calc(1rem - 1px); }
  .mailing-list input[type="email"]:-webkit-autofill, .mailing-list input[type="email"]:-webkit-autofill:hover, .mailing-list input[type="email"]:-webkit-autofill:focus {
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0 100px #cbcbcb inset; }
.mailing-list button[type="submit"] {
  font: inherit;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  color: #000;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em; }

/* ==================================================================
   MOBILE / TABLET — below 899px  (fixed strip, overlay on top of it)
   ================================================================== */
@media (max-width: 899px) {
  .footer-menu {
    display: block; }

  body {
    padding: 0 1rem 1rem; }

  .main {
    margin-top: 6rem; }
    .main.hasmasthead {
      margin-top: 0; }

  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0; }

  .topbar__trigger,
  .overlay__title {
    padding: 0.6875rem 1rem; }

  .topbar__trigger {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em; }

  .topbar__label {
    min-width: 0; }

  .topbar__menu {
    flex: none;
    white-space: nowrap; }

  .masthead {
    width: 100% !important;
    padding-top: 4.5rem;
    margin-bottom: 3rem; }

  .hero {
    aspect-ratio: 16 / 16;
    margin-top: var(--strip);
    margin-bottom: 1.5rem; }

  .cols__menu {
    display: none; }

  .belowtheline {
    margin-top: 4em; } }
/* ==================================================================
   DESKTOP — 900px and up  (strip scrolls away, sticky column menu)
   ================================================================== */
@media (min-width: 900px) {
  .topbar__menu {
    display: none; }

  .footer-menu {
    display: none; }

  .belowtheline {
    margin-top: 9rem; }

  .main {
    margin-top: 10rem; }
    .main.hasmasthead {
      margin-top: 0; }

  body {
    padding: 1.5rem; }

  .topbar {
    position: static;
    margin-bottom: 1.5rem; }

  .topbar__trigger {
    cursor: default;
    pointer-events: none; }

  /* Only the parking title takes a pointer and an underline — the flag
     that switches the behaviour on is the same one that advertises it. */
  .topbar__trigger[data-parks] .topbar__label {
    pointer-events: auto;
    cursor: pointer; }
    .topbar__trigger[data-parks] .topbar__label:hover {
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.14em;
      text-underline-offset: 0.18em; }

  .overlay {
    display: none; }

  .masthead {
    margin-bottom: 4.5rem;
    margin-top: 4.5rem;
    margin-left: auto;
    margin-right: auto; }

  .hero {
    aspect-ratio: 16 / 10;
    margin-bottom: 2.25rem; }

  .cols {
    display: grid;
    grid-template-columns: 28% 1fr;
    gap: 1.5rem;
    align-items: start; }

  .cols__menu {
    position: sticky;
    top: 1.5rem;
    align-self: start; }

  .small p {
    max-width: 56ch; } }
/* one property animates now, so this is back to being the one-liner it
   should always have been */
@media (prefers-reduced-motion: reduce) {
  .overlay {
    transition-duration: 1ms; } }
.topbar__trigger:focus-visible,
.overlay__title:focus-visible,
.menu a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px; }

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0px;
  width: 100%;
  max-width: 500px;
  z-index: 9999; }
  .cookie-banner .inner {
    background: #000;
    color: white;
    padding: 1em 2em 1em 1em;
    margin: 0 25px;
    font-size: .7em;
    line-height: 1.5; }
    @media (max-width: 899px) {
      .cookie-banner .inner {
        margin: 0 15px;
        padding: 1em;
        line-height: 1.3em; } }
  .cookie-banner a {
    color: #fff !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.14em; }

.cookie-banner p {
  font-size: 1em;
  line-height: 1.5em;
  margin-bottom: 1em; }
  @media (max-width: 899px) {
    .cookie-banner p {
      font-size: 1.3em; } }

.cookie-banner .cookie-actions button {
  font-size: 1em;
  background: #000;
  /* same as banner */
  color: white;
  border: 1px solid white;
  padding: 0.5em 1em;
  margin-right: 1em;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.2s ease; }
  @media (max-width: 899px) {
    .cookie-banner .cookie-actions button {
      margin-right: .5em;
      padding: 0.5em .8em;
      font-size: 1.3em; } }

.cookie-banner .cookie-actions button:hover {
  background: white;
  color: #000; }

.image-block .masthead-img {
  filter: grayscale(100%);
  cursor: pointer; }

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 1000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; }
  .lightbox.is-open {
    display: flex;
    align-items: center;
    justify-content: center; }
  .lightbox__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 2rem;
    box-sizing: border-box; }
    @media (max-width: 899px) {
      .lightbox__inner {
        padding: 1rem; } }
  .lightbox__close {
    display: block;
    margin-bottom: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    align-self: center;
    position: static; }
    .lightbox__close img {
      width: 1.5rem;
      height: 1.5rem;
      display: block; }
      @media (max-width: 899px) {
        .lightbox__close img {
          width: 1rem;
          height: 1rem; } }
  .lightbox__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 8rem);
    object-fit: contain; }
  .lightbox__caption {
    margin-top: 0.75rem;
    text-align: center;
    max-width: 60ch;
    color: #333;
    align-self: center;
    font-size: .7em;
    line-height: 1.5; }
    .lightbox__caption:empty {
      display: none; }

/*# sourceMappingURL=styles.css.map */