/* airdatia.com — shared by the home page (gated) and /privacy (public).
   Bricolage Grotesque (SIL OFL), self-hosted: one family, three voices via
   optical size, weight and width. Bump the ?v= on the <link> when this changes. */
@font-face {
  font-family: "Bricolage";
  src: url("/fonts/bricolage-grotesque.woff2") format("woff2-variations"),
       url("/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
:root {
  --paper: #F5F6F3;      /* the logo's own canvas */
  --ink: #1B1D1F;
  --mute: #5B615C;
  --grid: #D6DAD3;
  --signal: #C83D32;     /* the logo's rings; one lit element at a time */
  --on-signal: #F5F6F3;
  --measure: 62ch;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #171A1C; --ink: #ECEEE9; --mute: #A3AAA4; --grid: #2F3437; --signal: #E2564A; --on-signal: #171A1C; }
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Bricolage", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem; line-height: 1.55; font-optical-sizing: auto;
}
.wrap { width: min(72rem, 100% - 2.5rem); margin-inline: auto; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.top nav { display: flex; flex-wrap: wrap; gap: clamp(.75rem, 2.5vw, 1.6rem); }
.top nav a { color: var(--mute); text-decoration: none; padding: .25rem 0; }
.top nav a:hover, .top nav a:focus-visible { color: var(--ink); }
@media (max-width: 40rem) { .top { flex-direction: column; align-items: flex-start; gap: .75rem; } }

.hero { padding: clamp(3rem, 9vw, 7rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
.hero h1, .page h1 {
  margin: 0; max-width: 18ch;
  font-size: clamp(2.5rem, 6.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.022em; font-weight: 560;
  text-wrap: balance;
}
.page h1 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 22ch; }
.page { padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(1.5rem, 4vw, 3rem); }
.hero .lede, .page .lede { margin: 1.4rem 0 0; max-width: 40ch; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.4; }

/* The week strip: the app's own day chips, today lit. */
.week {
  list-style: none; margin: clamp(2rem, 5vw, 3.5rem) 0 0; padding: 0 0 .25rem;
  display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
}
.week::-webkit-scrollbar { display: none; }
.week.scrolls { mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent); }
.week li {
  flex: 0 0 auto; white-space: nowrap;
  padding: .7em 1.1em; border: 1.5px solid var(--grid); border-radius: 999px;
  font-size: clamp(1rem, 1.8vw, 1.3rem); line-height: 1; font-weight: 600; font-stretch: 84%;
  transition: background-color .28s ease, border-color .28s ease, color .28s ease;
}
.week li[aria-current] { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }

.cta {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: clamp(1.6rem, 4vw, 2.6rem);
  padding: .9rem 1.3rem; border-radius: 999px; background: var(--ink); color: var(--paper);
  text-decoration: none; font-weight: 600; font-size: 1.05rem; transition: background-color .2s ease, color .2s ease;
}
.cta svg { width: .95em; height: .95em; fill: currentColor; }
.cta:hover, .cta:focus-visible { background: var(--signal); color: var(--on-signal); }
.fine { margin: .8rem 0 0; color: var(--mute); font-size: .95rem; }

/* Listings layout: the section name sits where a schedule keeps the time. */
.sections section {
  display: grid; grid-template-columns: 1fr; gap: .5rem 3rem;
  padding: clamp(2rem, 4vw, 3rem) 0; border-top: 1px solid var(--grid); scroll-margin-top: 1rem;
}
@media (min-width: 52rem) { .sections section { grid-template-columns: 11rem minmax(0, var(--measure)); } }
.sections h2 { margin: 0; font-size: 1.35rem; line-height: 1.65rem; font-weight: 600; letter-spacing: -0.01em; }
.prose p { margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: inherit; text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 1.5px; text-underline-offset: .15em; }
.prose a:hover { color: var(--signal); }
.prose ol { margin: 0 0 1em; padding-left: 1.3em; }
.prose li { margin: 0 0 .4em; }

/* The beta access key: a secret people copy, so a fixed-width face and
   select-all beat prose styling here. */
.key {
  display: block; margin: .2em 0 1em; padding: .85rem 1rem;
  border: 1.5px solid var(--grid); border-radius: 11px; background: color-mix(in srgb, var(--grid) 35%, transparent);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .95rem; line-height: 1.5;
  word-break: break-all; user-select: all; -webkit-user-select: all;
}

/* Masked secrets: placeholders until "Reveal secrets" fetches the real values. */
.secret { color: var(--mute); letter-spacing: .12em; user-select: none; -webkit-user-select: none; }
span.secret {
  display: inline-block; padding: 0 .55em; border: 1.5px dashed var(--grid); border-radius: 999px; line-height: 1.5;
}
.reveal { margin: 0; }
.reveal button {
  font: inherit; font-weight: 600; padding: .6rem 1.1rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper);
}
.reveal button:hover { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.reveal-fields { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; }
.reveal [hidden] { display: none; }   /* the rule above would otherwise beat [hidden] */
.reveal-fields label { display: grid; gap: .25rem; font-size: .9rem; color: var(--mute); }
.reveal-fields input {
  font: inherit; color: var(--ink); background: transparent; padding: .5rem .7rem; min-width: 11rem;
  border: 1.5px solid var(--grid); border-radius: 10px;
}
.reveal-fields input:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }

footer { border-top: 1px solid var(--grid); padding: 2rem 0 3rem; color: var(--mute); font-size: .92rem; }
footer p { margin: 0 0 .4rem; max-width: 70ch; }
footer a { color: inherit; }

@media (prefers-reduced-motion: reduce) { .week li, .cta { transition: none; } }