/* ==========================================================================
   Nav, content sections, footer
   Section backgrounds follow the inspos.png variants.
   ========================================================================== */

/* Nav: hidden over the hero, slides in once you scroll past it ------------- */
.site-nav {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(calc(100% - 24px), 980px);
  padding: 8px 8px 8px 18px;
  color: var(--white);
  background: var(--ink);
  border-radius: 999px;
  box-shadow: 0 6px 0 rgba(12, 14, 15, 0.25);
  translate: -50% calc(-100% - 24px);
  transition: translate 0.35s cubic-bezier(0.2, 1, 0.3, 1);
}
.site-nav.is-visible,
.site-nav:focus-within { translate: -50% 0; }
.site-nav :focus-visible { outline-color: var(--tape); }
.site-nav__brand img { width: auto; height: 30px; }
.site-nav__menu { display: flex; align-items: center; gap: clamp(2px, 1.2vw, 18px); margin-left: auto; }
.site-nav__menu a:not(.btn) {
  padding: 0.4em 0.5em;
  font-family: var(--font-tape);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8px;
}
.site-nav__menu a:not(.btn):hover { color: var(--tape); }
/* Status chip, not a link. The attribute selector matches the specificity of
   .btn[aria-disabled="true"] in base.css, which would otherwise wash it out. */
.site-nav__cta {
  padding: 0.5em 1.05em;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--tape);
  border-color: var(--ink);
}
.site-nav__cta[aria-disabled="true"] {
  box-shadow: none;
  cursor: default;
}
.site-nav__cta[aria-disabled="true"]:hover,
.site-nav__cta[aria-disabled="true"]:active { transform: none; box-shadow: none; }
.site-nav__toggle { display: none; }

@media (max-width: 760px) {
  .site-nav { flex-wrap: wrap; padding: 8px 8px 8px 16px; border-radius: 24px; }
  .site-nav__toggle {
    display: inline-flex;
    margin-left: auto;
    padding: 0.5em 1em;
    font-family: var(--font-tape);
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--tape);
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    cursor: pointer;
  }
  .site-nav__menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 0 6px; }
  .site-nav.is-open .site-nav__menu { display: flex; }
  .site-nav__menu a:not(.btn) { padding: 0.7em 0.6em; font-size: 1.1rem; }
  .site-nav__cta { margin-top: 6px; }
}

/* About Make-A-Ton + CITTIC · one section split down the middle: a yellow half
   and a cream half, each bled to the edge, joined by a single dashed rule with
   the star sitting on the seam. No card chrome — the halves are the section. */
.section--about {
  --about-inner: clamp(18px, 2.6vw, 44px);
  /* The wave that replaces the ruled seam: --seam-h is how deep it runs, and
     --seam-w one tile of it. The tile is 480x80, so six times the depth is
     what keeps the curve undistorted. */
  --seam-h: clamp(40px, 4.6vw, 64px);
  --seam-w: calc(var(--seam-h) * 6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0;
}

/* Seam · the hero sheet doesn't stop at a ruled line: its bottom edge rolls
   over both About halves as a wave, inked underneath like every other edge
   here. Two masked layers of the same shape — the sheet colour, and the same
   wave one line-weight lower in ink showing out below it — so the line follows
   the curve and thins where the wave runs steep, the way a brush would. The
   host section sets --seam-h / --seam-w. Where mask is unsupported both layers
   stay rectangles: a band of sheet over an ink rule, i.e. the old straight
   seam. */
.seam {
  position: absolute;
  z-index: 2;
  top: 0;
  /* A tile of slack each side so the drift never runs out of wave; main clips */
  left: calc(-1 * var(--seam-w));
  right: calc(-1 * var(--seam-w));
  height: var(--seam-h);
  pointer-events: none;
}
.seam::before,
.seam::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  -webkit-mask: var(--seam-wave) 0 0 / var(--seam-w) 100% repeat-x;
  mask: var(--seam-wave) 0 0 / var(--seam-w) 100% repeat-x;
  /* Exactly one tile per cycle, so it loops without a jump */
  animation: seam-drift 34s linear infinite;
}
/* The line: the same wave, dropped a shade more than the line weight, since
   the drop is vertical and the curve eats into it wherever it runs steep */
