/* ==========================================================================
   Shipaton x DekPort — Chiang Mai

   Design language is borrowed from shipaton.com so the two read as one event:
   2px borders, 8px radius, and a HARD offset shadow with no blur — the sticker
   look. Their token is `box-shadow: 8px 8px 0 rgba(7,5,14,.34)`. Everything
   here is built from that one idea: cards are stickers, stickers sit at
   angles, and nothing is a soft floating panel.

   Flat fills only. All motion is off under prefers-reduced-motion.
   ========================================================================== */

:root {
  --void:    #120e1e;
  --night:   #171326;
  --surface: #231831;
  --subtle:  #2d1e3d;
  --line:    #5f4c66;
  --ink:     #07050e;
  --cream:   #fff7ec;
  --muted:   #c9b7a8;
  --orange:  #ff8100;
  --gold:    #ffc46b;
  --blue:    #6aa6ff;

  /* dekport.com colour-codes every category — competition red, camp green,
     workshop blue, internship purple, activity amber — as a -700 ink on a -50
     tint. That system is the strongest thing DekPort's design owns, so it
     comes across here as the audience accents. Shifted to the bright end of
     each hue because this canvas is dark, not white. */
  --dp-compete: #f87171;
  --dp-camp:    #4ade80;
  --dp-work:    #60a5fa;
  --dp-intern:  #c084fc;
  --dp-act:     #fbbf24;

  --sans: "Inter", "Noto Sans Thai Looped", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --wrap: 76rem;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --r: 0.5rem;

  /* The signature. Two depths so hover has somewhere to go. */
  --pop: 8px 8px 0 0 rgba(7, 5, 14, 0.34);
  --pop-lg: 12px 12px 0 0 rgba(7, 5, 14, 0.4);
}

/* Thai needs headroom for tone marks and a lower underline for descenders. */
html[lang="th"] { --sans: "Noto Sans Thai Looped", "Inter", system-ui, sans-serif; }
html[lang="th"] h1, html[lang="th"] h2 { line-height: 1.24; }
html[lang="th"] h3 { line-height: 1.32; }
html[lang="th"] .hilite::after { bottom: -0.12em; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film grain. Keeps large flat fills from looking like a template export. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 { line-height: 1.06; letter-spacing: -0.03em; margin: 0; font-weight: 900; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 1000;
  background: var(--orange); color: var(--ink);
  padding: 0.55rem 0.95rem; border: 2px solid var(--ink); border-radius: var(--r);
  font-weight: 800; text-decoration: none;
}
.skip-link:focus { top: 0.5rem; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* ── Sticker: the one primitive everything is built from ─────────────── */

.sticker {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--pop);
}
.sticker--tilt-l { transform: rotate(-1.4deg); }
.sticker--tilt-r { transform: rotate(1.2deg); }

.sticker-hover {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}
.sticker-hover:hover {
  transform: translate(-3px, -3px) rotate(-0.6deg);
  box-shadow: var(--pop-lg);
  border-color: var(--orange);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.9rem 1.5rem;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  font: 800 0.95rem/1 var(--sans);
  text-decoration: none; cursor: pointer;
  box-shadow: 5px 5px 0 0 var(--ink);
  transition: transform 0.13s ease, box-shadow 0.13s ease, background-color 0.13s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 0 var(--ink); }
/* Press it down into its own shadow. */
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 0 var(--ink); }

