/* ==========================================================================
   Mesa Academy Drama Club - site styles
   You normally do not need to edit this file. Content lives in /data/*.json
   ========================================================================== */

:root {
  --green-900: #14331f;
  --green-700: #1f5c33;
  --green-500: #3f8f4a;
  --green-300: #8fc87a;
  --gold: #e0a53c;
  --gold-soft: #fdf1d8;
  --pink: #d4436e;
  --pink-soft: #fde7ee;
  --plum: #6b3f8f;
  --plum-soft: #efe6f7;

  --bg: #f7f5ef;
  --bg-raised: #ffffff;
  --bg-sunken: #efece3;
  --ink: #1d2a21;
  --ink-soft: #556155;
  --line: #ddd8ca;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(20, 51, 31, .06), 0 8px 24px rgba(20, 51, 31, .06);
  --wrap: 1020px;
  --navh: 50px;   /* height of the sticky nav bar; sticky headers park below it */
  --art-inset: 28px;        /* how far the house is held in from the content column */
  --art-inset-wide: 60px;   /* the outhouse, Fiona's tower and the Duloc towers */
  --show-green: #a9d49a;   /* the show title in the slim header */
  --font: "Lexend", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12180f;
    --bg-raised: #1b2318;
    --bg-sunken: #161d14;
    --ink: #eef2e8;
    --ink-soft: #a9b5a4;
    --line: #2e3a2b;
    --pink-soft: #3a1b26;
    --gold-soft: #3a2f14;
    --plum-soft: #2c2038;
    --green-300: #9ed48c;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #12180f;
  --bg-raised: #1b2318;
  --bg-sunken: #161d14;
  --ink: #eef2e8;
  --ink-soft: #a9b5a4;
  --line: #2e3a2b;
  --pink-soft: #3a1b26;
  --gold-soft: #3a2f14;
  --plum-soft: #2c2038;
  --green-300: #9ed48c;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green-700); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) a { color: var(--green-300); }
}
:root[data-theme="dark"] a { color: var(--green-300); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ---------- Banner ---------- */
.banner {
  background: var(--gold);
  color: #2a1d00;
  text-align: center;
  font-weight: 600;
  font-size: .95rem;
  padding: 10px 20px;
}

/* ---------- Header ---------- */
.masthead {
  background: linear-gradient(180deg, var(--green-700), var(--green-900));
  color: #fff;
  text-align: center;
  padding: 24px 20px 16px;
}
.masthead a { color: #fff; }
.masthead .school {
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 14px 0 2px;
  font-weight: 600;
}
.masthead .presents {
  font-size: .85rem; letter-spacing: .2em; text-transform: uppercase;
  opacity: .8; margin: 0 0 14px;
}
.masthead .season {
  font-size: .85rem; letter-spacing: .18em; text-transform: uppercase;
  opacity: .85; margin: 8px 0 0;
}
.masthead h1 {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  margin: 0;
  line-height: 1.15;
}
.logo-club { width: 120px; height: auto; }
.logo-show { width: min(420px, 80%); height: auto; margin: 6px auto 0; display: block; }

/* Every page but the home page wears a slim version of the header. */
.masthead.is-compact { padding: 10px 20px; }
.masthead.is-compact .brand {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  text-decoration: none; color: #fff;
}
.masthead.is-compact .logo-club { width: 44px; }
.masthead.is-compact .brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.masthead.is-compact .school {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .85; margin: 0; font-weight: 600;
}
.masthead.is-compact .show {
  font-family: "Bree Serif", Georgia, serif;
  font-size: 1.15rem; font-weight: 400; letter-spacing: .01em;
  color: var(--show-green);
}
@media (max-width: 480px) {
  .masthead.is-compact .school { font-size: .62rem; letter-spacing: .1em; }
  .masthead.is-compact .show { font-size: 1.02rem; }
}

/* ---------- Nav ---------- */
.nav {
  background: var(--green-900);
  border-bottom: 3px solid var(--gold);
  position: sticky; top: 0; z-index: 30;
}
.nav .wrap {
  display: flex; gap: 2px; flex-wrap: nowrap; justify-content: center;
  padding: 0 8px; overflow-x: auto; scrollbar-width: none;
}
.nav .wrap::-webkit-scrollbar { display: none; }
.nav a {
  color: #e9f2e5; text-decoration: none; white-space: nowrap;
  padding: 12px 13px; font-size: .92rem; font-weight: 600;
  border-bottom: 3px solid transparent; margin-bottom: -3px;
}
@media (max-width: 480px) {
  .nav a { padding: 12px 9px; font-size: .84rem; }
}
@media (max-width: 760px) {
  :root { --art-inset: 14px; --art-inset-wide: 24px; }
}
.nav a:hover { color: #fff; border-bottom-color: var(--green-300); }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--gold); }

/* ---------- Contact strip ---------- */
/* Contacts sit quietly in the footer on every page. */
.contact-strip {
  display: grid; gap: 10px 28px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 0 0 20px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  text-align: left;
}
.contact-card .label {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .7; margin-bottom: 1px;
}
.contact-card .value { font-weight: 600; word-break: break-word; }
.contact-card .detail { opacity: .7; font-size: .82rem; word-break: break-word; }

/* ---------- Sections ---------- */
section { margin: 40px 0; scroll-margin-top: 70px; }
main > section:first-of-type, main > div:first-of-type > section:first-of-type { margin-top: 22px; }
main > div:first-of-type > .jump-bar { margin-top: 18px; }
h2 {
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  margin: 0 0 6px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--gold);
}
h3 {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); margin: 26px 0 10px;
}
.section-intro { color: var(--ink-soft); margin: 10px 0 0; }
p.lead { font-size: 1.05rem; }

/* ---------- Announcements ---------- */
.announce-grid {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 18px;
}
.announce {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-left: 5px solid var(--green-500);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.announce .when {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pink); font-weight: 700;
}
.announce .title { font-weight: 700; font-size: 1.05rem; margin-top: 2px; }
.announce .detail { color: var(--ink-soft); font-size: .95rem; }
.announce .detail strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.announce .more { display: inline-block; margin-top: 8px; font-size: .88rem; font-weight: 600; }
.announce.is-show { border-left-color: var(--pink); }
.announce.is-next { border-left-color: var(--gold); background: var(--gold-soft); }

/* ---------- Links ---------- */
.link-grid {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.link-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
  transition: transform .12s ease, border-color .12s ease;
}
.link-card:hover { transform: translateY(-2px); border-color: var(--green-500); }
.link-card .title { font-weight: 700; }
.link-card .title .arrow { color: var(--green-500); }
.link-card .note { color: var(--ink-soft); font-size: .9rem; margin-top: 2px; }

/* ---------- Calendar ---------- */
.jump-bar { margin: 20px 0 0; }
.jump {
  font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
  background: var(--gold); color: #2a1d00;
  border: 1px solid var(--gold); border-radius: 999px; padding: 9px 18px;
}
.jump:hover { filter: brightness(1.06); }
.jump:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; }
details.month { margin: 26px 0 0; }
.month-label {
  position: sticky; top: var(--navh); z-index: 5;
  background: var(--bg); cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 10px;
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
  padding: 8px 0 6px; border-bottom: 2px solid var(--line);
}
.month-label::-webkit-details-marker { display: none; }
.month-label::before {
  content: "\25be"; font-size: 1rem; line-height: 1;
  transition: transform .15s ease; color: var(--green-500);
}
details.month:not([open]) > .month-label::before { transform: rotate(-90deg); }
.month-label:hover { color: var(--ink); }
.month-label:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.month-count {
  margin-left: auto; letter-spacing: .08em; font-weight: 600; text-transform: none;
  font-size: .78rem; opacity: .8;
}
details.month.is-done > .month-label { opacity: .65; }
.events { display: grid; gap: 10px; padding-top: 10px; }
/* An explicit display on a details child would otherwise defeat the collapse. */
details.month:not([open]) > .events { display: none; }

