/* Page styles for index.html. Ported from the inline styles in the Claude Design source
   (LI Night Market Page.dc.html). Tokens and section patterns live in tokens.css and
   base.css, which are copied unchanged from the design system. */

[hidden]{display:none !important}

/* ---------------- header ---------------- */
.wordmark img{display:block;height:44px;width:auto}

/* ---------------- hero ---------------- */
.hero-split{display:grid;grid-template-columns:2fr 1fr;gap:var(--s-64);align-items:center;text-align:left;width:100%;max-width:1160px;margin:0 auto;box-sizing:border-box}
.hero-title{
  font-family:var(--font-display);font-weight:400;font-size:96px;line-height:.92;
  letter-spacing:-.008em;text-transform:uppercase;margin:0;transition:opacity .8s ease-in;
}
.hero-title .dot{color:var(--red-dark)}
.js .hero-title{opacity:0}
.js .hero-title.is-in{opacity:1}
@media (max-width:900px){
  .hero-split{grid-template-columns:minmax(0,1fr);gap:var(--s-40);text-align:center}
  /* 72px per the design; capped so "Celebrate." fits a 320px screen */
  .hero-title{font-size:min(72px,19vw)}
}

.hero-logo{position:relative;width:100%;aspect-ratio:1596.52 / 501.639}
.hero-logo > img{display:block;width:100%;height:auto}
.hl-part{position:absolute;inset:0}
.hl-part svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* ---------------- shared display head and label ---------------- */
.display-head{
  font-family:var(--font-display);font-weight:400;font-size:var(--fs-bill);
  line-height:.98;text-transform:uppercase;letter-spacing:-.008em;margin:0;
}
.display-head em{font-style:normal;color:var(--red-dark)}
.eyebrow{font-size:var(--fs-12);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:0}

/* ---------------- li.02 location ---------------- */
.loc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--s-48) var(--s-64);align-items:center}
.loc-map{margin:0}
#h-location{max-width:9ch}
.counties{margin-top:var(--s-64);border-top:1px solid var(--rule-dark)}
.county{
  display:grid;grid-template-columns:minmax(120px,1fr) 4fr;gap:var(--s-24) var(--s-48);
  padding:var(--s-24) 0;border-bottom:1px solid var(--rule-dark);align-items:start;
}
.county .eyebrow{font-variant-numeric:tabular-nums;line-height:31px}
.county-towns{max-width:none;font-weight:300;font-size:24px;line-height:1.3;letter-spacing:-.01em;text-wrap:pretty;margin:0}

/* ---------------- li.03b pillars: no numeral column, the body takes the full row ---------------- */
#experience .bill-row{grid-template-columns:1fr}
#experience .bill-body{grid-column:1;text-align:left;justify-self:start}

/* ---------------- ruled label rows: li.08 roles and li.10 faq groups ---------------- */
.rows{margin-top:var(--s-64);display:flex;flex-direction:column;gap:var(--s-64)}
.row{display:grid;grid-template-columns:minmax(160px,1fr) 4fr;gap:var(--s-24) var(--s-48);align-items:start}
.row-label{
  margin:0;padding-top:var(--s-16);border-top:6px solid currentColor;
  font-family:var(--font-display);font-weight:400;font-size:40px;line-height:.98;
  text-transform:uppercase;letter-spacing:-.008em;text-wrap:balance;
}
.role-body{border-top:1px solid var(--line-light);padding-top:var(--s-16)}
.role-body h3{font-weight:300;font-size:var(--fs-d2);line-height:1.2;letter-spacing:-.01em;margin:0}
.role-body p{max-width:62ch}

