/* Layout: single-page scroll, sticky thin nav, hero + alternating sections separated by a mesa-horizon motif */
:root{
  --bg:#12141A; --surface:#1A1D24; --surface-2:#20242D;
  --fg:#E6E6E2; --muted:#8E95A0; --border:#2B2F3A;
  --accent:#D9A441; --accent-ink:#12141A;
  --accent2:#5B7A8C;
  --confirmed:#5FBF7A;
  --partner-bg:#1A1D24; --partner-border:#2B2F3A; --partner-fg:#8E95A0;
  color-scheme: dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#EDEBE3; --surface:#F7F5EF; --surface-2:#F0EDE4;
    --fg:#1B1D24; --muted:#5B6270; --border:#D9D5C8;
    --accent:#A6751E; --accent-ink:#F7F5EF;
    --accent2:#3E5666;
    --confirmed:#2F8F52;
    --partner-bg:#1A1D24; --partner-border:#2B2F3A; --partner-fg:#8E95A0;
    color-scheme: light;
  }
}
:root[data-theme="light"]{
  --bg:#EDEBE3; --surface:#F7F5EF; --surface-2:#F0EDE4;
  --fg:#1B1D24; --muted:#5B6270; --border:#D9D5C8;
  --accent:#A6751E; --accent-ink:#F7F5EF;
  --accent2:#3E5666;
  --confirmed:#2F8F52;
  --partner-bg:#1A1D24; --partner-border:#2B2F3A; --partner-fg:#8E95A0;
  color-scheme: light;
}

*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--fg);
  font-family:'Archivo',system-ui,sans-serif;
  padding-left:max(20px, env(safe-area-inset-left,0px));
  padding-right:max(20px, env(safe-area-inset-right,0px));
}
.wrap{max-width:780px; margin:0 auto}
h1,h2,h3{font-family:'Archivo',system-ui,sans-serif; font-weight:700; text-wrap:balance; margin:0}
a{color:var(--accent)}
.eyebrow{
  font-family:'Roboto Mono',monospace; text-transform:uppercase;
  letter-spacing:.12em; font-size:12px; color:var(--muted);
}

/* nav */
nav{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:5;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:14px; flex-wrap:wrap}
.navname{font-family:'Archivo',sans-serif; font-weight:700; font-size:17px}
.navlinks{display:flex; gap:18px; flex-wrap:wrap}
.navlinks a{color:var(--fg); text-decoration:none; font-size:13px; letter-spacing:.02em}
.navlinks a:hover{color:var(--accent)}

/* hero */
.hero{padding-block:56px 40px}
.hero .eyebrow{margin-bottom:14px}
.hero h1{
  font-family:'Archivo Black',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(36px,7.5vw,58px); line-height:1.05; letter-spacing:-0.005em;
}
.hero p.subtitle{
  font-family:'Archivo',sans-serif; font-style:normal; font-weight:600;
  text-transform:uppercase; letter-spacing:.03em;
  font-size:16px; color:var(--accent); margin-top:10px;
}
.hero p.lede{font-size:18px; line-height:1.55; color:var(--muted); max-width:58ch; margin-top:18px}
.datebar{
  display:flex; gap:0; flex-wrap:wrap; margin-top:32px;
  border:1px solid var(--border); border-radius:4px; overflow:hidden;
}
.datebar div{
  flex:1 1 180px; padding:14px 16px; border-right:1px solid var(--border);
}
.datebar div:last-child{border-right:none}
.datebar .d{font-family:'Roboto Mono',monospace; font-size:13px; color:var(--accent)}
.datebar .p{font-size:14px; margin-top:4px}

/* horizon divider: abstract mesa silhouette, used between sections */
.horizon{height:40px; margin-block:8px 0; opacity:.9}
.horizon svg{width:100%; height:100%; display:block}

section{padding-block:48px}
section h2{font-size:clamp(26px,4vw,34px); font-weight:600; margin-bottom:18px}
section p{line-height:1.7; margin:0 0 14px; max-width:68ch}
section p.muted{color:var(--muted)}

/* trailer */
.video-wrap{
  position:relative; width:100%; padding-top:56.25%; margin-top:16px;
  border-radius:8px; overflow:hidden; background:var(--surface-2);
  border:1px solid var(--border);
}
.video-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* screenings */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px}
@media (max-width:720px){.cards{grid-template-columns:1fr}}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:6px;
  padding:20px; display:flex; flex-direction:column; gap:10px; min-width:0;
}
.card .status{
  font-family:'Roboto Mono',monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; padding:3px 8px; border-radius:99px; width:fit-content;
}
.status.confirmed{background:color-mix(in srgb, var(--confirmed) 22%, transparent); color:var(--confirmed)}
.status.pending{background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--accent)}
.status.past{background:color-mix(in srgb, var(--muted) 20%, transparent); color:var(--muted)}
.status.today{background:color-mix(in srgb, var(--accent2) 30%, transparent); color:var(--accent2)}
.card h3{font-size:19px; font-weight:600}
.card .when{font-family:'Roboto Mono',monospace; font-size:13px; color:var(--muted)}
.card p{font-size:14px; margin:0; color:var(--fg)}
.card p.req{font-weight:700; color:var(--accent)}
.card a.btn-link{font-size:13px; margin-top:auto; text-decoration:underline}

/* support */
.support-box{
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:24px; margin-top:20px;
}
.support-box h3{font-size:16px; margin-bottom:10px}
.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.steps li{display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.6}
.steps .num{
  font-family:'Roboto Mono',monospace; font-size:12px; color:var(--accent-ink);
  background:var(--accent); width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  margin-top:1px;
}
.steps .step-text{flex:1; min-width:0}
.comment-tag{
  font-family:'Roboto Mono',monospace; background:var(--bg); border:1px dashed var(--accent);
  padding:3px 8px; border-radius:4px; color:var(--accent); font-size:13px;
}
.donate-btn{
  display:inline-block; margin-top:22px; background:var(--accent); color:var(--accent-ink);
  font-family:'Roboto Mono',monospace; text-transform:uppercase; letter-spacing:.06em;
  font-size:13px; padding:13px 22px; border-radius:4px; text-decoration:none;
}
.donate-btn:focus-visible, a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.note{font-size:13px; color:var(--muted); margin-top:10px}

/* partners */
.partner-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:20px}
.partner-slot{
  flex:1 1 200px; min-width:0; min-height:132px;
  border:1px solid var(--partner-border); border-radius:6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center;
  padding:20px 16px; font-size:13px; color:var(--partner-fg);
  background:var(--partner-bg); text-decoration:none;
  transition:border-color .15s ease;
}
.partner-slot:hover{border-color:var(--accent)}
.partner-slot img{max-width:100%; max-height:72px; width:auto; object-fit:contain}
.partner-slot span{line-height:1.4}

/* footer */
footer{border-top:1px solid var(--border); padding-block:32px 48px; margin-top:20px}
footer p{font-size:13px; color:var(--muted); line-height:1.7}
