/*
  Erling – the site
  -----------------
  Warm paper, a serif for the words that matter, one blue, one yellow, and the
  highlight's yellow as a glow at the top of every page. Pill buttons, soft
  pastel panels around the pictures, generous room. Dark when the system is.

  Contents
  1. Colours and type
  2. Page and shared pieces
  3. The top bar
  4. The opening
  5. The strip
  6. Cards
  7. Rows
  8. The reader
  9. More features
  10. The creed and the beta note
  11. Questions and answers
  12. Page heads, steps and notes
  13. The closing and the foot
  14. Motion
*/


/* 1. Colours and type
   ------------------------------------------------------------------ */

:root {
  --paper:        #faf8f3;
  --paper-deep:   #f1ece0;
  --glow:         #fbeeb9;
  --card:         #fffdf8;
  --rule:         #e3dcca;
  --ink:          #1b1a17;
  --ink-soft:     #65604f;
  --blue:         #2d5fb3;
  --blue-deep:    #1f4584;
  --on-blue:      #fff;
  --yellow:       #ffe98a;
  --yellow-soft:  #fff4c2;
  --tint-yellow:  #fdf3cd;
  --tint-blue:    #e4ecf9;
  --tint-green:   #e3f0e6;
  --tint-rose:    #f9e6df;
  --bezel:        #1b1a17;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, "Book Antiqua", Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --measure: 42rem;
  --wide: 72rem;
  --gutter: 20px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #161410;
    --paper-deep:   #1d1a14;
    --glow:         #2b2512;
    --card:         #1f1c16;
    --rule:         #332e24;
    --ink:          #ebe6da;
    --ink-soft:     #aaa394;
    --blue:         #8fb4f2;
    --blue-deep:    #b8cff8;
    --on-blue:      #161410;
    --yellow:       #6b5a14;
    --yellow-soft:  #3d3412;
    --tint-yellow:  #2e2914;
    --tint-blue:    #1c2436;
    --tint-green:   #1b2a1f;
    --tint-rose:    #33231f;
    --bezel:        #3a3630;
  }
}


/* 2. Page and shared pieces
   ------------------------------------------------------------------ */

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  color: var(--ink);
  font: 1.0625rem/1.6 var(--sans);
  background:
    linear-gradient(180deg, var(--glow) 0, var(--paper) 640px),
    var(--paper);
}

a {
  color: var(--blue);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--blue-deep);
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

p {
  margin: 0 0 14px;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h2 {
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.12;
}

h3 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  line-height: 1.25;
}

kbd {
  padding: 1px 7px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--card);
  font: inherit;
  font-size: 0.95em;
  white-space: nowrap;
}

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

/* Every screenshot is a <picture> with a dark source; the wrapper must not sit on a text line. */
picture {
  display: block;
}

.skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

main:focus {
  outline: none;
}

.button {
  display: inline-block;
  padding: 13px 24px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.button:hover,
.button:focus-visible {
  border-color: var(--blue-deep);
  background: var(--blue-deep);
  color: var(--on-blue);
}

@media (prefers-color-scheme: dark) {
  .button:hover,
  .button:focus-visible {
    color: #161410;
  }
}

.button-secondary {
  background: transparent;
  color: var(--ink);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: transparent;
  color: var(--blue-deep);
}

.button-small {
  padding: 8px 16px;
  font-size: 0.95rem;
}

.text-link {
  font-weight: 600;
}

.text-link::after {
  content: " →";
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.eyebrow-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
}

.section-head {
  max-width: var(--measure);
  margin: 0 0 32px;
}

.section-head p {
  font-size: 1.12rem;
  color: var(--ink-soft);
}

.lead {
  font-size: 1.18rem;
  line-height: 1.55;
}

/* Every section of the page sits in the same column. */
.strip,
.toolkit,
.rows,
.more,
.creed-section,
.beta-note,
.faq,
.faq-nav,
.page-head,
.steps-section,
.notes-section {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 48px var(--gutter);
}


/* 3. The top bar
   ------------------------------------------------------------------ */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--glow) 60%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.bar {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 14px var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue);
}

