/* sonarruler.com: what every page shares. D2's paper (cream page, ink type, Geist with Geist Mono labels, one amber
 * accent), the header and the footer. The kit's base.css comes first (fonts, the app's colours, the App Store pill,
 * buttons, sliders); home.css and page.css come after. */

:root {
  --d-page: #F7F3EA;
  --d-plate: #FDFBF6;
  --d-wash: #EFE6D4;
  --d-ink: #261208;
  --d-ink2: #6B4313;
  --d-ink3: #7A5836;
  --d-amber: #FCBA1E;
  --d-ochre: #B8700F;
  --d-brick: #C8541A;
  --d-hl: rgb(252 186 30 / 0.6);
  --d-shadow: 0 1px 2px rgb(38 18 8 / 0.05), 0 20px 44px -28px rgb(38 18 8 / 0.28);
  --d-gutter: clamp(16px, 4vw, 48px);
  --d-max: 1320px;
  --d-radius: 28px;
  --sr-focus: var(--d-ink);
}

html { background: var(--d-page); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  /* a short page (the 404) keeps its footer at the foot of the window */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--d-page);
  color: var(--d-ink);
  font-family: var(--sr-font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--d-ink); outline-offset: 3px; }
/* Soft corners for the ring round a plain link. :where() keeps this at zero specificity, so anything with a shape of its
 * own (the App Store pill, the capsule buttons, the round play button) keeps it when focused instead of squaring off. */
:where(:focus-visible) { border-radius: 6px; }
/* Sections and the page's main are focused by in-page links and the skip link, for the next Tab; they don't need a ring. */
[tabindex="-1"]:focus { outline: none; }

main { flex: 1 0 auto; }

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--d-ink); color: var(--d-page); padding: 14px 16px; min-height: 44px; border-radius: 10px;
  font: 600 15px/1 var(--sr-mono); text-decoration: none;
}
.skip:focus { top: 12px; }

.label {
  font: 600 0.75rem/1.3 var(--sr-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--d-ink2);
  margin: 0;
}

.num {
  display: inline-block;
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--d-amber);
  color: var(--d-ink);
  font: 700 0.875rem/30px var(--sr-mono);
  letter-spacing: 0;
  text-align: center;
}

.section-title {
  font: 700 clamp(2rem, 1.4rem + 2.2vw, 3.5rem)/1.04 var(--sr-font);
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

/* MARK: Header (D2's) */

.top { position: relative; z-index: 5; }
.top__row {
  display: flex;
  align-items: center;
  gap: 16px 28px;
  min-height: 84px;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px;
  text-decoration: none;
  font: 650 1.125rem/1 var(--sr-font);
  letter-spacing: -0.01em;
}
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand--small img { width: 28px; height: 28px; border-radius: 7px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 14px;
  font: 500 0.9375rem/1 var(--sr-mono);
  text-decoration: none;
  color: var(--d-ink);
  border-radius: 999px;
}
.nav a[aria-current="page"] { background: var(--d-wash); }
@media (hover: hover) { .nav a:hover { background: var(--d-wash); } }
.top__store { --sr-store-h: 48px; }

/* MARK: Footer: a closing row (the App Store pill once more), then D2's footer */

.foot { padding: 0 0 40px; background: var(--d-page); }
.foot__close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 32px;
  padding-bottom: clamp(36px, 4.4vw, 56px);
  text-align: center;
}
.foot__line {
  font: 700 clamp(1.5rem, 1.2rem + 1vw, 2.125rem)/1.12 var(--sr-font);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.foot__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding-top: 24px;
  position: relative;
}
.foot__row::before { content: ""; position: absolute; left: var(--d-gutter); right: var(--d-gutter); top: 0; height: 1px; background: rgb(38 18 8 / 0.14); }
.brand--small { font-size: 1rem; }
.foot__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; font: 500 0.9375rem/1 var(--sr-mono); color: var(--d-ink2); }
.foot__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--d-ink); text-decoration: none; }
@media (hover: hover) { .foot__nav a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.foot__nav .dot { color: var(--d-ink3); }
.foot__copy { padding: 0 6px; min-height: 44px; display: inline-flex; align-items: center; }

/* MARK: Narrower screens */

/* On phones and narrow tablets the header keeps only the name and the links: below about 772 px the name, the three
 * links and the pill don't fit on one line (each wrapped onto two), and on the home page the hero's own App Store
 * button is in the first screen anyway. */
@media (max-width: 800px) {
  .top__store { display: none; }
}

@media (max-width: 680px) {
  .top__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 4px;
  }
  .brand { justify-self: start; }
  .nav { grid-row: 2; margin: 0 -12px; }
  .nav a { padding: 0 12px; font-size: 0.9375rem; }
  .section-title { font-size: 2rem; }
  .foot { padding: 0 0 28px; }
  .foot__close { flex-direction: column; gap: 16px; }
  .foot__row { flex-direction: column; align-items: flex-start; }
  .foot__nav { margin-left: -6px; }
  .foot__nav .dot--last { display: none; }
  .foot__copy { flex-basis: 100%; }
}

/* The narrowest phones (320 px): the three links keep to one line each. */
@media (max-width: 340px) {
  .nav { margin: 0 -9px; gap: 2px; }
  .nav a { padding: 0 9px; white-space: nowrap; }
}