/* Journey at matthewpreiser.com/journey, in the app's own palette and type:
   Libre Franklin for headings and labels, Source Serif 4 for reading. */
/* Only this page's theme lives here; the layout is /css/projects.css. */

@font-face { font-family: "Libre Franklin"; src: url("/journey/fonts/librefranklin-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("/journey/fonts/librefranklin-semibold.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("/journey/fonts/librefranklin-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/journey/fonts/SourceSerif4Variable-Roman.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/journey/fonts/SourceSerif4Variable-Italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
  --page: #FAFAF8;
  --card: #FFFFFF;
  --ink: #2B2926;
  --ink2: #5C574F;
  --muted: #8A8478;
  --rule: rgba(43, 41, 38, 0.12);
  --accent: #A6553A;
  --wash: rgba(199, 122, 86, 0.14);
  --scrim: rgba(31, 31, 29, 0.86);
  --shadow: rgba(60, 40, 30, 0.32);
  --on-accent: #FFFFFF;
  --font-head: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --head-weight: 700;
  --cap-gap: 0.145;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #1F1F1D; --card: #2C2A27; --ink: #F3F0EA; --ink2: #C9C3B9; --muted: #9A9389;
    --rule: rgba(255, 250, 240, 0.12); --accent: #D9906F; --wash: rgba(217, 144, 111, 0.16);
    --scrim: rgba(10, 10, 9, 0.9); --shadow: rgba(0, 0, 0, 0.6); --on-accent: #221611; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #1F1F1D; --card: #2C2A27; --ink: #F3F0EA; --ink2: #C9C3B9; --muted: #9A9389;
    --rule: rgba(255, 250, 240, 0.12); --accent: #D9906F; --wash: rgba(217, 144, 111, 0.16);
    --scrim: rgba(10, 10, 9, 0.9); --shadow: rgba(0, 0, 0, 0.6); --on-accent: #221611; color-scheme: dark;
}

.app-icon {
  border-radius: 22.4%;
  box-shadow: 0 0 0 1px var(--rule), 0 8px 18px -8px var(--shadow);
}

/* Bring your history, as one line: from Day One or Apple Journal into
   Journey. The two names are small tags in the facts' colours, tighter than
   the facts so they sit in the sentence, and Journey's icon stands in the
   line beside its name. Several drawn versions, curves, elbows and arrows,
   all read as more diagram than the fact deserves. The other apps are named,
   never shown by their icons: Apple does not allow its app icons in other
   developers' pages or apps, and Day One's belongs to Automattic. */
.import-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 17px;
  color: var(--ink2);
  margin-bottom: 8px;
}
.import-line strong { color: var(--ink); font-weight: 600; }
.import-chip {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent);
  background: var(--wash);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.import-line .import-icon { width: 28px; height: 28px; display: block; }
/* "into", the icon and the name wrap as one, so a phone never strands
   "into" at the end of a line with Journey on the next. */
.import-to { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }