@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/CormorantGaramond-SemiBold.4c364444b4.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20-7E, U+A0-B4, U+B6-FF, U+131, U+152-153, U+2013, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/CormorantGaramond-MediumItalic.abf8f77cda.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+20-7E, U+A0-B4, U+B6-FF, U+131, U+152-153, U+2013, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/CormorantGaramond-BoldItalic.a93901da64.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+20-7E, U+A0-B4, U+B6-FF, U+131, U+152-153, U+2013, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122;
}

/* W1: abstractmood.com. The app's two languages on its gouache paper: the painting's (Cormorant Garamond, .serif) for the
   name, the tagline, the story and the titles; the menu's (the system font, San Francisco on Apple's devices) for
   everything practical. Light only, no motion, no scripts. build.py puts the @font-face rules (from fonts/fonts.json)
   above this and the content-hashed names of the pictures in place of their asset tokens. */

:root {
  color-scheme: light;
  /* the paper's mean (build.py checks it against img/pictures.json, the paper picture's own mean) */
  --paper: #F1EDE4;
  /* graphite 8.0:1 and the secondary ink 4.7:1 on the paper's mean (4.5:1 on its darkest grain) */
  --ink: #4A463F;
  --ink-2: #6E685F;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  /* one type scale (about 1.2 a step) and one spacing scale */
  --t-small: 0.875rem;
  --t-body: 1.0625rem;
  --t-head: 1.25rem;
  --t-story: 1.5rem;
  --t-tagline: 1.8125rem;
  --t-title: 2.1875rem;
  --t-name: 2.625rem;
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --column: 34em;
  --gutter: 1.25rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper) url("/img/paper.e12925f2df.jpg") repeat 0 0 / 320px 320px;
}

body {
  margin: 0;
  color: var(--ink);
  font: 400 var(--t-body) / 1.55 var(--sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

p { margin: 0; }

/* short lines and titles break into balanced lines (no word left alone on the last one) */
.tagline, .story p, .facts p, .title, .foot p, .missing p { text-wrap: balance; }

.serif { font-family: var(--serif); }

/* the skip link: out of sight until focused */
.skip {
  position: absolute;
  left: var(--gutter);
  top: calc(-1 * var(--s8));
  padding: var(--s2) var(--s4);
  background: var(--paper);
  z-index: 1;
}
.skip:focus { top: var(--s4); }

/* one centred column */
.column {
  width: 100%;
  max-width: calc(var(--column) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* the story's lines are longer than the text column's measure: each keeps one line wherever the screen allows */
.column.wide { max-width: calc(46rem + 2 * var(--gutter)); }

/* the home page: icon, name, tagline, painting, story, practical lines, the App Store line, links */
.home { padding-top: var(--s7); text-align: center; }
.icon {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--s5);
  border-radius: 22.5%;
}
.name {
  margin: 0;
  font-weight: 600;
  font-size: var(--t-name);
  line-height: 1.1;
  letter-spacing: 0.005em;
}
.tagline {
  margin-top: var(--s3);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-tagline);
  line-height: 1.2;
}
.tagline b { font-weight: 700; }

/* the painting: the column's width on phones (the screen's), at most 560 px; it fades into the paper as the app's paint
   screen does (top 5%, bottom 8%, the curve of its own fade), and at the sides (4%) once the paper shows beside it */
.painting {
  width: 100%;
  max-width: 560px;
  margin: var(--s6) auto 0;
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.043) 0.625%, rgb(0 0 0 / 0.156) 1.25%, rgb(0 0 0 / 0.316) 1.875%, rgb(0 0 0 / 0.5) 2.5%, rgb(0 0 0 / 0.684) 3.125%, rgb(0 0 0 / 0.844) 3.75%, rgb(0 0 0 / 0.957) 4.375%, rgb(0 0 0) 5%, rgb(0 0 0) 92%, rgb(0 0 0 / 0.957) 93%, rgb(0 0 0 / 0.844) 94%, rgb(0 0 0 / 0.684) 95%, rgb(0 0 0 / 0.5) 96%, rgb(0 0 0 / 0.316) 97%, rgb(0 0 0 / 0.156) 98%, rgb(0 0 0 / 0.043) 99%, rgb(0 0 0 / 0) 100%);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.043) 0.625%, rgb(0 0 0 / 0.156) 1.25%, rgb(0 0 0 / 0.316) 1.875%, rgb(0 0 0 / 0.5) 2.5%, rgb(0 0 0 / 0.684) 3.125%, rgb(0 0 0 / 0.844) 3.75%, rgb(0 0 0 / 0.957) 4.375%, rgb(0 0 0) 5%, rgb(0 0 0) 92%, rgb(0 0 0 / 0.957) 93%, rgb(0 0 0 / 0.844) 94%, rgb(0 0 0 / 0.684) 95%, rgb(0 0 0 / 0.5) 96%, rgb(0 0 0 / 0.316) 97%, rgb(0 0 0 / 0.156) 98%, rgb(0 0 0 / 0.043) 99%, rgb(0 0 0 / 0) 100%);
}
@media (min-width: 561px) {
  .painting {
    -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.043) 0.625%, rgb(0 0 0 / 0.156) 1.25%, rgb(0 0 0 / 0.316) 1.875%, rgb(0 0 0 / 0.5) 2.5%, rgb(0 0 0 / 0.684) 3.125%, rgb(0 0 0 / 0.844) 3.75%, rgb(0 0 0 / 0.957) 4.375%, rgb(0 0 0) 5%, rgb(0 0 0) 92%, rgb(0 0 0 / 0.957) 93%, rgb(0 0 0 / 0.844) 94%, rgb(0 0 0 / 0.684) 95%, rgb(0 0 0 / 0.5) 96%, rgb(0 0 0 / 0.316) 97%, rgb(0 0 0 / 0.156) 98%, rgb(0 0 0 / 0.043) 99%, rgb(0 0 0 / 0) 100%),
      linear-gradient(to right, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.156) 1%, rgb(0 0 0 / 0.5) 2%, rgb(0 0 0 / 0.844) 3%, rgb(0 0 0) 4%, rgb(0 0 0) 96%, rgb(0 0 0 / 0.844) 97%, rgb(0 0 0 / 0.5) 98%, rgb(0 0 0 / 0.156) 99%, rgb(0 0 0 / 0) 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.043) 0.625%, rgb(0 0 0 / 0.156) 1.25%, rgb(0 0 0 / 0.316) 1.875%, rgb(0 0 0 / 0.5) 2.5%, rgb(0 0 0 / 0.684) 3.125%, rgb(0 0 0 / 0.844) 3.75%, rgb(0 0 0 / 0.957) 4.375%, rgb(0 0 0) 5%, rgb(0 0 0) 92%, rgb(0 0 0 / 0.957) 93%, rgb(0 0 0 / 0.844) 94%, rgb(0 0 0 / 0.684) 95%, rgb(0 0 0 / 0.5) 96%, rgb(0 0 0 / 0.316) 97%, rgb(0 0 0 / 0.156) 98%, rgb(0 0 0 / 0.043) 99%, rgb(0 0 0 / 0) 100%),
      linear-gradient(to right, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.156) 1%, rgb(0 0 0 / 0.5) 2%, rgb(0 0 0 / 0.844) 3%, rgb(0 0 0) 4%, rgb(0 0 0) 96%, rgb(0 0 0 / 0.844) 97%, rgb(0 0 0 / 0.5) 98%, rgb(0 0 0 / 0.156) 99%, rgb(0 0 0 / 0) 100%);
    mask-composite: intersect;
  }
}

