/* Hairloom web pages — the same tokens as lib/shared/design/hl_colors.dart and
   hl_space.dart. Deliberately one small stylesheet with no framework: these
   pages are read by store reviewers and by people looking for the delete
   button, and both should get text on screen instantly. */

/* Self-hosted, not Google Fonts. An @import from fonts.googleapis.com sends
   every visitor's IP address to Google before they have read a word of the
   privacy policy — which is both a live GDPR complaint category in the EU and
   a peculiar thing to do on the page explaining what we do with their data.
   It also blocks the first paint on a third-party round trip, which is the
   opposite of what the note above asks for. The same four faces the app
   bundles.

   WOFF2, subset by `scripts/make_webfonts.py` to the characters these pages
   actually contain. The source TTFs are 1,248KB together — 441KB of it the
   serif alone — and with `font-display: swap` that is not an abstract number:
   it is every headline visibly reflowing on a first visit, on the page a
   store reviewer opens. Subsetting takes all four to 344KB.

   WOFF2 is the only format offered. It has been supported everywhere since
   2016, and anything older falls through to the system stack in each
   `font-family` below, which is what the second and third entries are for. */
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
/* The real italic, not a synthesised slant. It sets one word in the headline
   at 62px — "actually" — which is where a browser's algorithmic oblique is
   most obviously not a typeface. Subset to Basic Latin only: the italic never
   sets more than a few words of English. */
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-Italic.woff2') format('woff2');
  font-weight: 300 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/InstrumentSans.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}
/* The same mono the app bundles. Without it the eyebrows fell through to
   `ui-monospace`, which is SF Mono on a Mac and Consolas on Windows — so the
   one typographic detail that carries the brand looked like a different
   typeface to half the people who saw it. 7KB, uppercase and digits only. */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Surfaces — HlColors */
  --surface: #fbf7f2;      /* surfaceBase */
  --raised: #ffffff;       /* surfaceRaised */
  --tint: #f2eae0;         /* surfaceTint */
  --tint-strong: #e6dacb;  /* surfaceTintStrong */
  --ink: #2c3a31;          /* ink — the deep green, also a full-bleed surface */

  /* Text */
  --text: #221f1b;         /* textPrimary */
  --body: #5c5348;         /* textBody */
  --muted: #6b6156;        /* textMuted */
  --soft: #8a8074;         /* textSoft — decorative only, 3.6:1 */
  --on-ink: #fbf7f2;       /* onInk */
  --on-ink-body: rgba(251, 247, 242, 0.72);   /* onInkBody */
  --on-ink-soft: rgba(251, 247, 242, 0.52);

  /* Lines */
  --line-hair: #efe7db;    /* lineHair */
  --line: #e6dcd0;         /* line */
  --line-card: #e1d7cb;    /* lineCard */
  --line-outline: #c9beaf; /* lineOutline */
  --line-on-ink: rgba(251, 247, 242, 0.18);

  /* Accent. Two of them, deliberately.

     `--accent` is the brand terracotta, straight from HlColors.accent. At
     3.7:1 on the bone background it is fine for display type and for fills,
     and fails AA for anything at body size — which is exactly what an inline
     link is. `--link` is the same hue darkened to 5.6:1, used only for text
     links. Store reviewers click the Privacy Policy link; it should not be
     the one thing on the page that fails a contrast check. */
  --accent: #b0714e;
  --link: #8f5537;

  /* Radii — HlRadius */
  --r-card: 22px;
  --r-panel: 20px;
  --r-tile: 16px;
  --r-pill: 100px;

  /* One page shell, so headings, screenshots and footer share a left edge.
     `--measure` caps prose at a readable line length inside it. */
  --wide: 1040px;
  --measure: 680px;
  --gutter: 30px;   /* HlSpace.gutterApp */

  /* HlMotion.base / Curves.easeOutCubic */
  --dur: 220ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  /* Anchor links glide rather than jump — but only for readers who have not
     asked the system to stop moving things. */
  scroll-behavior: auto;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--body);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The document column, used by the legal and support pages. */
.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 40px var(--gutter) 96px;
}

/* The wide shell, used by the landing page. */
.shell {
  max-width: var(--wide);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------ chrome */

header.site {
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
  padding-bottom: 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 26px;
  /* 300, not 400 — HlType renders every display style at weight 300, and at
     26px the difference between the two is plainly visible. */
  font-weight: 300;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.logo img { width: 28px; height: 28px; border-radius: 7px; }

header.site nav,
footer.site .links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

/* Every link stays on one line; the row wraps between links instead. Without
   this, "Delete account" breaks across two lines mid-phrase at 390px. */
header.site nav a,
footer.site .links a {
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

nav a { color: var(--muted); font-size: 14.5px; }
nav a:hover { color: var(--ink); text-decoration: underline; }

footer.site {
  border-top: 1px solid var(--line);
  margin-top: 64px;
  padding-top: 22px;
  font-size: 14px;
  color: var(--muted);
}
footer.site .links { margin-bottom: 14px; }
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--ink); text-decoration: underline; }
footer.site p { margin: 0; color: var(--soft); }

/* ------------------------------------------------------------- type */

h1 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 8px;
}

h2 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: 26px;   /* HlType.display8 */
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 44px 0 12px;
}

/* A heading that opens a section whose container already provides the space
   above it. Without this the two margins stack into a 140px hole. */
section > h2:first-child,
section > .eyebrow:first-child { margin-top: 0; }

h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 28px 0 6px;
}

.eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;   /* HlType.eyebrow */
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.updated { color: var(--muted); font-size: 14.5px; margin: 0 0 8px; }

p, li { margin: 0 0 14px; }
ul, ol { padding-left: 22px; }
li { margin-bottom: 8px; }

a { color: var(--link); }

strong { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------- surfaces */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 24px;
  font-size: 15.5px;
  display: block;
  overflow-x: auto;
}
th, td {
  text-align: left;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--line-hair);
  vertical-align: top;
}
th { color: var(--text); font-weight: 600; white-space: nowrap; }

/* The app's tinted panel — "why you", privacy notes, quotes. */
.note {
  background: var(--tint);
  border: 1px solid var(--line-card);
  border-radius: var(--r-panel);
  padding: 20px 22px;
  margin: 24px 0;
}
.note p:last-child { margin-bottom: 0; }

.callout {
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 18px;
  margin: 24px 0;
}
.callout p:last-child { margin-bottom: 0; }

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--on-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;              /* HlType.button */
  padding: 18px 30px;
  border-radius: var(--r-pill);
  margin: 6px 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { opacity: 0.9; }
.btn:active { transform: translateY(1px); }

/* ------------------------------------------------------------- focus */

/* The UA default is a blue ring, which on a warm bone page is the only cold
   colour anywhere. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------ mobile */

@media (max-width: 520px) {
  :root { --gutter: 22px; }
  h1 { font-size: 32px; }
  h2 { font-size: 23px; }
  .wrap { padding: 28px var(--gutter) 72px; }
  header.site { display: block; }
  header.site nav { margin-top: 12px; }
}