/* signfeed.io: the company's own pages, drawn as our screens are (docs/design-standard.md): the Board look's blue
   top bar with the time in it, rows on hairlines rather than cards, one family of type with tabular figures, the
   screens' own colours in light and dark. The pictures are real screens from the player, not illustrations. */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --surface-muted: #f2f4f7;
  --text: #0b0d10;
  --muted: #5b6470;
  --border: #d9dee5;
  --brand: #0b5fff;
  --on-brand: #ffffff;
  --mark: #ffd300;
  --ok: #1e7a46;
  --bezel: #0b0d10;
  --font: "Noto Sans TC", "Noto Sans CJK TC", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
  --margin: clamp(16px, 4vw, 64px);
  --max: 1280px;
  --rule: 1px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d10;
    --surface-muted: #161a20;
    --text: #ffffff;
    --muted: #9aa4b2;
    --border: #2a313b;
    --ok: #3ddc84;
    --bezel: #000000;
  }
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 18px/1.6 var(--font);
  font-variant-numeric: tabular-nums;
}
a {
  color: inherit;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--margin);
}

/* The top bar, as on a screen: the name at the left, the time large at the right, on the Board look's blue. */
.bar {
  background: var(--brand);
  color: var(--on-brand);
}
.bar .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 84px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.brand svg {
  width: 36px;
  height: 36px;
  flex: none;
}
.nav {
  display: flex;
  gap: 24px;
  margin-left: auto;
  font-size: 17px;
  font-weight: 700;
}
.nav a {
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 3px solid transparent;
}
.nav a:hover,
.nav a[aria-current="page"] {
  border-bottom-color: var(--on-brand);
}
.clock {
  text-align: right;
  line-height: 1.05;
  min-width: 7.5ch;
}
.clock-time {
  display: block;
  font-size: 40px;
  font-weight: 700;
}
.clock-date {
  display: block;
  font-size: 14px;
  opacity: 0.9;
}
@media (max-width: 720px) {
  .clock {
    display: none;
  }
  .nav {
    gap: 16px;
    font-size: 15px;
  }
  .brand {
    font-size: 24px;
  }
}

/* The opening: what it is in one line, said at a screen's display size, and a real screen beside it. */
.hero {
  padding: clamp(40px, 7vw, 96px) 0 clamp(32px, 5vw, 64px);
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero .wrap {
    grid-template-columns: 1fr;
  }
}
.kicker {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 700;
}
h1 {
  margin: 0 0 20px;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.lede {
  margin: 0 0 28px;
  font-size: clamp(19px, 1.7vw, 23px);
  color: var(--muted);
  max-width: 34em;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.button {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 24px;
  border: 2px solid var(--text);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}
.button-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.button:focus-visible,
.nav a:focus-visible,
.brand:focus-visible {
  outline: 3px solid var(--mark);
  outline-offset: 3px;
}

/* A Chinese headline breaks between its phrases, never leaving one character on a line of its own. */
.nb {
  display: inline-block;
  white-space: nowrap;
}

/* A screen in its bezel: a thin black frame, as the real thing hangs on a wall. */
.screen {
  margin: 0;
  padding: clamp(6px, 0.9vw, 12px);
  background: var(--bezel);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 18px 40px -24px rgba(0, 0, 0, 0.45);
}
.screen img {
  width: 100%;
  border-radius: 2px;
}
.screen-tall {
  max-width: 240px;
}

/* A screen photographed where it hangs: a plain photo, no bezel drawn around it, its caption on a hairline. */
.photo {
  margin: 0;
}
.photo img,
.scenes img {
  width: 100%;
  border-radius: 2px;
}
.photo figcaption,
.note {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: var(--rule) solid var(--border);
  color: var(--muted);
  font-size: 14px;
}
.scenes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  border-top: 3px solid var(--text);
  padding-top: 20px;
}
.scenes figure {
  margin: 0;
}
.scenes figcaption {
  margin-top: 10px;
  font-size: 19px;
  font-weight: 700;
}
@media (max-width: 760px) {
  .scenes {
    grid-template-columns: 1fr;
  }
}

/* Words beside a screen. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }
}

/* A section: its label in the screens' muted bold, a heading, then rows on hairlines. */
.section {
  padding: clamp(40px, 6vw, 80px) 0;
  border-top: var(--rule) solid var(--border);
}
.section-alt {
  background: var(--surface-muted);
  border-top: 0;
}
.label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 700;
}
h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.2;
  font-weight: 700;
}
.intro {
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 19px;
  max-width: 40em;
}