.seam::before {
  top: calc(var(--line) + 1px);
  background: var(--ink);
}
/* The sheet: the hero's shaded bottom edge, carried over the seam */
.seam::after {
  top: 0;
  background: var(--hero-page-shade);
}
@keyframes seam-drift {
  to { translate: var(--seam-w); }
}
/* Rows are shared (subgrid) so both headings sit on the same line */
.about-panel {
  /* A panel is half the section, so 200% of it is the full section width: the
     outer padding lands on the same line as every other section's gutter. */
  --about-outer: max(var(--gutter), calc((200% - var(--max)) / 2));
  position: relative;
  isolation: isolate;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}
.about-panel--mat {
  /* Squiggles run the full half, tone-on-tone as in every other section, so the
     tiles meet at the edges instead of being sliced by a strip */
  --pattern-color: #F0B01E;
  background: var(--yellow);
  /* The seam star hangs over the cream half */
  z-index: 1;
}
.about-panel--cittic {
  /* The palette's cream, one shade under the paper it sits on */
  --pattern-color: var(--cream);
  --pattern-size: max(200px, 18vw);
  background: var(--paper);
}
/* The padding sits on the rows rather than the panel, so each half's dashed
   rule can run its full width and the two meet as one line at the seam. */
.about-panel__head,
.about-panel__body {
  padding-inline: var(--about-outer) var(--about-inner);
}
.about-panel--cittic .about-panel__head,
.about-panel--cittic .about-panel__body {
  padding-inline: var(--about-inner) var(--about-outer);
}
.about-panel__head {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 14px;
  /* Clear of the seam: 0.72 of the band is the wave's deepest dip, and the
     rest is the breathing room the ruled line used to have */
  padding-top: calc(var(--seam-h, 0px) * 0.72 + clamp(34px, 3.4vw, 52px));
  padding-bottom: clamp(18px, 2vw, 26px);
}
.about-panel__kicker {
  display: none;
}
.about-panel__head::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ink) 0 60%, transparent 0) 0 0 / 24px 100% repeat-x;
}
/* A pink star pinned to the seam, straddling both halves */
.about-panel--mat .about-panel__head::before {
  content: "";
  position: absolute;
  bottom: 2px;
  right: 0;
  z-index: 1;
  width: clamp(34px, 3vw, 46px);
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 116 116'%3E%3Cdefs%3E%3Cpath id='s' d='M50 0C57 30 70 43 100 50C70 57 57 70 50 100C43 70 30 57 0 50C30 43 43 30 50 0Z'/%3E%3C/defs%3E%3Cg stroke='%230C0E0F' stroke-width='5' stroke-linejoin='round'%3E%3Cuse href='%23s' x='6' y='6' fill='%230C0E0F'/%3E%3Cuse href='%23s' fill='%23FA5C94'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  translate: 50% 50%;
}
.about-panel__body {
  padding-top: clamp(16px, 1.8vw, 24px);
  padding-bottom: clamp(52px, 5.5vw, 80px);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
}
.about-panel__body > p + p { margin-top: 1em; }
/* Body copy stays in one typeface; this line earns its emphasis from weight */
.about-panel__turn {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.35;
}
/* There is no card edge left to hang over — the half runs to the section's
   bottom, and anything past it would slide under the next section — so the
   mascot stands in the corner of the cream half and keeps the same sway. */
