/* The persistent header on every landing page (design handoff "1a"): the logo on the left (the mark plus the live
   word, linking home), the ways to the app on the right. Markup in each page, behaviour in site-header.js. Pixel
   values are the handoff's.
   - Mouse: an outline pill "Get the app" opens a card with the QR and the store badges; a dark pill "Open web app".
     Under 600px wide (a narrow window, a zoomed page) both pills do not fit beside the logo: "Open web app" turns
     into the text link "Web app", as on touch.
   - Touch (pointer: coarse): a text link "Web app" and a dark pill "Get the app" to /get. The custom buttons carry
     no Apple or Google logos, only the line icons.
   - "Web app" goes under 360px of width (a Galaxy Z Fold's cover screen, 344px). The handoff counts the width
     inside the safe areas; the landing has no viewport-fit=cover, so the safe areas are 0 and the viewport width is
     that width.
   - Size classes: L (1024px+), M (600-1023px), S (under 600px), Short (not portrait and under 520px tall; portrait
     is h > 1.15w, as in index.html). Safe areas are added to the height and the side margins.
   - The home page's header (data-overlay) is fixed over the hero, transparent while the hero is pinned; its page
     colour and hairline fade in with the scroll as the hero leaves the screen and are full by the time the hero's
     content reaches the header (site-header.js); text pages keep it in the flow (sticky), always on the page
     colour, with the hairline once scrolled.
   - In the native apps' in-app mode (in-app.js) the data-web-only group goes: only the logo stays. */
:root {
  --hdr-bar: 76px; /* bar height */
  --hdr-m: 30px; /* the mark's visible height */
  --hdr-pad: clamp(24px, 3.5vw, 56px); /* side margin, before the safe area */
  --hdr-ink: #4a4540;
  --hdr-cream: #fbf7f2;
  /* the header's full height (the bar plus the top safe area): what lies under it starts here (index.html) */
  --hdr-h: calc(var(--hdr-bar) + env(safe-area-inset-top, 0px));
  /* The landing's type scale, shared by every page (this file is on all of them). Three families, one role each
     (docs/wiki/design/design-system.md, "Типографика"): Cormorant Garamond 600 for headings (roman, the accent in
     italic), Hanken Grotesk 400/600 for all text, Archivo 700 only for UPPERCASE labels. The hero's slides set some
     sizes in stage coordinates (scaled with the poster); they keep their geometry, labels there keep the tracking. */
  --fs-legal: 12px;
  --fs-small: 14px; /* footers, notes, dates, the header's controls */
  --fs-body: 16px; /* body text, CTAs */
  --fs-lead: 18px; /* a page's lead paragraph */
  --fs-label: 12px; /* Archivo UPPERCASE: eyebrows, tags */
  --tracking-label: 0.18em;
  --fs-h1: clamp(34px, 6vw, 50px); /* text pages */
  --fs-h2: 26px;
}
@media (max-width: 1023.98px) {
  :root {
    --hdr-bar: 68px;
    --hdr-m: 28px;
    --hdr-pad: 24px;
  }
}
@media (max-width: 599.98px) {
  :root {
    --hdr-bar: 60px;
    --hdr-m: 26px;
    --hdr-pad: 16px;
  }
}
@media (min-aspect-ratio: 100/115) and (max-height: 519.98px) {
  :root {
    --hdr-bar: 52px;
    --hdr-m: 26px;
  }
}
/* Text pages: an anchor (delete-account.html#keep) lands under the sticky header, not behind it. 1px more: the
   browser rounds the scroll position, and a heading at a fractional offset (line heights in fractional px) could
   end a subpixel under the header's edge. */
html:has(> body > .hdr:not([data-overlay])) {
  scroll-padding-top: calc(var(--hdr-h) + 1px);
}

.hdr {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0
    env(safe-area-inset-left, 0px);
  background: var(--page);
  color: var(--hdr-ink);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}
.hdr.is-scrolled {
  box-shadow: inset 0 -1px 0 rgba(74, 69, 64, 0.14);
}
/* The home page's header lies over the hero, transparent while the hero is pinned; its page colour and hairline
   (a layer behind its content) fade in with the scroll as the hero leaves the screen (--hdr-fill 0..1, set by
   site-header.js), full by the time the hero's content reaches the header's bottom edge. It follows the scroll, it
   is no animation, so reduced motion keeps it. */
.hdr[data-overlay] {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
}
.hdr[data-overlay].is-scrolled {
  box-shadow: none;
}
.hdr[data-overlay]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--page);
  box-shadow: inset 0 -1px 0 rgba(74, 69, 64, 0.14);
  opacity: var(--hdr-fill, 0);
  pointer-events: none;
}
/* Home page, a short landscape screen (the Short class) while the hero is pinned (index.html sets the class): the
   hero's copy column takes the full height beside the poster, so the header keeps only its actions, transparent,
   over the free band above the poster; the hero's own wordmark stands in for the logo. Once the hero starts to
   leave the screen the class goes: the logo shows, with the fill full at once (the copy column is under the
   header there from the start, so the fill switches to 1 rather than fading in). */
.hdr.hdr-over-hero {
  background: transparent;
  box-shadow: none;
  /* the transparent bar does not take taps meant for the hero under it; its buttons do */
  pointer-events: none;
}
.hdr.hdr-over-hero .hdr-actions {
  pointer-events: auto;
}
.hdr.hdr-over-hero .hdr-logo {
  visibility: hidden;
}
/* In the native apps' in-app mode the actions are gone (data-web-only): over the hero nothing would be left, so the
   header goes altogether while the hero is pinned (once it starts to leave, the logo shows as usual) */
