/* ============================================================
   Vienna EUDC 2027 — shared stylesheet for content pages
   (Contact, Partners, Tournament, Personnel + Person pop-up)

   Component-based 1:1 rebuild of the Figma desktop frames
   (all 1700px wide). Reusable blocks (nav, title bar, contact
   form, person card, package column, footer, …) are positioned
   on a fixed 1700px .stage by their exact Figma coordinates.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Metropolis"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/metropolis-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Metropolis"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/metropolis-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Metropolis"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/metropolis-600-normal.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --maroon:   #360d02;
  --gold:     #ab8028;
  --gold-dim: #754400;
  --magenta:  #630033;
  --darkred:  #631c00;
  --grey:     #c4c4c4;
  --purple:   #2a0a2e;   /* Adjudication-core tab background */

  --shadow-card:  12px 12px 12px -5px rgba(20, 20, 20, .5);
  --shadow-photo: 12px 12px 12px -5px rgba(28,  6, 0, .5);
  --shadow-field: inset 7px 10px 11.9px rgba(0, 0, 0, .25);
}

/* ---------- Reset & stage ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; overflow-y: scroll; }   /* x-hidden clips the gold lines' bleed into the side margins; y-scroll keeps a stable gutter */
html, body { background: var(--maroon); font-family: "Metropolis", system-ui, sans-serif; }

.scale-wrap { width: 1700px; margin: 0 auto; transform-origin: top left; }
.stage {
  position: relative;
  width: 1700px;
  background: var(--maroon);   /* page may override via .theme-* */
  overflow: visible;   /* let the gold lines bleed into the side margins on wide screens; html{overflow-x:hidden} clips the page */
}
.stage > * { position: absolute; }

/* Section wrappers (mobile grids): on desktop they generate no box at all,
   so their children keep their exact stage coordinates; the mobile media
   query turns them into flow/grid containers. */
.sec { display: contents; }

.theme-purple { background: var(--purple); }

/* ============================================================
   NAV  (content pages — even 219px tab slots, active = gold box)
   ============================================================ */
/* 134×139 native size at left:111 → gold crest fills 118→238, touching the line */
.logo  { left: 111px; top: 35px; width: 134px; height: 139px; z-index: 6;
  display: block; filter: drop-shadow(0 12px 9px rgba(20, 20, 20, .45)); }
.logo img { width: 100%; height: 100%; display: block; }
.nav-line { left: 238px; top: 94.5px; width: 1462px; height: 5px; background: var(--gold); z-index: 6; }

.ntab {
  position: absolute; top: 41px; height: 56px; width: 204px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 20px; line-height: 20px;
  color: var(--gold); text-decoration: none; white-space: nowrap; z-index: 6;
}
.ntab.dim    { color: var(--gold-dim); }   /* dimmed but clickable → coming-soon.html */
.ntab.active { background: var(--gold); color: var(--maroon); }
/* six even 204px slots fill 238→1462 (the content right edge) so the last tab
   is flush with the page content; the gold lines bleed on past to the edge */
.ntab1 { left: 238px; }
.ntab2 { left: 442px; }
.ntab3 { left: 646px; }
.ntab4 { left: 850px; }
.ntab5 { left: 1054px; }
.ntab6 { left: 1258px; }

/* Fixed header: lives outside the scaled stage, so the browser pins it on the
   compositor thread (no scroll jitter from JS translation) and the bar +
   shadow span the full viewport width on screens wider than the 1700px stage.
   scale.js sets the bar height to 95×scale and scales/centres .nav-inner to
   line up with the stage. */
.site-nav { position: fixed; top: 0; left: 0; right: 0; height: 95px;
  background: var(--maroon); box-shadow: var(--shadow-card); z-index: 50; }
.site-nav .nav-inner { position: absolute; left: 0; top: 0; width: 1700px;
  transform-origin: top left; }
.site-nav .nav-inner > * { position: absolute; }
/* Full-viewport gold nav line on the (full-width, unclipped) fixed bar, so it
   reaches the screen's right edge and seamlessly extends the in-stage .nav-line.
   Fallbacks (scale 1 / nav-off 0) keep it correct before scale.js runs. */
.site-nav::after {
  content: ""; position: absolute; z-index: 6;
  left: calc(var(--nav-off, 0px) + 238px * var(--scale, 1)); right: 0;
  top: calc(94.5px * var(--scale, 1)); height: calc(5px * var(--scale, 1));
  background: var(--gold);
}

/* Mobile-only header elements (wordmark logo, meatball menu button) and the
   menu overlay: present in the markup of mobile-ready pages, dormant on
   desktop. Styled in the MOBILE section at the end of this file. */
