@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');
:root { --black:#070707; --deep:#11100e; --cream:#f7f5f0; --soft:#e6e0d5; --gold:#afa17c; --line:rgba(255,255,255,.16); --ink:#201d18; }
* { box-sizing:border-box } html { scroll-behavior:smooth } body { margin:0; background:var(--black); color:#f6f1e9; font-family:'DM Sans',Arial,Helvetica,sans-serif; font-size:16px; line-height:1.55 } a { color:inherit; text-decoration:none } img { display:block; max-width:100% } .container { width:min(1240px, calc(100% - 48px)); margin:0 auto } .narrow { width:min(800px, calc(100% - 48px)); margin:0 auto } .eyebrow { margin:0 0 14px; color:var(--gold); font-family:'DM Mono',monospace; font-size:10px; font-weight:500; letter-spacing:.16em; line-height:1.25; text-transform:uppercase } h1,h2 { margin:0; font-family:'Playfair Display',Georgia,'Times New Roman',serif; font-weight:500; letter-spacing:-.045em; line-height:.97 } h1 { font-size:clamp(3.1rem, 8vw, 7.6rem) } h2 { font-size:clamp(2.6rem, 5.4vw, 5.5rem) } h3 { margin:0 0 9px; font-size:1.18rem } p { margin:0 0 18px } em { color:var(--gold); font-style:italic } .light { color:var(--ink); background:var(--cream) } .dark-hex { background-color:#0c0c0b; background-image:linear-gradient(90deg,rgba(7,7,7,.97),rgba(7,7,7,.78)),url('hex.png'); background-position:center,right center; background-size:cover,780px auto; background-repeat:no-repeat }
.site-header { position:sticky; z-index:20; top:0; background:rgba(7,7,7,.96); border-bottom:1px solid rgba(255,255,255,.12); backdrop-filter:blur(12px) } .nav-wrap { width:min(1360px,calc(100% - 42px)); min-height:76px; margin:auto; display:grid; grid-template-columns:170px 1fr auto; gap:28px; align-items:center } .brand { width:145px; line-height:0 } .brand img { width:145px; max-height:49px; object-fit:contain; object-position:left center } nav { display:flex; justify-content:center; gap:clamp(15px,2vw,32px) } nav a { padding:5px 0; color:#d9d2c7; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-bottom:1px solid transparent } nav a:hover,nav a.active { color:#fff; border-color:var(--gold) } .lounge-button,.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:0 17px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:transform .15s ease } .lounge-button,.gold { color:#17140f; background:var(--gold) } .button:hover,.lounge-button:hover { transform:translateY(-2px) } .dark-button { color:#fff; background:#181511 } .text-link { display:inline-flex; gap:8px; padding-bottom:5px; color:var(--ink); border-bottom:1px solid var(--gold); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase } .light-link { color:var(--gold) }
.home-hero,.lounge-hero-static { position:relative; min-height:min(900px,calc(100svh - 76px)); overflow:hidden; display:flex; align-items:flex-end; background:#050505 } .hero-photo,.lounge-hero-static>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 46%; opacity:.7 } .hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,5,5,.98) 0%,rgba(5,5,5,.82) 34%,rgba(5,5,5,.16) 76%),linear-gradient(0deg,rgba(5,5,5,.96),transparent 60%) } .hero-hex,.hex-layer { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 40%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.38)),url('hex.png') right center/cover no-repeat; opacity:.8; mask-image:linear-gradient(90deg,transparent 35%,#000 75%); -webkit-mask-image:linear-gradient(90deg,transparent 35%,#000 75%) } .home-content,.lounge-content { position:relative; z-index:2; width:100%; padding-top:130px; padding-bottom:64px } .date-line { margin-bottom:20px; color:#eee8de; font-size:10px; letter-spacing:.09em; text-transform:uppercase } .date-line span { margin-left:23px } .home-content h1 { max-width:750px; margin-bottom:20px } .hero-copy { max-width:500px; color:#d3cabe; font-size:16px } .hero-actions { display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:26px } .hero-partners { display:flex; align-items:center; gap:12px; min-height:70px; padding-left:16px; border-left:1px solid rgba(255,255,255,.28) } .hero-partners>span { width:52px; color:#d5cdbf; font-size:7px; font-weight:700; letter-spacing:.12em; line-height:1.25; text-transform:uppercase } .foundation-hero { width:86px; height:62px; object-fit:contain } .city-hero { width:93px; height:62px; object-fit:contain; background:transparent } .scroll-note { position:absolute; right:max(24px,calc((100vw - 1240px)/2)); bottom:25px; z-index:2; margin:0; color:#ddd5ca; font-size:9px; letter-spacing:.1em; text-transform:uppercase }
.statement,.expectations,.legacy,.impact,.includes,.enquiries,.legal { padding:118px 0 } .two-col { display:grid; grid-template-columns:.85fr 1.45fr; gap:clamp(54px,9vw,150px); align-items:start } .statement h2 { max-width:800px; margin-bottom:28px } .statement p:not(.eyebrow),.expectations p:not(.eyebrow) { max-width:630px; color:#5b554d; font-size:17px } .section-number { display:block; color:#b7a47b; font-family:Georgia,serif; font-size:4rem; line-height:1 } .facts,.registration,.manifesto,.event-band,.pillars,.partners,.closing,.lounge-intro,.lounge-form { padding:112px 0 } .section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:60px; margin-bottom:58px } .section-heading>p { max-width:400px; margin:0; color:#bdb5a9 } .fact-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line) } .fact-grid>div { min-height:170px; padding:26px 22px 24px 0; border-right:1px solid var(--line) } .fact-grid>div:not(:first-child) { padding-left:22px } .fact-grid>div:last-child { border:0 } .fact-grid span,.number-list b,.three-grid b,.four-grid b { display:block; margin-bottom:24px; color:var(--gold); font-size:10px; letter-spacing:.14em; text-transform:uppercase } .fact-grid strong { display:block; font-size:1.45rem; letter-spacing:-.04em } .fact-grid p { margin:4px 0; color:#aaa197; font-size:12px } .number-list { border-top:1px solid rgba(0,0,0,.18) } .number-list article { display:grid; grid-template-columns:40px 1fr; gap:10px; padding:25px 0; border-bottom:1px solid rgba(0,0,0,.18) } .number-list h3 { margin:0 0 8px; font-family:Georgia,serif; font-size:1.75rem; font-weight:500 } .number-list p { margin:0; color:#5d564e } .number-list a { display:inline-block; margin-top:10px; color:#4e3c1e; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase } .registration-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(54px,10vw,155px); align-items:center } .registration-grid>div:last-child>p { color:#bfb6ab; font-size:16px } .simple-form { max-width:580px } .email-row { display:grid; grid-template-columns:1fr auto } input,textarea,select { width:100%; min-height:52px; padding:13px 15px; color:#f7f0e7; background:#121110; border:1px solid rgba(255,255,255,.28); border-radius:0; font:inherit } select { color:#26211b; background:#fff } textarea { resize:vertical; min-height:100px } .consent { display:block; margin-top:12px; color:#bfb7ac; font-size:11px; line-height:1.4 } .consent input { width:14px; min-height:14px; margin:0 7px 0 0; vertical-align:middle; accent-color:var(--gold) } .consent a { color:var(--gold); text-decoration:underline } .form-note { margin:10px 0 0; color:#91897e; font-size:11px }
.inner-hero { position:relative; min-height:570px; overflow:hidden; display:flex; align-items:flex-end; background-image:linear-gradient(90deg,rgba(5,5,5,.98),rgba(5,5,5,.84) 32%,rgba(5,5,5,.14) 100%),linear-gradient(0deg,rgba(5,5,5,.82),transparent 60%),var(--hero-image); background-position:center; background-size:cover; isolation:isolate } .inner-hero-content { position:relative; z-index:2; padding-top:120px; padding-bottom:170px; transform:translateY(-40px) } .inner-hero-content h1 { max-width:950px; margin-bottom:22px } .inner-hero-content>p:last-child { max-width:590px; margin:0; color:#dcd4c8; font-size:17px } .story-block { padding:110px 0 } .story-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,10vw,160px); align-items:center } blockquote { min-height:340px; margin:0; padding:46px; display:flex; flex-direction:column; justify-content:center; color:#f6f0e7; background:#1b1813; font-family:Georgia,serif; font-size:5rem; line-height:.55 } blockquote span { margin-top:38px; font-size:clamp(2rem,3.4vw,3.5rem); line-height:1.06; letter-spacing:-.04em } .story-grid>div p { color:#5b554d; font-size:17px } .image-statement { position:relative; min-height:500px; display:flex; align-items:flex-end; background-image:linear-gradient(90deg,rgba(5,5,5,.92),rgba(5,5,5,.49) 45%,rgba(5,5,5,.08)),linear-gradient(0deg,rgba(5,5,5,.6),transparent 58%),var(--statement-image); background-size:cover; background-position:center; overflow:hidden } .statement-content { position:relative; z-index:2; width:100%; padding-bottom:62px } .statement-content h2 { max-width:650px; font-size:clamp(2.4rem,4.6vw,4.8rem) } .three-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid rgba(0,0,0,.2) } .three-grid article { min-height:230px; padding:28px 27px 20px 0; border-right:1px solid rgba(0,0,0,.2) } .three-grid article:not(:first-child) { padding-left:27px } .three-grid article:last-child { border:0 } .three-grid h3 { font-family:Georgia,serif; font-size:1.7rem; font-weight:500 } .three-grid p { max-width:320px; color:#5d564e; font-size:14px } .closing-grid { display:flex; align-items:end; justify-content:space-between; gap:40px } .closing h2 { max-width:760px } .manifesto p,.event-band p,.lounge-intro p,.partners p { max-width:600px; color:#c5bdb1; font-size:17px } .narrow>h2 { margin-bottom:25px } .impact .icon { display:block; margin-bottom:20px; color:#916f38; font-size:2rem } .cause-statement { min-height:480px } .partner-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(54px,10vw,155px); align-items:center } .partner-logos { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:end } .foundation-partner { width:195px; height:128px; object-fit:contain; object-position:left center } .city-partner { width:100%; max-height:128px; object-fit:contain; object-position:left center } .partner-logos p { margin:16px 0 0; font-size:13px } .center { text-align:center } .center p:not(.eyebrow) { max-width:620px; margin:0 auto 24px; color:#5d564e } .four-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line) } .four-grid article { min-height:245px; padding:31px 28px 27px 0; border-right:1px solid var(--line); border-bottom:1px solid var(--line) } .four-grid article:nth-child(even) { padding-left:28px; border-right:0 } .four-grid article:nth-last-child(-n+2) { border-bottom:0 } .four-grid h3 { font-family:Georgia,serif; font-size:1.7rem; font-weight:500 } .four-grid p { max-width:350px; color:#aca398; font-size:14px }
.lounge-hero-static { min-height:590px } .lounge-hero-static>img { object-position:center; opacity:.78 } .lounge-content { position:relative; z-index:2; padding-top:130px; padding-bottom:80px } .lounge-content h1 { margin-bottom:20px } .lounge-content>p:last-child { max-width:540px; margin:0; color:#e3dbcf; font-size:17px } .lounge-features { display:flex; flex-wrap:wrap; gap:11px 21px; padding-top:17px; border-top:1px solid var(--line); color:#ead9b8; font-size:13px } .tunnel-image { position:relative; min-height:610px; overflow:hidden; background:#050505 } .tunnel-image>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 57% } .tunnel-image:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,5,5,.88),rgba(5,5,5,.08) 72%) } .tunnel-overlay { position:relative; z-index:1; width:min(480px,calc(100% - 48px)); padding:150px 0 150px max(24px,calc((100vw - 1240px)/2)) } .tunnel-overlay h2 { font-size:clamp(2.2rem,4vw,4rem) } .include-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(0,0,0,.18) } .include-grid div { display:grid; grid-template-columns:45px 1fr; min-height:82px; align-items:center; gap:10px; padding:17px 20px 17px 0; color:#8f713b; font-size:11px; letter-spacing:.08em; border-bottom:1px solid rgba(0,0,0,.18) } .include-grid div:nth-child(odd) { border-right:1px solid rgba(0,0,0,.18); padding-right:26px } .include-grid div:nth-child(even) { padding-left:26px } .include-grid span { color:#514b43; font-size:14px; letter-spacing:0 } .detail-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:36px; background:#1b1813; border-top:2px solid var(--gold) } .detail-form label { display:flex; flex-direction:column; gap:7px; color:#d8cec0; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase } .detail-form .wide { grid-column:1/-1 } .light-form { color:#f5f0e7; background:#000; border-color:var(--gold) } .light-form label { color:#d9cfbe } .light-form input,.light-form textarea,.light-form select { color:#f5f0e7; background:#111; border-color:#5d584f } .light-form .dark-button { color:#17130e; background:var(--gold) } .enquiry-grid { display:grid; grid-template-columns:.65fr 1.35fr; gap:clamp(50px,10vw,150px) } .enquiry-grid aside>div { max-width:320px; margin-top:34px } .enquiry-grid aside h3 { font-family:Georgia,serif; font-size:1.5rem; font-weight:500 } .enquiry-grid aside p { color:#5b554d } .fine { color:#9a9186!important; font-size:12px!important } .legal { min-height:500px } .prose h2 { margin-bottom:33px } .prose h3 { margin:32px 0 8px; font-family:Georgia,serif; font-size:1.6rem; font-weight:500 } .prose p { color:#5c554c; font-size:16px } .thank-you-static { min-height:70vh; display:flex; align-items:center } .thank-you-static>div { padding-top:110px; padding-bottom:110px } .thank-you-static h1 { max-width:750px; margin-bottom:22px } .thank-you-static p:not(.eyebrow) { max-width:600px; color:#c7beb2; font-size:18px } .actions { display:flex; flex-wrap:wrap; gap:24px; align-items:center; margin-top:34px }
.site-footer { color:#e9e2d8; background:#050505 } .footer-support { padding:70px 0; background:#10100f; border-top:1px solid var(--line); border-bottom:1px solid var(--line) } .footer-support-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:50px; align-items:center } .footer-support h2 { font-size:clamp(2rem,3.5vw,3.35rem) } .footer-partners { display:flex; align-items:center; justify-content:flex-start; gap:55px } .foundation-footer { width:190px; height:112px; object-fit:contain } .city-footer { width:230px; height:112px; object-fit:contain } .footer-grid { display:grid; grid-template-columns:1fr .8fr .55fr; gap:60px; padding:60px 0 47px } .footer-event-logo { width:200px; max-height:73px; object-fit:contain; object-position:left center; margin-bottom:16px } .footer-grid p,.brought-by p { color:#9e958a; font-size:10px; letter-spacing:.05em; line-height:1.7; text-transform:uppercase } .footer-nav { display:grid; grid-template-columns:1fr 1fr; gap:10px } .footer-nav a { color:#d7d0c7; font-size:12px } .brought-by { justify-self:end; width:155px } .brought-by img { width:155px; height:54px; object-fit:contain; object-position:right center } .footer-bottom { display:flex; justify-content:space-between; gap:25px; padding:18px 0; color:#766f67; border-top:1px solid var(--line); font-size:9px; letter-spacing:.04em; text-transform:uppercase }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap }
@media (max-width:900px) { .nav-wrap { grid-template-columns:1fr auto; min-height:67px } nav { grid-row:2; grid-column:1/-1; justify-content:flex-start; overflow:auto; padding:0 0 12px; gap:18px; white-space:nowrap } .lounge-button { display:none } .site-header { position:relative } .home-hero,.lounge-hero-static { min-height:720px } .footer-support-grid,.footer-grid { grid-template-columns:1fr; gap:35px } .brought-by { justify-self:start } .footer-partners { justify-content:flex-start } .section-heading { display:block } .section-heading>p { margin-top:20px } }
@media (max-width:600px) { .container,.narrow { width:min(100% - 32px,1240px) } .nav-wrap { width:min(100% - 30px,1360px) } .brand,.brand img { width:132px } nav a { font-size:9px } h1 { font-size:clamp(3.4rem,15vw,5rem) } h2 { font-size:clamp(2.5rem,11vw,3.8rem) } .home-hero,.lounge-hero-static,.inner-hero { min-height:calc(100svh - 104px) } .home-content,.lounge-content { padding-top:90px; padding-bottom:55px } .inner-hero-content { padding-top:90px; padding-bottom:120px; transform:translateY(-18px) } .date-line { font-size:8px; line-height:1.8 } .date-line span { display:block; margin-left:0 } .hero-copy { font-size:14px } .hero-actions { gap:14px } .hero-partners { min-height:58px; padding-left:10px; gap:7px } .hero-partners>span { width:43px; font-size:6px } .foundation-hero { width:68px; height:54px } .city-hero { width:72px; height:54px } .scroll-note { display:none } .statement,.expectations,.legacy,.impact,.includes,.enquiries,.legal,.facts,.registration,.manifesto,.event-band,.pillars,.partners,.closing,.lounge-intro,.lounge-form { padding:75px 0 } .two-col,.registration-grid,.story-grid,.partner-grid,.enquiry-grid { grid-template-columns:1fr; gap:40px } .fact-grid { grid-template-columns:1fr } .fact-grid>div,.fact-grid>div:not(:first-child) { min-height:112px; padding:20px 0; border-right:0; border-top:1px solid var(--line) } .fact-grid>div:first-child { border-top:0 } .email-row { grid-template-columns:1fr } .email-row .button { width:100% } blockquote { min-height:250px; padding:30px; font-size:4rem } .three-grid,.four-grid { grid-template-columns:1fr } .three-grid article,.three-grid article:not(:first-child),.four-grid article,.four-grid article:nth-child(even) { min-height:0; padding:26px 0; border-right:0; border-bottom:1px solid rgba(0,0,0,.18) } .four-grid article { border-color:var(--line) } .four-grid article:nth-last-child(-n+2) { border-bottom:1px solid var(--line) } .four-grid article:last-child,.three-grid article:last-child { border-bottom:0 } .image-statement { min-height:410px } .statement-content { padding-bottom:42px } .partner-logos { grid-template-columns:1fr; gap:34px } .tunnel-image { min-height:520px } .tunnel-overlay { width:min(340px,calc(100% - 48px)); padding:330px 0 44px 24px } .include-grid { grid-template-columns:1fr } .include-grid div,.include-grid div:nth-child(odd),.include-grid div:nth-child(even) { min-height:68px; padding:15px 0; border-right:0 } .detail-form { grid-template-columns:1fr; padding:24px 18px } .footer-partners { gap:18px; flex-wrap:wrap } .foundation-footer { width:150px; height:92px } .city-footer { width:190px; height:92px } .footer-bottom { flex-direction:column; gap:7px } }


/* Static export alignment repairs */
.home-content.container,
.lounge-content.container,
.statement-content.container {
  width: min(1240px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

/* The compact gold line above every body heading is a protected brand element. */
main .eyebrow {
  color: #afa17c !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  line-height: 1.25 !important;
}

/* Give explanatory copy the same deliberate breathing room below section headers. */
main h2 + p:not(.eyebrow) { margin-top: 24px; }

/* Static Formspree confirmations appear only after the relevant form submits. */
.static-form-notice {
  margin: 16px 0 0;
  color: #afa17c;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  line-height: 1.5;
}
.static-form-notice.is-error { color: #f2b6a8; }

/* Enquiries fields sit directly on the black hex section—no panel or gold top rule. */
.enquiries .detail-form.light-form { background: transparent; border-top: 0; }

/* The LGNDS Lounge form uses the same transparent-on-hex treatment. */
.lounge-form .detail-form { background: transparent; border-top: 0; }

/* Match the live site: a clean desktop header and identical hero baselines. */
@media (min-width: 901px) {
  /* Do not reserve a dark header band in the direct-open desktop pages. */
  .site-header { position: absolute; inset: 0 0 auto; width: 100%; height: 76px; margin: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }

  /* The live experience uses a centred editorial reading grid, not the full site frame. */
  .home-content.container,
  .lounge-content.container,
  .inner-hero-content {
    width: min(1024px, calc(100% - 48px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* The live interior heroes reserve a full editorial canvas before their copy. */
  .inner-hero { min-height: 947px; align-items: flex-start; }
  .inner-hero-content { margin-top: 128px !important; padding-top: 142px; padding-bottom: 236px; transform: translateY(-70px); }

  /* The Lounge hero uses the same 700px stage and text baseline as the live page. */
  .lounge-hero-static { min-height: 700px; }
  .lounge-content { padding-bottom: 96px; transform: translateY(-42px); }

  /* Enquiries uses the same black hex language as the other dark content sections. */
  .enquiries.dark-hex { color: #f5f0e7; }
  .enquiries.dark-hex aside h3 { color: #f5f0e7; }
  .enquiries.dark-hex aside p { color: #c6beb3; }
  .enquiries.dark-hex .fine { color: #9d958a !important; }
}

/* Keeps the header balanced at narrower laptop widths and prevents nav text clipping. */
@media (min-width: 901px) and (max-width: 1120px) {
  .nav-wrap { grid-template-columns: 148px 1fr auto; gap: 16px; width: min(100% - 36px, 1360px); }
  .brand, .brand img { width: 130px; }
  nav { gap: 12px; }
  nav a { font-size: 10px; }
  .lounge-button { padding-left: 13px; padding-right: 13px; font-size: 10px; }
}

@media (max-width: 600px) {
  .home-content.container,
  .lounge-content.container,
  .statement-content.container { width: min(100% - 32px, 1240px); }

  /* A visible no-script navigation grid is clearer than a clipped horizontal rail. */
  .nav-wrap { display:block; width:100%; min-height:0; padding:10px 16px 12px; }
  .brand, .brand img { width:132px; }
  .brand { display:block; margin-bottom:10px; }
  nav { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; overflow:visible; padding:0; white-space:normal; }
  nav a { min-width:0; padding:8px 3px; font-size:8px; letter-spacing:.02em; text-align:center; border-top:1px solid rgba(255,255,255,.11); }
  .lounge-content { transform: translateY(-24px); }
}