/* ordermetrics.com: one stylesheet for every page.
   Colours follow the app's Night shift look: a plum room at night, a plum-grey desk by day.
   The logo's grid is the only ornament. No web fonts, no external requests. */

:root {
  color-scheme: dark light;

  --bg:          #26141C;
  --ink:         #F4ECDD;
  --ink-2:       #CFC1B6;
  --ink-3:       #B3A29E;
  --rule:        rgba(244, 236, 221, .12);
  --rule-strong: rgba(244, 236, 221, .45);  /* link underline: 4:1 on the ground */
  --focus:       #F6D183;
  --lit:         rgba(246, 209, 131, .12);
  --selection:   rgba(246, 209, 131, .30);

  --word-strong: #CFC1B6;
  --word-quiet:  #8F7D7F;  /* 4.5:1 on the ground: the header wordmark is 17 px text */
  /* The header mark (small, two tones): the top row, and the rest */
  --mark-1: #F6D183;
  --mark-3: #B79B5F;
  /* the home mark: a cohort heat table, eight steps of gold, strongest at the upper left;
     the rest of the grid is the faintest wash of the page's ink, so the table stays a clean rectangle */
  --heat-1: #F6D183;
  --heat-2: #E8C070;
  --heat-3: #DAB05C;
  --heat-4: #C49C4F;
  --heat-5: #AC8847;
  --heat-6: #91723F;
  --heat-7: #725937;
  --heat-8: #54402F;
  --heat-0: rgba(244, 236, 221, .07);

  --font-voice: "Iowan Old Style", Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-ui:    "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter:  1rem;
  --measure: 37rem;
  --toc-w:   13.5rem;
  --toc-gap: 4rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:          #F3EFEE;
    --ink:         #26141C;
    --ink-2:       #57434B;
    --ink-3:       #675459;
    --rule:        rgba(38, 20, 28, .14);
    --rule-strong: rgba(38, 20, 28, .55);
    --focus:       #7F4E08;
    --lit:         rgba(246, 209, 131, .40);
    --selection:   rgba(246, 209, 131, .60);

    --word-strong: #26141C;
    --word-quiet:  #675459;
    /* by day the same mark in a deeper, still golden tone: more is richer amber, less is pale honey */
    --mark-1: #C9810A;
    --mark-3: #E09C16;
    /* the home mark: a cohort heat table, eight steps of gold, strongest at the upper left;
       the rest of the grid is the faintest wash of the page's ink, so the table stays a clean rectangle */
    --heat-1: #C9810A;
    --heat-2: #D69011;
    --heat-3: #E2A01D;
    --heat-4: #E9AF31;
    --heat-5: #EFBE50;
    --heat-6: #F2CC74;
    --heat-7: #F2D798;
    --heat-8: #F0E1BA;
    --heat-0: rgba(38, 20, 28, .07);
  }
}

@media (min-width: 40rem) {
  :root { --gutter: 2rem; }
}

