/*
  mirari.au

  One stylesheet for the whole site. The tokens are the app's own, lifted from
  mirror/mirror/Design/Theme.swift and DESIGN.md, so the page and the app are
  printed from the same plate. The app itself is light-only. The dark scheme
  here is the same palette with ink and paper swapped, offered because the
  site brief asked for prefers-color-scheme support; if Roland decides the
  web should be light-only like the app, delete the dark block below and set
  color-scheme to light.

  No JavaScript, no third-party requests. The four faces under /fonts are
  subsets of the SIL OFL files the app bundles.
*/

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/CormorantGaramond-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/CormorantGaramond-MediumItalic.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/EBGaramond-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/EBGaramond-Italic.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* Paper */
  --paper: #f4ecd6;
  --paper-raised: #f8f2e2;

  /* Ink */
  --ink: #5e4c38;
  --ink-soft: #7d6a52;
  --ink-muted: #9a8156;

  /* Gold */
  --gold: #b8923f;
  --gold-bright: #caa24e;
  --gold-deep: #a07c33;
  --gold-fill-top: #caa14c;
  --gold-fill-bottom: #b08531;

  /* Theme.hairline is inkText at 12 percent */
  --hairline: rgba(94, 76, 56, 0.12);

  --display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --body: "EB Garamond", Garamond, "Iowan Old Style", Palatino, Georgia, serif;

  --measure: 36rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #221b13;
    --paper-raised: #2a2118;

    --ink: #e9dcbd;
    --ink-soft: #c9b995;
    --ink-muted: #a89060;

    --gold: #b8923f;
    --gold-bright: #d6b061;
    --gold-deep: #caa24e;

    --hairline: rgba(233, 220, 189, 0.14);
  }
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  /* The plate's vignette: a raised glow behind the masthead settling into
     paper. Sized in rem and not repeated, so there is no seam at the fold
     and nothing for iOS Safari to mishandle as a fixed background. */
  background-image: radial-gradient(ellipse 60rem 32rem at 50% 0, var(--paper-raised), transparent 70%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--gold-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: var(--gold);
}

a:hover,
a:focus-visible {
  color: var(--ink);
  text-decoration-color: currentColor;
}

a:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

p {
  margin: 0 0 1.25em;
}

strong {
  font-weight: 400;
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
}

em {
  font-style: italic;
}

/* Layout */

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4rem;
}

@media (min-width: 40rem) {
  .page {
    padding: 5rem 2rem 5rem;
  }
}

/* Masthead: the one ornament, the wordmark, the subtitle. */

.masthead {
  text-align: center;
  margin-bottom: 3.5rem;
}

.star {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto 1.5rem;
  color: var(--gold);
}

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(3.5rem, 13vw, 5.75rem);
  line-height: 0.95;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
}

.wordmark a {
  color: inherit;
  text-decoration: none;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .wordmark {
    background-image: linear-gradient(180deg, var(--gold-fill-top), var(--gold-fill-bottom));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.subtitle {
  margin: 1rem 0 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--ink-soft);
}

/* The lede and the pull line */

.lede {
  font-size: 1.2rem;
}

.pull {
  margin: 2rem 0 2.5rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
}

/* The store block. Until the listing exists this is a tracked-caps note in
   the app's label register, deliberately not dressed as a button, because it
   does nothing. When the App Store link arrives, make it an anchor with the
   store-badge class and it takes the app's ghost-button pill. */

.store {
  text-align: center;
  margin: 3rem 0;
}

.store-note {
  display: block;
  margin: 0;
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

a.store-badge {
  display: inline-block;
  margin: 0;
  padding: 0.8rem 1.75rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-family: var(--body);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background-color: var(--paper-raised);
}

h1 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--ink);
}

h2 {
  margin: 2.75rem 0 0.75rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--ink);
}

h3 {
  margin: 2rem 0 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--ink);
}

.effective {
  margin: 0 0 2.5rem;
  font-style: italic;
  color: var(--ink-soft);
}

ul {
  margin: 0 0 1.25em;
  padding-left: 1.4em;
}

li {
  margin-bottom: 0.5em;
}

li::marker {
  color: var(--gold);
}

.trust {
  margin-top: 3rem;
  color: var(--ink-soft);
}

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

.closing {
  margin-top: 2.5rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
}

/* Footer */

.colophon {
  margin-top: 4.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.colophon ul {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.colophon li {
  margin: 0;
}

.colophon a {
  color: var(--ink-soft);
  text-decoration: none;
}

.colophon a:hover,
.colophon a:focus-visible {
  color: var(--gold-deep);
}

.colophon .made {
  margin: 0;
}

/* Print: the privacy page is the one people print. */

@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  /* Printers drop backgrounds, and the wordmark is painted by one. */
  .wordmark {
    background: none;
    color: #000;
    -webkit-text-fill-color: #000;
  }

  .star,
  .colophon ul {
    display: none;
  }

  a {
    color: #000;
  }
}