/* doitinstead.com. Tokens come from /theme.css (a copy of docs/brand/theme/theme.css). */

/* Gabarito SemiBold (SIL OFL 1.1), subset to the letters of "Instead", so the
   lockup's name is real text. Built by docs/brand/scripts/build_wordmark.py. */
@font-face {
  font-family: "Gabarito";
  src: url("/fonts/gabarito-instead.woff2") format("woff2");
  font-weight: 600;
  font-display: block;
  unicode-range: U+49, U+61, U+64, U+65, U+6E, U+73, U+74;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.6 var(--font-sans);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
a { color: var(--accent-text); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-tag); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The lockup: mark + "Instead", built to BRAND.md. --h is the mark's height.
   Cap height = half the mark (Gabarito's caps are 0.681 em), caps centred on the
   mark, mark-to-type space = 0.3 of the mark's width (490/664 of its height). */
.lockup {
  --h: 32px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--h) * 490 / 664 * 0.3);
  color: var(--ink);
  text-decoration: none;
}
.mark { display: block; height: var(--h); width: calc(var(--h) * 490 / 664); flex: none; overflow: visible; }
.mark .g1 { stop-color: var(--mark-gold-1); }
.mark .g2 { stop-color: var(--mark-gold-2); }
.mark .g3 { stop-color: var(--mark-gold-3); }
.mark .e1 { stop-color: var(--mark-ember-1); }
.mark .e2 { stop-color: var(--mark-ember-2); }
.mark .e3 { stop-color: var(--mark-ember-3); }
.wordmark {
  font: 600 calc(var(--h) * 0.5 / 0.681) / 1 var(--font-wordmark);
  letter-spacing: -0.012em;
  /* Gabarito's I has a 0.068 em left side bearing: pull its stem onto the measured gap.
     With line-height 1 its caps already sit on the box's centre (ascent 0.94, descent 0.26). */
  margin-left: -0.068em;
}

/* Home. One idea: the mark's two halves shift apart as the page opens. */
.home {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 64px 16px 40px;
}
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.title { margin: 0; display: flex; flex-direction: column; align-items: center; font-weight: 400; }
.title .lockup { --h: clamp(84px, 22vw, 152px); }
.tagline {
  /* 0.5x clear space (BRAND.md) between the lockup and anything else. */
  margin-top: calc(clamp(84px, 22vw, 152px) * 0.22);
  font: 400 clamp(26px, 6.4vw, 40px)/1.15 var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--ink-muted);
}
.soon { margin: 48px 0 16px; color: var(--ink-faint); font-size: 15px; }
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.store {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-row);
  background: var(--veil);
  color: var(--ink);
  font-weight: 600;
}
.store svg { width: 22px; height: 22px; fill: currentColor; flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .title .mark .half-gold { animation: rise 900ms var(--spring-smooth) 200ms both; }
  .title .mark .half-ember { animation: sink 900ms var(--spring-smooth) 200ms both; }
}
/* Both halves start level (a disc cut in two), then one rises as the other sinks. */
@keyframes rise { from { transform: translateY(97px); } }
@keyframes sink { from { transform: translateY(-97px); } }

/* Documents. */
.doc { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; }
.doc .back { --h: 34px; margin: 0 0 48px -4px; padding: 4px; border-radius: var(--radius-tile); }
.doc .back:hover .wordmark { color: var(--ink-muted); }
.doc h1 { font: 400 clamp(32px, 6vw, 44px)/1.15 var(--font-serif); margin: 0 0 8px; letter-spacing: -0.01em; }
.doc .date { color: var(--ink-faint); margin: 0 0 32px; }
.doc h2 { font: 600 21px/1.3 var(--font-sans); margin: 40px 0 8px; }
.doc h3 { font: 600 17px/1.4 var(--font-sans); margin: 24px 0 4px; }
.doc p, .doc li { color: var(--ink-muted); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul { padding-left: 1.2em; }
.doc li { margin: 6px 0; }
.doc .summary { background: var(--surface); border-radius: var(--radius-panel); padding: 4px 20px; margin: 0 0 8px; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--line); color: var(--ink-muted); }
.doc th { color: var(--ink); font-weight: 600; }
.table-wrap { overflow-x: auto; }

/* 404. */
.lost { flex: 1; display: grid; place-items: center; align-content: center; gap: 40px; padding: 48px 16px; text-align: center; }
.lost .lockup { --h: 56px; }
.lost h1 { margin: 0; font: 400 clamp(32px, 7vw, 48px)/1.15 var(--font-serif); }
.lost p { margin: 8px 0 0; }

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  padding: 24px 16px 32px;
  color: var(--ink-faint);
  font-size: 15px;
}
footer a { color: var(--ink-faint); text-decoration: none; padding: 4px 0; }
footer a:hover { color: var(--ink); }