/* emini.ink: printed in the four pigments of the NOTE4C display.
   Paper, black, red and yellow are the only colours. Hierarchy comes from
   size and weight, never from grey. The only gradient is an ordered dither. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin.woff2?v=5708da5d4c") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
/* Polish letters live in a separate 5 KB subset of the same variable font (version 2.001, OFL),
   so English pages never download it. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-pl.woff2?v=4b6334590c") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C;
}

:root {
  --paper: #e6e5db;
  --ink: #1a1a16;
  --red: #7b0001;
  --yellow: #f7ad01;
  --gutter: clamp(16px, 4.5vw, 56px);
  --measure: 38rem;
  --max: 1180px;
  --pixel: 2px;
  --frame-pad: 12px;
  --frame-radius: 12px;
  --fig-gap: 1.5rem;
  --sans: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  font-variant-numeric: lining-nums;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, ol, ul, dl, dd, pre { margin: 0; }
ol, ul { padding: 0; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
code, kbd, pre { font-family: var(--mono); font-size: 0.92em; }
strong { font-weight: 700; }
h1, h2, h3 { text-wrap: balance; }
p, dd, figcaption { text-wrap: pretty; }
.nowrap { white-space: nowrap; }
/* read by screen readers and kept when copying, never shown */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: var(--gutter); top: -4rem;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; z-index: 10;
}
.skip:focus { top: 0.75rem; }

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

/* ---------- pixel imagery ----------
   Frames are pigment indices, so they are shown at whole multiples of their
   pixels (1x from 480 px, 2x on wide screens) with nearest-neighbour sampling.
   Below 1x on a low-density screen nearest neighbour would drop whole rows of
   pixels, so there the browser smooths instead. */
.px { image-rendering: pixelated; }
.frame, .frame-2x { width: 400px; } /* capped by img max-width; a fixed width lets lazy frames reserve their box */
@media (min-width: 1100px) { .frame-2x { width: 800px; } }
@media (max-width: 479.98px) and (max-resolution: 1.99dppx) { .px { image-rendering: auto; } }
@media (max-width: 599.98px) and (max-resolution: 1.99dppx) { .swatches .px { image-rendering: auto; } }

/* The device: a drawn outline, not a product photograph. One token everywhere. */
.device {
  background: var(--ink); padding: var(--frame-pad); border-radius: var(--frame-radius);
  width: fit-content; max-width: 100%;
}
.device .screen { background: var(--paper); line-height: 0; }
.device figcaption {
  color: var(--paper); font-family: var(--mono); font-size: 0.78rem;
  line-height: 1.4; padding-top: 0.6rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1rem;
}

/* A photograph of a real NOTE4C: framed in ink like the drawn device, with its own caption, so a
   photo never passes for a render. */
.photo { background: var(--ink); padding: var(--pixel); width: fit-content; max-width: 100%; }
.photo img { width: 480px; max-width: 100%; }
.photo figcaption {
  color: var(--paper); font-family: var(--mono); font-size: 0.78rem; line-height: 1.4;
  padding: 0.5rem 0.6rem 0.4rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1rem;
}
.live-photo { margin-top: var(--fig-gap); }

/* A framed picture (display render or panel screenshot) with one caption token:
   a mono line under a 2 px rule, "surface · screen · data". */
.shot, .frame-fig, .look-frame { border: var(--pixel) solid var(--ink); width: fit-content; max-width: 100%; background: var(--paper); }
.shot img { width: 390px; max-width: 100%; }
.shot figcaption, .frame-fig figcaption, .look-frame figcaption, .loupe figcaption, .swatches span {
  font-family: var(--mono); font-size: 0.8rem; line-height: 1.4;
  border-top: var(--pixel) solid var(--ink); padding: 0.45rem 0.7rem;
}
.proof-title { font-family: var(--mono); font-size: 0.8rem; line-height: 1.4; }

