/* Shared style of all Project Visually pages. */

/* The colors, the fonts and the panel sizes are CSS variables written by the build
   into theme.css, from visually.config.js. Change them there, not here. */

* {
  box-sizing: border-box;
}

/* all pages - a part marked "hidden" stays hidden, even when its class shows it as a block or a button.
   The Cloudflare function takes the word away for a signed-in subscriber. */
[hidden] {
  display: none !important;
}

/* all pages - a link in the text is teal. Links with their own look (cards, buttons, menu) set their own color */
a {
  color: var(--teal);
}

/* all pages - paper background and reading font */
body {
  margin: 0;
  padding: 24px 16px 64px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-reading), sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

.page {
  max-width: 1100px;
  margin: 0 auto;
}

/* all pages - top strip with the brand and the topic tag */
.page-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: var(--font-drawing), cursive;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
}

/* all pages - the three shapes logo, above the brand name */
.brand-logo svg {
  display: block;
  height: 44px;
  width: auto;
}

/* all pages - right side of the header: the topic tag, then the flags */
.header-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* all pages - one flag per language the page exists in */
.languages {
  display: flex;
  align-items: center;
  gap: 8px;
}

.language-link {
  display: block;
  opacity: 0.45;
}

.language-link:hover,
.language-link-current {
  opacity: 1;
}

.language-link svg {
  display: block;
  height: 26px;
  width: auto;
}

/* all pages - the uneven corners make a border look drawn by hand */
.panel,
.page-link {
  border: 2.5px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

/* all pages - the top menu: one link per topic, under the brand. On a phone the row scrolls sideways */
.menu {
  flex-basis: 100%;
  display: flex;
  gap: 8px 24px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 10px 0 6px;
  border-top: 1.5px dashed var(--ink-light);
  border-bottom: 1.5px dashed var(--ink-light);
}

@media (min-width: 720px) {
  .menu {
    flex-wrap: wrap;
  }
}

.menu-link {
  font-family: var(--font-drawing), cursive;
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
}

.menu-link:hover {
  color: var(--teal);
}

/* all pages - the topic of the page is underlined in yellow, like a marker */
.menu-link-current {
  box-shadow: inset 0 -8px 0 var(--yellow);
}

/* all pages - the "Subscribe" button of the header is yellow, so it is the one thing that stands out */
.menu-subscribe {
  padding: 6px 16px;
  background: var(--yellow);
}

/* chapter and series pages - the path to the page, above the title: topic, then series */
.breadcrumbs {
  margin: 0 0 8px;
  font-family: var(--font-drawing), cursive;
  font-weight: 600;
}

.breadcrumbs-separator {
  margin: 0 4px;
  color: var(--ink-light);
}

.breadcrumbs a,
h2 a {
  color: var(--teal);
}

/* home page - topic names */
h2 {
  font-family: var(--font-drawing), cursive;
  font-weight: 800;
  font-size: 28px;
  margin: 40px 0 0;
}

/* home, topic and series pages - the links sit closer to the text above them */
h2 + .page-links,
.lead + .page-links {
  margin-top: 16px;
}

/* all pages - title and first sentence */
h1 {
  text-wrap: balance;
  font-family: var(--font-drawing), cursive;
  font-weight: 800;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.15;
  margin: 0 0 16px;
  max-width: 800px;
}

.lead {
  text-wrap: pretty;
  font-size: 21px;
  max-width: 700px;
  margin: 0 0 24px;
}

/* how it works page - the three colors and the job of each */
.color-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 16px;
}

.color-key li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-dot {
  width: 18px;
  height: 18px;
  /* the dot keeps its width when its text takes several lines */
  flex-shrink: 0;
  border: 2px solid var(--ink);
  border-radius: 50% 45% 52% 48%;
}

.color-dot-coral {
  background: var(--coral);
}

.color-dot-teal {
  background: var(--teal);
}

.color-dot-yellow {
  background: var(--yellow);
}

/* chapter page - the numbered panels: one per row on a phone */
.panels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 28px;
  /* a short panel keeps its own height instead of stretching to its neighbor */
  align-items: start;
}

