/* TPI-style alternative: parchment and purple sections with torn paper edges, two-tone Dumbledor KERNED headings,
   framed buttons and scroll effects. js/alt.js sets --p (0 to 1) on .hero and [data-scroll] as you scroll */
:root {
  --night: #1a0d20;
  --purple: #2e1639;
  --parchment: #ece4d2;
  --maroon: #7a1f1f;
  --ink: #2b1a1c;
  --brown: #3d2622;
  --gold: #d1bb87;
  --cream: #f3ecda;
  --text-font: 'Trade Gothic Next', Arial, sans-serif;
  --display-font: Dumbledor, Georgia, serif;
  --kerned: 'Dumbledor Kerned', Dumbledor, Georgia, serif;
  --side: 20px;
  --bar: 64px;
  --tear: 40px;
}
@media (min-width: 700px) { :root { --side: 48px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--night); scroll-padding-top: calc(var(--bar) + 8px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--night); color: var(--cream); font: 400 18px/1.55 var(--text-font); overflow-wrap: break-word; }
img, iframe { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 8px 12px; background: var(--gold); color: var(--ink); }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
p { margin: 16px 0 0; }
p:first-child { margin-top: 0; }

.center { text-align: center; }
.wrap, .narrow { position: relative; z-index: 1; margin: 0 auto; }
.wrap { max-width: 1180px; }
.narrow { max-width: 720px; }

/* Headings in capitals, as on bloodontheclocktower.com; the first line takes the accent colour */
.h2 { margin: 0 0 24px; font: 400 clamp(38px, 6vw, 68px)/1 var(--kerned); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.h2 span { display: block; color: var(--maroon); }
.purple .h2 { color: var(--cream); }
.purple .h2 span { color: var(--gold); }
.lead { font: 700 23px/1.35 var(--text-font); }
.eyebrow { margin: 0 0 14px; font: 700 15px/1.2 var(--text-font); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }

/* Framed buttons with a diamond at each end */
.btn, .ts-book { position: relative; display: inline-block; margin: 0 10px; padding: 14px 30px 12px; border: 1px solid var(--maroon); border-radius: 0;
                 background: var(--cream); color: var(--maroon); box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 4px var(--maroon);
                 font: 400 20px/1.1 var(--kerned); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; text-align: center;
                 text-shadow: none; transition: background .25s, color .25s, box-shadow .25s; }
.btn::before, .btn::after, .ts-book::before, .ts-book::after {
  content: ''; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border: 1px solid currentColor; background: inherit; transform: rotate(45deg); }
.btn::before, .ts-book::before { left: -7px; }
.btn::after, .ts-book::after { right: -7px; }
.btn:hover, .ts-book:hover { background: var(--maroon); color: var(--cream); filter: none;
                             box-shadow: inset 0 0 0 3px var(--maroon), inset 0 0 0 4px var(--cream); }
.btn-ghost { background: transparent; color: var(--cream); border-color: currentColor;
             box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px currentColor; }
.btn-ghost::before, .btn-ghost::after { background: currentColor; }
.btn-ghost:hover { background: rgba(243, 236, 218, .12); color: var(--cream); box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px currentColor; }
.btn-small { padding: 9px 18px 8px; font-size: 16px; }
.buttons { display: flex; flex-wrap: wrap; gap: 18px 8px; margin-top: 30px; }
.center .buttons { justify-content: center; }

/* Top bar: see-through over the photo, solid once you scroll; hides while scrolling down, comes back on the way up */
.topbar { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--bar); display: flex; align-items: center; gap: 20px;
          padding: 0 var(--side); background: linear-gradient(rgba(26, 13, 32, .85), rgba(26, 13, 32, 0));
          transition: transform .35s ease, background-color .35s, box-shadow .35s; }
.topbar.solid { background: var(--night) url(/art/night.webp); box-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.topbar.hidden { transform: translateY(-100%); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap;
         font: 400 20px/1 var(--kerned); text-transform: uppercase; color: var(--cream); }
.brand img { border-radius: 50%; }
.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a { padding: 6px 0; border-bottom: 1px solid transparent; text-decoration: none; white-space: nowrap;
         font: 400 15px/1 var(--kerned); text-transform: uppercase; letter-spacing: .06em; color: var(--cream); }
.nav a:hover, .nav a[aria-current] { border-bottom-color: var(--gold); }
.topbar .btn { margin-left: 4px; }
@media (max-width: 1160px) { .nav .sub { display: none; } }
@media (max-width: 600px) {
  .brand span { display: none; }
  .nav { gap: 16px; }
  .nav a[href="/"] { display: none; }
}

/* Hero: the bell tower in purple. On tall enough screens it stays put and the parchment slides over it */
main { position: relative; overflow-x: clip; }
.hero { --p: 0; position: relative; z-index: 0; display: flex; align-items: center; min-height: 100vh; min-height: 100svh;
        padding: calc(var(--bar) + 24px) var(--side) calc(var(--tear) + 72px); overflow: hidden; background: var(--night); }
@media (min-height: 700px) { .hero { position: sticky; top: 0; height: 100svh; max-height: 1000px; min-height: 0; } }
.hero-bg { position: absolute; inset: -80px 0 0; width: 100%; height: calc(100% + 80px); max-width: none; object-fit: cover; object-position: 50% 22%;
           transform: translate3d(0, calc(var(--p) * 80px), 0) scale(calc(1 + var(--p) * .08)); }
.hero::after { content: ''; position: absolute; inset: 0;
               background: linear-gradient(90deg, rgba(26, 13, 32, .9), rgba(26, 13, 32, .5) 55%, rgba(26, 13, 32, .25)),
                           linear-gradient(transparent 55%, rgba(26, 13, 32, .85)); }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center;
              width: 100%; max-width: 1180px; margin: 0 auto;
              opacity: calc(1 - var(--p) * 1.5); transform: translate3d(0, calc(var(--p) * -60px), 0); }
