/* 9XLIVES — built from the 9XLIVES design system (tokens.json) */
@font-face{font-family:"Argesta Display";src:url("/fonts/ArgestaDisplay-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"BAZAAR";src:url("/fonts/Bazaar-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Unnamed Light";src:url("/fonts/UnnamedLight-Regular.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/fonts/Poppins-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --ink:#000000; --paper:#ffffff; --on-ink:#ffffff;
  --lime:#edff1c; --cream-100:#f6f4e9;
  --scrim-60:rgba(0,0,0,.6); --scrim-80:rgba(0,0,0,.8);
  --gradient-hero:linear-gradient(0deg,#edff1c 0%,rgba(255,255,255,0) 100%);
  --gradient-services:linear-gradient(180deg,#f6f4e9 25.48%,#edff1c 100%);
  --hairline:1px solid #000000;
  --header-height:82px;
  --f-brand:BAZAAR,"Arial Black",sans-serif;
  --f-display:"Argesta Display","Libre Baskerville",Georgia,serif;
  --f-serif:"Libre Baskerville",Georgia,serif;
  --f-mono:"Unnamed Light","Courier New",monospace;
  --f-sans:Poppins,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:16px;line-height:1.3}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--on-ink);padding:8px 14px;border-radius:999px;z-index:20}
.skip:focus{left:8px}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:var(--paper);min-height:var(--header-height);display:flex;align-items:center;gap:24px;padding:0 clamp(20px,4vw,56px)}
.wordmark{font-family:var(--f-brand);font-weight:700;font-size:40px;line-height:48px;text-decoration:none}
.site-nav{flex:1;display:flex;justify-content:space-evenly;gap:16px;font-family:var(--f-display);font-weight:700;font-size:18px;line-height:25.2px}
.site-nav a{text-decoration:none}
.site-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
.site-nav a:hover{text-decoration:underline;text-underline-offset:4px}

/* Buttons: pills */
.btn{display:inline-flex;align-items:center;justify-content:center;border:var(--hairline);border-radius:999px;text-decoration:none;cursor:pointer;font:inherit}
.btn-primary{background:var(--ink);color:var(--on-ink);height:30px;padding:0 18px;font-family:var(--f-display);font-weight:700;font-size:18px;line-height:25.2px;white-space:nowrap}
.btn-outline{background:transparent;color:var(--ink);font-family:var(--f-sans);font-size:16px;line-height:25.6px;text-transform:uppercase;padding:11px 15px}
.btn-block{display:flex;width:100%}
.btn-outline:hover{background:var(--ink);color:var(--on-ink)}
.btn-primary:hover{background:var(--paper);color:var(--ink)}

/* Eyebrow / tagline */
.eyebrow{font-family:var(--f-mono);font-weight:300;font-size:20px;line-height:26px;text-transform:uppercase;margin:0 0 12px}
.tagline{font-family:var(--f-mono);font-weight:300;font-size:18px;line-height:25.2px;margin:0}
.ruled{border-bottom:var(--hairline);padding-bottom:12px}

/* Hero */
.hero{background:var(--gradient-hero);min-height:calc(100svh - var(--header-height));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px clamp(20px,6vw,120px) 40px;position:relative}
.hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(32px,5vw,48px);line-height:1.3;max-width:20em;margin:0}
.hero h1 em{font-style:italic;font-weight:700}
.scroll{margin-top:56px;width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;text-decoration:none}
.scroll svg{width:22px;height:22px}

/* About */
.about{background:var(--paper);padding:clamp(56px,9vw,120px) clamp(20px,4vw,56px)}
.about .wrap{max-width:760px}
.about h2,.page h1{font-family:var(--f-display);font-weight:700;font-size:30.4px;line-height:39.52px;margin:0 0 20px}
.about p{margin:0 0 16px;font-size:16px;line-height:1.5;max-width:60ch}
.about p.lead{font-size:18px}

/* Services */
.services{background:var(--gradient-services);padding:clamp(56px,8vw,96px) clamp(20px,4vw,56px) clamp(72px,10vw,140px)}
.service-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px;align-items:center;padding:36px 0;border-bottom:var(--hairline)}
.service-row:last-child{border-bottom:0}
.service-row h3{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,5vw,48px);line-height:1.3;margin:0}
.service-row p{font-size:12.8px;line-height:20.48px;margin:0;max-width:36ch}