/* ---- Base --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-voice);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 48rem) {
  body { font-size: 1.125rem; }
}

main { flex: 1 0 auto; }

::selection { background: var(--selection); color: var(--ink); }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

a:hover { text-decoration-color: currentColor; }

a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
  text-decoration-color: currentColor;
}

/* The page width every non-home page shares: header, document and footer line up. */
.wrap {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

/* ---- The mark ----------------------------------------------------------------------- */

.om-mark { display: block; overflow: visible; }
.om-mark .c1 { fill: var(--mark-1); }
.om-mark .c3 { fill: var(--mark-3); }
.om-mark .h0 { fill: var(--heat-0); }
.om-mark .h1 { fill: var(--heat-1); }
.om-mark .h2 { fill: var(--heat-2); }
.om-mark .h3 { fill: var(--heat-3); }
.om-mark .h4 { fill: var(--heat-4); }
.om-mark .h5 { fill: var(--heat-5); }
.om-mark .h6 { fill: var(--heat-6); }
.om-mark .h7 { fill: var(--heat-7); }
.om-mark .h8 { fill: var(--heat-8); }

.wordmark {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.wordmark-order   { color: var(--word-strong); }
.wordmark-metrics { color: var(--word-quiet); }

/* ---- Home: the mark, and the words set on its rows ---------------------------------- */

.home {
  display: grid;
  place-items: center;
  padding: 3rem max(var(--gutter), env(safe-area-inset-left)) 2rem max(var(--gutter), env(safe-area-inset-right));
}

.home-grid { width: 100%; max-width: 22rem; }

.home-mark { width: 8.5rem; height: auto; }

.home-name { margin: 2.25rem 0 0; font-size: 2rem; }

.home-line {
  margin: .75rem 0 0;
  color: var(--ink-2);
  line-height: 1.45;
}

.home-contact {
  margin: 2rem 0 0;
  font-family: var(--font-ui);
  font-size: 1rem;
}

.home-links {
  margin: 2rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink-2);
}

.home-links a { padding: .3rem 0; }

/* From tablet width up, the mark stands at the left as a table of nine rows, and each
   line of text sits on one of them: the name on the strong top row. */
@media (min-width: 56rem) and (min-height: 30rem) {
  .home-grid {
    --pitch: clamp(2rem, min(5.4vh, 3.6vw), 3rem);
    max-width: none;
    width: auto;
    display: grid;
    grid-template-columns: auto 24rem;
    column-gap: calc(var(--pitch) * 1.5);
  }

  .home-mark {
    width: calc(var(--pitch) * 10.386);
    height: calc(var(--pitch) * 9);
  }

  .home-rows {
    display: grid;
    grid-template-rows: repeat(9, var(--pitch));
    align-items: center;
  }

  .home-name    { grid-row: 1; margin: 0; font-size: calc(var(--pitch) * .8); }
  .home-line    { grid-row: 2; margin: 0; }
  .home-contact { grid-row: 4; margin: 0; }

  .home-links {
    grid-row: 7 / span 3;
    align-self: stretch;
    margin: 0;
    display: grid;
    grid-template-rows: repeat(3, var(--pitch));
    align-items: center;
    justify-items: start;
  }
  .home-links a { padding: .15rem 0; }
}

.home-foot {
  padding: 1.5rem var(--gutter) max(1.75rem, env(safe-area-inset-bottom));
  font-family: var(--font-ui);
  font-size: .8125rem;
  color: var(--ink-3);
}
.home-foot p { max-width: 22rem; margin: 0 auto; }

@media (min-width: 56rem) and (min-height: 30rem) {
  .home-foot p { max-width: none; text-align: center; }
}

/* ---- Site header on every other page ------------------------------------------------ */

.site-head { padding-top: 1.75rem; }

.site-mark {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .25rem 0;
  font-size: 1.0625rem;
  text-decoration: none;
}
.site-mark .om-mark { width: 2.5rem; height: auto; }

/* ---- Legal documents ---------------------------------------------------------------- */

.doc { padding-block: 3rem 4.5rem; overflow-wrap: break-word; }

.doc-head h1 {
  margin: 0;
  font-family: var(--font-voice);
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.625rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.doc-effective {
  margin: .875rem 0 0;
  font-family: var(--font-ui);
  font-size: .875rem;
  line-height: 1.4;
  color: var(--ink-3);
}

.doc-body { margin-top: 2.5rem; }

.doc-body > :first-child { margin-top: 0; }

.doc-body h2,
.doc-body h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--ink);
  scroll-margin-top: 1.5rem;
}

.doc-body h2 {
  margin: 2.6em 0 0;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.doc-body h3 {
  margin: 2em 0 0;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.doc-body p,
.doc-body ul,
.doc-body ol,
.doc-body address,
.doc-body blockquote,
.doc-body .table-wrap {
  margin: 1em 0 0;
}

.doc-body h2 + *,
.doc-body h3 + * { margin-top: .6em; }

.doc-body ul,
.doc-body ol { padding-left: 1.4em; }

.doc-body li { margin: 0; padding-left: .2em; }
.doc-body li + li { margin-top: .45em; }
.doc-body li > ul,
.doc-body li > ol,
.doc-body li > p { margin-top: .45em; }
.doc-body ::marker { color: var(--ink-3); }

.doc-body strong { font-weight: 600; }

.doc-body address {
  font-style: normal;
  padding-left: 1em;
  border-left: 2px solid var(--rule);
}

.doc-body blockquote {
  margin-inline: 0;
  padding-left: 1em;
  border-left: 2px solid var(--rule);
  color: var(--ink-2);
}

.doc-body a { overflow-wrap: anywhere; }

.doc-body code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .875em;
}

.doc-body .table-wrap { overflow-x: auto; }
.doc-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375em;
  line-height: 1.45;
}
.doc-body th,
.doc-body td {
  padding: .55em .75em .55em 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.doc-body th { font-family: var(--font-ui); font-weight: 600; font-size: .875rem; }

.doc-body :target {
  background: var(--lit);
  box-shadow: 0 0 0 .4em var(--lit);
  border-radius: 2px;
}

/* Contents list: the first thing in the body. */
.doc-body nav {
  padding: 1.1rem 0 1.25rem;
  border-block: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: .9375rem;
  line-height: 1.35;
}

.doc-body nav h2,
.doc-body nav .toc-title {
  margin: 0 0 .7rem;
  font-family: var(--font-ui);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--ink-2);
}

