/* Hallmark · shape: Invitation · genre: editorial · theme: brand (marketing navy and gold) · redesign: full
 * paper: oklch(13% 0.04 263) · accent: oklch(74% 0.09 85) · display: Bodoni Moda · body: Plus Jakarta Sans · hero: Settled · nav: partner marks left, four links and one outlined action right · footer: a mast with the monogram and venue lines, partners and credits beside it · signature: the gold monogram lockup from marketing set over their navy silk
 * axes: dark/high-contrast-serif/warm · posture: Settled · contrast: pass · fold: pass · job: attend · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the four values row could sit under any event; left as marketing's own words and set in the display face with a gold hairline each */
/* Hallmark · dropped #overview, #rsvp, #top, #why-ace · the nav now follows marketing's reference (About, Speakers, Agenda, Venue, one RSVP action) and the brand link became the partner marks, the sections keep their ids */
/* Hallmark · dropped #rsvp-form, name, company, title, email, phone, itinerary, flight-cgk · registration lives in the Google Form at forms.gle/67psh1KPU5eNkfNp7, as the user asked */
/* Hallmark · dropped "26 – 28 November 2026", "Holiday Inn Resort Bintan", "Invitation only" · the facts strip is gone, the date and place sit in the hero and the venue section says the hotel once, marketing's "Invitation only event" and "By invitation only" carry the rest */
/* Hallmark · reworded "Apex CxO Exchange" to "You are cordially invited to Apex CxO Exchange" · the h1 is marketing's lockup image with its invitation line, the name stays in the image alt */
/* Hallmark · reworded "Voices shaping the conversation" to "Meet our speakers" · 54 removed the kicker, the plain label became the heading */
/* Hallmark · dismissed 42 · the nav is the one in marketing's reference (partner marks, links, one outlined RSVP action) */
/* Hallmark · dismissed 19 · the footer copyright line is the owner's wording, open in CONTENT_TODO.md */
/* Hallmark · dropped datalabs.png, #overview, form-status · the colour datalabs logo is replaced by marketing's light version on the dark page, the facts strip and the form status line are gone with the form */
@import url("./tokens.css");
@import url("./base.css");

body { color-scheme: dark; }

.skip-link { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-card); }
.skip-link:focus-visible { top: var(--space-md); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--space-lg);
  border: 1px solid var(--color-accent); border-radius: var(--radius-card);
  background: transparent; color: var(--color-accent);
  font: 500 var(--text-sm)/1 var(--font-body); letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-small { min-height: 44px; }
@media (hover: hover) {
  .btn:hover { background: var(--color-accent); color: var(--color-accent-ink); }
}