/* ---------------- li.10 faq ---------------- */
.faq-intro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--s-48) var(--s-64);align-items:end}
#h-faq{max-width:10ch}
.faq-list{border-top:1px solid var(--line-dark)}
.faq-item{border-bottom:1px solid var(--line-dark)}
.faq-q{
  display:grid;grid-template-columns:1fr auto;gap:var(--s-24);align-items:baseline;
  width:100%;min-height:56px;padding:var(--s-16) 0;border:0;background:transparent;
  color:inherit;font:inherit;text-align:left;cursor:pointer;
}
.faq-q:hover{color:var(--red-dark)}
.faq-q-text{font-weight:300;font-size:var(--fs-d2);line-height:1.2;letter-spacing:-.01em;text-wrap:pretty}
.faq-q-mark{font-weight:300;font-size:var(--fs-d2);line-height:1;width:1ch;text-align:center}
.faq-a{margin:0;padding:0 0 var(--s-24);max-width:62ch;color:var(--grey-dark)}

/* ---------------- li.09 join ---------------- */
#join{padding:0;overflow:hidden}
.join-hero{position:relative;height:420px;overflow:hidden;display:flex;align-items:flex-end}
.join-scrim-v{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,6,.34) 0%,rgba(6,6,6,.62) 55%,rgba(6,6,6,.9) 100%);
}
.join-hero-inner{position:relative;z-index:3;max-width:1288px;margin:0 auto;width:100%;padding:0 var(--s-64) var(--s-40);box-sizing:border-box}
#h-join{letter-spacing:-.01em}
.join-body{max-width:1288px;margin:0 auto;padding:var(--s-64) var(--s-64) var(--s-96);box-sizing:border-box}
.join-rule{height:1px;background:var(--rule-dark)}
.join-note{flex-basis:100%;font-weight:600}
@media (max-width:720px){
  .join-hero-inner{padding:0 var(--s-24) var(--s-40)}
  .join-body{padding:var(--s-48) var(--s-24) var(--s-64)}
}

/* ---------------- application modals ---------------- */
.modal{
  position:fixed;inset:0;z-index:60;background:rgba(13,13,13,.82);
  display:flex;align-items:center;justify-content:center;padding:var(--s-24);box-sizing:border-box;
}
.dialog{
  position:relative;width:100%;max-width:760px;max-height:100%;overflow:auto;
  background:var(--paper);color:var(--ink);padding:var(--s-48);box-sizing:border-box;
  color-scheme:light; /* the page is color-scheme:dark, which paints empty checkboxes dark */
}
.dialog-close{
  position:absolute;top:var(--s-16);right:var(--s-16);min-width:44px;min-height:44px;
  border:0;background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-17);font-weight:600;cursor:pointer;
}
.dialog-close:hover{color:var(--red)}
.dialog h2{margin-top:var(--s-24)}
.dialog .lede,.dialog .step-note{color:var(--grey-light);max-width:62ch}
.dialog .btn{background:var(--ink);color:var(--paper)}
.dialog .btn:hover,.dialog .btn:active{background:var(--red);color:var(--paper)}

.progress{margin-top:var(--s-32)}
.progress-label{
  display:flex;justify-content:space-between;gap:var(--s-16);max-width:none;
  font-size:var(--fs-12);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;margin:0 0 var(--s-8);
}
.progress-track{height:2px;background:var(--line-light)}
.progress-bar{height:2px;background:var(--ink);width:0}