.btn--sm { padding: 0.6rem 1rem; font-size: 0.85rem; box-shadow: 4px 4px 0 0 var(--ink); }
.btn--sm:hover { box-shadow: 6px 6px 0 0 var(--ink); }
.btn--primary { background: var(--orange); color: #241704; }
.btn--primary:hover { background: var(--gold); }
.btn--ghost { background: var(--surface); color: var(--cream); border-color: var(--line); box-shadow: 5px 5px 0 0 rgba(7, 5, 14, 0.34); }
.btn--ghost:hover { border-color: var(--orange); box-shadow: 7px 7px 0 0 rgba(7, 5, 14, 0.34); }
.arrow { width: 0.85em; height: 0.85em; flex: none; }

/* ── Nav ─────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(23, 19, 38, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, background-color 0.2s;
}
.nav.is-stuck { border-bottom-color: var(--line); background: rgba(18, 14, 30, 0.96); }
.nav__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; }

.lockup { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; flex: none; }
.lockup__mark { width: 2.1rem; height: 2.1rem; border-radius: 6px; border: 2px solid var(--line); }
.lockup__x { color: var(--muted); font: 400 1rem/1 var(--mono); }
.lockup__ship { height: 1.9rem; width: auto; }

.nav__links { display: flex; gap: 1.4rem; margin-inline-start: auto; }
.nav__links a {
  text-decoration: none; font-size: 0.9rem; font-weight: 600; color: var(--muted);
  padding-bottom: 2px; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s;
}
.nav__links a:hover { color: var(--cream); border-bottom-color: var(--orange); }
.nav__links a[aria-current="page"] { color: var(--cream); border-bottom-color: var(--orange); }

.nav__actions { display: flex; align-items: center; gap: 0.75rem; flex: none; }

.langswitch { display: flex; border: 2px solid var(--line); border-radius: var(--r); overflow: hidden; }
.langswitch button {
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font: 700 0.85rem/1 var(--sans);
  padding: 0.45rem 0.6rem; transition: background-color 0.15s, color 0.15s;
}
.langswitch button.is-on { background: var(--orange); color: var(--ink); }

@media (max-width: 940px) { .nav__links { display: none; } .nav__inner { justify-content: space-between; } .nav__actions { margin-inline-start: auto; } }
@media (max-width: 560px) {
  .nav__inner { gap: 0.5rem; min-height: 3.75rem; }
  .nav__actions { gap: 0.4rem; }
  .lockup { gap: 0.4rem; }
  .lockup__x { display: none; }
  .lockup__ship { height: 1.15rem; }
  .langswitch button { padding: 0.4rem 0.45rem; font-size: 0.8rem; }
  .nav .btn--sm { padding: 0.5rem 0.65rem; font-size: 0.75rem; gap: 0.3rem; }
  .nav .btn--sm .arrow { display: none; }
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero { position: relative; background: var(--night); overflow: hidden; }
.hero__sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

.ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(9rem, 22vw, 16rem); z-index: 1; }
.ridge__far    { fill: #261c3d; }
.ridge__mid    { fill: #1b1530; }
.ridge__temple { fill: #1b1530; }
.ridge__near   { fill: #100c1a; }

.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(7rem, 16vw, 11rem);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font: 700 0.8rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); background: var(--subtle);
  border: 2px solid var(--line); border-radius: 100px;
  padding: 0.5rem 0.9rem; margin: 0 0 1.5rem;
  box-shadow: 4px 4px 0 0 rgba(7, 5, 14, 0.34);
  transform: rotate(-1.2deg);
}
.dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--orange); flex: none; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 129, 0, 0.55); } 50% { opacity: 0.75; box-shadow: 0 0 0 6px rgba(255, 129, 0, 0); } }

.hero__title { font-size: clamp(2.7rem, 7.6vw, 5.4rem); margin-bottom: 1.25rem; }
.hero__title .line { display: block; }
.hilite { font-style: normal; color: var(--orange); position: relative; white-space: nowrap; }
.hilite::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.02em; height: 0.045em;
  background: var(--gold); border-radius: 2px; transform-origin: left;
  animation: sweep 1.1s 0.35s cubic-bezier(0.65, 0, 0.35, 1) both;
}
@keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tagline {
  font: 800 clamp(1.05rem, 1.9vw, 1.4rem)/1.35 var(--sans);
  color: var(--gold); letter-spacing: -0.01em;
  margin: 0 0 1rem; max-width: 30ch;
}
.lede { font-size: clamp(1.02rem, 1.55vw, 1.18rem); color: var(--muted); max-width: 42ch; margin: 0 0 2rem; }

/* Event details as a torn ticket stub rather than another card of labels. */
.ticket {
  position: relative; display: flex; flex-wrap: wrap; gap: 0 1.75rem;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--r);
  box-shadow: var(--pop);
  padding: 1rem 1.25rem; margin: 0 0 2rem; list-style: none;
  transform: rotate(-0.8deg); max-width: 34rem;
}
/* Perforation down the left edge, like a stub you tear off. */
.ticket::before {
  content: ""; position: absolute; left: 0.85rem; top: 0.5rem; bottom: 0.5rem; width: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='9'%3E%3Crect width='2' height='5' fill='%235f4c66'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
}
.ticket li { display: flex; flex-direction: column; gap: 0.15rem; padding-block: 0.35rem; }
.ticket li:first-child { margin-inline-start: 1.35rem; }
.ticket__k { font: 700 0.75rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); opacity: 0.8; }
.ticket__v { font-weight: 800; font-size: 1rem; }
.tba {
  display: inline-block;
  font: 800 0.76rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink); background: var(--gold); border: 1.5px solid var(--ink); border-radius: 3px;
  padding: 0.2rem 0.3rem; margin-inline-start: 0.35rem; vertical-align: 0.12em;
  transform: rotate(-2deg);
}