/* chapter page - on a wide screen, the number of panels per row comes from visually.config.js */
@media (min-width: 720px) {
  .panels {
    grid-template-columns: repeat(var(--panels-per-row), 1fr);
  }
}

/* chapter page - one panel: a white sheet with a grey edge that sits a bit off, like the fills in the drawings */
.panel {
  position: relative;
  padding: 20px 16px 20px;
  background: var(--panel-background);
  box-shadow: var(--panel-edge-offset) var(--panel-edge-offset) 0 var(--ink-light);
}

.panel-number {
  position: absolute;
  top: -18px;
  left: 18px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--yellow);
  border: 2.5px solid var(--ink);
  border-radius: 50% 45% 52% 48%;
  font-family: var(--font-drawing), cursive;
  font-weight: 800;
  font-size: 20px;
}

.panel svg {
  display: block;
  width: 100%;
  height: auto;
}

/* chapter page - text inside a visual uses the hand-drawn font */
.panel svg text {
  font-family: var(--font-drawing), cursive;
}

.panel-caption {
  margin: 12px 8px 0;
  font-size: 17px;
  text-wrap: pretty;
}

/* chapter page - a command in a caption, and in a drawing: the code font, on a light tint */
.panel-caption code,
.panel-answer code {
  font-family: var(--font-code), monospace;
  font-size: 0.88em;
  background: var(--code-tint);
  padding: 1px 6px;
  border-radius: 4px;
}

.panel svg text.code-text {
  font-family: var(--font-code), monospace;
}

/* chapter page - a quick check: the answer stays folded until the reader taps it */
.panel-answer {
  margin: 12px 8px 0;
  font-size: 17px;
}

.panel-answer summary {
  font-family: var(--font-drawing), cursive;
  font-weight: 600;
  cursor: pointer;
}

.panel-answer p {
  margin: 8px 0 0;
}

/* chapter page - an extra panel (a quick check, "Go further"): after the story, with no number.
   Always open, under its header. A dashed edge and no grey shadow, so the reader
   sees it is not part of the story. */
.panel-extra {
  padding: 0;
  box-shadow: none;
  border: 2px dashed var(--ink-light);
}

.panel-extra-header {
  margin: 0;
  padding: 14px 16px;
  font-family: var(--font-drawing), cursive;
  font-weight: 700;
  font-size: 19px;
}

.panel-extra-body {
  padding: 4px 16px 20px;
}

/* all pages - links to the other pages */
.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
}

.page-link {
  font-family: var(--font-drawing), cursive;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 20px;
}

.page-link {
  background: var(--panel-background);
  box-shadow: 4px 4px 0 var(--ink-light);
}

.page-link:hover {
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--ink);
}

/* all pages - a clear ring around the link or button reached with the keyboard */
a:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

/* all pages - the topic tag in the header reacts like the other links */
/* chapter page - the next chapter sits on top and the previous chapter sits under it, each as wide as its text */
.chapter-links {
  flex-direction: column-reverse;
  align-items: flex-start;
}

/* chapter page - the previous and next links are underlined */
.chapter-links .page-link {
  text-decoration: underline;
}

/* chapter page - 'rows' layout: one panel per row, in a column that is easy to follow down the page */
.panels-rows {
  max-width: 880px;
}

@media (min-width: 720px) {
  .panels-rows {
    grid-template-columns: 1fr;
  }

  /* chapter page - 'rows' layout: the drawing sits left and its caption sits right, in larger text */
  .panels-rows .panel {
    display: grid;
    grid-template-columns: minmax(0, 400px) 1fr;
    gap: 32px;
    align-items: center;
    padding: 24px 32px 24px 16px;
  }

  .panels-rows .panel-caption {
    margin: 0;
    font-size: 21px;
  }

  /* chapter page - 'rows' layout: an extra panel keeps its header on top, and lays out drawing and caption like a story panel once opened */
  .panels-rows .panel-extra {
    display: block;
    padding: 0;
  }

  .panels-rows .panel-extra-body {
    display: grid;
    grid-template-columns: minmax(0, 400px) 1fr;
    gap: 32px;
    align-items: center;
    padding: 8px 32px 24px 16px;
  }

  .panels-rows .panel-answer {
    font-size: 21px;
    margin: 16px 0 0;
  }
}