.logo-m, .mnav-btn, .pkg-tabs { display: none; }
.mnav { display: none; }
/* Contact: the mobile-only contacts block is dormant on desktop; the desktop
   table wrapper is transparent so its children keep their stage coordinates. */
.contacts-m { display: none; }
.contacts-d { display: contents; }

/* pin.js translates the personnel sub-tab bar on scroll so it sticks just
   below the fixed nav once scrolled past. */
.subtab-bar { position: absolute; left: 0; width: 1700px; height: 59px; z-index: 40;
  will-change: transform; }
.subtab-bar > * { position: absolute; }

/* ============================================================
   TITLE BAR  (section heading + full-width gold divider)
   ============================================================ */
.titlebar {
  position: absolute; left: 238px; width: 1462px; height: 32px;
}
.titlebar .tt {
  position: absolute; left: 0; top: 0;
  color: var(--gold); font-size: 24px; line-height: 24px; font-weight: 400;
  text-transform: uppercase; white-space: nowrap;
}
.titlebar .tt-right {
  position: absolute; right: 0; top: 2px;
  color: var(--gold); font-size: 20px; line-height: 20px; font-weight: 400;
  text-decoration: none; white-space: nowrap;
}
/* Gold divider runs from the title's left edge to the viewport's right edge
   (1462px + the side margin scale.js publishes as --nav-off). */
.titlebar::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: calc(1462px + var(--nav-off, 0px)); height: 3px; background: var(--gold);
}

/* Language toggle — right-aligned to the inner title column (x1462).
   lang.js moves .active between the two links. */
.lang { position: absolute; left: 1366px; top: 155px; width: 96px; height: 32px;
  font-weight: 600; font-size: 20px; }
.lang a {
  position: absolute; top: 0; width: 48px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-dim); text-decoration: none;
}
.lang .de { left: 0; }
.lang .en { left: 48px; }
.lang a.active { background: var(--gold); color: var(--maroon); }

/* ============================================================
   CONTACT FORM  (reusable block, 1462×380)
   ============================================================ */
.cform { position: absolute; left: 238px; width: 1462px; height: 380px; }
.cform .field {
  position: absolute;
  background: var(--maroon); border: 2px solid var(--gold);
  box-shadow: var(--shadow-field);
  color: var(--gold); font-family: inherit; font-size: 20px; line-height: 20px;
  font-weight: 400; padding: 0 16px; resize: none; outline: none;
}
.cform .field::placeholder { color: var(--gold-dim); opacity: 1; }
.cf-name    { left: 0;    top: 68px;  width: 600px; height: 60px; }
.cf-company { left: 0;    top: 148px; width: 600px; height: 60px; }
.cf-email   { left: 0;    top: 228px; width: 600px; height: 60px; }
.cf-message { left: 624px; top: 68px; width: 600px; height: 220px; padding: 20px 16px !important; }
.cf-send {
  position: absolute; left: 1040px; top: 312px; width: 184px; height: 68px;
  background: var(--darkred); border: none; box-shadow: var(--shadow-card);
  cursor: pointer; font-family: inherit;
}
.cf-send .inner {
  position: absolute; inset: 6px; border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 24px; line-height: 24px;
  font-weight: 400; text-transform: uppercase;
}
.cf-send:disabled { cursor: default; opacity: .6; }
/* form wrapper must not affect layout */
.cform form { display: contents; }

/* Honeypot — off-screen, out of tab order, but bots fill it. */
.cform .hp-field { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }
/* GDPR consent + inline status sit in the empty zone left of Send. */
/* top-aligned with Send (both start at top:312) → checkbox top meets the button
   top, per Figma 115:3229; the 24px box keeps the label centred on the checkbox. */
.cform .field-consent {
  position: absolute; left: 0; top: 312px; width: 1000px; height: 24px; pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  color: var(--gold-dim); font-size: 18px; line-height: 22px; cursor: pointer;
}
/* custom gold checkbox (no harsh white default): gold border, gold fill + maroon
   check when ticked — matches Figma (#ab8028 box, #360d02 glyph). */
