/* Adrenalin Adventure website: page layout (one-pager). Tokens and components: styles.css */

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 2px solid var(--rule);
}
.nav__bar { display: flex; align-items: center; gap: var(--s-5); height: var(--nav-h); }
.nav__logo { display: block; flex: none; text-decoration: none; }
.nav__logo .nav__mark { height: 54px; width: auto; }
:root[data-logo="b"] .nav__logo .nav__mark { height: 56px; }
:root[data-logo="c"] .nav__logo .nav__mark { height: 46px; }
.nav__division { font-size: .8rem; letter-spacing: .08em; padding: .34em .8em .28em; white-space: nowrap; }
.nav__links { margin-left: auto; }
.nav__links ul { display: flex; gap: var(--s-5); }
.nav__links a {
  position: relative; z-index: 0; display: inline-block;
  font-family: var(--f-strike); text-transform: uppercase; letter-spacing: .06em; font-size: .95rem; line-height: 1.1;
  text-decoration: none; padding: .35em .1em;
}
/* acid marker sits behind the whole word, so press-black text stays legible in both editions */
.nav__links a::after {
  content: ""; position: absolute; inset: .12em -.25em; z-index: -1;
  background: var(--acid); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out);
}
.nav__links a[aria-current="true"]::after { transform: scaleX(1); }
.nav__links a[aria-current="true"] { color: var(--press); }
@media (hover: hover) {
  .nav__links a:hover::after { transform: scaleX(1); }
  .nav__links a:hover { color: var(--press); }
}
.nav__actions { display: flex; align-items: center; gap: var(--s-3); }
.nav__edition, .nav__menu {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 2px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; border-radius: 0;
}
@media (hover: hover) {
  .nav__edition:hover, .nav__menu:hover { background: var(--acid); color: var(--press); border-color: var(--press); }
}
.nav__edition .icon { width: 20px; height: 20px; }
.icon--sun { display: none; }
:root[data-theme="dark"] .icon--sun { display: block; }
:root[data-theme="dark"] .icon--moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon--sun { display: block; }
  :root:not([data-theme="light"]) .icon--moon { display: none; }
}
.nav__menu { display: none; }
.nav__cta { margin-right: 5px; }

@media (max-width: 1100px) { .nav__division { display: none; } }
@media (max-width: 900px) {
  .nav__bar { gap: var(--s-3); }
  .nav__links { order: 3; margin-left: 0; }
  .nav__actions { order: 2; margin-left: auto; }
  .nav__menu { display: grid; }
  .nav__links ul {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; gap: 0;
    background: var(--paper); border-bottom: 2px solid var(--rule); padding: var(--s-2) var(--gutter) var(--s-4);
  }
  .nav__links ul.is-open { display: flex; }
  .nav__links li a { display: block; padding: .85em 0; font-size: 1.15rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
  .nav__links li a::after { inset: .5em -.25em; }
}
@media (max-width: 420px) {
  .nav__logo .nav__mark { height: 40px; }
  .nav__edition { display: none; }
}
@media (max-width: 360px) {
  .nav__logo .nav__mark { height: 34px; }
  .nav__cta { padding-inline: .7em; letter-spacing: .04em; }
}

/* ---------- Cover ---------- */
.cover { border-bottom: 2px solid var(--rule); overflow: hidden; }
.cover__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--s-6);
  min-height: min(calc(100dvh - var(--nav-h)), 900px);
  align-items: center;
}
.cover__text { padding-block: var(--s-8); position: relative; z-index: 2; }
.cover__title { font-size: clamp(3rem, 6vw, 6rem); line-height: .9; }
.cover__title .swoosh::before { bottom: -.04em; height: .5em; left: -.08em; right: -.3em; }
.cover__sub { margin-top: var(--s-5); max-width: 40ch; }
.cover__ctas { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); }
/* a cover line printed on the paper side, straddling toward the photo */
.cover__paperline {
  display: inline-block; margin-top: var(--s-6);
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.3rem); text-transform: uppercase; color: var(--pink-text);
  transform: rotate(var(--tilt, -4deg));
}

