/* Depart — depart.sirekapps.com
   The app's own language: a dark board, amber type, monospaced counters.
   Light mode is a printed timetable rather than a lit board. */

:root {
  --board:      #f2f1ee;
  --surface:    #ffffff;
  --field:      #f6f5f2;
  --ink:        #14161a;
  --ink-2:      #60656b;
  --ink-3:      #9298a0;
  --hairline:   rgba(20, 22, 26, .12);
  --accent:     #b8791f;
  --accent-ink: #fdf8ef;
  --flap:       #15171a;
  --flap-top:   #1e2226;
  --flap-ink:   #f4efe6;
  --positive:   #2f7d55;
  --radius:     14px;
  --wrap:       1040px;
}

:root[data-theme="dark"],
html:not([data-theme]) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --board:    #08090b;
    --surface:  #101215;
    --field:    #14171a;
    --ink:      #f4efe6;
    --ink-2:    #8b9095;
    --ink-3:    #565b61;
    --hairline: rgba(244, 239, 230, .12);
    --accent:   #e8a33d;
    --accent-ink: #100b03;
    --positive: #5fd69a;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --board:    #08090b;
  --surface:  #101215;
  --field:    #14171a;
  --ink:      #f4efe6;
  --ink-2:    #8b9095;
  --ink-3:    #565b61;
  --hairline: rgba(244, 239, 230, .12);
  --accent:   #e8a33d;
  --accent-ink: #100b03;
  --positive: #5fd69a;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--board);
  color: var(--ink);
  font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.sr-only:focus {
  position: static;
  width: auto; height: auto;
  clip: auto;
  margin: 12px;
}

a { color: inherit; }

/* ---------- Nav ---------- */

nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--board) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
}
/* No `display` here. It was `block`, which at (0,1,1) outranked the (0,1,0)
   `.icon-dark { display: none }` below and rendered both nav icons at once — but only
   in the system theme, because an explicit data-theme raises the swap rules to (0,2,1)
   and they win again. Vertical alignment is what that declaration was actually for. */
.mark img { border-radius: 7px; vertical-align: middle; }
.nav-right {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 15px;
}
.nav-right a { color: var(--ink-2); text-decoration: none; }
.nav-right a:hover { color: var(--ink); }

.theme-toggle {
  font: inherit;
  font-size: 14px;
  color: var(--ink-2);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); }

/* Icon and badge variants, swapped by theme. */
/* Every one of these is written at the same specificity as the others, so which image
   shows is decided by the theme and never by where an unrelated rule happens to sit. */
:root .icon-dark,
:root .badge-dark { display: none; }
:root .icon-light,
:root .badge-light { display: inline-block; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .icon-light,
  html:not([data-theme]) .badge-light { display: none; }
  html:not([data-theme]) .icon-dark,
  html:not([data-theme]) .badge-dark { display: inline-block; }
}

:root[data-theme="dark"] .icon-light,
:root[data-theme="dark"] .badge-light { display: none; }
:root[data-theme="dark"] .icon-dark,
:root[data-theme="dark"] .badge-dark { display: inline-block; }
:root[data-theme="light"] .icon-light,
:root[data-theme="light"] .badge-light { display: inline-block; }
:root[data-theme="light"] .icon-dark,
:root[data-theme="light"] .badge-dark { display: none; }

/* ---------- Type ---------- */

h1 {
  font-size: clamp(40px, 7.5vw, 76px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 600;
  margin: 0 0 20px;
}
h2 {
  font-size: clamp(28px, 4.2vw, 42px);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 600;
  margin: 0 0 18px;
}
h3 {
  font-size: 19px;
  letter-spacing: -.01em;
  font-weight: 600;
  margin: 0 0 8px;
}
.lead {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0 0 32px;
}
.eyebrow, .section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}
.section-label { color: var(--ink-3); }

section { padding: 84px 0; border-top: 1px solid var(--hairline); }

/* ---------- Hero ---------- */

.hero { padding: 76px 0 84px; }

/* ---------- The board ---------- */