.hero h1 { margin: 0; }
.hero-title { display: block; width: min(100%, 640px); }
.hero-tagline { margin: 22px 0 0; font: 400 clamp(24px, 3.2vw, 40px)/1.1 var(--kerned); text-transform: uppercase; color: var(--cream);
                text-shadow: 0 2px 10px #000; }
.hero-when { margin-top: 14px; font: 700 19px/1.4 var(--text-font); letter-spacing: .03em; color: var(--gold); text-shadow: 0 1px 6px #000; }
.hero-where { margin-top: 6px; font-size: 16px; line-height: 1.4; color: var(--cream); text-shadow: 0 1px 6px #000; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 18px 8px; margin: 30px 0 0; }
.clock { position: relative; justify-self: center; width: min(100%, 460px); aspect-ratio: 1; animation: float 5s ease-in-out infinite alternate; }
.clock-dial { position: absolute; inset: 0; width: 100%; rotate: calc(var(--p) * 120deg); animation: turn 240s linear infinite; }
.clock-puck { position: absolute; left: 50%; top: 50%; width: 58%; translate: -50% -50%; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .7)); }
.clock-puck img { display: block; width: 100%; height: auto; }
.clock-puck img + img { position: absolute; inset: 0; }
/* The ring sways from where it hangs in Puck's mouth, and every so often knocks twice */
.clock-puck .knocker { transform-origin: 51.3% 61%; animation: sway 4.4s ease-in-out infinite, knock 9.6s infinite; }
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .hero-title { margin: 0 auto; }
  .hero-buttons { justify-content: center; }
  .clock { order: -1; width: min(52vw, 230px); }
}

/* Bobbing arrows */
.scroll-down, .chevron { position: relative; display: block; width: 44px; height: 44px; }
.scroll-down { position: absolute; left: 50%; bottom: calc(var(--tear) + 10px); z-index: 1; margin-left: -22px; opacity: calc(1 - var(--p) * 3); }
.chevron { margin: 30px auto 0; }
.scroll-down::before, .chevron::before { content: ''; position: absolute; left: 50%; top: 35%; width: 16px; height: 16px; margin-left: -8px;
                                         border: solid var(--gold); border-width: 0 2px 2px 0; rotate: 45deg; animation: bob 1.6s ease-in-out infinite; }
.chevron::before { border-color: var(--maroon); }