.cover__art { position: relative; margin: 0; align-self: stretch; margin-right: calc(-1 * var(--gutter) - max(0px, (100vw - var(--wrap)) / 2)); }
.cover__photo { position: absolute; inset: 0; overflow: hidden; background: var(--paper-2); }
.cover__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* Second ink plate: pink halftone printed out of register (offset lives in mask-position) */
.cover__plate {
  position: absolute; inset: 0;
  background: var(--pink);
  -webkit-mask: url("img/cover-tueten-raster.png") calc(50% + 9px) calc(42% + 6px) / cover no-repeat;
  mask: url("img/cover-tueten-raster.png") calc(50% + 9px) calc(42% + 6px) / cover no-repeat;
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: no-preference) {
  .js .cover__plate { animation: plate-slip 1.1s var(--ease-out) .15s both; }
  .js .cover__title { animation: title-plates 1.1s var(--ease-out) .1s both; }
}
@keyframes plate-slip {
  from { -webkit-mask-position: calc(50% + 40px) calc(42% - 28px); mask-position: calc(50% + 40px) calc(42% - 28px); opacity: 0; }
  30% { opacity: 1; }
  to { -webkit-mask-position: calc(50% + 9px) calc(42% + 6px); mask-position: calc(50% + 9px) calc(42% + 6px); }
}
@keyframes title-plates {
  from { text-shadow: -.25em -.12em 0 transparent, .3em .16em 0 transparent; }
  to { text-shadow: -.035em -.025em 0 var(--acid), .045em .03em 0 var(--pink); }
}

/* Pasted clipping: the event in colour, taped over the photocopy */
.cover__inset {
  position: absolute; z-index: 3; left: -3.5rem; bottom: 9%;
  width: min(62%, 22rem);
  border: 6px solid var(--newsprint);
  box-shadow: 0 0 0 2px var(--press);
  transform: rotate(var(--tilt, 3deg));
}
.cover__inset img { width: 100%; aspect-ratio: 760 / 498; object-fit: cover; }
.cover__inset-tape { position: absolute; top: -.9rem; left: 50%; width: 5.5rem; height: 1.6rem; padding: 0; margin-left: -2.75rem; background: var(--acid); opacity: .92; --tilt: -3deg; }
.cover__inset-label { position: absolute; right: -1.2rem; bottom: -1.1rem; font-size: 1rem; }

.cover__lines { position: absolute; inset: 0; pointer-events: none; }
.cover__line { position: absolute; font-size: clamp(1rem, .7rem + .9vw, 1.5rem); }
.cover__big { display: block; font-family: var(--f-marker); font-size: 2.2em; line-height: .9; letter-spacing: 0; }
.cover__line--price { left: -2.2rem; top: 11%; padding: .5em .8em .45em; }
.cover__line--guests { right: 7%; top: 40%; font-size: clamp(1.1rem, .8rem + 1vw, 1.7rem); }

@media (max-width: 900px) {
  .cover__grid { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .cover__text { padding-block: var(--s-7) var(--s-6); }
  .cover__title { font-size: clamp(2.6rem, 12vw, 4.6rem); }
  .cover__art { aspect-ratio: 4 / 4.6; margin-inline: calc(-1 * var(--gutter)); }
  .cover__inset { left: var(--gutter); bottom: 7%; width: 56%; }
  .cover__inset-label { right: -.6rem; }
  .cover__line--price { left: var(--gutter); top: 6%; }
  .cover__line--guests { right: var(--gutter); top: 42%; }
}

/* ---------- Section rhythm ---------- */
.format, .stations, .night, .drinks, .extras, .incl, .formats, .enquiry { padding-block: clamp(4rem, 3rem + 5vw, 8rem); }
/* Tilted collage pieces may poke past the viewport edge; clip without creating a scroll container */
.format, .stations, .drinks, .formats { overflow-x: clip; }

/* ---------- Format ---------- */
.format__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
  row-gap: var(--s-6);
  align-items: start;
}
.format__title { grid-column: 1 / span 7; font-size: clamp(3rem, 1.6rem + 5vw, 5.75rem); line-height: .88; }
.format__clip { grid-column: 9 / -1; grid-row: 1 / span 2; margin: 0; position: relative; transform: rotate(2.2deg); margin-top: var(--s-4); }
.format__clip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--ink); }
.format__tape { position: absolute; left: -1.2rem; bottom: -1rem; font-size: 1rem; }
.format__copy { grid-column: 1 / span 6; display: grid; gap: var(--s-4); max-width: 60ch; color: var(--ink-2); }
.format__facts {
  grid-column: 1 / -1;
  font-size: clamp(1.9rem, 1rem + 3.2vw, 3.75rem);
  line-height: 1.2;
  text-transform: uppercase;
  max-width: 24ch;
  margin-top: var(--s-5);
}
.format__facts .hl { white-space: nowrap; }
@media (max-width: 900px) {
  .format__title, .format__copy, .format__facts { grid-column: 1 / -1; }
  .format__clip { grid-column: 2 / -1; grid-row: auto; transform: rotate(1.6deg); margin-top: 0; }
  .format__facts .hl { white-space: normal; }
}