/* home, topic, series and chapter pages - a list of cards: series, chapters or recommendations */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 28px;
  margin-top: 24px;
}

/* a card: the same white sheet with a grey edge as a panel */
.card {
  display: flex;
  flex-direction: column;
  padding: 16px 20px 18px;
  border: 2.5px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  background: var(--panel-background);
  box-shadow: var(--panel-edge-offset) var(--panel-edge-offset) 0 var(--ink-light);
  color: var(--ink);
  text-decoration: none;
}

.card:hover {
  box-shadow: var(--panel-edge-offset) var(--panel-edge-offset) 0 var(--ink);
}

/* a card - its picture: the main object of the chapter, above the label */
.card-picture {
  display: block;
  width: 100%;
  max-width: 200px;
  margin: 0 auto 10px;
}

.card-label {
  display: block;
  font-size: 15px;
  color: var(--teal);
}

/* a series card - space between the title and the bottom row */
.card-title:not(:last-child) {
  margin-bottom: 12px;
}

/* a series card - the bottom row under the title: the number of chapters on the left, the difficulty on the right */
.card-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1.5px dashed var(--ink-light);
}

/* a series card - its difficulty: three bars that grow taller, one filled per level, and the name of the level */
.card-difficulty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--ink);
}

.card-difficulty-bars {
  width: 25px;
  height: 17px;
}

.card-difficulty-bars rect {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}

.card-difficulty-bars rect.is-filled {
  fill: var(--teal);
}

/* a coming series: a dashed frame, like a folded extra panel, because it is not open yet */
.card-coming-soon {
  border-style: dashed;
}

.card-coming-soon:hover {
  box-shadow: var(--panel-edge-offset) var(--panel-edge-offset) 0 var(--ink-light);
}

/* a coming series - the "Coming soon" tag at the bottom right */
.card-badge {
  font-size: 13px;
  padding: 2px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--yellow);
  white-space: nowrap;
}

.card-title {
  display: block;
  font-family: var(--font-drawing), cursive;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
}

/* chapter page - space above the "share this series" and "more series" titles */
.chapter-links + h2,
.share-links + h2 {
  margin-top: 56px;
}

/* about, how it works and legal pages - the written part, in a column that is easy to read */
.page-text {
  max-width: 700px;
}

.page-text h2 {
  font-size: 24px;
  margin: 40px 0 8px;
}

.page-text p,
.page-text ul {
  margin: 0 0 16px;
}

/* how it works page - space between the text and the panels of the three people */
.page-text + .panels {
  margin-top: 40px;
}

/* all pages - the footer, under a line as wide as the page */
.page-footer {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 2.5px solid var(--ink);
  font-size: 16px;
}

/* footer - the columns of links: they share the full width, and stack on a phone */
.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px 40px;
  margin-top: 32px;
}

.footer-title {
  font-size: 18px;
  margin: 0 0 8px;
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-list li {
  margin-bottom: 4px;
}

.footer-list a {
  color: var(--ink);
}

.footer-list a:hover {
  color: var(--teal);
}

/* premium chapter - the box a visitor sees in place of the locked panels */
.subscription-box {
  max-width: 880px;
  margin-top: 48px;
  padding: 8px 28px 28px;
  background: var(--panel-background);
  border: 2.5px dashed var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

/* premium chapter and footer - a form with one email field and one button */
.email-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 40px;
}

.email-form label {
  flex-basis: 100%;
}

.email-form input {
  flex: 1 1 240px;
  font: inherit;
  color: var(--ink);
  padding: 10px 14px;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
}

.email-form button {
  font-size: inherit;
  cursor: pointer;
}

/* all pages - one message of the banner at the top of the page. Shown only when the address ends with the id of the message */
.notice {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
  padding: 12px 20px;
  background: var(--panel-background);
  border: 2.5px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  font-weight: 700;
}

.notice:target {
  display: flex;
}

/* all pages - a message that says something failed is red */
.notice-error {
  color: var(--coral);
  border-color: var(--coral);
}

/* all pages - the link that closes the message */
.notice-close {
  color: var(--ink);
  font-weight: 400;
  font-size: 16px;
}

/* footer - the newsletter form, above the columns of links */
.footer-newsletter {
  max-width: 560px;
}

.footer-newsletter .email-form {
  margin-top: 0;
}

/* footer - a field only robots fill. A person never sees it */
.form-trap {
  display: none;
}

/* home page - the hero: the promise and the button on the left, a sample panel on the right. On a phone the panel goes under */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 48px;
  align-items: center;
  /* a dashed line under the hero, like the lines of the menu, before the topics start */
  padding-bottom: 40px;
  border-bottom: 1.5px dashed var(--ink-light);
  margin-bottom: 24px;
}