/* Header */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-height); }
.partners { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.partners img { width: auto; height: 24px; }
.partners li:last-child img { height: 22px; }
.site-nav ul { display: flex; align-items: center; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.site-nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.site-nav a:not(.btn):active { color: var(--color-accent); }
@media (hover: hover) {
  .site-nav a:not(.btn):hover { color: var(--color-ink); border-bottom-color: var(--color-accent); }
}
.nav-toggle { display: none; }

/* Hero */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; align-items: center;
  min-height: calc(100svh - var(--nav-height));
  padding-block: var(--space-xl);
  background: var(--color-paper) url("assets/hero-silk.jpg") center / cover no-repeat;
  text-align: center;
}
.hero-inner { position: relative; z-index: var(--z-raised); display: grid; justify-items: center; gap: var(--space-lg); }
.hero h1 { display: grid; justify-items: center; gap: var(--space-sm); max-width: none; font-size: var(--text-xl); line-height: 1.2; }
.hero-invite { color: var(--color-accent); font: 500 var(--text-sm)/1.4 var(--font-body); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.hero-lockup { width: min(680px, 100%); height: auto; }
.hero-tagline { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-md); font-style: italic; }
.hero-sub { max-width: 54ch; font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink); text-wrap: balance; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-xl); margin: 0; color: var(--color-ink); }
.hero-meta span { display: inline-flex; align-items: center; gap: var(--space-sm); }
.hero-meta svg { width: 24px; height: 24px; flex: none; color: var(--color-accent); }
.hero-actions { display: grid; justify-items: center; gap: var(--space-sm); }
.invite-note { font-size: var(--text-sm); color: var(--color-muted); }
.hero-venue {
  position: absolute; right: 0; bottom: 0; z-index: var(--z-base);
  width: min(46%, 780px); height: auto; opacity: .92;
  -webkit-mask-image: linear-gradient(to right, transparent 25%, var(--color-ink) 75%), linear-gradient(to top, var(--color-ink) 55%, transparent);
  mask-image: linear-gradient(to right, transparent 25%, var(--color-ink) 75%), linear-gradient(to top, var(--color-ink) 55%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* Sections */
.section { padding-block: var(--space-2xl); }
.section.band { background: var(--color-paper-2); color: var(--color-ink); }
.section + .section { padding-top: var(--space-3xl); }
.section-head { margin-bottom: var(--space-xl); }
.section-head.centered { text-align: center; }
.section-head.centered h2, .section-head.centered .lead { margin-inline: auto; }
.section-head.centered .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.lead { color: var(--color-ink-2); }

/* About */
.about { display: grid; justify-items: center; text-align: center; gap: var(--space-lg); }
.about h2 { max-width: none; }
.about .lead { max-width: 48ch; text-wrap: balance; }
.values { display: grid; text-align: center; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); width: 100%; margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.values li { padding-top: var(--space-md); }
.values h3 { margin-bottom: var(--space-2xs); }
.values p { color: var(--color-muted); }

/* Why */
.why { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.why-head { grid-column: 1 / span 6; position: sticky; top: calc(var(--nav-height) + var(--space-lg)); }
.why-head h2 { max-width: none; font-size: var(--text-section); line-height: 1.35; letter-spacing: 0.06em; }
.why-body { grid-column: 7 / span 6; display: grid; gap: var(--space-lg); }
.reasons { counter-reset: reason; display: grid; margin: 0; padding: 0; list-style: none; }
.reasons li { counter-increment: reason; display: grid; grid-template-columns: var(--space-2xl) minmax(0, 1fr); column-gap: var(--space-md); row-gap: var(--space-2xs); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.reasons li::before { content: counter(reason, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; color: var(--color-accent); font-variant-numeric: lining-nums tabular-nums; }
.reasons h3, .reasons p { grid-column: 2; }
.reasons p { color: var(--color-ink-2); }

/* Speakers */
.lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.speaker { display: flex; flex-direction: column; }
.plate { display: grid; place-items: center; aspect-ratio: 1 / 1; margin-bottom: var(--space-md); overflow: hidden; border-radius: var(--radius-card); background: var(--color-ink); }
.plate.portrait { background: var(--color-paper-3); }
.plate.portrait img { width: 100%; height: 100%; object-fit: contain; }
.speaker .org { color: var(--color-ink-2); }
.speaker .role { margin-top: var(--space-sm); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); }

/* Itinerary */
.tabs { display: grid; justify-items: center; }
.tablist { display: inline-flex; gap: var(--space-xs); padding: var(--space-2xs); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); }
.tablist [role="tab"] { min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font: 500 var(--text-sm)/1 var(--font-body); letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.tablist [role="tab"]:active { transform: translateY(1px); }
.tablist [role="tab"][aria-selected="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
@media (hover: hover) {
  .tablist [role="tab"][aria-selected="false"]:hover { background: var(--color-paper-3); color: var(--color-ink); }
}
.tabpanel { width: min(100%, 48rem); margin-top: var(--space-xl); }
.tabpanel h3 { margin-bottom: var(--space-xs); font-size: var(--text-md); }
.agenda-date { color: var(--color-muted); }
.agenda-list { margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.agenda-list li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule); }
.agenda-list li span { color: var(--color-accent); font-variant-numeric: tabular-nums; }
.footnote { margin-top: var(--space-xl); text-align: center; font-size: var(--text-sm); color: var(--color-muted); }

/* Venue */
.venue { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: stretch; }
.venue-side { grid-column: 1 / span 5; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); }
.venue h2 { max-width: 18ch; }
.photo { margin: 0; overflow: hidden; border-radius: var(--radius-card); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-small { aspect-ratio: 4 / 3; }
.photo-large { grid-column: 6 / span 7; min-height: 440px; }
.photo-large img { object-position: 42% 50%; }

/* RSVP */
.rsvp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.rsvp-copy { grid-column: 1 / span 5; display: grid; justify-items: start; gap: var(--space-lg); }
.rsvp-copy .lead { text-wrap: balance; }
.rsvp-side { grid-column: 7 / span 6; display: grid; gap: var(--space-2xl); }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); font-variant-numeric: tabular-nums; }
.countdown div { padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.countdown b { display: block; font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 500; line-height: 1.05; color: var(--color-ink); font-variant-numeric: lining-nums tabular-nums; }
.countdown span { color: var(--color-ink-2); }
.asks-block h3 { margin-bottom: var(--space-md); }
.asks { margin: 0; padding: 0; list-style: none; }
.asks li { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); color: var(--color-ink-2); }
.asks strong { color: var(--color-ink); font-weight: 600; }

/* Footer */
.site-footer { padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-xl); }
.footer-mast { display: flex; align-items: center; gap: var(--space-lg); }
.footer-mark { width: 72px; height: auto; }
.footer-mast p { color: var(--color-ink-2); line-height: 1.6; }
.footer-mast strong { color: var(--color-ink); font-weight: 600; }
.footer-side { display: grid; justify-items: end; gap: var(--space-sm); }
.footer-side .partners { margin-bottom: var(--space-xs); }
.small { font-size: var(--text-sm); color: var(--color-muted); }

/* Responsive */
@media (max-width: 68.75rem) {
  .hero-venue { display: none; }
}
@media (max-width: 60rem) {
  .nav-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 600 var(--text-md) var(--font-body); cursor: pointer; }
  .nav-toggle:active { transform: translateY(1px); }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: var(--space-md) var(--gutter) var(--space-lg); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: var(--space-2xs); }
  .site-nav a:not(.btn) { width: 100%; }
  .site-nav .btn { width: 100%; margin-top: var(--space-xs); }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-head, .why-body, .venue-side, .photo-large, .rsvp-copy, .rsvp-side { grid-column: 1 / -1; }
  .why-head { position: static; }
  .lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-large { min-height: 0; aspect-ratio: 4 / 3; }
  .venue h2 { max-width: none; }
}
@media (max-width: 40rem) {
  .partners { gap: var(--space-md); }
  .partners img { height: 20px; }
  .partners li:last-child img { height: 18px; }
  .tablist [role="tab"] { padding-inline: var(--space-md); }
  .agenda-list li { grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-sm); }
  .countdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-row { align-items: flex-start; }
  .footer-side { justify-items: start; }
}
@media (max-width: 30rem) {
  .values, .lineup { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}