/* ---------- Stations + Line-up ---------- */
.stations { border-top: 2px solid var(--rule); }
.stations__head { display: grid; gap: var(--s-4); max-width: 62rem; margin-bottom: var(--s-7); }
.stations__layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: clamp(1.5rem, 3vw, 3.5rem); align-items: start; }

.clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); align-items: stretch; padding-top: var(--s-3); }
.clip {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 2px solid var(--ink);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .3s var(--ease-out), background-color .2s;
}
@media (hover: hover) { .clip:hover { transform: rotate(0deg); } }
.clip:focus-within { transform: rotate(0deg); }
.clip__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 2px solid var(--ink); }
.clip__body { padding: var(--s-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); flex: 1; }
.clip__name { font-family: var(--f-marker); text-transform: uppercase; font-size: 1.55rem; line-height: 1; hyphens: manual; overflow-wrap: anywhere; }
.clip__text { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.clip__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.clip__tags .icon { width: .95em; height: .95em; }

/* Format: wide feature (photo left, copy right) */
.clip--wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.clip--wide .clip__img { aspect-ratio: auto; height: 100%; min-height: 16rem; border-bottom: 0; border-right: 2px solid var(--ink); }
.clip--wide .clip__body { justify-content: center; padding: var(--s-5) var(--s-5) var(--s-6); }
.clip--wide .clip__name { font-size: 2.1rem; }

/* Format: station name slapped onto the photo as a cover line */
.clip__photo { position: relative; }
.clip--over .clip__name {
  position: absolute; left: .7rem; bottom: -.9rem; z-index: 1;
  font-size: 1.35rem; max-width: calc(100% - 1.4rem);
  font-family: var(--f-marker); letter-spacing: 0;
}
.clip--over .clip__body { padding-top: var(--s-6); }

/* Format: photocopy clipping */
.clip--copy .clip__img { filter: contrast(1.05); }

/* Format: typed slip, no photo */
.clip--typed { background: var(--paper-2); }
.clip--typed .clip__body { justify-content: flex-start; padding: var(--s-6) var(--s-5) var(--s-5); }
.clip--typed .clip__name { font-size: clamp(1.9rem, 1.3rem + 1.2vw, 2.5rem); line-height: .92; border-bottom: 2px solid currentColor; padding-bottom: var(--s-3); align-self: stretch; }
.clip--typed-acid { background: var(--acid); color: var(--press); border-color: var(--press); --focus: var(--press); --focus-strong: var(--press); }
.clip--typed-acid .clip__text { color: var(--press); }
.clip--typed-acid .tag--vegan { background: var(--press); color: var(--acid); border-color: var(--press); }
.clip--typed-acid .chip { border-color: var(--press); color: var(--press); background: var(--newsprint); }

/* The toggle is a sticker slapped on the corner of the clipping */
.chip {
  display: inline-flex; align-items: center; gap: .45em;
  min-height: 44px; padding: .5em .8em .44em;
  border: 2px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink);
  font-family: var(--f-strike); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem;
  cursor: pointer; touch-action: manipulation;
  transition: background-color .15s, color .15s, transform .15s var(--ease-out);
}
.clip__body .chip { margin-top: auto; }
@media (min-width: 561px) {
  .clip .chip { position: absolute; top: -1.05rem; right: -.8rem; z-index: 2; margin: 0; transform: rotate(4deg); }
  .clip:nth-child(even) .chip { transform: rotate(-3deg); }
}
@media (hover: hover) {
  .chip:hover { background: var(--ink); color: var(--paper); }
  .chip[aria-pressed="true"]:hover { background: var(--pink); color: var(--press); border-color: var(--press); }
}
.chip:active { scale: .97; }
.chip .icon--on { display: none; }
.chip[aria-pressed="true"] { background: var(--press); color: var(--acid); border-color: var(--press); }
.chip[aria-pressed="true"] .icon--on { display: block; }
.chip[aria-pressed="true"] .icon--add { display: none; }
/* night edition: the pressed toggle keeps an acid edge against the dark paper */
:root[data-theme="dark"] .chip[aria-pressed="true"] { border-color: var(--acid); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip[aria-pressed="true"] { border-color: var(--acid); } }