.in-app .hdr.hdr-over-hero {
  visibility: hidden;
}
/* ... and where "Web app" would run into the hero's wordmark (a phone split screen), only "Get the app" stays */
.hdr.hdr-hero-crowded .hdr-weblink {
  display: none;
}

.hdr-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--hdr-bar);
  margin: 0;
  padding: 0 var(--hdr-pad);
}

/* Logo: the mark's SVG has transparent margins (the visible mark spans x 110-912, y 73.6-928.3 of 1024), so the
   image is scaled and offset inside a box of the visible size. The word is 0.481 of the mark (never under 12px). */
.hdr-logo {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--hdr-m) / 3);
  min-height: 44px;
  flex: none;
  color: var(--hdr-ink);
  text-decoration: none;
}
.hdr-mark {
  position: relative;
  display: block;
  flex: none;
  width: calc(var(--hdr-m) * 0.938);
  height: var(--hdr-m);
}
.hdr-mark img {
  position: absolute;
  left: calc(var(--hdr-m) * -0.1287);
  top: calc(var(--hdr-m) * -0.0861);
  display: block;
  width: calc(var(--hdr-m) * 1.1977);
  height: calc(var(--hdr-m) * 1.1977);
  max-width: none;
}
.hdr-word {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-style: normal;
  font-size: max(12px, calc(var(--hdr-m) * 0.481));
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
  color: var(--hdr-ink);
}

.hdr-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 0 auto;
}
.hdr-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--hdr-ink);
  color: var(--hdr-cream);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  cursor: pointer;
}
.hdr-outline {
  gap: 7px;
  padding: 0 16px;
  background: transparent;
  color: var(--hdr-ink);
  box-shadow: inset 0 0 0 1px rgba(74, 69, 64, 0.55);
}
/* no hover look of their own (none in the handoff); these only keep the pages' a:hover colours off the header */
.hdr-logo:hover,
.hdr-weblink:hover,
.hdr-outline:hover {
  color: var(--hdr-ink);
}
.hdr-pill.hdr-ink:hover {
  color: var(--hdr-cream);
}
.hdr-pill svg {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hdr-pill svg.hdr-chev {
  width: 12px;
  height: 12px;
}
.hdr-pill:focus-visible,
.hdr-weblink:focus-visible,
.hdr-logo:focus-visible,
.hdr-card a:focus-visible {
  outline: 2px solid var(--hdr-ink);
  outline-offset: 3px;
}
.hdr-weblink {
  align-items: center;
  min-height: 44px;
  margin: 0;
  color: var(--hdr-ink);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  white-space: nowrap;
  flex: none;
}

/* Mouse or touch: the two sets of controls are both in the markup */
.hdr-touch {
  display: none;
}
/* S, a mouse: "Get the app" (the card) and the text link "Web app" instead of the "Open web app" pill */
@media (max-width: 599.98px) {
  .hdr-actions {
    gap: 14px;
  }
  .hdr-pill.hdr-ink.hdr-mouse {
    display: none;
  }
  .hdr-weblink {
    display: inline-flex;
  }
}
@media (pointer: coarse) {
  .hdr-mouse {
    display: none;
  }
  .hdr-touch {
    display: inline-flex;
  }
  .hdr-pill.hdr-touch {
    height: 44px;
  }
}
@media (pointer: coarse) and (min-width: 600px) {
  .hdr-actions {
    gap: 20px;
  }
}
@media (max-width: 359.98px) {
  .hdr .hdr-weblink {
    display: none;
  }
}

/* The "Get the app" card (mouse only): fixed under the header, its right edge at the header's right margin. The QR
   is 112px; the two badges (44px each, 24px apart) span its height. Official badge art, as on the home page
   (.storebadge). Under 364px wide the card side by side (332px) would cross the 16px left margin: the QR goes above
   the badges. */
.hdr-card {
  position: fixed;
  top: calc(var(--hdr-h) + 10px);
  right: calc(var(--hdr-pad) + env(safe-area-inset-right, 0px));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 24px;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(74, 69, 64, 0.1),
    0 14px 30px -12px rgba(74, 69, 64, 0.3);
}
.hdr-card[hidden] {
  display: none;
}
.hdr-card:focus {
  outline: none;
}
@media (max-width: 363.98px) {
  .hdr-card {
    flex-direction: column;
  }
}
.hdr-qr {
  display: block;
  flex: none;
  width: 112px;
  height: 112px;
}
.hdr-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.hdr-card .storebadge {
  --bh: 44px;
  display: block;
  height: var(--bh);
  line-height: 0;
}
.hdr-card .storebadge img {
  display: block;
  height: 100%;
  width: auto;
}
/* the Google Play PNG is a 564x168 badge in a 41px transparent margin: the margin is cropped */
.hdr-card .storebadge-gp {
  aspect-ratio: 564 / 168;
  overflow: hidden;
}
.hdr-card .storebadge-gp img {
  height: calc(var(--bh) * 250 / 168);
  max-width: none;
  margin: calc(var(--bh) * -41 / 168);
}

/* Text pages: the content starts 56px under the header on L, 32px below that (the handoff's pricing layout) */
.hdr + .wrap {
  padding-top: 56px;
}
.hdr + .wrap > :first-child {
  margin-top: 0;
}
@media (max-width: 1023.98px) {
  .hdr + .wrap {
    padding-top: 32px;
  }
}