/* Hero in the lucianspace.com / lucianglobal.com home grammar: one screen, the plate full bleed, the header in
   flow on top of it (wordmark left, the Nexus nav centred, the star mark right), the statement bottom-left over a
   soft neutral grade. Everything under the hero is the live page, untouched. */
@font-face { font-family: 'TeX Gyre Heros'; src: url(/fonts/texgyreheros-bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }
:root { --hero-ink: #0d0d0d; --hero-fg: #fff; --brand: 'Helvetica Neue', 'TeX Gyre Heros', Helvetica, Arial, sans-serif; --heading: Archivo, 'Helvetica Neue', Arial, sans-serif; --shadow: 0 1px 2px rgba(13,13,13,.35); }

.hero { position: relative; min-height: 100dvh; overflow: hidden; background: var(--hero-ink); color: var(--hero-fg); }
.hero__image { position: absolute; inset: 0; margin: 0; }
.hero__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: none; }
@media (max-width: 767px) { .hero__image img { object-position: 50% 30%; } }
.hero__grade { pointer-events: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; height: 52%;
  background: linear-gradient(to top, rgba(13,13,13,.58) 0%, rgba(13,13,13,.36) 24%, rgba(13,13,13,.16) 50%, rgba(13,13,13,.04) 78%, rgba(13,13,13,0) 100%); }
.hero__grade-top { pointer-events: none; position: absolute; left: 0; right: 0; top: 0; z-index: 10; height: 30%;
  background: linear-gradient(to bottom, rgba(13,13,13,.40) 0%, rgba(13,13,13,.22) 35%, rgba(13,13,13,.08) 70%, rgba(13,13,13,0) 100%); }

/* Header: the Lucian bar (88px, padding 24/20 -> 40 -> 56, transparent, white) carrying the Nexus pieces. */
.hero .nav-wrap { position: relative; z-index: 60; background: transparent; }
.site-nav { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; height: 88px; padding: 24px 20px; color: var(--hero-fg); text-shadow: var(--shadow); }
@media (min-width: 768px) { .site-nav { padding: 24px 40px; } }
@media (min-width: 1024px) { .site-nav { padding: 24px 56px; } }
.brand { grid-column: 1; justify-self: start; white-space: nowrap; font-family: var(--brand); font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: 0; }
@media (min-width: 768px) { .brand { font-size: 22px; } }
.site-nav__links { grid-column: 2; display: none; justify-self: center; align-items: center; gap: 32px; white-space: nowrap; font-family: var(--heading); font-weight: 400; font-size: 13px; letter-spacing: -.01em; }
@media (min-width: 1024px) { .site-nav__links { display: flex; } }
.site-nav__links a, .site-nav__links button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; color: inherit; text-shadow: inherit; transition: opacity .15s; }
.site-nav__links a:hover, .site-nav__links button:hover, .site-nav__links button[aria-expanded="true"] { opacity: .6; }
/* Pending items: the lucianglobal.com "Quiet" roll. White at rest (the hero's type), the name rises away and
   "Coming soon" rises into its place on hover, or on tap where there is no hover (held 1.7s). */