.cta-row { position: relative; display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.5rem; }

/* Hand-drawn marks used as punctuation around headings and CTAs. Purely
   decorative, so they never take pointer events and disappear on small
   screens where there is no room for them to sit clear of the text. */
.deco { position: absolute; pointer-events: none; user-select: none; z-index: 4; }
.deco--cta { width: 4.5rem; right: -3.75rem; top: -2.1rem; transform: rotate(28deg) scaleX(-1); }
.deco--clock { width: 4rem; left: -1.6rem; top: -1.9rem; transform: rotate(-12deg); }
.deco--final { width: 4.5rem; right: 12%; top: -0.5rem; transform: rotate(10deg); }
@media (max-width: 1100px) { .deco--cta { display: none; } }
@media (max-width: 860px) { .deco--clock, .deco--final { display: none; } }

/* The marker swash sits directly under a heading as an underline. */
.swash { display: block; width: min(21rem, 46%); height: auto; margin: -0.5rem 0 1.1rem; }
.microcopy { font-size: 0.85rem; color: var(--muted); opacity: 0.8; margin: 0; max-width: 46ch; }

/* Hero art: Shippy and the DekPort mascot meeting.
   Pointer parallax is fed in as --px/--py rather than written straight to
   `translate`, because the idle bob/drift keyframes animate that same property
   and an animation always beats an inline style. Composing through custom
   properties lets both run at once. */
.stage { position: relative; display: grid; place-items: center; min-height: clamp(20rem, 42vw, 30rem); }
.stage__shippy, .stage__dek, .tag { --px: 0px; --py: 0px; }

.stage__shippy {
  width: clamp(15rem, 30vw, 23rem); position: relative; z-index: 2;
  filter: drop-shadow(10px 12px 0 rgba(7, 5, 14, 0.38));
  translate: var(--px) var(--py);
  animation: bob 6.5s ease-in-out infinite;
  will-change: transform, translate;
}
/* DekPort's own mascot, redrawn in a Shipaton suit — she is cut out with a
   transparent background now, so no circular frame or border. */
.stage__dek {
  position: absolute; z-index: 3; left: -2%; bottom: -2%;
  width: clamp(8rem, 16vw, 12.5rem);
  filter: drop-shadow(8px 9px 0 rgba(7, 5, 14, 0.38));
  translate: var(--px) var(--py);
  animation: bob 5.5s 0.9s ease-in-out infinite;
  will-change: transform, translate;
}
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.4deg); } 50% { transform: translateY(-16px) rotate(1.4deg); } }

.tag {
  position: absolute; z-index: 4;
  font: 700 0.72rem/1 var(--mono);
  background: var(--surface); border: 2px solid var(--line); color: var(--muted);
  padding: 0.45rem 0.65rem; border-radius: var(--r); white-space: nowrap;
  box-shadow: 4px 4px 0 0 rgba(7, 5, 14, 0.34);
}
.tag--a { top: 4%; left: -3%; color: var(--blue); transform: rotate(-4deg); animation: drift 9s ease-in-out infinite; }
.tag--b { bottom: 26%; right: -4%; transform: rotate(3deg); animation: drift 11s 0.8s ease-in-out infinite reverse; }
.tag--c { top: 26%; right: -6%; color: var(--gold); transform: rotate(2deg); animation: drift 10s 1.6s ease-in-out infinite; }
@keyframes drift {
  0%, 100% { translate: var(--px) var(--py); }
  50%      { translate: var(--px) calc(var(--py) - 12px); }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; padding-block: 2rem clamp(6rem, 22vw, 9rem); }
  .stage { order: -1; min-height: auto; margin-bottom: 0.5rem; }
  .tag--a, .tag--b, .tag--c { display: none; }
  .ticket { gap: 0 1.25rem; }
}