@media (min-width: 720px) {
  .hero {
    grid-template-columns: 3fr 2fr;
  }

  /* home page - with no slider (a signed-in subscriber), the text takes the whole width */
  .hero:not(:has(.hero-slider)) {
    grid-template-columns: 1fr;
  }

  /* the promise stays on one line on a wide screen */
  .hero h1 {
    white-space: nowrap;
    font-size: clamp(30px, 3.6vw, 44px);
  }
}

/* home page - the reasons to trust us, under the promise: a yellow tick before each one */
.hero-proof {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 8px 24px;
  font-weight: 700;
  font-size: 17px;
}

.hero-proof li {
  display: flex;
  align-items: flex-start;
}

/* the tick keeps its size when the reason takes two lines */
.hero-proof li::before {
  content: "✓";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  text-align: center;
  line-height: 22px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50% 45% 52% 48%;
}

/* home page - a signed-in subscriber sees a premium card in place of the reasons to trust us:
   a white sheet with a hand-drawn border, like the premium part of the offer, and a yellow sticker on its top edge */
.hero-premium {
  position: relative;
  max-width: 520px;
  margin: 28px 0 24px;
  padding: 28px 24px 20px;
  background: var(--panel-background);
  border: 2.5px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

.hero-premium p {
  margin: 0;
}

/* the sticker sits across the top border, a little tilted, like it was stuck on by hand */
.hero-premium-badge {
  position: absolute;
  top: -18px;
  left: 20px;
  padding: 2px 14px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50% 45% 52% 48% / 60% 55% 62% 58%;
  transform: rotate(-3deg);
  font-family: var(--font-drawing), cursive;
  font-weight: 800;
  font-size: 18px;
}

.hero-premium-text {
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
}

.hero-premium-thanks {
  margin-top: 8px !important;
  font-family: var(--font-drawing), cursive;
  font-size: 18px;
  color: var(--teal);
}

.hero .page-links {
  margin-top: 8px;
}

.hero-start {
  margin: 0 0 16px;
  font-size: 17px;
}

.hero-start a {
  color: var(--teal);
}

/* home page - under the big button, more ways in: one line per chapter, with a teal arrow */
.hero-hooks {
  margin-top: 20px;
  font-size: 17px;
}

.hero-hooks p {
  margin: 0 0 6px;
}

.hero-hooks ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-hooks li {
  margin: 4px 0;
}

.hero-hooks li::before {
  content: "›";
  margin-right: 10px;
  color: var(--teal);
  font-weight: 800;
}

/* home page - the slider of the hero: one slide at a time, each a white sheet like a panel */
.hero-slider {
  max-width: 400px;
  width: 100%;
  justify-self: center;
}

/* the slides sit in one row. The row scrolls sideways and stops on each slide. All slides take the height of the tallest one */
.hero-slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.hero-slides::-webkit-scrollbar {
  display: none;
}

.hero-slide {
  display: flex;
  flex-direction: column;
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 20px 20px 22px;
  background: var(--panel-background);
  border: 2.5px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

/* a slide - the drawing alone: no frame of its own, no number and no caption, because the slide has its own text */
.hero-slide .panels {
  grid-template-columns: 1fr;
}

.hero-slide .panel {
  padding: 0;
  border: none;
  box-shadow: none;
}

.hero-slide .panel-number,
.hero-slide .panel-caption {
  display: none;
}

.hero-slide-text {
  margin: 16px 0 8px;
  font-size: 17px;
  text-wrap: pretty;
}

.hero-slide-link {
  /* the link sits at the bottom of the slide, at the same place on every slide */
  margin-top: auto;
  font-family: var(--font-drawing), cursive;
  font-weight: 600;
}

/* under the outcome, the link follows it */
.hero-slide-outcome + .hero-slide-link {
  margin-top: 10px;
}

/* a slide - what the reader gets from the episode, at the bottom of the slide, above the link */
.hero-slide-outcome {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 2px solid var(--yellow);
  font-family: var(--font-drawing), cursive;
  font-weight: 700;
  color: var(--teal);
  text-wrap: pretty;
}

/* the slider - the arrows on each side, the dots in the middle */
.hero-slider-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}

.hero-slider-arrow {
  width: 36px;
  height: 36px;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  background: var(--panel-background);
  border: 2px solid var(--ink);
  border-radius: 50% 45% 52% 48%;
  cursor: pointer;
}

.hero-slider-arrow:hover {
  background: var(--yellow);
}

.hero-slider-dots {
  display: flex;
  gap: 8px;
}

.hero-slider-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  background: var(--panel-background);
  border: 2px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
}