.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; }
.soon { position: relative; display: inline-block; cursor: default; color: var(--hero-fg); text-shadow: var(--shadow); outline: none; }
.soon-name { display: inline-block; }
.soon-msg { position: absolute; top: 0; left: 50%; transform: translate(-50%, 5px); opacity: 0; pointer-events: none; white-space: nowrap; }
.soon-name, .soon-msg { transition: opacity .16s cubic-bezier(.4, 0, .2, 1), transform .24s cubic-bezier(.2, .7, .2, 1); }
.site-nav__links .soon { padding: 8px 0; }
.site-nav__links .soon .soon-msg { top: 8px; }
@media (hover: hover) {
  .soon:hover .soon-name, .soon:focus-visible .soon-name { opacity: 0; transform: translateY(-5px); }
  .soon:hover .soon-msg, .soon:focus-visible .soon-msg { opacity: 1; transform: translate(-50%, 0); transition-delay: .05s; }
}
.soon.is-tapped .soon-name, .soon.is-shown .soon-name { opacity: 0; transform: translateY(-5px); }
.soon.is-tapped .soon-msg, .soon.is-shown .soon-msg { opacity: 1; transform: translate(-50%, 0); transition-delay: .05s; }
/* In the lists and the sheet the rows are left-aligned, so the message hangs from the left edge. */
.site-menu .soon, .site-sheet .soon { display: block; }
.site-menu .soon-msg, .site-sheet .soon-msg { left: 0; transform: translate(0, 5px); }
.site-menu .soon:hover .soon-msg, .site-menu .soon:focus-visible .soon-msg, .site-sheet .soon:hover .soon-msg, .site-menu .soon.is-tapped .soon-msg, .site-sheet .soon.is-tapped .soon-msg, .site-menu .soon.is-shown .soon-msg, .site-sheet .soon.is-shown .soon-msg { transform: translate(0, 0); }
.site-nav__links svg { width: 12px; height: 12px; transition: transform .15s; }
.site-nav__links button[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-nav__right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav-nexus-mark { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--brand); font-weight: 700; font-size: 18px; line-height: 1; }
.nav-nexus-mark svg { width: 22px; height: 22px; flex: none; filter: drop-shadow(var(--shadow)); }
@media (min-width: 768px) { .nav-nexus-mark { font-size: 24px; gap: 9px; } .nav-nexus-mark svg { width: 30px; height: 30px; } }
.site-nav__menu { display: flex; align-items: center; justify-content: center; height: 40px; width: 44px; margin-right: -14px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.site-nav__menu svg { width: 16px; height: 16px; filter: drop-shadow(var(--shadow)); }
@media (min-width: 1024px) { .site-nav__menu { display: none; } }
/* Narrow bars: below the nav's width the bar is a plain row, the wordmark scales with the screen and may
   shorten, and under 480px the star stands alone. Nothing can overlap. */
@media (max-width: 1023px) { .site-nav { display: flex; justify-content: space-between; gap: 12px; } .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .site-nav__right { flex: none; } }
@media (max-width: 767px) { .brand { font-size: clamp(12px, 4.6vw, 17px); } }
@media (max-width: 479px) { .nav-nexus-mark span { display: none; } .nav-nexus-mark { gap: 0; } }

/* Dropdowns: the lucianglobal.com list, no box. It hangs from its label (4px below), runs 12px past the label on
   each side so the pointer never falls off it, 12px rows, hover dims to .6; Our World rows carry their note. */
.site-nav__item { position: relative; }
.site-menu { position: absolute; left: -12px; top: 100%; z-index: 70; width: max-content; min-width: calc(100% + 24px); padding: 4px 12px 10px; }
.site-menu .site-menu__row { padding: 6px 0; font-size: 12px; line-height: 1.4; letter-spacing: -.005em; }
.site-menu .site-menu__row .soon-msg { top: 6px; }
/* While a list is open the top of the plate dims further, so white rows read over the painting. */
.hero__grade-menu { pointer-events: none; position: absolute; left: 0; right: 0; top: 0; z-index: 10; height: 62%; opacity: 0; transition: opacity .25s;
  background: linear-gradient(to bottom, rgba(13,13,13,.82) 0%, rgba(13,13,13,.72) 30%, rgba(13,13,13,.40) 68%, rgba(13,13,13,0) 100%); }
.hero.is-menu-open .hero__grade-menu { opacity: 1; }

/* Phone sheet: the lucianglobal.com sheet under the bar, ink at .96, the groups as ruled rows. */
.site-sheet { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; max-height: calc(100dvh - 88px); overflow-y: auto; padding: 6px 20px 40px; background: rgba(13,13,13,.96); color: var(--hero-fg); font-family: var(--heading); text-shadow: none; }
@media (min-width: 768px) { .site-sheet { padding-inline: 40px; } }
@media (min-width: 1024px) { .site-sheet { display: none; } }
.site-sheet__group { padding: 14px 0 10px; border-top: 1px solid rgba(255,255,255,.14); }
.site-sheet > :first-child { border-top: 0; }
.site-sheet__label { margin: 0 0 4px; font-size: 14px; letter-spacing: -.01em; line-height: 1.4; }
.site-sheet__group--plain { padding: 0; }
.site-sheet .site-sheet__label.site-sheet__row { padding: 14px 0; margin: 0; font-size: 14px; }
.site-sheet .site-sheet__label.site-sheet__row .soon-msg { top: 14px; }
.site-sheet__group .site-sheet__row:not(.site-sheet__label) { padding: 10px 0; font-size: 14px; line-height: 1.4; letter-spacing: -.005em; opacity: .8; }
.site-sheet__group .site-sheet__row:not(.site-sheet__label) .soon-msg { top: 10px; }
.site-sheet .soon { text-shadow: none; }

/* Statement: bottom 40, left 16 / 32 / 48; Archivo 460, 24 / 26 / 30px, leading .95, tracking -.04em; the second line 680. */
.hero__title { position: absolute; z-index: 40; left: 16px; right: 16px; bottom: 40px; margin: 0; font-family: var(--heading); font-weight: 460; font-size: 1.5rem; line-height: .95; letter-spacing: -.04em; text-shadow: var(--shadow); }
.hero__title span { display: block; }
.hero__title .strong { font-weight: 680; letter-spacing: -.05em; }
@media (min-width: 768px) { .hero__title { left: 32px; right: auto; font-size: 1.625rem; } }
@media (min-width: 1024px) { .hero__title { left: 48px; font-size: 1.875rem; } }
@media (prefers-reduced-motion: reduce) { .site-nav__links a, .site-nav__links button, .site-nav__links svg, .hero__grade-menu { transition: none; } .soon-name, .soon-msg { transition-duration: .01s; transition-delay: 0s; } .soon:hover .soon-name, .soon.is-tapped .soon-name, .soon.is-shown .soon-name { transform: none; } .soon:hover .soon-msg, .soon.is-tapped .soon-msg, .soon.is-shown .soon-msg { transform: translate(-50%, 0); } .site-menu .soon-msg, .site-sheet .soon-msg { transform: none !important; } }

/* Below the fold in the concert-programme register, black on white; display face = the site's own Fraunces. */
:root { --prog-heading: Archivo, 'Helvetica Neue', Arial, sans-serif; --prog-serif: 'Nexus Fraunces', Baskerville, Georgia, serif; --prog-sans: 'Helvetica Neue', 'TeX Gyre Heros', Helvetica, Arial, sans-serif; --prog-ink: #111; --prog-mute: #5c5c5c; --prog-rule: #d8d8d8; }

/* ============ Below the fold: the programme register (Centre) ============ */
body .section { padding: 72px var(--gutter) 80px; }
body .section-heading { max-width: 780px; }
/* Section headers in the hero statement's face and grammar: Archivo 460, leading .98, tracking -.04em; a bold span at 680. */
body .section-heading h2 { font-family: var(--prog-heading); font-weight: 460; font-size: clamp(36px, 3.8vw, 52px); line-height: .98; letter-spacing: -.04em; margin: 0 0 18px; text-wrap: balance; }
body .section-heading > p:last-child { font-size: 17px; line-height: 1.6; color: var(--prog-mute); max-width: 520px; }
/* The piano plate above the parts, on the 1040 measure the Research plate uses. */
body .prog-piano { max-width: 1040px; margin: 40px auto 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--prog-ink); }
body .prog-piano img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: none; }
/* The three parts as one row at every width: numeral, serif title, description, hairlines between the columns. */
body .r-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0; max-width: 1040px; margin: 48px auto 0; text-align: center; counter-reset: part; }
/* Each part shares the three rows of the grid (subgrid), so numerals, titles and descriptions start on the same
   lines in every column however long a title runs. */
