:root {
  --blue:#17367f;
  --amber:#ffb000;
  --chalk:#f3f1ea;
  --black:#101721;
  --line:rgba(243,241,234,.3)
}

* {
  box-sizing:border-box
}
html {
  background:var(--blue);
  color:var(--chalk);
  overflow-x:hidden
}
body {
  margin:0;
  font:400 17px/1.45 'Atkinson Hyperlegible',sans-serif
}
button,input,select {
  font:inherit
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait;
  opacity:.7
}
:focus-visible {
  outline:3px solid var(--amber);
  outline-offset:3px
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  font-family:'Barlow Condensed',sans-serif;
  line-height:.96
}
h1 {
  font-size:clamp(3.2rem,6vw,6.5rem);
  max-width:1000px;
  margin:2.5rem 0 1rem;
  letter-spacing:-.02em
}
h2 {
  font-size:clamp(2.8rem,5vw,5rem);
  margin-bottom:1rem
}
h3 {
  font-size:2.1rem;
  margin:0
}
.wrap {
  width:min(100% - 48px,1300px);
  margin-inline:auto
}
.hero {
  padding-bottom:6rem
}
.masthead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border-bottom:1px solid var(--line);
  padding:1.4rem 0;
  font-weight:700
}
.masthead button {
  border:1px solid var(--amber);
  background:transparent;
  color:var(--chalk);
  padding:.45rem .8rem
}
.hero-copy {
  font-size:1.2rem;
  max-width:48rem;
  margin-bottom:2rem
}
.board {
  --tile-width:50px;
  --tile-gap:2px;
  background:var(--black);
  border:2px solid var(--amber);
  padding:clamp(.8rem,2.2vw,1.7rem);
  overflow:hidden
}
.board-lines {
  display:flex;
  flex-direction:column;
  gap:.55rem
}
.board-row {
  display:flex;
  gap:var(--tile-gap);
  max-width:100%
}
.tile {
  position:relative;
  flex:none;
  display:grid;
  place-items:center;
  width:var(--tile-width);
  height:73px;
  background:#242527;
  color:var(--amber);
  font:700 58px/1 'Barlow Condensed',sans-serif;
  border-radius:2px;
  overflow:hidden
}
.tile::before {
  content:"";
  position:absolute;
  inset:0 0 50%;
  background:#303133;
  pointer-events:none
}
.tile-glyph {
  position:relative;
  z-index:1
}
.tile::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:2px;
  background:#0a0d11;
  z-index:3
}
.tile.space {
  background:transparent;
  width:var(--tile-width)
}
.tile.space::before,.tile.space::after {
  display:none
}
.tile.flipping::before {
  transform-origin:bottom;
  animation:flap .13s linear;
  z-index:2
}
@keyframes flap {
  0% {
  transform:rotateX(0)
}
100% {
  transform:rotateX(-90deg)
}

}
.departures {
  background:var(--black);
  color:var(--amber);
  border:2px solid var(--amber);
  margin-top:2rem;
  padding:.5rem clamp(.65rem,1.5vw,1.2rem);
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase
}
.table-head,.departure-row {
  display:grid;
  grid-template-columns:110px 155px minmax(0,1fr);
  gap:1rem;
  padding:.55rem .2rem;
  border-bottom:1px solid rgba(255,176,0,.35)
}
.table-head {
  font-size:1rem;
  font-weight:700;
  letter-spacing:.08em
}
.departure-row {
  align-items:start;
  font-size:clamp(1.1rem,1.7vw,1.4rem);
  line-height:1.15
}
.departure-tiles {
  display:flex;
  gap:1px;
  min-width:0
}
.small-tile {
  width:19px;
  height:28px;
  font-size:22px
}
.departure-brief {
  padding-top:2px;
  min-width:0;
  overflow-wrap:anywhere
}
.ticket-mark,#preview-date {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600
}
.departure-row.changing .departure-brief {
  animation:rowflip .28s ease-in
}
@keyframes rowflip {
  50% {
  transform:rotateX(80deg)
}

}
.signup,.how,.soon {
  padding-block:5rem;
  border-top:1px solid var(--line)
}
.section-intro {
  max-width:45rem
}
.signup-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,6rem);
  margin-top:2.5rem
}
form {
  min-width:0
}
form>label,fieldset legend,.ticket>label {
  display:block;
  font-weight:700;
  margin:1.3rem 0 .5rem
}
input[type=email],input[type=text],select {
  display:block;
  width:100%;
  min-width:0;
  background:var(--blue);
  border:1px solid var(--chalk);
  border-radius:0;
  color:var(--chalk);
  padding:.8rem .9rem
}
input::placeholder {
  color:#c8c9d4;
  opacity:1
}
.ticket {
  position:relative;
  background:var(--amber);
  color:var(--black);
  padding:1rem 1.4rem 1.5rem;
  margin-bottom:2rem;
  overflow:hidden
}
.ticket::after {
  content:"";
  position:absolute;
  right:-8px;
  top:0;
  bottom:0;
  width:16px;
  background:radial-gradient(circle at right center,var(--blue) 0 7px,transparent 8px) 0 0/16px 24px repeat-y
}
.ticket>label {
  margin:0 0 .4rem
}
.ticket-entry {
  display:flex;
  align-items:stretch;
  gap:1rem
}
.ticket input {
  background:var(--chalk);
  border-color:var(--black);
  color:var(--black)
}
.ticket input::placeholder {
  color:#555
}
.ticket-mark {
  font:600 1.6rem 'Barlow Condensed',sans-serif;
  display:grid;
  place-items:center;
  border-left:1px dashed var(--black);
  padding-left:1rem
}
.ticket.stamped .ticket-stamp {
  display:inline-block;
  margin-top:.8rem;
  border:2px solid var(--black);
  padding:.15rem .5rem;
  transform:rotate(-5deg);
  font:700 1.5rem 'Barlow Condensed',sans-serif
}
.checks {
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap
}
.checks label {
  white-space:nowrap
}
.checks input {
  accent-color:var(--amber);
  width:1.1rem;
  height:1.1rem;
  vertical-align:middle
}
fieldset {
  border:0;
  padding:0;
  margin:1.3rem 0
}
.submit {
  background:var(--amber);
  color:var(--black);
  border:2px solid var(--amber);
  padding:.8rem 1.7rem;
  margin-top:1.5rem;
  font-weight:700
}
.submit:hover {
  background:var(--chalk);
  border-color:var(--chalk)
}
.form-status {
  min-height:1.5rem;
  margin:.8rem 0 0;
  overflow-wrap:anywhere
}
.trial-note {
  font-size:.86rem;
  color:#d7d6e0;
  margin-top:1.5rem
}
.preview {
  border-top:3px solid var(--amber);
  padding-top:1rem;
  min-width:0
}
.preview-head {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:baseline;
  flex-wrap:wrap
}
.preview-head p {
  color:var(--amber);
  margin:0
}
.preview-group {
  padding-top:1rem;
  border-top:1px solid var(--line);
  margin-top:1rem
}
.preview-group h4 {
  font:700 1.4rem 'Barlow Condensed',sans-serif;
  margin:0 0 .5rem
}
.preview-group p {
  margin:.5rem 0;
  overflow-wrap:anywhere
}
.preview-note {
  font-size:.9rem;
  color:#d7d6e0;
  margin-top:2rem
}
.how p {
  max-width:48rem;
  font-size:1.2rem
}
.soon-rows {
  border-top:1px solid var(--line);
  margin-top:2rem
}
.soon-rows>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1.1rem .2rem;
  border-bottom:1px solid var(--line)
}
.soon-rows span {
  overflow-wrap:anywhere
}
.soon-rows strong {
  color:var(--amber);
  border:1px solid var(--amber);
  padding:.25rem .5rem;
  font:700 1rem 'Barlow Condensed',sans-serif;
  white-space:nowrap
}
footer {
  display:flex;
  gap:1.5rem;
  justify-content:space-between;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-block:2rem 4rem;
  font-size:.9rem
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.honeypot {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden
}

@media(max-width:700px) {
  .wrap {
  width:min(100% - 28px,1300px)
}
h1 {
  margin-top:1.7rem;
  font-size:clamp(3rem,10vw,4.6rem)
}
.hero {
  padding-bottom:4rem
}
.hero-copy {
  margin-bottom:1.5rem
}
.signup-layout {
  grid-template-columns:1fr
}
.signup,.how,.soon {
  padding-block:3.5rem
}
.table-head,.departure-row {
  grid-template-columns:103px minmax(0,1fr);
  gap:.5rem
}
.mobile-sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.departure-row {
  font-size:1.15rem
}
.departure-brief {
  grid-column:1/-1
}
.board {
  --tile-width:22px;
  --tile-gap:1px;
  padding:.5rem
}
.tile {
  height:32px;
  font-size:26px
}
.small-tile {
  width:19px;
  height:28px;
  font-size:22px
}
.ticket-entry {
  gap:.5rem
}
.ticket-mark {
  padding-left:.5rem
}
.soon-rows>div {
  align-items:flex-start
}

}

@media(prefers-reduced-motion:reduce) {
  .tile.flipping::before,.departure-row.changing .departure-brief {
  animation:none
}

}