.hero-slider-dot.is-current {
  background: var(--teal);
}

/* the main button of a page: bigger, and yellow before the reader even points at it */
.page-link-main {
  font-size: 21px;
  padding: 14px 28px;
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--ink);
}

/* home page - the topic name on the left, the link to all its series on the right */
.topic-row-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  margin-top: 40px;
}

.topic-row-header h2 {
  margin: 0;
}

.topic-row-link {
  font-family: var(--font-drawing), cursive;
  font-weight: 600;
  color: var(--teal);
}

/* home page - on a phone, the series of a topic sit in one row that scrolls sideways, and the next card peeks out */
@media (max-width: 719px) {
  .cards-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 8px 12px 0;
  }

  .cards-row .card {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
}

/* home page - the offer: the free newsletter, then the subscription, side by side on a wide screen. */
/* A subscriber sees the newsletter part only, and it takes the full width */
.offer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 28px;
  /* a dashed line above and under the offer, like the one under the hero */
  margin-top: 48px;
  padding: 40px 0;
  border-top: 1.5px dashed var(--ink-light);
  border-bottom: 1.5px dashed var(--ink-light);
  scroll-margin-top: 24px;
}

.offer-part {
  padding: 8px 28px 28px;
  background: var(--panel-background);
  border: 2.5px dashed var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

.offer-part h2 {
  margin-top: 24px;
}

.offer-part .email-form {
  margin-top: 16px;
}

.offer-part-premium {
  border-style: solid;
  box-shadow: var(--panel-edge-offset) var(--panel-edge-offset) 0 var(--ink);
}

.offer-list {
  margin: 16px 0 0;
  padding-left: 22px;
}

.offer-part-premium .page-links {
  margin-top: 24px;
}

/* chapter page - swipe mode: the parts that show only in swipe mode stay hidden on the normal page */
.swipe-bar,
.swipe-hint,
.swipe-series-title,
.swipe-end,
.swipe-start,
.swipe-go-next,
.swipe-go-previous {
  display: none;
}

/* chapter page - the "Read as slides" button under the first sentence */
.swipe-open {
  margin-bottom: 40px;
  border: 0;
  font-size: 17px;
  cursor: pointer;
}

/* chapter page - swipe mode: the chapter covers the whole screen and moves one slide per swipe */
html.swipe-on body {
  overflow: hidden;
}

/* chapter page - the chapter takes the focus in swipe mode, for the keyboard arrows. It never shows a focus frame */
.chapter-reader:focus {
  outline: none;
}

html.swipe-on .chapter-reader {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  background: var(--paper);
}

html.swipe-on .chapter-reader .panels {
  display: block;
  max-width: none;
}

/* chapter page - swipe mode: one slide is one screen, its content in the middle */
html.swipe-on .chapter-reader .swipe-slide,
html.swipe-on .chapter-reader .panel,
html.swipe-on .chapter-reader .subscription-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-height: 100dvh;
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 20px 32px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
}

