/*
  Deckle's website: the layout its pages share (index, companion, letters,
  make, install, community, privacy, terms, send, 404; write.html keeps its
  own). Color, type,
  buttons and the drawn X3 come from brand.css; this file arranges them: the
  header and footer, sections, heroes, device compositions, and small drawings
  of the app.

  Rules it keeps:
  - One idea per section, and space between sections rather than bands.
  - The device is the hero: one big X3 per hero, and each composition used
    once per page (a crop, a pair at two depths, a large device alone, a row).
  - Everything is visible without JavaScript; site.js only adds motion and
    small interactions.
  - Nothing makes a page scroll sideways, from 320px up.
*/

/* Figtree (SIL Open Font License, fonts/figtree-OFL.txt), served from this
   site: one variable file for every weight, and its italic. */
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-italic-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --head-h: 68px;
  --radius-lg: 28px;
  --measure: 36rem;
  /* The stage: a soft paper-grey ground for a showcase, full-bleed. */
  --stage: #ecebe5;
  /* A band that stays dark in both themes (the landing's closing). */
  --band-dark: #17181a;
  --on-dark: #f3f3ef;
  --on-dark-2: #b9bab5;

  /* X3 sizes that put the panel's pixels on whole device pixels. The screen
     is 88% of the device (6u of bezel each side), and the shots are 528
     pixels wide, so a device of
       300px has a 264px screen: 528 device pixels on a 2x display;
       600px has a 528px screen: exact at 1x, 2x and 3x;
       400px has a 352px screen: exact at 1.5x (and 2 pixels a pixel at 3x);
       200px has a 176px screen: exact at 3x.
     Size devices with these, never with vw or clamp(). Images of sm devices
     are the 528px shot alone (right at 1x, 2x and 3x); lg ones carry a
     srcset of 528w/1056w/1584w whose sizes attribute says the same widths. */
  --x3-sm: 300px;
  --x3-lg: 600px;
  /* The one big device on a phone: 400px at 3x, cropped by the window. */
  --x3-ph: 300px;
}
@media (min-resolution: 1.5dppx) and (max-resolution: 1.99dppx), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.99) {
  :root {
    --x3-lg: 400px;
  }
}
@media (min-resolution: 2.5dppx), (-webkit-min-device-pixel-ratio: 2.5) {
  :root {
    --x3-sm: 200px;
    --x3-ph: 400px;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --stage: #1b1c1f;
    --band-dark: #1d1e21;
  }
}
:root[data-theme="dark"] {
  --stage: #1b1c1f;
  --band-dark: #1d1e21;
}

html {
  scroll-padding-top: calc(var(--head-h) + 20px);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
main {
  display: block;
}
h3 {
  line-height: 1.2;
}
b,
strong {
  color: var(--ink);
  font-weight: 600;
}

/* ------------------------------------------------------------------ skip link */

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}

/* ------------------------------------------------------------------ header */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.25s ease;
}
.site-head.at-top {
  border-bottom-color: transparent;
}
.head-bar {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.4vw, 36px);
  min-height: var(--head-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font: 700 1.625rem/1 var(--display);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand:hover {
  text-decoration: none;
}
.brand .sprite {
  --s: 24px;
  flex: none;
}
/* The wordmark. */
.brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  min-width: 0;
}
.head-nav {
  display: flex;
  gap: 2px;
}
.head-nav a {
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--ink-2);
  font-weight: 500;
  font-size: 0.975rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.head-nav a:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.head-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}
.head-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.head-signin {
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.975rem;
  text-decoration: none;
  white-space: nowrap;
}
.head-signin:hover {
  background: var(--surface-2);
}
.head-menu {
  display: none;
}
.head-menu summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  cursor: pointer;
}
.head-menu summary::-webkit-details-marker {
  display: none;
}
.head-menu summary:hover {
  background: var(--surface-2);
}
.burger {
  position: relative;
  width: 20px;
  height: 12px;
}
.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, top 0.2s ease;
}
.burger::before {
  top: 0;
}
.burger::after {
  top: 10px;
}
.head-menu[open] .burger::before {
  top: 5px;
  transform: rotate(45deg);
}
.head-menu[open] .burger::after {
  top: 5px;
  transform: rotate(-45deg);
}
.menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: grid;
  padding: 4px var(--gutter) 28px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 30px 40px -30px rgba(0, 0, 0, 0.25);
}
.menu-panel > a {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font: 700 1.5rem/1.2 var(--display);
  text-decoration: none;
}
.menu-panel > a[aria-current="page"] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.menu-panel > a[aria-current="page"]::before {
  /* the page you're on: one pixel of the X3's ink, in the accent */
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--accent);
}
/* The menu's own Install and Sign in, as buttons at its foot: only on a phone,
   where they leave the bar (below). */
.menu-actions {
  display: none;
}
/* Until the bar has room for all five links beside the Early access pill: the
   brand, Sign in, Install and the menu. */
@media (max-width: 1040px) {
  .head-nav {
    display: none;
  }
  .head-menu {
    display: block;
  }
  .head-signin {
    padding-inline: 10px;
  }
}
@media (max-width: 400px) {
  .brand {
    gap: 8px;
    font-size: 1.45rem;
  }
  .head-end {
    gap: 2px;
  }
}
/* On a phone the bar is the brand and the menu, and nothing else: Install and
   Sign in move into the menu as its two buttons, where the menu's plain
   Install link gives way to the button. */
@media (max-width: 640px) {
  .head-end .head-signin,
  .head-end > .btn {
    display: none;
  }
  .menu-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 24px;
  }
  .menu-panel > a.menu-install,
  .menu-panel > a.menu-install[aria-current] {
    display: none;
  }
}

/* ------------------------------------------------------------------ footer */

.site-foot {
  padding-block: clamp(56px, 7vw, 88px) 40px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
  gap: 40px;
}
.foot-brand p {
  margin: 16px 0 0;
  color: var(--ink-3);
  font: 700 1.25rem/1.3 var(--display);
}
.foot-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.foot-nav .foot-h {
  margin: 0 0 14px;
  color: var(--ink-3);
  font: 600 var(--t-tiny) / 1.2 var(--text);
}
.foot-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.foot-nav a {
  color: var(--ink-2);
  text-decoration: none;
}
.foot-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
}
.foot-base p {
  margin: 0;
}
@media (max-width: 760px) {
  .foot-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .foot-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ sections */

.sec {
  padding-block: calc(var(--section) * 0.6);
}
.sec-tight {
  padding-block: calc(var(--section) * 0.35);
}
/* The stage: a full-bleed showcase, at most two to a page. */
.stage {
  padding-block: calc(var(--section) * 0.75);
  background: var(--stage);
  overflow-x: clip;
}
.sec-head {
  max-width: 48rem;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.sec-head.center {
  margin-inline: auto;
  text-align: center;
}
.sec-head.center .lede {
  margin-inline: auto;
  text-wrap: balance;
}
/* On a phone a centred lede runs to six lines or more, each starting in a
   new place: there the head sits on the left, like the rest of the page. */
@media (max-width: 699px) {
  .sec-head.center {
    text-align: left;
  }
  .sec-head.center .lede {
    margin-inline: 0;
    text-wrap: pretty;
  }
}
.sec-head .lede,
.copy .lede {
  margin: 24px 0 0;
}
.more {
  margin: 32px 0 0;
}
.center .more,
.more.center {
  text-align: center;
}
.copy .lede + p {
  margin: 20px 0 0;
}
.tnum {
  font-variant-numeric: tabular-nums;
}
.nw {
  white-space: nowrap;
}

/* Copy beside an image: a headline, a lede and, sometimes, a short list.
   Its headline stops at 52px, so a half-width column holds it in two lines
   rather than three ragged ones. */
.copy {
  max-width: var(--measure);
}
.feature .t-1 {
  font-size: clamp(2.4rem, 1.5rem + 2.2vw, 3.25rem);
  line-height: 1.04;
}
/* A headline of two sentences breaks between them, not inside one. */
.line {
  display: block;
}
.ticks {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.ticks li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 4px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}
.ticks li > b {
  color: var(--ink);
}
.ticks.plain li {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 520px) {
  .ticks li {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ feature rows */

/* The copy starts level with the top of its figure, however tall the figure
   is. The figure's column is a container: compositions that overlap (an X3
   with a phone, two X3s at two depths) choose their layout by the room they
   actually have, so an overlap is never squeezed onto a device's words. */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: start;
}
.feature-media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  container-type: inline-size;
}
.feature.flip .feature-media {
  order: -1;
}
.feature.wide-media {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 5vw, 72px);
}
@media (max-width: 900px) {
  .feature,
  .feature.wide-media {
    grid-template-columns: minmax(0, 1fr);
  }
  .feature.flip .feature-media {
    order: 0;
  }
}

/* Every device on the site is one of the sizes in :root (--x3-sm, --x3-lg,
   --x3-ph), so its screen lands on whole device pixels. */
.x3 {
  --w: var(--x3-sm);
}
.x3 .x3-screen img,
.x3 .x3-screen canvas {
  background: var(--eink-paper);
}
/* From 2x up every screen is at least one device pixel per panel pixel, so a
   browser that picks a larger file than it needs still lands each pixel
   whole. (Below 2x a 264px screen is smaller than the panel: smoothing it is
   kinder than dropping rows.) */
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
  .x3 .x3-screen img,
  .x3 .x3-screen canvas,
  .crop img {
    image-rendering: pixelated;
  }
}
/* Below 360px wide the small device can't fit whole at 300px; there, being
   whole matters more than being exact. */
@media (max-width: 359px) and (max-resolution: 2.49dppx) {
  :root {
    --x3-sm: 272px;
    --x3-ph: 272px;
  }
}

/* ------------------------------------------------------------------ heroes

  Each page opens in its own composition, and every device in them is one
  of the exact sizes (--x3-lg at desktop widths, --x3-ph on a phone):
  - .hero-cut .hero-home (the landing): as make, cut lower, to show the tiles.
  - .hero-rise (letters): centered copy, and the X3 rising out of the section
    below, which cuts it off under the first reply.
  - .hero-cut (make): copy beside the X3, cut off by the stage below.
  - .hero-say (companion): Deckle itself, three times the panel's size.
*/

.hero {
  overflow-x: clip;
  padding-block: clamp(24px, 4vw, 56px) clamp(80px, 9vw, 136px);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.t-hero.long {
  font-size: clamp(2.75rem, 1.5rem + 4.6vw, 5.5rem);
  line-height: 1;
}
.hero .lede {
  margin: 30px 0 0;
  max-width: 31rem;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}
.fine {
  margin: 22px 0 0;
  color: var(--ink-3);
  font-size: var(--t-small);
}
/* The landing's line about early access, under the fine print: one pixel of
   the accent, and the words linking to the updates. */
.early-note {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 0;
  font-size: var(--t-small);
}
.early-note::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--accent);
  translate: 0 -1px;
}
.early-note a {
  color: var(--ink-2);
  text-decoration-color: var(--accent);
}
.early-note a:hover {
  color: var(--ink);
}
@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
}
@media (max-width: 420px) {
  .cta-row .btn {
    flex: 1 1 100%;
  }
}