/* ── Marquees: two rows running opposite ways, tilted off-axis ───────── */

.marquees { position: relative; z-index: 3; margin-block: -1.5rem 0; overflow: hidden; }
/* Wider than the viewport: once a full-width bar is rotated its corners pull
   in and leave triangular gaps at the left and right edges. */
.marquee {
  overflow: hidden; padding-block: 0.55rem; border-block: 2px solid var(--ink);
  width: 108%; margin-inline-start: -4%;
}
/* Opposite tilts converge at one end, so the two bars need real clearance
   between them or their text collides where they cross. */
.marquee--a { background: var(--orange); color: var(--ink); transform: rotate(-1.1deg); }
.marquee--b { background: var(--subtle); color: var(--cream); transform: rotate(0.7deg); margin-top: 1.1rem; }
.marquee__track {
  display: flex; align-items: center; gap: 1.25rem; width: max-content;
  font: 900 0.88rem/1 var(--sans); letter-spacing: -0.01em; text-transform: uppercase;
  animation: marquee 34s linear infinite;
}
.marquee--b .marquee__track { animation-duration: 44s; animation-direction: reverse; }
.marquee__track i { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: currentColor; flex: none; }
@keyframes marquee { from { translate: 0 0; } to { translate: -50% 0; } }

/* ── Countdown, as the other half of the ticket ──────────────────────── */

.countdown { background: var(--void); padding-block: clamp(3rem, 7vw, 4.5rem); }
.countdown__stack { display: grid; gap: 1.35rem; }
.countdown__inner {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem 2rem;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--r);
  box-shadow: var(--pop); padding: clamp(1.25rem, 3vw, 1.9rem);
  transform: rotate(-0.5deg);
}
.countdown__inner--deadline { background: var(--night); transform: rotate(0.5deg); }
.countdown__eyebrow {
  width: max-content; margin: 0 0 0.45rem !important; padding: 0.28rem 0.5rem;
  color: var(--ink) !important; background: var(--gold); border: 2px solid var(--line); border-radius: 999px;
  font: 800 0.65rem/1 var(--mono) !important; letter-spacing: 0.08em; text-transform: uppercase;
}
.countdown__inner--deadline .countdown__eyebrow { background: var(--orange); }
.countdown__label h2 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.countdown__label p { margin: 0.35rem 0 0; font: 600 0.8rem/1.4 var(--mono); color: var(--muted); }

.clock { display: flex; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.clock li {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  min-width: 4.3rem; padding: 0.7rem 0.5rem;
  background: var(--void); border: 2px solid var(--line); border-radius: var(--r);
}
.clock b {
  font: 800 1.7rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--gold);
  display: block;
}
/* Digits flick over rather than swapping silently. */
.clock b.is-tick { animation: tick 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes tick { from { transform: translateY(-45%); opacity: 0; } to { transform: none; opacity: 1; } }
.clock span { font: 700 0.72rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.clock.is-done b { color: var(--muted); }

@media (max-width: 520px) { .clock { width: 100%; } .clock li { min-width: 0; flex: 1; padding: 0.6rem 0.25rem; } .clock b { font-size: 1.3rem; } }

/* ── Chiang Mai poster ──────────────────────────────────────────────── */

.poster-section {
  position: relative; overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  background: var(--night); border-top: 2px solid var(--line);
}
.poster-feature {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.78fr);
  align-items: center; gap: clamp(2rem, 6vw, 5rem);
}
.poster-frame { margin: 0; transform: rotate(-0.45deg); }
.poster-frame a { display: block; border-radius: var(--r); }
.poster-frame img {
  display: block; width: 100%; height: auto;
  border: 2px solid var(--line); border-radius: var(--r); box-shadow: var(--pop);
}
.poster-frame figcaption {
  width: max-content; max-width: calc(100% - 1rem); margin: 1rem auto 0; padding: 0.45rem 0.7rem;
  background: var(--void); border: 2px solid var(--line); border-radius: 999px;
  color: var(--muted); font: 700 0.68rem/1.35 var(--mono); letter-spacing: 0.05em; text-align: center;
}
.poster-copy { max-width: 32rem; }
.poster-copy .h2 { max-width: 11ch; }
.poster-actions { margin-top: 1.6rem; }

@media (max-width: 820px) {
  .poster-feature { grid-template-columns: minmax(0, 1fr); }
  .poster-frame { width: min(100%, 38rem); margin-inline: auto; }
  .poster-copy { max-width: 42rem; }
  .poster-copy .h2 { max-width: none; }
}

/* ── Sections ────────────────────────────────────────────────────────── */

.section { padding-block: clamp(3.5rem, 9vw, 6.5rem); background: var(--night); position: relative; }
.section--alt { background: var(--void); }
.section, .final, .countdown { scroll-margin-top: 5rem; }

.kicker {
  display: inline-block;
  font: 800 0.78rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); background: var(--orange); border: 2px solid var(--ink); border-radius: 3px;
  padding: 0.3rem 0.5rem; margin: 0 0 1rem; transform: rotate(-1.5deg);
}
.h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); margin-bottom: 0.85rem; }
.section__lede { color: var(--muted); max-width: 54ch; margin: 0 0 2.5rem; font-size: 1.02rem; }