.mascot-peeker--about {
  right: clamp(12px, 3vw, 56px);
  /* Clear of the next section's tape divider, which rides up over this edge */
  bottom: clamp(30px, 3.2vw, 56px);
  transform: translate(0, 0) rotate(8deg);
  animation-name: mascot-stand-sway;
}
@keyframes mascot-stand-sway {
  0%, 100% { transform: translate(0, 0) rotate(8deg); }
  50% { transform: translate(-4px, -7px) rotate(4deg); }
}
.about-panel__stickers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px clamp(20px, 3vw, 40px);
  margin-top: clamp(30px, 4vw, 48px);
}
.about-panel__body > .sticker--pillow { margin: clamp(30px, 4vw, 48px) 0 0 auto; }
.sticker { transition: rotate 0.3s ease, scale 0.3s ease; }
.sticker:hover { rotate: 0deg; scale: 1.06; }
.sticker--ticket { width: clamp(170px, 17vw, 240px); aspect-ratio: 388 / 224; rotate: -6deg; }
.sticker--blob { width: clamp(120px, 12vw, 170px); aspect-ratio: 320 / 284; rotate: 8deg; }
.sticker--blob > span { color: var(--ink); text-shadow: none; }
.sticker--pillow { width: clamp(120px, 12vw, 170px); aspect-ratio: 328 / 332; rotate: -5deg; }

/* Phones: the halves stack, each still running edge to edge */
@media (max-width: 860px) {
  .section--about { grid-template-columns: minmax(0, 1fr); }
  .about-panel {
    --about-outer: var(--gutter);
    --about-inner: var(--gutter);
    display: block;
    grid-row: auto;
  }
  .about-panel--cittic .about-panel__head { padding-top: clamp(30px, 6vw, 48px); }
  /* Back inside the half, now that there is no seam to sit on */
  .about-panel--mat .about-panel__head::before { translate: 0 50%; }
  /* Room under the text for the mascot, pulled in so its bubble stays on screen */
  .about-panel--cittic .about-panel__body { padding-bottom: 120px; }
  .mascot-peeker--about { right: 30px; }
}

/* About Odoo Hackathon · violet (Odoo's own colour), tone-on-tone squiggles */
.section--odoo {
  --pattern-color: #A655F1;
  background: var(--purple);
}
/* Brush stroke under the title's last word, as on Odoo's own page */
.swoosh { position: relative; display: inline-block; }
.swoosh::after {
  content: "";
  position: absolute;
  top: calc(100% + 0.04em);
  left: -8%;
  right: -4%;
  height: 0.2em;
  background: var(--white);
  -webkit-mask: var(--swoosh) center / 100% 100% no-repeat;
  mask: var(--swoosh) center / 100% 100% no-repeat;
}

/* One full-width description card, set in two readable columns */
.odoo__card {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  padding: clamp(22px, 2.8vw, 36px);
  color: var(--ink);
  background: var(--paper);
  border: var(--line) solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
}
.odoo__lead {
  max-width: 62ch;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 700;
  line-height: 1.35;
  text-wrap: pretty;
}
/* The closing line is set off by a rule rather than a panel */
.odoo__tie-in {
  padding-top: clamp(14px, 1.8vw, 22px);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink);
  border-top: 3px dashed rgba(12, 14, 15, 0.28);
}
.odoo__tie-in b { color: var(--red); }

@media (max-width: 820px) {
  .swoosh::after { left: 2%; right: -4%; }
}

