/* The site's own hand font, traced from the design sheet (design/build_font.py). Characters it lacks fall back to Patrick Hand. */
@font-face {
  font-family: "Telescope Hand";
  src: url("fonts/TelescopeHand.woff") format("woff");
  font-display: swap;
}

/* Shared tokens for the Telescope site. Ink on near-white by day, cream on night sea after dark. */
:root {
  --paper: #fdfdfc;
  --paper-2: #f4f3f1;
  --ink: #2a2622;
  --ink-soft: #66625d;
  --line: #2a2622;
  --rule: #e4e2de;
  --code-bg: #f1f0ed;

  --hand: "Telescope Hand", "Patrick Hand", "Comic Sans MS", cursive;
  --body: "Newsreader", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --gutter: 16px;
  --edge: clamp(16px, 4vw, 64px);
  --max: 1180px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1b26;
    --paper-2: #142331;
    --ink: #efe6d2;
    --ink-soft: #a9a08f;
    --line: #e9dfc9;
    --rule: #2a3a49;
    --code-bg: #172938;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1b26;
  --paper-2: #142331;
  --ink: #efe6d2;
  --ink-soft: #a9a08f;
  --line: #e9dfc9;
  --rule: #2a3a49;
  --code-bg: #172938;
  color-scheme: dark;
}

/* Font candidates from the type test; ?font=<key> or data-font on <html> picks one. */
[data-font="telescope"] { --hand: "Telescope Hand", "Patrick Hand", cursive; }
[data-font="patrick"] { --hand: "Patrick Hand", cursive; }
[data-font="comingsoon"] { --hand: "Coming Soon", cursive; }
[data-font="gaegu"] { --hand: "Gaegu", cursive; }
[data-font="kalam"] { --hand: "Kalam", cursive; }
[data-font="gochi"] { --hand: "Gochi Hand", cursive; }
[data-font="shadows"] { --hand: "Shadows Into Light Two", cursive; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  transition: background-color .4s ease, color .4s ease;
}
a { color: inherit; }
code, pre { font-family: var(--mono); font-size: .86em; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 40px; } }

.eyebrow {
  font-family: var(--hand);
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Header */
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px; padding-bottom: 18px;
  position: relative; z-index: 3;
}
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--hand); font-size: 24px; }
.brand .art { height: 26px; }
.nav { display: flex; align-items: center; gap: 18px; font-family: var(--hand); font-size: 18px; }
.nav a { text-decoration: none; }
.nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }

.theme-btn {
  appearance: none; border: 0; background: none; color: inherit; cursor: pointer;
  width: 32px; height: 32px; padding: 4px; border-radius: 50%;
}
.theme-btn svg { width: 100%; height: 100%; }
.theme-btn .moon { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .moon { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .sun { display: none; }
  :root:not([data-theme="light"]) .theme-btn .moon { display: inline; }
}

/* Hand-drawn button: the box and arrow are drawn by sketch.js; until then it has no outline. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--hand); font-size: 22px; line-height: 1;
  color: var(--ink); text-decoration: none;
  padding: 15px 26px 14px;
  background: transparent;
  transition: transform .2s ease;
}
.btn .sketch-box { position: absolute; inset: -3px -4px; width: calc(100% + 8px); height: calc(100% + 6px); overflow: visible; pointer-events: none; }
.btn .sketch-box path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.btn .sketch-box .again { stroke-width: 1.1; opacity: .75; }
.btn:hover { transform: translateY(-1px) rotate(-.5deg); }
.arrow { display: inline-flex; width: 1.15em; transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.sketch-arrow { width: 100%; height: auto; overflow: visible; }
.sketch-arrow path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn-sm { font-size: 18px; padding: 9px 16px 8px; }
@media (max-width: 699px) { .hide-sm { display: none; } }

/* Line art inherits the ink colour. */
.ink, .ink * { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* Traced art from the design sheet, painted in the current ink colour (see art.js). */
.art {
  display: block; background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.art.paper { background-color: var(--paper); transition: background-color .4s ease; }
.stage { position: relative; }
.stage > * { position: absolute; }
.piece > .art { position: absolute; inset: 0; }
.flip > .art { transform: scaleX(-1); }
.icon-art { display: inline-block; vertical-align: bottom; }

/* Full-width rows (hero, footer, docs) use the page edge instead of the centred column. */
.bleed { padding-left: var(--edge); padding-right: var(--edge); }