/* ==========================================================================
   NavOfficer website. One stylesheet for every page.
   --------------------------------------------------------------------------
   This replaces the two that came before it. home.css carried the redesigned
   home page and site.css carried the rest, which meant the legal and support
   pages were still wearing the design that was rejected. One system now.

   What the system is.

   Bands.   The page alternates between deep navy and chart paper. The rhythm
            is the structure; there are almost no boxes.
   Rules.   Structure comes from typography, spacing and hairlines.
   Type.    Source Serif 4 for headings and editorial prose, Instrument Sans
            for body, interface and the product name, IBM Plex Mono for genuine
            figures only. The three jobs never overlap.
   Colour.  Navy and cyan are the anchors. Cyan is for links, focus and small
            functional marks, never for filling borders and labels. Amber
            appears once per page at most, for release status.
   Corners. Nothing is rounded. The largest radius in the system is zero.

   Screenshots are the untouched files from the release binary. Where less than
   a whole screen is shown the crop is done here, in CSS, stated as an aspect
   ratio and an offset measured against the 1170 x 2532 source.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts --- */

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/SourceSerif4-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/InstrumentSans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens --- */

:root {
  --navy: #0a1a2e;
  --navy-2: #102540;
  --navy-rule: #1e3450;
  --app-navy: #0b1f2a; /* the application's own background */

  --paper: #f5f0e4;
  --paper-rule: #ded6c6;
  --paper-grid: #f0eadd;
  --paper-leader: #c3b8a4;

  --on-navy: #eef3f7; /* 15.8 */
  --on-navy-2: #8fa0af; /* 6.51 */
  --on-paper: #0a1a2e; /* 15.4 */
  --on-paper-2: #3a4a5c; /* 7.98 */

  --label-navy: #6e8da8; /* 5.03 */
  --label-paper: #675e4f; /* 5.61 */
  --figure-paper: #58697c; /* 4.96 */

  --cyan: #3ba3c4;
  --cyan-hi: #57bedd; /* links on navy, 8.18 */
  --cyan-ink: #17607a; /* links on paper, 6.17 */
  --amber: #c08a45; /* status on navy, 5.80 */
  --amber-ink: #8a5a1c; /* status on paper, 5.19 */

  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Arial, sans-serif;
  --serif: "Source Serif 4", Iowan Old Style, Charter, Georgia, "Times New Roman",
    serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  --shell: 1080px;
  --measure: 68ch;
}

/* ---------------------------------------------------------------- reset --- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* So an anchor never lands under the fixed masthead. */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--on-navy);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.005em;
}

p,
ul,
ol,
dl,
dd {
  margin: 0;
}

a {
  color: var(--cyan-hi);
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 80;
  background: var(--cyan);
  color: #06212c;
  padding: 0.75rem 1.1rem;
  font-weight: 600;
}

.skip:focus {
  left: 0;
}

/* --------------------------------------------------------------- bands --- */