/* Hack For CUSAT · the CUSAT-only curtain raiser, on the green mascot's green */
.section--hack {
  --pattern-color: #1E9A54;
  padding-block: clamp(32px, 3.4vw, 50px) clamp(36px, 3.8vw, 56px);
  color: var(--ink);
  background: var(--green);
}
.hack__card {
  display: grid;
  gap: clamp(9px, 1.1vw, 14px);
  padding: clamp(18px, 2.2vw, 28px);
  color: var(--ink);
  background: var(--paper);
  border: var(--line) solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
}
.hack__card .odoo__lead { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem); }
.hack__hook {
  justify-self: start;
  padding: 0.35em 0.8em;
  font-family: var(--font-tape);
  font-size: clamp(0.95rem, 0.86rem + 0.55vw, 1.35rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--tape);
  border: var(--line) solid var(--ink);
  border-radius: 8px;
  box-shadow: 4px 4px 0 var(--ink);
  rotate: -1.5deg;
}
/* The three firsts run inline and wrap, rather than taking three tall lines */
.hack__firsts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px clamp(14px, 1.8vw, 26px);
  font-family: var(--font-tape);
  font-size: clamp(0.92rem, 0.86rem + 0.35vw, 1.15rem);
}
.hack__firsts li { display: flex; align-items: baseline; gap: 0.35em; }
.hack__firsts li::before { content: "▸"; font-size: 0.6em; color: var(--red); }
.hack__maybe {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.75rem);
  text-transform: uppercase;
  color: var(--red);
}
.hack__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 10px;
  margin-top: 2px;
}
.hack__facts div {
  padding: 8px 12px;
  color: var(--ink);
  background: var(--tape);
  border: var(--line) solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
}
.hack__facts dt {
  font-family: var(--font-tape);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}
.hack__facts dd { margin: 0; font-weight: 700; }

/* Prizes · red sunburst ---------------------------------------------------- */
/* Podium tones: gold, silver and bronze. Each card is that metal lit from the
   top-left and deepened at the bottom-right, so the gradient reads as a shape. */
.section--prizes {
  --tone-first: #FCC230;
  --tone-second: #E5EFF9;
  --tone-third: #EA7C3A;
}
.prizes-hiring {
  max-width: 44ch;
  margin: clamp(22px, 2.6vw, 32px) auto 0;
  padding: 0.75em 1.1em;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  text-align: center;
  color: var(--ink);
  background: var(--tape);
  border: var(--line) solid var(--ink);
  border-radius: 16px;
}
.prizes-hiring b { color: var(--red); }

@keyframes bounty-spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes bounty-wobble {
  0%, 100% {
    transform: rotate(12deg) scale(1);
  }
  50% {
    transform: rotate(8deg) scale(1.06);
  }
}

.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "second first third";
  align-items: end;
  gap: clamp(16px, 2.5vw, 32px);
  max-width: 1120px;
  margin-inline: auto;
  padding-top: 28px;
}

.display--prizes {
  rotate: -1.5deg;
}

.prizes-subtitle {
  margin-top: 6px;
  font-family: var(--font-tape);
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.2rem);
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 2px 2px 0 var(--ink);
  letter-spacing: 0.03em;
}

.prize {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 3.4vw, 50px) clamp(16px, 2vw, 24px) clamp(30px, 3vw, 42px);
  text-align: center;
  border: 4px solid var(--ink);
  border-radius: 20px;
  box-shadow: 12px 12px 0 var(--ink);
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.25s ease, opacity 0.5s ease;
  will-change: transform;
}

.prize__body {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.prize__header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 2px;
}

.prize__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--font-tape);
  max-width: 100%;
  font-size: clamp(0.7rem, 3.4cqi, 0.86rem);
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
}

.prize__badge--first { font-weight: 700; }

.prize__amount-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-block: 4px;
}

.prize__amount-label {
  font-family: var(--font-tape);
  font-size: clamp(0.74rem, 3.4cqi, 0.88rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
  color: var(--ink);
}

.prize__amount {
  max-width: 100%;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 21cqi, 4.3rem);
  white-space: nowrap;
  line-height: 0.95;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  -webkit-text-stroke: 0.08em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0.05em 0.06em 0 var(--ink);
}

.prize--first .prize__amount {
  font-size: clamp(2.4rem, 23.5cqi, 4.8rem);
}

.prize__label {
  max-width: 100%;
  font-family: var(--font-tape);
  font-size: clamp(1rem, 5cqi, 1.35rem);
  font-weight: 400;
  line-height: 1.15;
  text-transform: uppercase;
}

