/*
  Hogalytics site: the home page, the two legal pages and the 404 page.

  One idea carries the page: the name is the hog, and the app's quill chart
  stands on its back. Everything else is flat fields of three colours taken
  from the app (lib/theme/app_theme.dart): hog orange, ink and paper. Orange
  is a field at the top and bottom and the colour of data marks in between,
  never a text colour. No shadows, gradients or cards.

  One typeface, Archivo, at two widths: condensed and heavy for the name and
  headings, normal width for everything read.

  The page keeps one look in light and dark settings. Screens are shown in
  the theme that contrasts with the field they sit on.
*/

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 62% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --orange: #f54e00;
  --ink: #14171e;
  --paper: #ffffff;
  --mist: #f4f5f7;
  --slate: #545c6c;
  --rule: #dadee5;

  /* On an ink field. */
  --dusk: #a3abba;
  --dusk-dim: #6f7889;
  --dusk-rule: #2f3541;

  --gutter: 20px;
  --block: clamp(64px, 9vw, 128px);
  --pw: min(300px, 76vw);
}

@media (min-width: 720px) {
  :root {
    --gutter: 40px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ol,
ul,
table {
  margin: 0;
}

h2 {
  max-width: 14em;
  font-size: clamp(2.375rem, 1.5rem + 3.6vw, 4.5rem);
  font-stretch: 68%;
  font-weight: 800;
  line-height: 0.95;
  text-wrap: balance;
}

h3 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: min(100% - 2 * var(--gutter), 1200px);
  margin-inline: auto;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

/* The top: quills, the name, and what to do about it. */

.mast {
  padding-block: clamp(20px, 3vw, 40px) clamp(40px, 6vw, 72px);
  background: var(--orange);
  overflow: hidden;
}

.quills {
  --stem: clamp(2px, 0.24vw, 3.5px);
  --dot: clamp(7px, 1.1vw, 15px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: clamp(124px, 25vh, 264px);
  padding: var(--dot) calc(var(--dot) / 2) 0;
}

.quills i {
  position: relative;
  flex: none;
  width: var(--stem);
  height: calc(var(--h) * 100%);
  background: var(--ink);
}

.quills i::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--paper);
  transform: translate(-50%, -50%);
}

/* The day still being counted: a dashed stem and a hollow dot. */
.quills i:last-child {
  background: repeating-linear-gradient(
    to bottom,
    var(--ink) 0 calc(var(--stem) * 2.5),
    transparent calc(var(--stem) * 2.5) calc(var(--stem) * 4.5)
  );
}

.quills i:last-child::before {
  border: var(--stem) solid var(--paper);
  background: var(--orange);
}

.name svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: var(--ink);
}

.name-for {
  display: block;
  margin-top: 0.2em;
  font-size: clamp(2rem, 1.1rem + 3.9vw, 4.5rem);
  font-stretch: 68%;
  font-weight: 800;
  line-height: 0.95;
}

.mast-row {
  display: grid;
  gap: 28px;
  margin-top: clamp(18px, 2.2vw, 28px);
}