.hero-media .x3 {
  border-radius: calc(var(--u) * 4) calc(var(--u) * 4) 0 0;
}

/* The landing: .hero-cut, as on make, with the X3's right edge on the page's
   line and the stage below cutting it off -- lower here, so the sleep
   screen's tiles show (6u of bezel and 93% of the panel). */
.hero-home .hero-media {
  height: calc(var(--hw) * 1.288 + 8px);
}
/* Both buttons on one row in the copy's column, beside the X3. Its two
   columns start at 1180, not make's 1100: its buttons say more. */
@media (min-width: 1180px) {
  .hero-home .cta-row .btn-lg {
    padding-inline: 20px;
  }
}
@media (max-width: 1179px) {
  .hero-cut.hero-home .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .hero-cut.hero-home .hero-copy {
    padding-block: 0 32px;
  }
}
/* On a phone the X3 comes up into the first screen: "See how it works" is a
   plain link rather than a second button, the X3 follows the buttons and
   what installing takes, whole, and the early-access line waits under it. */
@media (max-width: 699px) {
  .hero-cut.hero-home .hero-grid {
    gap: 0;
  }
  .hero-cut.hero-home .hero-copy {
    display: contents;
  }
  .hero-home .lede {
    margin-top: 22px;
  }
  .hero-home .cta-row {
    align-items: center;
    gap: 8px 28px;
    margin-top: 28px;
  }
  .hero-home .cta-row .how {
    --b-bg: transparent;
    --b-bd: transparent;
    min-height: 44px;
    padding: 0;
    border: 0;
    font-size: 1rem;
  }
  .hero-home .cta-row .how::after {
    content: "→";
    transition: transform 0.15s ease;
  }
  .hero-home .cta-row .how:hover {
    transform: none;
  }
  .hero-home .cta-row .how:hover::after {
    transform: translateX(3px);
  }
  .hero-home .hero-media {
    order: 1;
    height: auto;
    margin-top: 32px;
    padding-bottom: 24px;
  }
  .hero-home .hero-media > .x3 {
    border-radius: calc(var(--u) * 4);
  }
  /* What installing takes stays under the buttons, on the first screen, so
     nobody signs in on a phone before reading it (docs/reviews/onboarding). */
  .hero-home .fine {
    margin-top: 18px;
    text-wrap: balance;
  }
  .hero-home .early-note {
    order: 3;
    margin-bottom: 56px;
  }
}

/* Letters: centered copy, and the X3 cut off by the stage below, just under
   the first reply (6u of bezel and 58% of the panel). */
.hero-rise {
  padding-bottom: 0;
  text-align: center;
}
.hero-rise .lede {
  margin-inline: auto;
  text-wrap: balance;
}
.hero-rise .cta-row {
  justify-content: center;
}
.rise {
  --hw: var(--x3-lg);
  position: relative;
  display: flex;
  justify-content: center;
  height: calc(var(--hw) * 0.823 + 8px);
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 8px;
  overflow: hidden;
}
.rise > .x3 {
  --w: var(--hw);
  border-radius: calc(var(--u) * 4) calc(var(--u) * 4) 0 0;
}
@media (max-width: 699px) {
  .rise {
    --hw: var(--x3-ph);
  }
}

/* Make: the X3 beside the copy, cut off by the stage below (6u of bezel and
   76% of the panel, just under the last line of its screen). */
.hero-cut {
  padding-bottom: 0;
}
.hero-cut .hero-grid {
  --hw: var(--x3-lg);
  grid-template-columns: minmax(0, 1fr) var(--hw);
  gap: clamp(32px, 4vw, 56px);
  align-items: end;
}
.hero-cut .hero-copy {
  align-self: center;
  padding-block: 24px 64px;
}
.hero-media {
  display: flex;
  justify-content: center;
  height: calc(var(--hw) * 1.064 + 8px);
  padding-top: 8px;
  overflow: hidden;
}
.hero-media > .x3 {
  --w: var(--hw);
}
@media (max-width: 1099px) {
  .hero-cut .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .hero-cut .hero-copy {
    padding-block: 0 32px;  /* stacked, its title starts where every page's does */
  }
}
@media (max-width: 699px) {
  .hero-cut .hero-grid {
    --hw: var(--x3-ph);
  }
  .hero-media {
    margin-inline: calc(-1 * var(--gutter));
  }
}

/* Companion: Deckle saying hello, drawn by the X3's renderer and shown at
   three times the panel's size (two on a phone), so every pixel of it is a
   square of whole pixels. */
.hero-say .hero-grid {
  grid-template-columns: minmax(0, 1fr) auto;
}
.say {
  --z: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.say img {
  width: calc(160px * var(--z));
  height: calc(182px * var(--z));
  max-width: none;
}
@media (max-width: 1099px) {
  .say {
    --z: 2;
  }
}
@media (max-width: 960px) {
  .hero-say .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 359px) {
  .say {
    --z: 1;
  }
}
/* Drawn in e-ink ink, like the sprites: inverted on a dark page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .say img {
    filter: invert(1) brightness(0.95);
  }
}
:root[data-theme="dark"] .say img {
  filter: invert(1) brightness(0.95);
}

/* ------------------------------------------------------------------ a day with Deckle */

/* Three moments in a row, inside the page's own width. */
.day {
  --gap: clamp(24px, 4vw - 16px, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px var(--gap);
}
.day-item {
  min-width: 0;
}
.day-time {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 36px;
  color: var(--ink);
  font: 600 var(--t-small) / 1 var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.day-time::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--ink);
}
.day-time::after {
  content: "";
  flex: 1;
  height: 1px;
  margin-right: calc(-1 * var(--gap));
  background: var(--rule-2);
}
.day-item:last-child .day-time::after {
  margin-right: 0;
  background: linear-gradient(90deg, var(--rule-2), transparent);
}
.day h3 {
  margin: 40px 0 10px;
  font-size: var(--t-3);
  font-weight: 700;
}
.day p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-body);
  max-width: 24em;
}

/* A strip that scrolls inside itself, one X3 at a time: the day below
   1060px, and the reading trio below 900px. .strip-scroll is the scroller
   (a labelled, focusable region, so keys scroll it too). */