.prize__desc {
  font-family: var(--font-tape);
  font-size: clamp(0.8rem, 3.8cqi, 0.95rem);
  line-height: 1.35;
  color: var(--ink);
  max-width: 260px;
}

.prize__sunburst-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

.prize__sunburst {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  opacity: var(--seal-opacity, 0.18);
  background: repeating-conic-gradient(
    from 0deg,
    var(--ink) 0deg 15deg,
    transparent 15deg 30deg
  );
  animation: bounty-spin-slow var(--seal-speed, 40s) linear infinite;
}
/* The metals are light enough to carry the turning seal at full strength */
.prize--second .prize__sunburst { --seal-opacity: 0.16; --seal-speed: 52s; animation-direction: reverse; }
.prize--third .prize__sunburst { --seal-opacity: 0.16; --seal-speed: 46s; }

.prize--first {
  grid-area: first;
  min-height: clamp(330px, 35vw, 430px);
  background: linear-gradient(145deg, #FFE870 0%, var(--tone-first) 45%, #F0AE0E 100%);
  z-index: 10;
  transform-origin: center center;
}

.prize--first .prize__badge {
  background: var(--ink);
  color: var(--tape);
  border: 2px solid var(--ink);
}

.prize--second {
  grid-area: second;
  min-height: clamp(280px, 30vw, 370px);
  background: linear-gradient(145deg, #FFFFFF 0%, var(--tone-second) 45%, #C7D9EE 100%);
  transform-origin: bottom right;
}

.prize--second .prize__badge {
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
}

.prize--second .prize__label,
.prize--second .prize__amount-label {
  color: var(--ink);
}

.prize--third {
  grid-area: third;
  min-height: clamp(280px, 30vw, 370px);
  background: linear-gradient(145deg, #FFAF76 0%, var(--tone-third) 45%, #D25E1A 100%);
  transform-origin: bottom left;
}

.prize--third .prize__badge {
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
}

.prize--third .prize__label,
.prize--third .prize__amount-label {
  color: var(--ink);
  text-shadow: none;
}

/* Staggered entrance transition delays */
.podium .prize--second { transition-delay: 0.1s; }
.podium .prize--first { transition-delay: 0.2s; }
.podium .prize--third { transition-delay: 0.3s; }

/* Pre-reveal initial states */
.js .podium:not(.is-visible) .prize--second {
  opacity: 0;
  transform: translateY(70px) rotate(-7deg) scale(0.85);
}
.js .podium:not(.is-visible) .prize--first {
  opacity: 0;
  transform: translateY(-60px) scale(0.85);
}
.js .podium:not(.is-visible) .prize--third {
  opacity: 0;
  transform: translateY(70px) rotate(7deg) scale(0.85);
}

/* Radial Arc Fan-Out default positions */
.podium.is-visible .prize--second,
.no-js .prize--second {
  opacity: 1;
  transform: translateY(24px) rotate(-3.5deg);
}

.podium.is-visible .prize--first,
.no-js .prize--first {
  opacity: 1;
  transform: translateY(-26px) scale(1.06);
}

.podium.is-visible .prize--third,
.no-js .prize--third {
  opacity: 1;
  transform: translateY(24px) rotate(3.5deg);
}

/* Hover dynamics */
.podium.is-visible .prize--second:hover {
  transform: translateY(12px) rotate(-1.5deg) scale(1.025);
  box-shadow: 16px 16px 0 var(--ink);
  z-index: 15;
}

.podium.is-visible .prize--first:hover {
  transform: translateY(-36px) scale(1.09);
  box-shadow: 18px 18px 0 var(--ink);
  z-index: 20;
}

.podium.is-visible .prize--third:hover {
  transform: translateY(12px) rotate(1.5deg) scale(1.025);
  box-shadow: 16px 16px 0 var(--ink);
  z-index: 15;
}

@media (max-width: 860px) {
  .podium {
    grid-template-columns: 1fr;
    grid-template-areas: "first" "second" "third";
    gap: 36px;
    max-width: 460px;
    padding-top: 20px;
  }
  .prize--first, .prize--second, .prize--third {
    min-height: 0;
    transform: none !important;
    opacity: 1 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .prize:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 14px 14px 0 var(--ink) !important;
  }
  .prize__jackpot {
    top: -12px;
    right: 8px;
  }
}

/* FAQ · blue + darker tone-on-tone blue asterisks -------------------------- */
.section--faq { --pattern-color: #2365E8; background: var(--blue); }
.faq { display: grid; gap: 18px; }
.faq__item {
  background: var(--white);
  border: var(--line) solid var(--ink);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--ink);
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 16px 22px;
  font-family: var(--font-tape);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1.2;
  list-style: none;
  border-radius: 15px;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 40px;
  height: 40px;
  background:
    linear-gradient(var(--ink) 0 0) center / 16px 4px no-repeat,
    linear-gradient(var(--ink) 0 0) center / 4px 16px no-repeat,
    var(--tape);
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  transition: rotate 0.25s ease;
}
.faq__item[open] summary { background: var(--tape); border-bottom: var(--line) solid var(--ink); border-radius: 15px 15px 0 0; }
.faq__item[open] summary::after { rotate: 45deg; background-color: var(--white); }
.faq__body { padding: 18px 22px 22px; }

@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq__item::details-content { height: 0; overflow: clip; transition: height 0.3s ease, content-visibility 0.3s allow-discrete; }
  .faq__item[open]::details-content { height: auto; }
}

/* Footer · red field, dot texture, three marks and a thin legal bar --------- */
.site-footer {
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  color: var(--white);
  background-color: var(--red);
  background-image: radial-gradient(rgba(12, 14, 15, 0.16) 1.4px, transparent 1.5px);
  background-size: 14px 14px;
  border-top: var(--line) solid var(--ink);
}
.site-footer :focus-visible { outline-color: var(--tape); }

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(24px, 3.5vw, 44px);
  width: min(calc(100% - 2 * var(--gutter)), var(--max));
  margin-inline: auto;
  padding-block: clamp(32px, 4vw, 48px);
}

/* Brand block. The logo is a block-level img, so it needs grid alignment —
   text-align does not move it with the copy around it. */
.foot-brand { display: grid; justify-items: start; }
.foot-kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tape);
}
.foot-logo { width: min(230px, 52vw); height: auto; margin-block: 10px 12px; }
.foot-tagline { max-width: 34ch; font-size: 0.92rem; line-height: 1.45; }
.foot-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 14px;
  padding: 0.5em 1em;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--ink);
  background: var(--white);
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.foot-mail:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }

/* Social marks. Placeholders are spans, so nothing looks clickable until a
   real href is in place; the hover below only applies once they are links. */
.foot-social { display: flex; gap: 10px; margin-top: 12px; }
.foot-social__link {
  display: grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  color: var(--ink);
  background: var(--white);
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.foot-social__link svg { width: 17px; height: 17px; fill: currentColor; }
a.foot-social__link { text-decoration: none; }
a.foot-social__link:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
a.foot-social__link:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.foot-mail:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

/* Venue card */
.foot-card {
  display: grid;
  gap: 4px;
  padding: 16px 18px 18px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.5;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 12px;
  box-shadow: 6px 6px 0 var(--ink);
  rotate: -0.6deg;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.foot-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--ink);
}
.foot-card:active {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}
.foot-card__head {
  padding-bottom: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  border-bottom: 2px dashed rgba(12, 14, 15, 0.3);
}
.foot-card__title {
  margin-top: 6px;
  font-family: var(--font-tape);
  font-size: 1.15rem;
  line-height: 1.15;
  text-transform: uppercase;
}
.foot-card__coords {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  opacity: 0.78;
}

.foot-transit {
  display: grid;
  gap: 5px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1.5px dashed rgba(12, 14, 15, 0.25);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.35;
}
.foot-transit__item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}
.foot-transit__icon {
  flex: none;
  width: 14px;
  height: 14px;
  fill: var(--red);
}
.foot-transit__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.foot-transit__val {
  color: rgba(12, 14, 15, 0.85);
  white-space: nowrap;
}