.clip.is-picked { outline: 4px solid var(--acid); outline-offset: 4px; --focus: var(--pink); }

/* ---------- The mini cover ---------- */
.lineup { position: sticky; top: calc(var(--nav-h) + var(--s-5)); display: grid; gap: var(--s-4); }
.lineup__cover {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--newsprint); color: var(--press);
  border: 2px solid var(--press);
  box-shadow: 8px 8px 0 0 var(--pink);
  --ink: #111111; --paper: #F6F5F1; --focus: var(--press); --focus-strong: var(--press);
}
/* photocopy ground, fading out under the masthead */
.lineup__ground {
  position: absolute; inset: 0;
  background: url("img/location-kopie.webp") 40% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 18%, #000 48%);
  mask-image: linear-gradient(to bottom, transparent 18%, #000 48%);
  opacity: .9;
}
.lineup__mast { position: absolute; left: 7%; top: 5%; width: 70%; height: auto; }
.lineup__title {
  position: absolute; left: 7%; top: 23%;
  font-family: var(--f-marker); text-transform: uppercase; font-size: 1.45rem; line-height: 1;
  background: var(--newsprint); padding: .1em .3em 0; margin-left: -.3em;
}
.lineup__title:focus { outline: none; }
.lineup__title:focus-visible { outline: 3px solid var(--press); }
.lineup__badge { position: absolute; right: 4%; top: 17%; --size: 5.4rem; }
.lineup__badge > span { display: grid; justify-items: center; line-height: .9; }
.lineup__badge b { font-family: var(--f-marker); font-weight: 400; font-size: 2rem; }
.lineup__badge small { font-size: .62rem; letter-spacing: .05em; }

.lineup__lines li {
  position: absolute;
  max-width: 78%;
  font-family: var(--f-marker); text-transform: uppercase; line-height: 1;
  font-size: 1.15rem;
  padding: .28em .5em .2em;
  transform: rotate(var(--tilt, -2deg));
  background: var(--pink); color: var(--press);
}
.lineup__lines li:nth-child(1) { top: 37%; left: 6%; font-size: 1.45rem; --tilt: -4deg; }
.lineup__lines li:nth-child(2) { top: 48%; right: 6%; --tilt: 3deg; background: var(--acid); }
.lineup__lines li:nth-child(3) { top: 58%; left: 8%; --tilt: -2deg; background: var(--press); color: var(--newsprint); }
.lineup__lines li:nth-child(4) { top: 67%; right: 8%; --tilt: 4deg; background: var(--newsprint); outline: 2px solid var(--press); outline-offset: -2px; }
.lineup__lines li:nth-child(5) { top: 76%; left: 5%; --tilt: -3deg; background: var(--acid); }
.lineup__lines li:nth-child(6) { top: 86%; right: 6%; --tilt: 2deg; }
.lineup__lines li:nth-child(n+7) { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .lineup__lines li.is-new { animation: slap .4s var(--ease-slap) both; }
}
@keyframes slap { from { transform: rotate(var(--tilt, -2deg)) scale(1.4); opacity: 0; } to { transform: rotate(var(--tilt, -2deg)) scale(1); opacity: 1; } }
.lineup__ghost {
  position: absolute; top: 40%; left: 8%; right: 8%;
  font-family: var(--f-marker); text-transform: uppercase; font-size: 1.35rem; text-align: center;
  padding: .7em .5em .6em; background: var(--newsprint);
  border: 2px dashed var(--press); transform: rotate(-3deg);
}
.lineup__cover[data-state="picked"] .lineup__ghost { display: none; }
.lineup__more { position: absolute; left: 6%; bottom: 3%; font-size: .85rem; --tilt: -2deg; }
.lineup__more[hidden] { display: none; }

.lineup__meta { display: grid; gap: var(--s-2); }
.lineup__hint { font-size: var(--t-sm); }
.lineup__tip { color: var(--ink-3); }
.lineup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-2); }
.lineup__reset {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px;
  background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer;
  font-family: var(--f-type); font-size: var(--t-sm); text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: .22em;
}
@media (hover: hover) { .lineup__reset:hover { text-decoration-color: currentColor; } }
.lineup__reset[hidden] { display: none; }

