/* ==========================================================================================
   The site's quiet pages: Privacy (privacy.html) and the page a wrong address finds (404.html).

   The one-page site's own type, colours, margins, header and foot (prototype/reverie.html is the
   reference: its tokens are copied here, at the values it has at rest), with none of its motion:
   a header that stays where it is, a label, a statement and reading text on the pale ground, and
   the foot on navy. Loaded after shared/base.css, which gives the reset, the skip link and the
   keyboard's ring. Every value that is the one page's is named as it is there.
   ========================================================================================== */

:root {
  --pale: #e7eaed;
  --ink: #0f1b2e;
  --navy: #004362;
  --ground: var(--pale);
  --fg: var(--ink);
  --mark: var(--navy);
  --paper: var(--ground);
  /* The tints as plain colours: each part of these pages has one ink, so they are exact (the
     one page works them out with color-mix(), as its ink turns). */
  --rule: rgba(15, 27, 46, 0.22);
  --quiet: rgba(15, 27, 46, 0.62);
  --tint: rgba(15, 27, 46, 0.08);                /* an outline pill under the pointer or the focus */
  --focus: var(--fg);
  color-scheme: only light;                      /* light only, never darkened by the browser */

  /* Type: the free twins, or (data-fonts="premium") Die Grotesk and Signifier: the bought faces on
     the published site (fonts/licensed/, linked by the release build), the trial faces named after
     them on the owner's machine. */
  --font-a: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-c: var(--font-a);
  --font-d: var(--font-a);
  --font-statement: var(--font-a);
  --font-serif: "Source Serif 4", "Source Serif Pro", Charter, Georgia, serif;
  --cap: 0.72;
  --track-statement: -0.038em;
  --track-ui: -0.012em;
  --track-label: 0.07em;
  --track-brand: -0.03em;
  --track-reading: -0.01em;
  --serif-scale: 0.93;

  --size-statement: clamp(32px, 3.75vw, 60px);
  --lead-statement: calc(var(--size-statement) * 1.03);
  --size-text: clamp(18px, 1.45vw, 23px);
  --size-reading: calc(var(--size-text) * var(--serif-scale));
  --lead-reading: calc(var(--size-text) * 1.42);
  --size-ui: 15px;
  --lead-ui: 16px;
  --size-label: 11px;
  --measure-reading: min(calc(30 * var(--size-text)), 620px);

  /* Grid and space. */
  --m: clamp(22px, 5vw, 96px);
  --edge: max(var(--m), calc((100vw - 1536px) / 2));
  --gutter: 24px;
  --content: calc(100vw - 2 * var(--edge));
  --col-step: calc((var(--content) + var(--gutter)) / 12);
  --col5: calc(var(--col-step) * 4);
  --s8: 8px; --s12: 12px; --s16: 16px; --s24: 24px; --s32: 32px; --s48: 48px; --s64: 64px;
  --section-pad: clamp(64px, 6.5vw, 112px);
  --head-gap: var(--s48);
  --link-gap: 36px;
  --link-drop: 7px;
  --link-under: 6px;
  --round: 999px;
  --reach: 44px;

  /* The header, as it stands at the top of the one page. */
  --header-h: 72px;
  --header-top: clamp(0px, calc((var(--m) - 40px) / 2), 16px);
  --slot: 38px;
  --pill-h: 42px;
  --pill-pad: 20px;
  --brand-size: 27px;
  --brand-lead: 28px;
  --brand-bar: 18px;
  --brand-rest: 11px;

  /* Buttons and links: colour only, in 200ms; a press gives a little. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-colour: 200ms;
  --dur-press: 90ms;
  --dur-release: 160ms;
  --press: 0.975;
}

:root[data-fonts="premium"] {
  --font-statement: "Die Grotesk B", "Die Grotesk B Trial", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-c: "Die Grotesk A", "Die Grotesk A Trial", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-d: "Die Grotesk A", "Die Grotesk A Trial", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Signifier", "Signifier Trial", Charter, Georgia, serif;
  --cap: 0.73;
  --track-statement: -0.004em;
  --track-ui: -0.004em;
  --track-label: 0.09em;
  --track-brand: -0.018em;
  --track-reading: 0em;
  --serif-scale: 1;
}

@supports (width: round(down, 1px, 1px)) {
  :root {
    --size-statement: round(nearest, clamp(32px, 3.75vw, 60px), 1px);
    --lead-statement: round(nearest, calc(var(--size-statement) * 1.03), 1px);
    --size-text: round(nearest, clamp(18px, 1.45vw, 23px), 1px);
    --lead-reading: round(nearest, calc(var(--size-text) * 1.42), 1px);
    --m: round(down, clamp(22px, 5vw, 96px), 1px);
    --edge: max(var(--m), round(down, calc((100vw - 1536px) / 2 + 0.01px), 1px));
    --col5: round(nearest, calc(var(--col-step) * 4), 1px);
    --section-pad: round(down, clamp(64px, 6.5vw, 112px), 1px);
    --header-top: round(down, clamp(0px, calc((var(--m) - 40px) / 2), 16px), 1px);
  }
}

@media (max-width: 699px) {
  :root {
    --gutter: 16px;
  }
}

@media (min-width: 700px) {
  :root {
    --head-gap: var(--s64);
  }
}

@media (min-width: 1200px) {
  :root {
    --head-gap: 88px;
  }
}

@media (max-width: 899px) {
  :root {
    --pill-h: 38px;
    --brand-size: 24px;
    --brand-lead: 24px;
    --brand-bar: 16px;
    --brand-rest: 10px;
  }
}

/* ------------------------------------------------------------------------------ base */

html {
  background: var(--navy);                /* under the foot, past the end of the page */
}

body {
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--fg);
  font: 400 var(--size-ui) / 1.4 var(--font-c);
  letter-spacing: var(--track-ui);
  font-kerning: normal;
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--fg);
  color: var(--ground);
}

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