/* Seal and barcode */
.foot-marks { display: grid; justify-items: center; gap: 16px; }
.foot-seal {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  width: 132px;
  height: 132px;
  padding: 10px;
  text-align: center;
  color: var(--ink);
  background: var(--tape);
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  rotate: -6deg;
}
/* A hard offset shadow reads as a black crescent on a circle, so the seal
   carries its weight in the border instead */
.foot-seal__top {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.foot-seal__name { font-family: var(--font-display); font-size: 1.35rem; line-height: 0.9; text-transform: uppercase; white-space: nowrap; }
.foot-seal__vol {
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.foot-barcode {
  display: grid;
  gap: 5px;
  width: 168px;
  padding: 10px 12px;
  background: var(--white);
  border: var(--line) solid var(--ink);
  border-radius: 8px;
  box-shadow: 4px 4px 0 var(--ink);
}
/* Three periods that do not line up, so the bars read as a real code */
.foot-barcode__bars {
  height: 38px;
  background-image:
    repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 11px),
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 4px);
}
.foot-barcode__id {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--ink);
}

/* Legal bar */
.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  text-align: center;
  width: min(calc(100% - 2 * var(--gutter)), var(--max));
  margin-inline: auto;
  padding-block: 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-top: 2px solid rgba(12, 14, 15, 0.35);
}

@media (max-width: 860px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  /* One column, and every band pulled in — the footer is the last thing on a
     phone, so it should not read as another screenful */
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 18px;
    padding-block: 24px 20px;
    text-align: center;
  }
  .foot-brand { justify-items: center; }
  .foot-kicker { font-size: 0.62rem; letter-spacing: 0.18em; }
  .foot-logo { width: min(170px, 44vw); margin-block: 8px 8px; }
  .foot-tagline { max-width: 30ch; font-size: 0.82rem; line-height: 1.35; }
  .foot-social { gap: 8px; margin-top: 10px; }
  .foot-social__link { width: 34px; box-shadow: 2px 2px 0 var(--ink); }
  .foot-mail { margin-top: 10px; padding: 0.42em 0.85em; font-size: 0.74rem; box-shadow: 3px 3px 0 var(--ink); }

  .foot-card {
    width: 100%;
    max-width: 340px;
    gap: 2px;
    padding: 12px 14px 14px;
    font-size: 0.74rem;
    line-height: 1.4;
    rotate: none;
    box-shadow: 4px 4px 0 var(--ink);
  }
  .foot-card__head { padding-bottom: 6px; }
  .foot-transit { gap: 4px; margin-top: 5px; padding-top: 6px; font-size: 0.68rem; }
  .foot-transit__icon { width: 12px; height: 12px; }

  .foot-marks { grid-auto-flow: column; align-items: center; gap: 14px; }
  .foot-seal { width: 96px; height: 96px; padding: 7px; }
  .foot-seal__top, .foot-seal__vol { font-size: 0.48rem; letter-spacing: 0.06em; }
  .foot-seal__name { font-size: 0.95rem; }
  .foot-barcode { width: 124px; padding: 7px 9px; }
  .foot-barcode__bars { height: 26px; }
  .foot-barcode__id { font-size: 0.54rem; }

  .site-footer__bar {
    justify-content: center;
    padding-block: 10px;
    font-size: 0.6rem;
    text-align: center;
  }
}
@media (max-width: 380px) {
  .foot-seal { width: 84px; height: 84px; }
  .foot-seal__name { font-size: 0.85rem; }
  .foot-barcode { width: 108px; }
  .foot-marks { gap: 10px; }
}