/* Logo */
.brand-logo { display: block; width: auto; height: 32px; }
.sheet-top .brand-logo { height: 28px; }
.foot-brand .brand-logo { height: 30px; margin-bottom: 12px; }

/* Water.css gives summary a negative margin and details its own padding:
   both break the boxes of the contents list and the FAQ. */
.toc > summary, .faq summary { margin: 0; background: transparent; }
.toc[open], .faq details[open] { padding: 0; }
.toc[open] { padding: 0 14px; }
summary:focus, summary:hover { text-decoration: none; }
.toc[open] > summary, .faq details[open] summary { margin-bottom: 0; }

/* Contents list: tighter rows */
.toc > summary { padding: 11px 0; }
.toc-list { padding: 0 0 12px; gap: 2px 20px; }
.toc-list li { margin: 0; }
.toc-list a { display: block; padding: 3px 0; line-height: 1.35; }

/* FAQ: answer stays inside the card */
.faq details { padding: 0; }
.faq summary { padding: 15px 18px; }
.faq p { padding: 0 18px 16px; line-height: 1.5; }

/* Hero: two parallax layers */
.stage-bg { overflow: hidden; }
.stage-bg img { position: absolute; left: 0; top: -22%; width: 100%; height: 144%; object-fit: cover; object-position: center; }
.stage-confetti { opacity: .9; }
.stage-bg::after {
  z-index: 1;
  background: linear-gradient(100deg, rgba(4, 47, 74, .9) 0%, rgba(4, 47, 74, .68) 46%, rgba(4, 47, 74, .3) 100%);
}

/* Offer panel: picture on top */
.pane-shot { position: relative; display: block; border-radius: 16px; overflow: hidden; line-height: 0; }
.pane-shot img { width: 100%; height: auto; display: block; }
.pane-shot-tag {
  position: absolute; left: 10px; bottom: 10px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--gold); color: #27200a;
  font-size: 11.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
}
@media (hover: hover) and (min-width: 1024px) {
  .pane-shot img { transition: transform .25s linear; }
  .pane-shot:hover img { transform: scale(1.04); }
}
.pane .ticket { padding: 14px 16px; }
.pane .ticket-terms { margin-top: 12px; padding-top: 12px; gap: 6px; font-size: 13px; }

/* Back-to-top sits above the bottom bar */
.stick:not([hidden]) ~ .totop { bottom: calc(16px + 78px); }

/* Desktop menu only: the burger takes over below 900 */
@media (max-width: 899px) {
  .nav { display: none; }
}

/* 320-560: hero buttons show their short label */
@media (max-width: 560px) {
  .stage .btn-long { display: none; }
  .stage .btn-short { display: inline; }
  .head-row { min-height: 70px; }
  .brand-logo { height: 26px; }
}
@media (max-width: 380px) {
  .brand-logo { height: 23px; }
  .head-row { gap: 8px; padding: 9px 10px; }
}
.foot-end { padding-right: 68px; }
@media (max-width: 560px) { .foot-end { padding-right: 0; } }

/* Anchors land below the sticky header */
main [id], .stage[id] { scroll-margin-top: 92px; }
@media (max-width: 899px) { main [id], .stage[id] { scroll-margin-top: 82px; } }

/* Two-column strips and author cards: no empty half */
@media (min-width: 561px) { .mini > li:first-child:nth-last-child(odd) { grid-column: 1 / -1; } }
.people > li:only-child { grid-column: 1 / -1; }

/* Perks outside the dark homepage block: light cards, full width */
.sec:not(.sec-shot) .perks { max-width: none; }
.sec:not(.sec-shot) .perks li { background: var(--surface); border-color: var(--line); }
.sec:not(.sec-shot) .perks .i { color: var(--brand); }
.sec:not(.sec-shot) .perks strong { color: var(--ink); }
.sec:not(.sec-shot) .perks p { color: var(--muted); }

/* Steps without the side picture take the whole row */
.ladder-wrap > .ladder:only-child { grid-column: 1 / -1; }

