/* Article pages - the one stylesheet that owns the look of a story. Loaded last, after blog/daily, refinements and polish.
   Hand-drawn vocabulary only: an ink flourish, a thread with a diamond, numbered exhibits/plates, no side bars. */
.cat-wild {
  --sec: #e0707f;
  --sec2: #f2a8b1;
  --chap: "Chapter";
}
.cat-knowledge {
  --sec: #7aa2ff;
  --sec2: #bcd0ff;
  --chap: "Note";
}
.cat-onthisday {
  --sec: #3fd3ae;
  --sec2: #9be8d3;
  --chap: "Moment";
}

/* reading bar takes the section colour; a small quill rides at its tip */
.cat-wild .fs-reading-progress {
  background: linear-gradient(90deg, #d86a79, #f2a8b1);
}
.cat-knowledge .fs-reading-progress {
  background: linear-gradient(90deg, #5f8cf0, #bcd0ff);
}
.cat-onthisday .fs-reading-progress {
  background: linear-gradient(90deg, #2fbf9b, #9be8d3);
}
.fs-reading-quill {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  overflow: hidden;
  color: var(--sec2, #f1d893);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  will-change: transform;
}
.fs-reading-quill svg {
  display: block;
  width: 10px;
  height: 10px;
}

/* ---------- top of the story ---------- */
.cat-wild .fs-article-badge {
  color: var(--sec2);
  background: #d86a7918;
  border-color: #d86a7945;
}
.cat-knowledge .fs-article-badge {
  color: var(--sec2);
  background: #7aa2ff18;
  border-color: #7aa2ff45;
}
.fs-article-badge {
  gap: 7px;
}
/* the badge icon is drawn (a case folder / a lightbulb) instead of an emoji; the emoji text stays hidden */
.fs-article-emoji {
  flex: none;
  width: 15px;
  height: 15px;
  font-size: 0;
  line-height: 0;
  background: currentColor;
  -webkit-mask: var(--ico) center/contain no-repeat;
  mask: var(--ico) center/contain no-repeat;
}
.cat-wild .fs-article-emoji {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7v11a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V9.5a1 1 0 0 0-1-1h-8.2L9.6 5.5H4A1 1 0 0 0 3 6.5z'/%3E%3Cpath d='M7 13.5h6'/%3E%3C/svg%3E");
}
.cat-knowledge .fs-article-emoji {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
}
/* the category name is the way back up: it underlines itself like the footer links */
.fs-article-cat {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100%/0 1px no-repeat;
  transition: background-size 0.3s;
}
.fs-article-cat:hover,
.fs-article-cat:focus-visible {
  background-size: 100% 1px;
  outline: none;
}
.fs-article-tag {
  margin-left: 0.45rem;
  padding: 0.2rem 0.5rem;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  font: 800 0.58rem/1 var(--font-body, "DM Sans", sans-serif);
  letter-spacing: 0.16em;
}
.cat-wild .fs-article-tag {
  color: var(--sec);
  transform: rotate(-2deg);
}
.cat-knowledge .fs-article-tag {
  color: #9bb9ff;
  border-width: 1px;
  border-radius: 0;
  background: #0a1834aa;
}
.fs-article-title,
.ds-teaser {
  text-wrap: balance;
}

/* The teaser: a note in the margin. Plain gold-cream ink, and under it one stroke of the pen that draws itself
   and lifts off as a small leaf-nib in the section colour. No side bar. */
.fs-article-hook {
  position: relative;
  margin: 0 0 1.2rem;
  padding: 0 0 1.5rem;
  border: 0;
  color: #efe3b8;
  text-wrap: balance;
  font:
    italic 500 clamp(1.15rem, 4.6vw, 1.34rem)/1.5 "Cormorant Garamond",
    Georgia,
    serif;
}
.fs-article-hook::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.2rem;
  width: 184px;
  height: 12px;
  background: #e8c97a;
  opacity: 0.85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 184 12'%3E%3Ccircle cx='2.2' cy='7' r='1.9'/%3E%3Cpath d='M3 7C16 2 27 11.5 45 6.5S73 3 93 7s34 4 52 0 28-3 39 1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")
    left center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 184 12'%3E%3Ccircle cx='2.2' cy='7' r='1.9'/%3E%3Cpath d='M3 7C16 2 27 11.5 45 6.5S73 3 93 7s34 4 52 0 28-3 39 1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")
    left center/100% 100% no-repeat;
  animation: fs-flourish 1.1s 0.35s cubic-bezier(0.5, 0, 0.25, 1) both;
}
.fs-article-hook::before {
  content: "";
  position: absolute;
  left: 182px;
  bottom: 0.12rem;
  width: 17px;
  height: 13px;
  background: var(--sec, #e8c97a);
  transform-origin: 0 60%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 13'%3E%3Cpath d='M1 8.2C4 2.5 10 .8 16 1.8 14.5 8 9 12.2 1 8.2z'/%3E%3C/svg%3E")
    center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 13'%3E%3Cpath d='M1 8.2C4 2.5 10 .8 16 1.8 14.5 8 9 12.2 1 8.2z'/%3E%3C/svg%3E")
    center/100% 100% no-repeat;
  animation: fs-nib 0.45s 1.35s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
@keyframes fs-flourish {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes fs-nib {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-35deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.fs-article-meta {
  gap: 0.4rem 1rem;
}

/* drawn dividers: a pinned thread / a measured line / a dotted timeline */
.cat-wild .fs-article-divider {
  height: 14px;
  margin: 1.6rem 0;
  border-radius: 0;
  background:
    radial-gradient(circle, #d23a47 0 4.5px, transparent 5.5px) 50% 50%/14px
      14px no-repeat,
    repeating-linear-gradient(90deg, #d86a79aa 0 7px, transparent 7px 13px) 0
      50%/100% 2px no-repeat;
}
.cat-knowledge .fs-article-divider {
  height: 14px;
  margin: 1.6rem 0;
  border-radius: 0;
  background:
    radial-gradient(circle, #0b1a38 0 3.5px, #7aa2ff 4px 5.5px, transparent 6px)
      50% 50%/14px 14px no-repeat,
    linear-gradient(#7aa2ff, #7aa2ff) 0 50%/1px 12px no-repeat,
    linear-gradient(#7aa2ff, #7aa2ff) 100% 50%/1px 12px no-repeat,
    linear-gradient(#7aa2ff88, #7aa2ff88) 0 50%/100% 1px no-repeat;
}
.cat-onthisday .ds-divider {
  height: 14px;
  margin: 1.6rem 0;
  border-radius: 0;
  background:
    radial-gradient(circle, #2fbf9b 0 5px, transparent 6px) 50% 50%/14px 14px
      no-repeat,
    radial-gradient(circle, #2fbf9baa 0 1.5px, transparent 2px) 0 50%/10px 6px
      repeat-x;
}
.ds-year::after {
  content: "";
  display: block;
  width: 110px;
  height: 10px;
  margin-top: 0.15rem;
  background: var(--accent, #2fbf9b);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 6'%3E%3Cpath d='M1 3Q4 0 7 3T13 3T19 3T25 3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")
    left center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 6'%3E%3Cpath d='M1 3Q4 0 7 3T13 3T19 3T25 3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")
    left center/contain no-repeat;
}

/* ---------- reading comfort ---------- */
.fs-article-body,
.ds-body {
  font-size: 1.0625rem;
  line-height: 1.82;
  text-wrap: pretty;
  counter-reset: chap;
}
.fs-article-body a,
.ds-body a {
  color: var(--sec2, #e8c97a);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.fs-article-image-wrap,
.ds-image-wrap {
  border-radius: 14px;
  overflow: hidden;
}

/* Section headings: a thread with a diamond (the same ornament as the page header), a small numbered label
   in the section's own word - Chapter I, Note II, Moment I - then the heading. Counted by CSS, so no content changes. */
.fs-article-body h2,
.fs-article-body h3,
.ds-body h2,
.ds-body h3 {
  counter-increment: chap;
  position: relative;
  margin: 2.9rem 0 1rem;
  padding: 1.45rem 0 0;
  border: 0;
  font:
    700 clamp(1.5rem, 5.6vw, 1.8rem)/1.2 "Cormorant Garamond",
    Georgia,
    serif;
  color: #f2dc9b;
  text-wrap: balance;
}
.fs-article-body h2::before,
.fs-article-body h3::before,
.ds-body h2::before,
.ds-body h3::before {
  content: var(--chap, "Part") " " counter(chap, upper-roman);
  display: block;
  margin-bottom: 0.4rem;
  font: 700 0.62rem/1 var(--font-body, "DM Sans", sans-serif);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sec2, #e8c97a);
}
.fs-article-body h2::after,
.fs-article-body h3::after,
.ds-body h2::after,
.ds-body h3::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 190px;
  max-width: 100%;
  height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 9'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='11' y1='0' x2='190' y2='0'%3E%3Cstop offset='0' stop-color='%23e8c97a' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23e8c97a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11 4.5H190' stroke='url(%23g)' stroke-width='1'/%3E%3Cpath d='M4.5 .8 8.2 4.5 4.5 8.2.8 4.5z' fill='%2310231b' stroke='%23e8c97a' stroke-width='1'/%3E%3C/svg%3E")
    left center/100% 100% no-repeat;
}

/* One compact framed initial in every story. Inline layout keeps "In" and "On" connected;
   quotation marks remain outside the frame at the paragraph's normal size. Server-rendered only. */
.fs-initial {
  display: inline;
  vertical-align: baseline;
  margin: 0 0.1rem 0 0;
  padding: 0.025em 0.1em 0.015em;
  font:
    700 1.85em/1 "Cormorant Garamond",
    Georgia,
    serif;
  color: #f5f0e8;
  border: 1px solid var(--sec, #e8c97a);
  border-radius: 3px;
}
.cat-wild .fs-initial {
  color: var(--sec2);
  background: #d86a7910;
  border-color: #e0707faa;
  border-radius: 4px;
}
.cat-knowledge .fs-initial {
  background: #0a183480;
  border-color: #7aa2ff99;
  border-radius: 0;
}
.cat-onthisday .fs-initial {
  border: 1px dotted var(--sec);
  border-radius: 50%;
  padding: 0.04em 0.14em 0.025em;
}

/* ---------- end of the story ---------- */
.fs-endmark {
  position: relative;
  margin: 2.8rem 0 0.6rem;
  padding: 2.3rem 0 0.3rem;
  text-align: center;
  border: 0;
}
.fs-endmark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 220px;
  max-width: 80%;
  height: 12px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12'%3E%3Cpath d='M0 6H94M126 6H220' stroke='%23e8c97a' stroke-opacity='.5' stroke-linecap='round'/%3E%3Cpath d='M110 1l5 5-5 5-5-5z' fill='%2310231b' stroke='%23e8c97a'/%3E%3C/svg%3E")
    center/100% 100% no-repeat;
}
.fs-endmark-line {
  margin: 0 0 1.1rem;
  font:
    italic 600 1.3rem/1.3 "Cormorant Garamond",
    Georgia,
    serif;
  color: #f5f0e8;
}
.fs-endmark .next-story {
  margin: 0 0 0.6rem;
  text-align: left;
}
/* "Surprise me" is the quiet second choice, not a second button */
.fs-endmark-surprise {
  margin-top: 0.2rem;
  padding: 0.7rem 0.5rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: #cfd9c9;
  cursor: pointer;
  font: 600 0.85rem/1 var(--font-body, "DM Sans", sans-serif);
  letter-spacing: 0.02em;
  text-decoration: underline dotted;
  text-decoration-color: var(--sec, #e8c97a);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  transition:
    color 0.25s,
    transform 0.2s;
}
.fs-endmark-surprise:hover,
.fs-endmark-surprise:focus-visible {
  color: var(--sec2, #e8c97a);
  background: none;
  outline: none;
}
.fs-endmark-surprise:active {
  transform: scale(0.97);
}
.cat-wild .next-story,
.cat-knowledge .next-story,
.cat-onthisday .next-story {
  border-top-color: var(--sec);
}
.cat-wild .next-story small,
.cat-knowledge .next-story small,
.cat-onthisday .next-story small {
  color: var(--sec2);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.66rem;
}

/* Back link: a drawn arrow instead of a house emoji, readable, underlines itself on hover */
.fs-article-back,
.ds-back-bottom {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.2rem;
  padding: 0.55rem 0;
  font: 600 0.88rem/1 var(--font-body, "DM Sans", sans-serif);
  color: #cfd9c9;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 3px) / 0
    1px no-repeat;
  transition:
    color 0.2s,
    background-size 0.3s;
}
.fs-article-back:hover,
.fs-article-back:focus-visible,
.ds-back-bottom:hover,
.ds-back-bottom:focus-visible {
  color: #e8c97a;
  background-size: 100% 1px;
  outline: none;
}
.fs-back-ico {
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 13c-6 1.2-12-.2-17-1M9.5 6.5 4 12l5.5 5.5'/%3E%3C/svg%3E")
    center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 13c-6 1.2-12-.2-17-1M9.5 6.5 4 12l5.5 5.5'/%3E%3C/svg%3E")
    center/contain no-repeat;
}
.fs-article-back:hover .fs-back-ico,
.fs-article-back:focus-visible .fs-back-ico,
.ds-back-bottom:hover .fs-back-ico,
.ds-back-bottom:focus-visible .fs-back-ico {
  transform: translateX(-4px);
}

/* "More stories" cards: the series name only when it differs from the story you are reading, plus the reading time */
.fs-sidebar-card-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.35rem;
  font: 600 0.68rem/1.3 var(--font-body, "DM Sans", sans-serif);
  letter-spacing: 0.03em;
  text-transform: none;
  color: #b2c4b6;
}
.fs-sidebar-card-tag b {
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.fs-sidebar-card-tag b + span::before {
  content: "·";
  margin-right: 0.35rem;
}

/* ---------- phones: the first paragraph should be close to the first screen ---------- */
@media (max-width: 759px) {
  .fs-article {
    padding-top: 20px;
  }
  .fs-article-badge,
  .ds-badge {
    margin-bottom: 14px;
  }
  .fs-article-title,
  .ds-teaser {
    margin-bottom: 0.8rem;
  }
  .cat-wild .fs-article-divider,
  .cat-knowledge .fs-article-divider,
  .cat-onthisday .ds-divider {
    margin: 1.1rem 0;
  }
  .fs-article-body,
  .ds-body {
    font-size: 1.04rem;
    line-height: 1.8;
  }
  .fs-article-body h2,
  .fs-article-body h3,
  .ds-body h2,
  .ds-body h3 {
    margin-top: 2.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fs-reading-quill {
    transition: none;
  }
}