/* Home */

/* Hero: the house at night — the lights come on */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--ink); }
.hero__photo { position: absolute; inset: 0; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform: scale(1.06); filter: brightness(.2) grayscale(.85) contrast(1.1); transition: filter 1.8s var(--ease), transform 3s var(--ease); }
.hero__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 55% at 62% 60%, rgb(255 186 100 / .28), transparent 70%); mix-blend-mode: screen; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero.is-on .hero__photo img { filter: none; transform: none; }
.hero.is-on .hero__glow { opacity: 1; animation: flicker .5s steps(2) 1; }
.hero::after { /* legibility under the title */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgb(7 13 28 / .7), rgb(7 13 28 / .15) 55%, transparent), linear-gradient(to top, rgb(7 13 28 / .8), transparent 40%);
}
.hero__copy { position: absolute; z-index: 2; left: var(--gut); bottom: clamp(2rem, 7vh, 5rem); max-width: min(92vw, 60rem); }
.hero__title { font-size: var(--t-hero); font-weight: 800; letter-spacing: -.055em; line-height: .86; color: #2a3557; transition: color 1.4s var(--ease), text-shadow 1.4s; }
.hero.is-on .hero__title { color: var(--steam); }
.hero__word::after { content: ''; display: inline-block; width: .16em; height: .16em; margin-left: .05em; border-radius: 50%; background: #2a3557; transition: background 1s, box-shadow 1s; }
.hero.is-on .hero__word::after { background: var(--sun); box-shadow: 0 0 .35em var(--sun); }
.hero__line { margin: 1.6rem 0 0; max-width: 32ch; font-size: var(--t-m); line-height: 1.45; color: var(--steam); }
.hero__switch { left: auto; right: var(--gut); bottom: clamp(2rem, 7vh, 5rem); }
.js .hero__line { opacity: 0; transform: translateY(1rem); animation: rise 1.4s var(--ease) .9s forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes flicker { 0% { opacity: .15; } 50% { opacity: .9; } }
@media (max-width: 700px) { .hero__photo img { object-position: 70% 50%; } .hero__switch { bottom: auto; top: 6rem; } .hero__switch .switch__label { display: none; } }

/* Switchboard: pick a room, its light comes on */
.board { padding: var(--sec) 0; background: var(--ink); }
.board__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.board h2 { font-size: var(--t-xl); margin-bottom: 1.2rem; }
.board .lead { margin-bottom: 2rem; }
.board__switches { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--line); }
.board__switches button {
  width: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; text-align: left;
  padding: .85rem .2rem; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; transition: padding .5s var(--ease);
}
.board__switches i {
  grid-row: span 2; width: 1.15rem; height: 1.8rem; border-radius: .3rem; background: linear-gradient(#e8e9ee 0 50%, #c9ccd6 50%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); position: relative; transition: background .3s;
}
.board__switches i::after { content: ''; position: absolute; left: 50%; bottom: .25rem; width: .26rem; height: .26rem; translate: -50% 0; border-radius: 50%; background: #8a90a2; transition: background .3s, box-shadow .3s; }
.board__switches span { font: 600 1rem/1.25 var(--f-display); color: var(--mist); transition: color .3s; }
.board__switches small { font-size: .82rem; color: #6b7491; }
.board__switches button:hover { padding-left: .6rem; }
.board__switches button:hover span { color: var(--steam); }
.board__switches [aria-pressed='true'] span { color: var(--sun); }
.board__switches [aria-pressed='true'] i { background: linear-gradient(#c9ccd6 0 50%, #fff 50%); }
.board__switches [aria-pressed='true'] i::after { background: var(--sun); box-shadow: 0 0 8px var(--sun); }
.board__frame img { position: absolute; inset: 0; opacity: 0; filter: brightness(.18) grayscale(.85) contrast(1.1); transition: opacity .5s, filter 1.3s var(--ease) .25s; }
.board__frame img.is-current { opacity: 1; }
.board__frame img.is-lit { filter: none; }
.board__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 25%, rgb(255 186 100 / .3), transparent 70%); mix-blend-mode: screen; opacity: 0; transition: opacity 1s; }
.board.is-lit .board__glow { opacity: 1; }
.board__caption { margin: 1rem 0 0; font: 500 .74rem/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--mist); }
@media (max-width: 900px) {
  .board__grid { grid-template-columns: 1fr; align-items: start; }
  .board__stage { order: -1; position: sticky; top: 0; z-index: 2; background: var(--ink); padding: 4.6rem 0 .6rem; margin-top: -4.6rem; }
  .board__caption { display: none; }
}

/* Jacuzzi — one compact band */
.tubs { padding: 0 0 var(--sec); background: var(--ink); }
.tubs__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.tubs__pano img { transform: scale(1.1); transition: transform 2.4s var(--ease); }
.tubs__pano.is-in img { transform: none; }
.tubs h2 { font-size: var(--t-l); margin-bottom: 1rem; }
.tubs__copy p:not(.eyebrow) { color: var(--mist); max-width: 40ch; }
@media (max-width: 900px) { .tubs__grid { grid-template-columns: 1fr; } }

/* Ledger */
.ledger { padding: var(--sec) 0; background: var(--steam); color: var(--ink); }
.ledger .eyebrow { color: var(--deep); }
.ledger__head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 2rem; align-items: end; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.ledger__head h2 { font-size: var(--t-l); max-width: 18ch; }
.ledger__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-ink); }
.ledger__list li {
  display: grid; grid-template-columns: minmax(5ch, 1.1fr) .8fr 2fr; align-items: baseline; gap: 1.5rem;
  padding: clamp(1rem, 2.4vw, 1.8rem) 0; border-bottom: 1px solid var(--line-ink);
  transition: background .4s, padding .5s var(--ease);
}
.ledger__list li:hover { background: #fff; padding-inline: 1rem; }
.ledger__n { font: 800 clamp(2.8rem, 1rem + 6vw, 6.4rem)/.9 var(--f-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.ledger__list li:hover .ledger__n { color: var(--led); }
.ledger__u { font: 600 .82rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .1em; }
.ledger__t { color: #3b4460; max-width: 40ch; }
@media (max-width: 760px) {
  .ledger__head { grid-template-columns: 1fr; }
  .ledger__list li { grid-template-columns: auto 1fr; gap: .3rem 1rem; }
  .ledger__t { grid-column: 1 / -1; }
}

/* NYE band */
.nye {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 2rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) var(--gut); background: var(--deep); text-decoration: none;
  border-block: 1px solid var(--line); position: relative; overflow: hidden; isolation: isolate;
}
.nye::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sun); transform: scaleY(0); transform-origin: bottom; transition: transform .7s var(--ease); }
.nye:hover::before, .nye:focus-visible::before { transform: none; }
.nye:hover, .nye:focus-visible { color: var(--ink); }
.nye__label { font: 600 var(--t-m)/1.2 var(--f-display); }
.nye__count { font: 300 var(--t-m)/1 var(--f-display); }
.nye__count b { font-weight: 800; font-size: 1.8em; color: var(--sun); transition: color .4s; }
.nye:hover .nye__count b { color: var(--ink); }
.nye__dates { font-size: .9rem; color: var(--mist); transition: color .4s; }
.nye:hover .nye__dates { color: var(--ink); }
.nye__arrow { font-size: 1.6rem; transition: transform .5s var(--ease); }
.nye:hover .nye__arrow { transform: translateX(6px); }
@media (max-width: 760px) { .nye { grid-template-columns: 1fr auto; gap: .6rem 1rem; } .nye__dates { grid-column: 1; } }

/* Road */
.road { padding: var(--sec) 0; background: var(--steam); color: var(--ink); }
.road .eyebrow { color: var(--deep); }
.road .lead { color: #3b4460; }
.road__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); }
.road__head { position: sticky; top: 7rem; align-self: start; }
.road__head h2 { font-size: var(--t-xl); margin-bottom: 1.4rem; }
.road__map { position: relative; min-height: 1000px; }
.road__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.road__base { fill: none; stroke: var(--line-ink); stroke-width: 26; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.road__line { fill: none; stroke: var(--led); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--road, 0)); vector-effect: non-scaling-stroke; }
.road__stops { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.stop {
  position: absolute; top: calc(var(--at) * 100%); left: 0; right: 0;
  display: grid; grid-template-columns: 6.5rem 1fr; column-gap: 1.2rem;
  padding: 1rem 1.2rem; background: rgb(236 238 244 / .9); backdrop-filter: blur(6px); border-radius: 14px;
  opacity: .35; transform: translateX(-.6rem); transition: opacity .6s, transform .8s var(--ease), background .4s;
}
.stop.is-reached { opacity: 1; transform: none; background: #fff; box-shadow: 0 20px 40px -24px rgb(19 35 77 / .4); }
.stop__km { grid-row: span 2; font: 800 1.4rem/1.1 var(--f-display); color: var(--led); }
.stop h3 { font-size: 1rem; letter-spacing: -.01em; margin-bottom: .3rem; }
.stop p { margin: 0; font-size: .92rem; color: #3b4460; }
@media (max-width: 900px) {
  .road__grid { grid-template-columns: 1fr; }
  .road__head { position: static; }
  .road__map { min-height: 0; }
  .road__svg { display: none; }
  .road__stops { position: static; display: grid; gap: .7rem; border-left: 3px solid var(--led); padding-left: 1rem; }
  .stop { position: static; grid-template-columns: 4.8rem 1fr; }
}