.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* About: deliberately uneven — the middle card drops, the outer two tilt. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); gap: 1.75rem 1.5rem; align-items: start; }
.card { position: relative; padding: 2.25rem 1.5rem 1.5rem; }
.card__num {
  position: absolute; top: -1rem; left: 1.25rem;
  font: 900 0.85rem/1 var(--mono); color: var(--ink); background: var(--gold);
  border: 2px solid var(--ink); border-radius: 4px; padding: 0.3rem 0.45rem;
  transform: rotate(-4deg);
}
.card h3 { font-size: 1.35rem; margin: 0 0 0.6rem; }
/* Shippy perches over this card's top-right corner — keep the title clear. */
.card:has(.card__shippy) h3 { padding-inline-end: 4.5rem; }
.card p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.card__link {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1rem;
  font: 700 0.85rem/1 var(--mono); color: var(--gold); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.card__link:hover { border-bottom-color: var(--gold); }
/* Shippy perches on the card's top-right. The extra top margin on .cards is
   what keeps him clear of the section heading's descenders. */
.card__shippy { position: absolute; right: -1.25rem; top: -3rem; width: 6rem; transform: rotate(9deg); filter: drop-shadow(4px 5px 0 rgba(7, 5, 14, 0.35)); }
/* On phones the card fills the viewport, so a negative right offset here is
   the whole page's horizontal scrollbar. Tuck him back inside. */
@media (max-width: 640px) { .card__shippy { right: 0.25rem; top: -2.5rem; width: 5rem; } }
.h2 + .cards { margin-top: 4rem; }
@media (min-width: 62rem) { .cards > :nth-child(2) { margin-top: 2.25rem; } }

/* The day: a dashed route that draws itself as you scroll past. */
.timeline-wrap { position: relative; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 5.4rem; display: grid; gap: 1.5rem; }
.timeline__route { position: absolute; left: 2.2rem; top: 0.5rem; height: calc(100% - 1rem); width: 2px; overflow: hidden; }
.timeline__route line { stroke: var(--line); stroke-width: 2; stroke-dasharray: 7 7; stroke-dashoffset: 900; }
.timeline__route line.is-drawn { animation: draw 1.6s ease forwards; }
@keyframes draw { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
.timeline li { position: relative; padding-inline-end: 5.5rem; }
.timeline__art {
  position: absolute; right: 0; top: -0.25rem;
  width: 4.25rem; height: 4.25rem; object-fit: contain;
}
@media (max-width: 720px) { .timeline li { padding-inline-end: 0; } .timeline__art { display: none; } }
.timeline__t {
  position: absolute; left: -5.4rem; top: 0;
  min-width: 4.4rem; height: 1.9rem; padding: 0 0.4rem; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--orange); color: var(--orange);
  font: 800 0.78rem/1 var(--mono);
  box-shadow: 3px 3px 0 0 rgba(7, 5, 14, 0.34);
  white-space: nowrap;
}
.timeline h3 { font-size: 1.12rem; margin-bottom: 0.35rem; }
.timeline p { margin: 0; color: var(--muted); font-size: 0.95rem; max-width: 62ch; }

/* Who: scattered chips, each hung at its own angle. */
.who { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
/* Mascot poses. These are decoration and must never land on a word, so the
   ones that sit in a gutter get an explicit text max-width to clear (below),
   and this one just sits in normal flow under the copy. */
.who__art {
  display: block; width: clamp(7rem, 13vw, 10.5rem); margin: 1.75rem 0 0;
  filter: drop-shadow(6px 7px 0 rgba(7, 5, 14, 0.34));
}
#students { position: relative; }
.students__art {
  position: absolute; right: 3%; top: 14%; width: clamp(7rem, 13vw, 11.5rem);
  filter: drop-shadow(6px 7px 0 rgba(7, 5, 14, 0.34));
  transform: rotate(4deg);
}
#chiangmai { position: relative; overflow: hidden; }
.cm__art {
  position: absolute; right: 2%; top: 8%; width: clamp(7rem, 12vw, 10.5rem);
  filter: drop-shadow(6px 7px 0 rgba(7, 5, 14, 0.34)); transform: rotate(-5deg);
}
.final__peek {
  position: absolute; left: -1.5rem; bottom: -1rem; width: clamp(6.5rem, 11vw, 9.5rem);
  filter: drop-shadow(6px 7px 0 rgba(7, 5, 14, 0.3)); pointer-events: none;
}
/* Where a pose sits in the right-hand gutter, the heading and lede beside it
   get a max-width so long lines cannot run underneath the artwork. */
@media (min-width: 1081px) {
  #students .h2, #students .section__lede,
  #chiangmai .h2, #chiangmai .section__lede { max-width: 60%; }
}

/* Mascot art is decoration; below this width the columns need the room and
   the art would sit on top of the copy. .who__art is in normal flow so it
   survives — the gutter-positioned ones do not. */
@media (max-width: 1080px) {
  .students__art, .cm__art, .final__peek { display: none; }
}
.who .section__lede { margin-bottom: 0; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.chips li {
  padding: 0.9rem 1.15rem; font-size: 0.96rem; font-weight: 600;
  border-inline-start: 6px solid var(--chip, var(--orange));
}
.chips li:nth-child(odd) { transform: rotate(-1.1deg); margin-inline-end: 1.5rem; }
.chips li:nth-child(even) { transform: rotate(0.9deg); margin-inline-start: 1.5rem; }
.chips li::before {
  content: "→"; color: var(--chip, var(--orange));
  font-family: var(--mono); font-weight: 700; margin-inline-end: 0.6rem;
}
/* One hue per audience, mirroring how dekport.com colour-codes categories. */
.chips li:nth-child(1) { --chip: var(--dp-compete); }
.chips li:nth-child(2) { --chip: var(--dp-work); }
.chips li:nth-child(3) { --chip: var(--dp-camp); }
.chips li:nth-child(4) { --chip: var(--dp-intern); }
.chips li:nth-child(5) { --chip: var(--dp-act); }
/* .sticker-hover recolours every edge on hover; keep the category edge its
   own hue and let the other three go orange. */
.chips li:hover { border-inline-start-color: var(--chip, var(--orange)); }
@media (max-width: 820px) { .who { grid-template-columns: 1fr; } .chips li { margin-inline: 0 !important; } }

/* Perks */
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 1.5rem; }
.perk { padding: 1.5rem 1.35rem; }
.perk:nth-child(odd) { transform: rotate(-1deg); }
.perk:nth-child(even) { transform: rotate(0.8deg); }
/* Generated sticker art. It already carries its own cream outline, so it sits
   directly on the card with no frame — a border here would double up. */
.perk__art { width: 4.5rem; height: 4.5rem; object-fit: contain; margin-bottom: 0.9rem; }
.card--icon .card__art { width: 5rem; height: 5rem; object-fit: contain; margin-bottom: 1rem; }
.card--icon { padding-top: 1.75rem; }
.perk h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.perk p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* FAQ */
.faq { display: grid; gap: 0.85rem; max-width: 52rem; }
.faq details { overflow: hidden; }
.faq details:nth-child(even) { transform: rotate(0.5deg); }
.faq details:nth-child(odd) { transform: rotate(-0.4deg); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 1.25rem;
  font-weight: 800; font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--mono); font-weight: 800; color: var(--ink);
  background: var(--orange); border: 2px solid var(--ink); border-radius: 3px;
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  font-size: 1rem; line-height: 1; flex: none; transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 1.25rem 1.25rem; color: var(--muted); font-size: 0.95rem; }

/* ── Final CTA ───────────────────────────────────────────────────────── */

.final { background: var(--night); border-top: 2px solid var(--line); padding-block: clamp(3.5rem, 9vw, 6rem); position: relative; overflow: hidden; }
.final__inner { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 2; }
.final .section__lede { margin-bottom: 2rem; }
.final__shippy {
  position: absolute; right: clamp(-3rem, -2vw, 0rem); bottom: -1.5rem; width: clamp(8rem, 16vw, 13rem);
  transform: rotate(-8deg); opacity: 0.9; z-index: 1; pointer-events: none;
  filter: drop-shadow(8px 8px 0 rgba(7, 5, 14, 0.3));
}
@media (max-width: 860px) { .final__shippy { display: none; } }

.signup { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; width: 100%; max-width: 31rem; }
.signup input {
  flex: 1 1 14rem; min-width: 0;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--r);
  color: var(--cream); font: 600 0.95rem/1 var(--sans); padding: 0.9rem 1rem;
  box-shadow: 4px 4px 0 0 rgba(7, 5, 14, 0.34);
}
.signup input::placeholder { color: var(--muted); opacity: 0.6; }
.signup input:focus { border-color: var(--orange); outline: none; }
.signup input[aria-invalid="true"] { border-color: var(--gold); }
.signup__note { font-size: 0.82rem; color: var(--muted); margin: 1rem 0 1.5rem; min-height: 1.2em; }
.signup__note.is-ok { color: var(--gold); font-weight: 700; }

