/* Tether - tetherapp.xyz
   Single stylesheet, no build step. */

:root {
  --bg: #000000;
  --text: #c5cbd4;
  --bright: #ffffff;
  --muted: #6b7480;
  --dim: #4a515b;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --col: 34rem;
  --prose: 38rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.003em;
}

::selection {
  background: rgba(255, 255, 255, 0.16);
  color: var(--bright);
}

/* ---------- Shell ---------- */

.shell {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 2rem 2.25rem 3rem;
  max-width: 80rem;
  margin: 0 auto;
}

/* Centred, not baseline: the back control is a padded pill, and the logo is an
   image, so neither has a text baseline worth aligning to. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 4.5rem;
}

/* The mark carries the name on its own, so it is not decorative - it keeps
   real alt text. Home page only; inner pages use .back instead. */
.logo {
  display: block;
  height: 3rem;
  width: auto;
}

/* Sized as a control rather than a caption, so it reads as the way back. */
.back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.02em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.625rem 1.0625rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.back:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--bright);
}

.topbar-right {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar-right a {
  color: var(--dim);
  text-decoration: none;
}

.topbar-right a:hover {
  color: var(--bright);
}

main {
  flex: 1 0 auto;
  position: relative;
  z-index: 1;
}

/* ---------- Skip link ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip:focus {
  left: 2.25rem;
  top: 1rem;
  z-index: 10;
  background: #111;
  color: var(--bright);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.6875rem;
}

:focus-visible {
  outline: 1px solid var(--line-strong);
  outline-offset: 4px;
}

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

h1 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--bright);
  margin: 0 0 2.25rem;
  max-width: var(--col);
  text-wrap: balance;
}

h2 {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--bright);
  margin: 3rem 0 0.75rem;
}

h3 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bright);
  margin: 2rem 0 0.5rem;
}

p {
  margin: 0 0 1.125rem;
  max-width: var(--prose);
}

a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.15s ease, border-color 0.15s ease;
}

a:hover {
  color: var(--bright);
  border-color: var(--bright);
}

ul {
  margin: 0 0 1.125rem;
  padding-left: 1.1rem;
  max-width: var(--prose);
}

li {
  margin-bottom: 0.4rem;
}

li::marker {
  color: var(--dim);
}

strong {
  color: var(--bright);
  font-weight: 500;
}

/* ---------- Eyebrow / meta ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.875rem;
}

.meta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--dim);
  letter-spacing: 0.01em;
  max-width: var(--prose);
}

.pad-top {
  margin-top: 3.5rem;
}

.pad-bottom {
  margin-bottom: 3rem;
}

/* ---------- Byline ---------- */

/* Shared by the Dispatches index and individual posts, so the photo only
   has to be generated once and referenced from both. */
.byline {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.byline-photo {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.byline-name {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--dim);
}

/* ---------- Home ---------- */

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
}

.hero-copy {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--col);
}

/* Sized by height so the shot stays inside the viewport on short screens;
   width follows from the aspect ratio. */
.shot {
  flex: none;
  height: min(64vh, 34rem);
  width: auto;
  display: block;
}

.lede {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.028em;
  color: var(--bright);
  max-width: var(--col);
  margin: 0 0 2rem;
  text-wrap: balance;
}

.lede .soft {
  color: var(--muted);
}

/* Apple's own "Download on the App Store" badge (site/app-store-badge.svg,
   from Apple's official badge kit) - it carries its own artwork and colour,
   so this is just a wrapper: layout spacing plus an interaction affordance.
   Do not recolour, crop, or otherwise alter the badge itself; that's
   against Apple's usage guidelines. */
.cta {
  display: inline-block;
  line-height: 0;
  margin-bottom: 3.5rem;
  opacity: 1;
  transition: opacity 0.15s ease;
}

.cta:hover {
  opacity: 0.8;
}

.cta img {
  height: 3rem;
  width: auto;
  display: block;
}

/* ---------- Index list ---------- */