/* chapter page - swipe mode: the drawing leaves room for its caption on the same screen */
html.swipe-on .chapter-reader .panel svg {
  max-height: 62dvh;
}

html.swipe-on .chapter-reader .panel-number {
  position: static;
  margin: 0 0 12px;
  align-self: flex-start;
}

html.swipe-on .chapter-reader .panel-caption {
  font-size: 19px;
}

/* chapter page - swipe mode: the header of an extra panel ("Quick check") sits above its drawing, full width */
html.swipe-on .chapter-reader .panel-extra-body {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* chapter page - swipe mode on a wide screen: a bigger drawing, with its caption under it */
@media (min-width: 720px) {
  html.swipe-on .chapter-reader .swipe-slide,
  html.swipe-on .chapter-reader .panel,
  html.swipe-on .chapter-reader .subscription-box {
    max-width: 900px;
  }

  html.swipe-on .chapter-reader .panel svg {
    max-height: 66dvh;
  }

  html.swipe-on .chapter-reader .panel-caption,
  html.swipe-on .chapter-reader .panel-answer {
    font-size: 22px;
    text-align: center;
  }
}

/* chapter page - swipe mode: the title slide shows the series name above the chapter title */
html.swipe-on .swipe-series-title {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font-drawing), cursive;
  font-weight: 600;
  color: var(--teal);
}

html.swipe-on .swipe-open {
  display: none;
}

/* chapter page - swipe mode: "Swipe up" at the bottom of the title slide and of the next chapter slide */
html.swipe-on .swipe-hint {
  display: block;
  margin: 32px 0 0;
  font-family: var(--font-drawing), cursive;
  font-weight: 600;
  text-align: center;
  color: var(--ink);
  opacity: 0.6;
}

/* chapter page - swipe mode: the last slide, a big card of the next chapter or of the series */
html.swipe-on .swipe-end,
html.swipe-on .swipe-start {
  align-items: center;
  text-align: center;
  color: var(--ink);
  text-decoration: none;
}

html.swipe-on .swipe-end svg,
html.swipe-on .swipe-start svg {
  width: min(100%, 360px);
  max-width: none;
  height: auto;
  margin: 16px 0;
}

.swipe-end-label {
  font-family: var(--font-drawing), cursive;
  font-weight: 600;
  color: var(--teal);
}

.swipe-end-title {
  font-family: var(--font-drawing), cursive;
  font-weight: 800;
  font-size: clamp(26px, 5vw, 40px);
  line-height: 1.15;
}

/* chapter page - swipe mode: the "Swipe down" hint sits above the previous chapter card */
html.swipe-on .swipe-start .swipe-hint {
  margin: 0 0 24px;
}

/* chapter page - swipe mode: the slides above the title wait for the script, which opens the chapter on the title.
   Without this, a phone would show the previous chapter card first */
html.swipe-on:not(.swipe-ready) .chapter-reader .swipe-start,
html.swipe-on:not(.swipe-ready) .chapter-reader .swipe-go-previous {
  display: none;
}

/* chapter page - swipe mode: the empty slides at both ends. Reaching one opens the next or the previous chapter */
html.swipe-on .swipe-go-next,
html.swipe-on .swipe-go-previous {
  display: block;
  height: 100dvh;
  scroll-snap-align: start;
}

/* chapter page - swipe mode: a thin progress bar and the close button, fixed at the top */
html.swipe-on .swipe-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 51;
  padding: 10px 12px 10px 20px;
  background: var(--paper);
}

.swipe-progress {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--ink-light);
  overflow: hidden;
}

.swipe-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--yellow);
  transition: width 0.2s;
}