.lineup-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) max(var(--gutter), env(safe-area-inset-right)) calc(var(--s-3) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background: var(--press); color: var(--newsprint);
  border-top: 2px solid var(--acid);
  font-family: var(--f-strike); text-transform: uppercase; letter-spacing: .05em;
  --focus: var(--acid); --focus-strong: var(--acid);
}
.lineup-bar[hidden] { display: none; }
.lineup-bar .btn { --plate: var(--acid); }
.lineup-bar strong { font-family: var(--f-marker); font-weight: 400; font-size: 1.5rem; color: var(--acid); }
html.has-lineup-bar { scroll-padding-bottom: 5rem; }
@media (min-width: 1001px) { .lineup-bar { display: none !important; } }

@media (max-width: 1000px) {
  .stations__layout { grid-template-columns: 1fr; }
  .lineup { position: static; max-width: 24rem; }
}
@media (max-width: 760px) {
  .clips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: compact horizontal clippings */
@media (max-width: 560px) {
  .clips { grid-template-columns: 1fr; gap: var(--s-4); padding-top: 0; }
  .clip, .clip--wide { grid-column: auto; display: grid; grid-template-columns: 38% minmax(0, 1fr); transform: rotate(calc(var(--tilt, 0deg) * .4)); }
  .clip--typed { display: flex; }
  .clip__photo { display: contents; }
  .clip__img, .clip--wide .clip__img { aspect-ratio: auto; height: 100%; min-height: 0; border-bottom: 0; border-right: 2px solid var(--ink); grid-row: 1 / span 2; }
  .clip__body, .clip--wide .clip__body, .clip--typed .clip__body { padding: var(--s-3); gap: var(--s-2); justify-content: flex-start; }
  .clip__name, .clip--wide .clip__name, .clip--typed .clip__name { font-size: 1.2rem; }
  .clip--over .clip__name { position: static; grid-column: 2; max-width: none; margin: var(--s-3) var(--s-3) 0; justify-self: start; font-size: 1.1rem; }
  .clip--over .clip__body { grid-column: 2; padding-top: var(--s-2); }
  .clip__text { font-size: .8125rem; line-height: 1.45; }
  .chip { font-size: .85rem; padding: .5em .7em .42em; }
}

/* ---------- Night edition spread (always dark) ---------- */
.night {
  background: #0E0E0D; color: var(--newsprint);
  --ink: #F3F2EC; --ink-2: #D2D1CA; --ink-3: #A9A8A1; --paper: #0E0E0D; --rule: #F3F2EC;
  --focus: var(--acid); --focus-strong: var(--acid);
}
.night .lede { color: #D2D1CA; }
.night__head { display: grid; gap: var(--s-4); max-width: 60rem; margin-bottom: var(--s-7); }
.night__pink { color: var(--pink); }
.night__spread {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: var(--s-5);
}
.night__fig { margin: 0; grid-column: 8 / -1; }
.night__fig--big { grid-column: 1 / span 7; grid-row: 1 / span 2; display: flex; flex-direction: column; }
.night__fig img { width: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.night__fig--big img { flex: 1; aspect-ratio: auto; min-height: 22rem; }
.night figcaption { font-size: var(--t-sm); color: #BDBCB5; margin-top: var(--s-2); }
.night figcaption::before { content: ""; display: inline-block; width: 1.4em; height: 2px; background: var(--acid); vertical-align: .3em; margin-right: .6em; }

.caddy {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5);
  margin-top: clamp(3rem, 2rem + 4vw, 6rem); align-items: end;
}
.caddy__fig { grid-column: 1 / -1; margin: 0 calc(-1 * var(--gutter)); }
.caddy__fig img { width: 100%; aspect-ratio: 1186 / 460; object-fit: cover; mix-blend-mode: screen; }
.caddy__text { grid-column: 1 / span 8; display: grid; gap: var(--s-4); margin-top: calc(-1 * clamp(3rem, 2rem + 5vw, 7rem)); position: relative; }
.caddy__title { font-size: clamp(2.8rem, 1.5rem + 5vw, 5.5rem); line-height: .9; }
.caddy__title .hl { color: var(--press); }
.caddy__text p { max-width: 52ch; color: #D2D1CA; }
.caddy__price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }
.caddy__price .sticker { font-size: 1.2rem; }
.caddy__plus { font-size: var(--t-sm); color: #D2D1CA; }
.night a { text-decoration-color: var(--acid); }
@media (max-width: 900px) {
  .night__fig, .night__fig--big { grid-column: 1 / -1; grid-row: auto; }
  .night__fig--big img { min-height: 0; aspect-ratio: 3 / 2; }
  .caddy__text { grid-column: 1 / -1; margin-top: calc(-1 * var(--s-6)); }
}

/* ---------- Drinks ---------- */
.drinks__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.drinks__fig { margin: 0; position: relative; transform: rotate(-2deg); }
.drinks__fig img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border: 2px solid var(--ink); }
.drinks__tape { position: absolute; right: -1rem; top: -1rem; font-size: 1.05rem; }
.drinks__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.drinks__col h2 { display: flex; align-items: center; gap: .35em; margin-bottom: var(--s-4); }
.drinks__col h2 .icon { width: .9em; height: .9em; }
.drinks__note { margin-top: var(--s-4); color: var(--ink-3); }
.list { display: grid; gap: var(--s-3); }
.list li { position: relative; padding-left: 1.5em; color: var(--ink-2); }
.list li::before { content: ""; position: absolute; left: 0; top: .72em; width: .9em; height: 3px; background: var(--ink); }
.list strong { color: var(--ink); }
@media (max-width: 900px) {
  .drinks__grid { grid-template-columns: 1fr; }
  .drinks__fig { max-width: 34rem; }
}
@media (max-width: 600px) { .drinks__cols { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .drinks__tape { right: .25rem; } }

/* ---------- Extras as typeset classifieds ---------- */
.extras { border-top: 2px solid var(--rule); }
.extras__head { display: grid; gap: var(--s-4); max-width: 60rem; margin-bottom: var(--s-7); }
.classifieds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); }
.classifieds__label {
  display: inline-block; font-size: 1.1rem; letter-spacing: .08em;
  background: var(--ink); color: var(--paper); padding: .35em .7em .28em; margin-bottom: var(--s-4);
}
.ads { columns: 2 12rem; column-gap: var(--s-6); column-rule: 1px solid var(--ink); border-top: 2px solid var(--ink); padding-top: var(--s-3); }
.ad {
  break-inside: avoid;
  display: grid; gap: .2rem;
  padding: var(--s-3) 0 var(--s-4);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
}
.ad__name { font-family: var(--f-marker); text-transform: uppercase; font-size: 1.3rem; line-height: 1.02; }
.ad__detail { font-size: var(--t-sm); color: var(--ink-2); }
.ad__price { font-family: var(--f-type); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
/* two display ads, boxed and inked */
.ad--acid, .ad--pink { border: 2px solid var(--press); padding: var(--s-4); margin-block: var(--s-3); color: var(--press); }
.ad--acid { background: var(--acid); transform: rotate(-1deg); }
.ad--pink { background: var(--pink); transform: rotate(1deg); }
.ad--acid .ad__detail, .ad--pink .ad__detail { color: var(--press); }
@media (max-width: 900px) { .classifieds { grid-template-columns: 1fr; gap: var(--s-6); } }
@media (max-width: 560px) {
  .ads { columns: 2 9rem; column-gap: var(--s-4); }
  .ad__name { font-size: 1.05rem; }
  .ad__detail { font-size: .8125rem; }
  .ad__price { font-size: .95rem; }
}

/* ---------- Inclusions: pink flood ---------- */
.incl { background: var(--pink); color: var(--press); --focus: var(--press); --focus-strong: var(--press); }
.incl__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; }
.incl__title { font-size: clamp(3rem, 1.6rem + 5vw, 5.75rem); line-height: .88; }
.incl__list { display: grid; }
.incl__list li { display: grid; grid-template-columns: auto minmax(10rem, 14rem) 1fr; column-gap: var(--s-4); align-items: baseline; border-top: 2px solid var(--press); padding-block: var(--s-4); }
.incl__list .icon { width: 1.6rem; height: 1.6rem; align-self: center; }
.incl__list strong { font-family: var(--f-marker); font-weight: 400; text-transform: uppercase; font-size: 1.6rem; line-height: 1.05; }
.incl__list span { font-size: var(--t-base); line-height: 1.45; }
.incl__terms { border-top: 2px solid var(--press); border-bottom: 2px solid var(--press); padding-block: var(--s-4); }
.incl ::selection { background: var(--press); color: var(--pink); }
@media (max-width: 900px) {
  .incl__grid { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 560px) {
  .incl__list li { grid-template-columns: auto 1fr; row-gap: .2rem; }
  .incl__list .icon { grid-row: span 2; align-self: start; margin-top: .15rem; }
  .incl__list span { grid-column: 2; font-size: var(--t-sm); }
}

/* ---------- Other formats: tickets ---------- */
.formats .h-section { margin-bottom: var(--s-7); }
.tickets { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); max-width: 68rem; }
.ticket {
  position: relative; display: grid; gap: var(--s-4); align-content: start;
  padding: var(--s-6) var(--s-6) var(--s-6) calc(var(--s-6) + 1.2rem);
  border: 2px solid var(--ink); background: var(--paper);
  transform: rotate(var(--tilt, 0deg));
}
/* perforated stub edge */
.ticket::before {
  content: ""; position: absolute; left: 1rem; top: 0; bottom: 0; width: 0;
  border-left: 2px dashed currentColor; opacity: .8;
}
.ticket__name { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); line-height: .95; }
.ticket p { color: var(--ink-2); max-width: 44ch; }
.ticket .btn { justify-self: start; }
/* always a black ticket, in both editions */
.ticket--ink { background: var(--press); color: var(--newsprint); border-color: var(--rule); --focus: var(--acid); --focus-strong: var(--acid); }
.ticket--ink p { color: #D2D1CA; }
.ticket--ink .btn--ghost { color: var(--newsprint); border-color: var(--newsprint); }
@media (hover: hover) { .ticket--ink .btn--ghost:hover { color: var(--press); border-color: var(--acid); } }
@media (max-width: 760px) { .tickets { grid-template-columns: 1fr; } }

/* ---------- Enquiry coupon ---------- */
.enquiry { background: var(--paper-2); border-top: 2px solid var(--rule); }
.coupon {
  position: relative; max-width: 58rem; margin-inline: auto;
  background: var(--paper);
  border: 3px dashed var(--ink);
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}
.coupon__scissors { position: absolute; top: -1.05rem; left: 2.5rem; width: 1.9rem; height: 1.9rem; background: var(--paper-2); padding: 0 .2rem; }
.coupon__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
.form { display: grid; gap: var(--s-5); }
.form__required { color: var(--ink-3); margin-top: calc(-1 * var(--s-3)); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.form__row--3 { grid-template-columns: 1.3fr .8fr 1fr; }
.field { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.field label, .field__label {
  font-family: var(--f-strike); text-transform: uppercase; letter-spacing: .07em; font-size: .95rem;
}
.req { color: var(--pink-text); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px;
  padding: .7rem .85rem;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0;
  font-family: var(--f-type); font-size: 1.0625rem; /* >= 16px: no iOS zoom */
  transition: box-shadow .15s, border-color .15s;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.4rem; }
.field textarea { resize: vertical; min-height: 7.5rem; }
.field ::placeholder { color: var(--ink-3); opacity: 1; }
/* focus: pink plate; transparent outline keeps a ring in forced-colors mode */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid transparent; box-shadow: 5px 5px 0 0 var(--pink); }
/* invalid: thicker pink-ink border, so focus and error stay distinguishable */
.field [aria-invalid="true"] { border-color: var(--pink-text); border-width: 3px; padding: calc(.7rem - 1px) calc(.85rem - 1px); }
.field [aria-invalid="true"]:focus-visible { box-shadow: 5px 5px 0 0 var(--ink); }
.field__error { font-size: var(--t-sm); color: var(--pink-text); font-weight: 700; }
.field__hint { font-size: var(--t-xs); color: var(--ink-3); }
.form__lineup-empty { font-size: var(--t-sm); color: var(--ink-3); }
.form__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.form__chips li { background: var(--acid); color: var(--press); padding: .3em .6em .22em; font-family: var(--f-strike); text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; transform: rotate(var(--tilt, -1deg)); }
.form__legal { color: var(--ink-3); max-width: 70ch; }
.form__submit { justify-self: start; }
.form__errors {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--pink); color: var(--press); padding: var(--s-3) var(--s-4);
  font-weight: 700;
}
.form__errors[hidden] { display: none; }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.coupon__done { display: grid; gap: var(--s-4); justify-items: start; padding-block: var(--s-5); position: relative; }
.coupon__done[hidden] { display: none; }
.coupon__done h3 { overflow-wrap: anywhere; padding-right: 9rem; }
.coupon__done h3:focus { outline: none; }
.coupon__stamp { --size: 8.5rem; font-size: 1.05rem; position: absolute; right: 0; top: -1rem; }
@media (max-width: 700px) {
  .form__row, .form__row--3 { grid-template-columns: 1fr; }
  .coupon__stamp { position: static; }
  .coupon__done h3 { padding-right: 0; }
}

/* ---------- Footer ---------- */
.footer { border-top: 2px solid var(--rule); padding-block: var(--s-8) var(--s-6); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: var(--s-7); align-items: start; }
.footer__logo .footer__mark { width: min(300px, 70vw); height: auto; }
:root[data-logo="b"] .footer__logo .footer__mark { width: 150px; }
:root[data-logo="c"] .footer__logo .footer__mark { width: min(260px, 70vw); }
.footer__brand p { margin-top: var(--s-4); max-width: 44ch; color: var(--ink-2); }
.footer__label { font-size: 1rem; letter-spacing: .08em; margin-bottom: var(--s-3); }
.footer address { font-style: normal; color: var(--ink-2); line-height: 1.7; }
.footer__links ul { display: grid; gap: var(--s-1); }
.footer__links a { display: inline-block; padding-block: .5rem; }
.footer__base { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); margin-top: var(--s-7); color: var(--ink-3); }
.footer__base p { flex: 1; padding-top: var(--s-4); border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.footer__edition { background: none; border: 0; padding: .5rem 0; min-height: 44px; cursor: pointer; color: var(--ink-2); font-family: var(--f-type); font-size: var(--t-sm); text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: .22em; }
@media (hover: hover) { .footer__edition:hover { color: var(--ink); text-decoration-color: currentColor; } }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---------- Gentle reveal for pasted photos (content visible without JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; translate: 0 24px; transition: opacity .7s var(--ease-out), translate .7s var(--ease-out); }
  .js [data-reveal].is-in { opacity: 1; translate: 0 0; }
  /* safety net: if app.js never runs, reveal anyway */
  .js:not(.js-ready) [data-reveal] { animation: reveal-fallback 0s 2.5s forwards; }
  .js:not(.js-ready) [data-slap] { animation: slap-fallback 0s 2.5s forwards; }
}
@keyframes reveal-fallback { to { opacity: 1; translate: 0 0; } }
@keyframes slap-fallback { to { opacity: 1; transform: rotate(var(--tilt, -4deg)) scale(1); } }
@media (max-width: 420px) {
  /* very small phones: long form CTA may wrap instead of widening the form */
  .form__submit { white-space: normal; max-width: 100%; text-align: left; }
}
:root[data-logo="b"] .lineup__mast { width: 30%; top: 3%; }
:root[data-logo="c"] .lineup__mast { width: 56%; }