.index {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--col);
}

.index li {
  margin: 0;
  border-top: 1px solid var(--line);
}

.index li:last-child {
  border-bottom: 1px solid var(--line);
}

.index a {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.875rem 0;
  border: 0;
  color: var(--text);
}

.index a:hover {
  color: var(--bright);
}

.index .num {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--dim);
  letter-spacing: 0.02em;
  flex: none;
  width: 2rem;
}

.index a:hover .num {
  color: var(--muted);
}

.index .title {
  flex: 1 1 auto;
}

.index .note {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--dim);
  flex: none;
  text-align: right;
}

/* ---------- Feature blocks ---------- */

.block {
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
  margin-top: 2.75rem;
  max-width: var(--prose);
}

.block:first-of-type {
  margin-top: 0;
}

.block h2 {
  margin-top: 0;
}

.block p:last-child {
  margin-bottom: 0;
}

/* ---------- Changelog ---------- */

.release {
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
  margin-top: 3rem;
  max-width: var(--prose);
}

.release:first-of-type {
  margin-top: 0;
}

.release-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.125rem;
}

.release-head h2 {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.release-date {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--dim);
  white-space: nowrap;
}

.release ul {
  margin-bottom: 0;
}

/* ---------- Legal ---------- */

.legal h2 {
  margin-top: 2.75rem;
}

.legal h2:first-of-type {
  margin-top: 0;
}

.legal ul {
  margin-bottom: 1.125rem;
}

.legal .caps {
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* ---------- Company updates ---------- */

/* The updates list carries post titles rather than the one-word labels the
   home page index holds, so it runs wider than the styling it shares. */
.index.wide {
  max-width: 44rem;
}

.update .standfirst {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 2.5rem;
}

.update .stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding: 1.375rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-width: var(--prose);
}

.update .stat {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.update .stat-figure {
  font-family: var(--mono);
  font-size: 1.625rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--bright);
}

.update .stat-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
}

/* The section eyebrow carries the space above each section so its heading
   sits tight beneath its label instead of drifting away from it. Overrides
   the default h2 top margin, which assumes no label above it. */
.update .sec {
  margin: 3.25rem 0 0.5rem;
}

.update .sec + h2 {
  margin: 0 0 0.75rem;
}

.update .shot-figure {
  margin: 2.5rem 0 0;
}

.update .shot-figure img {
  display: block;
  width: 100%;
  max-width: 19rem;
  height: auto;
}

.update .shot-figure figcaption {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 1rem;
}

.update .next {
  border-left: 1px solid var(--line-strong);
  padding-left: 1.5rem;
  margin-top: 3.25rem;
  max-width: var(--prose);
}

.update .next .sec {
  margin-top: 0;
}

.update .next p:last-child {
  margin-bottom: 0;
}

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

.footer {
  flex: none;
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--dim);
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
}

/* Same colophon the app signs off with, in AccountManagementView. */
.colophon {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Matches the colophon so the whole footer row reads as one signature line. */
.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.footer a {
  color: var(--muted);
  border: 0;
}

.footer a:hover {
  color: var(--bright);
}

/* ---------- Responsive ---------- */

@media (max-width: 46rem) {
  .shell {
    padding: 1.5rem 1.375rem 2.5rem;
  }

  .topbar {
    margin-bottom: 3.5rem;
  }

  .hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
  }

  .hero-copy {
    max-width: 100%;
  }

  .shot {
    height: auto;
    width: 68%;
    max-width: 17rem;
    align-self: center;
  }

  .lede {
    font-size: 1.3125rem;
  }

  .cta {
    margin-bottom: 3.5rem;
  }

  /* The support row's note is its address, which is worth keeping on small
     screens even though it means the notes column survives here. */
  .index .note {
    font-size: 0.625rem;
  }

  .update .stats {
    gap: 1.75rem 2.25rem;
  }

  .footer {
    margin-top: 4rem;
    flex-direction: column;
    align-items: flex-start;
  }
}

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