/* Contact + footer */
.contact{background:var(--cream-100);padding:clamp(56px,8vw,110px) clamp(20px,4vw,56px) 56px}
.contact .wrap{max-width:720px}
.statement{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(40px,7vw,60px);line-height:1;margin:0 0 28px}
#apply-title{font-family:var(--f-brand);font-style:normal;font-weight:700;text-transform:uppercase;word-spacing:.3em;text-wrap:balance}
.contact .lead{font-size:18px;line-height:25.2px;margin:0 0 6px}
.contact .lead a{text-underline-offset:3px}

/* Forms: underline-only */
form{margin-top:36px;display:grid;gap:22px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.field{display:flex;flex-direction:column}
.field label,.fieldset legend{font-size:16px;line-height:25.6px;padding:0}
.field input,.field textarea{font-family:var(--f-sans);font-size:18px;line-height:25.2px;background:transparent;color:var(--ink);border:0;border-bottom:var(--hairline);border-radius:0;padding:8px 0;width:100%}
.field textarea{padding:8px 12px;min-height:75px;resize:vertical;border:0;border-bottom:var(--hairline)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fieldset{border:0;padding:0;margin:0}
.checks{display:flex;gap:28px;margin-top:6px}
.checks label{display:flex;align-items:center;gap:8px;font-size:16px}
.checks input{width:18px;height:18px;accent-color:var(--ink)}
.hp{position:absolute;left:-9999px}
.note{font-size:12.8px;line-height:20.48px;margin:0}

.site-footer{background:var(--cream-100);border-top:var(--hairline);margin:0 clamp(20px,4vw,56px);padding:22px 0 28px;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;font-size:16px;line-height:25.6px}
.site-footer nav{display:flex;gap:24px;flex-wrap:wrap}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-wrap{background:var(--cream-100)}

/* Inner pages */
.page{background:var(--paper);padding:clamp(56px,9vw,120px) clamp(20px,4vw,56px);min-height:60vh}
.page .wrap{max-width:720px}
.page.on-lime{background:var(--gradient-services)}
.page p{max-width:60ch;line-height:1.5;margin:0 0 16px}
.page .sub{font-family:var(--f-display);font-size:24px;line-height:1.3;margin:0 0 20px}
.big-statement{font-family:var(--f-display);font-size:clamp(30px,5vw,48px);line-height:1.3;margin:0 0 20px}

@media (max-width:760px){
  .site-header{flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:6px 16px}
  .wordmark{font-size:32px;line-height:40px}
  .site-nav{order:3;flex-basis:100%;justify-content:flex-start;gap:22px}
  .service-row{grid-template-columns:1fr;gap:12px}
  .row{grid-template-columns:1fr;gap:22px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* Spaces page */
.hero-sub{font-family:var(--f-sans);font-size:18px;line-height:25.2px;max-width:34em;margin:28px 0 0}
.hero .scroll{margin-top:44px}
.spaces-block{background:var(--paper);padding:clamp(40px,6vw,72px) clamp(20px,4vw,56px) 0}
.spaces-block:last-of-type{padding-bottom:clamp(40px,6vw,72px)}
.spaces-block .service-row{align-items:start;border-bottom:0;padding:36px 0 clamp(40px,6vw,72px)}
.spaces-block .row-title{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,5vw,48px);line-height:1.3;margin:0}
.spaces-block .row-body p{font-size:16px;line-height:1.5;max-width:46ch;margin:0 0 16px}
.spaces-block .row-body .btn{display:inline-flex}
.meta{font-family:var(--f-mono);font-weight:300;font-size:20px;line-height:26px;margin:12px 0 0}
#membership,#community{background:var(--cream-100)}

/* Space rows: full-width blocks stacked on each other (ahouse-style) */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.spaces-stack{background:var(--paper)}
.space-row{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;min-height:min(40vh,320px);padding:clamp(24px,4vw,56px) clamp(20px,4vw,56px);background:var(--cream-100);color:var(--ink);text-decoration:none;border-top:var(--hairline);transition:background-color .25s ease,color .25s ease}
.space-row:last-child{border-bottom:var(--hairline)}
.row-left{display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative;z-index:1}
.row-right{display:flex;flex-direction:column;justify-content:flex-end;gap:20px;position:relative;z-index:1}
.tile-meta{font-family:var(--f-mono);font-weight:300;font-size:20px;line-height:26px}
.tile-name{font-family:var(--f-display);font-weight:700;font-size:clamp(44px,7vw,96px);line-height:1.05}
.tile-desc{font-size:16px;line-height:1.5;max-width:46ch}
.tile-cta{align-self:flex-start;transition:background-color .2s ease,color .2s ease}
.space-row:hover,.space-row:focus-visible{background:var(--lime)}
.space-row:hover .tile-cta,.space-row:focus-visible .tile-cta{background:var(--ink);color:var(--on-ink)}
/* With a photo: add class "has-img" and style="--img:url(/images/name.jpg)" */
.space-row.has-img{background:var(--img) center/cover no-repeat;color:var(--on-ink)}
.space-row.has-img::before{content:"";position:absolute;inset:0;background:var(--scrim-60);transition:background-color .25s ease}
.space-row.has-img:hover::before,.space-row.has-img:focus-visible::before{background:var(--scrim-80)}
.space-row.has-img:hover,.space-row.has-img:focus-visible{background:var(--img) center/cover no-repeat}
.space-row.has-img .tile-cta{color:var(--on-ink);border-color:var(--on-ink)}
@media (max-width:760px){.space-row{grid-template-columns:1fr;gap:20px;min-height:0}.row-left{gap:28px}}

/* Compact hero: spaces start right below the fold line */
.hero.hero-compact{min-height:0;padding:clamp(56px,9vw,104px) clamp(20px,6vw,120px) clamp(40px,6vw,72px);background:var(--gradient-hero)}

/* Games page: multicolour banner + black title bar, cream body, TV-static box (matches the old Wix page) */
@font-face{font-family:"HK Grotesk Wide";src:url("/fonts/HKGroteskWide-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
.games-banner{padding:clamp(34px,6vw,96px) 8.5%;background:
  radial-gradient(circle at 100% 100%,rgba(236,0,255,.65) 0%,30.5%,rgba(236,0,255,0) 61%),
  radial-gradient(circle at 47.5833% .833333%,rgba(240,240,34,.91) 0%,41.8%,rgba(240,240,34,0) 88%),
  radial-gradient(circle at 45.25% 58.8333%,#000 0%,30%,rgba(0,0,0,0) 100%),
  radial-gradient(circle at 0% 100%,#00ded3 0%,42%,rgba(0,222,211,0) 70%),
  radial-gradient(circle at 48.9014% 49.5215%,#fff 0%,100%,rgba(255,255,255,0) 100%)}
.games-title{margin:0;background:var(--ink);color:var(--on-ink);text-align:center;font-family:var(--f-brand);font-weight:700;font-size:min(calc(18px + 4.94vw),112px);line-height:1.3}
.games-title span{font-family:"HK Grotesk Wide",Poppins,Arial,sans-serif;font-weight:600}
.games-body{background:var(--cream-100);text-align:center;padding:clamp(40px,5vw,66px) clamp(20px,4vw,56px) clamp(48px,6.8vw,89px)}
.games-lead{font-family:var(--f-display);font-weight:700;font-size:calc(28px + 1.8vw);line-height:1;max-width:min(14em,76vw);margin:0 auto}
.games-lead + .games-lead{margin-top:1em}
.static-box{width:min(575px,84vw);aspect-ratio:3/2;margin:clamp(40px,5vw,66px) auto 0;border-radius:clamp(20px,2.8vw,36px);overflow:hidden}
.static-box img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.games-banner{padding-inline:7%}}

/* Communities header: left-aligned page header above the space blocks */
.hero.hero-compact{align-items:flex-start;text-align:left;justify-content:flex-end;padding:clamp(72px,12vw,160px) clamp(20px,4vw,56px) clamp(40px,6vw,72px)}
.hero.hero-compact h1{font-size:clamp(40px,6.5vw,88px);line-height:1.05;max-width:12em}
.hero.hero-compact .hero-sub{max-width:38em;margin-top:28px}