.site-header {
  padding-top: var(--header-top);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: var(--edge);
}

.wordmark {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: var(--reach);
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark__mark {
  flex: none;
  width: calc(var(--slot) - var(--s12));
  height: calc(var(--slot) - var(--s12));
  margin-right: var(--s12);
  fill: var(--mark);
}

.wordmark__name {
  font: 400 var(--brand-size) / var(--brand-lead) var(--font-serif);
  letter-spacing: var(--track-brand);
}

.wordmark__bar {
  flex: none;
  width: 1px;
  height: var(--brand-bar);
  margin-inline: var(--s12);
  background: currentColor;
}

.wordmark__rest {
  margin-right: calc(-1 * var(--track-label));
  font: 500 var(--brand-rest) / var(--s12) var(--font-d);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--link-gap);
  margin-left: auto;
  margin-right: var(--link-gap);
}

.site-nav a {
  position: relative;
  display: block;
  color: var(--fg);
  color: color-mix(in srgb, var(--fg) 70%, transparent);
  font: 400 var(--size-ui) / var(--lead-ui) var(--font-c);
  letter-spacing: var(--track-ui);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-colour) ease;
}

.site-nav a::before {
  content: "";
  position: absolute;
  inset: -14px 0;
}

.site-nav a:focus-visible {
  color: var(--fg);
}

@media (hover: hover) {
  .site-nav a:hover {
    color: var(--fg);
  }
}

.pill {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: var(--pill-h);
  padding-inline: var(--pill-pad);
  border: 1px solid var(--fg);
  border-radius: var(--round);
  background-color: transparent;
  color: var(--fg);
  font: 500 var(--size-ui) / var(--lead-ui) var(--font-c);
  letter-spacing: var(--track-ui);
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color var(--dur-colour) ease,
    transform var(--dur-release) var(--ease-out);
}

.pill::after {
  content: "";
  position: absolute;
  inset: calc((var(--pill-h) - var(--reach)) / 2 - 1px) -1px;
}

/* As on the one page: a faint wash of the ink, the outline and the label unchanged. */
.pill:focus-visible {
  background-color: var(--tint);
}

@media (hover: hover) {
  .pill:hover {
    background-color: var(--tint);
  }
}

.pill:active {
  transform: scale(var(--press));
  transition-duration: var(--dur-colour), var(--dur-press);
}

/* Under 900px the header keeps the wordmark and Contact: there are no sections here to list. */
@media (max-width: 899px) {
  .site-nav {
    display: none;
  }
}

/* ------------------------------------------------------------------------------ the text */

main {
  flex: 1 0 auto;
  padding: var(--section-pad) var(--edge);
}

.label {
  font: 500 var(--size-label) / 1 var(--font-d);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--quiet);
}

.statement {
  max-width: 16em;
  margin-top: var(--s24);
  font: 400 var(--size-statement) / var(--lead-statement) var(--font-statement);
  letter-spacing: var(--track-statement);
  text-wrap: balance;
}

