:root { color-scheme: light; --sky-zenith: #111f63; --ultramarine: #1b31a0; --cobalt: #2b55c3; --azure: #6f9ad9; --haze: #cfdcea; --cream: #f7eedd; --paper: #efe2c8; --paper-deep: #e4d2b0; --apricot: #f2ae84; --coral: #e0705a; --red: #c32e27; --red-deep: #9e2018; --night: #0b1235; --night-2: #141d4d; --ink: #17204a; --ink-soft: #4a5277; --on-dark: #f7eedd; --on-dark-soft: #c4c9e4; --line: rgba(23, 32, 74, .16); --line-dark: rgba(247, 238, 221, .16); --display: "Fraunces", "Cooper Std", "Cooper Black", Georgia, "Times New Roman", serif; --step-0: clamp(1rem, .96rem + .2vw, 1.125rem); --step-1: clamp(1.25rem, 1.15rem + .5vw, 1.5rem); --step-2: clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem); --step-3: clamp(2.2rem, 1.6rem + 2.6vw, 3.75rem); --step-4: clamp(3rem, 2rem + 4.5vw, 6rem); --gutter: max(16px, env(safe-area-inset-left, 0px)); --gutter-r: max(16px, env(safe-area-inset-right, 0px)); --measure: 62ch; --ease: cubic-bezier(.2, .7, .1, 1); }
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body { margin: 0; background: var(--cream); color: var(--ink); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--apricot); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code { font-size: .88em; background: rgba(23,32,74,.07); padding: .05em .35em; border-radius: 3px; }
[hidden] { display: none !important; }
.wrap {
  width: 100%; max-width: 1180px; margin-inline: auto;
  padding-left: var(--gutter); padding-right: var(--gutter-r);
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--sky-zenith);
}
.sky {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    linear-gradient(180deg,
      var(--sky-zenith) 0%, var(--ultramarine) 26%, var(--cobalt) 50%,
      var(--azure) 68%, var(--haze) 80%, var(--cream) 100%);
  color: var(--on-dark);
}
.sky--dusk {
  background: linear-gradient(180deg, var(--night) 0%, var(--sky-zenith) 30%, #3a3f8f 58%, #b7708a 76%, var(--apricot) 88%, var(--night) 100%);
}
.sky canvas,
.dawn canvas { position: absolute; pointer-events: none; }
.sky__layer--sky { z-index: 0; }
.sky__layer--far { z-index: 1; }
.sky__disc { z-index: 2; }
.sky__layer--beams { mix-blend-mode: screen; }
.sky__layer--near { z-index: 4; }
.sky__pig { z-index: 5; }
.sky__paper { z-index: 6; }
.hero,
.pagehead,
.dawn__in { position: relative; z-index: 7; }
.sky__disc { position: absolute; border-radius: 50%; width: clamp(280px, 50vw, 760px); aspect-ratio: 1; right: clamp(-220px, -9vw, -40px); top: clamp(70px, 9vw, 120px); }
.sky__disc::before { 
  content: ""; position: absolute; inset: -3.2%; border-radius: 50%;
  border: 1.5px solid rgba(247,238,221,.38);
}
.sky--dusk .sky__disc { filter: saturate(1.15) brightness(.95); }
.sky__paper { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.07) calc(50% - 1px), rgba(0,0,0,.06) calc(50% + 1px), transparent calc(50% + 2px)),
    linear-gradient(180deg, transparent calc(46% - 1px), rgba(255,255,255,.05) calc(46% - 1px), rgba(0,0,0,.05) calc(46% + 1px), transparent calc(46% + 2px)),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(247,238,221,.14) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.09  0 0 0 0 0.1  0 0 0 0 0.2  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.sky--hero { min-height: clamp(640px, 96svh, 1020px); }
