/* marrow.page
   The same paper, ink, gold and highlighter as the app (Theme.swift in the app).
   Dark is "night", light is warm paper. The switch at the top of the page picks one;
   until you use it, the page follows your system. */

:root {
  --paper: #1A1816;
  --ink: #E9E2D5;
  --ghost: rgba(233, 226, 213, 0.30);       /* words not yet typed */
  --slip: #D3A867;                          /* a letter you slipped on */
  --quiet: rgba(233, 226, 213, 0.55);
  --hairline: rgba(233, 226, 213, 0.14);
  --mark: rgba(211, 168, 103, 0.30);        /* a marked passage, as a highlighter leaves it */
  --mark-deep: rgba(211, 168, 103, 0.50);
  --press: transparent;                     /* on paper only: a light edge under each letter */
  --grain: 0.22;                            /* how strongly the weave shows: barely there in the dark */
  --sheet: #23201D;                         /* the sheet the passage sits on: a shade lighter than the page */
  --sheet-grain: 0.24;
  --sheet-edge: rgba(233, 226, 213, 0.16);
  --sheet-shadow: inset 0 1px 0 rgba(233, 226, 213, 0.06), 0 30px 60px -28px rgba(0, 0, 0, 0.85), 0 3px 10px rgba(0, 0, 0, 0.35);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  color-scheme: dark;
}

:root[data-look="light"] {
  --paper: #EFE5D0;
  --ink: #2B2219;
  --ghost: rgba(43, 34, 25, 0.34);
  --slip: #A9712C;
  --quiet: rgba(43, 34, 25, 0.58);
  --hairline: rgba(43, 34, 25, 0.14);
  --mark: rgba(224, 174, 69, 0.42);
  --mark-deep: rgba(217, 154, 43, 0.62);
  --press: rgba(255, 251, 242, 0.75);
  --grain: 0.86;                            /* Medium on paper, where the weave belongs */
  --sheet: #F7F0E0;
  --sheet-grain: 1;
  --sheet-edge: rgba(43, 34, 25, 0.16);
  --sheet-shadow: inset 0 1px 0 rgba(255, 251, 242, 0.9), 0 30px 60px -30px rgba(74, 52, 24, 0.5), 0 3px 10px rgba(74, 52, 24, 0.1);
  color-scheme: light;
}

/* Without JavaScript there is no switch, so follow the system. */
@media (prefers-color-scheme: light) {
  :root:not([data-look]) {
    --paper: #EFE5D0;
    --ink: #2B2219;
    --ghost: rgba(43, 34, 25, 0.34);
    --slip: #A9712C;
    --quiet: rgba(43, 34, 25, 0.58);
    --hairline: rgba(43, 34, 25, 0.14);
    --mark: rgba(224, 174, 69, 0.42);
    --mark-deep: rgba(217, 154, 43, 0.62);
    --press: rgba(255, 251, 242, 0.75);
    --sheet: #F7F0E0;
    --sheet-edge: rgba(43, 34, 25, 0.16);
    --sheet-shadow: inset 0 1px 0 rgba(255, 251, 242, 0.9), 0 30px 60px -30px rgba(74, 52, 24, 0.5), 0 3px 10px rgba(74, 52, 24, 0.1);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.65;
  text-shadow: 0 1px 0 var(--press);        /* the type pressed into the paper */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- The grain ----------
   paper.js weaves the grain into a small picture of the paper (--weave-page) and of the sheet
   (--weave-sheet), and these rules tile them. Until the pictures are ready, and without
   JavaScript, the paper is its plain color. */

html {
  background-image: var(--weave-page, none);
  background-size: 256px 256px;
}
body { background: transparent; }

main {
  position: relative;
  z-index: 1;
  max-width: 38rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 6rem;
}

p { margin: 0 0 1.1em; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--quiet);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-color: var(--ink); }

/* ---------- Light or dark ----------
   One small button at the top right: a circle, half inked. Click it to turn the page over. */

.look {
  display: none;
  position: absolute;
  top: 1.5rem;
  right: 1rem;
  padding: 0.5rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--quiet);
  line-height: 0;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.35s ease;
}
.js .look { display: block; }
.look:hover { color: var(--ink); }
.look svg { display: block; }
:root[data-look="light"] .look { transform: rotate(180deg); }