.apply-form{margin-top:var(--s-32)}
.step{border:0;padding:0;margin:0;min-width:0}
.step-note{margin-bottom:var(--s-32)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-24)}
.field{display:flex;flex-direction:column;gap:var(--s-8);min-width:0;border:0;padding:0;margin:0}
.field.wide{grid-column:1 / -1}
.field-label{font-size:var(--fs-17);padding:0}
.field-label .opt{color:var(--grey-light)}
.field-hint{margin:0;font-size:var(--fs-12);letter-spacing:.02em;color:var(--grey-light)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=number],.field input[type=file],.field textarea{
  min-height:48px;padding:var(--s-8) var(--s-16);font:inherit;color:var(--ink);background:var(--paper);
  border:1px solid var(--ink);border-radius:0;width:100%;box-sizing:border-box;
}
.field textarea{padding:var(--s-16);line-height:1.55;resize:vertical}
.choices{display:flex;flex-wrap:wrap;gap:var(--s-8)}
.choice{
  display:inline-flex;align-items:center;gap:var(--s-8);min-height:44px;padding:0 var(--s-16);
  border:1px solid var(--ink);cursor:pointer;font-size:var(--fs-17);
}
.choice input,.agree input{accent-color:var(--red);width:16px;height:16px;margin:0;flex:none}
.agrees{display:flex;flex-direction:column;border-top:1px solid var(--line-light)}
.agree{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s-16);align-items:start;
  padding:var(--s-16) 0;border-bottom:1px solid var(--line-light);cursor:pointer;
  font-size:var(--fs-17);line-height:1.45;
}
.agree input{margin-top:5px}
.form-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-16);
  margin-top:var(--s-24);padding-top:var(--s-16);border-top:1px solid var(--line-light);
}
.btn-back{
  min-height:48px;padding:0 var(--s-24);border:1px solid var(--ink);background:transparent;
  color:var(--ink);font:inherit;font-weight:600;cursor:pointer;
}
.btn-back:hover{color:var(--red);border-color:var(--red)}
.form-dest{color:var(--grey-light);font-size:var(--fs-12);letter-spacing:.02em;margin:0}
.form-error{flex-basis:100%;margin:0;color:var(--red);font-weight:600}
.t-k .form-error{color:var(--red-dark)}
.bot-field{position:absolute;left:-9999px}
/* Turnstile renders here, outside the flex rows, and stays zero height unless it needs the
   visitor to interact. main.js sets .is-interactive while a challenge is showing. */
.ts-widget.is-interactive{margin-top:var(--s-16)}

.role-faq{margin-top:var(--s-64)}
.role-faq .eyebrow{margin:0 0 var(--s-16)}
.role-faq-list{border-top:1px solid var(--line-light)}
.role-faq details{border-bottom:1px solid var(--line-light)}
.role-faq summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:var(--s-24);
  align-items:baseline;padding:var(--s-24) 0;font-weight:300;font-size:var(--fs-17);
  line-height:1.2;letter-spacing:-.01em;min-height:44px;
}
.role-faq summary::-webkit-details-marker{display:none}
.role-faq summary:hover{color:var(--red)}
.role-faq details p{max-width:62ch;padding:0 0 var(--s-32);margin:0;color:var(--grey-light)}

@media (max-width:600px){
  .dialog{padding:var(--s-48) var(--s-24) var(--s-32)}
  .fields{grid-template-columns:1fr}
}

/* ---------------- footer ---------------- */
.site-foot{position:relative}
.foot-cols{display:grid;grid-template-columns:minmax(280px,2fr) minmax(0,3fr)}
.foot-brand{
  padding:var(--s-64) var(--s-48);display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--s-48);border-right:1px solid var(--line-dark);box-sizing:border-box;
}
.foot-brand > a{display:block;width:100%;max-width:420px}
.foot-brand img{display:block;width:100%;height:auto}
.foot-brand p{margin:0;max-width:32ch;color:var(--grey-dark)}
.foot-main{
  padding:var(--s-64) var(--s-64) var(--s-48);box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-48);
}
.foot-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-48)}
.foot-col{display:flex;flex-direction:column}
.foot-col .eyebrow{margin:0 0 var(--s-8);color:var(--paper)}
.foot-col a{display:inline-flex;align-items:center;min-height:44px;color:var(--grey-dark);text-decoration:none}
.foot-col a:hover{color:var(--red-dark)}
.foot-col .foot-social{margin-top:0}
.foot-col .foot-social a{justify-content:flex-start}
.foot-col .foot-social svg{width:24px;height:24px}
.foot-legal{margin:0;font-size:var(--fs-12);color:var(--grey-dark)}

/* ---------------- small screens ----------------
   The design source only had breakpoints for the hero. These keep the two column
   label rows and the footer from crushing their content under 720px. */
@media (max-width:720px){
  .row{grid-template-columns:1fr}
  .county{grid-template-columns:1fr;gap:var(--s-8)}
  .foot-cols{grid-template-columns:1fr}
  .foot-brand{border-right:0;border-bottom:1px solid var(--line-dark);padding:var(--s-48) var(--s-24)}
  .foot-main{padding:var(--s-48) var(--s-24)}
}