.hero {
  max-width: 1440px; margin-inline: auto;
  padding-top: calc(76px + clamp(40px, 9vh, 110px));
  padding-left: max(16px, env(safe-area-inset-left, 0px), 4vw);
  padding-right: var(--gutter-r);
}
.hero > * { max-width: 680px; }
.hero__word { margin: 0; display: flex; flex-direction: column; font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-size: clamp(4.6rem, 2.2rem + 11vw, 11.5rem); line-height: .8; color: var(--cream); isolation: isolate; }
.hero__word span { position: relative; }
.hero__word span:last-child { margin-left: .55em; }
.hero__word:focus { outline: none; }
@media (max-width: 700px) {
  .sky--hero { min-height: 0; }
  .hero__word span:last-child { margin-left: .3em; }
}
.pagehead {
  max-width: 1180px; margin-inline: auto;
  padding-top: calc(76px + clamp(36px, 7vw, 90px));
  padding-left: var(--gutter); padding-right: var(--gutter-r);
}
.handbill { padding-left: var(--gutter); padding-right: var(--gutter-r); }
.handbill__paper { max-width: 1040px; margin-inline: auto; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .3  0 0 0 0 .15  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    var(--paper); color: var(--ink); padding: clamp(22px, 4vw, 44px) clamp(18px, 4vw, 52px) clamp(22px, 3vw, 34px); -webkit-mask: radial-gradient(circle 6px at 50% 0, transparent 98%, #000) top / 22px 100% repeat-x; mask: radial-gradient(circle 6px at 50% 0, transparent 98%, #000) top / 22px 100% repeat-x; }
.night { position: relative; background: var(--night); color: var(--on-dark); padding-bottom: clamp(70px, 9vw, 130px); }
.stagegrid {
  display: grid; gap: clamp(12px, 1.6vw, 22px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media (max-width: 760px) {
  .stagegrid { grid-template-columns: repeat(6, minmax(0,1fr)); }
}
.ph { margin: 0; position: relative; }
.dawn { background: linear-gradient(180deg, var(--night) 0%, var(--ultramarine) 22%, #6a6fb4 45%, #e5a08e 72%, var(--apricot) 86%, var(--cream) 100%); color: var(--ink); }
.dawn__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
@media (max-width: 800px) {
  .dawn__in { grid-template-columns: 1fr; }
}
.footer { color: var(--on-dark); padding-block: 48px calc(40px + env(safe-area-inset-bottom, 0px)); }
@keyframes rise { from { opacity: .35; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.view.is-entering .hero > *,
.view.is-entering .pagehead > * { animation: rise .9s var(--ease) both; }
.view.is-entering .hero > :nth-child(2),
.view.is-entering .pagehead > :nth-child(2) { animation-delay: .08s; }
.view.is-entering .hero > :nth-child(3),
.view.is-entering .pagehead > :nth-child(3) { animation-delay: .18s; }
.view.is-entering .hero > :nth-child(4) { animation-delay: .26s; }
.view.is-entering .hero > :nth-child(5) { animation-delay: .32s; }
.sky__layer--near { animation: drift-near 48s ease-in-out infinite alternate; }
@keyframes drift-near { from { transform: translateX(-.35%); } to { transform: translateX(.35%); } }
.sky__layer--beams { animation: sway 16s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-1.6%); } to { transform: translateX(1.6%); } }
@keyframes sway { from { transform: rotate(-1.1deg); } to { transform: rotate(1.1deg); } }
@media (prefers-reduced-motion: reduce) {
  *,
*::before,
*::after { animation: none !important; transition: none !important; }
}
.sky__pig { position: absolute; pointer-events: none; width: var(--pw, clamp(340px, 44vw, 720px)); right: var(--px, 4vw); top: var(--py, clamp(118px, 12vw, 170px)); filter: drop-shadow(0 34px 38px rgba(11,18,53,.30)) drop-shadow(0 0 30px rgba(255,214,186,.22)); }
.sky__pig img { width: 100%; height: auto; }
.sky__pig--hero { --pw: clamp(360px, 46vw, 760px); --px: 2vw; }
.sky__pig--far {
  --pw: clamp(130px, 13vw, 210px); --px: 46%; --py: clamp(70px, 8vw, 120px);
  filter: drop-shadow(0 18px 18px rgba(11,18,53,.22)) saturate(.85) sepia(.18);
  opacity: .92;
}
.sky--dusk .sky__pig { filter: drop-shadow(0 30px 34px rgba(5,8,30,.5)) saturate(.85) brightness(.86) hue-rotate(-6deg); }
@media (max-width: 700px) {
  .sky__pig--far { --pw: 34vw; --px: 8vw; --py: 40px; }
}
.sky__disc-ht {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(140,24,18,.6) 0 36%, transparent 41%) 0 0 / 7px 7px;
  -webkit-mask: radial-gradient(circle at 34% 30%, transparent 38%, rgba(0,0,0,.95) 92%);
          mask: radial-gradient(circle at 34% 30%, transparent 38%, rgba(0,0,0,.95) 92%);
  mix-blend-mode: multiply; opacity: .75;
}
.hero__word span::before { content: attr(data-t); position: absolute; z-index: -1; color: transparent; text-shadow: none; white-space: nowrap; -webkit-background-clip: text; background-clip: text; }
.hero__word span::after { 
  content: attr(data-t); position: absolute; left: .045em; top: .05em; z-index: -2;
  color: transparent; -webkit-text-stroke: 1.2px var(--red-deep); text-shadow: none; white-space: nowrap; opacity: .55;
}
.dawn {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(120px, 15vw, 220px) clamp(230px, 24vw, 340px);
}
.dawn .sky__disc { top: auto; animation: none; }
.dawn .sky__paper { opacity: .25; }
.night__beams { mix-blend-mode: screen; }
.night > .wrap { position: relative; z-index: 1; }
:root {
  --mustard: #e9a73b;
  --orange: #de6a2c;
  --brown: #56291a;
  --stripe-b: clamp(4px, .55vw, 7px);
  --stripes: linear-gradient(180deg,
    var(--mustard) 0 20%, var(--orange) 20% 40%, var(--red) 40% 60%, var(--brown) 60% 80%, transparent 80%);
}
.hero__word {
  letter-spacing: -.05em;
  text-shadow:
    .032em .032em 0 var(--mustard),
    .064em .064em 0 var(--orange),
    .096em .096em 0 var(--red),
    .128em .128em 0 var(--brown),
    .2em .24em 34px rgba(11,18,53,.42);
}
.hero__word span::before { left: .17em; top: .17em; background-image: radial-gradient(circle, rgba(86,41,26,.85) 0 42%, transparent 50%); background-size: 5px 5px; }
.hero__word span::after { display: none; }
.handbill__paper { position: relative; padding-top: calc(clamp(22px, 4vw, 44px) + var(--stripe-b) * 5); }
.handbill__paper::before {
  content: ""; position: absolute; left: 0; right: 0; top: 16px; height: calc(var(--stripe-b) * 5);
  background: var(--stripes);
}
.footer { position: relative; }
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--stripe-b) * 5);
  background: var(--stripes);
}
.handbill { position: relative; overflow-x: clip; padding-top: 80px; margin-top: calc(clamp(-150px, -12vw, -90px) - 80px); }
.dawn .sky__disc { width: clamp(240px, 30vw, 470px); right: 7%; bottom: calc(clamp(230px, 24vw, 340px) * .42 + clamp(240px, 30vw, 470px) * .02); background: linear-gradient(180deg, #ffe7c4 0%, var(--mustard) 34%, var(--orange) 62%, var(--red) 86%, var(--brown) 100%); -webkit-mask: linear-gradient(180deg, #000 0 48%, transparent 48% 51%, #000 51% 59%, transparent 59% 63.5%, #000 63.5% 70%, transparent 70% 75.5%, #000 75.5% 81%, transparent 81% 88%, #000 88%); mask: linear-gradient(180deg, #000 0 48%, transparent 48% 51%, #000 51% 59%, transparent 59% 63.5%, #000 63.5% 70%, transparent 70% 75.5%, #000 75.5% 81%, transparent 81% 88%, #000 88%); }
.dawn .sky__disc::before,
.dawn .sky__disc::after,
.dawn .sky__disc-ht { display: none; }
@media (max-width: 700px) {
  .dawn .sky__disc { width: 60vw; right: -8vw; }
}
.sky--hero .sky__disc { translate: 0 calc(var(--scroll, 0) * .3px); will-change: translate; }
.sky--hero .sky__layer--near { translate: 0 calc(var(--scroll, 0) * -.06px); will-change: transform, translate; }
.sky--hero .sky__layer--beams { opacity: max(0, calc(1 - var(--scroll, 0) / 420)); }
.sky--hero::before { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.sky__pig {
  transform:
    translate3d(calc(var(--scroll, 0) * .08px), calc(var(--scroll, 0) * -.2px), 0)
    rotate(var(--pr, 0deg)) scaleX(var(--pf, 1));
  will-change: transform, translate, rotate;
}
.sky__pig img {
  animation: pig-bob 7.5s ease-in-out infinite alternate, pig-sway 11.5s ease-in-out infinite alternate;
  transform-origin: 50% 30%; 
}
@keyframes pig-bob { from { translate: 0 -7px; } to { translate: 0 9px; } }
@keyframes pig-sway { from { rotate: -1.4deg; } to { rotate: 1.6deg; } }
@keyframes pig-in {
  0%   { translate: 16vw 34vh; rotate: 9deg;    scale: .82; opacity: 0; }
  18%  { opacity: 1; }
  58%  { translate: -1.1vw -2.2vh; rotate: -3deg; scale: 1.01; }
  76%  { translate: .5vw .9vh;    rotate: 1.4deg;  scale: 1; }
  90%  { translate: -.2vw -.3vh;  rotate: -.5deg; }
  100% { translate: 0 0;          rotate: 0deg;    scale: 1; opacity: 1; }
}
.view.is-entering .sky__pig { animation: pig-in 4.2s cubic-bezier(.33,.0,.2,1) backwards; }
.view.is-entering .sky__pig--far { animation-delay: .3s; animation-duration: 5s; }
@keyframes beams-in { from { opacity: 0; } }
.view.is-entering .sky__layer--beams { animation: sway 16s ease-in-out infinite alternate, beams-in 1.8s ease 2.6s backwards; }
.sky__layer--far { animation: drift-far 70s ease-in-out infinite alternate; }
@keyframes drift-far { from { transform: translateX(-2.4%); } to { transform: translateX(1.2%); } }
@media (prefers-reduced-motion: reduce) {
  .sky__pig,
.sky--hero .sky__disc,
.sky--hero .sky__layer--near { translate: none; }
  .sky--hero::before { display: none; }
}
.sky__disc { animation: none; }
.dawn .sky__disc { box-shadow: none; filter: none; }
.sky__pig,
.sky--dusk .sky__pig { filter: none; }
.sky--dusk .sky__pig img { opacity: .9; }
.sky__paper { mix-blend-mode: normal; opacity: .22; }
.sky__layer--beams,
.night__beams { mix-blend-mode: normal; }
.sky__cloudart { position: absolute; height: auto; max-width: none; pointer-events: none; user-select: none; will-change: transform, opacity; }
.sky__cloudart--far { z-index: 2; opacity: .82; }
.sky__cloudart--mid { z-index: 3; }
.sky__cloudart--bank,
.sky__cloudart--tower { z-index: 4; }
.sky--dusk .sky__cloudart { filter: brightness(.74) saturate(.9) hue-rotate(-14deg); }
.dawn .sky__cloudart { filter: saturate(1.12); }
.sky--hero .sky__cloudart--far { translate: 0 calc(var(--scroll, 0) * -.05px); }
.sky--hero .sky__cloudart--mid { translate: 0 calc(var(--scroll, 0) * -.13px); }
.sky--hero .sky__cloudart--tower { translate: 0 calc(var(--scroll, 0) * -.07px); }
.sky--hero .sky__cloudart--bank { translate: 0 calc(var(--scroll, 0) * -.04px); }
@media (prefers-reduced-motion: reduce) {
  .sky__cloudart { translate: none !important; }
}
.sky--hero { padding-bottom: clamp(300px, 36vh, 410px); }
.sky__venue { position: absolute; z-index: 4; }
.sky__venue img { display: block; width: 100%; height: auto; max-width: none; }
.sky__venue img + img { position: absolute; inset: 0; }
.sky__venue-glow { mix-blend-mode: screen; opacity: .8; animation: venue-breathe 5.5s ease-in-out infinite alternate; }
.sky__venue-bulbs { mix-blend-mode: screen; opacity: .25; animation: venue-chase 1.5s steps(1, end) infinite; }
.sky__venue-bulbs--1 { animation-delay: -.5s; }
.sky__venue-bulbs--2 { animation-delay: -1s; }
@keyframes venue-breathe { from { opacity: .62; } to { opacity: .95; } }
@keyframes venue-chase { 0% { opacity: 1; } 33.3% { opacity: .22; } }
.sky--dusk .sky__venue-base { filter: brightness(.66) saturate(.9) hue-rotate(-10deg); }
.sky--dusk .sky__venue-glow { animation-name: venue-breathe-night; }
@keyframes venue-breathe-night { from { opacity: .95; } to { opacity: 1; } }
.sky--hero .sky__venue { translate: 0 calc(var(--scroll, 0) * -.06px); }
@media (prefers-reduced-motion: reduce) {
  .sky__venue-glow { opacity: .85; }
  .sky__venue-bulbs { opacity: .8; }
}
.sky__layer--beams { z-index: 5; }
:root {
  --text: "Jost", "Futura", "Century Gothic", "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  --r-card: 22px;
  --r-sheet: 28px;
  --ink-line: rgba(86, 41, 26, .28);
  --ink-line-soft: rgba(86, 41, 26, .14);
  --hatch: repeating-linear-gradient(-45deg, rgba(86,41,26,.085) 0 1.5px, transparent 1.5px 6px);
  --hatch-gold: repeating-linear-gradient(-45deg, rgba(233,167,59,.38) 0 1.5px, transparent 1.5px 6px);
  --hatch-night: repeating-linear-gradient(-45deg, rgba(247,238,221,.05) 0 1.5px, transparent 1.5px 7px);
  --paper-tex:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .34  0 0 0 0 .2  0 0 0 0 .1  0 0 0 .075 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='640'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .36  0 0 0 0 .16  0 0 0 .11 -.02'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
}
body { font-family: var(--text); font-size: clamp(1.02rem, .97rem + .22vw, 1.15rem); line-height: 1.6; letter-spacing: .005em; font-variation-settings: normal; }
.handbill__paper {
  background-color: var(--paper); background-image: var(--paper-tex);
  border-radius: 0 0 var(--r-sheet) var(--r-sheet);
  box-shadow: inset 0 0 80px rgba(150, 90, 40, .13), inset 0 -1px 0 rgba(86,41,26,.12);
}
.handbill::before { 
  content: ""; position: absolute; z-index: -1; top: 110px; bottom: 6px;
  left: max(16px, (100% - 1040px) / 2); right: max(16px, (100% - 1040px) / 2);
  border-radius: 0 0 var(--r-sheet) var(--r-sheet);
  box-shadow: 0 36px 60px -26px rgba(17, 31, 99, .55);
}
.handbill { z-index: 8; }
.sky__venue { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 97%); mask-image: linear-gradient(180deg, #000 70%, transparent 97%); }
.sky__venue-halo {
  position: absolute; z-index: 4; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 222, 196, .55), rgba(255, 222, 196, .18) 60%, transparent);
}
.sky__cloudart--nest { z-index: 4; }
.sky__cloudart--nest-front { z-index: 4; }
.sky__cloudart--fore { z-index: 5; }
.sky--hero .sky__cloudart--nest,
.sky--hero .sky__cloudart--nest-front,
.sky--hero .sky__venue-halo { translate: 0 calc(var(--scroll, 0) * -.06px); }
.sky--hero .sky__cloudart--fore { translate: 0 calc(var(--scroll, 0) * -.16px); }
.sky--dusk .sky__venue-halo { background: radial-gradient(closest-side, rgba(255, 196, 140, .35), transparent); }
.venue-stage { position: absolute; z-index: 3; pointer-events: none; }
.venue-stage .sky__venue,
.venue-stage .sky__venue-halo,
.venue-stage .sky__cloudart { translate: none; }
.handbill .handbill__paper { padding-top: calc(clamp(22px, 4vw, 44px) + var(--stripe-b) * 5 + 34px); }
:root { --step--1: clamp(.92rem, .89rem + .15vw, .98rem); }
@media (max-width: 700px) {
  .sky__pig--hero { --pw: 72vw; --px: 6vw; --py: 70px; }
  .sky--hero .sky__disc { width: 56vw; right: -20vw; top: 54px; }
  .hero { padding-top: calc(84px + 48vw); }
  .sky--hero { padding-bottom: 262px; }
  .handbill .handbill__paper { padding-top: calc(22px + var(--stripe-b) * 5 + 30px); padding-bottom: 20px; }
  .night { padding-bottom: 60px; }
  .dawn { padding-block: 90px 230px; }
  .footer { padding-top: calc(36px + var(--stripe-b) * 4); }
}
:root { --name: "Shrikhand", "Cooper Black", "Fraunces", Georgia, serif; --cw: clamp(232px, 64vw, 292px); }
.night { margin-top: 0; }
@media (max-width: 700px) {
  .night { margin-top: 0; }
}
.hero__word--art { display: block; text-shadow: none; margin: -.4rem 0 0; line-height: 0; position: relative; }
.hero__word--art::before,
.hero__word--art::after { content: none; }
.logo-word { display: block; position: relative; }
.logo-word::before,
.logo-word::after { content: none !important; }
.logo-word img { display: block; width: 100%; height: auto; }
.logo-word--stack { width: clamp(320px, 44vw, 700px); }
.hero > .hero__word--art { max-width: none; }
/* the logo holds still and only drifts gently with the scroll; it fades in once on arrival */
.logo-word--stack img { filter: drop-shadow(0 12px 20px rgba(11, 18, 53, .3)); }
@keyframes logo-in { from { opacity: 0; } to { opacity: 1; } }
.view.is-entering .hero > .hero__word--art { animation: none; }
.view.is-entering .logo-word--stack { animation: logo-in 1.2s ease-out .15s backwards; }
.sky--hero .logo-word--stack { translate: 0 calc(var(--scroll, 0) * -.08px); }
@media (max-width: 700px) {
  .logo-word--stack { width: 90vw; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sky--hero .logo-word--stack { translate: none; }
  .view.is-entering .logo-word--stack { animation: none; }
}
.hero__word--art > .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
.birds { position: absolute; left: 0; top: 0; pointer-events: none; }
.sky--hero .birds--far { translate: 0 calc(var(--scroll, 0) * -.03px); }
.sky--hero .birds--mid { translate: 0 calc(var(--scroll, 0) * -.09px); }
.sky--hero .birds--fore { translate: 0 calc(var(--scroll, 0) * -.16px); }
.sky--dusk .birds { opacity: .82; }
.sky__disc {
  background: url("../art/sun.webp") center / 100% 100% no-repeat;
  box-shadow: 0 0 60px rgba(255, 196, 150, .5), 0 0 160px rgba(255, 170, 120, .28);
}
.sky__disc-ht { display: none; }
.sky__disc::after { 
  content: ""; position: absolute; inset: -22%; border: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 170, .42), rgba(255, 190, 140, .16) 55%, transparent 72%);
  z-index: -1; animation: sun-breathe 9s ease-in-out infinite alternate;
}
.sky__disc { isolation: isolate; }
@keyframes sun-breathe { from { opacity: .7; } to { opacity: 1; } }
.sky--hero::before {
  background: linear-gradient(180deg, rgba(10, 16, 60, .95) 0%, rgba(58, 52, 130, .7) 38%, rgba(236, 140, 100, .75) 72%, rgba(250, 186, 120, .6) 100%);
  opacity: min(.5, calc(var(--scroll, 0) / 1500));
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 90%); mask-image: linear-gradient(180deg, #000 55%, transparent 90%);
}
.stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.stars canvas { position: absolute; left: 0; top: 0; }
.stars__tw { position: absolute; inset: 0; }
.star-tw {
  position: absolute; translate: -50% -50%; opacity: .2;
  background:
    radial-gradient(circle, rgba(255,250,236,1) 0 14%, rgba(255,240,220,.5) 22%, transparent 46%),
    linear-gradient(90deg, transparent 46%, rgba(255,246,230,.85) 50%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(255,246,230,.85) 50%, transparent 54%);
  animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle { 0% { opacity: .12; scale: .55; } 60% { opacity: .95; scale: 1; } 100% { opacity: .35; scale: .75; } }
.stars-still .star-tw { animation: none; opacity: .6; }
.stars--day { opacity: min(.75, calc(.3 + var(--scroll, 0) / 1400)); }
.stars--day .star-tw { animation-duration: 7s !important; }
.dawn.sky--night {
  background: linear-gradient(180deg, #050922 0%, #0b1448 30%, #16216a 55%, #2a2f7e 75%, #111f63 100%);
  color: var(--on-dark);
}
.dawn.sky--night .sky__disc { background: url("../art/moon.webp") center / 100% 100% no-repeat; -webkit-mask: none; mask: none; filter: none; animation: none; bottom: auto; box-shadow: 0 0 50px rgba(226, 228, 255, .35), 0 0 140px rgba(200, 206, 255, .22); }
.dawn.sky--night .sky__disc::before { display: none; }
.dawn.sky--night .sky__disc::after {
  display: block; inset: -30%;
  background: radial-gradient(closest-side, rgba(220, 226, 255, .3), rgba(190, 200, 255, .1) 55%, transparent 72%);
  animation: moon-breathe 11s ease-in-out infinite alternate;
}
@keyframes moon-breathe { from { opacity: .65; } to { opacity: 1; } }
.dawn.sky--night .sky__paper { opacity: .12; }
.dawn.sky--night .sky__venue-base { filter: brightness(.62) saturate(.85) hue-rotate(-12deg); }
.dawn.sky--night .sky__venue-glow { animation-name: venue-breathe-night; opacity: 1; }
.dawn.sky--night .sky__venue-halo { background: radial-gradient(closest-side, rgba(255, 200, 140, .32), transparent); }
.dawn.sky--night .sky__pig img { filter: brightness(.78) saturate(.85); }
.dawn.sky--night .sky__cloudart { filter: brightness(.6) saturate(.7) hue-rotate(-18deg); }
.dawn.sky--night .sky__layer--beams { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .sky__disc::after { animation: none; opacity: .9; }
}
.dawn.sky--night { padding-top: clamp(230px, 22vw, 320px); }
.dawn.sky--night.tz-night { padding-top: 124px; }
.dawn.sky--night .sky__disc { width: clamp(140px, 14vw, 220px); top: clamp(34px, 3.4vw, 56px); right: 12%; }
@media (max-width: 700px) {
  .dawn.sky--night { padding-top: 170px; }
  .dawn.sky--night.tz-night { padding-top: 150px; }
  .dawn.sky--night .sky__disc { width: 30vw; top: 34px; right: 8vw; }
}
@media (max-width: 700px) {
  .sky__disc { background-image: url("../art/sun-sm.webp"); }
  .dawn.sky--night .sky__disc { background-image: url("../art/moon-sm.webp"); }
}
html[data-tod="night"] .sky:not(.dawn) .sky__disc {
  background-image: url("../art/moon.webp");
  box-shadow: 0 0 50px rgba(226, 228, 255, .32), 0 0 150px rgba(200, 206, 255, .2);
}
html[data-tod="night"] .sky--hero .sky__disc { width: clamp(240px, 34vw, 520px); right: clamp(-60px, 2vw, 60px); }
html[data-tod="night"] .sky:not(.dawn) .sky__disc::after { background: radial-gradient(closest-side, rgba(220, 226, 255, .3), rgba(190, 200, 255, .1) 55%, transparent 72%); }
html[data-tod="night"] .sky--hero::before { display: none; }
html[data-tod="night"] .sky .sky__pig img { filter: brightness(.8) saturate(.85); }
html[data-tod="night"] .sky .sky__cloudart { filter: brightness(.62) saturate(.7) hue-rotate(-18deg); }
html[data-tod="night"] .sky__venue-base { filter: brightness(.62) saturate(.85) hue-rotate(-12deg); }
html[data-tod="night"] .sky__venue-glow { animation-name: venue-breathe-night; opacity: 1; }
@media (max-width: 700px) {
  html[data-tod="night"] .sky:not(.dawn) .sky__disc { background-image: url("../art/moon-sm.webp"); }
  html[data-tod="night"] .sky--hero .sky__disc { width: 46vw; right: -6vw; }
}
html[data-tod="evening"] .sky .sky__cloudart { filter: sepia(.22) saturate(1.15) hue-rotate(-8deg); }
html[data-tod="evening"] .sky .sky__pig img { filter: saturate(1.08) sepia(.08); }
html[data-tod="morning"] .sky__disc { filter: saturate(.88) brightness(1.05); }
html[data-tod="morning"] .sky .sky__cloudart { filter: brightness(1.04) saturate(.92); }
.sky__pig img,
.sky__venue-base,
.sky__disc { pointer-events: auto; }
.sky__pig img { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sky__venue { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sky__venue > img:not(.sky__venue-base) { pointer-events: none; }
.sky__disc { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero,
.pagehead,
.dawn__in,
.hero__word--art { pointer-events: none; }
.hero > *:not(.hero__word),
.pagehead > *,
.dawn__in > * { pointer-events: auto; }
.logo-word { pointer-events: none; }
.sky__pig img { transform: translate(var(--nx, 0px), var(--ny, 0px)) rotate(var(--na, 0deg)); }
:root { --rev-dusk: clamp(300px, 34vw, 480px); }
.is-offscreen,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after { animation-play-state: paused !important; }
.footer { padding-top: 0; background: var(--sky-zenith); }
.footer::before { z-index: 5; }
#because-floyd { scroll-margin-top: 70px; }
#showreel { scroll-margin-top: 90px; padding-top: clamp(60px, 8vw, 110px); }
.sky--hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(70px, 9vw, 130px); z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, rgba(247, 238, 221, 0), rgba(247, 238, 221, .75) 55%, var(--cream)); }
.sky--hero .hero { position: relative; z-index: 7; }
@media (max-width: 700px) {
  .dawn .sky__pig--far { --px: 64vw; --py: 70px; --pw: 28vw; }
}
.logo-word { filter: none; }
.logo-word img { filter: drop-shadow(0 12px 20px rgba(11, 18, 53, .3)); }
.night__beams { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.night__beam { position: absolute; transform-origin: 50% 100%; will-change: transform; }
body.tz { background: var(--cream); }
.tz .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tz-hero { min-height: 100svh; padding-bottom: clamp(210px, 25vh, 300px); }
.tz-hero__in { display: grid; justify-items: center; text-align: center; padding-top: clamp(96px, 13vh, 150px); padding-inline: 16px; max-width: none; }
.tz-hero__in > * { max-width: none; }
.tz-logo { align-items: center; }
.tz .logo-word--stack { width: clamp(300px, 38vw, 600px); }
.tz .logo-word { cursor: default; }
.tz-tag { margin: clamp(22px, 3.4vh, 40px) 0 0; font-family: var(--display); font-style: italic; font-weight: 700; font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
  font-size: clamp(1.25rem, .95rem + 1.4vw, 2.15rem); line-height: 1.2; letter-spacing: .005em; color: var(--cream);
  text-shadow: 0 2px 0 rgba(195, 46, 39, .6), 0 0 22px rgba(10, 16, 60, .6), 0 6px 30px rgba(10, 16, 60, .5); }
.tz-tag span { display: inline-block; }
.view.is-entering .tz-tag span { animation: tz-up 1.1s cubic-bezier(.2, .8, .2, 1) backwards; }
.view.is-entering .tz-tag span:first-child { animation-delay: .7s; }
.view.is-entering .tz-tag span:last-child { animation-delay: 1s; }
@keyframes tz-up { from { opacity: 0; translate: 0 18px; filter: blur(4px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.tz-pig { --pw: clamp(210px, 25vw, 400px); --px: clamp(10px, 3vw, 60px); --py: clamp(90px, 12vh, 150px); }
.tz-cue { position: absolute; left: 50%; bottom: clamp(26px, 4vh, 44px); z-index: 8; translate: -50% 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  color: var(--brown); transition: opacity .6s; }
.tz-cue span { width: 14px; height: 14px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; rotate: 45deg; translate: 0 -3px; animation: tz-cue 2.4s ease-in-out infinite; }
@keyframes tz-cue { 0%, 100% { translate: 0 -5px; opacity: .45; } 50% { translate: 0 3px; opacity: 1; } }
.tz-cue.is-gone { opacity: 0; pointer-events: none; }
.tz-cue:focus-visible { outline: 3px solid var(--apricot); outline-offset: 2px; }
.tz-dusk { position: relative; z-index: 2; height: clamp(190px, 18vw, 260px); margin-top: clamp(-100px, -7vw, -60px);
  background: linear-gradient(180deg, rgba(247, 238, 221, 0) 0%, var(--cream) 16%, #f6dfb6 25%, #f0ba86 35%, #df8a7b 46%, #a96690 57%, #6c4f97 66%, #504795 76%, #383987 85%, #262b72 93%, #1c2265 100%); }
.tz-dusk::before { content: ""; position: absolute; left: -6%; right: -6%; top: 14%; height: clamp(80px, 11vw, 160px); background: url("../art/cloud-bank.webp") center top / 100% 100% no-repeat; opacity: .85; filter: sepia(.2) saturate(1.15) hue-rotate(-8deg); }
.tz-night { margin-top: -1px; padding-bottom: clamp(270px, 31vw, 450px); }
.tz-night__in { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; }
.tz-dawn { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; align-content: start; text-align: center; }
.tz-dawn__glow { position: absolute; left: 50%; bottom: 4%; width: min(120vw, 1300px); aspect-ratio: 2 / 1; translate: -50% 0; z-index: -1;
  background: radial-gradient(50% 60% at 50% 100%, rgba(255, 240, 194, .95), rgba(248, 213, 138, .5) 40%, rgba(248, 213, 138, 0) 75%); }
.tz-shape { margin: 0; font-family: var(--display); font-style: italic; font-weight: 800; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; line-height: 1.04; color: var(--cream); text-wrap: balance; text-shadow: .03em .03em 0 var(--mustard), .06em .06em 0 var(--orange), .09em .09em 0 var(--red), 0 .3em .7em rgba(20, 14, 50, .45); }
.tz-dawn__pig { position: absolute; left: 0; z-index: 1; opacity: .9; animation: tz-pig-cross 46s linear infinite; will-change: transform; }
.tz-dawn__pig img { display: block; width: 100%; height: auto; filter: sepia(.2) saturate(.9) drop-shadow(0 10px 10px rgba(86, 41, 26, .2)); }
/* the mill town: the painted skyline, its lit windows breathing, and the odd glint of light */
.tz-town { position: absolute; left: 50%; bottom: 0; width: max(100%, 820px); aspect-ratio: 1970 / 687; translate: -50% 0; }
.tz-town__art,
.tz-town__glow { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tz-town__glow { opacity: .7; animation: tz-glow 7s ease-in-out infinite alternate; }
@keyframes tz-glow { from { opacity: .45; } to { opacity: .95; } }
.tz-town::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4%; background: linear-gradient(180deg, rgba(26, 11, 6, 0), #1a0b06); }
.tz-spark { position: absolute; left: var(--x); top: var(--y); width: calc(3.4% * var(--s, 1)); aspect-ratio: 1; translate: -50% -50%; opacity: 0; pointer-events: none;
  animation: tz-spark var(--t, 7s) ease-in-out var(--dl, 0s) infinite; }
.tz-spark::before,
.tz-spark::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; }
/* a four-pointed glint: two fine rays over a warm bloom */
.tz-spark::before { width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, #fffdf2 50%, transparent) center / 100% 6% no-repeat,
              linear-gradient(180deg, transparent, #fffdf2 50%, transparent) center / 6% 100% no-repeat;
  filter: drop-shadow(0 0 3px rgba(255, 226, 150, .9)); border-radius: 0; }
.tz-spark::after { width: 52%; height: 52%; background: radial-gradient(closest-side, #fffbe9, rgba(255, 214, 130, .7) 45%, rgba(255, 214, 130, 0)); }
@keyframes tz-spark {
  0%, 56%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  70% { opacity: 1; transform: scale(1) rotate(22deg); }
  86% { opacity: 0; transform: scale(.3) rotate(45deg); }
}
.tz-foot { background: #1a0b06; color: rgba(247, 238, 221, .72); text-align: center; display: grid; justify-items: center; gap: 12px;
  padding: 34px 16px calc(30px + env(safe-area-inset-bottom, 0px)); }
.tz-foot__mark { width: 150px; height: auto; filter: drop-shadow(0 2px 5px rgba(11, 18, 53, .35)); }
.tz-foot__legal { margin: 0; max-width: 62ch; font-size: .85rem; line-height: 1.5; }
.tz-foot__c { margin: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
/* words rise into place as they arrive; without the script they are simply there */
.tz-js .tz-reveal { opacity: 0; translate: 0 16px; transition: opacity .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s), translate 1.1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.tz-js .tz-reveal.is-in,
.tz-all-in .tz-reveal { opacity: 1; translate: 0 0; }
@media (max-width: 700px) {
  .tz-hero__in { padding-top: clamp(236px, 31vh, 300px); }
  .tz-pig { --pw: 60vw; --px: 4vw; --py: clamp(54px, 8vh, 80px); }
  .tz .logo-word--stack { width: 88vw; }
  .tz-hero { padding-bottom: 236px; }
}
@media (prefers-reduced-motion: reduce) {
  .view.is-entering .tz-tag span,
.tz-cue span,
.tz-dawn__pig,
.tz-town__glow { animation: none; }
  .tz-dawn__pig { transform: translate(62vw, 0); }
  .tz-spark { display: none; }
  .tz-js .tz-reveal { opacity: 1; translate: none; transition: none; }
}
.tz main,
main.view { overflow-x: clip; }
/* ---------- fixes: seams, pig rendering, the dawn pig's flight path ---------- */
/* the dusk spills a little way into the night, so the two never meet on a line */
.tz-dusk::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: clamp(130px, 16vw, 230px); pointer-events: none;
  background: linear-gradient(180deg, #1c2265 0%, rgba(28, 34, 101, .6) 22%, rgba(28, 34, 101, .2) 55%, rgba(28, 34, 101, 0) 85%); }
.tz-dusk::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 50%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 50%, transparent 100%) !important; }
/* the pigs carry their own shadow: a soft blur on a big box makes some phones drop part of the picture */
.tz .sky__pig { filter: none !important; will-change: auto; }
.tz .sky__pig img { filter: drop-shadow(0 16px 14px rgba(11, 18, 53, .28)); }
html[data-tod="night"] .tz .sky__pig img,
.tz .dawn.sky--night .sky__pig img { filter: brightness(.8) saturate(.85) drop-shadow(0 16px 14px rgba(5, 9, 34, .4)); }
html[data-tod="evening"] .tz .sky__pig img { filter: saturate(1.08) sepia(.08) drop-shadow(0 16px 14px rgba(11, 18, 53, .28)); }
/* the dawn pig crosses above the words, never through them */
.tz-dawn__pig { top: clamp(18px, 2.4vw, 40px); width: clamp(84px, 9vw, 150px); }
@keyframes tz-pig-cross { from { transform: translate(-30vw, 18px) rotate(-2deg); } to { transform: translate(130vw, -10px) rotate(2deg); } }
/* ---------- performance and stability ---------- */
/* the two logo words float with a plain transform animation: no permanent graphics layer needed */
/* phones get the lighter cloud bank in the sunset */
@media (max-width: 900px) {
  .tz-dusk::before { background-image: url("../art/cloud-bank-sm.webp"); }
}
/* mid-width screens: the tagline stacks so it stays clear of the cloud theatre */
@media (min-width: 701px) and (max-width: 1280px) {
  .tz-tag span { display: block; }
}
/* portrait tablets: the phone composition, scaled up (pig above, name below) */
@media (min-width: 701px) and (max-aspect-ratio: 4/5) {
  .tz-pig { --pw: 46vw; --px: 5vw; --py: 90px; }
  .tz-hero__in { padding-top: clamp(300px, 34vh, 420px); }
  .tz .logo-word--stack { width: 70vw; }
  .tz-tag { font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); }
  .tz-hero { --venue-x: .87; }
}
/* ---------- v2 refinement: a fuller concept and a proper ending ---------- */
/* the concept: a heading with presence and two comfortable paragraphs */
.tz-night__in { gap: 0; }
.tz-concept { position: relative; width: min(100%, 980px); display: grid; justify-items: center; text-align: center; }
/* a soft pool of night behind the words keeps them clear of the moon and drifting cloud */
.tz-concept::before { content: ""; position: absolute; inset: -12% -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(12, 17, 66, .62), rgba(12, 17, 66, .34) 60%, rgba(12, 17, 66, 0)); }
.tz-mark { margin: 0 0 clamp(18px, 2.2vw, 26px); display: flex; align-items: center; gap: 14px; }
.tz-mark span { width: clamp(36px, 5vw, 64px); height: 1px; background: linear-gradient(90deg, transparent, rgba(233, 167, 59, .8)); }
.tz-mark span:last-child { background: linear-gradient(90deg, rgba(233, 167, 59, .8), transparent); }
.tz-mark i { width: 9px; height: 9px; rotate: 45deg; background: var(--mustard); box-shadow: 0 0 14px rgba(233, 167, 59, .7); }
.tz-concept__h { margin: 0; max-width: 17ch; font-family: var(--display); font-style: italic; font-weight: 800; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(2.1rem, 1.25rem + 3.6vw, 4.3rem); line-height: 1.02; letter-spacing: -.005em; color: var(--cream); text-wrap: balance;
  text-shadow: .03em .03em 0 var(--mustard), .06em .06em 0 var(--orange), .09em .09em 0 var(--red), 0 .3em .8em rgba(5, 9, 34, .55); }
.tz-concept__h em { font-style: inherit; color: #ffe2a6; white-space: nowrap; }
.tz-concept__body { margin-top: clamp(26px, 3.4vw, 44px); display: grid; gap: 1.05em; max-width: 60ch; text-align: left;
  font: 400 clamp(1.04rem, .97rem + .3vw, 1.2rem)/1.72 var(--text); color: rgba(250, 243, 230, .94); text-shadow: 0 1px 12px rgba(5, 9, 34, .7); }
.tz-concept__body p { margin: 0; text-wrap: pretty; }
.tz-concept__body p:first-child::first-letter { float: left; margin: .1em .12em 0 0; font-family: var(--display); font-style: italic; font-weight: 800;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-size: 3.3em; line-height: .78; color: var(--mustard); text-shadow: .04em .04em 0 var(--red); }
.tz .tz-name { color: #f4c76a; font-weight: 500; white-space: normal; }
@media (min-width: 980px) {
  /* side by side on wide screens, divided by a thin gold rule */
  .tz-concept__body { max-width: none; grid-template-columns: 1fr 1fr; gap: 0 clamp(36px, 4vw, 60px); position: relative; }
  .tz-concept__body::before { content: ""; position: absolute; left: 50%; top: .4em; bottom: .4em; width: 1px; background: linear-gradient(180deg, transparent, rgba(233, 167, 59, .55), transparent); }
}
.tz-night .sky__disc { right: 6%; }
@media (min-width: 701px) and (max-width: 1099px) {
  .dawn.sky--night.tz-night { padding-top: 196px; }
}
@media (max-width: 700px) {
  .tz-night .sky__disc { right: 4vw; }
}
/* the ending: dawn over the mill town, the three-part line, then the quiet sign-off */
.tz-dawn { min-height: 0; margin-top: calc(-1 * clamp(56px, 8.5vw, 140px)); padding-top: clamp(104px, 8.5vw, 134px);
  padding-bottom: calc(max(34.9vw, 286px) + clamp(10px, 1.6vw, 26px));
  background: linear-gradient(180deg, rgba(21, 34, 100, 0) 0%, #152264 9%, #263078 20%, #3f3f8c 34%, #604c98 48%, #8f5c97 60%, #c87487 72%, #eea783 84%, #f8d58a 94%, #fbe6b4 100%); }
.tz-finale { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(16px, 2vw, 24px); padding-inline: 16px; }
.tz-shape { padding-inline: 0; font-size: clamp(2.1rem, 1.25rem + 3.6vw, 4.3rem); max-width: 16ch; }
.tz-trio { margin: 0; font-family: var(--display); font-style: italic; font-weight: 600; font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.75rem); line-height: 1.35; color: #fff1d8; text-shadow: 0 1px 14px rgba(20, 14, 50, .6); }
.tz-trio span { display: inline-block; }
.tz-lineup { margin: clamp(4px, 1vw, 12px) 0 0; display: flex; align-items: center; gap: 16px; width: min(100%, 620px); }
.tz-lineup__rule { flex: 1 1 24px; min-width: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 226, 166, .85)); }
.tz-lineup__rule:last-child { background: linear-gradient(90deg, rgba(255, 226, 166, .85), transparent); }
.tz-lineup__t { flex: 0 1 auto; font: 600 .8rem/1.5 var(--text); letter-spacing: .3em; text-transform: uppercase; color: #fff4df; padding-left: .3em; text-wrap: balance;
  text-shadow: 0 1px 10px rgba(40, 20, 60, .75); }
@media (max-width: 700px) {
  .tz-concept__body { text-align: left; }
  .tz-concept::before { inset: -6% -10%; }
  .tz-trio span { display: block; }
  .tz-lineup { gap: 10px; }
  .tz-lineup__t { font-size: .75rem; letter-spacing: .2em; max-width: 24em; }
  .tz-dawn { padding-top: 116px; }
}
@media print {
  .tz-js .tz-reveal { opacity: 1; translate: none; }
}
/* the night pig keeps to the upper left, so the theatre's searchlight never crosses the words */
@media (min-width: 701px) {
  .tz-night .sky__pig--far { --px: 83%; --py: clamp(30px, 3vw, 56px); --pw: clamp(120px, 11vw, 190px); }
}
@media (max-width: 700px) {
  .tz-mark { display: none; }
}
/* soft pools of shade behind the words, so they read clearly over bright cloud and sunrise */
.tz-tag { position: relative; isolation: isolate; }
.tz-tag::before { content: ""; position: absolute; inset: -75% -16%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(14, 22, 78, .62), rgba(14, 22, 78, .34) 58%, rgba(14, 22, 78, 0)); }
.tz-finale { isolation: isolate; }
.tz-finale::before { content: ""; position: absolute; inset: -10% -8% -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(34, 22, 78, .5), rgba(34, 22, 78, .26) 60%, rgba(34, 22, 78, 0)); }
/* the paper grain is all but invisible on the night sky, and costs a full-size graphics layer */
.tz-night .sky__paper { display: none; }

/* ---------- mailing list ---------- */
.tz-join { width: min(100%, 600px); margin-top: clamp(14px, 2.4vw, 30px); padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 32px) clamp(18px, 2.6vw, 26px);
  border-radius: 20px; background: rgba(24, 16, 62, .5); border: 1px solid rgba(255, 226, 166, .22);
  box-shadow: 0 18px 50px rgba(18, 10, 40, .32), inset 0 1px 0 rgba(255, 240, 210, .08); color: #fff4df; text-align: left; }
.tz-join__h { margin: 0; text-align: center; font-family: var(--display); font-style: italic; font-weight: 800; font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
  font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem); line-height: 1.1; color: var(--cream); text-shadow: .03em .03em 0 var(--orange), .06em .06em 0 var(--red); }
.tz-join__lede { margin: 6px auto 18px; max-width: 40ch; text-align: center; font: 400 1rem/1.5 var(--text); color: rgba(255, 244, 223, .9); }
.tz-join__form { display: grid; gap: 14px; }
.tz-join__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; }
.tz-join__field { display: grid; gap: 6px; }
.tz-join__label { font: 600 .74rem/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: #ffe2a6; }
.tz-join__label small { font-size: inherit; font-weight: 400; letter-spacing: .06em; text-transform: none; color: rgba(255, 244, 223, .75); }
.tz-join input[type="text"], .tz-join input[type="email"] { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid rgba(255, 226, 166, .45);
  background: rgba(255, 249, 238, .96); color: var(--brown); font: 500 1rem/1.3 var(--text); box-shadow: inset 0 2px 4px rgba(86, 41, 26, .12); }
.tz-join input::placeholder { color: rgba(86, 41, 26, .5); }
.tz-join input:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; border-color: var(--mustard); }
.tz-join input[aria-invalid="true"] { border-color: #ff8f7a; box-shadow: 0 0 0 2px rgba(255, 143, 122, .45); }
.tz-join__consent { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font: 400 .92rem/1.5 var(--text); color: rgba(255, 244, 223, .95); cursor: pointer; }
.tz-join__consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--mustard); cursor: pointer; }
.tz-join__consent input:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
.tz-join__consent input[aria-invalid="true"] { outline: 2px solid #ff8f7a; outline-offset: 2px; }
.tz-join__fine { margin: -4px 0 0 34px; font: 400 .84rem/1.5 var(--text); color: rgba(255, 244, 223, .8); }
.tz-join a { color: #ffe2a6; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.tz-join a:hover { color: #fff; }
.tz-join a:focus-visible { outline: 2px solid var(--mustard); outline-offset: 2px; border-radius: 2px; }
.tz-join__btn { justify-self: center; min-height: 50px; padding: .8em 2.2em; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 .86rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--brown); background: var(--mustard);
  box-shadow: 0 4px 0 var(--orange), 0 12px 26px rgba(18, 10, 40, .35); transition: translate .15s, box-shadow .15s, filter .15s; }
.tz-join__btn:hover { filter: brightness(1.06); }
.tz-join__btn:active { translate: 0 3px; box-shadow: 0 1px 0 var(--orange), 0 6px 16px rgba(18, 10, 40, .35); }
.tz-join__btn:focus-visible { outline: 3px solid #fff4df; outline-offset: 3px; }
.tz-join__btn:disabled { cursor: progress; filter: saturate(.7) brightness(.95); }
.tz-join__msg { margin: 0; min-height: 1.5em; text-align: center; font: 500 .92rem/1.5 var(--text); }
.tz-join__msg.is-error { color: #ffc2b4; }
.tz-join__msg.is-note { color: #ffe2a6; }
/* honeypot: off screen for people, still in the page for bots */
.tz-join__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* confirmation, shown only once Netlify has accepted the signup */
.tz-join__done { display: none; text-align: center; font: 400 1rem/1.6 var(--text); color: rgba(255, 244, 223, .95); outline: none; }
.tz-join__done p { margin: 0 auto; max-width: 44ch; }
.tz-join__done-h { margin-bottom: 8px !important; font-family: var(--display); font-style: italic; font-weight: 800; font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.15; color: var(--cream); text-shadow: .03em .03em 0 var(--mustard), .06em .06em 0 var(--orange), .09em .09em 0 var(--red); }
.tz-join.is-done .tz-join__form, .tz-join.is-done .tz-join__lede, .tz-join.is-done .tz-join__h,
.tz-join:has(#joined:target) .tz-join__form, .tz-join:has(#joined:target) .tz-join__lede, .tz-join:has(#joined:target) .tz-join__h { display: none; }
.tz-join.is-done .tz-join__done, #joined:target { display: block; }
.tz-join.is-done .tz-join__done { animation: tz-up .9s cubic-bezier(.2, .8, .2, 1) both; }
@media (max-width: 560px) {
  .tz-join__row { grid-template-columns: 1fr; }
  .tz-join__fine { margin-left: 0; }
  .tz-join__btn { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .tz-join.is-done .tz-join__done { animation: none; } }
.tz-foot__c a { color: inherit; text-underline-offset: 2px; }
.tz-foot__c a:hover { color: var(--cream); }

/* ---------- privacy policy page ---------- */
.tz-doc { background: linear-gradient(180deg, #111a55 0, #1c2265 240px, var(--cream) 240px); min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.tz-doc__head { display: grid; place-items: center; padding: 40px 16px 30px; }
.tz-doc__home img { display: block; width: 200px; height: auto; }
.tz-doc__home:focus-visible { outline: 3px solid var(--mustard); outline-offset: 6px; border-radius: 6px; }
.tz-doc__main { padding: 0 16px 56px; }
.tz-doc__body { max-width: 66ch; margin: 0 auto; padding: clamp(24px, 5vw, 48px); background: #fffaf0; border-radius: 18px; box-shadow: 0 18px 50px rgba(17, 26, 85, .18);
  font: 400 1.04rem/1.7 var(--text); color: var(--ink); }
.tz-doc__body h1 { margin: 0; font-family: var(--display); font-style: italic; font-weight: 800; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); line-height: 1.05; color: var(--brown); }
.tz-doc__body h2 { margin: 1.8em 0 .4em; font-family: var(--display); font-style: italic; font-weight: 700; font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
  font-size: 1.35rem; line-height: 1.2; color: var(--brown); }
.tz-doc__body p, .tz-doc__body ul { margin: 0 0 .9em; }
.tz-doc__body ul { padding-left: 1.2em; }
.tz-doc__body a { color: #a3351f; text-underline-offset: 2px; overflow-wrap: anywhere; }
.tz-doc__body a:focus-visible { outline: 2px solid var(--mustard); outline-offset: 2px; }
.tz-doc__meta { color: var(--ink-soft); font-size: .9rem; }
.tz-doc__back { margin-top: 2em !important; }

/* ---------- neatening pass ---------- */
/* wide screens: the logo and line sit to the left, leaving the sun, pig and theatre their own space */
@media (min-width: 1000px) and (min-aspect-ratio: 5/4) {
  .tz-hero__in { justify-items: start; text-align: left; padding-left: clamp(56px, 8vw, 160px); }
  .tz-logo { align-items: flex-start; }
  .tz .logo-word--stack { width: clamp(340px, 36vw, 620px); }
  .tz-tag { margin-left: clamp(4px, .6vw, 10px); white-space: nowrap; }
  .tz-tag span { display: inline-block; }
}
/* phones: the line breaks into its two halves rather than squeezing onto one */
@media (max-width: 700px) {
  .tz-tag span { display: block; }
}
/* night into dawn: the dawn sky now paints over the night's lower edge and fades in over a longer
   distance, so the cloud bank sinks into the dark instead of stopping on a line */
.tz-dawn { z-index: 6; margin-top: calc(-1 * clamp(150px, 13vw, 220px));
  background: linear-gradient(180deg, rgba(21, 34, 100, 0) 0%, rgba(21, 34, 100, .6) 4.5%, #152264 9%, #1d2a70 15%, #263078 24%, #3f3f8c 36%, #604c98 49%, #8f5c97 61%, #c87487 72%, #eea783 84%, #f8d58a 94%, #fbe6b4 100%);
  padding-top: clamp(170px, 15vw, 230px); }
@media (max-width: 700px) {
  .tz-dawn { padding-top: 190px; }
}
/* the paper grain fades out at the foot of the opening sky, so the cream below matches exactly */
.sky--hero .sky__paper { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 170px), transparent calc(100% - 20px)); mask-image: linear-gradient(180deg, #000 calc(100% - 170px), transparent calc(100% - 20px)); }
/* the privacy page keeps its night-sky band behind the logo (the page-wide cream rule was winning) */
body.tz-doc { background: linear-gradient(180deg, #111a55 0, #1c2265 240px, var(--cream) 240px); }

/* =====================================================================
   phone pass: centring, the pig, and clean hand-overs between scenes
   ===================================================================== */
/* the logo is truly centred (an old rule nudged the last word of the heading to the right) */
.tz .hero__word--art .logo-word { margin-left: 0; }
/* no blurred shadow on the pigs: on some phones a blur on a large picture makes the browser
   slice part of it off. The artwork has its own shading. */
.tz .sky__pig img { filter: none; }
html[data-tod="evening"] .tz .sky__pig img { filter: none; }
html[data-tod="night"] .tz .sky__pig img,
.tz .dawn.sky--night .sky__pig img { filter: brightness(.8) saturate(.85); }

/* day into night: one long, smooth sunset straight from the cream foot of the opening sky,
   with no painted cloud bank over the join */
.tz-dusk { margin-top: 0; height: clamp(300px, 34vw, 460px);
  background: linear-gradient(180deg, var(--cream) 0%, #f8e7c6 9%, #f5d2a4 18%, #f0b78a 28%, #e29a80 38%, #c47c86 48%,
    #9b6690 58%, #72579a 67%, #4f4795 76%, #373a87 84%, #262e78 92%, #1c2265 100%); }
.tz-dusk::before { display: none; }
@media (max-width: 700px) { .tz-dusk { height: 280px; } }

/* night into dawn: the dawn sky rises over the foot of the night clouds in a long fade,
   so there is no band beneath them */
.tz-dawn { margin-top: calc(-1 * clamp(250px, 22vw, 340px)); padding-top: clamp(250px, 22vw, 330px);
  background: linear-gradient(180deg, rgba(21, 34, 100, 0) 0%, rgba(21, 34, 100, .45) 7%, rgba(21, 34, 100, .85) 13%, #152264 18%,
    #1d2a70 24%, #2a3279 30%, #3f3f8c 40%, #604c98 51%, #8f5c97 62%, #c87487 73%, #eea783 85%, #f8d58a 94%, #fbe6b4 100%); }
@media (max-width: 700px) { .tz-dawn { padding-top: 270px; } }

/* phones on their side: a short, wide screen. Logo and line to the left, the pig to the right,
   both sized to the height so nothing collides */
@media (orientation: landscape) and (max-height: 520px) {
  .tz-hero { min-height: max(100svh, 380px); padding-bottom: 150px; }
  .tz-hero__in { justify-items: start; text-align: left; padding-top: 28px; padding-left: max(24px, env(safe-area-inset-left, 0px)); }
  .tz-logo { align-items: flex-start; }
  .tz .logo-word--stack { width: min(46vw, 92svh); }
  .tz-tag { margin-top: 12px; font-size: clamp(1.05rem, 3.6svh + .4rem, 1.5rem); }
  .tz-tag span { display: inline-block; }
  .tz-pig { --pw: min(34vw, 62svh); --px: 5vw; --py: 22px; }
  .tz-cue { display: none; }
}
/* the opening sky melts fully into cream before it ends, so no cloud stops on a hard line */
.tz-hero::after { height: clamp(160px, 18vw, 240px); z-index: 6;
  background: linear-gradient(180deg, rgba(247, 238, 221, 0), rgba(247, 238, 221, .55) 35%, rgba(247, 238, 221, .92) 65%, var(--cream) 82%); }
/* phones: the night pig floats beside the moon, clear of the heading */
@media (max-width: 700px) {
  .tz-night .sky__pig--far { --pw: 30vw; --px: 56vw; --py: 44px; }
}
/* the mill town's lit street settles into the dark footer instead of stopping on a bright line */
.tz-town::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 9%; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 11, 6, 0), rgba(26, 11, 6, .7) 55%, #1a0b06); }
@media (orientation: landscape) and (max-height: 520px) {
  /* the heading starts below the moon and the pig */
  .dawn.sky--night.tz-night { padding-top: 210px; }
  .tz-night .sky__pig--far { --pw: 20vw; --px: 30vw; --py: 40px; }
}

/* ---------- device preview (developer tool, #devices; hidden on the live domain) ---------- */
.tz-foot__dev { color: var(--mustard) !important; }
.devprev-open,
.devprev-open body { overflow: hidden; }
.devprev {
  position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto 1fr;
  background: #0a0e26; color: var(--cream);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.devprev__bar { display: grid; gap: 10px; padding: 12px max(14px, env(safe-area-inset-left, 0px)) 12px; background: #121858; border-bottom: 1px solid rgba(247,238,221,.12); }
.devprev__title { margin: 0; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-family: var(--display); font-weight: 800; font-size: 1.05rem; }
.devprev__title span { font-family: var(--text); font-weight: 500; font-size: .82rem; color: var(--mustard); font-variant-numeric: tabular-nums; }
.devprev__devices { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.devprev__devices::-webkit-scrollbar { display: none; }
.devprev button {
  flex: none; font: 600 .8rem var(--text); letter-spacing: .02em; color: var(--cream); cursor: pointer; white-space: nowrap;
  background: rgba(247,238,221,.07); border: 1px solid rgba(247,238,221,.2); border-radius: 999px; padding: .5em .9em; min-height: 36px;
}
.devprev button[aria-pressed="true"] { background: var(--mustard); color: var(--brown); border-color: var(--mustard); }
.devprev__tools { display: flex; gap: 6px; }
.devprev__close { margin-left: auto; background: var(--red) !important; border-color: var(--red) !important; }
.devprev__stage { position: relative; display: grid; place-items: center; overflow: hidden; padding: 12px; min-height: 0; }
.devprev__box { position: relative; border-radius: 14px; box-shadow: 0 0 0 2px rgba(247,238,221,.25), 0 20px 50px rgba(0,0,0,.6); overflow: hidden; background: var(--cream); }
.devprev__box iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: var(--cream); }
.devprev__msg:empty { display: none; }
.devprev__msg { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(195,46,39,.92); font-size: .9rem; }

/* ---------- the hand-over from day to night, with a way down to the mailing list ----------
   a short, smooth sunset that rises into the cream foot of the opening sky; the button sits in the
   warm part of it and scrolls down to the sign-up form */
.tz-dusk { z-index: 7; margin-top: calc(-1 * clamp(80px, 8vw, 130px)); height: clamp(230px, 22vw, 320px);
  display: grid; justify-items: center; align-content: start; padding-top: clamp(58px, 5.5vw, 86px);
  background: linear-gradient(180deg, rgba(247, 238, 221, 0) 0%, var(--cream) 14%, #f8e4c0 24%, #f3c99a 34%, #eba680 44%, #d2868a 54%,
    #a46b91 63%, #75589a 71%, #4f4795 79%, #363a87 86%, #262e78 93%, #1c2265 100%); }
@media (max-width: 700px) { .tz-dusk { height: 240px; margin-top: -70px; padding-top: 50px; } }
.tz-cue { display: none; }   /* the button below takes over as the way on */
.tz-cta { display: inline-flex; align-items: center; gap: .7em; min-height: 48px; padding: .8em 1.6em .8em 1.9em; border-radius: 999px; text-decoration: none;
  font: 700 .82rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--brown); background: var(--mustard);
  box-shadow: 0 4px 0 var(--orange), 0 12px 26px rgba(120, 60, 40, .28); transition: translate .15s, box-shadow .15s, filter .15s; }
.tz-cta i { width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; rotate: 45deg; translate: 0 -2px; animation: tz-cue 2.4s ease-in-out infinite; }
.tz-cta:hover { filter: brightness(1.06); }
.tz-cta:active { translate: 0 3px; box-shadow: 0 1px 0 var(--orange), 0 6px 14px rgba(120, 60, 40, .28); }
.tz-cta:focus-visible { outline: 3px solid var(--brown); outline-offset: 4px; }
#join { scroll-margin-top: clamp(20px, 6vh, 60px); }
@media (prefers-reduced-motion: reduce) { .tz-cta i { animation: none; } }

/* ---------- social links (footer) ----------
   each button shows only once its address is filled in; the row hides while none are */
.tz-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tz-social a { display: inline-flex; align-items: center; min-height: 44px; padding: .55em 1.3em; border-radius: 999px; text-decoration: none;
  font: 600 .78rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--cream);
  border: 1.5px solid rgba(247, 238, 221, .35); transition: background-color .2s, border-color .2s, color .2s; }
.tz-social a:hover { background: var(--mustard); border-color: var(--mustard); color: var(--brown); }
.tz-social a:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }
.tz-social a[href=""], .tz-social a:not([href]) { display: none; }
.tz-social:not(:has(a[href]:not([href=""]))) { display: none; }