.band--paper {
  background: var(--paper);
  color: var(--on-paper);
  background-image: linear-gradient(var(--paper-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
}

.band--paper h1,
.band--paper h2,
.band--paper h3 {
  color: var(--on-paper);
}

.band--paper a {
  color: var(--cyan-ink);
}

.band--app {
  background: var(--app-navy);
}

/* ------------------------------------------------------------- masthead --- */

/* Fixed, because these pages are long and the way back should not depend on
   how far you have scrolled. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  border-bottom: 1px solid var(--navy-rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 68px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  color: var(--on-navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
}

.wordmark img {
  width: 30px;
  height: 30px;
}

.mainnav {
  margin-left: auto;
  display: flex;
  gap: 1.4rem;
}

.mainnav a {
  color: var(--on-navy-2);
  text-decoration: none;
  font-size: 0.97rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 2px solid transparent;
}

.mainnav a:hover {
  color: var(--on-navy);
}

/* The current page names itself, so you always know where you are. */
.mainnav a[aria-current="page"] {
  color: var(--on-navy);
  border-bottom-color: var(--cyan);
}

.navtoggle {
  display: none;
  margin-left: auto;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  padding: 0 0.8rem;
  background: transparent;
  color: var(--on-navy);
  border: 1px solid var(--navy-rule);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

/* -------------------------------------------------------------- section --- */

.section {
  padding-block: clamp(3.25rem, 7vw, 5.25rem);
}

.section--tight {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.section__label {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--label-navy);
  margin-bottom: 0.75rem;
}

.band--paper .section__label {
  color: var(--label-paper);
}

.section h2 {
  font-size: clamp(1.45rem, 2.5vw, 1.9rem);
  max-width: 26ch;
}

.section__intro {
  margin-top: 0.9rem;
  max-width: 58ch;
  color: var(--on-navy-2);
}

.band--paper .section__intro {
  color: var(--on-paper-2);
}

.section__fine {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: var(--on-navy-2);
  max-width: 58ch;
}

.band--paper .section__fine {
  color: var(--on-paper-2);
}

/* ------------------------------------------------------------- controls --- */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 2.25rem;
}

.action {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.3rem;
  background: var(--cyan);
  color: #06212c;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid var(--cyan);
}

.action:hover {
  background: #4fb4d4;
  border-color: #4fb4d4;
  color: #06212c;
}

.band--paper .action {
  background: var(--on-paper);
  border-color: var(--on-paper);
  color: var(--paper);
}

.band--paper .action:hover {
  background: #16304d;
  border-color: #16304d;
  color: var(--paper);
}

.textlink {
  color: var(--cyan-hi);
  text-decoration: none;
  font-size: 0.99rem;
  border-bottom: 1px solid rgba(87, 190, 221, 0.4);
  padding-bottom: 2px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.textlink:hover {
  border-bottom-color: var(--cyan-hi);
}

.band--paper .textlink {
  color: var(--cyan-ink);
  border-bottom-color: rgba(23, 96, 122, 0.4);
}

/* Status, not a control. The app is not released, so nothing here may look
   pressable. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.97rem;
  color: var(--amber);
}

.band--paper .status {
  color: var(--amber-ink);
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  background: currentColor;
  flex: none;
}

/* ---------------------------------------------------------- screenshots --- */

/* A window onto the screenshot. The image keeps its own pixels; the frame only
   decides how much of the screen is shown. */
.shot {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--navy-rule);
  background: var(--app-navy);
}

.band--paper .shot {
  border-color: #cbc0ac;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* Horizon and light visibility, inputs through to the result. Rows 95 to 2160. */
.shot--result {
  aspect-ratio: 1170 / 2065;
}
.shot--result img {
  margin-top: -8.12%;
}

/* The working alone: both formulas and the line that decides. Rows 1080 to 1700. */
.shot--working {
  aspect-ratio: 1170 / 620;
}
.shot--working img {
  margin-top: -92.31%;
}

/* Settings, header through the theme control. Rows 95 to 820. */
.shot--theme {
  aspect-ratio: 1170 / 725;
}
.shot--theme img {
  margin-top: -8.12%;
}

/* Home, from below the status bar, used bleeding so no height is set. */
.shot--home img {
  margin-top: -8.12%;
}

.shot__caption {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: var(--on-navy-2);
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.band--paper .shot__caption {
  color: var(--label-paper);
}

.shot__figure {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--figure-paper);
  flex: none;
}

/* ----------------------------------------------------------------- hero --- */

.hero {
  padding-block: clamp(3rem, 6vw, 4.75rem) clamp(3.5rem, 7vw, 5.25rem);
}

.hero__eyebrow {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--label-paper);
  margin-bottom: 0.9rem;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--on-paper);
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  max-width: 19ch;
  letter-spacing: -0.008em;
}

.hero__body {
  color: var(--on-paper-2);
  font-size: 1.12rem;
  max-width: 52ch;
  margin-top: 1.2rem;
}

.hero__plate {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--paper-rule);
}

.hero .actions {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--paper-rule);
}

/* ------------------------------------------------------------ page head --- */

.pagehead {
  padding-block: clamp(2.5rem, 5vw, 3.75rem) clamp(1.5rem, 3vw, 2.25rem);
}

.pagehead h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  max-width: 20ch;
}

.pagehead__intro {
  margin-top: 1rem;
  max-width: 56ch;
  color: var(--on-navy-2);
  font-size: 1.09rem;
}

.stamp {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--on-navy-2);
  margin-top: 0.75rem;
}

/* ------------------------------------------------------- product detail --- */

/* Copy beside one screenshot. Used where the point is the app itself. */
.detail {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .detail {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 4rem;
  }
  .detail--wide {
    grid-template-columns: minmax(0, 1fr) 440px;
  }
}

/* --------------------------------------------------------------- points --- */

.points {
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

.points > li {
  padding-block: 1.4rem;
  border-top: 1px solid var(--navy-rule);
  display: grid;
  gap: 0.35rem 2.5rem;
}

.points > li:last-child {
  border-bottom: 1px solid var(--navy-rule);
}

.points h3 {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--on-navy);
}

.points p {
  color: var(--on-navy-2);
  max-width: 62ch;
}

@media (min-width: 800px) {
  .points > li {
    grid-template-columns: 15rem 1fr;
    align-items: baseline;
  }
}

/* ------------------------------------------------------------- contents --- */

.contents {
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2.75rem 4rem;
}

.cat__head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  font-family: var(--serif);
  font-size: 1.24rem;
  font-weight: 600;
  color: var(--on-paper);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--paper-rule);
}

.cat__name {
  white-space: nowrap;
}

.cat__leader {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 2px dotted var(--paper-leader);
  transform: translateY(-0.32em);
}

.cat__count {
  font-family: var(--mono);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--figure-paper);
}

.cat__list {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.cat__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 0.5rem;
  font-size: 1.01rem;
  color: var(--on-paper-2);
}

.tier {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--label-paper);
  flex: none;
  letter-spacing: 0.01em;
}

@media (min-width: 820px) {
  .contents {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }
}

/* --------------------------------------------------------------- themes --- */

.themes {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
  padding: 0;
  list-style: none;
}

.themes h3 {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 0.35rem;
}

.themes p {
  color: var(--on-navy-2);
  font-size: 0.97rem;
}