.swipe-hint {
  display: none;
  margin: 24px 0 0;
  color: var(--ink-3);
  font-size: var(--t-small);
  text-align: center;
}
@media (max-width: 1059px) {
  .strip-scroll:has(> .wrap > .day) {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  .strip-scroll:has(> .wrap > .day) > .wrap {
    max-width: none;
    padding-inline: 0;
  }
  .day {
    --gap: 24px;
    display: flex;
    width: max-content;
    padding-inline: var(--gutter);
  }
  .day-item {
    flex: none;
    width: max(var(--x3-sm), 240px);
    scroll-snap-align: start;
  }
  .day h3 {
    margin-top: 32px;
  }
  .strip-scroll:has(> .wrap > .day) + .swipe-hint {
    display: block;
  }
}
.strip-scroll::-webkit-scrollbar {
  display: none;
}
/* The companion: the room on three days of Sam's week, a line under each,
   then what they show, in words. */
.life-strip .day figure + p {
  margin-top: 30px;
}
.life-strip ~ .wrap {
  margin-top: clamp(64px, 8vw, 104px);
}

/* ------------------------------------------------------------------ annotated X3

  Labels beside a screen, each pointing at the line it names. --at is where
  that line sits on the panel, as a fraction of its height (0 top, 1 bottom);
  the screen spans 6u to 138u of the device's 150u height. Where there's no
  room beside it, numbered pins on the X3's edge match a numbered list. */

.annotated {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 12.5rem);
  align-items: start;
  gap: 0;
}
.pinned {
  position: relative;
}
.notes {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
.notes li {
  position: absolute;
  left: 0;
  right: 0;
  top: calc((6 + 132 * var(--at)) / 150 * 100%);
  translate: 0 -50%;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.3;
}
.notes li::before {
  content: "";
  flex: none;
  width: clamp(24px, 3vw, 44px);
  height: 1px;
  background: var(--ink-3);
}
.notes li::after {
  content: "";
  position: absolute;
  left: -4px;
  width: 8px;
  height: 8px;
  background: var(--accent);
}
.pins {
  display: none;
}
@media (max-width: 1100px) {
  .annotated {
    grid-template-columns: minmax(0, auto);
    justify-items: center;
  }
  .pins {
    display: block;
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
  }
  .pins li,
  .notes li::before {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    font: 700 0.8125rem/1 var(--text);
    font-variant-numeric: tabular-nums;
  }
  /* on the X3's right edge, level with the line each names */
  .pins li {
    position: absolute;
    right: -13px;
    top: calc((6 + 132 * var(--at)) / 150 * 100%);
    translate: 0 -50%;
    box-shadow: 0 0 0 2px var(--paper);
  }
  .notes {
    counter-reset: note;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 22px;
    height: auto;
    max-width: 34rem;
    margin-top: 32px;
  }
  .notes li {
    position: static;
    translate: none;
    counter-increment: note;
    gap: 10px;
  }
  .notes li::before {
    content: counter(note);
    height: 26px;
  }
  .notes li::after {
    display: none;
  }
}

/* ------------------------------------------------------------------ looks

  A look: its face, its name and a line about it (the index of every look on
  /companion, .look-index, lays these out as lines). */

.look {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 14px;
  height: 100%;
  margin: 0;
  padding: clamp(20px, 2.6vw, 32px) 10px clamp(16px, 2vw, 24px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Sprites are 24 cells square: every size here is a whole number of pixels
   a cell (4 on a desktop, 3 on a tablet, 2 on a phone). */
.look .sprite {
  --s: 96px;
}
.look figcaption {
  display: grid;
  gap: 2px;
}
.look-name {
  color: var(--ink);
  font-weight: 600;
  font-size: var(--t-small);
  line-height: 1.3;
}
.look-about {
  margin: 4px 0 0;
  color: var(--ink-3);
  font-size: var(--t-tiny);
  line-height: 1.45;
  max-width: 17em;
}
.look[role="button"] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.look[role="button"]:hover,
.look[role="button"]:focus-visible {
  transform: translateY(-3px);
  border-color: var(--rule-2);
  box-shadow: var(--shadow-2);
}
@media (max-width: 1100px) {
  .look .sprite {
    --s: 72px;
  }
}
/* On a phone: small, names only. */
@media (max-width: 560px) {
  .look {
    gap: 8px;
    padding: 14px 4px 12px;
    border-radius: var(--radius-sm);
  }
  .look .sprite {
    --s: 48px;
  }
  .look-name {
    font-size: var(--t-tiny);
  }
  .look-about {
    display: none;
  }
}
.js-only {
  display: none;
}
.js .js-only {
  display: revert;
}

/* ------------------------------------------------------------------ the moods (companion)

  Its moods the way the X3 shows them: Deckle small on the rug in its room,
  with what the mood is about around it, each cut from a sleep screen of its
  own (shots/crops/mood-*.png, 288 x 140 panel pixels), and under each the
  mood and its reason. A crop is all 4 x 4 cells of the room's sprite, so it
  is scaled up whole (pixelated) to a size with a whole number of pixels in a
  cell, the largest the row has room for: two a row, up to seven pixels a
  cell (1.75 times the panel's size) on a laptop, and one a row on a phone.
  A night away closes the row, smaller, beside its line. */

.moods-wrap {
  container-type: inline-size;
}
.moods {
  --z: 1;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: clamp(48px, 6vw, 72px) 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.moods li {
  display: grid;
  align-content: start;
  gap: 6px;
  width: calc(288px * var(--z));
}
.floor {
  width: calc(288px * var(--z));
  height: calc(140px * var(--z));
  max-width: none;
  box-sizing: content-box;
  padding-block: calc(10px * var(--z));
  border-radius: var(--radius-sm);
  background: var(--eink-paper);
  outline: 1px solid rgba(0, 0, 0, 0.08);
  outline-offset: -1px;
  image-rendering: pixelated;
}
.moods .floor {
  margin-bottom: 18px;
}
.moods b {
  color: var(--ink);
  font: 700 var(--t-3) / 1.2 var(--display);
}
.moods span {
  max-width: 26em;
  color: var(--ink-2);
  line-height: 1.5;
  text-wrap: pretty;
}
@container (min-width: 752px) {
  .moods {
    --z: 1.25;
  }
}
@container (min-width: 896px) {
  .moods {
    --z: 1.5;
  }
}
@container (min-width: 1040px) {
  .moods {
    --z: 1.75;
  }
}
@container (max-width: 607px) {
  .moods {
    grid-template-columns: auto;
  }
}
@container (min-width: 360px) and (max-width: 607px) {
  .moods {
    --z: 1.25;
  }
}
@container (min-width: 432px) and (max-width: 607px) {
  .moods {
    --z: 1.5;
  }
}
@container (min-width: 504px) and (max-width: 607px) {
  .moods {
    --z: 1.75;
  }
}
@container (max-width: 287px) {
  .moods {
    --z: 0.75;
  }
}
.away {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px 32px;
  margin: clamp(56px, 7vw, 88px) 0 0;
  color: var(--ink-2);
}
.away span {
  max-width: 21em;
  text-wrap: balance;
}
.away .floor {
  --z: 0.75;
  flex: none;
}
@container (max-width: 607px) {
  .away {
    flex-direction: column;
    text-align: center;
  }
}
/* like the X3's own screen on a dark page, a little dimmer (brand.css) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .floor {
    filter: brightness(0.84);
    outline-color: rgba(255, 255, 255, 0.14);
  }
}
:root[data-theme="dark"] .floor {
  filter: brightness(0.84);
  outline-color: rgba(255, 255, 255, 0.14);
}

/* ------------------------------------------------------------------ three rooms, three looks (companion, landing)

  The room on three days of Sam's week with another look on the rug each
  time (shots/crops/room-*.png, 480 x 548 panel pixels: the room alone, cut
  from a sleep screen), laid in a row like prints: the middle one in front,
  over the edges of the two beside it, which sit a little lower. Rooms are
  whole cells of the sprite too, so they are shown at half, five eighths,
  three quarters or all of the panel's size, whichever fits (two, two and a
  half, three or four pixels a cell; five eighths only on a 2x screen). On a
  phone they become a strip that scrolls. Under them, every look by name
  (/companion), or every look in a row (the landing, .parade-row). */

.rooms-scroll {
  container-type: inline-size;
}
.rooms {
  --z: 0.5;
  --rw: calc(480px * var(--z));
  --lift: rgba(20, 20, 20, 0.34);
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
}
.rooms li {
  position: relative;
  flex: none;
  width: var(--rw);
}
.rooms li:first-child,
.rooms li:last-child {
  z-index: 1;
  margin-top: calc(56px * var(--z));
}
.rooms li:first-child {
  margin-right: calc(-0.12 * var(--rw));
}
.rooms li:last-child {
  margin-left: calc(-0.12 * var(--rw));
}
.rooms li:nth-child(2) {
  z-index: 2;
}
.rooms figure {
  margin: 0;
}
.rooms img {
  width: var(--rw);
  height: calc(548px * var(--z));
  max-width: none;
  border-radius: var(--radius-sm);
  background: var(--eink-paper);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--shadow-1);
  image-rendering: pixelated;
}
/* The one in front: a paper-white edge, like a print's, and its shadow on
   the two under it. */
.rooms li:nth-child(2) img {
  box-shadow:
    0 0 0 calc(8px * var(--z)) var(--paper),
    0 calc(24px * var(--z)) calc(48px * var(--z)) calc(-12px * var(--z)) var(--lift);
}
.rooms figcaption {
  margin-top: 22px;
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 600;
  text-align: center;
}
.rooms figcaption::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  vertical-align: 0.1em;
  background: var(--accent);
}
.rooms li:nth-child(2) figcaption {
  margin-top: calc(22px + 8px * var(--z));
}
/* The row is 2.76 rooms wide, inside the gutters: 663 pixels at half the
   panel's size, 828 at five eighths (five device pixels a cell on a 2x
   screen), 994 at three quarters, 1325 at the panel's size. */
@media (min-resolution: 2dppx) and (max-resolution: 2.49dppx), (-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 2.49) {
  @container (min-width: 912px) {
    .rooms {
      --z: 0.625;
    }
  }
}
@container (min-width: 1088px) {
  .rooms {
    --z: 0.75;
  }
}
@container (min-width: 1424px) {
  .rooms {
    --z: 1;
  }
}
/* like the X3's own screen on a dark page, a little dimmer (brand.css) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rooms {
    --lift: rgba(0, 0, 0, 0.7);
  }
  :root:not([data-theme="light"]) .rooms img {
    filter: brightness(0.84);
  }
}
:root[data-theme="dark"] .rooms {
  --lift: rgba(0, 0, 0, 0.7);
}
:root[data-theme="dark"] .rooms img {
  filter: brightness(0.84);
}
/* On a phone: side by side in a strip that scrolls, the next one showing at
   the edge (two pixels a cell, or eight device pixels on a 3x screen). */
@media (max-width: 759px) {
  .rooms-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  .rooms-scroll::-webkit-scrollbar {
    display: none;
  }
  .rooms {
    justify-content: flex-start;
    gap: 16px;
    width: max-content;
  }
  .rooms li,
  .rooms li:first-child,
  .rooms li:last-child {
    margin: 0;
    scroll-snap-align: start;
  }
  .rooms li:nth-child(2) img {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--shadow-1);
  }
  .rooms figcaption,
  .rooms li:nth-child(2) figcaption {
    margin-top: 22px;
    text-align: left;
  }
  .rooms-scroll + .swipe-hint {
    display: block;
  }
}
@media (max-width: 759px) and (min-resolution: 2.5dppx), (max-width: 759px) and (-webkit-min-device-pixel-ratio: 2.5) {
  .rooms {
    --z: calc(2 / 3);
  }
}

/* The twelve looks, by name: an index under the rooms, each a line with its
   face (which runs through its moods on hover, focus or a tap: site.js), its
   name and a line about it. */
.look-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
  margin: clamp(64px, 8vw, 104px) 0 0;
  padding: 0;
  list-style: none;
}
.look-index li {
  min-width: 0;
  border-top: 1px solid var(--rule-2);
}
.look-index .look {
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: left;
}
.look-index .sprite {
  --s: 48px;
}
.look-index .look-name {
  font-size: var(--t-body);
}
.look-index .look-about {
  margin: 0;
  max-width: none;
  font-size: var(--t-small);
}
.look-index .look[role="button"]:hover,
.look-index .look[role="button"]:focus-visible {
  transform: none;
  box-shadow: none;
}
.look-index .look:focus-visible {
  border-radius: 6px;
}
.look-index .look[role="button"]:hover .look-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
/* The looks found along the way: a few of them under a heading of their own,
   each with what it waits for, and the rest as one soft shape. */
.look-index-head {
  margin: clamp(48px, 6vw, 72px) 0 14px;
  font: 600 var(--t-body) / 1.3 var(--text);
  color: var(--ink);
}
.look-index.found {
  margin-top: 0;
}
.look-found {
  margin: 4px 0 0;
  color: var(--accent);
  font-size: var(--t-tiny);
  line-height: 1.4;
}
.look-more .sprite {
  opacity: 0.14;
}
@media (max-width: 900px) {
  .look-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* On a phone: two across, names only (each keeps its line for screen
   readers, through site.js's aria-describedby). */
@media (max-width: 560px) {
  .look-index {
    gap: 0 16px;
  }
  .look-index .look {
    gap: 12px;
    padding: 12px 0;
  }
  .look-index .look-about {
    display: none;
  }
}

/* Look and name: a drawing of the app's card, which saves as you go, and
   under it the companion saying hello with that look and name, drawn by the
   X3's renderer in the sleep screen's own bubble (shots/crops/hello-pip.svg,
   342 x 206 panel pixels, shown at the panel's size). */
.name-demo {
  display: grid;
  justify-items: start;
  gap: 32px;
  width: min(100%, 460px);
}
.name-demo > .ui {
  width: min(100%, 380px);
}
.hello-px {
  justify-self: end;
  width: 342px;
  height: 206px;
  max-width: none;
}
/* Narrower than the drawing: centered under the card, and on the smallest
   phones at half the size (a device pixel a panel pixel at 2x). */
@container (max-width: 400px) {
  .hello-px {
    justify-self: center;
  }
}
@container (max-width: 341px) {
  .hello-px {
    width: 171px;
    height: 103px;
  }
}
/* Drawn in e-ink ink, like the sprites: inverted on a dark page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hello-px {
    filter: invert(1) brightness(0.95);
  }
}
:root[data-theme="dark"] .hello-px {
  filter: invert(1) brightness(0.95);
}
/* What the app says as it saves */
.ui-saved {
  display: block;
  margin: 2px 0 0;
  color: var(--accent);
  font-size: var(--t-tiny);
  font-weight: 600;
  line-height: 1.45;
}
.pick {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 20px;
}
.pick span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
}
.pick .sprite {
  --s: 24px;
}
.pick .on {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.ui-label {
  display: block;
  color: var(--ink-2);
  font-size: var(--t-tiny);
  font-weight: 600;
}
.ui-body .ui-field {
  margin: 8px 0 20px;
}
.quote {
  margin: 0 0 18px;
  color: var(--ink);
  font: 500 1.0625rem/1.55 var(--text);
}

/* ------------------------------------------------------------------ a pair at two depths

  One X3 in front and a second behind it, higher and to the right, each with
  a short label. Both are the same exact size; the overlap gives the depth.
  It is only ever drawn over the back one's empty panel, so no word on it is
  cut: the front one's top edge crosses the back one's panel at row 309 of
  792 (0.06 + 1.32 * 309 / 792 = 0.575 of a device width down, and the front
  is 1.5 tall), under the last row of the screen behind (the confirm
  screen's "Not now"). Below that only the key labels are left, and the
  front one ends between two of them: with room, it hides PREV and NEXT
  (its edge at panel column 250 of the one behind, which sits 0.5233 of a
  device width to the right); without, all four (column 486, 0.13 across). */

.depth {
  --fw: var(--x3-sm);
  position: relative;
  width: calc(var(--fw) * 1.13);
  max-width: 100%;
  height: calc(var(--fw) * 2.075);
  margin-inline: auto;
}
@container (min-width: 460px) {
  .depth {
    width: calc(var(--fw) * 1.5233);
  }
}
/* The small device (3x screens) needs less room for the wide pair. */
@media (min-resolution: 2.5dppx), (-webkit-min-device-pixel-ratio: 2.5) {
  @container (min-width: 310px) {
    .depth {
      width: calc(var(--fw) * 1.5233);
    }
  }
}
.depth figure {
  position: absolute;
  margin: 0;
}
/* The back one stands higher, so its first lines (what its caption names)
   clear the front one's top edge. */
.depth .front {
  left: 0;
  bottom: 0;
  z-index: 2;
}
.depth .back {
  right: 0;
  top: 0;
  z-index: 1;
}
.depth .x3 {
  --w: var(--fw);
}
.depth figcaption {
  position: absolute;
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 600;
  white-space: nowrap;
}
.depth .back figcaption {
  right: 0;
  bottom: calc(100% + 14px);
}
.depth .front figcaption {
  left: 0;
  top: calc(100% + 14px);
}
.depth figcaption::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  vertical-align: 0.1em;
  background: var(--accent);
}
.depth-wrap {
  padding-block: 40px 44px;
}

/* ------------------------------------------------------------------ three X3s (landing)

  The middle one a little higher than the two beside it, and nothing over
  any of them; each with its caption. Below 1060px they become a strip that
  scrolls inside itself, the middle one first. */

.trio {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 3vw, 40px);
  margin: 0;
  padding: 12px 0 0;
  list-style: none;
}
.trio-item {
  position: relative;
  flex: none;
  width: var(--x3-sm);
}
.trio-item figure {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.trio .x3 {
  margin-top: 32px;
}
.trio .main .x3 {
  margin: 0 0 32px;
}
.trio figcaption {
  margin-top: 36px;
  text-align: center;
}
.trio figcaption b {
  display: block;
  margin-bottom: 4px;
}
.trio figcaption span {
  color: var(--ink-2);
  font-size: var(--t-body);
}
@media (max-width: 1059px) {
  .strip-scroll:has(> .wrap > .trio) {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  .strip-scroll:has(> .wrap > .trio) > .wrap {
    max-width: none;
    padding-inline: 0;
  }
  .trio {
    gap: 24px;
    justify-content: flex-start;
    width: max-content;
    padding-inline: var(--gutter);
  }
  .trio-item {
    width: max(var(--x3-sm), 240px);
    scroll-snap-align: start;
  }
  /* The strip opens on the middle one: Books, first. */
  .trio .main {
    order: -1;
  }
  .trio .x3,
  .trio .main .x3 {
    margin: 0;
  }
  .trio figcaption {
    margin-top: 24px;
    text-align: left;
  }
  .strip-scroll:has(> .wrap > .trio) + .swipe-hint {
    display: block;
  }
}

/* ------------------------------------------------------------------ text sizes (make)

  The same words at each text size, cut from the panel (shots/crops) and
  shown at one pixel a panel pixel on a desktop; on a phone, one or two
  device pixels a panel pixel. */

.sizes {
  --z: 1;
  display: grid;
  gap: 22px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.sizes li {
  display: grid;
  grid-template-columns: 15rem auto;
  align-items: center;
  gap: 16px clamp(24px, 4vw, 56px);
  padding-top: 22px;
  border-top: 1px solid var(--rule-2);
}
.sizes-name {
  margin: 0;
}
.sizes-name b {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font: 700 var(--t-3) / 1.2 var(--display);
}
.sizes-name span {
  color: var(--ink-2);
}
/* The keyline is an outline, drawn over the image rather than under it. */
.crop {
  overflow: hidden;
  border-radius: 12px;
  background: var(--eink-paper);
  outline: 1px solid rgba(0, 0, 0, 0.08);
  outline-offset: -1px;
}
.sizes .dark .crop {
  background: var(--eink-ink);
}
.crop img {
  display: block;
  width: calc(512px * var(--z));
  height: auto;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .crop {
    filter: brightness(0.84);
    outline-color: rgba(255, 255, 255, 0.14);
  }
}
:root[data-theme="dark"] .crop {
  filter: brightness(0.84);
  outline-color: rgba(255, 255, 255, 0.14);
}
.sizes-note {
  margin: 28px auto 0;
  color: var(--ink-3);
  font-size: var(--t-small);
  text-align: center;
}
@media (max-width: 860px) {
  .sizes li {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 599px) {
  .sizes {
    --z: 0.5;
  }
}
@media (max-width: 599px) and (min-resolution: 2.5dppx), (max-width: 599px) and (-webkit-min-device-pixel-ratio: 2.5) {
  .sizes {
    --z: calc(2 / 3);
  }
}

/* ------------------------------------------------------------------ drawings of the app

  Small, honest drawings of the app's own cards (the screen builder, look and
  name, the feed picker, a letter, an invitation, the send page), headed as
  the app heads them: a title in Recoleta, no window around it. No type in
  them is smaller than 13px. They are pictures: each has role="img" and a
  label saying what it shows. */

.ui {
  width: min(100%, 520px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 22px;
  box-shadow: var(--shadow-2);
  overflow: hidden;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-align: left;
}
.ui-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 22px 20px 2px;
}
.ui-title {
  color: var(--ink);
  font: 700 1.3125rem/1.2 var(--display);
  letter-spacing: -0.01em;
}
.ui-body {
  padding: 18px 20px 20px;
}
.ui-small {
  color: var(--ink-3);
  font-size: var(--t-tiny);
}
.ui-btn {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  font-size: var(--t-tiny);
  white-space: nowrap;
}
.ui-btn.quiet {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--rule-2);
}
.ui-field {
  display: block;
  min-height: 42px;
  padding: 10px 14px;
  border: 1.5px solid var(--field);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
}
.ui-field.focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ui-caret {
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--ink);
}

/* The screen builder, as drawn on the landing */
.builder-tabs {
  display: flex;
  gap: 4px;
  margin-left: 4px;
}
.builder-tabs span {
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--ink-3);
  font-size: var(--t-tiny);
  font-weight: 600;
}
.builder-tabs .on {
  background: var(--surface-2);
  color: var(--ink);
}
.builder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.builder-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 500;
}
.builder-list .kind {
  flex: none;
  min-width: 4.6em;
  color: var(--ink-3);
  font-size: var(--t-tiny);
  font-weight: 600;
}
.builder-list .grip {
  flex: none;
  width: 8px;
  height: 14px;
  background: radial-gradient(circle, var(--ink-3) 1.2px, transparent 1.4px) 0 0 / 4px 4.6px;
  opacity: 0.7;
}
.builder-list .on {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.builder-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 4px 22px;
}
.builder-acts span {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--t-tiny);
  font-weight: 600;
}
.builder-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--rule-2);
}
.builder-add b {
  margin-right: 4px;
  font-size: var(--t-tiny);
}
.builder-add span {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--rule-2);
  color: var(--ink-2);
  font-size: var(--t-tiny);
  font-weight: 600;
}
.ui-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
}

/* A drawing with an X3 overlapping its lower corner: once per page at most. */
.combo {
  --cw: var(--x3-sm);
  position: relative;
  display: grid;
  flex: none;
  justify-items: start;
  width: min(560px, 100%);
  /* The X3 overlaps only the drawing's bottom padding (20px), never its
     words or controls, however far across the drawing it reaches. */
  padding-bottom: calc(var(--cw) * 1.5 - 20px);
}
.combo > .ui {
  width: min(100%, 420px);
}
/* The drawing's lowest strip: 20px for the X3 to overlap, and 12px more
   between its edge and the last words or button. */
.combo > .ui > :last-child {
  padding-bottom: 32px;
}
.combo > .x3 {
  --w: var(--cw);
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
}
/* On a phone the X3 sits under the drawing, overlapping only its margin. */
@media (max-width: 560px) {
  .combo {
    padding-bottom: 0;
    justify-items: center;
  }
  .combo > .x3 {
    position: relative;
    margin-top: 28px;
  }
}

/* The feed picker */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
}
.chips span {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--rule-2);
  color: var(--ink-2);
  font-size: var(--t-tiny);
  font-weight: 600;
}
.chips .on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.feeds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.feeds li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}
.feeds b {
  display: block;
  font-weight: 600;
}
.feeds small {
  color: var(--ink-3);
  font-size: var(--t-tiny);
}
.toggle {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--field);
}
.toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.toggle.on {
  background: var(--accent);
}
.toggle.on::after {
  left: 19px;
}

/* A longer letter being written */
.letter-field {
  min-height: 12.5em;
  line-height: 1.6;
}
.ui-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ui-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
}
.ui-link .ui-field {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink-2);
  font-size: var(--t-tiny);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A friend code, as a statement across the page (letters): the code itself
   set large, in the app's type for codes, with how it's used under it. */
.statement {
  max-width: 62rem;
  margin-inline: auto;
  text-align: center;
}
.statement .lede {
  max-width: 40rem;
  margin: 24px auto 0;
  text-wrap: balance;
}
.big-code {
  margin: clamp(44px, 6vw, 80px) 0 0;
  /* the trailing letter-spacing, given back on the left, so it centers */
  padding-left: 0.12em;
  color: var(--ink);
  font: 600 clamp(2.5rem, 0.5rem + 9.5vw, 8.5rem) / 1 var(--mono);
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.big-code-cap {
  margin: 18px 0 0;
  color: var(--ink-3);
  font-size: var(--t-small);
}
.statement .code-note {
  max-width: 34rem;
  margin: clamp(36px, 4.5vw, 56px) auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--rule-2);
  color: var(--ink-2);
}

/* A phone, for the pages friends and phones see: a drawing, like the app's
   cards, in 13px type whatever its size (it holds less, not smaller). */
.phone {
  --pw: 216px;
  width: var(--pw);
  aspect-ratio: 9 / 18.6;
  flex: none;
  padding: 9px;
  border-radius: 38px;
  background: #1b1c1f;
  box-shadow: inset 0 0 0 1.5px #3a3b3f, var(--shadow-2), 0 40px 70px -40px rgba(0, 0, 0, 0.45);
}
.phone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 46px 14px 16px;
  border-radius: 30px;
  background: var(--paper);
  color: var(--ink-2);
  font: 400 var(--t-tiny) / 1.45 var(--text);
}
.phone-screen::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 50%;
  width: 32%;
  height: 20px;
  border-radius: 999px;
  background: #1b1c1f;
  translate: -50% 0;
}
.phone-screen p {
  margin: 0;
}
.phone-screen .p-h {
  margin: 0 0 6px;
  color: var(--ink);
  font: 700 1.25rem/1.15 var(--display);
}
.phone-screen .p-lede {
  margin: 0 0 14px;
  color: var(--ink-3);
}
.phone-screen .p-note {
  margin: 0 0 10px;
  text-wrap: pretty;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
}
.phone-screen .p-when {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
}
.phone-screen .p-label {
  margin: 0 0 6px;
  color: var(--ink);
  font-weight: 600;
}
.phone-screen .p-field {
  min-height: 4.4em;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1.5px solid var(--field);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.phone-screen .p-input {
  min-height: 0;
  color: var(--ink-2);
}
.phone-screen .p-btn {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}
.phone-screen .p-ok {
  margin: 12px 0 0;
  color: var(--accent);
  font-weight: 600;
}

/* An X3 with a phone in front of its lower right corner, standing only over
   panel the X3 leaves empty: the phone's top is 0.575 of the X3's width
   down (panel row 309 of 792, under the last line of the reply's words) and
   its left edge 0.68 across (column 372 of 528, after the key label BACK
   and before the rule that sets off OK), so of all the X3's words it hides
   the OK label, whole. Where the column has no room for that, the phone
   stands under the X3 instead. */
.duet {
  --xw: var(--x3-sm);
  --dpw: 212px;
  position: relative;
  width: calc(var(--xw) * 0.68 + var(--dpw));
  height: calc(var(--xw) * 0.575 + var(--dpw) * 18.6 / 9);
  margin-inline: auto;
}
.duet > .x3 {
  --w: var(--xw);
  position: absolute;
  left: 0;
  top: 0;
}
.duet > .phone {
  --pw: var(--dpw);
  position: absolute;
  left: calc(var(--xw) * 0.68);
  top: calc(var(--xw) * 0.575);
  z-index: 2;
}
@container (max-width: 415px) {
  .duet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: auto;
    height: auto;
  }
  .duet > .x3,
  .duet > .phone {
    position: relative;
    left: auto;
    top: auto;
  }
}
/* The small device (3x screens) needs less room beside the phone. */
@media (min-resolution: 2.5dppx), (-webkit-min-device-pixel-ratio: 2.5) {
  @container (min-width: 348px) and (max-width: 415px) {
    .duet {
      display: block;
      width: calc(var(--xw) * 0.68 + var(--dpw));
      height: calc(var(--xw) * 0.575 + var(--dpw) * 18.6 / 9);
    }
    .duet > .x3,
    .duet > .phone {
      position: absolute;
    }
    .duet > .x3 {
      left: 0;
      top: 0;
    }
    .duet > .phone {
      left: calc(var(--xw) * 0.68);
      top: calc(var(--xw) * 0.575);
    }
  }
}

/* A pen pal's invitation and their phone, side by side */
.pals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px clamp(16px, 2vw, 28px);
  width: 100%;
}
.pals > .ui {
  flex: 1 1 220px;
  max-width: 300px;
}

/* ------------------------------------------------------------------ a pair, side by side

  Two things under a centered heading, each with its caption and nothing
  over either: the same line in two places (companion), a link sent and then
  read (make). One above the other where two don't fit. */

.pair {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(40px, 7vw, 112px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pair > li {
  display: grid;
  justify-items: center;
  gap: 30px;
  min-width: 0;
}
.pair figure {
  display: grid;
  justify-items: center;
  gap: 30px;
  margin: 0;
}
.pair .phone {
  --pw: 232px;
}
.pair figcaption,
.pair .cap {
  max-width: 17rem;
  margin: 0;
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 600;
  text-align: center;
}
.pair figcaption::before,
.pair .cap b::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  vertical-align: 0.1em;
  background: var(--accent);
}
.pair .cap b {
  display: block;
  margin-bottom: 4px;
}
.pair .cap span {
  color: var(--ink-2);
  font-weight: 400;
}
@media (max-width: 759px) {
  .pair {
    flex-direction: column;
    align-items: center;
    gap: 64px;
  }
}

/* ------------------------------------------------------------------ frames

  A device cropped by the edge of a rounded stage: the lower part of its
  panel is empty, so the frame ends where the screen's words do. --cut is how
  much of the device shows, in its own widths. */

.frame {
  --fw: var(--x3-sm);
  --cut: 1;
  display: flex;
  justify-content: center;
  width: min(100%, calc(var(--fw) + 2 * clamp(28px, 5vw, 72px)));
  height: auto;
  padding-top: clamp(32px, 4vw, 56px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--stage);
}
.frame > .x3 {
  --w: var(--fw);
}

/* ------------------------------------------------------------------ notes beside a rising X3 (letters)

  Three labels, left and right of the X3 in .rise, each level with the line
  it names; --y is that line's height in device widths. Below 1100px they
  give way to numbered pins and a numbered list above the X3. */

.rise-notes {
  position: absolute;
  /* within the page's margins, where the words above start and end */
  inset: 0 calc(max(0px, (100% - var(--max)) / 2) + var(--gutter));
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.rise-notes li {
  position: absolute;
  top: calc(8px + var(--hw) * var(--y));
  translate: 0 -50%;
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(50% - var(--hw) / 2 - 24px);
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}
.rise-notes .l {
  left: 0;
  justify-content: flex-end;
  text-align: right;
}
.rise-notes .r {
  right: 0;
}
.rise-notes li::after,
.rise-notes .r::before {
  content: "";
  flex: none;
  width: clamp(20px, 3vw, 48px);
  height: 1px;
  background: var(--ink-3);
}
.rise-notes .r::after {
  display: none;
}
.rise-legend {
  display: none;
}
/* The pins, on the X3's right edge, or inside the window where a phone
   crops the X3 (the device is 1.5 --hw tall; its screen starts 6u down). */
.rise .pins li {
  top: calc(8px + var(--hw) * (0.06 + 1.32 * var(--at)));
  right: max(6px, 50% - var(--hw) / 2 - 13px);
}
@media (max-width: 1100px) {
  .rise-notes {
    display: none;
  }
  .rise-legend {
    counter-reset: note;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    max-width: 34rem;
    margin: 36px auto 0;
    padding: 0;
    list-style: none;
    color: var(--ink);
    font-size: var(--t-small);
    font-weight: 600;
  }
  .rise-legend li {
    display: flex;
    align-items: center;
    gap: 10px;
    counter-increment: note;
  }
  .rise-legend li::before {
    content: counter(note);
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    font: 700 0.8125rem/1 var(--text);
  }
}
/* On a phone the letter's words sit on the left, as every page's first
   words do there, and the legend is a list under them, its numbers in one
   column (centred, it zig-zagged). */
@media (max-width: 699px) {
  .hero-rise {
    text-align: left;
  }
  .hero-rise .lede {
    margin-inline: 0;
    text-wrap: pretty;
  }
  .hero-rise .cta-row {
    justify-content: flex-start;
  }
  .rise-legend {
    flex-direction: column;
    align-items: flex-start;
    margin: 32px 0 0;
  }
}

/* ------------------------------------------------------------------ steps with a device (letters)

  A numbered list beside one X3: how a reply goes, in three presses. */

.presses {
  counter-reset: press;
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.presses li {
  counter-increment: press;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 2px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.presses li::before {
  content: counter(press);
  grid-row: span 2;
  color: var(--ink);
  font: 700 var(--t-2) / 1 var(--display);
  font-variant-numeric: tabular-nums;
}
.presses b {
  color: var(--ink);
}
.presses span {
  color: var(--ink-2);
}

/* ------------------------------------------------------------------ two columns of plain statements */

.statements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 5vw, 80px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.statements li {
  padding: 28px 0 30px;
  border-top: 1px solid var(--rule-2);
}
.statements h3 {
  margin: 0 0 10px;
  font-size: var(--t-3);
  font-weight: 700;
}
.statements p {
  margin: 0;
  max-width: 32rem;
  color: var(--ink-2);
}
@media (max-width: 700px) {
  .statements {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A real screen over each statement, cut to what it is about and laid on the
   panel's own paper: at one CSS pixel a panel pixel where the column has room
   for it (--z: 1), and otherwise at one device pixel a panel pixel on a 2x
   screen (0.5), or two on a 3x one (2/3). Every crop is 480 x 280 panel
   pixels, so the tiles in a row are one height and their headings line up. */
.statements.tiled {
  row-gap: clamp(40px, 5vw, 64px);
}
.statements.tiled li {
  --z: 1;
  padding: 0;
  border-top: 0;
  container-type: inline-size;
}
.tile {
  display: grid;
  place-items: center;
  margin: 0 0 22px;
  padding: calc(16px * var(--z)) 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--eink-paper);
  outline: 1px solid rgba(0, 0, 0, 0.08);
  outline-offset: -1px;
}
.tile img {
  width: calc(480px * var(--z));
  height: calc(280px * var(--z));
  max-width: none;
}
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
  .tile img {
    image-rendering: pixelated;
  }
}
@container (max-width: 479px) {
  .tile {
    --z: 0.5;
  }
}
@media (min-resolution: 2.5dppx), (-webkit-min-device-pixel-ratio: 2.5) {
  @container (max-width: 479px) {
    .tile {
      --z: calc(2 / 3);
    }
  }
}
/* like the X3's own screen on a dark page, a little dimmer (brand.css) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tile {
    filter: brightness(0.84);
    outline-color: rgba(255, 255, 255, 0.14);
  }
}
:root[data-theme="dark"] .tile {
  filter: brightness(0.84);
  outline-color: rgba(255, 255, 255, 0.14);
}
/* Where two columns would squeeze the tiles, each statement is a row: the
   tile at its full size, and the words beside it. */
@media (min-width: 900px) and (max-width: 1119px) {
  .statements.tiled {
    grid-template-columns: minmax(0, 1fr);
  }
  .statements.tiled li {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 48px);
  }
  .statements.tiled .tile {
    grid-row: span 2;
    margin: 0;
    padding-inline: 16px;
  }
}
@media (max-width: 899px) {
  .statements.tiled {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ the live builder (make)

  The app's screen builder, drawn large, beside an X3 whose screen is drawn
  by the X3's own renderer (builder-demo.mjs). Without JavaScript it is a
  picture of the builder on Home and the More it makes. */

.try {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: 980px;
  margin-inline: auto;
}
.try > .ui {
  width: 100%;
  max-width: 560px;
  justify-self: end;
}
.try .x3 {
  --w: var(--x3-sm);
}
.try-status {
  min-height: 1.4em;
  margin: 0;
  color: var(--ink-3);
  font-size: var(--t-tiny);
}
.bd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.bd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: 500 0.9375rem/1.3 var(--text);
  text-align: left;
}
button.bd-item {
  cursor: pointer;
}
button.bd-item:hover {
  border-color: var(--rule-2);
}
.bd-item[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.bd-item .kind {
  flex: none;
  min-width: 5.2em;
  color: var(--ink-3);
  font-size: var(--t-tiny);
  font-weight: 600;
}
.bd-item .grip {
  flex: none;
  width: 8px;
  height: 14px;
  background: radial-gradient(circle, var(--ink-3) 1.2px, transparent 1.4px) 0 0 / 4px 4.6px;
  opacity: 0.7;
}
.bd-item .words {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-item .words.rule {
  flex: 1;
  height: 2px;
  background: var(--ink-3);
}
.bd-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 2px 0 6px 20px;
}
.bd-btn {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: 600 var(--t-tiny) / 1 var(--text);
  cursor: pointer;
}
.bd-btn:hover:not([disabled]) {
  border-color: var(--ink);
}
.bd-btn[disabled] {
  opacity: 0.45;
  cursor: default;
}
/* The drawing's tabs, made into the screens to pick from: Home and one of
   Sam's own. */
.bd-tab {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font: 600 var(--t-tiny) / 1 var(--text);
  cursor: pointer;
}
.bd-tab:hover {
  color: var(--ink);
}
.bd-tab[aria-pressed="true"] {
  background: var(--surface-2);
  color: var(--ink);
}
.bd-empty {
  padding: 12px 0;
  color: var(--ink-3);
  font-size: var(--t-tiny);
}
.bd-word {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 34px;
  padding: 4px 12px;
  border: 1.5px solid var(--field);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: 500 0.9375rem/1.3 var(--text);
}
.bd-word:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.bd-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--rule-2);
}
.bd-add b {
  margin-right: 4px;
  font-size: var(--t-tiny);
}
.bd-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
}
.bd-foot .try-status {
  margin-left: auto;
}
.try-caps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px clamp(24px, 4vw, 56px);
  max-width: 1080px;
  margin: clamp(56px, 7vw, 96px) auto 0;
  padding: 0;
  list-style: none;
}
.try-caps li {
  padding-top: 20px;
  border-top: 1px solid var(--rule-2);
}
.try-caps b {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font: 700 var(--t-3) / 1.2 var(--display);
}
.try-caps span {
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .try {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .try > .ui {
    justify-self: stretch;
    max-width: none;
  }
  .try .x3 {
    order: -1;
  }
  .try-caps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ pixels, up close (landing)

  A full-bleed band of the panel at three times its size (two on a phone),
  so every panel pixel is a square of whole pixels: the paper fox on its rug
  in Deckle's room, the left of it in light mode and the right in dark. site.js
  lets the line between them be moved, by dragging or with the arrow keys. The
  band shows 184 panel rows centered on row 646 of the 528 x 792 panel: the fox
  with the lamp, the door and the shelf around it. */

.bleed-band {
  --z: 3;
  --split: 50%;
  position: relative;
  height: calc(184px * var(--z));
  overflow: hidden;
  background: var(--eink-paper);
  isolation: isolate;
}
@media (max-width: 760px) {
  .bleed-band {
    --z: 2;
  }
}
/* like the X3's own screen on a dark page, a little dimmer (brand.css) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bleed-band {
    filter: brightness(0.84);
  }
}
:root[data-theme="dark"] .bleed-band {
  filter: brightness(0.84);
}
.bleed-pic,
.bleed-band .half {
  position: absolute;
  inset: 0;
  margin: 0;
}
.bleed-band .half.dark {
  background: var(--eink-ink);
  clip-path: inset(0 0 0 var(--split));
}
.bleed-band img {
  position: absolute;
  left: calc(50% - 264px * var(--z));
  left: round(down, 50% - 264px * var(--z), 1px);
  top: calc((92px - 646px) * var(--z));
  width: calc(528px * var(--z));
  height: calc(792px * var(--z));
  max-width: none;
  image-rendering: pixelated;
}
.bleed-label {
  position: absolute;
  top: 18px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  font: 600 var(--t-tiny) / 1.2 var(--text);
}
.bleed-label.l {
  left: var(--gutter);
  background: var(--eink-ink);
  color: var(--eink-paper);
}
.bleed-label.r {
  right: var(--gutter);
  background: var(--eink-paper);
  color: var(--eink-ink);
}
/* The line: paper-white with a dark keyline, so it shows on both halves. */
.bleed-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  z-index: 2;
  width: 4px;
  margin-left: -2px;
  background: #fbfbf8;
  box-shadow: 0 0 0 1px rgba(20, 20, 20, 0.45);
  pointer-events: none;
}
/* The handle: a solid pill with an arrow either side, the thing to grab. */
.bleed-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 64px;
  height: 44px;
  padding: 0 13px;
  border-radius: 999px;
  background: #fbfbf8;
  box-shadow: 0 0 0 1px rgba(20, 20, 20, 0.45), 0 6px 18px rgba(0, 0, 0, 0.35);
  translate: -50% -50%;
}
.bleed-handle::before,
.bleed-handle::after {
  content: "";
  width: 0;
  height: 0;
  border-block: 7px solid transparent;
}
.bleed-handle::before {
  border-right: 9px solid #222324;
}
.bleed-handle::after {
  border-left: 9px solid #222324;
}
.bleed-range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}
.bleed-band:has(.bleed-range:focus-visible) .bleed-handle {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.bleed-band:has(.bleed-range:hover) .bleed-handle {
  box-shadow: 0 0 0 1px rgba(20, 20, 20, 0.7), 0 8px 22px rgba(0, 0, 0, 0.4);
}
.macro-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px clamp(24px, 4vw, 56px);
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
.macro-facts b {
  display: block;
  color: var(--ink);
  font: 700 var(--t-2) / 1 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.macro-facts span {
  display: block;
  margin-top: 12px;
  color: var(--ink-2);
  font-size: var(--t-body);
}
@media (max-width: 760px) {
  .macro-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

/* ------------------------------------------------------------------ points (privacy, on the landing only)

  Each point is three rows of one grid (icon, heading, words), so the
  headings and the words line up across the columns however they wrap. The
  icons are drawn on a 16px grid with 2px strokes and shown at exactly 2x.
  Six points: three across (four left two gaps in the second row), two on a
  tablet, one on a phone. */

.points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(28px, 3vw, 44px);
  row-gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.point {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
  margin-bottom: 44px; /* between the rows */
  padding-top: 26px;
  border-top: 2px solid var(--ink);
}
.point h3 {
  margin: 22px 0 10px;
  font-size: var(--t-3);
  font-weight: 700;
}
.point p {
  margin: 0;
  color: var(--ink-2);
}
.px-icon {
  width: 32px;
  height: 32px;
  fill: var(--ink);
}
@media (max-width: 1000px) {
  .points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .point {
    margin-bottom: 44px;
  }
}
@media (max-width: 600px) {
  .points {
    grid-template-columns: minmax(0, 1fr);
  }
  .point {
    margin-bottom: 36px;
  }
}

/* ------------------------------------------------------------------ install, in four steps (landing) */

.steps4 {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps4 li {
  counter-increment: step;
  padding-top: 22px;
  border-top: 1px solid var(--rule-2);
}
.steps4 li::before {
  content: counter(step);
  display: block;
  margin-bottom: 18px;
  color: var(--ink);
  font: 700 clamp(3rem, 2rem + 3vw, 4.5rem) / 0.9 var(--display);
  font-variant-numeric: tabular-nums;
}
.steps4 h3 {
  margin: 0 0 8px;
  font-size: var(--t-3);
  font-weight: 700;
}
.steps4 p {
  margin: 0;
  color: var(--ink-2);
}
/* What you need, as one short list */
.needs {
  display: flex;
  align-items: baseline;
  gap: 10px clamp(20px, 2.6vw, 36px);
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--t-small);
}
.needs .needs-h {
  flex: none;
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}
.needs ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, auto));
  gap: 10px clamp(20px, 2.6vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.needs li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.needs li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  translate: 0 -2px;
  background: var(--accent);
}
@media (max-width: 1100px) {
  .needs {
    display: block;
  }
  .needs .needs-h {
    margin-bottom: 12px;
  }
  .needs ul {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 960px) {
  .steps4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .steps4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.faq-grid .sec-head {
  position: sticky;
  top: calc(var(--head-h) + 40px);
  margin: 0;
}
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq details:first-child {
  border-top: 1px solid var(--rule);
}
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  color: var(--ink);
  font: 600 1.1875rem/1.4 var(--text);
  cursor: pointer;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq summary:hover {
  color: var(--accent);
}
.faq .answer {
  max-width: 38rem;
  padding: 0 0 26px;
}
.faq .answer p:last-child {
  margin-bottom: 0;
}
@media (max-width: 860px) {
  .faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .faq-grid .sec-head {
    position: static;
  }
}

/* ------------------------------------------------------------------ closings

  Each page ends its own way: the landing on a dark band, the companion on
  all twelve looks, letters on a postcard, make on a plain line of type. */

.cta-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 32px;
  min-height: 460px;
  overflow: hidden;
  padding: clamp(40px, 6vw, 80px);
  padding-block-end: 0;
  border-radius: var(--radius-lg);
  background: var(--band-dark);
  color: var(--on-dark-2);
}
.cta-band .copy {
  align-self: center;
  padding-bottom: clamp(40px, 6vw, 80px);
}
.cta-band h2 {
  color: var(--on-dark);
}
.cta-band .lede {
  color: var(--on-dark-2);
}
.cta-band .x3 {
  align-self: end;
  justify-self: center;
  margin-bottom: calc(var(--w) * -0.62);
}
.cta-band .cta-media {
  align-self: end;
  display: flex;
  justify-content: center;
  height: calc(var(--x3-sm) * 0.92);
}
.on-dark .btn {
  --b-bg: var(--on-dark);
  --b-fg: #141414;
  --b-bd: var(--on-dark);
}
.on-dark .btn-quiet {
  --b-bg: transparent;
  --b-fg: var(--on-dark);
  --b-bd: rgba(255, 255, 255, 0.28);
}
.on-dark .btn-quiet:hover {
  --b-bd: var(--on-dark);
}
.on-dark .fine {
  color: var(--on-dark-2);
}
.on-dark .sprite.adapt {
  filter: invert(1) brightness(0.95);
}
/* The accent ring is too dark to see on the band. */
.on-dark :focus-visible {
  outline-color: var(--on-dark);
}
@media (max-width: 860px) {
  .cta-band {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 28px;
  }
  .cta-band .copy {
    padding-bottom: 0;
  }
}

/* The companion: every look, in a line, over a centered close. */
.parade {
  text-align: center;
}
.parade-row {
  display: grid;
  grid-template-columns: repeat(12, auto);
  justify-content: center;
  gap: 12px clamp(6px, 1.2vw, 16px);
  margin: 0 0 clamp(40px, 5vw, 64px);
  padding: 0;
  list-style: none;
}
.parade-row .sprite {
  --s: 72px;
}
/* Under the twelve to start with, the four found along the way the page
   shows, centred on a row of their own. */
.parade-row .found:nth-child(13) {
  grid-column-start: 5;
}
@media (max-width: 760px) {
  .parade-row .found:nth-child(13) {
    grid-column-start: 2;
  }
}
@media (max-width: 1100px) {
  .parade-row .sprite {
    --s: 48px;
  }
}
@media (max-width: 760px) {
  .parade-row {
    grid-template-columns: repeat(6, auto);
  }
}
.parade h2 {
  margin-inline: auto;
  max-width: 16em;
}
.parade .lede {
  margin: 24px auto 0;
  text-wrap: balance;
}
.parade .cta-row {
  justify-content: center;
}
/* The landing: the same row, under the three rooms /companion opens its
   looks with, and the way on to meet Deckle under it. */
.rooms-scroll ~ .wrap > .parade-row {
  margin: clamp(56px, 7vw, 96px) 0 0;
}

/* Letters: a postcard, with a stamp and an address. */
.postcard {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.postcard .copy {
  padding: clamp(32px, 5vw, 72px);
}
.postcard-back {
  position: relative;
  display: grid;
  align-content: end;
  gap: 0;
  padding: clamp(32px, 5vw, 72px);
  border-left: 1px solid var(--rule);
}
.stamp {
  position: absolute;
  top: clamp(24px, 3vw, 40px);
  right: clamp(24px, 3vw, 40px);
  display: grid;
  place-items: center;
  width: 92px;
  height: 108px;
  border: 2px dashed var(--rule-2);
  border-radius: 6px;
  background: var(--paper);
}
.stamp .sprite {
  --s: 72px;
}
.addr {
  margin: 0;
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--rule-2);
  color: var(--ink-3);
  font-size: var(--t-small);
}
.addr b {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font: 700 1.35rem/1.3 var(--display);
}
.addr .code {
  font: 600 1.25rem/1.3 var(--mono);
  letter-spacing: 0.14em;
}
.postcard-back .addr:first-of-type {
  margin-top: clamp(100px, 11vw, 150px);
}
@media (max-width: 860px) {
  .postcard {
    grid-template-columns: minmax(0, 1fr);
  }
  .postcard-back {
    border-left: 0;
    border-top: 1px dashed var(--rule-2);
  }
}

/* Make: a line of type and two buttons. */
.closing-plain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px clamp(32px, 5vw, 80px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 2px solid var(--ink);
}
.closing-plain .lede {
  margin: 20px 0 0;
}
.closing-plain .cta-row {
  margin: 0;
}
@media (max-width: 860px) {
  .closing-plain {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The next page, after a product page's close */
.next-page {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: clamp(56px, 7vw, 96px);
  padding: 28px 0 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.next-page span {
  color: var(--ink-3);
  font: 600 var(--t-tiny) / 1.2 var(--text);
}
.next-page b {
  font: 700 var(--t-2) / 1.1 var(--display);
}
.next-page b::after {
  content: " →";
  transition: margin 0.15s ease;
}
.next-page:hover b::after {
  margin-left: 6px;
}

/* ------------------------------------------------------------------ small parts */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}
.feature-media .stats {
  grid-template-columns: minmax(0, 1fr);
  max-width: 460px;
}
.stat {
  padding: clamp(24px, 3vw, 36px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 24px;
}
.stat-n {
  display: block;
  color: var(--ink);
  font: 700 clamp(3.2rem, 2rem + 4.6vw, 6rem) / 0.9 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.stat-n.words {
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
  line-height: 1;
}
.stat p {
  margin: 18px 0 0;
  color: var(--ink-2);
}
@media (max-width: 480px) {
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }
}
.feature-media .stat {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 24px;
}
.feature-media .stat p {
  margin: 0;
}
.feature-media .stat-n.words {
  font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem);
}
@media (max-width: 420px) {
  .feature-media .stat {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

/* A speech bubble, drawn like the X3's: square-ish, a hard border, a tail. */
.bubble {
  position: relative;
  display: inline-block;
  max-width: 22rem;
  padding: 14px 20px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: 700 var(--t-3) / 1.3 var(--display);
}
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 20px;
  height: 20px;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  background: var(--surface);
  translate: -50% 0;
  rotate: 45deg;
}

/* ------------------------------------------------------------------ fade-ups (site.js) */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    transition: opacity 0.9s ease, translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .reveal.pre {
    opacity: 0;
    translate: 0 28px;
  }
}
/* Printed, everything shows, whether or not it has scrolled into view. */
@media print {
  .reveal,
  .reveal.pre {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* ------------------------------------------------------------------ plain pages (privacy, send, 404) */

/* A text page's title starts where a hero's does (.hero's top padding), so
   every page's first line sits at the same height under the bar. */
.page-head {
  padding-block: clamp(24px, 4vw, 56px) clamp(40px, 5vw, 64px);
}
.page-head .lede {
  margin: 26px 0 0;
}
.doc {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  padding-bottom: 96px;
}
.toc {
  position: sticky;
  top: calc(var(--head-h) + 32px);
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
}
.toc a {
  display: block;
  padding: 7px 0 7px 14px;
  border-left: 2px solid var(--rule);
  color: var(--ink-3);
  text-decoration: none;
}
.toc a:hover {
  border-left-color: var(--ink);
  color: var(--ink);
}
.prose {
  max-width: 40rem;
  font-size: 1.125rem;
  line-height: 1.7;
}
.prose section + section {
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--rule);
}
.prose h2 {
  margin: 0 0 16px;
  font-size: var(--t-3);
  font-weight: 700;
}
.prose ul {
  margin: 0 0 1em;
  padding-left: 1.2em;
}
.prose li {
  margin: 0.5em 0;
}
.prose li::marker {
  color: var(--ink-3);
}
@media (max-width: 860px) {
  .doc {
    grid-template-columns: minmax(0, 1fr);
  }
  .toc {
    display: none;
  }
}

/* ------------------------------------------------------------------ write to us (privacy)

  A message to the person who runs Deckle, with no account (the contact
  function): a card in the prose column. Its script posts it and says how it
  went; without one, the form still posts. The field named website is for
  bots only: hidden from everyone, and a message that fills it is dropped. */

.contact {
  display: grid;
  gap: 8px;
  margin: 28px 0 24px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 24px;
  font-size: var(--t-body);
  line-height: 1.5;
}
.contact-fields {
  display: grid;
  gap: 8px;
}
.contact label {
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 600;
}
.contact label + textarea,
.contact label + input {
  margin-bottom: 12px;
}
.contact .opt {
  color: var(--ink-3);
  font-weight: 400;
}
.contact textarea,
.contact input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--field);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.5 var(--text);
}
.contact textarea {
  min-height: 9.5em;
  resize: vertical;
}
.contact textarea:focus,
.contact input:focus {
  /* a clear outline in forced colors, where the ring below isn't drawn */
  outline: 2px solid transparent;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.contact [aria-invalid="true"],
.contact [aria-invalid="true"]:focus {
  border-color: var(--warn);
}
.contact [aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--warn-soft);
}
.contact-hint {
  margin: -12px 0 12px;
  color: var(--ink-3);
  font-size: var(--t-small);
}
.contact-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 4px;
}
.contact-count {
  color: var(--ink-3);
  font-size: var(--t-tiny);
  font-variant-numeric: tabular-nums;
}
.contact-out {
  min-height: 1.5em;
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: var(--t-small);
  font-weight: 600;
}
.contact-out:empty {
  min-height: 0;
  margin: 0;
}
.contact-out.bad {
  color: var(--warn);
}
.contact-done {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.contact-done[hidden] {
  display: none;
}
.contact-done:focus {
  outline: none;
}
.contact-done .sprite {
  --s: 72px;
  flex: none;
}
.contact-done h3 {
  margin: 4px 0 6px;
  font-size: var(--t-3);
}
.contact-done p {
  margin: 0 0 16px;
  color: var(--ink-2);
}
@media (max-width: 420px) {
  .contact-done {
    flex-direction: column;
    gap: 12px;
  }
  .contact .btn {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------------ the community (community.html)

  A calm board: the posts in a column of hairlines, each with its votes in
  pixel arrows on the left, and a narrow column beside it about the weekly
  updates. One post opens on its own, with its comments under it. Colour
  stays on the chips that say where an idea stands. */

.board-head {
  padding-bottom: clamp(32px, 4vw, 48px);
}
.board-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  gap: 28px clamp(32px, 5vw, 72px);
  align-items: start;
}
.board-actions,
.board-who {
  display: grid;
  gap: 14px;
  justify-items: start;
}
.board-who {
  gap: 10px;
}
.board-fine,
.board-signed {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--t-small);
  line-height: 1.5;
}
.board-signed {
  color: var(--ink-2);
}
.board-signed .chip {
  margin: 0 4px 0 6px;
  vertical-align: 1px;
}
.gbtn svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.board .linkish,
.board-signed .linkish {
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
@media (max-width: 860px) {
  .board-intro {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

.board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding-bottom: 96px;
}
@media (max-width: 960px) {
  .board {
    grid-template-columns: minmax(0, 1fr);
  }
}
.board-notice {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--t-small);
  font-weight: 600;
}
.board-notice:empty {
  margin: 0;
  padding: 0;
  background: none;
}
.board-notice.bad {
  background: var(--warn-soft);
  color: var(--warn);
}

/* the tabs: Top ideas, New, Updates (and Hidden, for the person who runs it) */
.board-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-2);
}
.board-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
}
.board-tabs a:hover {
  color: var(--ink);
}
.board-tabs a[aria-current="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--rule);
}
.updates-lede {
  margin: 20px 0 0;
  color: var(--ink-2);
}

/* a post in the list */
.posts {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.post {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 4px 16px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.post:last-child {
  border-bottom: 1px solid var(--rule);
}
.vote {
  display: grid;
  justify-items: center;
}
.vote-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.vote-btn .px {
  width: 18px;
  height: 18px;
  fill: currentColor;
  shape-rendering: crispEdges;
}
.vote-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.vote-btn[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}
.vote-n {
  min-width: 2.5ch;
  padding: 1px 0;
  color: var(--ink);
  font: 700 1.0625rem/1.2 var(--text);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.vote.busy .vote-n {
  color: var(--ink-3);
}
.post-title {
  margin: 3px 0 6px;
  font: 600 1.1875rem/1.35 var(--text);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.post-title a {
  color: var(--ink);
  text-decoration: none;
}
.post-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  color: var(--ink-3);
  font-size: var(--t-small);
  line-height: 1.5;
}
.post-meta .by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
}
.post-meta .kind {
  font: 600 var(--t-tiny) / 1.2 var(--text);
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font: 600 0.75rem/1 var(--text);
  white-space: nowrap;
}
.chip.s-planned {
  background: none;
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
}
.chip.s-progress {
  background: var(--accent-soft);
  color: var(--accent);
}
.chip.s-shipped {
  background: var(--accent);
  color: var(--paper);
}
.chip.s-declined {
  color: var(--ink-3);
}
.chip.maker {
  background: var(--ink);
  color: var(--paper);
}
.chip.pin {
  background: none;
  box-shadow: inset 0 0 0 1px var(--rule-2);
}
.row-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* the Updates tab: what shipped, as a changelog */
.update {
  padding: clamp(24px, 3vw, 32px) 0;
  border-top: 1px solid var(--rule);
}
.update:last-child {
  border-bottom: 1px solid var(--rule);
}
.update-when {
  margin: 0 0 10px;
  color: var(--ink-3);
  font: 600 var(--t-tiny) / 1.2 var(--text);
}
.update-title {
  margin: 0 0 14px;
  font-size: var(--t-3);
}
.update-title a {
  color: var(--ink);
  text-decoration: none;
}
.update-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}
.update .post-meta {
  margin-top: 6px;
}
.post-body {
  max-width: 40rem;
  color: var(--ink-2);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.post-body p,
.post-body ul {
  margin: 0 0 0.8em;
}
.post-body ul,
.comment-text ul {
  padding-left: 1.2em;
  list-style-type: square;
}
.post-body li {
  margin: 0.35em 0;
}
.post-body li::marker {
  color: var(--ink-3);
}
.post-body a,
.comment-text a {
  overflow-wrap: anywhere;
}

.board-empty {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 16px 0 0;
  padding: clamp(24px, 3vw, 32px);
  border-radius: 24px;
  background: var(--surface-2);
}
.board-empty .sprite {
  --s: 64px;
  flex: none;
}
.board-empty h3 {
  margin: 4px 0 6px;
  font-size: var(--t-3);
}
.board-empty p {
  margin: 0 0 16px;
  color: var(--ink-2);
}
.board-state {
  margin: 16px 0 0;
  color: var(--ink-3);
  font-size: var(--t-small);
}
@media (max-width: 420px) {
  .board-empty {
    flex-direction: column;
    gap: 12px;
  }
}

/* one post, on its own */
.post-back {
  margin: 0 0 24px;
  font-size: var(--t-small);
}
.post-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: none;
}
.post-back a::before {
  content: "←";
}
.post-back a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.post-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.post-head:has(> .vote[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}
.post-head h2 {
  margin: 10px 0 12px;
}
.post-page > .post-body,
.post-tools,
.admin-tools {
  margin: 28px 0 0 64px;
}
.admin-tools {
  padding: 20px 22px;
  border: 1px dashed var(--rule-2);
  border-radius: 18px;
}
.admin-tools h3 {
  margin: 0 0 14px;
  color: var(--ink-3);
  font: 600 var(--t-tiny) / 1.2 var(--text);
}
.admin-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.admin-row + .admin-row {
  margin-top: 14px;
}
.admin-row label {
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 600;
}
@media (max-width: 600px) {
  .post-page > .post-body,
  .post-tools,
  .admin-tools {
    margin-left: 0;
  }
}

.comments {
  margin: clamp(40px, 5vw, 56px) 0 0;
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--rule);
}
.comments > h3 {
  margin: 0 0 16px;
  font-size: var(--t-3);
}
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comment {
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.comment:last-child {
  border-bottom: 1px solid var(--rule);
}
.comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 6px;
  color: var(--ink-3);
  font-size: var(--t-small);
}
.comment-text {
  max-width: 40rem;
  color: var(--ink-2);
}
.comment-text p,
.comment-text ul {
  margin: 0 0 0.6em;
}
.comment-text > :last-child {
  margin-bottom: 0;
}
.comment-form {
  margin-top: 24px;
}

/* writing: a post, or a comment */
.board-form {
  display: grid;
  gap: 8px;
}
.composer {
  margin: 0 0 32px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 24px;
}
.composer h2 {
  margin: 0 0 8px;
  font-size: var(--t-3);
}
.board-form label,
.kinds legend {
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 600;
}
.board-form .opt {
  color: var(--ink-3);
  font-weight: 400;
}
.board-form input[type="text"],
.board-form textarea,
.admin-row select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--field);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.5 var(--text);
}
.admin-row select {
  width: auto;
  min-height: 40px;
  padding: 6px 12px;
}
.board-form textarea {
  min-height: 7.5em;
  resize: vertical;
}
.comment-form textarea {
  min-height: 5em;
}
.board-form input:focus,
.board-form textarea:focus,
.admin-row select:focus {
  outline: 2px solid transparent;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.board-form [aria-invalid="true"],
.board-form [aria-invalid="true"]:focus {
  border-color: var(--warn);
}
.kinds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}
.kinds legend {
  margin: 0 0 8px;
  padding: 0;
}
.board-form .kinds label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--rule-2);
  border-radius: 14px;
  color: var(--ink-2);
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
}
.board-form .kinds label:has(input:checked) {
  border-color: var(--accent);
}
.kinds input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}
.kinds b {
  display: block;
}
.board-hint {
  margin: 0 0 8px;
  color: var(--ink-3);
  font-size: var(--t-small);
}
.form-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 4px;
}
.form-bar .board-hint {
  margin: 0;
}
.form-bar .count {
  margin-left: auto;
  color: var(--ink-3);
  font-size: var(--t-tiny);
  font-variant-numeric: tabular-nums;
}
.board-form .out {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-small);
  font-weight: 600;
}
.board-form .out:empty {
  display: none;
}
.board-form .out.bad {
  color: var(--warn);
}

