/* The type, set with a little more care: Fraunces at its softest and most characterful for
   headings, a highlighter for the phrases that matter, small labels over each section, and the
   odd note in the margin in the same hand that draws the pond. Loaded after the other sheets. */

/* ---- the basics ---- */

/* the same names every sheet uses, for pages (the notes) whose own sheet doesn't set them */
:root {
  --display: Fraunces, Georgia, serif;
  --hand: Kalam, cursive;
  --accent-deep: #2c5c40;
}
@font-face {
  font-family: Kalam;
  src: url(fonts/kalam-regular.ttf) format("truetype");
  font-weight: 400;
  font-display: swap;
}

h1,
h2,
h3 {
  text-wrap: balance;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
p,
li,
summary {
  text-wrap: pretty;
}
h1 em,
h2 em {
  font-style: italic;
  font-weight: 480;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--accent);
}
h1 {
  letter-spacing: -0.035em;
}
h2 {
  letter-spacing: -0.025em;
}

/* a highlighter swipe, slightly uneven at the ends, that wraps cleanly across lines */
mark {
  color: inherit;
  padding: 0 0.18em;
  margin: 0 -0.08em;
  background:
    linear-gradient(100deg, transparent 0.6%, rgba(180, 216, 160, 0.75) 2.2%, rgba(196, 226, 176, 0.6) 40%, rgba(180, 216, 160, 0.72) 94%, transparent 99%)
    0 0.58em / 100% 0.52em no-repeat;
  border-radius: 0.4em 0.15em 0.5em 0.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* the little label over each section */
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: Figtree, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--accent);
}
.kicker::before {
  content: "";
  flex: none;
  width: 22px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M1 6 C 5 1, 8 9, 12 5 S 18 2, 21 5' fill='none' stroke='%233b7553' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.section-heading .kicker,
.questions-section > .kicker,
.essay > .kicker,
.story-copy > .kicker,
.frogs-hero .kicker,
.blog-hero .kicker {
  justify-content: center;
}

/* notes written in the margin, in the pond's hand */
.margin-note {
  font-family: var(--hand);
  font-size: 19px;
  line-height: 1.1;
  color: var(--accent-deep);
  pointer-events: none;
}
.note-arrow {
  display: block;
  width: 46px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- the hero ---- */

.hero-frog {
  grid-row: 1 / span 5;
}
.hero h1 {
  font-size: clamp(50px, 6vw, 84px);
  font-weight: 600;
  line-height: 0.98;
  margin-bottom: 20px;
}
.hero-lead {
  font-size: 25px;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.hero-description {
  font-size: 17px;
  color: #4d5a51;
}
.hero-note {
  position: absolute;
  left: -78px;
  top: 6%;
  margin: 0;
  transform: rotate(-7deg);
}
.hero-note .note-arrow {
  margin: 2px 0 0 52px;
}

/* ---- the idea ---- */

.story-section {
  text-align: left;
}
.story-copy h2 {
  text-align: center;
  font-size: clamp(36px, 4.4vw, 48px);
  line-height: 1.08;
}
.story-copy p {
  font-size: 17.5px;
  line-height: 1.8;
  color: #36433b;
}
/* a big soft initial on the opening paragraph */
.dropcap::first-letter {
  float: left;
  margin: 0.07em 0.1em 0 -0.02em;
  font-family: var(--display);
  font-size: 4.1em;
  font-weight: 600;
  line-height: 0.82;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--accent);
}
/* the line worth stopping on */
.pull {
  position: relative;
  margin: 34px 0;
  padding: 0 8px;
  text-align: center;
}
.pull p {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(25px, 3.2vw, 32px) !important;
  font-weight: 420;
  line-height: 1.32 !important;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--accent-deep) !important;
}
.pull::before,
.pull::after {
  position: absolute;
  font-family: var(--hand);
  font-size: 84px;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.pull::before {
  content: "\201C";
  left: -28px;
  top: -22px;
}
.pull::after {
  content: "\201D";
  right: -22px;
  bottom: -62px;
}
.story-copy .source-note {
  font-size: 15px !important;
  line-height: 1.7;
}
.note-label {
  display: block;
  margin-bottom: 2px;
  font-family: var(--hand);
  font-size: 19px;
  font-weight: 700;
  color: var(--accent-deep);
}

/* ---- what we're trying: three numbered steps ---- */

.essay {
  max-width: 1000px;
}
.trying {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.trying li {
  position: relative;
  padding: 24px 24px 22px;
}
.trying .num {
  display: block;
  margin: -6px 0 2px;
  font-family: var(--hand);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  transform: rotate(-4deg);
  transform-origin: left center;
}
.trying li:nth-child(2) .num {
  transform: rotate(3deg);
}
.trying h3 {
  margin: 0 0 8px;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.trying p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #46534a;
}
@media (max-width: 820px) {
  .trying {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }
}

/* ---- pastimes and questions ---- */

.section-heading p:not(.kicker) {
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.activity-preview h3 {
  font-size: 26px;
  letter-spacing: -0.015em;
}
.activity-preview p {
  font-size: 16.5px;
}
.questions-list summary {
  font-family: var(--display);
  font-size: 18.5px;
  font-weight: 560;
  letter-spacing: -0.01em;
}
.questions-list details p {
  font-size: 16px;
  line-height: 1.75;
}

/* ---- the pond diary, on the home page ---- */

.diary {
  max-width: 700px;
  padding-block: 8px 72px;
}
.diary-page {
  position: relative;
  margin: 8px auto 0;
  padding: 34px 44px 26px;
  transform: rotate(-0.6deg);
}
/* a strip of tape holding the page down */
.diary-page::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 110px;
  height: 26px;
  transform: translateX(-50%) rotate(2.5deg);
  background: rgba(214, 226, 196, 0.72);
  border-left: 1px dashed rgba(90, 110, 80, 0.25);
  border-right: 1px dashed rgba(90, 110, 80, 0.25);
  z-index: 1;
}
.diary-date {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.diary-text {
  margin: 0;
  font-family: var(--hand);
  font-size: clamp(19px, 2.3vw, 22px);
  line-height: 1.62;
  color: #26332b;
  white-space: pre-line;
  text-wrap: pretty;
}
.diary-sign {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px 12px;
  margin: 18px 0 0;
}
.diary-author {
  font-family: var(--hand);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-deep);
}
.diary-model {
  font-size: 13px;
  color: var(--muted);
}
.diary-intro {
  max-width: 520px;
  margin: -6px auto 26px;
  font-size: 16.5px;
  line-height: 1.6;
  text-align: center;
  color: var(--muted);
}
/* until the first page exists, the sheet says so, more quietly */
.diary-text:not(.written) {
  color: var(--muted);
}
.diary-how {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 34px;
  max-width: 700px;
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
}
.diary-how li {
  position: relative;
  padding-left: 44px;
}
.diary-how .num {
  position: absolute;
  left: 0;
  top: -6px;
  font-family: var(--hand);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  transform: rotate(-4deg);
}
.diary-how h3 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 600;
}
.diary-how p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #46534a;
}
@media (max-width: 640px) {
  .diary-how {
    grid-template-columns: 1fr;
  }
}
.diary-about {
  max-width: 520px;
  margin: 22px auto 0;
  font-size: 14.5px;
  line-height: 1.65;
  text-align: center;
  color: var(--muted);
}
.diary-earlier {
  max-width: 600px;
  margin: 40px auto 0;
}
.diary-earlier-title {
  margin: 0 0 10px;
  font-family: var(--hand);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-deep);
  text-align: center;
}
.diary-earlier ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.diary-earlier li {
  padding: 12px 0;
  border-top: 1px dashed var(--line);
  font-size: 15px;
  line-height: 1.6;
}
.diary-earlier .when {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.diary-earlier q {
  font-family: var(--display);
  font-style: italic;
  color: #3a463e;
}
.diary-earlier .who {
  margin-left: 8px;
  font-family: var(--hand);
  color: var(--accent-deep);
}
@media (max-width: 640px) {
  .diary-page {
    padding: 28px 22px 20px;
    transform: none;
  }
}

/* ---- the closing line ---- */

.project-note p:first-child {
  text-wrap: balance;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.35;
  font-weight: 420;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.project-note .sign {
  margin-top: 18px;
  font-family: var(--hand);
  font-style: normal;
  font-size: 21px;
  color: var(--muted);
  transform: rotate(-2deg);
}

/* ---- the other pages' openings ---- */

.frogs-hero h1 {
  font-weight: 600;
}
.frogs-hero .lead {
  font-size: 18.5px;
  line-height: 1.65;
  text-wrap: pretty;
}

/* ---- the notes ---- */

main > .kicker {
  margin-bottom: 10px;
}
article h1 {
  font-size: clamp(38px, 5vw, 54px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.dek {
  font-size: clamp(20px, 2.4vw, 23px) !important;
  line-height: 1.45 !important;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  text-wrap: pretty;
}
article time,
.posts time {
  display: block;
  margin-bottom: 4px;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}
.body > p:first-of-type::first-letter {
  float: left;
  margin: 0.06em 0.1em 0 -0.02em;
  font-family: var(--display);
  font-size: 4.2em;
  font-weight: 600;
  line-height: 0.82;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--accent);
}
.body h2 {
  margin-top: 2.2em;
  font-size: 29px;
  letter-spacing: -0.02em;
}
.body h2::before {
  content: "";
  display: block;
  width: 34px;
  height: 12px;
  margin-bottom: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1 7 C 6 1, 11 11, 17 6 S 27 1, 33 6' fill='none' stroke='%233b7553' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
}
.body p,
.body li {
  line-height: 1.78;
  color: #2f3b33;
}
.posts a {
  font-size: 24px !important;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}

@media (max-width: 860px) {
  .hero-note {
    display: none;
  }
  .hero .kicker {
    justify-content: center;
    text-align: center;
  }
  .hero .kicker::before {
    display: none;
  }
  .hero-frog {
    grid-row: auto;
  }
}
@media (max-width: 640px) {
  .pull::before {
    left: -6px;
  }
  .pull::after {
    right: -2px;
  }
}

/* ---- the X link ---- */
.x-link {
  display: inline-grid !important;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border-radius: 50%;
  color: var(--ink);
}
.x-link svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.x-link:hover {
  color: var(--accent);
}
.footer-links {
  margin: 0;
  font-size: 15px;
}

/* ---- the live line under the hero ---- */
.alive {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  font-size: 14.5px;
  color: var(--muted);
}
.alive[hidden] {
  display: none;
}
.alive .dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(59, 117, 83, 0.45);
  animation: alive 2.2s ease-out infinite;
}
.alive b {
  color: var(--ink);
  font-weight: 600;
}
@keyframes alive {
  70% {
    box-shadow: 0 0 0 9px rgba(59, 117, 83, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 117, 83, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .alive .dot {
    animation: none;
  }
}
@media (max-width: 860px) {
  .alive {
    justify-content: center;
    text-align: left;
  }
}
.diary-all {
  display: block;
  margin: 26px auto 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}

/* ---- the diary archive ---- */
.diary-archive .day {
  margin: 40px 0 0;
}
.diary-archive .day h2 {
  margin: 0 0 14px;
  font-family: Figtree, sans-serif;
  font-size: 12.5px !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.diary-archive .day h2::before {
  display: none;
}
.diary-archive article {
  position: relative;
  margin: 0 0 16px;
  padding: 22px 26px 18px;
}
.diary-archive .text {
  margin: 0;
  font-family: var(--hand);
  font-size: 20px !important;
  line-height: 1.6 !important;
  white-space: pre-line;
  color: #26332b;
}
.diary-archive .sign {
  margin: 12px 0 0 !important;
  text-align: right;
  font-size: 13px !important;
  color: var(--muted);
}
.diary-archive .sign b {
  font-family: var(--hand);
  font-size: 19px;
  color: var(--accent-deep);
  margin-right: 8px;
}
.diary-archive .front {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
}
.diary-archive .empty {
  font-family: var(--hand);
  font-size: 20px;
  color: var(--muted);
}

/* ---- the 404 page ---- */
.lost {
  max-width: 560px;
  margin: 0 auto;
  padding: 60px 0 100px;
  text-align: center;
}
.lost img {
  width: 220px;
  height: auto;
}
.lost h1 {
  margin: 10px 0 12px;
  font-size: clamp(40px, 6vw, 60px);
}
.lost p {
  font-size: 17px;
  color: var(--muted);
}
.lost .links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
}