/*  The leaflet, on the web.
 *
 *  The same sheet, in the same order, in the same words as the one folded
 *  under the machine -- Sources/SamaticPhone/LeafletPrint.swift is where the
 *  copy is written and it is the version that ships. These pages are the copy
 *  the App Store requires to exist at a URL, and the two are meant to read as
 *  one document.
 *
 *  So it is set as a piece of paper rather than as a web page: one column, one
 *  typeface, a rule under each heading, and nothing on it that could not have
 *  come off a press in 1972. The app is grayscale except the photograph, and so
 *  is this.
 *
 *  ONE stylesheet for all four pages, rather than the same block of CSS pasted
 *  into each of them. Four copies of a shell cannot be kept identical by
 *  intention; one file cannot drift at all.
 *
 *  Nothing is fetched. No font file, no script, no analytics, no third party.
 *  Samatic's type is Helvetica Neue, which every device that will read this
 *  already has -- and a privacy policy that phones a CDN to render itself is a
 *  joke at its own expense.
 */

:root { color-scheme: light dark; }

html {
  background: #6f6f6f;             /* the bench the leaflet is lying on */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 5vh 16px 12vh;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex;
  justify-content: center;
}

/* The sheet. Ink.paper is white 0.855; this is that, warmed a shade the way
   forty-year-old stock is. */
main {
  background: #dad6ce;
  color: #17150f;                  /* Ink.press */
  max-width: 41rem;
  width: 100%;
  padding: clamp(1.75rem, 6vw, 3.5rem);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 18px 46px rgba(0, 0, 0, .38);
}

header { margin-bottom: 1.25rem; }

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

h1 {
  font-size: clamp(1.35rem, 6vw, 1.6rem);
  font-weight: 800;
  letter-spacing: .22em;
  margin: 0;
}

.model {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  opacity: .78;
}

.sub {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  margin: .35rem 0 0;
  opacity: .82;
}

header hr { margin-top: .6rem; }

h2 {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .17em;
  margin: 2.25rem 0 .4rem;
}

h2 + hr { margin-bottom: .9rem; }

/* A rule laid down by a press, not a border drawn by a browser. */
hr {
  border: 0;
  height: 1px;
  background: currentColor;
  opacity: .48;
  margin: .4rem 0;
}

hr.thick { height: 1.6px; opacity: .78; }

p {
  font-size: 1rem;
  line-height: 1.62;
  margin: 0 0 .9rem;
  max-width: 34rem;                /* a measure, not a window width */
}

a { color: inherit; text-underline-offset: .18em; }

nav {
  margin: .9rem 0 0;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
}

nav a { margin-right: 1.1rem; display: inline-block; }
nav a[aria-current] { text-decoration: none; opacity: .55; }

/* The foot of the sheet: the form number at one end, the imprint at the other,
   exactly as the leaflet sets it -- and stacked rather than truncated when
   there is not the width for both. */
footer {
  margin-top: 2.4rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem 1rem;
  flex-wrap: wrap;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  opacity: .72;
}

footer hr { margin-bottom: .55rem; width: 100%; }

/* A dark room does not turn paper black. It turns the light down on it. */
@media (prefers-color-scheme: dark) {
  html { background: #131313; }
  main {
    background: #b9b4ab;
    color: #14120e;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 18px 46px rgba(0, 0, 0, .55);
  }
}