/* beside the board: the weekly updates, and how it works */
.board-side {
  display: grid;
  gap: 28px;
  position: sticky;
  top: calc(var(--head-h) + 24px);
}
.side-card h2 {
  margin: 0 0 10px;
  font-size: 1.375rem;
  line-height: 1.2;
}
.side-card p {
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.55;
}
.side-card > :last-child {
  margin-bottom: 0;
}
.side-card:not(.plain) {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 24px;
}
.side-latest {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-2);
}
.side-latest a {
  color: var(--ink);
  font-weight: 600;
}
.side-latest time {
  color: var(--ink-3);
}
.side-label {
  color: var(--ink-3);
  font: 600 var(--t-tiny) / 1.4 var(--text);
}
.side-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.55;
}
.side-list li {
  position: relative;
  padding-left: 18px;
}
.side-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--accent);
}
@media (max-width: 960px) {
  .board-side {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}
@media print {
  .board-actions,
  .board-form,
  .board-tabs,
  .admin-tools,
  .post-tools,
  .vote-btn {
    display: none !important;
  }
}

/* ------------------------------------------------------------------ print

  On paper every page is the light one, whatever the screen's theme: the
  light palette (brand.css), no dimming or inverting, and backgrounds kept,
  since the drawn X3s and the app's drawings are made of them. Answers
  folded away on screen print open (site.js opens them for browsers without
  ::details-content), and what only works on a screen is left out. */

@media print {
  :root,
  :root[data-theme],
  :root:not([data-theme="light"]) {
    --paper: #f5f5f1;
    --surface: #ffffff;
    --surface-2: #efefea;
    --ink: #141414;
    --ink-2: #3f4145;
    --ink-3: #676a6f;
    --rule: #e2e2dc;
    --rule-2: #d3d3cc;
    --field: #8a8d91;
    --accent: #2c6a55;
    --accent-soft: #e2ede7;
    --warn: #9a4a16;
    --warn-soft: #f6e9df;
    --good: #2c6a55;
    --stage: #ecebe5;
    --band-dark: #ecebe5;
    --on-dark: #141414;
    --on-dark-2: #3f4145;
    --shadow-1: 0 1px 2px rgba(20, 20, 20, 0.04), 0 2px 8px rgba(20, 20, 20, 0.04);
    --shadow-2: 0 2px 6px rgba(20, 20, 20, 0.05), 0 18px 40px -18px rgba(20, 20, 20, 0.18);
    --x3-body-hi: #fbfbf8;
    --x3-body-lo: #e7e7e1;
    --x3-edge: rgba(20, 20, 20, 0.1);
    --x3-key: #dcdcd5;
    --x3-shadow: rgba(24, 24, 20, 0.28);
    /* whole devices fit a page, three to a row */
    --x3-sm: 200px;
    --x3-lg: 400px;
    --x3-ph: 300px;
    color-scheme: light;
  }
  :root:not([data-theme="light"]) .x3.x3-light,
  :root[data-theme] .x3.x3-light {
    --x3-body-hi: #fbfbf8;
    --x3-body-lo: #e7e7e1;
    --x3-edge: rgba(20, 20, 20, 0.1);
    --x3-key: #dcdcd5;
    --x3-shadow: rgba(24, 24, 20, 0.28);
  }
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .x3-screen,
  .crop,
  .bleed-band,
  .adapt,
  .say img,
  .floor,
  .rooms img {
    filter: none !important;
  }
  /* the closing band, on paper: ink on the stage's grey */
  .on-dark .btn:not(.btn-quiet) {
    --b-fg: var(--paper);
  }
  .on-dark .btn-quiet {
    --b-bd: var(--rule-2);
  }
  .skip,
  .head-nav,
  .head-end,
  .swipe-hint,
  .bleed-range,
  .bleed-handle,
  .js-only,
  .contact {
    display: none !important;
  }
  .site-head {
    position: static;
  }
  /* strips that scroll sideways on a screen wrap on paper */
  .strip-scroll,
  .rooms-scroll {
    overflow: visible !important;
  }
  .rooms {
    flex-wrap: wrap;
    gap: 24px;
    width: auto;
  }
  .rooms li,
  .rooms li:first-child,
  .rooms li:last-child {
    margin: 0;
  }
  .strip-scroll > .wrap {
    max-width: var(--max) !important;
    padding-inline: var(--gutter) !important;
  }
  .day,
  .trio {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 24px;
    width: auto;
    padding-inline: 0;
  }
  .day-item,
  .trio-item,
  .trio .side:first-child,
  .trio .side:last-child {
    flex: 0 1 var(--x3-sm);
    width: var(--x3-sm);
    margin: 0;
  }
  .trio .x3,
  .trio .main .x3 {
    margin: 0;
  }
  .trio figcaption,
  .trio .side:first-child figcaption,
  .trio .side:last-child figcaption {
    margin-top: 16px;
    padding: 0;
  }
  .faq summary::after {
    display: none;
  }
  .faq .answer {
    padding-bottom: 20px;
  }
  /* keep a device, a card or an answer on one page */
  .x3,
  .ui,
  .phone,
  .faq details,
  .point,
  .istep,
  .statements li,
  .moods li,
  .away,
  .rooms li {
    break-inside: avoid;
  }
  h2,
  h3 {
    break-after: avoid;
  }
}
/* Folded answers print open, where ::details-content is known (its own
   rule, so browsers without it drop only this). */
@media print {
  details:not(.head-menu, .log)::details-content {
    display: block;
    content-visibility: visible;
  }
}

/* /install: which device, before Connect. The X4 isn't ready yet (ADR-020). */
.device-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.device-pick legend {
  width: 100%;
  margin-bottom: 6px;
  padding: 0;
  font-weight: 600;
}