:root {
  --bg: #0b0a09;
  --ink: #e8dfd0;
  --ink-dim: #9a8f80;
  --ink-mute: #6a6156;
  --amber: #e8a317;
  --orange: #ff5a1f;
  --steel: #2a2622;
  --panel: #12110f;
  --ticket: #141210;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  min-height: 100vh;
  color: var(--ink);
  font-family: "Source Sans 3", system-ui, sans-serif;
  background:
    radial-gradient(1100px 420px at 50% -8%, rgba(232,163,23,.08), transparent 58%),
    radial-gradient(900px 520px at 110% 110%, rgba(255,90,31,.05), transparent 50%),
    radial-gradient(700px 400px at -10% 80%, rgba(232,163,23,.03), transparent 45%),
    var(--bg);
  line-height: 1.55;
}
.bay-light {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50;
  background: linear-gradient(90deg, transparent 0%, var(--amber) 18%, #ffc14a 50%, var(--orange) 72%, var(--amber) 88%, transparent 100%);
  box-shadow: 0 0 18px 3px rgba(232,163,23,.4), 0 0 40px 8px rgba(255,90,31,.12);
}
.grain {
  pointer-events: none;
  position: fixed; inset: 0; z-index: 40; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.wrap { width: min(1100px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 4rem; position: relative; z-index: 1; }
.wrap.wide { width: min(1280px, calc(100% - 2rem)); }
header.mast {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem;
  border-bottom: 1px solid var(--steel);
  padding-bottom: 1.15rem; margin-bottom: 1.6rem;
  position: relative;
}
header.mast::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--steel) 0 8px, transparent 8px 14px);
}
.wordmark {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  line-height: .86;
  color: var(--ink);
  margin: 0;
  text-shadow: 3px 3px 0 rgba(255,90,31,.22);
  text-decoration: none;
}
.sub {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-size: .82rem;
  color: var(--orange);
  margin: .45rem 0 0;
}
nav.bay-nav { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
nav.bay-nav a {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .92rem;
  color: var(--ink-dim);
  text-decoration: none;
  border: 1px solid var(--steel);
  padding: .35rem .75rem;
}
nav.bay-nav a:hover, nav.bay-nav a.on { color: var(--amber); border-color: var(--amber); }
.hero {
  position: relative;
  border: 1px solid var(--steel);
  background: var(--ticket);
  margin: 0 0 2rem;
  overflow: hidden;
}
.hero img { display: block; width: 100%; height: 380px; object-fit: cover; object-position: center 60%; }
.hero .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1.5rem 1.2rem;
  background: linear-gradient(transparent, rgba(11,10,9,.92) 45%);
}
.hero h1, .article h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: .95;
  margin: 0 0 .4rem;
}
.meta {
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--amber);
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; }
.card {
  display: flex; flex-direction: column;
  background: var(--ticket);
  border: 1px solid var(--steel);
  text-decoration: none;
  color: inherit;
  min-height: 100%;
}
.card:hover { border-color: var(--amber); }
.card img { width: 100%; height: 180px; object-fit: cover; display: block; border-bottom: 1px solid var(--steel); }
.card .body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.card h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 1.45rem;
  line-height: 1.05;
  margin: 0;
}
.card p { margin: 0; color: var(--ink-dim); font-size: .98rem; }
.card .wo { color: var(--orange); font-family: "Barlow Condensed", sans-serif; letter-spacing: .16em; text-transform: uppercase; font-size: .75rem; }
.article { width: min(760px, 100%); margin: 0 auto; }
.article .lead { font-size: 1.15rem; color: var(--ink); }
.article p { margin: 0 0 1rem; }
.article h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 1.7rem;
  color: var(--amber);
  margin: 1.8rem 0 .7rem;
}
.article h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 1.15rem;
  color: var(--orange);
  margin: 1.3rem 0 .4rem;
}
.article ul, .article ol { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.article li { margin: 0 0 .35rem; }
.article figure {
  margin: 1.3rem 0 1.5rem;
  border: 1px solid var(--steel);
  background: var(--ticket);
}
.article figure img { display: block; width: 100%; height: auto; }
.article figcaption {
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .75rem;
  color: var(--ink-dim);
  padding: .55rem .8rem .65rem;
  border-top: 1px dashed var(--steel);
}
.callout {
  border-left: 3px solid var(--orange);
  background: var(--ticket);
  padding: .85rem 1rem;
  margin: 1.2rem 0 1.4rem;
  color: var(--ink);
}
.callout strong { color: var(--amber); }
.back {
  display: inline-block;
  margin: 0 0 1.2rem;
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  text-decoration: none;
  font-weight: 700;
}
footer.bay {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--steel);
  color: var(--ink-mute);
  font-size: .9rem;
}
@media (max-width: 720px) {
  .hero img { height: 220px; }
  header.mast { flex-direction: column; align-items: flex-start; }
}