/* ── Footer ──────────────────────────────────────────────────────────── */

.foot { background: var(--void); border-top: 2px solid var(--line); padding-block: 2.5rem; }
.foot__inner { display: grid; gap: 1.25rem; }
.foot__brand { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.foot__brand img { width: 1.6rem; height: 1.6rem; border-radius: 5px; flex: none; }
.foot__brand p { margin: 0; font-size: 0.88rem; color: var(--muted); }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.foot__links a { font-size: 0.85rem; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.foot__links a:hover { color: var(--cream); border-bottom-color: var(--orange); }
.foot__seo { margin: 0; font-size: 0.78rem; color: var(--muted); opacity: 0.8; max-width: 74ch; line-height: 1.7; }
.foot__legal { margin: 0; font-size: 0.8rem; color: var(--muted); opacity: 0.65; max-width: 70ch; }

/* ── Motion preferences ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hilite::after { transform: scaleX(1); }
  .timeline__route line { stroke-dashoffset: 0; }
}


/* Full timetable: plain text so crawlers and screen readers get the schedule,
   not just the four illustrated highlights above it. */
.timetable__h {
  margin: clamp(2rem, 4vw, 3rem) 0 1rem;
  font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase;
  color: var(--gold);
}
.timetable { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; max-width: 46rem; }
.timetable li {
  display: grid; grid-template-columns: 4.6rem 1fr; gap: .9rem;
  align-items: baseline; padding: .55rem .6rem;
  border-bottom: 1px dashed var(--line);
}
.timetable li:last-child { border-bottom: 0; }
.timetable__t { font: 800 .85rem/1.4 var(--mono); color: var(--orange); }
.timetable li span + span { color: var(--muted); font-size: .95rem; }

/* Ticket stub: replaces the Luma iframe with something on-brand. */
.ticket {
  max-width: 30rem; margin: 0 auto; padding: 1.4rem 1.5rem 1.5rem;
  background: var(--surface); text-align: left;
}
.ticket__facts { margin: 0 0 1.2rem; display: grid; gap: .75rem; }
.ticket__facts div {
  display: grid; grid-template-columns: 5.2rem 1fr; gap: .8rem; align-items: baseline;
}
.ticket__facts dt {
  font: 800 .7rem/1.4 var(--mono); text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}
.ticket__facts dd { margin: 0; display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }
.ticket__facts b { font-size: 1.05rem; }
.ticket__facts span { color: var(--muted); font-size: .9rem; }
.ticket__cta { display: block; width: 100%; text-align: center; }
.ticket__note { margin: .85rem 0 0; color: var(--muted); font-size: .85rem; text-align: center; }

@media (max-width: 34rem) {
  .timeline { padding-left: 4.6rem; }
  .timeline__route { left: 1.9rem; }
  .timeline__t { left: -4.6rem; min-width: 3.9rem; font-size: .72rem; }
  .timetable li { grid-template-columns: 3.9rem 1fr; gap: .6rem; }
}