/* ------------------------------------------------------------------
   MONDO CLUB V3 — HONG KONG — 02.11.2026
   split-panel poster: orange info panel / heart-pattern art panel
   type: Ocean Sans (clean layer) / Terminal Grotesque (V3 accent)
         system mono (terminal links + small print)
------------------------------------------------------------------- */

@font-face {
  font-family: "Terminal Grotesque";
  src: url("fonts/terminal-grotesque-webfont.woff2") format("woff2"),
       url("fonts/terminal-grotesque-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Ocean Sans";
  src: url("fonts/oceansansstd-semiboldext.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

:root {
  --orange: #ff7006;
  --black: #000;
  --white: #fff;
  --blue: #cde0f5;
  --display: "Terminal Grotesque", "Arial Black", sans-serif;
  --clean: "Ocean Sans", "Futura", "Century Gothic", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", monospace;
  --pad: clamp(24px, 3vw, 56px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

html { scroll-behavior: smooth; }

body {
  background: var(--orange);
  color: var(--black);
  font-family: var(--clean);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--blue); color: var(--black); }

a { color: inherit; }

a:focus-visible {
  outline: 3px dashed var(--black);
  outline-offset: 4px;
}

.mono {
  font-family: var(--mono);
  letter-spacing: 0.12em;
  font-weight: 500;
}

/* ------------------------------------------------------------ site */

.site {
  display: grid;
  grid-template-columns: 52% 48%;
  min-height: 100svh;
}

.panel { position: relative; }

/* ------------------------------------------------- left info panel */

.panel--info {
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  background: var(--orange);
}

/* brand row */

.brand {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 44px);
}

.brand__mark {
  width: clamp(96px, 9vw, 160px);
  height: auto;
}

.brand__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
  font-size: clamp(13px, 0.95vw, 16px);
}

/* terminal-style links */

.link {
  text-decoration: none;
  width: fit-content;
  transition: translate 0.18s ease;
}

.link:hover, .link:focus-visible {
  translate: 5px 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* event block — vertically centered between brand and fine print */

.event {
  margin-top: auto;
  margin-bottom: auto;
  padding: clamp(28px, 5vh, 72px) 0;
}

/* one lockup: wordmark + city + date, tied by a hairline rule */

.event__lockup {
  border-left: 1px solid var(--black);
  padding-left: clamp(16px, 1.6vw, 30px);
}

.wordmark {
  font-family: var(--clean);
  color: var(--white);
  font-size: clamp(34px, 4vw, 74px);
  line-height: 1;
}

.wordmark__v2 {
  font-family: var(--display);
  color: var(--black);
  font-size: 1.12em;
}

.event__title {
  font-family: var(--clean);
  font-weight: 600;
  color: var(--black);
  font-size: clamp(44px, 5.2vw, 100px);
  line-height: 1.06;
  letter-spacing: 0.01em;
  margin-top: clamp(10px, 1.8vh, 22px);
}

/* sticker CTA — pasted label, hard shadow, slight tilt */

.cta {
  display: inline-block;
  margin-top: clamp(32px, 5vh, 64px);
  margin-left: clamp(16px, 1.6vw, 30px);
  font-size: clamp(16px, 1.2vw, 22px);
  color: var(--black);
  background: var(--blue);
  border: 1px solid var(--black);
  box-shadow: 6px 6px 0 var(--black);
  rotate: -2deg;
  padding: 1em 1.35em;
  text-decoration: none;
  transition: rotate 0.15s ease, scale 0.15s ease, box-shadow 0.15s ease;
}

.cta:hover, .cta:focus-visible {
  rotate: -0.5deg;
  scale: 1.02;
  box-shadow: 9px 8px 0 var(--black);
}

/* small print */

.fine {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: clamp(11px, 0.82vw, 14px);
  border-top: 1px solid var(--black);
  padding-top: clamp(14px, 1.8vh, 22px);
}

.fine__sponsor a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: background 0.18s ease;
}

.fine__sponsor a:hover { background: var(--blue); }

.fine__links .link { display: inline-block; }

/* ------------------------------------------------ right art panel */

.panel--art {
  overflow: clip;
  background-color: var(--orange);
  background-image: url("assets/heart-globe-blue.svg"),
                    url("assets/heart-globe-blue.svg");
  background-size: clamp(124px, 11.6vw, 208px) clamp(124px, 11.6vw, 208px);
  background-position: 0 0,
                       calc(clamp(124px, 11.6vw, 208px) / 2) calc(clamp(124px, 11.6vw, 208px) / 2);
  border-left: 1px solid var(--black);
}

.art__globe {
  position: absolute;
  width: clamp(420px, 40vw, 780px);
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  animation: globe-spin 90s linear infinite;
  user-select: none;
}

@keyframes globe-spin {
  to { rotate: 1turn; }
}

.art__motto {
  position: absolute;
  right: clamp(20px, 2.4vw, 44px);
  top: clamp(18px, 2.2vw, 40px);
  height: clamp(52px, 5vw, 88px);
  width: auto;
  background: var(--orange);
  padding: clamp(8px, 0.8vw, 14px);
}

/* ------------------------------------------- previous events: archive */

.past {
  background: var(--black);
  color: var(--white);
  padding: clamp(56px, 9vh, 120px) var(--pad) clamp(48px, 7vh, 96px);
}

.past__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: clamp(18px, 2.6vh, 32px);
}

.past__title {
  font-family: var(--display);
  font-weight: normal;
  color: var(--white);
  font-size: clamp(34px, 3.6vw, 68px);
  letter-spacing: 0.01em;
  line-height: 1;
}

.past__label {
  font-size: clamp(11px, 0.82vw, 14px);
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.past__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* archive card — plain youtube embed + editorial meta */

.card {
  display: block;
  color: var(--white);
  padding: clamp(32px, 4.6vh, 56px) 0 clamp(36px, 5vh, 60px);
}

.card:first-child { padding-right: clamp(24px, 2.6vw, 52px); }

.card + .card {
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  padding-left: clamp(24px, 2.6vw, 52px);
}

.card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--blue);
  background: var(--black);
}