/* ---------- The top ---------- */

/* The icon and the name side by side, then the line under them. Kept short,
   so the sheet below is on screen when the page opens. */
.top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.85rem;
  margin: 7vh 0 2.75rem;
}

.icon {
  display: block;
  width: 5rem;
  height: 5rem;
  margin: 0 0 0 -0.5rem;        /* the icon has clear space around it; line its tile up with the text */
}

h1 {
  margin: 0;
  font-size: 3.1rem;
  font-weight: normal;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.lede {
  grid-column: 1 / -1;
  margin: 1.1rem 0 0;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--quiet);
}

/* ---------- The passage ----------
   It sits on a sheet of its own: wider than the words around it, a shade lighter than the page,
   lifted a little, with its own grain. The type is set at the app's size. */

.try { margin-bottom: 5.5rem; }

.sheet {
  position: relative;
  width: min(100vw - 2rem, 56rem);
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 2.1rem 4rem 1.9rem;
  border: 1px solid var(--sheet-edge);
  border-radius: 18px;
  background: var(--sheet) var(--weave-sheet, none) 0 0 / 256px 256px;
  box-shadow: var(--sheet-shadow);
  overflow: hidden;
  cursor: text;
  transition: border-color 0.3s ease;
}
.try.on .sheet { border-color: var(--quiet); }

/* The book's name over the page, as the app has it. */
.sheet-title {
  position: relative;
  margin: 0 0 1.9rem;
  text-align: center;
  line-height: 1.35;
}
.sheet-title .book {
  display: block;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--quiet);
}
.sheet-title .author {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--quiet);
  opacity: 0.8;
}

.page {
  position: relative;
  font-size: 1.9rem;
  line-height: 1.75;
}

#passage {
  position: relative;
  margin: 0;
}

/* Without JavaScript the passage is just a quotation, and that is fine.
   With it, the page becomes a window seven lines tall. */
.js .page {
  height: 12.25em;              /* 7 lines of 1.75em */
  overflow: hidden;
  cursor: text;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 48%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 48%, transparent 100%);
}
.js .page.moved {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.6em, #000 48%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 1.6em, #000 48%, transparent 100%);
}
.js #passage { color: var(--ghost); }
.js .page.settled #passage { transition: transform 0.32s ease; }

.inked { color: var(--ink); }
.slip  { color: var(--slip); }
.ghost { color: var(--ghost); text-shadow: none; }
.it    { font-style: italic; }

/* The cursor: a thin bar before the next letter. It takes up no room. */
.caret { position: relative; }
.caret::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0.12em;
  width: 2px;
  height: 1.2em;
  background: var(--ink);
  opacity: 0.4;
}
.page.on .caret::after,
.page.typing .caret::after { opacity: 1; }
.page.done .caret::after { display: none; }

/* The word the app is named for. Once it is typed, a highlighter is drawn across it,
   left to right, pressing a little harder at first and then easing off. */
.word {
  margin: 0 -0.16em;
  padding: 0.06em 0.16em;
  border-radius: 0.22em;
  background-image: linear-gradient(var(--mark), var(--mark));
  background-repeat: no-repeat;
  background-position: 0 55%;
  background-size: 0% 82%;
}
.word.lit {
  background-size: 100% 82%;
  animation: highlighter 1.5s cubic-bezier(0.3, 0.1, 0.25, 1) both;
}
@keyframes highlighter {
  0%   { background-size: 0% 82%;   background-image: linear-gradient(var(--mark-deep), var(--mark-deep)); }
  55%  { background-size: 100% 82%; background-image: linear-gradient(var(--mark-deep), var(--mark-deep)); }
  100% { background-size: 100% 82%; background-image: linear-gradient(var(--mark), var(--mark)); }
}