/* Section picture: centred, never wider than the file */
.shotfig { text-align: center; }
.shotfig img { margin: 0 auto; }

/* Lower hero */
@media (min-width: 700px) {
  .stage { min-height: clamp(340px, 50vh, 500px); padding-top: 30px; padding-bottom: 30px; }
  .stage-over { margin-bottom: 10px; }
  .stage h1 { margin-bottom: 10px; }
  .stage-cta { margin-top: 16px; }
}
@media (max-width: 560px) {
  .stage .ticket-sm { flex-wrap: nowrap; align-items: center; gap: 8px; padding: 8px 12px; }
  .stage .ticket-sm .ticket-over, .stage .ticket-sm .ticket-plus { display: none; }
  .stage .ticket-sm .ticket-cond { width: auto; margin: 0; font-size: 12.5px; }
  .stage .ticket-sm .ticket-sum { width: auto; margin-left: auto; font-size: 1.35rem; }
}

/* Space between a component and the text that follows it */
main :is(ul.cards, ul.mini, ul.perks, ul.people, ul.weights, ul.tiles, ul.cert, dl.specs, .ladder-wrap, .t-wrap, .callout, .tool, figure.shotfig, figure.plate, .tabs):not(:last-child) { margin-bottom: 20px; }
main .t-wrap + .t-swipe { margin-top: -4px; }
.stage .ticket-sm { padding-top: 12px; padding-bottom: 12px; }

/* No trailing margin at the bottom of padded blocks */
main :is(.sec-tint, .shot-in, .gate, .tool, .callout > div, .cards > li, .people > li, .short) > :last-child { margin-bottom: 0; }

/* Mobile menu: more items on short screens, offer text on a solid side */
.sheet-list { padding-top: 10px; padding-bottom: 8px; }
.sheet-list a { padding: 11px 16px; font-size: 17px; }
.sheet-offer img { left: auto; right: 0; width: 62%; }
.sheet-offer { background: var(--deep); }
.sheet-offer::after { background: linear-gradient(90deg, rgba(4, 47, 74, 1) 0%, rgba(4, 47, 74, 1) 38%, rgba(4, 47, 74, .78) 56%, rgba(4, 47, 74, 0) 86%); }
.sheet-offer-in { max-width: 58%; }
@media (max-height: 620px) { .sheet-offer { height: 116px; margin-bottom: 10px; } .sheet-offer-sum { font-size: 1.7rem; } .sheet-cta { padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); } }
/* Offer card grows with its text instead of a fixed height */
.sheet-offer, .sheet-offer:is(*) { height: auto; min-height: 120px; }
.sheet-offer-in { height: auto; min-height: 120px; padding: 12px 14px; }
@media (max-height: 620px) { .sheet-offer, .sheet-offer-in { min-height: 0; } }
@media (max-width: 360px) {
  .sheet-offer img { width: 50%; }
  .sheet-offer::after { background: linear-gradient(90deg, rgba(4, 47, 74, 1) 0%, rgba(4, 47, 74, 1) 50%, rgba(4, 47, 74, .75) 66%, rgba(4, 47, 74, 0) 92%); }
  .sheet-offer-in { max-width: 70%; }
}
/* Mobile: header and open-menu bar are the same row (logo + one round button) */
@media (max-width: 899px) {
  .btn-head { display: none; }
  .brand { margin-right: auto; }
  .sheet-top { min-height: 70px; padding: 12px; }
  .sheet-top .brand-logo { height: 32px; }
}
@media (max-width: 560px) { .sheet-top .brand-logo { height: 26px; } }
@media (max-width: 420px) { .sheet-top { padding: 9px 12px; } }
@media (max-width: 380px) { .sheet-top { padding: 9px 10px; } .sheet-top .brand-logo { height: 23px; } }
@media (max-width: 899px) { .sheet-top { border-bottom: 0; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12); align-items: center; } .head-row { align-items: center; min-height: 70px; } }
#sheet-close { background: rgba(255, 255, 255, .12); border: 0; }