.card__media:focus-visible {
  outline: 3px dashed var(--white);
  outline-offset: 6px;
}

/* card meta — index / artist / venue on the shared gutter */

.card__meta { display: block; margin-top: clamp(16px, 2.4vh, 26px); }

.card__id {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1vw, 18px);
}

.card__index {
  font-size: clamp(11px, 0.82vw, 14px);
  color: rgba(255, 255, 255, 0.6);
}

.card__artist {
  font-family: var(--display);
  font-size: clamp(26px, 2.4vw, 44px);
  line-height: 1;
}

.card__venue {
  display: block;
  margin-top: clamp(10px, 1.4vh, 16px);
  font-size: clamp(11px, 0.82vw, 14px);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.6);
}

.past__foot {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: clamp(16px, 2.2vh, 26px);
  font-size: clamp(11px, 0.82vw, 14px);
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
}

/* ---------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------- mobile */

@media (max-width: 760px) {

  .site {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(68svh, auto) minmax(32svh, auto);
  }

  .panel--info { padding: 20px 18px 28px; }

  .brand__mark { width: 92px; }

  .brand__links { font-size: 12px; gap: 8px; }

  .event { padding: 40px 0; }

  .event__lockup { padding-left: 14px; }

  .wordmark { font-size: 10vw; }

  .event__title { font-size: 12vw; margin-top: 12px; }

  .cta { margin-top: 36px; margin-left: 14px; font-size: 15px; }

  .fine { font-size: 10px; gap: 12px; padding-top: 14px; }

  .panel--art {
    border-left: none;
    border-top: 1px solid var(--black);
    background-size: 118px 118px;
    background-position: 0 0, 59px 59px;
    min-height: 32svh;
  }

  .art__globe {
    width: 110vw;
    left: 50%;
    top: 55%;
    translate: -50% -50%;
  }

  .art__motto { height: 36px; }

  .past { padding: 48px 18px 56px; }

  .past__head { padding-bottom: 16px; }

  .past__title { font-size: 8.4vw; }

  .past__label { font-size: 10px; }

  .past__grid { grid-template-columns: 1fr; }

  .card { padding: 28px 0 32px; }

  .card:first-child { padding-right: 0; }

  .card + .card {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: 0;
  }

  .card__artist { font-size: 26px; }

  .card__index, .card__venue { font-size: 10px; }

  .past__foot { padding-top: 14px; font-size: 10px; }
}