.swipe-close {
  width: 36px;
  height: 36px;
  border: 2.5px solid var(--ink);
  border-radius: 50% 45% 52% 48%;
  background: var(--panel-background);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* every page - the cookie banner, fixed at the bottom until the reader accepts or refuses.
   Both buttons look the same, so refusing is as easy as accepting */
.analytics-question {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 20px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 4px 4px 0 var(--ink-light);
}

.analytics-question-text {
  flex: 1 1 320px;
  margin: 0;
}

.analytics-question-buttons {
  display: flex;
  gap: 12px;
}

.analytics-question-buttons button {
  font-size: inherit;
  cursor: pointer;
}

/* subscribe page - the promise on the left, one drawing on the right, each half of the width. The long title wraps */
.subscribe-hero {
  border-bottom: none;
}

@media (min-width: 720px) {
  .hero.subscribe-hero {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .subscribe-hero h1 {
    white-space: normal;
  }
}

/* subscribe page - the small sticker above the title */
.subscribe-badge {
  display: inline-block;
  margin: 0 0 12px;
  padding: 2px 14px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50% 45% 52% 48% / 60% 55% 62% 58%;
  transform: rotate(-2deg);
  font-family: var(--font-drawing), cursive;
  font-weight: 800;
}

/* subscribe page - the line under the buttons that takes the risk away */
.subscribe-risk,
.subscribe-section > .subscribe-risk {
  margin: 12px auto 0;
  font-size: 13px;
  color: #b0b0b0fc;
}

/* the drawing takes its whole half. It is a picture of the product, not a step of a story: no number */
.subscribe-hero-panel .panels {
  margin: 0;
  grid-template-columns: 1fr;
}

.subscribe-hero-panel .panel-number {
  display: none;
}

/* subscribe page - each part of the page, with a dashed line between them */
.subscribe-section {
  padding: 40px 0;
  border-top: 1.5px dashed var(--ink-light);
}

.subscribe-section h2 {
  margin-top: 0;
}

.subscribe-section > p {
  max-width: 700px;
  font-size: 19px;
}

.subscribe-section h3 {
  font-family: var(--font-drawing), cursive;
  font-weight: 800;
  font-size: 21px;
  margin: 0 0 6px;
}

/* subscribe page - the short line that closes the problem, in the drawing font */
.subscribe-punchline {
  font-family: var(--font-drawing), cursive;
  font-weight: 800;
  font-size: 26px !important;
  color: var(--teal);
}

/* subscribe page - the reasons to buy, side by side, each with a big symbol in a coral circle */
.subscribe-reasons {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 24px;
}

.subscribe-reason-symbol {
  display: block;
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  text-align: center;
  line-height: 48px;
  font-size: 26px;
  background: var(--teal);
  border: 2px solid var(--ink);
  border-radius: 50% 45% 52% 48%;
}

.subscribe-reasons p,
.subscribe-benefits p {
  margin: 0;
}

/* subscribe page - the slider of the home page, full width: one slide on a phone, two on a tablet, three on a wide screen */
.subscribe-samples {
  margin-top: 16px;
}

.subscribe-samples .hero-slider {
  max-width: none;
}

.subscribe-samples .hero-slides {
  gap: 24px;
}

@media (min-width: 640px) {
  .subscribe-samples .hero-slide {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media (min-width: 960px) {
  .subscribe-samples .hero-slide {
    flex-basis: calc((100% - 48px) / 3);
  }
}

/* subscribe page - what Premium gives, as a grid of short blocks */
.subscribe-benefits {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px 32px;
}

.subscribe-benefits li {
  padding-left: 16px;
  border-left: 4px solid var(--yellow);
}

/* a dot between two topic names */
.subscribe-topic + .subscribe-topic::before {
  content: "·";
  margin: 0 8px;
  color: var(--ink);
}

.subscribe-section > .subscribe-topics {
  max-width: none;
}

.subscribe-topic {
  font-family: var(--font-drawing), cursive;
  font-weight: 600;
  color: var(--teal);
}

/* subscribe page - the two plans. The yearly one has a thick edge and a sticker */
/* the title, the plans and the small print sit in the middle of the page */
#plans {
  text-align: center;
}

.subscribe-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 28px;
  margin: 24px auto 0;
  max-width: 760px;
  text-align: left;
}

.subscribe-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px;
  background: var(--panel-background);
  border: 2.5px dashed var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

.subscribe-plan-best {
  border-style: solid;
  box-shadow: var(--panel-edge-offset) var(--panel-edge-offset) 0 var(--ink);
}

.subscribe-plan .page-link {
  margin-top: auto;
}

.subscribe-plan-badge {
  position: absolute;
  top: -18px;
  right: 20px;
  margin: 0;
  padding: 2px 14px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50% 45% 52% 48% / 60% 55% 62% 58%;
  transform: rotate(3deg);
  font-family: var(--font-drawing), cursive;
  font-weight: 800;
}

.subscribe-plan-price {
  margin: 4px 0 8px;
  font-family: var(--font-drawing), cursive;
  font-weight: 800;
  font-size: 40px;
}

/* the monthly price, struck through before the price of the yearly plan: smaller and lighter */
.subscribe-plan-old-price {
  font-size: 24px;
  font-weight: 600;
  color: var(--ink-light);
}

/* a small line under a price: what the reader pays without the discount */
.price-note {
  margin: 0 0 8px;
  font-size: 13px;
  color: #b0b0b0fc;
}

.page-links + .price-note {
  margin-top: 10px;
}

.subscribe-plan-price span {
  font-size: 18px;
  font-weight: 600;
}

/* the small print under the plans: no bullets, one line each */
.subscribe-notes {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  font-size: 13px;
  color: #b0b0b0fc;
}

/* subscribe page - the refund promise in a yellow box */
.subscribe-guarantee {
  border-top: none;
}

.subscribe-section.subscribe-guarantee > p {
  max-width: none;
}

.subscribe-guarantee {
  padding: 28px;
  background: var(--yellow);
  border: 2.5px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

.subscribe-guarantee + .subscribe-section {
  margin-top: 40px;
}

/* subscribe page - who it is for, and who it is not for: two cards side by side, one under the other on a phone */
.subscribe-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 28px;
  margin-top: 24px;
}

.subscribe-fit-card {
  padding: 24px 28px;
  background: var(--panel-background);
  border: 2.5px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

/* the "yes" card stands out with the shadow of a panel, the "no" card is dashed and quieter */
.subscribe-fit-card-yes {
  box-shadow: var(--panel-edge-offset) var(--panel-edge-offset) 0 var(--ink);
}

.subscribe-fit-card-no {
  border-style: dashed;
}

.subscribe-fit-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.subscribe-fit-list li {
  display: flex;
  align-items: flex-start;
}

/* a teal tick before each yes, a coral cross before each no, in a hand-drawn circle */
.subscribe-fit-list li::before {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  text-align: center;
  line-height: 23px;
  font-weight: 800;
  color: var(--panel-background);
  border: 2px solid var(--ink);
  border-radius: 50% 45% 52% 48%;
}

.subscribe-fit-card-yes li::before {
  content: "✓";
  background: var(--teal);
}

.subscribe-fit-card-no li::before {
  content: "✗";
  background: var(--coral);
}

/* subscribe page - the questions, full width. Each one looks like a panel: a white sheet with a grey edge that sits a bit off.
   No line under it, so it never looks like the dashed lines between the sections. Each answer opens on a tap */
.subscribe-faq {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}

.subscribe-faq details {
  padding: 16px 20px;
  background: var(--panel-background);
  box-shadow: var(--panel-edge-offset) var(--panel-edge-offset) 0 var(--ink-light);
}

.subscribe-faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
}

.subscribe-faq details p {
  margin: 10px 0 0;
}

.subscribe-final {
  text-align: center;
}

.subscribe-final > p {
  margin-left: auto;
  margin-right: auto;
}

.subscribe-final .page-links {
  justify-content: center;
}

.subscribe-free .email-form {
  max-width: 560px;
  margin: 16px auto 0;
  justify-content: center;
}

/* subscribe page - the small line of legal links at the very bottom, in place of the footer */
.subscribe-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  padding: 24px 0 40px;
  font-size: 13px;
}

.subscribe-legal a {
  color: var(--ink);
}