/* Sections, each torn along the top so the one before shows through the gaps */
section { position: relative; z-index: 1; padding: calc(var(--tear) + 56px) var(--side) 88px; }
@media (min-width: 900px) { section { padding-top: calc(var(--tear) + 84px); padding-bottom: 116px; } }
.parchment { background: var(--parchment) url(/art/parchment.webp); color: var(--brown); }
.purple { background: var(--purple) url(/art/purple.webp); color: var(--cream); }
.torn { margin-top: calc(var(--tear) * -1);
        -webkit-mask: var(--edge) 0 0 / 1200px var(--tear) repeat-x, linear-gradient(#000 0 0) 0 calc(var(--tear) - 1px) / 100% 100% no-repeat;
        mask: var(--edge) 0 0 / 1200px var(--tear) repeat-x, linear-gradient(#000 0 0) 0 calc(var(--tear) - 1px) / 100% 100% no-repeat; }
.torn-1 { --edge: url(/art/torn-1.svg); }
.torn-2 { --edge: url(/art/torn-2.svg); }
.torn-3 { --edge: url(/art/torn-3.svg); }

/* Scroll-driven artwork. --p defaults to 1 (finished) so nothing is hidden without JavaScript */
[data-scroll] { --p: 1; --q: 1; }
.story { min-height: 680px; }
.story .narrow { max-width: 640px; }
.side { position: absolute; left: 0; bottom: 0; z-index: 0; width: min(30%, 340px); height: 100%; pointer-events: none; }
.side > * { position: absolute; width: 56%; max-width: 190px; filter: drop-shadow(0 8px 10px rgba(60, 30, 20, .35)); }
.side-a { left: 8%; bottom: 150px; transform-origin: 50% 100%; transform: rotate(calc((1 - var(--q)) * -28deg)) scale(calc(.9 + var(--q) * .1)); }
.side-a img, .side-b img { display: block; width: 100%; height: auto; }
/* The raven rocks on its perch, pivoting at its feet; the moon and branch stay put */
.side-a .raven { position: absolute; inset: 0; transform-origin: 54% 60%; animation: rock 2.8s ease-in-out infinite; }
.side-b { left: 36%; bottom: 36px; transform-origin: 50% 100%; transform: translateX(calc((1 - var(--q)) * -380px));
          animation: cross-sway 7s ease-in-out infinite; }
/* The Monk's string of prayer beads sways slowly from where it leaves the loop, under the cross */
.side-b .beads { position: absolute; inset: 0; transform-origin: 43.5% 69.75%; animation: dangle 4.5s ease-in-out infinite; }
.side-b .cross { position: relative; }
.side-tower { position: absolute; right: 3%; bottom: 0; z-index: 0; width: min(26%, 300px); pointer-events: none; transform-origin: 100% 100%;
              transform: translateY(calc((1 - var(--p)) * 90px)) scale(calc(.5 + var(--p) * .5)); }
@media (max-width: 1240px) { .side-tower { opacity: .5; } }
@media (max-width: 900px) {
  .story .narrow { padding-bottom: 130px; }
  .side { width: 60%; }
  .side > * { max-width: 96px; }
  .side-a { left: 6%; bottom: 40px; }
  .side-b { left: 30%; bottom: 14px; }
  .side-tower { width: 34%; opacity: .45; }
}
.motion .reveal-circle { clip-path: circle(calc(14% + var(--p) * 64%) at 50% 50%); }

/* Who's Coming strip */
#next .ts-strip { color: var(--cream); }
.separator { width: min(420px, 80%); height: 36px; margin: 24px auto 0; background: url(/art/separator.webp) center / contain no-repeat; }

/* Columns, photos and video */
.cols { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) {
  .cols { grid-template-columns: 5fr 7fr; gap: 64px; }
  .cols-wide { grid-template-columns: 1fr 1fr; }
}
/* Stacked on phones and tablets: centre like the single-column sections */
@media (max-width: 899px) {
  .cols .h2 { text-align: center; }
  .cols .buttons { justify-content: center; }
}
.photos { display: grid; gap: 28px; }
.photo { display: block; width: 100%; border: 10px solid #fbf7ee; box-shadow: 0 10px 24px rgba(40, 20, 10, .35); }
.tilt-l { rotate: -2.5deg; }
.tilt-r { rotate: 2deg; width: 92%; margin-left: 8%; }
.embed { position: relative; aspect-ratio: 16 / 9; border: 8px solid #fbf7ee; background: #000; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Click-to-load stand-ins: nothing comes from Google until the video is played or the map opened */
.embed > a:first-child { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.embed img { display: block; width: 100%; height: 100%; object-fit: cover; }
.embed-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 54px; translate: -50% -50%; border-radius: 14px;
  background: rgba(122, 31, 31, .92); box-shadow: 0 4px 14px rgba(0, 0, 0, .5); transition: background .2s, scale .2s; }
.embed-play::after { content: ''; position: absolute; left: 31px; top: 15px; border-style: solid; border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff; }
.embed-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; background: rgba(26, 13, 32, .82);
  font-size: 15px; line-height: 1.3; text-align: center; }
.embed-label small { font-size: inherit; opacity: .8; }
.embed-map .embed-label { right: auto; border-top-right-radius: 4px; }
.embed > a:first-child:hover .embed-play, .embed > a:first-child:focus-visible .embed-play { background: var(--maroon); scale: 1.08; }
.embed > a:first-child:hover .embed-label, .embed > a:first-child:focus-visible .embed-label { text-decoration: underline; }
.map-credit { position: absolute; right: 0; bottom: 0; padding: 2px 6px; background: rgba(255, 255, 255, .85); color: #333;
  font-size: 12px; text-decoration: none; }
.map-credit:hover { text-decoration: underline; }
.links { margin: 20px 0 0; padding-left: 20px; }
.links li + li { margin-top: 8px; }
.intro { margin-bottom: 0; }

/* Cards with a character token over the top edge, like the official events page */
.cards { display: grid; gap: 84px 28px; margin-top: 96px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cards-4 { grid-template-columns: repeat(4, 1fr); } .cards-3 { grid-template-columns: repeat(3, 1fr); } }
/* A card left alone on the last row sits in the middle */
@media (min-width: 640px) and (max-width: 1039px) { .cards-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 14px); } }
@media (min-width: 1040px) { .cards-3 > :last-child:nth-child(3n+1) { grid-column: 2; } }
.card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 76px 24px 30px; text-align: center;
        background: var(--parchment) url(/art/parchment.webp); color: var(--brown); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.card::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(122, 31, 31, .4); pointer-events: none; }
.card-light { background: #fbf8f1; box-shadow: 0 10px 26px rgba(70, 40, 20, .2); }
.card-icon { position: absolute; top: -58px; left: 50%; width: 116px; aspect-ratio: 1; margin-left: -58px; border: 2px solid var(--gold); border-radius: 50%;
             background: var(--parchment) url(/art/parchment.webp); box-shadow: 0 6px 14px rgba(0, 0, 0, .4); }
/* Each icon plays its own movement once: on hover, or on touch screens as the card comes into view and when tapped
   (alt.js adds .play to the card and takes it off when everything has finished) */
.card.play .baron { transform-origin: 50% 100%; animation: tip 1.3s ease-in-out; }
.card.play .beggar { transform-origin: 50% 100%; animation: rock-bowl 1.6s ease-out; }
.card.play .imp { animation: jab .9s; }
.card.play .grandmother { animation: bob-glasses 1.3s ease-in-out; }
/* Layered icons: parts stacked exactly over the face, inside the same gold circle */
div.card-icon { overflow: hidden; }
.card-icon.evil { --alignment-filter: url(#evil-artwork); }
div.card-icon img, div.card-icon svg { position: absolute; inset: 0; width: 100%; height: 100%;
                                     filter: var(--alignment-filter, none); }
.card-icon img.beggar { filter: none; }
/* The Clockmaker's gears turn at speeds in proportion to their sizes (teeth reach 42 and 28 px on the 400px icon),
   whole turns so nothing jumps when they stop; the minute hand ticks round once, the hour hand stays put */
.clockmaker .gear-big { transform-origin: 40.375% 37.875%; --turns: 2turn; }
.clockmaker .gear-small { transform-origin: 49.875% 50%; --turns: -3turn; }
.clockmaker .minute { transform-origin: 50.5% 50.125%; --turns: 1turn; }
.clockmaker .hour { transform-origin: 50.5% 50.125%; }
.card.play .clockmaker .gear-big, .card.play .clockmaker .gear-small { animation: turns 3s ease-in-out; }
.card.play .clockmaker .minute { animation: turns 3s steps(12); }
/* The inn sign hangs face on, so it swings towards and away from us about its hooks' line (y 150 on the 400px icon),
   darker as it tips its face down and lighter as it tips up to the light */
.innkeeper { perspective: 240px; }
.innkeeper .sign { transform-origin: 55% 37.5%; }
.card.play .innkeeper .sign { animation: swing 2.6s ease-in-out; }
/* Mezepheles's quill writes its line: the nib follows the line's stroke and the quill leans back to stay inside the
   circle. At rest the line shows whole */
.mezepheles .quill { transform-origin: 28.25% 73%; }
.mezepheles .nib { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 200; }
.card.play .mezepheles .quill { animation: write 2.2s .1s linear both; }
.card.play .mezepheles .nib { animation: ink 2.2s .1s linear both; }
.card.play .mezepheles .done { animation: inked 2.2s .1s linear both; }
.card h3 { margin: 0; font: 400 26px/1.1 var(--kerned); text-transform: uppercase; color: var(--maroon); }
.card p { font-size: 17px; line-height: 1.5; }
.card > p:not(.tag) { margin-bottom: 24px; }
.card-light > p:not(.tag) { margin-bottom: 0; }
.card .btn { margin-top: auto; }
.card .btn-ghost { color: var(--maroon); }
.card .btn-ghost:hover { background: rgba(122, 31, 31, .08); color: var(--maroon); }
.tag { margin: 10px 0 0; font: 700 14px/1 var(--text-font); letter-spacing: .25em; text-transform: uppercase; color: var(--ink); }

/* Base edition cards: the official logos (BotC Public Media Library) in each edition's own colours, taken from the logos.
   Every logo sits on the same ivory panel; a thin dark outline keeps the light orange and gold lettering readable */
.ed-tb { --ed: #95071a; --ed-dark: #6c0c0c; }
.ed-bmr { --ed: #c8661c; --ed-dark: #7a3a10; --ed-fill: #a3501a; }
.ed-snv { --ed: #5a3c9c; --ed-dark: #3f2a72; }
.ed-custom { --ed: #7f6419; --ed-dark: #5e4a12; }
.card-edition { padding-top: 0; border-top: 6px solid var(--ed); }
.card-edition::before { border-color: var(--ed); opacity: .55; }
.card-edition h3 { align-self: stretch; margin: 0 -24px; padding: 22px 16px; background: #fbf7ee;
                   border-bottom: 1px solid var(--ed); color: var(--ed); line-height: 0; }
.card-logo { display: block; width: auto; height: clamp(190px, 19vw, 240px); max-width: 100%; margin: 0 auto; object-fit: contain;
             filter: drop-shadow(0 0 1px rgba(43, 26, 28, .9)) drop-shadow(0 0 1px rgba(43, 26, 28, .6)) drop-shadow(0 5px 6px rgba(0, 0, 0, .25)); }
span.card-logo { position: relative; height: auto; aspect-ratio: var(--w) / var(--h);
                 width: min(100%, clamp(190px, 19vw, 240px) * var(--w) / var(--h)); }
span.card-logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo-tb { --w: 480; --h: 519; }
.logo-bmr { --w: 480; --h: 441; }
.logo-snv { --w: 480; --h: 435; }
.logo-custom { --w: 480; --h: 518; }
.logo-tb .sprig { transform-origin: 60.4% 15.4%; }
.card.play .logo-tb .sprig { animation: breeze 2.4s ease-in-out; }
.logo-bmr .jaw { transform-origin: 52.5% 89.8%; }
.card.play .logo-bmr .jaw { animation: chomp 1.3s; }
.logo-snv .bee { transform-origin: 40.5% 89.5%; }
.card.play .logo-snv .bee { animation: buzz 2.2s ease-in-out; }
.logo-custom .wings { transform-origin: 40% 24.6%; }
.card.play .logo-custom .wings { animation: flap 1.6s ease-in-out; }
/* --ed-fill: a darker shade behind cream text where the edition colour is too light for 4.5:1 contrast */
.card-edition .tag { margin-top: 20px; padding: 7px 12px 6px 15px; background: var(--ed-fill, var(--ed)); color: var(--cream); }
.card-edition .btn, .card-edition .btn-ghost { background: var(--ed-fill, var(--ed)); color: var(--cream); border-color: var(--ed-dark);
                                               box-shadow: inset 0 0 0 3px var(--ed-fill, var(--ed)), inset 0 0 0 4px rgba(243, 236, 218, .85); }
.card-edition .btn:hover { background: var(--ed-dark); color: var(--cream); box-shadow: inset 0 0 0 3px var(--ed-dark), inset 0 0 0 4px var(--cream); }
.card-edition .btn::before, .card-edition .btn::after { background: var(--ed-fill, var(--ed)); border-color: var(--ed-dark); }

/* Cards, photos and videos rise into place as they come into view */
.motion .rise { opacity: 0; transform: translateY(48px) scale(.96);
                transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.motion .rise.in { opacity: 1; transform: none; }
.cards .rise:nth-child(2), .cards-3 .rise:nth-child(5) { --d: .12s; }
.cards .rise:nth-child(3), .cards-3 .rise:nth-child(6) { --d: .24s; }
.cards-4 .rise:nth-child(4) { --d: .36s; }
.tilt-r.rise { --d: .15s; }

/* Feathers drifting down behind the community guidelines */
.falling { overflow: hidden; }
.feathers img { position: absolute; top: 12%; left: 6%; width: 70px; opacity: 0; pointer-events: none; animation: falling 10s linear infinite; }
.feathers img:nth-child(2) { top: 28%; left: auto; right: 8%; width: 56px; animation-duration: 12s; animation-delay: -4s; }
.feathers img:nth-child(3) { top: 58%; left: 13%; width: 44px; animation-duration: 14s; animation-delay: -8s; }
@media (max-width: 900px) { .feathers img { width: 38px; } .feathers { opacity: .35; } }
.falling .narrow { position: relative; z-index: 1; }
.token-float { display: block; width: min(70%, 300px); margin: 0 auto; filter: drop-shadow(0 12px 16px rgba(60, 30, 20, .35));
               animation: float 4s ease-in-out infinite alternate; }
.group-photo { position: relative; padding-bottom: 70px; }
.group-photo .token-float { position: absolute; right: -14px; bottom: 0; width: min(36%, 170px); margin: 0; }

/* Footer */
.footer { position: relative; z-index: 1; padding: calc(var(--tear) + 56px) var(--side) 40px; background: var(--night) url(/art/night.webp);
          color: #e9e1cf; font-size: 15px; line-height: 1.5; }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 1fr 1fr 1.2fr 1fr; } }
.footer h2 { margin: 0 0 12px; font: 400 18px/1.2 var(--kerned); text-transform: uppercase; letter-spacing: .06em; color: var(--gold); }
.footer address { margin: 0 0 14px; font-style: normal; font-size: 14px; line-height: 1.45; color: #c4baa9; }
.footer ul { margin: 0 0 24px; padding: 0; list-style: none; }
.footer li + li { margin-top: 6px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.hosted { margin: 0 0 8px; font: 700 14px/1 var(--text-font); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.barons > a { display: block; width: fit-content; }
.barons img { display: block; width: 180px; transform-origin: 50% 100%; }
@media (hover: hover) { .barons > a:hover img { animation: hop .75s; } }
.barons > a:focus-visible img, .barons.play img { animation: hop .75s; }
.barons-links { margin-top: 10px; }
.policy img { display: block; width: 140px; }
.policy .heart { width: 64px; margin-top: 18px; animation: heartbeat 3.2s ease-in-out infinite; }
.offscreen, .offscreen * { animation-play-state: paused !important; }
.footer-base { margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(209, 187, 135, .3); text-align: center; font-size: 13px; color: #c4baa9; }
.footer-title { display: block; width: min(100%, 720px); margin: 0 auto 20px; }
.footer-base p { max-width: 640px; margin: 8px auto 0; }

.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 15; width: 48px; height: 48px; border: 1px solid var(--gold); border-radius: 50%;
          background: rgba(26, 13, 32, .88); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.to-top.show { opacity: 1; visibility: visible; }
@media (max-width: 699px) { .footer { padding-bottom: 84px; } }
.to-top::before { content: ''; position: absolute; left: 50%; top: 56%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
                  border: solid var(--gold); border-width: 2px 0 0 2px; rotate: 45deg; }

/* Who's Coming page */
.page-head { padding-top: calc(var(--bar) + 72px); padding-bottom: calc(var(--tear) + 48px); }
.ts-section { padding-top: calc(var(--tear) + 40px); }
.ts-section .ts-page { padding: 0; border: 0; border-image: none; background: none; }
.ts-section .ts-book { margin-top: 6px; font-size: 18px; }

/* Booking page: Eventbrite's embedded checkout */
.book-widget { position: relative; z-index: 1; max-width: 960px; margin: 40px auto 0; }
.book-widget > div { background: #fff; border: 1px solid var(--maroon); box-shadow: 0 0 0 4px var(--parchment), 0 0 0 5px var(--maroon), 0 10px 30px rgba(43, 26, 28, .25); }
.book-widget iframe { display: block; }
/* The widget's own heights (book.js), reserved up front so the page doesn't grow after scrolling to it */
.book-widget.is-open > div { min-height: 950px; }
@media (max-width: 479px) { .book-widget.is-open > div { min-height: 90vh; } }
.book-widget a[data-automation^="checkout-widget-link"] { color: var(--maroon) !important; font-family: var(--text-font) !important; text-decoration: underline !important; }
.book-done { margin-top: 24px; text-align: center; font-weight: 700; color: var(--maroon); }
.book-fallback { position: relative; z-index: 1; margin-top: 28px; font-size: 16px; }

/* Contact page */
.contact-form label { display: block; margin-top: 20px; font: 700 15px/1.3 var(--text-font); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.contact-form input, .contact-form textarea { display: block; width: 100%; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--gold); border-radius: 0;
                                              background: #fbf8f1; color: var(--ink); font: 400 18px/1.4 var(--text-font); letter-spacing: 0; text-transform: none; }
.contact-form textarea { resize: vertical; }
.contact-form .hp { position: absolute; left: -9999px; }
.turnstile { margin-top: 20px; }
.contact-note { font-size: 15px; opacity: .85; }
.contact-form button { margin-top: 12px; cursor: pointer; }
.contact-form button:disabled { opacity: .6; cursor: wait; }
.contact-status:empty { display: none; }
.contact-done { font: 700 20px/1.4 var(--text-font); }

/* Upcoming dates (home page and booking page) and the session switcher on Who's Coming */
.ts-dates { position: relative; z-index: 1; max-width: 760px; margin: 28px auto 0; padding: 0; list-style: none; text-align: left; }
.ts-dates-loading { position: relative; z-index: 1; margin-top: 28px; font-style: italic; }
/* /book: room for three dates (measured row heights) before they load, so the page below doesn't jump */
.book .ts-dates-wrap { min-height: 287px; }
@media (max-width: 599px) { .book .ts-dates-wrap { min-height: 345px; } }
@media (max-width: 519px) { .book .ts-dates-wrap { min-height: 396px; } }
@media (max-width: 379px) { .book .ts-dates-wrap { min-height: 480px; } }
.book .ts-dates-wrap.ts-none { min-height: 0; }
.ts-dates-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 14px 10px;
                border-top: 1px solid rgba(209, 187, 135, .45); }
.ts-dates-row:last-child { border-bottom: 1px solid rgba(209, 187, 135, .45); }
.ts-dates-row.is-current { background: rgba(122, 31, 31, .08); }
.ts-dates-when { flex: 1 1 260px; }
.ts-dates-when strong { margin-right: 8px; font: 400 24px/1.1 var(--kerned); text-transform: uppercase; color: var(--gold); }
.parchment .ts-dates-when strong { color: var(--maroon); }
.ts-dates-time { white-space: nowrap; }
.ts-dates-left { font-weight: 700; white-space: nowrap; }
.is-full .ts-dates-left { text-transform: uppercase; letter-spacing: .1em; }
.ts-dates-row .btn { margin: 0 8px; }
.ts-dates-chosen { padding: 0 8px; font-style: italic; white-space: nowrap; }
.ts-cal { flex-basis: 100%; font-size: 14px; opacity: .85; }
.ts-cal a { margin: 0 2px; }
.ts-page .ts-cal { display: block; margin-top: 18px; font-size: 15px; }
.ts-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 12px; }
.ts-page .ts-separator { margin-bottom: 22px; }
.ts-tab { padding: 8px 14px 7px; border: 1px solid rgba(230, 179, 74, .6); background: transparent; color: var(--cream); cursor: pointer;
          font: 400 16px/1 var(--kerned); text-transform: uppercase; letter-spacing: .06em; }
.ts-tab:hover { border-color: #e6b34a; }
.ts-tab[aria-pressed="true"] { border-color: #e6b34a; background: #e6b34a; color: var(--ink); }
/* Tokens and names drop into place one by one once on screen (townsquare.js adds .ts-wait, then .ts-arrive and the delays).
   translate, not transform, so the seats keep their places on the ring */
.ts-names span { display: inline-block; }
.ts-names { --drop: -10px; }
@media screen and (prefers-reduced-motion: no-preference) {
  .ts-wait > .ts-seat, .ts-names.ts-wait > span { opacity: 0; }
  .ts-names.ts-arrive > span { animation: ts-drop .55s cubic-bezier(.3, .7, .4, 1) var(--arrive, 0ms) both; }
}
.ts-square { --lap: 24s; }
.ts-square .ts-seat { --wake: calc((var(--i) / var(--n) - 1.5) * var(--lap)); }
@media screen and (prefers-reduced-motion: no-preference) {
  .ts-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
                    background: conic-gradient(from -45deg, rgba(255, 210, 130, 0), rgba(255, 210, 130, .7) 45deg, rgba(255, 210, 130, 0) 90deg);
                    -webkit-mask: radial-gradient(closest-side, transparent 68%, #000 76%, #000 99%, transparent);
                    mask: radial-gradient(closest-side, transparent 68%, #000 76%, #000 99%, transparent);
                    animation: ts-lap var(--lap) linear infinite; }
  .ts-square .ts-seat { animation: ts-stir var(--lap) ease-in-out var(--wake) infinite; }
  .ts-arrive > .ts-seat { animation: ts-stir var(--lap) ease-in-out var(--wake) infinite,
                                     ts-drop .55s cubic-bezier(.3, .7, .4, 1) var(--arrive, 0ms) backwards; }
  .ts-square .ts-seat::before { content: ''; position: absolute; inset: -16%; z-index: -1; border-radius: 50%; pointer-events: none; opacity: 0;
                                --glow: var(--lvl, #ffcd78);
                                background: radial-gradient(closest-side, transparent 62%,
                                            color-mix(in srgb, var(--glow) 85%, transparent) 76%, transparent);
                                animation: ts-glow var(--lap) ease-in-out var(--wake) infinite; }
  .ts-square.offscreen .ts-seat, .ts-square.offscreen .ts-seat::before,
  .ts-square.offscreen .ts-ring::after { animation-play-state: paused; }
}
@keyframes ts-lap { to { rotate: 1turn; } }
@keyframes ts-stir { 0%, 40%, 60%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes ts-glow { 0%, 38%, 62%, 100% { opacity: 0; } 50% { opacity: 1; } }

.ts-square .ts-seat { transform: rotate(calc(var(--i) * 360deg / var(--n))) translateY(calc((var(--size) - var(--t)) / -2))
                                 rotate(calc(var(--i) * -360deg / var(--n))) scale(var(--pick, 1)) rotate(var(--tilt, 0deg));
                      transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; cursor: pointer; }
.ts-square .ts-seat.ts-held, .ts-square .ts-seat:focus-visible {
  --pick: 1.12; --tilt: calc(var(--lean, -1) * 5deg); z-index: 2; transition-duration: .2s; transition-timing-function: ease-out;
  box-shadow: 0 12px 18px rgba(0, 0, 0, .7); }
.ts-square .ts-seat.lvl.ts-held, .ts-square .ts-seat.lvl:focus-visible {
  box-shadow: 0 0 0 calc(var(--t) * .05) var(--lvl), 0 12px 18px rgba(0, 0, 0, .7); }
.ts-square .ts-seat:focus-visible { outline: 2px solid var(--cream); outline-offset: 5px; }
.ts-seat[data-level]::after { content: attr(data-level); position: absolute; top: 86%; left: 50%; translate: -50% 0; padding: .2em .7em .1em;
                              border-radius: 999px; background: var(--lvl); color: #1a0d02; text-shadow: none; white-space: nowrap;
                              font: 700 clamp(9px, calc(var(--t) * .12), 12px)/1.2 var(--text-font); letter-spacing: .06em; text-transform: uppercase;
                              box-shadow: 0 2px 4px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .2s; pointer-events: none; }
.ts-seat.ts-held::after, .ts-seat[data-level]:focus-visible::after { opacity: 1; }
/* First visit (never checked in before): a gold ribbon over the token's top edge */
.ts-seat .ts-first-visit { position: absolute; bottom: 88%; left: 50%; translate: -50% 0; padding: .3em .6em .2em; border-radius: 3px;
                           background: linear-gradient(#f6d77e, #c99536); color: #1a0d02; text-shadow: none; white-space: nowrap;
                           font: 700 clamp(8px, calc(var(--t) * .11), 11px)/1 var(--text-font); letter-spacing: .06em; text-transform: uppercase;
                           box-shadow: 0 2px 4px rgba(0, 0, 0, .6); pointer-events: none; }
.ts-star { margin-right: 5px; font-style: normal; color: #f6d77e; }
.ts-levels .ts-firsts { color: #f6d77e; }
.ts-names .ts-first-mark { color: #f6d77e; white-space: nowrap; }
@media (hover: hover) {
  .ts-square .ts-seat:hover { --pick: 1.12; --tilt: calc(var(--lean, -1) * 5deg); z-index: 2; transition-duration: .2s; transition-timing-function: ease-out;
                              box-shadow: 0 12px 18px rgba(0, 0, 0, .7); }
  .ts-square .ts-seat.lvl:hover { box-shadow: 0 0 0 calc(var(--t) * .05) var(--lvl), 0 12px 18px rgba(0, 0, 0, .7); }
  .ts-seat[data-level]:hover::after { opacity: 1; }
}

@keyframes float { to { transform: translateY(-14px); } }
@keyframes ts-drop {
  0% { opacity: 0; translate: 0 var(--drop, -16px); }
  55% { opacity: 1; translate: 0 2px; }
  80% { translate: 0 -1px; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes bob { 50% { translate: 0 10px; } }
@keyframes rock { 25% { rotate: 5deg; } 75% { rotate: -5deg; } }
@keyframes sway { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
@keyframes dangle { 0%, 100% { rotate: -9deg; } 50% { rotate: 9deg; } }
/* Uneven, like a breeze */
@keyframes swing { 0% { rotate: x 0deg; filter: var(--alignment-filter, brightness(1)) brightness(1); animation-timing-function: ease-out; }
                   20% { rotate: x 38deg; filter: var(--alignment-filter, brightness(1)) brightness(.87); }
                   45% { rotate: x -26deg; filter: var(--alignment-filter, brightness(1)) brightness(1.08); }
                   68% { rotate: x 14deg; filter: var(--alignment-filter, brightness(1)) brightness(.95); }
                   86% { rotate: x -6deg; filter: var(--alignment-filter, brightness(1)) brightness(1.02); }
                   100% { rotate: x 0deg; filter: var(--alignment-filter, brightness(1)) brightness(1); } }
@keyframes turns { to { rotate: var(--turns); } }
@keyframes tip { 0%, 100% { rotate: 0deg; translate: 0; } 30%, 60% { rotate: -12deg; translate: 0 -6px; } }
@keyframes rock-bowl { 0%, 100% { rotate: 0deg; } 15% { rotate: 10deg; } 35% { rotate: -8deg; } 55% { rotate: 5deg; } 75% { rotate: -2.5deg; } 90% { rotate: 1deg; } }
@keyframes jab {
  0%, 30%, 65%, 100% { translate: 0; animation-timing-function: ease-out; }
  15%, 50% { translate: 0 -12px; animation-timing-function: ease-in; }
}
@keyframes bob-glasses { 0%, 50%, 100% { translate: 0; } 25% { translate: 0 -5px; } 75% { translate: 0 -3px; } }
@keyframes cross-sway { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
/* The nib at each turn of the line, timed by the distance written (made by a script in the Mezepheles job) */
@keyframes write {
  0% { translate: 0 0; rotate: 0deg; }
  3.36% { translate: 3.25% -2.25%; rotate: -1.5deg; }
  6.32% { translate: 6.50% -3.50%; rotate: -3.3deg; }
  16.00% { translate: 17.75% -5.38%; rotate: -8.2deg; }
  17.27% { translate: 19.25% -5.38%; rotate: -7.1deg; }
  18.25% { translate: 20.12% -4.62%; rotate: -5.2deg; }
  20.27% { translate: 19.88% -2.25%; rotate: -5.2deg; }
  21.18% { translate: 19.25% -1.38%; rotate: -6.6deg; }
  26.34% { translate: 13.25% -0.50%; rotate: -7.5deg; }
  30.07% { translate: 9.00% 0.62%; rotate: -7.1deg; }
  33.83% { translate: 5.00% 2.50%; rotate: -5.4deg; }
  34.40% { translate: 5.25% 3.12%; rotate: -7.3deg; }
  35.89% { translate: 7.00% 3.00%; rotate: -8.5deg; }
  40.26% { translate: 12.00% 1.75%; rotate: -9.2deg; }
  45.46% { translate: 17.75% -0.38%; rotate: -17.3deg; }
  48.03% { translate: 20.75% -0.75%; rotate: -23.3deg; }
  52.63% { translate: 26.00% -2.12%; rotate: -27.8deg; }
  54.33% { translate: 28.00% -2.25%; rotate: -28.0deg; }
  58.74% { translate: 33.00% -3.62%; rotate: -25.0deg; }
  59.94% { translate: 32.00% -2.62%; rotate: -26.4deg; }
  62.60% { translate: 29.25% -1.12%; rotate: -28.6deg; }
  63.28% { translate: 28.75% -0.50%; rotate: -30.8deg; }
  69.33% { translate: 35.75% -1.88%; rotate: -38.4deg; }
  80.00% { translate: 48.25% -3.25%; rotate: -40.0deg; animation-timing-function: ease-in-out; }
  100% { translate: 0 0; rotate: 0deg; }
}
/* pathLength 100; 103 hides the round cap too */
@keyframes ink { 0% { stroke-dashoffset: 103; } 80%, 100% { stroke-dashoffset: 0; } }
@keyframes inked { 0%, 80% { opacity: 0; } 95%, 100% { opacity: 1; } }
/* Lifted (foreshortened) then dropped onto the plate, with a little bounce, twice */
@keyframes knock {
  0%, 80%, 85%, 92% { scale: 1; animation-timing-function: ease-out; }
  83% { scale: 1 .9; animation-timing-function: ease-in; }
  86% { scale: 1 .975; animation-timing-function: ease-in; }
  87% { scale: 1; animation-timing-function: ease-out; }
  90% { scale: 1 .92; animation-timing-function: ease-in; }
  93% { scale: 1 .98; animation-timing-function: ease-in; }
  94%, 100% { scale: 1; }
}
@keyframes heartbeat { 0%, 22%, 100% { scale: 1; } 6% { scale: 1.06; } 12% { scale: 1; } 16% { scale: 1.04; } }
@keyframes hop {
  0%, 100% { translate: 0; rotate: 0deg; scale: 1; }
  15% { translate: 0; rotate: 0deg; scale: 1.03 .94; }
  40% { translate: 0 -12px; rotate: -3deg; scale: .98 1.03; }
  60% { translate: 0 -10px; rotate: 2deg; scale: 1; }
  78% { translate: 0; rotate: 0deg; scale: 1.03 .96; }
  90% { scale: .99 1.01; }
}
@keyframes breeze { 0%, 100% { rotate: 0deg; } 18% { rotate: 6deg; } 40% { rotate: -4deg; } 60% { rotate: 2.5deg; } 80% { rotate: -1deg; } }
@keyframes chomp {
  0%, 30%, 40%, 66%, 100% { translate: 0; rotate: 0deg; animation-timing-function: ease-out; }
  20% { translate: 0 1.6%; rotate: 2deg; animation-timing-function: ease-in; }
  56% { translate: 0 1.1%; rotate: 1.4deg; animation-timing-function: ease-in; }
}
@keyframes buzz {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  10% { translate: .6% -2.6%; rotate: -8deg; }
  20% { translate: 1.6% -4.4%; rotate: -3deg; }
  30% { translate: 1.1% -4%; rotate: 4deg; }
  40% { translate: 2% -5%; rotate: -2deg; }
  50% { translate: 1.4% -4.3%; rotate: 3deg; }
  60% { translate: 2.1% -4.8%; rotate: -2deg; }
  70% { translate: 1.2% -3.6%; rotate: 2deg; }
  86% { translate: .2% -.6%; rotate: 0deg; }
}
@keyframes flap {
  0%, 28%, 58%, 82%, 100% { transform: rotate(56deg) scaleY(1) rotate(-56deg); }
  14% { transform: rotate(56deg) scaleY(.55) rotate(-56deg); }
  43% { transform: rotate(56deg) scaleY(.65) rotate(-56deg); }
  70% { transform: rotate(56deg) scaleY(.85) rotate(-56deg); }
}
@keyframes shiver { 25% { transform: rotate(5deg) translate(2px); } 50% { transform: rotate(-5deg) translate(-2px); } 75% { transform: rotate(3deg) translate(1px); } }
@keyframes falling {
  0% { transform: translate(0, -60px) rotate(0); opacity: 0; }
  10% { opacity: .9; }
  25% { transform: translate(24px, -10px) rotate(12deg); }
  50% { transform: translate(-24px, 40px) rotate(24deg); }
  75% { transform: translate(18px, 90px) rotate(34deg); }
  90% { opacity: .8; }
  100% { transform: translate(-16px, 140px) rotate(40deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .feathers { display: none; }
  .ts-square .ts-seat { --pick: 1 !important; --tilt: 0deg !important; }
}