.beta-tag {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--yellow);
  color: #1b1a17;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (prefers-color-scheme: dark) {
  .beta-tag {
    color: #fff4c2;
  }
}

.menu {
  display: flex;
  gap: 26px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.menu a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.menu a:hover,
.menu a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: var(--blue);
}

/* The other language, a plain link beside the button: one word, not a menu. */
.lang-link {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent);
}

.lang-link:hover {
  text-decoration-color: var(--blue);
  text-decoration-thickness: 2px;
}

@media (max-width: 700px) {
  .bar {
    flex-wrap: wrap;
    gap: 10px 16px;
    padding-bottom: 10px;
  }

  /* The language link goes to the right of the brand and the menu takes its own row. The
     button yields: the brand, the link and the button do not fit a phone's width, and every
     page has the button again below. */
  .bar .lang-link {
    margin-left: auto;
  }

  .bar .button-small {
    display: none;
  }

  .menu {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 20px;
    margin: 0;
    font-size: 0.98rem;
  }
}


/* 4. The opening
   ------------------------------------------------------------------ */

.hero {
  padding: 48px var(--gutter) 0;
  text-align: center;
}

.hero-words {
  max-width: 46rem;
  margin: 0 auto;
}

.hero .actions {
  justify-content: center;
}

h1 {
  margin: 0 0 20px;
  font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.4rem);
  line-height: 1.04;
}

h1 em {
  font-style: italic;
  color: var(--blue-deep);
}

.hero .lead {
  max-width: 40rem;
  margin: 0 auto;
}

.platforms-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.device {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The MacBook with the iPhone in front of it, both in their real bezels. */
.hero-shot {
  position: relative;
  max-width: 64rem;
  margin: 40px auto 0;
  padding-right: 6%;
}

.hero-shot .shot-phone {
  position: absolute;
  right: 0;
  bottom: -2%;
  width: 23%;
}

@media (max-width: 640px) {
  .hero-shot {
    padding-right: 8%;
  }

  .hero-shot .shot-phone {
    width: 28%;
  }
}

/* Every screenshot comes in its device's real bezel (Scripts/site-pictures.py), transparent
   around it; a soft shadow sets it on the page. */
.shot {
  margin: 0;
  filter: drop-shadow(0 24px 30px rgba(30, 20, 0, 0.28));
}

.shot img {
  display: block;
  width: 100%;
}


/* 5. The strip
   ------------------------------------------------------------------ */

.strip {
  padding-top: 32px;
  padding-bottom: 8px;
}

.strip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.strip li {
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.95rem;
  color: var(--ink-soft);
}


/* 6. Cards
   ------------------------------------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 960px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

.card {
  padding: 18px 18px 22px;
  border-radius: 24px;
  background: var(--card);
}

.card-yellow {
  background: var(--tint-yellow);
}

.card-blue {
  background: var(--tint-blue);
}

.card-green {
  background: var(--tint-green);
}

.card-rose {
  background: var(--tint-rose);
}

/* A window onto the phone: `--focus` is how far down the picture the window's centre is,
   set per card in the copy, so each card shows the part of the screen it talks about. */
.card-picture {
  --focus: 30%;
  position: relative;
  aspect-ratio: 4 / 3.4;
  margin: 0 0 18px;
  overflow: hidden;
  border-radius: 18px;
}

.card-picture .shot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84%;
  transform: translate(-50%, calc(var(--focus) * -1));
}

.card p {
  margin: 0;
  color: var(--ink-soft);
}


/* 7. Rows
   ------------------------------------------------------------------ */