.event {
  /* Clears the sticky nav and the sticky month heading when jumped to. */
  scroll-margin-top: calc(var(--navh) + 46px);
  display: grid; grid-template-columns: 92px 1fr;
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}
.event .date {
  background: var(--bg-sunken); padding: 12px 8px; text-align: center;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center;
}
.event .date .mon {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
}
.event .date .num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.event .date .wd {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.event .body { padding: 12px 16px; min-width: 0; }
.event .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.event .head .title { font-weight: 700; font-size: 1.05rem; }
.event .event-link { font-size: .9rem; margin-top: 2px; }

.blocks {
  display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px;
  margin-top: 8px;
}
.blocks .btime {
  font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--ink);
}
.blocks .bwhat { color: var(--ink-soft); }

.study {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: .88rem; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.study-label { font-weight: 600; }
.study-name { color: var(--ink); }
.study-none { font-style: italic; }
.study-open { color: var(--pink); font-weight: 700; }
.study-signup {
  text-decoration: none; font-weight: 700; font-size: .82rem;
  background: var(--green-500); color: #fff !important;
  border-radius: 999px; padding: 3px 12px;
}
.study-signup:hover { background: var(--green-700); }
.study-note { flex-basis: 100%; }

.badge {
  display: inline-block; background: var(--pink); color: #fff;
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 10px; font-weight: 700;
}
.badge.next { background: var(--gold); color: #2a1d00; }

.event.is-show { border-color: var(--pink); }
.event.is-show .date { background: var(--pink-soft); border-right-color: var(--pink); }
.event.is-past { opacity: .5; }
.event.is-next { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow); }

@media (max-width: 560px) {
  .event { grid-template-columns: 1fr; }
  .event .date {
    flex-direction: row; gap: 8px; align-items: baseline; justify-content: flex-start;
    text-align: left; padding: 8px 16px;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .event .date .num { font-size: 1.15rem; }
  .blocks { grid-template-columns: 1fr; gap: 0; }
  .blocks .bwhat { margin-bottom: 6px; }

}

/* ---------- Checklist ---------- */
.checklist { list-style: none; padding: 0; margin: 16px 0 0; }
.checklist li {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 8px;
  color: var(--ink-soft); font-size: .95rem;
}

/* ---------- Cast page ---------- */

/* Wide screens: the banner hangs to the right of the proclamation.
   Phones: his initial goes behind the text instead, since a tall banner
   would push the reading column into a sliver. */
.cast-head {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 28px;
  align-items: start; margin-bottom: 8px;
}
.cast-intro { position: relative; min-width: 0; }
.cast-intro p { position: relative; z-index: 1; }
.cast-intro p:first-of-type { margin-top: 0; }

.cast-banner {
  width: 132px; height: auto; align-self: start;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .25));
}

