/* the.firm departure board. House system: navy ground, Century Expanded display,
   Roboto body, Roboto Mono for data, one orange accent. Warm light falls on the
   board from above; the board itself is a physical panel on the wall. */

@font-face{font-family:"Century Expanded LT Std";src:url("../fonts/CenturyExpandedLTStd-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Roboto";src:url("../fonts/Roboto-Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Roboto";src:url("../fonts/Roboto-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Roboto";src:url("../fonts/Roboto-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Roboto Mono";src:url("../fonts/RobotoMono-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Roboto Mono";src:url("../fonts/RobotoMono-Medium.ttf") format("truetype");font-weight:500;font-display:swap}

:root{
  --white:#ffffff;
  --n-200:#cfe3f4; --n-300:#b3cfe3; --n-400:#94adbf;
  --n-500:#5e7ea0; --n-600:#3c5b7c; --n-700:#11274a; --n-800:#011735;
  --navy-deep:#010e22;
  --panel-hi:#072148; --panel-lo:#041a3a;
  --edge:rgba(207,227,244,.08);
  --rule:rgba(207,227,244,.055);
  --n-100:#ebf5fd;
  --orange-500:#ff3300; --orange-600:#cc2900;
  --orange-400:#ff5a33; /* down-tone on the lighter panel: clears WCAG AA there */
  --green-400:#39d377;
  --font-display:"Century Expanded LT Std",Georgia,serif;
  --font-body:"Roboto",system-ui,-apple-system,sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,SFMono-Regular,monospace;
  --radius-pill:calc(infinity*1px);
  --content:1401px; --gutter:24px;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-spring:linear(0,0.009 0.9%,0.033 1.8%,0.129 3.8%,0.676 11.3%,0.89 14.9%,1.03 18.5%,1.075 20.4%,1.102 22.3%,1.115 24.7%,1.111 27.4%,1.016 39.7%,0.989 47.4%,1.001 71.7%,1);
  --shadow-float:rgba(0,0,0,0) 0 0 0 0,rgba(0,0,0,0) 0 0 0 0,rgba(0,0,0,.1) 0 10px 15px -3px,rgba(0,0,0,.1) 0 4px 6px -4px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--n-800)}
body{
  font-family:var(--font-body);
  color:var(--n-200);
  min-height:100svh;
  background:linear-gradient(180deg,#02204a 0%,var(--n-800) 36%,var(--n-800) 64%,var(--navy-deep) 100%);
}

/* Warm light falling from above onto the board: wide, low, directional. */
body::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 85% at 50% -18%,
    rgba(255,178,102,.10) 0%,
    rgba(255,178,102,.04) 36%,
    rgba(255,178,102,0) 62%);
}

/* Fine grain over the light, under the content. Feel it, don't see it. */
body::after{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

.lobby{
  position:relative;z-index:1;
  max-width:1120px;
  margin:0 auto;
  padding:clamp(116px,15vh,152px) clamp(20px,4vw,56px) clamp(64px,10vh,120px);
}

/* Masthead: name on the facade, living plate at its side. */
.masthead{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:24px 48px;
}
.wordmark{
  font-family:var(--font-display);font-weight:400;
  color:var(--white);
  font-size:clamp(52px,8vw,104px);
  line-height:1.16;
  letter-spacing:.005em;
}
.wordmark .mark-dot{color:var(--orange-500)}
.tagline{
  margin-top:10px;
  font-weight:300;font-size:clamp(15px,1.8vw,18px);
  color:var(--n-300);
}
.lobby-plate{
  text-align:right;
  padding-bottom:6px;
}
.spark{display:inline-block}
.spark polyline{
  fill:none;
  stroke:var(--n-300);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.spark circle{fill:var(--green-400)}
.spark circle.down{fill:var(--orange-400)}
.plate-line{
  margin-top:8px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;
  color:var(--n-400);
  white-space:nowrap;
}

/* The board: a physical panel, lit from above. */
.board-panel{
  display:block;
  margin-top:clamp(44px,7vh,72px);
  background:linear-gradient(180deg,var(--panel-hi),var(--panel-lo));
  border:1px solid var(--edge);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  padding:6px 28px 10px;
}
.board-head,
.brow{
  display:grid;
  grid-template-columns:104px 208px 1fr max-content;
  gap:0 30px;
  align-items:baseline;
}
.board-head{
  padding:16px 10px 11px;
  border-bottom:1px solid rgba(207,227,244,.1);
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--n-400);
}
.h-status{justify-self:end}
.brow{
  padding:17px 10px;
  text-decoration:none;
  border-radius:6px;
  transition:background-color .2s ease;
}
.brow + .brow{border-top:1px solid var(--rule)}
a.brow:hover,a.brow:focus-visible{background:rgba(207,227,244,.045)}
a.brow:focus-visible{outline:1px solid var(--n-500);outline-offset:-1px}

.dept{
  font-size:13px;font-weight:400;
  color:var(--n-400);
  white-space:nowrap;
}
.unit{
  font-family:var(--font-display);
  font-size:clamp(21px,2.2vw,25px);
  color:var(--white);
  line-height:1.2;
  white-space:nowrap;
}
.unit .u-dot{color:var(--orange-500)}
.fn{
  font-weight:300;font-size:14.5px;
  color:var(--n-300);
  white-space:nowrap;
}
.status{
  font-family:var(--font-mono);font-size:13px;
  color:var(--n-400);
  justify-self:end;text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.status.up{color:var(--green-400)}
.status.down{color:var(--orange-400)}

/* Split-flap: characters flip in only when firm.js lands fresh data.
   The spans are fully visible without any animation running. */
.status .ch{display:inline-block;transform-origin:50% 55%}
/* forwards, not both: a character whose delay hasn't started stays fully
   readable instead of holding the tilted from-state. */
.status.flip .ch{animation:flap .28s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes flap{
  from{transform:rotateX(-88deg);opacity:.3}
  to{transform:rotateX(0);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .status .ch{animation:none!important}
}

.colophon{
  margin-top:clamp(36px,6vh,60px);
  font-weight:300;font-size:14px;
  color:var(--n-400);
  max-width:560px;
}

@media (max-width:900px){
  .masthead{grid-template-columns:1fr}
  .lobby-plate{text-align:left;padding-bottom:0}
  .board-panel{padding:2px 18px 6px}
  .board-head{display:none}
  .brow{
    grid-template-columns:1fr;
    gap:5px 0;
    padding:16px 6px;
  }
  .brow + .brow{border-top:1px solid var(--rule)}
  .brow:first-of-type{border-top:0}
  .dept{order:1;font-size:12px;white-space:normal}
  .unit{order:2;white-space:normal}
  .fn{order:3;white-space:normal}
  .status{order:4;justify-self:start;text-align:left;margin-top:3px;white-space:normal}
}

/* ============ Site chrome: house nav, menu, search (ported pattern) ============ */
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--n-500);outline-offset:2px;border-radius:4px}
body{overflow-x:clip}

.nav-wrap{position:fixed;top:16px;left:0;right:0;z-index:50;display:flex;justify-content:center;pointer-events:none}
.nav{pointer-events:auto;display:flex;align-items:center;gap:clamp(16px,4vw,56px);min-height:64px;padding:8px 28px;border-radius:32px;background:color-mix(in srgb,var(--n-800),transparent 18%);border:1px solid color-mix(in srgb,var(--white),transparent 88%);box-shadow:var(--shadow-float);transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.nav.solid{background:var(--n-800);border-color:color-mix(in srgb,var(--white),transparent 80%)}
.nav-icon{display:inline-flex;padding:8px;border-radius:var(--radius-pill);color:var(--n-300);transition:color .2s var(--ease)}
.nav-icon:hover{color:var(--white)}
.nav-brand{display:inline-flex;align-items:baseline;font-size:clamp(18px,2vw,24px);color:var(--white)}
.brand-glyphs{--g:18px;display:inline-flex;align-items:flex-end;gap:4px;transition:scale .3s var(--ease-spring)}
.nav-brand:hover .brand-glyphs{scale:1.06}
.glyph{height:var(--g,24px);width:var(--g,24px);display:inline-block}
.glyph.gm{width:calc(var(--g)*1.15);background:linear-gradient(160deg,var(--n-100),var(--n-300) 55%,var(--n-400));clip-path:polygon(0 100%,0 0,22% 0,50% 54%,78% 0,100% 0,100% 100%,78% 100%,78% 30%,57% 70%,43% 70%,22% 30%,22% 100%)}
.glyph.gi{width:calc(var(--g)*.36);border-radius:1px;background:linear-gradient(165deg,var(--white),var(--n-200) 70%)}
.glyph.gl{background:linear-gradient(200deg,var(--n-500),var(--n-700) 75%);clip-path:polygon(0 0,34% 0,34% 72%,100% 72%,100% 100%,0 100%)}
.glyph.ga{background:radial-gradient(circle at 38% 28%,var(--orange-500) 30%,var(--orange-600) 78%);clip-path:polygon(50% 0,100% 100%,72% 100%,50% 36%,28% 100%,0 100%)}
.glyph.gn{width:calc(var(--g)*1.05);background:linear-gradient(160deg,var(--n-300),var(--n-500) 60%,var(--n-600));clip-path:polygon(0 100%,0 0,26% 0,74% 62%,74% 0,100% 0,100% 100%,74% 100%,26% 38%,26% 100%)}
.nav-menu{font-weight:500;font-size:15px;color:var(--white);padding:8px 12px;border-radius:var(--radius-pill);transition:color .2s var(--ease)}
.nav-menu:hover{color:var(--n-300)}

.eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--orange-500)}

#menu{position:fixed;inset:0;z-index:40;background:var(--n-800);display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
#menu.open{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.menu-inner{width:min(var(--content),100% - var(--gutter)*2);margin-inline:auto;display:flex;flex-direction:column;gap:clamp(32px,6vh,56px)}
.menu-eyebrow{opacity:0}
#menu.open .menu-eyebrow{animation:entrance-fade .5s var(--ease) .08s both}
.menu-list{display:flex;flex-direction:column;gap:clamp(4px,1.5vh,16px)}
.menu-link{font-family:var(--font-display);font-size:clamp(2.25rem,6.5vw,5rem);line-height:1.12;width:fit-content;display:inline-flex;align-items:baseline;gap:clamp(12px,2vw,24px);color:var(--white);opacity:0;transition:color .3s var(--ease)}
#menu.open .menu-link{animation:entrance-slide-up .55s var(--ease-out) both}
#menu.open .menu-list li:nth-child(1) .menu-link{animation-delay:.12s}
#menu.open .menu-list li:nth-child(2) .menu-link{animation-delay:.19s}
#menu.open .menu-list li:nth-child(3) .menu-link{animation-delay:.26s}
#menu.open .menu-list li:nth-child(4) .menu-link{animation-delay:.33s}
#menu.open .menu-list li:nth-child(5) .menu-link{animation-delay:.40s}
#menu.open .menu-list li:nth-child(6) .menu-link{animation-delay:.47s}
.menu-link:hover{color:var(--n-300)}
.menu-link .num{font-family:var(--font-mono);font-size:clamp(11px,1vw,14px);letter-spacing:.12em;color:var(--n-500);transition:color .3s var(--ease)}
.menu-link:hover .num{color:var(--orange-500)}
.menu-foot{display:flex;flex-wrap:wrap;gap:24px;color:var(--n-400);font-size:14px;opacity:0}
#menu.open .menu-foot{animation:entrance-fade .5s var(--ease) .42s both}
.menu-foot a{transition:color .2s var(--ease)}
.menu-foot a:hover{color:var(--white)}
@keyframes entrance-slide-up{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes entrance-fade{0%{opacity:0}100%{opacity:1}}

#search-btn .ic-close{display:none}
#search-btn.open .ic-search{display:none}
#search-btn.open .ic-close{display:block}
#search{position:fixed;inset:0;z-index:44;background:var(--n-800);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
#search.open{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.search-inner{width:min(var(--content),100% - var(--gutter)*2);margin-inline:auto;height:100%;display:flex;flex-direction:column;gap:clamp(20px,3.5vh,32px);padding-top:clamp(100px,16vh,150px);padding-bottom:32px}
.search-eyebrow{opacity:0}
#search.open .search-eyebrow{animation:entrance-fade .5s var(--ease) .08s both}
#search-input{width:100%;background:none;border:0;border-bottom:1px solid var(--n-500);font-family:var(--font-display);font-size:clamp(1.6rem,4.5vw,2.75rem);line-height:1.2;color:var(--white);padding:0 0 14px;border-radius:0;caret-color:var(--orange-500);opacity:0}
#search.open #search-input{animation:entrance-slide-up .55s var(--ease-out) .12s both}
#search-input:focus{outline:none;border-bottom-color:var(--white)}
#search-input::placeholder{color:var(--n-500)}
#search-input::-webkit-search-cancel-button{-webkit-appearance:none}
#search-label{opacity:0}
#search.open #search-label{animation:entrance-fade .5s var(--ease) .2s both}
.search-results{display:flex;flex-direction:column;overflow-y:auto;min-height:0}
#search.open .search-results{animation:entrance-fade .5s var(--ease) .26s both}
.sr-link{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--white),transparent 88%)}
.sr-title{font-family:var(--font-display);font-size:clamp(1.2rem,2.6vw,1.6rem);color:var(--white);display:inline-flex;align-items:baseline;gap:12px;transition:color .3s var(--ease)}
.sr-title .sr-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--n-500);transition:color .3s var(--ease)}
.sr-link:hover .sr-title{color:var(--n-300)}
.sr-link:hover .sr-num{color:var(--orange-500)}
.sr-desc{font-size:14px;color:var(--n-400);line-height:1.5}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}