/* The real thing that takes the keys. It lies over the passage and cannot be seen. */
#keys {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  opacity: 0;
  resize: none;
  font-size: 16px;              /* stops phones zooming in on focus */
  cursor: text;
}
.js #keys { display: block; }

.hint {
  display: none;
  position: relative;
  margin: 0.4rem 0 0;
  min-height: 1.7em;
  font-size: 1.05rem;
  font-style: italic;
  text-align: center;
  color: var(--quiet);
}
.js .hint { display: block; }

.hint-on, .hint-done { display: none; }
.try.on .hint-idle { display: none; }
.try.on .hint-on { display: inline; }
.try.done .hint-idle, .try.done .hint-on { display: none; }
.try.done .hint-done { display: inline; }

button.hint-done {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-shadow: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--quiet);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
button.hint-done:hover { color: var(--ink); }

/* ---------- The words ---------- */

.words { margin: 0 0 3.5rem; }
.words p:last-child { margin-bottom: 0; }

.why { font-size: 1.4rem; line-height: 1.6; }

h2 {
  margin: 0 0 0.7rem;
  font-size: 1.7rem;
  font-weight: normal;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.small {
  font-size: 1rem;
  color: var(--quiet);
}

/* ---------- The buttons ---------- */

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0 0 5rem;
}
.price .buttons { margin: 1.6rem 0 1.2rem; }

.button {
  display: inline-block;
  padding: 0.62em 1.35em 0.68em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.1rem;
  line-height: 1.3;
  text-decoration: none;
  text-shadow: none;
  transition: opacity 0.15s ease;
}
.button:hover { opacity: 0.86; }
.button.plain {
  border-color: var(--quiet);
  background: transparent;
  color: var(--ink);
}
.button.plain:hover { opacity: 1; border-color: var(--ink); }

/* ---------- Pictures of the app ---------- */

figure {
  /* a little wider than the text, and never wider than the window */
  width: min(100vw - 2rem, 52rem);
  margin: 0 0 4.5rem 50%;
  transform: translateX(-50%);
}

.shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

/* Each picture comes in dark and in light; only the one that matches the page is shown. */
.only-light { display: none; }
:root[data-look="light"] .only-light { display: block; }
:root[data-look="light"] .only-dark { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-look]) .only-light { display: block; }
  :root:not([data-look]) .only-dark { display: none; }
}

figcaption {
  width: min(100% - 1rem, 35rem);   /* lines up with the text above and below */
  margin: 1rem auto 0;
  font-size: 1rem;
  font-style: italic;
  color: var(--quiet);
}

/* ---------- The bottom ---------- */

.price { margin-top: 5rem; }

footer {
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
  font-size: 1rem;
  color: var(--quiet);
}
footer p { margin: 0; }

/* ---------- Middling screens: the sheet's type comes down a step ---------- */

@media (max-width: 60rem) {
  .sheet { padding: 1.9rem 2.5rem 1.6rem; }
  .page { font-size: 1.6rem; }
}

/* ---------- Small screens ---------- */

@media (max-width: 40rem) {
  body { font-size: 1.125rem; }
  main { padding-top: 1.25rem; }
  h1 { font-size: 2.6rem; }
  h2 { font-size: 1.45rem; }
  .icon { width: 4.25rem; height: 4.25rem; margin-left: -0.42rem; }
  .top { margin: 3.25rem 0 2.25rem; column-gap: 0.7rem; }
  .look { top: 0.9rem; right: 0.75rem; }
  .lede, .why { font-size: 1.22rem; }
  .sheet { padding: 1.4rem 1.25rem 1.2rem; border-radius: 14px; }
  .sheet-title { margin-bottom: 1.2rem; }
  .sheet-title .book { font-size: 1.05rem; }
  .page { font-size: 1.3rem; }
  .hint { font-size: 1rem; }
  .try { margin-bottom: 4rem; }
  .buttons { margin-bottom: 4rem; }
  .button { font-size: 1.05rem; }
  figure { margin-bottom: 3.5rem; }
  .shot { border-radius: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.settled #passage { transition: none; }
  .word.lit { animation: none; }
  .look { transition: none; }
}