/* ---------- header ---------- */
.site-header { border-bottom: var(--pixel) solid var(--ink); }
.site-header .wrap {
  display: grid; grid-template-columns: auto 1fr; grid-auto-flow: column; grid-auto-columns: auto;
  align-items: center; gap: 0.25rem 1.5rem; min-height: 4.25rem;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0.55rem; justify-self: start;
  font-weight: 800; letter-spacing: -0.02em; text-decoration: none; font-size: 1.15rem;
}
.wordmark-page { font-weight: 400; }
.mark {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border: var(--pixel) solid var(--ink); font: 700 17px/1 var(--mono); letter-spacing: -0.08em;
}
.nav { display: flex; gap: clamp(0.9rem, 2.2vw, 1.8rem); align-items: center; justify-self: end; flex-wrap: wrap; }
.nav a { text-decoration: none; font-weight: 600; font-size: 0.97rem; padding-block: 0.6rem; }
.nav a:hover { text-decoration: underline; }
.gh {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 44px;
  border: var(--pixel) solid var(--ink); padding: 0.4rem 0.8rem; font-weight: 600; text-decoration: none;
}
.gh svg { width: 18px; height: 18px; flex: none; }
.gh:hover { background: var(--ink); color: var(--paper); }
/* language switch: a quiet two-letter link to the same page in the other language */
.lang {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding-inline: 0.5rem;
  font: 700 0.85rem/1 var(--mono); letter-spacing: 0.04em; text-decoration: none;
}
.lang:hover { text-decoration: underline; }
/* up to 960 px the GitHub button keeps only its icon, and up to 760 px the section links
   move to a second row, so the links, the language switch and GitHub never wrap into each other */
@media (max-width: 959.98px) {
  .gh { width: 44px; padding: 0; }
  .gh-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 759.98px) {
  .site-header .wrap {
    grid-template-columns: 1fr auto auto; grid-template-areas: "mark lang gh" "nav nav nav";
    column-gap: 0.4rem; padding-block: 0.6rem 0.1rem;
  }
  .wordmark { grid-area: mark; }
  .lang { grid-area: lang; }
  .gh { grid-area: gh; }
  .nav { grid-area: nav; justify-self: start; gap: 1.1rem; }
  .nav a { font-size: 0.92rem; padding-block: 0.5rem; }
}

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.02em;
  display: inline-flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center;
}
.eyebrow b { font-weight: 700; background: var(--ink); color: var(--paper); padding: 0.05rem 0.4rem; }
h1 { font-size: clamp(2.5rem, 6.4vw, 5.1rem); line-height: 0.98; letter-spacing: -0.035em; font-weight: 800; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; }
h3 { font-size: 1.2rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.lede { font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.5; max-width: var(--measure); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 0.8rem; }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.button {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 3rem;
  padding: 0.7rem 1.15rem; font-weight: 700; text-decoration: none;
  border: var(--pixel) solid var(--ink);
}
.button svg { width: 20px; height: 20px; flex: none; }
.button.primary { background: var(--ink); color: var(--paper); }
.button.primary:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.button.quiet:hover { background: var(--yellow); color: var(--ink); }

/* ---------- hero ----------
   Phones: title, the display, the words, then the buttons.
   Wide screens: words and buttons beside a 1x display. */
.hero { padding-block: clamp(1.75rem, 6vw, 5rem) clamp(2.5rem, 6vw, 4.5rem); }
.hero-grid {
  display: grid; gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: start;
  grid-template-areas: "head" "device" "lede" "cta";
}
.hero-head { grid-area: head; }
.hero-device { grid-area: device; }
.hero-cta { grid-area: cta; margin-top: 0; }
.hero-lede { grid-area: lede; }
.hero h1 { margin-top: 0.9rem; }
@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) auto; align-content: center;
    grid-template-areas: "head device" "lede device" "cta device";
  }
  .hero-device { align-self: center; }
  .hero-cta { margin-top: 0.5rem; }
}