body .r-doors > .door { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; justify-items: center; border-top: 0; padding: 4px 24px 8px; counter-increment: part; }
@supports not (grid-template-rows: subgrid) { body .r-doors h3 { min-height: 2.2em; } }
body .r-doors > .door + .door { border-left: 1px solid var(--prog-rule); }
body .door-number { font-size: 0; color: var(--prog-ink); }
body .door-number::before { content: counter(part, upper-roman); font-family: var(--prog-serif); font-size: 15px; letter-spacing: .06em; line-height: 1; }
body .r-doors h3 { font-family: var(--prog-serif); font-optical-sizing: auto; font-weight: 400; font-size: 30px; letter-spacing: -.015em; line-height: 1.1; margin: 14px 0 10px; text-wrap: balance; }
body .r-doors p { max-width: 30ch; margin: 0 auto; color: var(--prog-mute); font-size: 16px; line-height: 1.55; }
body .ecosystem-trigger { margin: 4px auto 0; }
body .resonance-panel { display: flex; flex-direction: column; max-width: 880px; margin: 64px auto 0; border: 0; text-align: center; }
body .resonance-panel__body { order: 1; display: flex; flex-direction: column; align-items: center; gap: 36px; padding: 44px 0 0; border-top: 1px solid var(--prog-ink); }
body .resonance-panel__copy { padding: 0; max-width: 640px; }
body .resonance-panel__copy h2 { font-family: var(--prog-heading); font-optical-sizing: auto; font-size: clamp(36px, 3.8vw, 52px); font-weight: 460; line-height: .98; letter-spacing: -.04em; margin: 0 0 20px; text-wrap: balance; }
body .resonance-panel__copy h2 em { font-style: normal; font-weight: 680; letter-spacing: -.05em; white-space: normal; }
body .resonance-panel__copy > p { max-width: 560px; margin: 14px auto 0; font-size: 17px; line-height: 1.65; color: var(--prog-mute); }
body .resonance-panel__link { margin-top: 30px; gap: 0; }
body .resonance-panel__figure { max-width: 440px; width: 100%; justify-self: center; }
body .resonance-panel__plate { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; filter: none; }
body .resonance-panel__figure figcaption { justify-content: center; gap: 24px; border-top: 1px solid var(--prog-rule); }
body .resonance-figure-number { min-width: 0; padding-right: 10px; }