.story {
  margin-top: var(--s6);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-story);
  line-height: 1.3;
}
.story p + p { margin-top: var(--s3); }

.facts { margin-top: var(--s6); }
.facts p + p { margin-top: var(--s1); }

.soon {
  margin-top: var(--s6);
  color: var(--ink-2);
  font-size: var(--t-small);
}

.links { margin-top: var(--s5); }

.dot {
  display: inline-block;
  margin: 0 var(--s2);
  color: var(--ink-2);
}
/* where the footer's five links don't fit on one line (phones, or larger text), they take two: the break replaces the dot
   between Terms and Acknowledgments, so no line begins or ends with a dot */
@media (max-width: 30em) {
  .dot.break {
    display: block;
    height: 0;
    overflow: hidden;
  }
}

/* the other pages: the app's name (home), the title, the text */
.masthead { padding-top: var(--s6); text-align: center; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-weight: 600;
  font-size: var(--t-story);
  line-height: 1;
  text-decoration: none;
}
.brand:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.brand img {
  width: 40px;
  height: 40px;
  border-radius: 22.5%;
}

.title {
  margin: var(--s6) 0 0;
  text-align: center;
  font-weight: 600;
  font-size: var(--t-title);
  line-height: 1.15;
}

.text h2 {
  margin: var(--s6) 0 var(--s2);
  font-weight: 600;
  font-size: var(--t-head);
  line-height: 1.3;
}
.text p + p { margin-top: var(--s4); }
.text .lead { margin-top: var(--s5); }

/* a document: its date line under its title (centred, as in the app), the short version in a well (the menu's sunken
   well: an inner shadow and a fine line) */
.date {
  margin-top: var(--s2);
  text-align: center;
  color: var(--ink-2);
  font-size: var(--t-small);
}
.well {
  margin: var(--s5) 0 0;
  padding: var(--s4) var(--s5);
  border-radius: 16px;
  background: rgb(74 70 63 / 0.035);
  box-shadow: inset 0 1.5px 3px rgb(60 45 30 / 0.22), inset 0 0 0 0.5px rgb(60 45 30 / 0.2);
}
.well h2 { margin-top: 0; font-size: var(--t-body); }
.well p + p { margin-top: var(--s2); }
.note {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid rgb(74 70 63 / 0.15);
}

/* the press facts */
.facts-list { margin: var(--s4) 0 0; }
.facts-list div { display: flex; gap: var(--s4); padding: var(--s2) 0; border-top: 1px solid rgb(74 70 63 / 0.15); }
.facts-list div:last-child { border-bottom: 1px solid rgb(74 70 63 / 0.15); }
.facts-list dt { flex: 0 0 6.5em; font-weight: 600; }
.facts-list dd { margin: 0; flex: 1 1 auto; min-width: 0; }

/* not found: a short page, its words in the middle of the screen above the footer */
.short {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
.short main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.short .foot { margin-top: var(--s6); }
.missing { text-align: center; padding-bottom: var(--s6); }
.missing p { margin-top: var(--s4); }

/* the footer, on every page */
.foot {
  margin-top: var(--s8);
  padding-bottom: var(--s7);
  text-align: center;
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.6;
}
.foot nav { color: var(--ink); }
.nw { white-space: nowrap; }
.foot p { margin-top: var(--s4); }