/* Home page. The introduction sits on a billboard in a town. Controls live in a small box at the
   top right of the scene. The remaining two paragraphs sit below, narrow, each with a title. */
:root { --brick-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='84'%3E%3Crect width='168' height='84' fill='%23857465'/%3E%3Crect x='1' y='1' width='26' height='12' fill='%238a4033'/%3E%3Crect x='29' y='1' width='26' height='12' fill='%237f3c30'/%3E%3Crect x='57' y='1' width='26' height='12' fill='%2394473a'/%3E%3Crect x='85' y='1' width='26' height='12' fill='%238f4335'/%3E%3Crect x='113' y='1' width='26' height='12' fill='%23a25041'/%3E%3Crect x='141' y='1' width='26' height='12' fill='%2394473a'/%3E%3Crect x='15' y='15' width='26' height='12' fill='%238f4335'/%3E%3Crect x='43' y='15' width='26' height='12' fill='%239c4e3d'/%3E%3Crect x='71' y='15' width='26' height='12' fill='%237f3c30'/%3E%3Crect x='99' y='15' width='26' height='12' fill='%237f3c30'/%3E%3Crect x='127' y='15' width='26' height='12' fill='%238a4033'/%3E%3Crect x='155' y='15' width='26' height='12' fill='%239c4e3d'/%3E%3Crect x='-13' y='15' width='26' height='12' fill='%239c4e3d'/%3E%3Crect x='1' y='29' width='26' height='12' fill='%238a4033'/%3E%3Crect x='29' y='29' width='26' height='12' fill='%238f4335'/%3E%3Crect x='57' y='29' width='26' height='12' fill='%239c4e3d'/%3E%3Crect x='85' y='29' width='26' height='12' fill='%238a4033'/%3E%3Crect x='113' y='29' width='26' height='12' fill='%237f3c30'/%3E%3Crect x='141' y='29' width='26' height='12' fill='%23a25041'/%3E%3Crect x='15' y='43' width='26' height='12' fill='%237f3c30'/%3E%3Crect x='43' y='43' width='26' height='12' fill='%238f4335'/%3E%3Crect x='71' y='43' width='26' height='12' fill='%2394473a'/%3E%3Crect x='99' y='43' width='26' height='12' fill='%23a75a47'/%3E%3Crect x='127' y='43' width='26' height='12' fill='%239a4a3b'/%3E%3Crect x='155' y='43' width='26' height='12' fill='%238a4033'/%3E%3Crect x='-13' y='43' width='26' height='12' fill='%238a4033'/%3E%3Crect x='1' y='57' width='26' height='12' fill='%238a4033'/%3E%3Crect x='29' y='57' width='26' height='12' fill='%238f4335'/%3E%3Crect x='57' y='57' width='26' height='12' fill='%239c4e3d'/%3E%3Crect x='85' y='57' width='26' height='12' fill='%238f4335'/%3E%3Crect x='113' y='57' width='26' height='12' fill='%238a4033'/%3E%3Crect x='141' y='57' width='26' height='12' fill='%2394473a'/%3E%3Crect x='15' y='71' width='26' height='12' fill='%237f3c30'/%3E%3Crect x='43' y='71' width='26' height='12' fill='%23a25041'/%3E%3Crect x='71' y='71' width='26' height='12' fill='%238f4335'/%3E%3Crect x='99' y='71' width='26' height='12' fill='%239a4a3b'/%3E%3Crect x='127' y='71' width='26' height='12' fill='%238f4335'/%3E%3Crect x='155' y='71' width='26' height='12' fill='%238f4335'/%3E%3Crect x='-13' y='71' width='26' height='12' fill='%238f4335'/%3E%3C/svg%3E"); --gut: clamp(1.25rem, 4vw, 3.5rem); --teal: #1f8a8a; --wall: #efe7d8; --wall-trim: #e2d8c4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --teal: #5fc4c0; --wall: #2a2b30; --wall-trim: #232428; } }
:root[data-theme="dark"] { --teal: #5fc4c0; --wall: #2a2b30; --wall-trim: #232428; }
footer.site .wrap { max-width: none; padding-left: var(--gut); padding-right: var(--gut); }
main.home { padding: 0 0 2.5rem; }
.wide { padding: 0 var(--gut); }

/* the town */
.town { position: relative; padding: 0 0 58px; }
.town #sim, .town #fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.town #sim { z-index: 1; }
.town #fx { z-index: 3; pointer-events: none; }

/* the introduction is painted on the giant wall of a building that stands beside the road */
.wall-wrap { position: relative; z-index: 2; width: min(41rem, calc(100% - 3rem)); margin: 0 0 6rem 2.5rem; }
.building { position: relative; }
/* the right-hand side of the building, seen in perspective, in the same brick but in shade */
.side { position: absolute; left: 100%; top: 0; bottom: 0; width: 15rem; transform-origin: left center; transform: perspective(520px) rotateY(74deg); pointer-events: none; }
.side-face {
  position: absolute; inset: 0;
  background-color: #7a382d;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .40)),
    repeating-linear-gradient(0deg, transparent 0 7.2rem, rgba(20, 30, 40, .55) 7.2rem 10.6rem, transparent 10.6rem 14rem),
    var(--brick-url);
  background-size: auto, auto, 168px 84px;
  box-shadow: inset 0 1.6rem 0 #b3a58c, inset 0 -1.3rem 0 #a89b84;
}
.wall {
  color: #f6eedd;
  background-color: #94473a;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .30) 0, rgba(0, 0, 0, .06) 22%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .16) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .18) 0, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0) 92%, rgba(0, 0, 0, .12) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='84'%3E%3Crect width='168' height='84' fill='%23857465'/%3E%3Crect x='1' y='1' width='26' height='12' fill='%238a4033'/%3E%3Crect x='29' y='1' width='26' height='12' fill='%237f3c30'/%3E%3Crect x='57' y='1' width='26' height='12' fill='%2394473a'/%3E%3Crect x='85' y='1' width='26' height='12' fill='%238f4335'/%3E%3Crect x='113' y='1' width='26' height='12' fill='%23a25041'/%3E%3Crect x='141' y='1' width='26' height='12' fill='%2394473a'/%3E%3Crect x='15' y='15' width='26' height='12' fill='%238f4335'/%3E%3Crect x='43' y='15' width='26' height='12' fill='%239c4e3d'/%3E%3Crect x='71' y='15' width='26' height='12' fill='%237f3c30'/%3E%3Crect x='99' y='15' width='26' height='12' fill='%237f3c30'/%3E%3Crect x='127' y='15' width='26' height='12' fill='%238a4033'/%3E%3Crect x='155' y='15' width='26' height='12' fill='%239c4e3d'/%3E%3Crect x='-13' y='15' width='26' height='12' fill='%239c4e3d'/%3E%3Crect x='1' y='29' width='26' height='12' fill='%238a4033'/%3E%3Crect x='29' y='29' width='26' height='12' fill='%238f4335'/%3E%3Crect x='57' y='29' width='26' height='12' fill='%239c4e3d'/%3E%3Crect x='85' y='29' width='26' height='12' fill='%238a4033'/%3E%3Crect x='113' y='29' width='26' height='12' fill='%237f3c30'/%3E%3Crect x='141' y='29' width='26' height='12' fill='%23a25041'/%3E%3Crect x='15' y='43' width='26' height='12' fill='%237f3c30'/%3E%3Crect x='43' y='43' width='26' height='12' fill='%238f4335'/%3E%3Crect x='71' y='43' width='26' height='12' fill='%2394473a'/%3E%3Crect x='99' y='43' width='26' height='12' fill='%23a75a47'/%3E%3Crect x='127' y='43' width='26' height='12' fill='%239a4a3b'/%3E%3Crect x='155' y='43' width='26' height='12' fill='%238a4033'/%3E%3Crect x='-13' y='43' width='26' height='12' fill='%238a4033'/%3E%3Crect x='1' y='57' width='26' height='12' fill='%238a4033'/%3E%3Crect x='29' y='57' width='26' height='12' fill='%238f4335'/%3E%3Crect x='57' y='57' width='26' height='12' fill='%239c4e3d'/%3E%3Crect x='85' y='57' width='26' height='12' fill='%238f4335'/%3E%3Crect x='113' y='57' width='26' height='12' fill='%238a4033'/%3E%3Crect x='141' y='57' width='26' height='12' fill='%2394473a'/%3E%3Crect x='15' y='71' width='26' height='12' fill='%237f3c30'/%3E%3Crect x='43' y='71' width='26' height='12' fill='%23a25041'/%3E%3Crect x='71' y='71' width='26' height='12' fill='%238f4335'/%3E%3Crect x='99' y='71' width='26' height='12' fill='%239a4a3b'/%3E%3Crect x='127' y='71' width='26' height='12' fill='%238f4335'/%3E%3Crect x='155' y='71' width='26' height='12' fill='%238f4335'/%3E%3Crect x='-13' y='71' width='26' height='12' fill='%238f4335'/%3E%3C/svg%3E");
  background-size: auto, auto, 168px 84px;
  box-shadow: 0 0 2rem rgba(0, 0, 0, .18);
}
.cornice { height: 1.6rem; background: linear-gradient(180deg, #d8cdb9, #bfb29b); border-bottom: 3px solid #8a7d68; box-shadow: 0 .4rem .6rem rgba(0, 0, 0, .28); position: relative; z-index: 1; }
.plinth { height: 1.4rem; background: linear-gradient(180deg, #bfb29b, #a89b84); border-top: 3px solid #d8cdb9; }
.mural { padding: 1.7rem 1.8rem 2.8rem; display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: 1.4rem; align-items: stretch; }
.photo-box { position: relative; min-height: 17rem; overflow: hidden; border-radius: 1px; box-shadow: 0 .3rem .9rem rgba(0, 0, 0, .45); }
.photo-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* the name and paragraph are on a paper poster taped to the bricks */
.wall-copy {
  position: relative; align-self: center; transform: rotate(-.5deg);
  padding: 1.2rem 1.4rem 1.3rem; color: #1d1d1f; text-shadow: none;
  background: linear-gradient(180deg, #fbf7ec 0%, #f4edda 100%);
  box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .10), inset 0 0 2.5rem rgba(140, 110, 60, .10);
}
.wall-copy::before, .wall-copy::after {
  content: ""; position: absolute; top: -.75rem; width: 5.2rem; height: 1.5rem;
  background: rgba(226, 208, 156, .82); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.wall-copy::before { left: 1.2rem; transform: rotate(-5deg); }
.wall-copy::after { right: 1.2rem; transform: rotate(4deg); }
.wall-copy h1 { font-family: 'Marcellus SC', Georgia, serif; font-weight: 700; letter-spacing: .04em; font-size: clamp(1.6rem, 2.3vw, 2.1rem); margin: 0 0 .55rem; line-height: 1.05; color: #1d1d1f; }
.lede { font-size: .82rem; line-height: 1.36; margin: 0 0 .8rem; text-align: justify; hyphens: auto; }
.wall-copy .lede { color: #26262a; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.btn-row a { font-family: system-ui, sans-serif; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: #1d1d1f; border: 1px solid #1f8a8a; border-radius: 2px; padding: .38rem .7rem; }
.btn-row a:hover { background: #1f8a8a; color: #fbf7ec; }
.btn-row a:focus-visible { outline: 2px solid #1f8a8a; outline-offset: 3px; }/* controls box, top right of the scene */
.adv { position: absolute; z-index: 4; top: 1.2rem; right: var(--gut); width: 15.5rem; padding: .8rem .9rem .85rem; background: var(--bg); border: 1px solid var(--rule); border-top: 3px solid var(--teal); border-radius: 2px; font-family: system-ui, sans-serif; font-size: .7rem; box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .08); }
.adv h2 { font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 .55rem; padding: 0; border: 0; color: var(--ink); font-family: system-ui, sans-serif; }
.acts { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .6rem; color: var(--muted); }
.acts i { display: inline-block; width: 9px; height: 9px; background: var(--c); margin-right: .35rem; vertical-align: -1px; border-radius: 2px; }
.acts b { color: var(--ink); font-weight: 600; margin-left: .2rem; }
.levers { display: grid; gap: .35rem; }
.lever span { display: flex; justify-content: space-between; color: var(--muted); }
.lever output { color: var(--ink); font-weight: 600; }
.lever input { width: 100%; height: .9rem; margin: 0; accent-color: var(--teal); cursor: pointer; }
.btns { display: block; margin-top: .5rem; }
.btns button { font: inherit; color: var(--muted); background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: .05rem .15rem; margin-right: .8rem; cursor: pointer; }
.btns button:hover { color: var(--ink); border-color: var(--teal); }
.btns button:focus-visible, .lever input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.hero-note { font-size: .64rem; line-height: 1.35; color: var(--muted); margin: .6rem 0 0; }

/* the two paragraphs below: narrower, each with a title */
.under { padding-top: 2rem; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 24rem)); column-gap: 3rem; max-width: 52rem; }
.cols h2 { font-family: 'Marcellus SC', Georgia, serif; font-weight: 700; font-size: 1.3rem; letter-spacing: .03em; margin: 0 0 .7rem; padding: 0; border: 0; }
.cols p { margin: 0; font-size: .95rem; line-height: 1.42; text-align: justify; hyphens: auto; }

@media (max-width: 62rem) {
  /* narrow screens: a small box in the page flow, above the scene, so it never covers the people */
  .adv { position: relative; top: auto; right: auto; width: auto; margin: .8rem var(--gut) 0; padding: .5rem .7rem .6rem; z-index: 4; font-size: .64rem; box-shadow: none; }
  .adv h2 { font-size: .7rem; margin-bottom: .35rem; }
  .acts { grid-template-columns: repeat(3, 1fr); gap: .15rem .4rem; margin-bottom: .4rem; }
  .levers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .lever span { flex-direction: column; gap: 0; }
  .btns { margin-top: .35rem; }
  .adv .hero-note { display: none; }
  .town { padding-bottom: 27rem; }
  .wall-wrap { margin: 0 auto 4rem; width: calc(100% - 1rem); }
  .side { display: none; }
}
@media (max-width: 52rem) {
  .mural { grid-template-columns: 1fr; row-gap: 1.2rem; padding: 1.4rem var(--gut); }
  .photo-box { width: 11rem; min-height: 15rem; }
  .cols { grid-template-columns: 1fr; row-gap: 1.8rem; }
}
/* mode switch */
.modes { display: flex; gap: 0; margin: 0 0 .55rem; border: 1px solid var(--teal); border-radius: 2px; overflow: hidden; }
.modes button { flex: 1; font: inherit; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .4rem; background: transparent; color: var(--muted); border: 0; cursor: pointer; }
.modes button + button { border-left: 1px solid var(--teal); }
.modes button[aria-pressed="true"] { background: var(--teal); color: #fff; }
.modes button:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.town.club .town-only, .town:not(.club) .club-only { display: none; }

/* the Club: the building becomes the back wall, and the photo and poster hang on it */
.town.club .wall { background: none; box-shadow: none; border-right: 0; }
.town.club .cornice, .town.club .plinth, .town.club .side { display: none; }
.town.club .wall-wrap { margin-bottom: 8rem; }
.town.club .photo-box { overflow: visible; box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .7); }
.town.club .photo-box img { border-radius: 1px; }
.town.club .photo-box::before { content: ""; position: absolute; z-index: 2; top: -.6rem; left: 50%; width: 4.2rem; height: 1.2rem; transform: translateX(-50%) rotate(-3deg); background: rgba(226, 208, 156, .85); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.town.club .wall-copy { box-shadow: 0 .5rem 1.3rem rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .10), inset 0 0 2.5rem rgba(140, 110, 60, .10); }
/* Club posters: cyan neon flyers on a dark glass wall */
.town.club .wall-copy { background: linear-gradient(180deg, #07141f, #0d2334); color: #e8fbff; border: 2px solid #7fe8ff; text-shadow: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 20px rgba(120, 232, 255, .55), 0 .6rem 1.4rem rgba(0, 0, 0, .75); transform: rotate(-.4deg); }
.town.club .wall-copy h1 { color: #f2fdff; text-shadow: 0 0 10px rgba(120, 232, 255, .95), 0 0 2px #fff; }
.town.club .wall-copy h1::after { content: "LIVE TONIGHT"; display: block; font: 700 .58rem system-ui, sans-serif; letter-spacing: .32em; color: #ffc44f; text-shadow: 0 0 8px rgba(255, 196, 79, .8); margin-top: .35rem; }
.town.club .wall-copy .lede { color: #d6eef6; }
.town.club .btn-row a { color: #e8fbff; border-color: #7fe8ff; box-shadow: 0 0 8px rgba(120, 232, 255, .4); }
.town.club .btn-row a:hover { background: #7fe8ff; color: #06121d; }
.town.club .photo-box { border: 2px solid #7fe8ff; box-shadow: 0 0 18px rgba(120, 232, 255, .6), 0 .5rem 1.2rem rgba(0, 0, 0, .8); }
.town.club .photo-box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(120, 232, 255, .30), rgba(30, 90, 170, .30)); mix-blend-mode: soft-light; pointer-events: none; }
.town.club .photo-box img { filter: contrast(1.08) saturate(1.05); }
/* first visit: keep the scene hidden until the font, photo, and first layout are ready (script in the page head sets .booting) */
.town { transition: opacity .4s ease; }
.booting .town { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .town { transition: none; } }