/* ---- Research and People, in the Centre register (round 6). Each sits on a full-measure ink rule. ---- */
body .prog-research { max-width: calc(1040px + 2 * var(--gutter)); margin: 0 auto; padding: 48px var(--gutter) 0; text-align: center; }
body .prog-research { padding-bottom: 72px; }
body .prog-research::before { content: ''; display: block; height: 1px; background: var(--prog-ink); margin-bottom: 40px; }
body .prog-research h2 { font-family: var(--prog-heading); font-weight: 460; font-size: clamp(32px, 3.2vw, 44px); line-height: .98; letter-spacing: -.04em; margin: 0; }
body .prog-plate { display: block; width: 100%; aspect-ratio: 16 / 10; margin: 28px auto 0; overflow: hidden; background: var(--prog-ink); transition: opacity .2s; }
body .prog-plate img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; filter: none; }
/* The reference under the plate: what it is, then where it lives, both the same link as the plate. */
body .prog-plate-ref { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; color: var(--prog-ink); }
body .prog-plate-ref__label { font-family: var(--prog-serif); font-size: 18px; line-height: 1.3; }
body .prog-plate-ref__url { padding: 0 0 5px; border-bottom: 1px solid var(--prog-ink); font-family: var(--prog-sans); font-size: 13px; line-height: 1.4; color: var(--prog-mute); font-variant-numeric: tabular-nums; transition: color .15s, border-color .15s; }
body .prog-plate-ref:hover .prog-plate-ref__url, body .prog-plate:hover + .prog-plate-ref .prog-plate-ref__url { color: var(--prog-ink); }
body .prog-plate:hover { opacity: .86; }
@media (max-width: 760px) {
  body .prog-research { padding-top: 40px; }
  body .prog-research::before { margin-bottom: 32px; }
  body .prog-research { padding-bottom: 64px; }
  body .prog-plate { aspect-ratio: 4 / 5; object-position: 50% 42%; }
}

/* ---- Footer: the last page of the programme (round 7). The mark, the name, the line, the small print. ---- */
.prog-foot { max-width: calc(1040px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) 44px; text-align: center; color: var(--prog-ink); }
.prog-foot::before { content: ''; display: block; height: 1px; background: var(--prog-ink); margin-bottom: 40px; }
.prog-foot > * { margin: 0; }
.prog-foot__brand { display: flex; flex-direction: column; align-items: center; gap: 14px; font-family: var(--prog-serif); font-size: 21px; line-height: 1.2; }
.prog-foot__brand svg { width: 18px; height: 18px; }
.prog-foot__line { margin-top: 10px; font-family: var(--prog-serif); font-size: 15px; line-height: 1.5; color: var(--prog-mute); }
.prog-foot__legal { margin-top: 32px; font-family: var(--prog-sans); font-size: 12px; line-height: 1.5; letter-spacing: 0; color: var(--prog-mute); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .prog-foot { padding-bottom: 40px; } .prog-foot::before { margin-bottom: 32px; } .prog-foot__brand { font-size: 19px; } .prog-foot__legal { margin-top: 28px; } }

/* The hosting badge Lovable injects at serve time. */
#lovable-badge { display: none !important; }