.doc-body nav ol,
.doc-body nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-body nav li { padding: 0; }
.doc-body nav li + li { margin-top: .1rem; }

.doc-body nav a {
  display: inline-block;
  padding: .2rem 0;
  color: var(--ink-2);
  text-decoration: none;
  overflow-wrap: normal;
}
.doc-body nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: currentColor; }

/* When text comes before the contents list, give the list room below that text. */
@media (max-width: 67.99rem) {
  .doc-body > nav:not(:first-child) { margin-top: 2rem; }
}

@media (min-width: 40rem) and (max-width: 67.99rem) {
  .doc-body nav ol,
  .doc-body nav ul { columns: 2; column-gap: 2rem; }
  .doc-body nav li { break-inside: avoid; }
}

/* Wide screens: the contents list stands in its own column and stays in view. */
@media (min-width: 68rem) {
  .page-doc:has(.doc-body > nav) .wrap {
    max-width: calc(var(--toc-w) + var(--toc-gap) + var(--measure) + 2 * var(--gutter));
  }

  .doc:has(.doc-body > nav) .doc-head { padding-left: calc(var(--toc-w) + var(--toc-gap)); }

  .doc-body:has(> nav) {
    display: grid;
    grid-template-columns: var(--toc-w) minmax(0, var(--measure));
    column-gap: var(--toc-gap);
    align-items: start;
  }

  .doc-body:has(> nav) > * { grid-column: 2; }

  .doc-body:has(> nav) > nav {
    grid-column: 1;
    grid-row: 1 / span 600;
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    /* Room for the focus ring: overflow clips at the padding edge, so pad the sides
       and pull them back out, and the links stay where they were. */
    padding-inline: .5rem;
    margin-inline: -.5rem;
    padding-top: .35rem;
    border-block: 0;
    font-size: .875rem;
  }

  .doc-body:has(> nav) > nav:first-child + * { margin-top: 0; }
}

/* ---- Footer on every other page ----------------------------------------------------- */

.site-foot {
  font-family: var(--font-ui);
  font-size: .875rem;
  line-height: 1.4;
  color: var(--ink-3);
}

.site-foot .wrap { padding-bottom: max(2.25rem, env(safe-area-inset-bottom)); }

.site-foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.site-foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
}

.site-foot a { display: inline-block; padding: .2rem 0; }
.site-foot a[aria-current="page"] { color: var(--ink); text-decoration-color: currentColor; }
.site-foot p { margin: 0; }

/* ---- Not found ---------------------------------------------------------------------- */

.lost { padding-block: 5rem 6rem; }
.lost h1 {
  margin: 0;
  font-family: var(--font-voice);
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.625rem);
  line-height: 1.15;
}
.lost p { margin: 1rem 0 0; color: var(--ink-2); }

/* ---- Print -------------------------------------------------------------------------- */

@media print {
  :root {
    --bg: #FFFFFF; --ink: #000000; --ink-2: #222222; --ink-3: #444444;
    --rule: #BBBBBB; --rule-strong: #888888;
    --word-strong: #000000; --word-quiet: #444444;
    --mark-1: #C9810A; --mark-3: #E09C16;
    --heat-0: rgba(38, 20, 28, .07);
    --heat-1: #C9810A;
    --heat-2: #D69011;
    --heat-3: #E2A01D;
    --heat-4: #E9AF31;
    --heat-5: #EFBE50;
    --heat-6: #F2CC74;
    --heat-7: #F2D798;
    --heat-8: #F0E1BA;
  }
  body { font-size: 11pt; }
  .doc-body nav, .site-foot ul { display: none; }
  .doc-body:has(> nav) { display: block; }
  .doc:has(.doc-body > nav) .doc-head { padding-left: 0; }
  .page-doc .wrap { max-width: none; }
  .doc-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .9em; }
}