/* ---------- dither band: the same ordered dither the display uses ---------- */
.dither-band {
  height: 48px; border-block: var(--pixel) solid var(--ink);
  background: url("img/dither-ramp.png?v=5812b9dbc9") repeat-x left center / auto 48px;
  image-rendering: pixelated;
}

/* ---------- sections ---------- */
.section { padding-block: clamp(3rem, 8vw, 6.5rem); }
.section + .section { border-top: var(--pixel) solid var(--ink); }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 46rem; }
.kicker { font-family: var(--mono); font-size: 0.85rem; }

/* ---------- looks: the notes are the switch ---------- */
.looks { display: grid; gap: var(--fig-gap) 3rem; align-items: start; }
.look-frames { display: grid; gap: var(--fig-gap); }
.look-frame img { display: block; }
.look-notes { list-style: none; display: grid; gap: 0.75rem 1rem; align-content: start; }
.look-notes li { border-top: var(--pixel) solid var(--ink); padding-top: 0.5rem; }
.note-title { display: block; font-weight: 800; font-size: 1.2rem; }
.look-notes [role="tab"] {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: transparent;
  border: var(--pixel) solid var(--ink); padding: 0.6rem 0.8rem; cursor: pointer;
}
.look-notes [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--paper); }
.look-notes [role="tab"]:hover { background: var(--yellow); color: var(--ink); }
.look-notes [role="tab"][aria-selected="true"]:hover { background: var(--ink); color: var(--paper); }
.look-notes li:has([role="tab"]) { border-top: 0; padding-top: 0; }
@media (min-width: 700px) and (max-width: 1099.98px) {
  .looks { grid-template-columns: auto minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  .look-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 804px; }
}