.body {
  margin-top: var(--head-gap);
}

/* From 900px the reading text hangs from the fifth column, as the reading of How we work does. */
@media (min-width: 900px) {
  .body {
    padding-left: var(--col5);
  }
}

.reading {
  max-width: var(--measure-reading);
  font: 300 var(--size-reading) / var(--lead-reading) var(--font-serif);
  letter-spacing: var(--track-reading);
  text-wrap: pretty;
}

.reading + .reading {
  margin-top: 1em;
}

.note {
  font: 400 var(--size-ui) / var(--lead-ui) var(--font-c);
  letter-spacing: var(--track-ui);
}

/* The text link: a 1px underline 7px under the base line, at 35 percent of the text's colour,
   deepening to the full colour on hover or focus. */
.link {
  position: relative;
  display: inline-block;
  padding-bottom: var(--link-under);
  color: var(--fg);
  font: 400 var(--size-ui) / var(--lead-ui) var(--font-c);
  letter-spacing: var(--track-ui);
  text-decoration: none;
  white-space: nowrap;
}

.link::before {
  content: "";
  position: absolute;
  inset: -14px 0 -8px;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--lead-ui) / 2 + var(--cap) * var(--size-ui) / 2 + var(--link-drop));
  height: 1px;
  background-color: currentColor;
  background-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: background-color var(--dur-colour) ease;
  pointer-events: none;
}

.link:focus-visible::after,
.link[aria-current="page"]::after {
  background-color: currentColor;
}

@media (hover: hover) {
  .link:hover::after {
    background-color: currentColor;
  }
}

/* A link inside reading text: the serif's own size, the same underline. */
.reading .link {
  font: inherit;
  letter-spacing: inherit;
  padding-bottom: 0;
}

.reading .link::after {
  top: auto;
  bottom: -0.12em;
}

.go {
  margin-top: var(--s48);
}

/* ------------------------------------------------------------------------------ the privacy notice

   A long page set for scanning on the site's own grid. Its opening paragraph hangs from the fifth
   column, as reading does on the one page; under it the contents stand in the first four columns
   and stay in sight (sticky) while the parts of the notice go by from the fifth, each under a
   hairline, its heading in the statement's face at the size of a lead, then reading text in the
   serif and the facts in interface text with their labels. The contents say which part is being
   read by colour only, as the navigation of the one page does (shared/legal.js). Under 900px it
   is one column: the contents, then the parts. */

.policy {
  --size-head: clamp(22px, 1.8vw, 28px);
  --lead-head: calc(var(--size-head) * 1.18);
}

@supports (width: round(down, 1px, 1px)) {
  .policy {
    --size-head: round(nearest, clamp(22px, 1.8vw, 28px), 1px);
    --lead-head: round(nearest, calc(var(--size-head) * 1.18), 1px);
  }
}

.policy__intro {
  margin-top: var(--head-gap);
}

.policy__date {
  margin-top: var(--s24);
  color: var(--quiet);
}

.policy__grid {
  margin-top: var(--section-pad);
}

/* The short notice (16 October 2026): its date stands where the contents of the long one stood,
   in the first column, level with the first head; on a phone, over the text. */
.policy__grid > .policy__date {
  margin-top: 0;
}

.policy__contents ol {
  margin: var(--s16) 0 0;
  padding: 0;
  list-style: none;
}

.policy__contents a {
  position: relative;
  display: inline-block;
  padding-block: 5px;
  color: var(--fg);
  color: color-mix(in srgb, var(--fg) 62%, transparent);
  font: 400 var(--size-ui) / var(--lead-ui) var(--font-c);
  letter-spacing: var(--track-ui);
  text-decoration: none;
  transition: color var(--dur-colour) ease;
}

.policy__contents a[aria-current="true"],
.policy__contents a:focus-visible {
  color: var(--fg);
}

@media (hover: hover) {
  .policy__contents a:hover {
    color: var(--fg);
  }
}

.policy__text {
  margin-top: var(--head-gap);
}

.policy__part {
  max-width: var(--measure-reading);
  padding-top: var(--s32);
  border-top: 1px solid var(--rule);
  scroll-margin-top: var(--s32);
}

.policy__part + .policy__part {
  margin-top: var(--s64);
}

.policy__head {
  margin-bottom: var(--s24);
  font: 400 var(--size-head) / var(--lead-head) var(--font-statement);
  letter-spacing: calc(var(--track-statement) / 2);
  text-wrap: balance;
}