.board {
  margin: 44px 0 40px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.board-head, .board-row {
  display: grid;
  grid-template-columns: 1fr 88px 168px;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
}
.board-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--hairline);
}
.board-row + .board-row { border-top: 1px solid var(--hairline); }

.dest { font-weight: 600; letter-spacing: -.01em; }
.dest small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}

.code {
  display: inline-block;
  font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
  padding: 7px 9px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-ink);
}

/* The counter. Each character sits in its own housing, like the app's flaps. */
.flaps { display: flex; gap: 3px; align-items: center; }
.flap {
  min-width: 22px;
  padding: 7px 0;
  text-align: center;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--flap-top), var(--flap));
  color: var(--flap-ink);
  font: 500 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  position: relative;
}
/* The hinge line across the middle of every leaf. */
.flap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, .55);
}
.flap.unit {
  background: none;
  color: var(--ink-3);
  min-width: 0;
  padding: 7px 1px 7px 0;
  font-size: 11px;
  letter-spacing: .06em;
}
.flap.unit::after { display: none; }

/* Narrow screens drop the columns that repeat what the row already says. */
@media (max-width: 720px) {
  .board-head, .board-row { grid-template-columns: 1fr auto; gap: 10px; }
  .col-code, .board-row .code { display: none; }
}

/* ---------- CTA ---------- */

.cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.badge img { display: block; }
.cta-note { margin: 0; font-size: 14px; color: var(--ink-3); }

/* ---------- Feature grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 32px 40px;
  margin-top: 44px;
}
.grid p { margin: 0; color: var(--ink-2); font-size: 16px; }

.feature-wide h2 { max-width: 18ch; }

/* ---------- Plans ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.plan {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 28px;
}
.plan-pro { border-color: var(--accent); }
.plan-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: 4px 11px;
  margin: 0 0 14px;
}
.plan-price {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 18px;
}
.plan ul { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 16px; }
.plan li { margin-bottom: 7px; }
.plan-note { margin: 18px 0 0; font-size: 14px; color: var(--ink-3); }

/* ---------- FAQ ---------- */

details {
  border-bottom: 1px solid var(--hairline);
  padding: 20px 0;
}
summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  color: var(--ink-3);
  font-weight: 400;
  font-size: 21px;
  line-height: 1;
}
details[open] summary::after { content: "–"; }
details p { margin: 12px 0 0; color: var(--ink-2); max-width: 68ch; }

/* ---------- Contact ---------- */