.pair { display: grid; gap: calc(var(--fig-gap) * 1.5) var(--fig-gap); margin-top: clamp(2.5rem, 5vw, 4rem); }
.pair-item { display: grid; gap: 0.75rem; align-content: start; }
.note { border-top: var(--pixel) solid var(--ink); padding-top: 0.5rem; max-width: 404px; }
.looks-more { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
@media (min-width: 700px) and (max-width: 959.98px) {
  .pair-item { grid-template-columns: auto minmax(0, 1fr); gap: var(--fig-gap); align-items: start; }
}
@media (min-width: 960px) { .pair { grid-template-columns: repeat(2, auto); justify-content: start; } }

/* ---------- pixels: loupe and proof sheet ---------- */
.pixels, .proof { display: grid; gap: 1.5rem; margin-top: clamp(3rem, 6vw, 4.5rem); }
.loupe { display: grid; gap: var(--fig-gap); justify-items: start; }
@media (min-width: 960px) { .loupe { grid-template-columns: repeat(2, auto); justify-content: start; align-items: start; } }
.loupe-map, .loupe-zoom { position: relative; border: var(--pixel) solid var(--ink); line-height: 0; max-width: 100%; }
.loupe-box { position: absolute; left: 25%; top: 31.667%; width: 25%; height: 25%; outline: var(--pixel) solid var(--ink); }
.loupe figcaption { grid-column: 1 / -1; border: var(--pixel) solid var(--ink); width: 100%; }

.proof-body { display: grid; gap: var(--fig-gap); align-items: start; }
@media (min-width: 1100px) { .proof-body { grid-template-columns: auto auto; justify-content: start; } }
.proof-sheet { display: grid; gap: 0.6rem; }
.proof-title { margin-top: 0.4rem; }
.swatches { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) { .swatches { grid-template-columns: repeat(3, minmax(0, 184px)); } }
.swatches li { border: var(--pixel) solid var(--ink); line-height: 0; }
.swatches img { width: 100%; }
.swatches span { display: block; }
.swatches b { display: block; font-weight: 700; }

/* ---------- phone panel: numbered steps, read in rows ---------- */
.steps { list-style: none; display: grid; gap: 3rem clamp(2rem, 5vw, 4rem); counter-reset: step; align-items: start; }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.step { display: grid; gap: 0.8rem; counter-increment: step; justify-items: start; }
.step p { max-width: 32rem; }
.step figure { margin-top: 0.4rem; }

/* one number token for every numbered list */
.step h3::before, .install-steps li::before {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem;
  background: var(--ink); color: var(--paper); font-weight: 800; font-size: 1rem;
}
.step h3::before { content: counter(step); margin-right: 0.7rem; vertical-align: 0.1em; }

/* ---------- data flow ---------- */
.flow { border: var(--pixel) solid var(--ink); padding: clamp(1rem, 3vw, 2rem); }
.flow svg { display: block; width: 100%; height: auto; }
.flow .flow-tall { display: none; max-width: 320px; margin-inline: auto; }
@media (max-width: 959.98px) {
  .flow .flow-wide { display: none; }
  .flow .flow-tall { display: block; margin-inline: 0; }
}
.flow-list { display: grid; margin-top: 2rem; border-top: var(--pixel) solid var(--ink); }
.flow-list div { display: grid; gap: 0.25rem 1.5rem; padding-block: 0.9rem; border-bottom: 1px solid var(--ink); }
@media (min-width: 760px) { .flow-list div { grid-template-columns: 14rem 1fr; } }
.flow-list dt { font-weight: 700; }
.after-flow { margin-top: 1.5rem; }

/* ---------- honest status and install ---------- */
.facts { display: grid; border-top: var(--pixel) solid var(--ink); }
.fact { display: grid; gap: 0.3rem 1.5rem; padding-block: 1rem; border-bottom: 1px solid var(--ink); }
/* label beside the text only while the facts have the full width; from 900 px they
   share the row with the install steps, so the label goes above the text again */
@media (min-width: 760px) and (max-width: 899.98px) { .fact { grid-template-columns: 9.5rem 1fr; } }
.fact .label { font-family: var(--mono); font-size: 0.9rem; }
.fact .label.warn { color: var(--red); font-weight: 700; }

.install { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .install { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.install-intro { margin-top: 0.6rem; }
.device-link { margin-top: 0.8rem; font-size: 0.95rem; }
.install-note { margin-top: 1rem; font-size: 0.95rem; }
.install-steps { list-style: none; counter-reset: i; display: grid; gap: 0.9rem; margin-top: 1.4rem; }
.install-steps li { counter-increment: i; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.2rem 0.8rem; }
.install-steps li::before { content: counter(i); grid-row: span 2; }
.cmd-wrap { position: relative; margin-top: 0.3rem; min-width: 0; }
.cmd {
  background: var(--ink); color: var(--paper);
  padding: 0.55rem 0.7rem; white-space: pre; overflow-x: auto; font-size: 0.8rem; line-height: 1.5;
}
/* a block that scrolls sideways dissolves into ordered dither at its right edge */
.cmd-wrap[data-overflow]:not([data-end])::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; pointer-events: none;
  background: url("img/dither-fade-x.png?v=49d24ba2f6") repeat-y right top / 24px 4px; image-rendering: pixelated;
}

/* ---------- footer ---------- */
.site-footer { border-top: var(--pixel) solid var(--ink); padding-block: 2.5rem 3rem; font-size: 0.95rem; }
.site-footer .wrap { display: grid; gap: 1.5rem; }
@media (min-width: 820px) { .site-footer .wrap { grid-template-columns: 1.2fr 1fr; } }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.credits { max-width: 40rem; }
.credits p + p { margin-top: 0.6rem; }

/* ---------- small pages ---------- */
.plain { min-height: 60vh; display: grid; align-content: center; justify-items: start; gap: 1.25rem; padding-block: 4rem; }

@media (max-width: 520px) {
  body { font-size: 1rem; }
}