/* The venues as a departure board: the place, what its screen shows, and the screen itself. */
.board {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 3px solid var(--text);
}
.board li {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(160px, 4fr);
  gap: 16px 32px;
  align-items: center;
  padding: 20px 0;
  border-bottom: var(--rule) solid var(--border);
}
.board h3 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
}
.board p {
  margin: 0;
  color: var(--muted);
  font-size: 19px;
}
.board .screen {
  padding: 5px;
  border-radius: 4px;
}
.board .screen-tall {
  width: 34%;
  justify-self: start;
}
@media (max-width: 760px) {
  .board li {
    grid-template-columns: 1fr;
  }
  .board .screen-tall {
    width: 40%;
  }
}

/* Steps as rows: the number at display size in the brand's blue, the words beside it. */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  border-top: 3px solid var(--text);
}
.steps li {
  display: grid;
  grid-template-columns: 5.5ch minmax(0, 1fr);
  gap: 8px 24px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: var(--rule) solid var(--border);
  counter-increment: step;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: span 2;
  color: var(--brand);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 700;
  line-height: 1;
}
@media (prefers-color-scheme: dark) {
  .steps li::before {
    color: #4c9aff;
  }
}
.steps h3 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.3;
}
.steps p {
  margin: 0;
  color: var(--muted);
}

/* Short promises: a row each, a filled square in front, as a notice's priority bar is drawn. */
.points {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 3px solid var(--text);
}
.points li {
  position: relative;
  padding: 16px 0 16px 28px;
  border-bottom: var(--rule) solid var(--border);
  font-size: 20px;
}
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.25em;
  width: 12px;
  height: 12px;
  background: var(--brand);
}
.points li span {
  display: block;
  color: var(--muted);
  font-size: 17px;
}

/* Questions and answers, as rows. */
.faq {
  margin: 0;
  border-top: 3px solid var(--text);
}
.faq div {
  padding: 18px 0;
  border-bottom: var(--rule) solid var(--border);
}
.faq dt {
  font-size: 21px;
  font-weight: 700;
}
.faq dd {
  margin: 4px 0 0;
  color: var(--muted);
}

/* Contact: the number set large, as a countdown is. */
.contact .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
}
@media (max-width: 760px) {
  .contact .wrap {
    grid-template-columns: 1fr;
  }
}
.phone {
  display: block;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
}
.phone-note {
  margin: 6px 0 0;
  color: var(--muted);
}

.foot {
  padding: 28px 0 40px;
  border-top: var(--rule) solid var(--border);
  color: var(--muted);
  font-size: 15px;
}
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.foot a {
  color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  .button,
  .nav a {
    transition: border-color 120ms ease, background-color 120ms ease;
  }
}

/* Contact: the phone set large, LINE beside it. The QR code is for a desktop visitor; a phone opens LINE from the button. */
.reach {
  display: grid;
  gap: 20px;
  justify-items: end;
}
.line-add {
  display: flex;
  align-items: center;
  gap: 16px;
}
.line-qr {
  width: 132px;
  height: 132px;
  border: var(--rule) solid var(--border);
}
.button-line {
  background: #06c755;
  border-color: #06c755;
  color: #ffffff;
}
@media (max-width: 760px) {
  .reach {
    justify-items: start;
  }
  .line-qr {
    display: none;
  }
}

/* About: the opening without a picture, the company's details as rows, and the map beside them. */
.hero-plain .wrap {
  grid-template-columns: minmax(0, 1fr);
}
.hero-plain .lede {
  max-width: 40em;
}
.facts {
  margin: 0;
  border-top: 3px solid var(--text);
}
.facts div {
  display: grid;
  grid-template-columns: 6em minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: var(--rule) solid var(--border);
}
.facts dt {
  color: var(--muted);
  font-weight: 700;
}
.facts dd {
  margin: 0;
}
.map {
  margin: 0;
}
.map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: var(--rule) solid var(--border);
  border-radius: 2px;
}
.map figcaption {
  margin-top: 8px;
  font-size: 15px;
  color: var(--muted);
}
.contact .intro a {
  color: var(--text);
}

/* Three menu items on a phone: each stays on one line. */
.nav a {
  white-space: nowrap;
}
@media (max-width: 420px) {
  .bar .wrap {
    gap: 12px;
  }
  .nav {
    gap: 12px;
    font-size: 14px;
  }
  .brand {
    font-size: 20px;
    gap: 8px;
  }
  .brand svg {
    width: 28px;
    height: 28px;
  }
}