.contact-mail {
  font-size: clamp(19px, 3vw, 26px);
  font-weight: 600;
  letter-spacing: -.02em;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

/* ---------- Footer ---------- */

footer {
  border-top: 1px solid var(--hairline);
  padding: 32px 0 44px;
  font-size: 14px;
  color: var(--ink-3);
}
footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Scroll reveal ---------- */

/* The muted state is applied by reveal.js, never by the markup — text is not left
   dimmed if the script fails to run. See reveal.js. */
.reveal-ready .reveal-word {
  color: var(--ink-3);
  transition: color .5s cubic-bezier(.22, .61, .36, 1);
}
.reveal-in .reveal-word { color: var(--ink); }

/* ---------- Mobile menu ---------- */

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: none;
  cursor: pointer;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle span:first-child { top: 16px; }
.nav-toggle span:last-child  { top: 22px; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 720px) {
  .nav-toggle { display: block; }

  /* The panel is a real block below the bar rather than an overlay: at this width the
     nav is four links and a toggle, and a full-screen takeover for that is theatre. */
  .nav-right {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 24px;
    background: var(--board);
    border-bottom: 1px solid var(--hairline);
    /* Collapsed by height rather than `display: none`, so it can animate and so the
       links stay focusable-in-order for a screen reader once open. */
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
  }
  nav .wrap { position: relative; flex-wrap: wrap; }
  .nav-right.open { max-height: 320px; }
  .nav-right a {
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid var(--hairline);
    font-size: 17px;
  }
  .nav-right .theme-toggle { margin: 16px 0 20px; }
}

/* ---------- Screenshots ---------- */

/* One feature per row, the screenshot alternating sides. */
.showcase {
  display: grid;
  /* `auto`, not a fixed width. The frame is now sized by its height (below) and the
     column takes whatever that comes to — a 300px column at 9:19.5 made every frame
     650px tall, which is taller than a lot of viewports and turned four features into
     four full screens of scrolling. */
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: center;
  padding: 56px 0;
}
.showcase + .showcase { border-top: 1px solid var(--hairline); }
.showcase.reversed .showcase-text { order: 2; }
.showcase.reversed .showcase-shot { order: 1; }

.showcase-text h3 {
  font-size: clamp(23px, 3vw, 30px);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 14px;
}
.showcase-text p { margin: 0; color: var(--ink-2); max-width: 46ch; }
.showcase-label {
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

@media (max-width: 760px) {
  .showcase {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 0;
  }
  /* Text first on every row when they stack — alternating on a phone just looks like
     an inconsistent layout, because the pairing that made it read is gone. */
  .showcase.reversed .showcase-text { order: 1; }
  .showcase.reversed .showcase-shot { order: 2; }
  .showcase-shot { align-self: start; }
}

/* The frame reserves the space a real screenshot will occupy, so dropping images in
   later changes nothing about the layout. */
/* Sized by height rather than width, so a phone frame is never taller than the screen
   it is being read on. The width follows from the aspect ratio. */
.shot-frame {
  aspect-ratio: 9 / 19.5;
  height: min(52vh, 440px);
  width: auto;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: var(--surface);
  overflow: hidden;
  display: flex;
  margin-inline: auto;
}
.shot-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shot-placeholder {
  margin: auto;
  padding: 0 16px;
  text-align: center;
  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Pinned statement ---------- */

/* The track is tall; the panel inside it is sticky and fills the viewport. Scrolling
   through the track therefore advances the sentence rather than moving the page, which
   is the "you can't scroll past until it finishes" effect — without ever taking the
   scroll away from the user. See reveal.js. */
.pinned {
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.pinned-track { height: 260vh; }
.pinned-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}
.statement {
  font-size: clamp(26px, 4.6vw, 46px);
  line-height: 1.24;
  letter-spacing: -.02em;
  font-weight: 600;
  max-width: 22ch;
  margin: 0;
  /* Resting colour. Words brighten individually as the track scrolls. */
  color: var(--ink-3);
}
.statement .reveal-word {
  color: var(--ink-3);
  transition: color .28s linear;
}
.statement .reveal-word.lit { color: var(--ink); }

/* A tall pinned section is a poor trade when the viewport is short — it becomes a lot
   of scrolling for one sentence — and it is meaningless without motion. Both cases get
   the sentence plainly, at full contrast. */
@media (max-height: 560px), (prefers-reduced-motion: reduce) {
  .pinned-track { height: auto; }
  .pinned-panel { position: static; height: auto; padding: 84px 0; }
  .statement, .statement .reveal-word { color: var(--ink); }
}

/* ---------- The wordmark ---------- */

.wordmark {
  display: flex;
  gap: clamp(10px, 2vw, 20px);
  margin: 0 0 34px;
  /* The letters are set as flap characters, not as type. */
  font: 500 clamp(30px, 6.4vw, 62px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.wordmark-group { display: flex; gap: 3px; }

.leaf {
  position: relative;
  display: block;
  width: clamp(34px, 7vw, 68px);
  padding: clamp(8px, 1.6vw, 16px) 0;
  text-align: center;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--flap-top), var(--flap));
  color: var(--flap-ink);
  /* Fixed digit box so a W and an I occupy the same housing, as they do on a board. */
  font-variant-numeric: tabular-nums;
}
/* The hinge, across the middle of every leaf. */
.leaf::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, .55);
}

/* The landing flip: the leaf tips forward and back as it settles. Transform only, so
   it costs nothing and cannot reflow the line. */
.leaf.landing { animation: leaf-turn .055s linear; }
@keyframes leaf-turn {
  from { transform: perspective(220px) rotateX(-38deg); }
  to   { transform: perspective(220px) rotateX(0deg); }
}
.leaf.landed { animation: leaf-settle .26s cubic-bezier(.2, .9, .3, 1); }
@keyframes leaf-settle {
  0%   { transform: perspective(220px) rotateX(-52deg); }
  70%  { transform: perspective(220px) rotateX(6deg); }
  100% { transform: perspective(220px) rotateX(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .leaf.landing, .leaf.landed { animation: none; }
}

/* ---------- Example board cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
  margin-top: 44px;
}

/* Each card carries its style's own colours, taken from the app's BoardTheme. */
.card {
  --c-accent: #e8a33d;
  --c-on-accent: #100b03;
  --c-flap: #15171a;
  --c-flap-top: #1e2226;
  --c-flap-ink: #f4efe6;
  --c-surface: #101215;
  --c-ink: #f4efe6;
  --c-ink-2: #8b9095;

  padding: 18px;
  border-radius: 16px;
  background: var(--c-surface);
  border: 1px solid rgba(255, 255, 255, .07);
  color: var(--c-ink);
}
.card.theme-paper {
  --c-accent: #b43a2e; --c-on-accent: #fcf6e9;
  --c-flap: #e8dfc9; --c-flap-top: #f4eddc; --c-flap-ink: #241f18;
  --c-surface: #17161a; --c-ink: #f4efe6; --c-ink-2: #8b9095;
}
.card.theme-sunset {
  --c-accent: #e5795a; --c-on-accent: #1c0a04;
  --c-flap: #1a1210; --c-flap-top: #261a16; --c-flap-ink: #f7dcce;
  --c-surface: #141011; --c-ink: #f7ece7; --c-ink-2: #97867f;
}
.card.theme-midnight {
  --c-accent: #7ba8de; --c-on-accent: #06111e;
  --c-flap: #0e141c; --c-flap-top: #172232; --c-flap-ink: #dce8f7;
  --c-surface: #0d1219; --c-ink: #e6eef9; --c-ink-2: #7f8b9b;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

/* Glyph and code in ONE rounded rect at full opacity, exactly as the app draws it —
   two adjacent chips read as two pieces of metadata rather than one label. */
.card-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
}
.card-code { letter-spacing: .12em; }

.card-status {
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5fd69a;
}
.card-status.soon { color: var(--c-accent); }

.card-dest {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--c-ink);
}
.card-sub {
  margin: 2px 0 16px;
  font: 400 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-2);
}

.card-flaps { display: flex; align-items: center; gap: 3px; }
.card-flaps .c-flap {
  position: relative;
  min-width: 23px;
  padding: 8px 0;
  text-align: center;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--c-flap-top), var(--c-flap));
  color: var(--c-flap-ink);
  font: 500 19px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.card-flaps .c-flap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, .5);
}
.card-flaps .c-unit {
  margin: 0 9px 0 3px;
  font: 400 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--c-ink-2);
}
.card-flaps .c-unit:last-child { margin-right: 0; }

.cards-note {
  margin: 22px 0 0;
  font-size: 15px;
  color: var(--ink-3);
}

/* ---------- What goes on a board ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
  margin-top: 44px;
}
.tile { margin: 0; }

.tile-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: var(--field);
  border: 1px solid var(--hairline);
  isolation: isolate;
}
.tile-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Duotone, part one: strip the photograph's own colour. Six unrelated pictures
     otherwise read as six unrelated pictures — this is what makes them a set, and what
     keeps a page built out of flaps and monospace from turning into a stock gallery. */
  filter: grayscale(1) contrast(1.08);
}
/* Duotone, part two: the board's accent laid over the top. `color` blends the hue and
   saturation of the tint onto the luminance of the photo, which is the honest way to
   tone an image — `multiply` would just darken it. */
.tile-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: color;
  opacity: .55;
  pointer-events: none;
}
/* And a floor of board colour, so the bottom of every tile can carry type. */
.tile-frame::before {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--board) 88%, transparent));
  pointer-events: none;
}

.tile-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  color: var(--ink-3);
}

.tile figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.tile-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.tile-code {
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  color: var(--accent);
}

.credits {
  margin: 32px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}
.credits a { color: inherit; }