.themes .shot {
  margin-bottom: 1rem;
}

@media (min-width: 800px) {
  .themes {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem;
  }
}

/* ------------------------------------------------------------------ pro --- */

.tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 4rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--navy-rule);
}

.tier__figure {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--on-navy);
  display: block;
  line-height: 1.2;
}

.tier__label {
  font-size: 0.94rem;
  color: var(--on-navy-2);
}

/* ----------------------------------------------------------------- note --- */

.note {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--paper-rule);
  max-width: 40rem;
}

.note p {
  font-family: var(--serif);
  font-size: 1.14rem;
  line-height: 1.68;
  color: var(--on-paper-2);
  margin-bottom: 1.1rem;
}

.note p:first-of-type {
  color: var(--on-paper);
}

.note__sig {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--label-paper);
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--paper-rule);
}

/* ------------------------------------------------------- standing note --- */

/* A caveat that is true before anything has gone wrong. Deliberately quiet and
   not a warning: it renders always, and a caution colour that fires every time
   means nothing on the day something has actually happened. */
.caveat {
  border-top: 1px solid var(--navy-rule);
  padding-top: 1.75rem;
  max-width: 72ch;
  color: var(--on-navy-2);
  font-size: 0.97rem;
}

.caveat strong {
  color: var(--on-navy);
  font-weight: 600;
}

/* ---------------------------------------------------------------- prose --- */

.prose {
  max-width: var(--measure);
}

.prose h2 {
  font-size: 1.35rem;
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
  scroll-margin-top: 6rem;
}

.prose h2:first-of-type {
  margin-top: 0;
}

.prose p {
  margin-bottom: 1.15rem;
  color: var(--on-navy-2);
}

.band--paper .prose p {
  color: var(--on-paper-2);
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose strong {
  color: var(--on-navy);
  font-weight: 600;
}

.band--paper .prose strong {
  color: var(--on-paper);
}

/* ------------------------------------------------------------------ toc --- */

/* Long documents get a contents list. Two of these pages are legal text that
   people arrive at looking for one specific paragraph. */
.toc {
  margin-top: 2rem;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--navy-rule);
}

.toc__title {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--label-navy);
  margin-bottom: 0.9rem;
}

.toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.15rem;
  counter-reset: toc;
}

.toc li {
  counter-increment: toc;
}

.toc a {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  min-height: 44px;
  padding-block: 0.35rem;
  color: var(--on-navy-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.toc a:hover {
  color: var(--on-navy);
}

.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--label-navy);
  flex: none;
}

@media (min-width: 720px) {
  .toc ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
  }
}

/* ------------------------------------------------------------- question --- */

/* Support answers. A description list rather than a grid of cards: these are
   questions with answers, and that is what a description list is for. */
.qa {
  margin-top: 2.25rem;
  border-top: 1px solid var(--navy-rule);
}

.qa > div {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--navy-rule);
  display: grid;
  gap: 0.4rem 2.5rem;
}

.qa dt {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--on-navy);
}

.qa dd {
  color: var(--on-navy-2);
  max-width: 62ch;
}

@media (min-width: 800px) {
  .qa > div {
    grid-template-columns: 16rem 1fr;
    align-items: baseline;
  }
}

/* -------------------------------------------------------------- contact --- */

.contact {
  margin-top: 2.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--navy-rule);
  border-bottom: 1px solid var(--navy-rule);
}

.contact__label {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--label-navy);
  margin-bottom: 0.35rem;
}

.contact__address {
  font-family: var(--mono);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--cyan-hi);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid rgba(87, 190, 221, 0.4);
}

.contact__address:hover {
  border-bottom-color: var(--cyan-hi);
}

/* ------------------------------------------------------------------ 404 --- */

.gone {
  padding-block: clamp(3.5rem, 10vw, 7rem);
  max-width: 54ch;
}

.gone h1 {
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  margin-bottom: 1.1rem;
}

.gone p {
  color: var(--on-navy-2);
  font-size: 1.09rem;
}

/* --------------------------------------------------------------- footer --- */

.footer {
  border-top: 1px solid var(--navy-rule);
  padding-block: 2.5rem 3rem;
  font-size: 0.94rem;
  color: var(--on-navy-2);
}

.footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer__links a {
  color: var(--on-navy-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer__links a:hover {
  color: var(--on-navy);
}

.footer__fine {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--navy-rule);
  max-width: var(--measure);
}

/* ---------------------------------------------------------- breakpoints --- */

@media (max-width: 767px) {
  .mainnav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding-bottom: 0.5rem;
  }
  .mainnav.is-open {
    display: flex;
  }
  .mainnav a {
    width: 100%;
    border-bottom: 1px solid var(--navy-rule);
  }
  .masthead__inner {
    flex-wrap: wrap;
  }
  .navtoggle {
    display: inline-flex;
  }
  .cat__name {
    white-space: normal;
  }
  /* Leader dots need a run of space to read as leaders. In a narrow column
     they collapse to a stub, so the count simply sits at the right. */
  .cat__leader {
    display: none;
  }
  .cat__head {
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}