.cast-watermark { display: none; }
.cast-watermark svg {
  width: 100%; height: 100%; display: block;
}

@media (max-width: 760px) {
  .cast-head { display: block; }
  .cast-banner { display: none; }
  .cast-watermark {
    display: block; position: absolute; z-index: 0;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    height: 92%; width: auto; aspect-ratio: 338 / 773;
    color: var(--ink); opacity: .12; pointer-events: none;
  }
}
.legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 18px 0 4px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink-soft); }

.track {
  display: inline-block; border-radius: 999px; padding: 2px 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
  border: 1px solid transparent;
}
.track-castle { background: var(--plum-soft); color: var(--plum); border-color: var(--plum); }
.track-storybook { background: var(--pink-soft); color: var(--pink); border-color: var(--pink); }
.track-both { background: var(--bg-sunken); color: var(--ink-soft); border-color: var(--line); }
.track-tbd { background: var(--gold-soft); color: #8a6110; border-color: var(--gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .track-castle { color: #d4b6ef; }
  :root:not([data-theme="light"]) .track-storybook { color: #f7a5be; }
  :root:not([data-theme="light"]) .track-tbd { color: #e8c67e; }
}

.search-row { margin: 14px 0 10px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.search-row input {
  flex: 1 1 240px; padding: 11px 14px; font: inherit;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-raised); color: var(--ink);
}
.search-row .count { color: var(--ink-soft); font-size: .9rem; }
.filter-note { color: var(--ink-soft); font-size: .9rem; margin: 0 0 12px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  background: var(--bg-raised); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px;
}
.filter:hover { border-color: var(--green-500); box-shadow: 0 0 0 3px var(--bg-sunken); }
.filter.is-on { background: var(--green-700); border-color: var(--green-700); color: #fff; }

/* Each track button wears its own colour: a ring on hover, filled once chosen. */
.filter-castle:hover { border-color: var(--plum); box-shadow: 0 0 0 3px var(--plum-soft); }
.filter-castle.is-on { background: var(--plum); border-color: var(--plum); color: #fff; }
.filter-storybook:hover { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft); }
.filter-storybook.is-on { background: var(--pink); border-color: var(--pink); color: #fff; }

/* No overflow here: a scroll container would trap the sticky header inside the
   table instead of parking it under the navigation bar. */
.table-scroll { border: 1px solid var(--line); border-radius: var(--radius); }
table.cast {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--bg-raised);
}
table.cast th {
  position: sticky; top: var(--navh); z-index: 10;
  text-align: left; background: var(--green-700); color: #fff;
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 14px; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
table.cast th:first-child { border-top-left-radius: var(--radius); }
table.cast th:last-child { border-top-right-radius: var(--radius); }
table.cast td { padding: 10px 14px; vertical-align: top; }
table.cast tbody.member > tr.first > td { border-top: 2px solid var(--line); }
table.cast tbody.member > tr.more > td { border-top: 1px dashed var(--line); }
table.cast td.actor {
  font-weight: 700; white-space: nowrap;
  border-right: 1px solid var(--line);
}
table.cast td.actor .actor-name { display: block; }
table.cast td.actor .actor-count {
  display: block; font-weight: 600; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
table.cast td.role { font-weight: 700; color: var(--green-700); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) table.cast td.role { color: var(--green-300); }
}
:root[data-theme="dark"] table.cast td.role { color: var(--green-300); }
table.cast td.track-col { white-space: nowrap; }
table.cast td.desc { color: var(--ink-soft); font-size: .93rem; }
table.cast tbody.member:nth-of-type(even) > tr > td {
  background: color-mix(in srgb, var(--bg-sunken) 55%, transparent);
}
/* Filtered-out people. The phone layout sets display on the group, which would
   otherwise beat the browser's own rule for hidden elements. */
table.cast tbody.member[hidden] { display: none; }

/* On a phone the table becomes one card per person: name across the top, then a
   line per role with its track pill, and the description underneath. Every cell
   border from the desktop table has to be cancelled here, or its stub shows up
   under an inline-block cell. */
@media (max-width: 760px) {
  .table-scroll { border: none; border-radius: 0; }
  table.cast { background: transparent; }
  table.cast, table.cast tbody, table.cast tr, table.cast td { display: block; width: 100%; }
  table.cast thead { display: none; }

  table.cast tbody.member {
    background: var(--bg-raised);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 16px 16px; margin-bottom: 12px;
  }
  table.cast tbody.member:nth-of-type(even) > tr > td,
  table.cast tbody.member > tr > td { background: transparent; }

  /* No borders on any cell; the dividers below live on the rows instead. */
  table.cast tbody.member > tr > td,
  table.cast tbody.member > tr.first > td,
  table.cast tbody.member > tr.more > td {
    border: 0; padding: 0;
  }

  table.cast tbody.member > tr.more {
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  }

  table.cast td.actor {
    white-space: normal; font-size: 1.2rem; font-weight: 700; line-height: 1.3;
    padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 2px solid var(--line);
  }
  table.cast td.actor .actor-count { display: none; }

  table.cast td.role {
    display: inline; width: auto; font-size: .95rem; font-weight: 700;
    letter-spacing: .02em;
  }
  /* A small marker so the role never reads as a continuation of the name. */
  table.cast td.role::before {
    content: ""; display: inline-block; vertical-align: middle;
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; margin-right: 8px; opacity: .75;
  }
  table.cast td.track-col { display: inline; width: auto; margin-left: 8px; }
  table.cast td.desc { margin-top: 6px; line-height: 1.5; }
}

.name-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 12px 0 0; }
.name-pills li {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; font-size: .92rem;
}

.note-box {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; margin-top: 16px;
  color: var(--ink-soft);
}
.note-box p { margin: 0 0 8px; }
.note-box p:last-child { margin-bottom: 0; }

/* ---------- Boosters page ---------- */
.cta-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 20px 0; }
.cta {
  display: block; text-decoration: none; text-align: center;
  background: var(--green-700); color: #fff !important;
  border: 1px solid var(--green-700); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
  transition: transform .12s ease;
}
.cta:hover { transform: translateY(-2px); background: var(--green-500); }
.cta-icon { display: block; font-size: 1.6rem; }
.cta-label { display: block; font-weight: 700; font-size: 1.1rem; }
.cta-note { display: block; font-size: .85rem; opacity: .85; }
.cta.is-disabled {
  background: var(--bg-sunken); color: var(--ink-soft) !important;
  border: 1px dashed var(--line); box-shadow: none;
}

.committee-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: 16px; }
.committee {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-left: 5px solid var(--green-500);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
}
.committee .title { font-weight: 700; }
.committee .note { color: var(--ink-soft); font-size: .92rem; margin-top: 2px; }
.committee-link { font-size: .88rem; font-weight: 600; margin-top: 6px; }
.closing-line { margin-top: 24px; font-weight: 600; }

/* ---------- Page artwork ---------- */
/* Each page carries a piece of scenery along its foot, sitting on the footer's
   green edge. Cards above it are slightly see-through so it reads behind them.
   Everything is held the same distance in from the window edge. */
main.has-art { position: relative; }
main.has-art > section, main.has-art > div { position: relative; z-index: 1; }
main.has-art + footer.site { margin-top: 0; padding-top: 46px; }

.page-art {
  position: absolute; z-index: 0; bottom: 0; right: var(--art-inset);
  height: auto; pointer-events: none; user-select: none;
}

/* Held back until the page has drawn, so the scenery does not flash near the
   top of a still-empty page and then drop into place. */
.page-art, .duloc { opacity: 0; transition: opacity .35s ease; }
body.art-ready .page-art, body.art-ready .duloc { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .page-art, .duloc { transition: none; }
}

/* Home: Shrek's house. Its foundation sits 10.86% up from the foot of the
   artwork, measured off the wall colour, so the image drops by a hair more. */
main.has-house { padding-bottom: 44px; }
.house { width: 440px; max-width: 48%; transform: translateY(11%); }

/* Calendar: the outhouse, aligned on the black shadow beneath it. */
main.has-outhouse { padding-bottom: 40px; }
.outhouse { right: var(--art-inset-wide); width: 210px; max-width: 34%; transform: translateY(2.8%); }

/* Shows: Fiona's tower, tall enough to reach the first show on a wide screen. */
main.has-tower { padding-bottom: 40px; }
/* Sized so the spire lands inside the first show card rather than above it. */
.fiona { right: var(--art-inset-wide); width: 128px; max-width: 26%; transform: translateY(0.4%); }

@media (max-width: 760px) {
  main.has-house { padding-bottom: 40px; }
  .house {
    right: auto; left: 50%; transform: translate(-50%, 11%);
    width: 100%; max-width: 460px;
  }
  .outhouse { width: 150px; max-width: 40%; }
  .fiona { width: 84px; max-width: 30%; }
}

/* Cast: the wall of Duloc. The middle is one merlon of wall repeated, and it
   runs only between the towers, which hide its cut ends. The band is a sibling
   of <main>, so it spans the window without the scrollbar arithmetic that 100vw
   drags in; a negative margin lifts it back over the foot of the page and a
   negative z-index keeps it behind the cards. */
main.has-castle { padding-bottom: 210px; }
/* Same centred column as the rest of the page, so the towers line up with the
   artwork on the other pages rather than with the window edge. */
.duloc {
  position: relative; z-index: -1;
  width: 100%; max-width: var(--wrap); height: 210px;
  margin: -210px auto 0;
  pointer-events: none; user-select: none;
}
.duloc + footer.site { margin-top: 0; padding-top: 20px; }
.duloc-wall {
  position: absolute; bottom: 0; height: 94px;
  left: var(--art-inset-wide); right: var(--art-inset-wide);
  background: url("../img/duloc-wall.png") repeat-x bottom left / auto 100%;
}
.duloc-tower { position: absolute; bottom: 0; height: 210px; width: auto; }
.duloc-tower.left { left: var(--art-inset-wide); }
/* The right tower's pennant overhangs its stonework by 11 of the artwork's
   pixels, so nudge it out to line the tower itself up with its twin. */
.duloc-tower.right { right: calc(var(--art-inset-wide) - 3px); }
.duloc-door {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 74px;
}

@media (max-width: 760px) {
  main.has-castle { padding-bottom: 150px; }
  .duloc { height: 150px; margin-top: -150px; }
  .duloc-wall { height: 67px; }
  .duloc-tower { height: 150px; }
  .duloc-tower.right { right: calc(var(--art-inset-wide) - 2px); }
  .duloc-door { height: 53px; }
}

/* Card surfaces are slightly see-through so the page artwork reads behind them. */
.link-card, .event, .announce, .committee, .note-box, .name-pills li {
  background: color-mix(in srgb, var(--bg-raised) 72%, transparent);
  backdrop-filter: blur(1.5px);
}
.link-card:hover { background: color-mix(in srgb, var(--bg-raised) 92%, transparent); }
.event.is-next { background: color-mix(in srgb, var(--bg-raised) 88%, transparent); }

/* ---------- Footer ---------- */
footer.site {
  margin-top: 56px; padding: 26px 0 36px;
  background: var(--green-900); color: #cfe0c8; text-align: center; font-size: .9rem;
}
footer.site .wrap { text-align: center; }
#footer-note { font-style: italic; font-size: 1rem; opacity: .92; margin: 4px 0 0; }
footer.site a, footer.site .contact-card .value a { color: #fff; }
footer.site a { color: #fff; }

/* ---------- Utility ---------- */
.loading, .error {
  padding: 18px; border-radius: var(--radius); border: 1px dashed var(--line);
  color: var(--ink-soft); text-align: center;
}
.error { border-color: var(--pink); color: var(--pink); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 8px; top: 8px; position: fixed; z-index: 99;
  background: #fff; color: #000; padding: 10px 14px; border-radius: 8px;
}

@media print {
  .nav, .banner, .search-row, .legend, footer.site { display: none; }
  body { background: #fff; }
  .event, .link-card, .announce, table.cast, .committee { box-shadow: none; }
  table.cast th { position: static; }
  .month-label { position: static; }
}