.policy__part > .reading + .reading,
.policy__part > * + .reading,
.policy__part > .reading + * {
  margin-top: 1em;
}

.policy__term {
  font-weight: 400;
}

.policy__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.policy__list > li {
  position: relative;
  padding-left: var(--s24);
}

.policy__list > li + li {
  margin-top: 0.6em;
}

/* Each point marked by a short hairline at the middle of its first line's x-height. */
.policy__list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--lead-reading) / 2 + 0.06em);
  width: 10px;
  height: 1px;
  background: var(--fg);
  background: color-mix(in srgb, var(--fg) 50%, transparent);
}

/* The facts: a label and its value on one line of a hairline table, the label in the first
   136px, the value beside it; on a phone the label over the value. */
.facts {
  margin: var(--s24) 0;
}

.facts__item {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s8) var(--s16);
  padding-block: 13px 12px;
  border-top: 1px solid var(--rule);
}

.facts__item:last-child {
  border-bottom: 1px solid var(--rule);
}

.facts dd {
  margin: 0;
  text-wrap: pretty;
}

/* A value that runs to a second line keeps a line every 22px, as the address does. */
.facts dd.note {
  line-height: calc(var(--lead-ui) + var(--link-under));
}

.facts .link {
  padding-bottom: 0;
}

.stores,
.policy__part > .stores {
  margin-top: var(--s32);                         /* over the first store as over the second */
}

.store + .store {
  margin-top: var(--s32);
}

.store__name {
  font: 500 var(--size-ui) / var(--lead-ui) var(--font-c);
  letter-spacing: var(--track-ui);
}

.store .facts {
  margin-top: var(--s12);
}

.keep {
  white-space: nowrap;
}

@media (min-width: 900px) {
  .policy__intro {
    padding-left: var(--col5);
  }

  .policy__grid {
    display: grid;
    grid-template-columns: var(--col5) minmax(0, 1fr);
    align-items: start;
  }

  .policy__grid > .policy__date {
    padding-top: calc(var(--s32) + 1px);            /* the parts' hairline and the space under it */
    padding-right: var(--gutter);
  }

  .policy__contents {
    position: sticky;
    top: var(--s32);
    padding-right: var(--gutter);
  }

  .policy__text {
    margin-top: 0;
  }
}

@media (max-width: 599px) {
  .facts__item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s8);
  }
}

/* ------------------------------------------------------------------------------ the foot (navy) */

.foot {
  --ground: var(--navy);
  --fg: var(--pale);
  --mark: var(--pale);
  --rule: rgba(231, 234, 237, 0.22);
  --quiet: rgba(231, 234, 237, 0.66);
  --focus: var(--fg);
  padding: 0 var(--edge);
  background: var(--ground);
  color: var(--fg);
}

.foot__row {
  display: grid;
  grid-template-columns: var(--col5) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s24) 0;
  padding-block: var(--s48);
}

.foot__row .wordmark {
  justify-self: start;
}

/* The address on one line where the row has room for it, else on two (a line every 22px, as
   under Contact), never broken inside a line. */
.foot__address > span {
  display: block;
  white-space: nowrap;
}

.foot__address > span:last-child {
  margin-top: var(--link-under);
}

.foot__address > .foot__comma {
  display: none;
}

@media (min-width: 1200px) {
  .foot__address > span,
  .foot__address > .foot__comma {
    display: inline;
  }

  .foot__address > span:last-child {
    margin-top: 0;
  }
}

.foot__nav {
  display: flex;
  align-items: center;
  gap: var(--link-gap);
  padding-top: var(--link-under);
}

/* The legal lines under the row, and Privacy beside them: shared/legal.css, as on the one page. */

@media (max-width: 1199px) {
  .foot__row {
    grid-template-columns: var(--col5) minmax(0, 1fr);
  }

  .foot__nav {
    grid-column: 2;
  }
}

@media (max-width: 899px) {
  .foot__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .foot__nav {
    grid-column: 1;
    flex-wrap: wrap;
    gap: var(--s24) var(--s48);
  }
}

/* Under 700px the links stand two and two, as on the home page. */
@media (max-width: 699px) {
  .foot__nav {
    display: grid;
    grid-template-columns: repeat(2, max-content);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --press: 1;
    --dur-colour: 120ms;
  }
}

@media print {
  html,
  body,
  .foot {
    background: none;
    color: #000;
  }

  .site-nav,
  .pill {
    display: none;
  }
}