.rows {
  display: grid;
  gap: 40px;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.row-flip .row-words {
  order: 2;
}

@media (max-width: 800px) {
  .row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .row-flip .row-words {
    order: 0;
  }
}

.row-words {
  max-width: 34rem;
}

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

.panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: 40px;
  overflow: hidden;
  border-radius: 28px;
}

.panel-yellow {
  background: var(--tint-yellow);
}

.panel-blue {
  background: var(--tint-blue);
}

.panel-green {
  background: var(--tint-green);
}

.panel-rose {
  background: var(--tint-rose);
}

.panel .shot-phone {
  width: 58%;
  max-width: 300px;
  margin-bottom: -48%;
  align-self: flex-start;
}

.panel .shot-tablet {
  width: 100%;
  max-width: 440px;
  margin-bottom: -40%;
  align-self: flex-start;
}

.panel .reader {
  width: 100%;
  max-width: 420px;
}

.panel .shot-mac {
  width: 100%;
  max-width: 560px;
}


/* 8. The reader
   ------------------------------------------------------------------ */

.reader {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 18px 40px -24px rgba(40, 30, 10, 0.35);
}

.reader-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  color: var(--ink-soft);
}

.window-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rule);
}

.reader-title {
  margin: 0 auto;
}

.reader-page {
  padding: 18px 20px 8px;
  font: 1.02rem/1.75 var(--serif);
}

.orientation {
  margin: 0 0 14px;
  padding: 8px 10px;
  border-left: 3px solid var(--blue);
  border-radius: 6px;
  background: var(--yellow-soft);
  font: 500 12px/1.4 var(--sans);
  color: var(--blue-deep);
}

.orientation strong {
  display: block;
  margin-bottom: 2px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
}

.sentence {
  padding: 1px 0;
  border-radius: 3px;
  transition: background-color 0.35s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.sentence.is-read {
  background: var(--yellow);
}

.term {
  text-decoration: underline dotted var(--blue);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.reader-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 14px;
  font-size: 12px;
  color: var(--ink-soft);
}

.play-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--on-blue);
}

.play-button svg {
  fill: currentColor;
}

.progress {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--rule);
}

.progress-heard {
  display: block;
  width: 25%;
  height: 100%;
  background: var(--blue);
  transition: width 0.4s linear;
}


/* 9. More features
   ------------------------------------------------------------------ */

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 900px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .features {
    grid-template-columns: 1fr;
  }
}

.features li {
  position: relative;
  padding: 18px 18px 18px 58px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--card);
  font-size: 0.98rem;
  color: var(--ink-soft);
}

.features strong {
  display: block;
  margin-bottom: 3px;
  font-size: 1.05rem;
  color: var(--ink);
}