.cform .field-consent input {
  flex: none; width: 24px; height: 24px; margin: 0; position: relative;
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 2px solid var(--gold); cursor: pointer;
}
.cform .field-consent input:checked { background: var(--gold); }
.cform .field-consent input:checked::after {
  content: ""; position: absolute; left: 7px; top: 2px; width: 6px; height: 12px;
  border: solid var(--maroon); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.cform .field-consent input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cform .form-status {
  position: absolute; left: 0; top: 388px; width: 1000px; pointer-events: auto;
  margin: 0; min-height: 22px; color: var(--gold); font-size: 18px; line-height: 22px;
}
.cform .form-status.is-error   { color: #ff9b9b; }
.cform .form-status.is-success { color: var(--gold); }

/* ============================================================
   ORGANISING-TEAMS TABLE (Contact page)
   ============================================================ */
.oteams { position: absolute; left: 238px; width: 1462px; }
.oteams .col {
  position: absolute; width: 392px;
  white-space: pre-line; font-size: 24px; line-height: 36px; color: var(--gold);
}
.oteams .col1 { left: 0;    top: 71px; font-weight: 500; }
.oteams .col2 { left: 416px; top: 71px; font-weight: 500; }
.oteams .col3 { left: 832px; top: 71px; font-weight: 500; }
.oteams .col3 a { color: var(--gold); text-decoration: none; }
.oteams .row-line { position: absolute; left: 0; width: calc(1462px + var(--nav-off, 0px)); height: 1px; background: var(--gold); }

/* ============================================================
   PARTNERS — intro, photos, package columns
   ============================================================ */
.intro-text {
  position: absolute; left: 238px; top: 239px; width: 600px;
  color: var(--gold); font-size: 20px; line-height: 24px; font-weight: 400;
  white-space: pre-line;
}
/* The gold frame is baked into the PNGs (like the home about-photos), so we add
   only a shadow here — a CSS border on top would double it (the maroon gap between
   the two read as a brown line down the middle). */
.pphoto {
  position: absolute; top: 239px; width: 288px; height: 422px;
  object-fit: cover; box-shadow: var(--shadow-photo);
}
.pphoto-1 { left: 862px; }
.pphoto-2 { left: 1174px; }

/* closing paragraph below the packages */
.closing-text {
  position: absolute; left: 238px; width: 1224px;
  color: var(--gold); font-size: 20px; line-height: 24px; font-weight: 400;
  white-space: pre-line;
}

/* internals flow vertically (like mobile) so EN/DE copy can't overlap; the box
   auto-sizes and __reflow positions the closing from the tallest (Champion).
   padding-top clears the absolute header; label margins set the rhythm. */
.pkg { position: absolute; top: 799px; height: auto; padding: 98px 8px 20px 15px; }
.pkg.green   { background: #013e26; }
.pkg.blue    { background: #00294f; }
.pkg.magenta { background: #620033; }
/* class names kept as tier-1/2/3 ids; visible labels are Master/Finalist/Champion */
.pkg-silver   { left: 238px;  width: 391px; }
.pkg-gold     { left: 653px;  width: 392px; }
.pkg-platinum { left: 1069px; width: 392px; }

.pkg .hdr {
  position: absolute; left: 8px; top: 8px; width: 375px; height: 82px;
  border: 2px solid var(--gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--gold); font-weight: 500; font-size: 24px; line-height: 32px; text-align: center;
}
.pkg-gold .hdr, .pkg-platinum .hdr { width: 376px; }
.pkg .lbl {
  position: static; display: block; margin-top: 24px;
  color: var(--gold); font-weight: 500; font-size: 20px; line-height: 20px;
  white-space: nowrap;
}
/* margin-left 15 + bullet at -15 aligns the bullet under the label text; the 8px
   right margin keeps the text from reaching the golden rectangle's right edge
   (~8px gutter inside it, mirroring the left), per client feedback. */
.pkg ul {
  position: static; list-style: none; width: auto; margin: 14px 8px 0 15px;
  color: var(--gold); font-weight: 500; font-size: 16px; line-height: 20px;
}
.pkg ul li { position: relative; padding-left: 0; margin-bottom: 8px; }
.pkg ul li:last-child { margin-bottom: 0; }
.pkg ul li::before {
  content: ""; position: absolute; left: -15px; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}

/* ============================================================
   TOURNAMENT — schedule, fees, person cards, bid documents
   ============================================================ */
/* right-aligned title-bar link ("Meet the rest ›", "View all documents ›") */
.info-right { position: absolute; color: var(--gold); font-size: 20px; line-height: 20px;
  font-weight: 400; text-decoration: none; text-align: right; }

/* Schedule */
.sday { position: absolute; top: 222px; width: 184px; }
.sday .day  { position: absolute; top: 0;  left: 0; width: 184px; color: var(--gold);
  font-size: 20px; line-height: 20px; text-transform: uppercase; white-space: nowrap; }
.sday .sline{ position: absolute; top: 30px; left: 0; width: 184px; height: 1px; background: var(--gold); }
.sday .sitem{ position: absolute; top: 46px; left: 0; width: 184px; color: var(--gold);
  font-size: 16px; line-height: 16px; white-space: pre-line; }

/* Fees & funds — one .fee-group per table: header + label/value rows.
   Desktop re-creates the Figma column layout exactly (rows at 36px line
   pitch, value column at +208); mobile stacks the groups as mini-tables. */
.fee-group { position: absolute; width: 392px; height: 135px; }
.fee-group.fee-wide { width: 630px; }
.fee-hd { position: absolute; left: 0; top: 0; color: var(--gold);
  font-size: 24px; line-height: 36px; white-space: nowrap; }
.fee-row { position: absolute; left: 0; width: 100%; color: var(--gold);
  font-size: 24px; line-height: 36px; }
.fee-row.r1 { top: 36px; }
.fee-row.r2 { top: 72px; }
.fee-row span:last-child { position: absolute; left: 208px; top: 0; }
.fee-line { position: absolute; left: 0; width: 100%; height: 1px; background: var(--gold); }
.fee-line.l1 { top: 27px; }
.fee-line.l2 { top: 63px; }
.fee-line.l3 { top: 99px; }

/* Person card */
/* Card internals flow vertically so any name length stays inside the card. */
.pcard { position: absolute; top: 710px; width: 184px; }
.pcard .photo { display: block; width: 184px; height: 184px;
  border: 2px solid var(--gold); object-fit: cover; }
.pcard .photo.ph { background: var(--grey); }
.pcard .pname { margin-top: 24px; width: 184px; color: var(--gold);
  font-size: 24px; line-height: 24px; text-transform: uppercase;
  min-height: 48px; overflow-wrap: anywhere; }
.pcard .pdiv  { margin-top: 8px; width: 184px; height: 1px; background: var(--gold); }
.pcard .prole { margin-top: 15px; width: 184px; color: var(--gold);
  font-size: 20px; line-height: 20px; }

/* Bid-document box */
.docbox { position: absolute; top: 1156px; width: 184px; height: 120px;
  background: var(--darkred); box-shadow: var(--shadow-card); text-decoration: none; }
.docbox .inner { position: absolute; inset: 6px; border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--gold); font-size: 20px; line-height: 24px; text-transform: uppercase; }
.docdate { position: absolute; top: 1288px; width: 172px; color: var(--gold);
  font-size: 16px; line-height: 16px; }

/* ============================================================
   PERSONNEL — tab panels, sub-tab bar, regional list, DCA boxes
   ============================================================ */
.ptab-panel { position: absolute; top: 0; left: 0; width: 1700px; display: none; }
.ptab-panel.active { display: block; }
.panel-org    { background: var(--maroon); }
.panel-cap    { background: #290b38; }
.panel-tab    { background: #1e213e; }
.panel-equity { background: #013e26; }

/* sub-tab bar (4 × 306px, active = gold box) on a maroon strip */
.subtabs { position: absolute; top: 0; left: 0; width: 1700px; height: 59px; background: var(--maroon); }
.subtab {
  position: absolute; top: 0; width: 306px; height: 59px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 20px; color: var(--gold);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.subtab.active { background: var(--gold); color: var(--maroon); }
.subtab1 { left: 238px; }
.subtab2 { left: 544px; }
.subtab3 { left: 850px; }
.subtab4 { left: 1156px; }

/* regional-advisors columns */
.regcol { position: absolute; top: 2584px; white-space: pre-line;
  color: var(--gold); font-size: 24px; line-height: 35px; }
.regcol.country { font-weight: 600; }
.regcol.name    { font-weight: 400; }

/* DCA selection boxes (Adjudication-core tab) */
.pbox { position: absolute; top: 1137px; width: 288px; height: 68px;
  background: var(--magenta); box-shadow: var(--shadow-card); text-decoration: none; }
.pbox.dim { background: #430023; box-shadow: none; }
.pbox .inner { position: absolute; inset: 6px; border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 20px; line-height: 28px; text-transform: uppercase; text-align: center; }
.pbox.dim .inner { border-color: #6b3e01; color: #6b3e01; }
.pdate { position: absolute; top: 1217px; width: 276px; color: var(--gold);
  font-size: 16px; line-height: 16px; }
.pdate.dim { color: #6b3e01; }
.cap-timeline { position: absolute; left: 238px; top: 1300px; width: 1252px; }
.note { position: absolute; color: var(--gold); font-size: 24px; line-height: 24px;
  text-transform: uppercase; }

/* ============================================================
   PERSON POP-UP (modal)
   ============================================================ */
/* Inert until the personnel page exists: no hand cursor, no dead clicks.
   The personnel rebuild will restore interactivity on its own cards. */
.pcard { cursor: default; pointer-events: none; }
.modal-overlay {
  position: absolute; top: 0; left: 0; width: 1700px; height: 100%;
  background: rgba(54, 13, 2, .7); display: none; z-index: 100;   /* above the pinned nav */
}
.modal-overlay.open { display: block; }
.modal { position: absolute; left: 370px; top: 292px; width: 960px; height: 621px; }
.modal .col-left {
  position: absolute; left: 0; top: 0; width: 336px; height: 621px;
  background: var(--magenta); border: 3px solid var(--gold);
}
.modal .col-right {
  position: absolute; left: 336px; top: 0; width: 624px; height: 621px;
  background: #290b38; border: 1px solid var(--gold);
}
.modal .m-photo { position: absolute; left: 24px; top: 24px; width: 288px; height: 288px;
  border: 2px solid var(--gold); object-fit: cover; }
.modal .m-name { position: absolute; left: 24px; top: 332px; width: 288px;
  color: var(--gold); font-size: 20px; line-height: 22px; text-transform: uppercase; }
.modal .m-div1 { position: absolute; left: 24px; top: 374px; width: 288px; height: 1px; background: var(--gold); }
.modal .m-role { position: absolute; left: 24px; top: 388px; width: 288px;
  color: var(--gold); font-size: 16px; line-height: 16px; }
.modal .m-div2 { position: absolute; left: 24px; top: 420px; width: 288px; height: 1px; background: var(--gold); }
.modal .m-ach  { position: absolute; left: 24px; top: 436px; width: 288px;
  color: var(--gold); font-size: 16px; line-height: 18px; white-space: pre-line; }
.modal .m-bio  { position: absolute; left: 360px; top: 36px; width: 576px;
  max-height: 531px; overflow-y: auto;   /* never spill past the email line */
  color: var(--gold); font-size: 18px; line-height: 20px; white-space: pre-line; }
.modal .m-email{ position: absolute; left: 653px; top: 583px; width: 288px;
  color: var(--gold); font-size: 16px; line-height: 16px; }
.modal .m-close {
  position: absolute; right: 14px; top: 8px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 28px; line-height: 1; cursor: pointer; text-decoration: none; z-index: 2;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { position: absolute; left: 0; width: 1700px; height: 282px; }
.site-footer .f-text {
  position: absolute; left: 237px; top: 0; width: 420px;
  color: var(--gold); font-size: 24px; line-height: 28px; font-weight: 400;
  white-space: pre-line;
}
.site-footer .f-text a { color: var(--gold); text-decoration: none; }
.site-footer .f-text a:hover { text-decoration: underline; }
.site-footer .f-spirals { position: absolute; left: 653px; top: 0; width: 865px; height: 282px; }

/* ============================================================
   MOBILE (<768px) — 1:1 rebuild of the Figma "Mobile" page
   frames (430px canvas, 8px side margins, 414px column).
   Pages opt in with <body class="mobile-ready">; all other pages
   keep the scaled-desktop fallback untouched. Page sections flow
   vertically in DOM order (position:static makes the inline
   desktop coordinates inert); fixed-content components keep
   exact frame geometry inside. Frame y-coords are quoted minus
   the 24px iOS status-bar mock the frames carry.
   The same header/menu block exists in styles.css (homepage) —
   keep them in sync, like the tokens.
   ============================================================ */
@media (max-width: 767px) {

  /* ---- stage: 430px canvas, sections flow in DOM order ---- */
  .mobile-ready .scale-wrap { margin: 0 auto; }
  .mobile-ready .stage {
    width: 430px;
    padding-top: 20px;                /* + first section's 44px = y64 */
    height: auto !important;          /* the single sanctioned !important:
                                         desktop heights are inline styles
                                         (markup + __reflow); mobile height
                                         comes from the flow */
  }
  .mobile-ready .stage > * { position: static; }
  .mobile-ready .sec { display: block; position: static; }

  /* ---- header (Figma "Nav bar": 430×53, wordmark + meatball) ---- */
  .mobile-ready .site-nav .nav-inner { width: 430px; }
  .mobile-ready .site-nav .logo,
  .mobile-ready .site-nav .ntab { display: none; }
  /* full-bleed: extend past the 430px canvas by the letterbox margin (in canvas
     px, so ÷ --scale) so the line reaches both screen edges when the stage is
     centred/letterboxed at wide mobile widths; html{overflow-x:hidden} clips it. */
  .mobile-ready .site-nav .nav-line { top: 50px; height: 3px;
    left: calc(-1 * var(--nav-off, 0px) / var(--scale, 1));
    width: calc(430px + 2 * var(--nav-off, 0px) / var(--scale, 1)); }
  .mobile-ready .site-nav::after { content: none; }   /* mobile uses the repositioned .nav-line above */
  .mobile-ready .logo-m { display: block; position: absolute; left: 8px; top: 12px;
    width: 131px; height: 29px; }
  .mobile-ready .logo-m img { width: 100%; height: 100%; display: block; }
  .mobile-ready .mnav-btn { display: flex; position: absolute; left: 366px; top: 0;
    width: 64px; height: 50px; align-items: center; justify-content: flex-end;
    gap: 4px; padding: 0 8px 0 0; background: none; border: none; cursor: pointer; }
  .mnav-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

  /* ---- menu overlay (Figma 77:3020/82:3173) ----
     Lives outside .scale-wrap: position:fixed is broken inside the
     transformed stage. The inner column is scaled/centred with the same
     factor as the header (--scale/--nav-off, set by scale.js) so it lines
     up with the bar underneath. */
  .mobile-ready .mnav { position: fixed; inset: 0; z-index: 60;
    background: var(--maroon); overflow-y: auto; display: block; }
  .mobile-ready .mnav[hidden] { display: none; }
  .mnav-inner { position: relative; width: 430px; transform-origin: top left;
    transform: translateX(var(--nav-off, 0px)) scale(var(--scale, 1)); }
  .mnav-inner .logo-m { display: block; position: absolute; left: 8px; top: 12px;
    width: 131px; height: 29px; }
  .mnav-inner .mnav-close { display: flex; position: absolute; left: 366px; top: 0;
    width: 64px; height: 50px; align-items: center; justify-content: flex-end;
    gap: 4px; padding: 0 8px 0 0; background: none; border: none; cursor: pointer; }
  .mnav-inner .mnav-line { position: absolute; left: 0; top: 50px;
    width: 430px; height: 3px; background: var(--gold); }
  .mnav-list { padding-top: 61px; }   /* bar-line bottom (53) + 8px, matching the
                                         inter-row gap so row 1 isn't squished */
  .mrow { display: flex; align-items: center; height: 34px; margin-bottom: 8px;
    padding: 0 8px; border-bottom: 1px solid var(--gold);
    font-weight: 500; font-size: 20px; color: var(--gold);
    text-decoration: none; text-transform: uppercase; }
  .mrow.dim { color: var(--gold-dim); }   /* dimmed but clickable → coming-soon.html */
  .mrow.active { background: var(--gold); color: var(--maroon); }
  /* scroll lock while the menu is open (class set on <html> by mnav.js) */
  html.mnav-open, .mnav-open body { overflow: hidden; }

  /* ---- title bar (text x8, 3px gold underline inset 8px to match the text) ---- */
  /* position:static (not relative) so the inline desktop top/left coords stay
     inert under .stage > * — a relative box would re-activate them and shove the
     bar down/right into the body text. The ::after line flows below the title. */
  .mobile-ready .titlebar { position: static; width: auto; height: auto;
    min-height: 34px; margin-top: 44px; padding: 10px 8px 3px; }
  /* gold line flows under the title; negative side margins cancel the box's 8px
     padding AND the letterbox margin (÷ --scale, in canvas px) so it runs
     full-bleed to both screen edges, matching the nav line, at any mobile width. */
  .mobile-ready .titlebar::after { position: static; display: block;
    left: auto; right: auto; bottom: auto; width: auto; height: 3px;
    margin: 7px calc(-8px - var(--nav-off, 0px) / var(--scale, 1)) 0; }
  .mobile-ready .titlebar .tt { position: static; display: block;
    font-size: 20px; line-height: 20px;
    font-weight: 500; white-space: normal; overflow-wrap: break-word; }
  /* keep long titles (DE) clear of the language toggle beside them */
  .mobile-ready .titlebar:has(+ .lang) .tt { padding-right: 84px; }
  /* right-slot link ("Meet the rest ›") pulled up into the title row */
  .mobile-ready .info-right { position: static; display: block; text-align: right;
    margin: -22px 8px 10px 0; font-size: 12px; line-height: 12px; }

  /* ---- DE/EN toggle: compact, in the first title bar's right slot ---- */
  .mobile-ready .lang { position: absolute; left: auto; right: 8px; top: 66px;
    width: auto; height: 28px; font-size: 14px; z-index: 2; }
  .mobile-ready .lang a { position: static; display: inline-flex; width: 36px; height: 28px; }

  /* ---- tournament: schedule (3×2 grid of day cells) ---- */
  .mobile-ready .sched { display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 28px 16px; margin: 27px 8px 0; }
  .mobile-ready .sday { position: static; width: auto; }
  .mobile-ready .sday .day  { position: static; width: auto;
    font-size: 16px; line-height: 16px; white-space: normal; }
  .mobile-ready .sday .sline { position: static; width: auto; margin-top: 3px; }
  .mobile-ready .sday .sitem { position: static; width: auto; margin-top: 7px;
    font-size: 14px; line-height: 15px; }

  /* ---- tournament: fees & funds (stacked mini-tables) ---- */
  .mobile-ready .fees { margin: 24px 8px 0; }
  .mobile-ready .fee-group { position: static; width: auto !important; height: auto;
    margin-bottom: 9px; }
  .mobile-ready .fee-group.fee-wide { width: auto; }
  .mobile-ready .fee-hd { position: static; font-size: 16px; line-height: 16px;
    text-transform: uppercase; padding-bottom: 2px;
    border-bottom: 1px solid var(--gold); }
  /* width:auto cancels the desktop .fee-row{width:100%}: with margin-left it
     would otherwise be 100% + 143px and run its border-bottom off the right edge
     (horizontal overflow → the page shrinks-to-fit on phones). auto = fill the
     remaining width after the indent, so the line ends at the container edge. */
  .mobile-ready .fee-row { position: static; display: flex; width: auto;
    margin-left: 143px;
    padding: 8px 0 3px; border-bottom: 1px solid var(--gold);
    font-size: 14px; line-height: 14px; }
  .mobile-ready .fee-row span:first-child { width: 144px; flex: none; }
  .mobile-ready .fee-row span:last-child { position: static; }
  .mobile-ready .fee-line { display: none; }

  /* ---- tournament: main personnel (3×2 portrait grid) ---- */
  .mobile-ready .crew { display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 28px 16px; margin: 28px 8px 0; }
  .mobile-ready .pcard { position: static; width: auto; }
  .mobile-ready .pcard .photo { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .mobile-ready .pcard .photo.ph { height: auto; aspect-ratio: 1 / 1; }
  .mobile-ready .pcard .pname { margin-top: 16px; width: auto;
    font-size: 16px; line-height: 20px; min-height: 40px; }
  .mobile-ready .pcard .pdiv  { margin-top: 3px; width: auto; }
  .mobile-ready .pcard .prole { margin-top: 11px; width: auto;
    font-size: 14px; line-height: 14px; }

  /* ---- tournament: bid documents (3×2 box grid, dates dropped) ---- */
  .mobile-ready .docs { display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 28px 16px; margin: 28px 8px 0; }
  .mobile-ready .docbox { position: static; width: auto; height: 80px;
    box-shadow: none; }
  /* static .inner: the box is static (its inline desktop left must stay
     inert), so the absolute inset trick would anchor to the stage */
  .mobile-ready .docbox .inner { position: static; display: flex;
    margin: 4px; height: 72px; font-size: 16px; line-height: 20px; }
  .mobile-ready .docdate { display: none; }   /* not in the mobile frame */

  /* ---- partners: intro / closing copy ---- */
  .mobile-ready .intro-text { position: static; width: auto; margin: 24px 8px 0;
    font-size: 14px; line-height: 18px; font-weight: 500; hyphens: auto; }
  .mobile-ready .closing-text { position: static; width: auto; margin: 44px 8px 0;
    font-size: 14px; line-height: 18px; font-weight: 500; hyphens: auto; }
  /* photos: not in the mobile frame — delete this rule to bring them back */
  .mobile-ready .pphoto { display: none; }

  /* ---- partners: tier switcher (3 selector boxes + one panel) ---- */
  .mobile-ready .pkg-tabs { display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; margin: 44px 8px 0; }
  .mobile-ready .pkg-tab { position: relative; height: 80px; padding: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: none; cursor: pointer; font-family: inherit;
    color: var(--gold); font-size: 16px; line-height: 24px; font-weight: 500;
    text-transform: uppercase; text-align: center; }
  .mobile-ready .pkg-tab::after { content: ""; position: absolute; inset: 4px;
    border: 1px solid var(--gold); pointer-events: none; }
  .mobile-ready .pkg-tab.active::after { border-width: 2px; inset: 3px; }
  .mobile-ready .pkg-tab span { display: block; }
  .mobile-ready .pkg-tab.green   { background: #013e26; }
  .mobile-ready .pkg-tab.blue    { background: #00294f; }
  .mobile-ready .pkg-tab.magenta { background: #620033; }

  .mobile-ready .pkg { position: static; display: none; width: auto !important;
    height: auto; margin: 12px 8px 0; padding: 31px 27px; }
  .mobile-ready .pkg.pkg-active { display: block; }
  .mobile-ready .pkg .hdr { display: none; }   /* tier + price live in the tabs */
  .mobile-ready .pkg .lbl { position: static; width: auto; margin-top: 18px;
    font-size: 16px; line-height: 18px; white-space: normal; }
  .mobile-ready .pkg .lbl:first-of-type { margin-top: 0; }
  /* bullets follow the personnel page's list guide (Figma 77:2813:
     fw500, line-height 1.33×, listSpacing 8 between items), scaled to the
     sponsorship body size — medium weight, airy line-height, gap per item */
  .mobile-ready .pkg ul { position: static; width: auto; margin: 18px 0 0 15px;
    font-size: 16px; font-weight: 500; line-height: 21px; }
  .mobile-ready .pkg ul li { margin-bottom: 10px; }
  .mobile-ready .pkg ul li:last-child { margin-bottom: 0; }
  .mobile-ready .pkg ul li::before { top: 8px; }   /* centered on the first line (lh21) */

  /* ---- contact form (414-wide stacked fields) ---- */
  .mobile-ready .cform { position: static; width: auto; height: auto;
    margin: 24px 8px 0; }
  .mobile-ready .cform form { display: block; }
  .mobile-ready .cform .field { position: static; display: block; width: 100%;
    height: 40px; margin-bottom: 20px; font-size: 16px; line-height: 16px;
    font-weight: 500; }
  .mobile-ready .cform .cf-message { height: 160px; }
  /* consent + status aren't in the frame but stay (legal/functional) */
  .mobile-ready .cform .field-consent { position: static; width: auto;
    margin-bottom: 16px; font-size: 12px; line-height: 16px; }
  .mobile-ready .cform .cf-send { position: static; display: block;
    margin-left: auto; width: 127px; height: 48px; box-shadow: none; }
  .mobile-ready .cform .cf-send .inner { position: static; display: flex;
    margin: 4px; height: 40px; font-size: 16px; line-height: 16px; }
  .mobile-ready .cform .form-status { position: static; width: auto;
    margin-top: 12px; font-size: 14px; line-height: 18px; }

  /* ---- contact: organising-teams tables (Figma 77:2784) ----
     desktop 3-col table hidden; mobile shows two titled 2-col sections */
  .mobile-ready .contacts-d { display: none; }
  .mobile-ready .contacts-m { display: block; }
  .mobile-ready .ctable { margin: 0 8px; }
  .mobile-ready .crow { display: flex; gap: 8px; align-items: baseline;
    padding: 8px 0 3px; border-bottom: 1px solid var(--gold);
    font-size: 14px; line-height: 15px; font-weight: 500; }
  .mobile-ready .crow .team { flex: none; width: 138px; font-weight: 500;
    color: var(--gold); }
  .mobile-ready .crow a { color: var(--gold); text-decoration: none;
    overflow-wrap: anywhere; }

  /* ---- footer (Figma PageExample-Mobile / Home-Mobile 124:1367) ----
     Side-by-side: text block on the left, the deco (its own 241×136 mobile
     crop — a different composition from the wide desktop spirals) bottom-right.
     The <img>'s desktop src is swapped to the mobile crop via `content:`, so
     no per-page footer markup change is needed. */
  .mobile-ready .site-footer { position: relative; width: auto; height: 196px;
    margin-top: 48px; padding: 0; }
  .mobile-ready .site-footer .f-text { position: absolute; left: 8px; top: 83px;
    width: auto; font-size: 14px; line-height: 16px; }   /* Figma mobile footer (124:978) */
  /* the wide desktop spirals <img> is hidden; the mobile crop is painted as a
     bottom-right background (a CSS image swap that headless Edge renders) */
  .mobile-ready .site-footer .f-spirals { display: none; }
  /* right:negative --edge-bleed pushes the deco past the letterbox to the true
     viewport corner on mid-width screens (538–767px); 0 on real phones */
  .mobile-ready .site-footer::after { content: ""; position: absolute;
    right: calc(-1 * var(--edge-bleed, 0px)); bottom: 0; width: 241px; height: 136px;
    background: url("../img/footer-spirals-m.png") center / contain no-repeat; }
}