/* CrewPack — site tokens mirror the app (docs/v1-scope.md §7). Dark-first. */
:root{
  --bg:#0A1626; --surface:#122236; --surface-2:#1B2F47; --line:#243A54; --line-soft:#1A2C42;
  --text:#E8EEF5; --dim:#8FA3BA; --faint:#6A809A;
  --accent:#4FB3FF; --warn:#F2A93B;
  --ff-sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#EEF2F7; --surface:#FFFFFF; --surface-2:#F5F8FC; --line:#D3DEEB; --line-soft:#E4EBF4;
    --text:#0D1A2B; --dim:#566D88; --faint:#8296AE;
    --accent:#0B64B8; --warn:#9A5E06;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--ff-sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:720px; margin:0 auto; padding:0 24px 80px}

/* masthead */
.bar{border-bottom:1px solid var(--line); margin-bottom:48px}
.bar-in{
  max-width:720px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
}
.mark{
  font-family:var(--ff-mono); font-weight:600; font-size:14px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text);
  text-decoration:none;
}
.mark em{font-style:normal; color:var(--accent)}
.bar nav{margin-left:auto; display:flex; gap:18px}
.bar nav a{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); text-decoration:none;
}
.bar nav a:hover,.bar nav a[aria-current="page"]{color:var(--accent)}

h1{
  font-size:clamp(30px,5.5vw,46px); line-height:1.08; font-weight:800;
  letter-spacing:-.025em; margin:0 0 18px; text-wrap:balance;
}
h2{
  font-size:20px; font-weight:700; letter-spacing:-.01em;
  margin:40px 0 12px; text-wrap:balance;
}
h3{font-size:16px; font-weight:600; margin:26px 0 8px}
p{margin:0 0 16px; max-width:66ch}
ul{margin:0 0 16px; padding-left:22px; max-width:66ch}
li{margin:0 0 8px}
li::marker{color:var(--faint)}
a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
strong{font-weight:600}
code{
  font-family:var(--ff-mono); font-size:.87em; background:var(--surface-2);
  border:1px solid var(--line-soft); border-radius:3px; padding:.08em .34em;
}

.lede{font-size:20px; line-height:1.55; color:var(--dim); max-width:56ch; margin:0 0 32px}
.lede strong{color:var(--text); font-weight:600}
.eyebrow{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin:0 0 14px;
}
.updated{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em;
  color:var(--faint); margin:0 0 36px;
}

/* the one brand flourish: airport codes */
.codes{
  display:flex; gap:10px; flex-wrap:wrap; margin:0 0 14px;
  font-family:var(--ff-mono); font-weight:600; font-size:clamp(26px,6vw,40px);
  letter-spacing:.05em; color:var(--accent);
}
.codes span:not(:last-child)::after{content:" ·"; color:var(--line)}

.card{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:3px;
  padding:16px 18px; margin:0 0 20px;
}
.card p:last-child{margin-bottom:0}
.card .label{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint); display:block; margin-bottom:6px;
}

.scroll{overflow-x:auto; margin:0 0 20px; border:1px solid var(--line); border-radius:3px; background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:15px; min-width:460px}
th,td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top}
th{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint); font-weight:500;
  background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap;
}
tr:last-child td{border-bottom:none}

footer{
  border-top:1px solid var(--line); margin-top:56px; padding-top:22px;
  color:var(--faint); font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em;
}
footer a{color:var(--faint)}
footer p{margin:0 0 6px}

@media (max-width:560px){
  body{font-size:16px}
  .lede{font-size:18px}
  .wrap{padding:0 18px 64px}
  .bar-in{padding:14px 18px}
  .bar nav{margin-left:0; width:100%}
}