.icon {
  position: absolute;
  top: 19px;
  left: 18px;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* 10. The creed and the beta note
   ------------------------------------------------------------------ */

.creed-section {
  padding-top: 24px;
  padding-bottom: 24px;
}

.creed {
  max-width: 46rem;
  margin: 0 auto;
  padding: 4px 0 4px 24px;
  border-left: 4px solid var(--blue);
}

.creed p {
  margin: 0;
  font: 500 clamp(1.5rem, 1.1rem + 1.4vw, 2rem)/1.3 var(--serif);
  letter-spacing: -0.01em;
}

.creed strong {
  font-weight: 500;
  color: var(--blue-deep);
}

.creed footer {
  margin-top: 12px;
  color: var(--ink-soft);
}

.beta-note-inner {
  padding: 40px clamp(20px, 5vw, 56px);
  border-radius: 28px;
  background: var(--tint-yellow);
}

.beta-note-inner p {
  max-width: var(--measure);
}

.beta-note .eyebrow {
  background: var(--yellow);
  border-color: transparent;
  color: #1b1a17;
}

@media (prefers-color-scheme: dark) {
  .beta-note .eyebrow {
    color: #fff4c2;
  }
}


/* 11. Questions and answers
   ------------------------------------------------------------------ */

.faq-list {
  max-width: 46rem;
  border-top: 1px solid var(--rule);
}

.faq-list details {
  border-bottom: 1px solid var(--rule);
}

.faq-list summary {
  position: relative;
  padding: 18px 48px 18px 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-list details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

.faq-list summary:hover {
  color: var(--blue-deep);
}

.faq-answer {
  padding: 0 0 20px;
  color: var(--ink-soft);
}

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

.more-link {
  margin: 24px 0 0;
}

.faq-page {
  padding-top: 24px;
  padding-bottom: 24px;
}

.faq-page .section-head {
  margin-bottom: 8px;
}

.faq-page:last-of-type {
  padding-bottom: 64px;
}

.faq-nav {
  padding-top: 0;
  padding-bottom: 8px;
}

.faq-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-nav a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}

.faq-nav a:hover {
  border-color: var(--blue);
  color: var(--blue-deep);
}


/* 12. Page heads, steps and notes
   ------------------------------------------------------------------ */

.page-head {
  padding-top: 56px;
  padding-bottom: 24px;
}

.page-head h1 {
  font-size: clamp(2.3rem, 1.5rem + 3vw, 3.6rem);
}

.page-head .lead {
  max-width: var(--measure);
}

.steps-section {
  padding-top: 24px;
}

.steps {
  position: relative;
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 17px;
  width: 2px;
  background: var(--rule);
}

.steps li {
  position: relative;
  padding: 0 0 28px 56px;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  top: -2px;
  left: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  background: var(--card);
  font: 600 15px/1 var(--sans);
  color: var(--blue-deep);
}

.steps strong {
  display: block;
  margin-bottom: 3px;
  font-size: 1.1rem;
}

.steps p {
  margin: 12px 0 0;
}

.notes-section {
  padding-top: 16px;
  padding-bottom: 72px;
}

.notes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 0;
}

@media (max-width: 760px) {
  .notes {
    grid-template-columns: 1fr;
  }
}

/* Each term and its description share a card, so the pair reads as one. */
.notes div {
  padding: 20px 22px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--card);
  font-size: 0.98rem;
}

.notes div:target {
  border-color: var(--blue);
}

.notes dt {
  margin-bottom: 6px;
  font: 500 1.25rem/1.3 var(--serif);
}

.notes dd {
  margin: 0;
  color: var(--ink-soft);
}


/* 13. The closing and the foot
   ------------------------------------------------------------------ */

.closing {
  margin-top: 24px;
  padding: 72px var(--gutter) 56px;
  background: linear-gradient(180deg, transparent, var(--glow));
  text-align: center;
}

.closing-inner {
  max-width: 44rem;
  margin: 0 auto;
}

.closing h2 {
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.4rem);
}

.closing .lead,
.closing p {
  margin-left: auto;
  margin-right: auto;
  max-width: 36rem;
}

.closing .actions {
  justify-content: center;
}

.closing .platforms-line {
  margin-top: 22px;
}

.foot {
  background: var(--glow);
}

.foot-inner {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 40px;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 48px var(--gutter) 40px;
  font-size: 0.97rem;
}

@media (max-width: 760px) {
  .foot-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.foot-about {
  max-width: 26rem;
  color: var(--ink-soft);
}

.brand-foot {
  margin-bottom: 12px;
}

.creed-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
}

.foot-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 520px) {
  .foot-links {
    grid-template-columns: 1fr 1fr;
  }
}

.foot-links h2 {
  margin: 0 0 10px;
  font: 600 0.95rem/1.3 var(--sans);
  letter-spacing: 0;
}

.foot-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot-links li {
  margin: 0 0 8px;
}

.foot-links a {
  color: var(--ink);
  text-decoration: none;
}

.foot-links a:hover {
  color: var(--blue-deep);
  text-decoration: underline;
}

.colophon {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--ink-soft);
}


/* 14. Motion
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .sentence,
  .progress-heard,
  .faq-list summary::after {
    transition: none;
  }
}