.lede {
  max-width: 27em;
  font-size: clamp(1.1875rem, 1.08rem + 0.5vw, 1.4375rem);
  font-weight: 500;
  line-height: 1.38;
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.store {
  display: inline-flex;
  flex: 1 1 240px;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 8px 24px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.store:hover {
  background: var(--dusk-rule);
}

.store:focus-visible {
  outline-color: var(--ink);
  border-radius: 12px;
}

.fine {
  max-width: 34em;
  margin-top: 16px;
  font-size: 0.9375rem;
  line-height: 1.45;
}

@media (min-width: 900px) {
  .mast-row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 64px;
  }

  .store {
    flex: 0 0 auto;
  }

  /* The small print wraps to the width of the two buttons above it. */
  .fine {
    width: 0;
    min-width: 100%;
  }
}

/* Blocks: flat fields, one after another. */

.block {
  padding-block: var(--block);
}

.block-ink {
  background: var(--ink);
  color: var(--paper);
}

.block-mist {
  background: var(--mist);
}

/* A block whose phone stands on its bottom edge. */
.block-stand {
  padding-bottom: 0;
}

.intro {
  max-width: 32em;
  margin-top: 18px;
  color: var(--slate);
  font-size: 1.125rem;
}

.block-ink .intro {
  color: var(--dusk);
}

/* A phone: a bezel around a real capture. */

.phone {
  position: relative;
  flex: none;
  width: var(--pw);
  border: calc(var(--pw) * 0.024) solid var(--ink);
  border-radius: calc(var(--pw) * 0.15);
  background: var(--ink);
  overflow: hidden;
}

.block-ink .phone {
  border-color: var(--dusk-rule);
  background: var(--paper);
}

.phone img {
  width: 100%;
}

.phone.is-cut {
  height: calc(var(--pw) * var(--cut, 1.5));
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* The dashboard, with a quill pointing at each part. On a phone the notes
   are a list under the picture; from 1000px they stand beside what they
   describe. --y and --rx say where on the capture a note points. */

.anatomy {
  display: grid;
  gap: 36px;
  justify-items: center;
  margin-top: clamp(36px, 5vw, 64px);
}

.pins {
  display: grid;
  gap: 22px;
  justify-self: start;
  max-width: 30em;
  padding: 0;
  list-style: none;
}

.pin {
  position: relative;
  padding-left: 26px;
}

.pin::before {
  content: "";
  position: absolute;
  top: 0.42em;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orange);
}

.pin p {
  margin-top: 4px;
  color: var(--slate);
  font-size: 1rem;
}

@media (min-width: 1000px) {
  .anatomy {
    --pw: 340px;
    --lead: clamp(56px, 5.5vw, 76px);
    grid-template-columns: minmax(0, 1fr) var(--pw) minmax(0, 1fr);
    gap: 0;
    justify-items: stretch;
  }

  .anatomy .phone {
    grid-row: 1;
    grid-column: 2;
  }

  .pins {
    display: contents;
  }

  .pin {
    --reach: calc(var(--pw) * (0.024 + var(--rx) * 0.952));
    grid-row: 1;
    align-self: start;
    width: min(100%, 23rem);
    margin-top: calc(var(--pw) * (0.024 + var(--y) * 2.068) - 0.73rem);
    padding-left: 0;
  }

  .pin::before {
    top: calc(0.73rem - 7px);
    width: 14px;
    height: 14px;
    border: 2px solid var(--paper);
  }

  .pin::after {
    content: "";
    position: absolute;
    top: calc(0.73rem - 1px);
    width: calc(var(--lead) - 14px + var(--reach));
    height: 2px;
    background: var(--orange);
  }

  .pin-l {
    grid-column: 1;
    justify-self: end;
    padding-right: var(--lead);
    text-align: right;
  }

  .pin-l::before {
    left: calc(100% + var(--reach) - 7px);
  }

  .pin-l::after {
    left: calc(100% - var(--lead) + 14px);
  }

  .pin-r {
    grid-column: 3;
    justify-self: start;
    padding-left: var(--lead);
  }

  .pin-r::before {
    right: calc(100% + var(--reach) - 7px);
    left: auto;
  }

  .pin-r::after {
    right: calc(100% - var(--lead) + 14px);
  }
}

/* Chart styles: three words are the control, and the picked one points at
   the phone. The radios stay in the tab order; their labels are what shows. */

.styles {
  position: relative;
  display: grid;
  gap: 40px;
  justify-items: start;
  overflow: clip;
}

.pick {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.words {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
}

.words label {
  position: relative;
  color: var(--dusk-dim);
  font-size: clamp(3rem, 1.4rem + 7vw, 7.5rem);
  font-stretch: 68%;
  font-weight: 800;
  line-height: 0.95;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.words label:hover {
  color: var(--dusk);
}

.pick-1:checked ~ .styles-copy .opt-1,
.pick-2:checked ~ .styles-copy .opt-2,
.pick-3:checked ~ .styles-copy .opt-3 {
  color: var(--paper);
  box-shadow: inset 0 -0.07em 0 var(--orange);
}

.pick-1:focus-visible ~ .styles-copy .opt-1,
.pick-2:focus-visible ~ .styles-copy .opt-2,
.pick-3:focus-visible ~ .styles-copy .opt-3 {
  outline: 3px solid var(--paper);
  outline-offset: 6px;
  border-radius: 4px;
}

.styles .phone {
  justify-self: center;
}

/* The first capture holds the phone's height; the others lie over it. */
.shot {
  display: block;
  opacity: 0;
  visibility: hidden;
}

.shot + .shot {
  position: absolute;
  inset: 0 0 auto;
}

.pick-1:checked ~ .phone .shot-1,
.pick-2:checked ~ .phone .shot-2,
.pick-3:checked ~ .phone .shot-3 {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1000px) {
  .styles {
    --pw: 340px;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 96px;
    align-items: end;
  }

  .styles-copy {
    padding-bottom: var(--block);
  }

  .styles .phone {
    --cut: 1.78;
  }

  .words {
    flex-direction: column;
    align-items: flex-start;
  }

  /* The underline becomes a quill that runs to the phone. */
  .pick-1:checked ~ .styles-copy .opt-1,
  .pick-2:checked ~ .styles-copy .opt-2,
  .pick-3:checked ~ .styles-copy .opt-3 {
    box-shadow: none;
  }

  .pick-1:checked ~ .styles-copy .opt-1::before,
  .pick-2:checked ~ .styles-copy .opt-2::before,
  .pick-3:checked ~ .styles-copy .opt-3::before {
    content: "";
    position: absolute;
    top: calc(52% - 9px);
    left: calc(100% + 24px);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--orange);
  }

  .pick-1:checked ~ .styles-copy .opt-1::after,
  .pick-2:checked ~ .styles-copy .opt-2::after,
  .pick-3:checked ~ .styles-copy .opt-3::after {
    content: "";
    position: absolute;
    top: calc(52% - 1.5px);
    left: calc(100% + 40px);
    width: 100vw;
    height: 3px;
    background: var(--orange);
  }
}

/* Replays and projects: two phones standing on the block's bottom edge. */

.also {
  display: grid;
  gap: 40px;
}

.also-notes {
  display: grid;
  gap: 22px;
  max-width: 26em;
  margin-top: 28px;
}

.also-notes p {
  margin-top: 4px;
  color: var(--slate);
  font-size: 1rem;
}

.duo {
  --pw: min(41vw, 290px);
  display: flex;
  gap: calc(var(--pw) * 0.09);
  align-items: flex-start;
  justify-content: center;
  height: calc(var(--pw) * 1.86);
  overflow: hidden;
}

.duo .phone + .phone {
  margin-top: calc(var(--pw) * 0.3);
}

@media (min-width: 1000px) {
  .also {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 80px;
    align-items: end;
  }

  .also-copy {
    padding-bottom: var(--block);
  }
}

/* Connecting: a real sequence, so it is numbered. */

.connect {
  display: grid;
  gap: 40px;
}

.connect .phone {
  justify-self: center;
}

.steps {
  display: grid;
  gap: 26px;
  max-width: 34em;
  margin-top: 40px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  font-size: 3.25rem;
  font-stretch: 68%;
  font-weight: 800;
  line-height: 0.86;
}

.steps p {
  margin-top: 4px;
  color: var(--slate);
  font-size: 1rem;
}

@media (min-width: 1000px) {
  .connect {
    --pw: 340px;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 80px;
    align-items: end;
  }

  .connect-copy {
    padding-bottom: var(--block);
  }

  .connect .phone {
    --cut: 1.62;
  }
}

/* Key and data: a table, because it is one. */

.ledger {
  width: 100%;
  max-width: 60rem;
  margin-top: clamp(32px, 4vw, 56px);
  border-collapse: collapse;
  border-bottom: 2px solid var(--ink);
}

.ledger th,
.ledger td {
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.ledger thead th {
  padding-block: 0 10px;
  border-top: 0;
  color: var(--slate);
  font-size: 0.9375rem;
  font-weight: 600;
}

.ledger tbody tr:first-child th,
.ledger tbody tr:first-child td {
  border-top: 2px solid var(--ink);
}

.ledger tbody th {
  width: 15em;
  padding-right: 32px;
  font-weight: 700;
}

.more {
  margin-top: 24px;
  font-weight: 600;
}

@media (max-width: 639px) {
  .ledger thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .ledger tbody,
  .ledger tr,
  .ledger tbody th,
  .ledger td {
    display: block;
    width: auto;
  }

  .ledger tr {
    padding-block: 18px;
    border-top: 1px solid var(--rule);
  }

  .ledger tbody tr:first-child {
    border-top: 2px solid var(--ink);
  }

  .ledger tbody th,
  .ledger td,
  .ledger tbody tr:first-child th,
  .ledger tbody tr:first-child td {
    padding: 0;
    border-top: 0;
  }

  .ledger td {
    margin-top: 4px;
  }
}

/* Questions. */

.qa {
  display: grid;
  gap: 28px 72px;
  margin-top: clamp(32px, 4vw, 56px);
}

.qa p {
  max-width: 34em;
  margin-top: 6px;
  color: var(--slate);
  font-size: 1rem;
}

@media (min-width: 800px) {
  .qa {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The bottom: the same orange, the same two buttons. Shared by every page. */

.foot {
  padding-block: var(--block) 36px;
  background: var(--orange);
}

.foot-get {
  display: grid;
  gap: 28px;
}

.foot-lede {
  max-width: 24em;
  margin-top: 16px;
  font-size: 1.125rem;
  font-weight: 500;
}

.foot-end {
  display: grid;
  gap: 20px;
  margin-top: clamp(48px, 7vw, 96px);
  padding-top: 20px;
  border-top: 2px solid var(--ink);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.footer-note {
  max-width: 34em;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 0;
  font-weight: 600;
  list-style: none;
}

@media (min-width: 900px) {
  .foot-get {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 64px;
    align-items: end;
  }

  .foot-end {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 64px;
  }
}

/* The legal pages and the 404 page open with a short orange bar. */

.bar {
  background: var(--orange);
}

.bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 18px;
}

.brand {
  display: block;
}

.brand img {
  width: auto;
  height: 26px;
}

.bar-link {
  font-size: 0.9375rem;
  font-weight: 600;
}

.foot-plain {
  padding-top: 0;
}

.foot-plain .foot-end {
  margin-top: 0;
  padding-top: 28px;
  border-top: 0;
}

/*
  The two legal pages. Their <main> is kept exactly as it was reviewed, class
  names included, so these rules dress the old names: "hero" here is a legal
  page's title block.
*/

.legal main {
  width: min(100% - 2 * var(--gutter), 1200px);
  margin-inline: auto;
  padding-block: clamp(32px, 5vw, 72px) var(--block);
}

.hero {
  max-width: 44rem;
}

.eyebrow {
  color: var(--slate);
  font-size: 0.9375rem;
  font-weight: 600;
}

.hero h1 {
  margin-top: 8px;
  font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);
  font-stretch: 68%;
  font-weight: 800;
  line-height: 0.95;
}

.hero p {
  margin-top: 20px;
  color: var(--slate);
  font-size: 1.125rem;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin-top: 24px;
}

.meta-chip {
  color: var(--slate);
  font-size: 0.9375rem;
}

.policy-layout {
  display: grid;
  gap: 40px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 2px solid var(--ink);
}

.toc h2 {
  max-width: none;
  font-size: 0.9375rem;
  font-stretch: 100%;
  font-weight: 700;
  line-height: 1.5;
}

.toc ol {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-left: 1.75em;
  color: var(--slate);
  font-size: 0.9375rem;
}

.toc a {
  text-decoration: none;
}

.toc a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.policy-grid {
  max-width: 42rem;
}

.policy-section {
  padding-block: 32px;
  border-top: 1px solid var(--rule);
}

.policy-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.policy-section:last-child {
  padding-bottom: 0;
}

.policy-section h2 {
  max-width: none;
  font-size: 1.75rem;
  line-height: 1.1;
  text-wrap: wrap;
}

.policy-section h3 {
  margin-top: 28px;
  font-size: 1.0625rem;
}

.policy-section p,
.policy-section ul {
  margin-top: 12px;
}

.policy-section ul {
  display: grid;
  gap: 8px;
  padding-left: 1.25em;
}

.callout {
  margin-top: 16px;
  padding-left: 16px;
  border-left: 3px solid var(--orange);
  font-weight: 600;
}

.footer-card {
  max-width: 42rem;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  color: var(--slate);
  font-size: 0.9375rem;
}

@media (min-width: 900px) {
  .policy-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 64px;
  }

  .toc {
    position: sticky;
    top: 24px;
    align-self: start;
  }
}

/* The 404 page: the whole page is the orange field. */

.lost-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--orange);
}

.lost {
  flex: 1;
  padding-block: clamp(40px, 10vw, 120px);
}

.lost h1 {
  max-width: 10em;
  font-size: clamp(3rem, 1.6rem + 7vw, 7.5rem);
  font-stretch: 68%;
  font-weight: 800;
  line-height: 0.92;
}

.lost p {
  max-width: 28em;
  margin-top: 20px;
  font-size: 1.125rem;
  font-weight: 500;
}

/* Motion: the quills stand up once, and a picked capture fades in. */

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

  .quills i {
    animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--i) * 22ms + 120ms);
  }

  .shot {
    transition:
      opacity 0.2s ease,
      visibility 0.2s;
  }
}

@keyframes rise {
  from {
    height: 0;
    opacity: 0;
  }
}