@font-face {
  font-family: "Care Round";
  src: url("../fonts/reem-kufi-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
:root {
  --ink: #4b4b4b;
  --paper: #ffffff;
  --tile: #e5e5e5;
  --green: #58cc02;
  --ledge: #58a700;
  --lime: #89e219;
  --red: #ff4b4b;
  --orange: #ff9600;
  --yellow: #ffc800;
  --blue: #1cb0f6;
  --deep: #243e15;
  --line: #d4d4d4;
  font-family: "Care Round", "Arial Rounded MT Bold", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; font-size: 18px; line-height: 1.65; font-weight: 400; }
main, article, section, div, nav { min-width: 0; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.18; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.85rem); letter-spacing: -.025em; max-width: 19ch; }
h2 { font-size: clamp(1.65rem, 2.6vw, 2.15rem); letter-spacing: -.015em; }
h3 { font-size: 1.4rem; }
p, li { overflow-wrap: break-word; }
strong { font-weight: 700; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .2em; }
button, summary, input, select { font: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--deep); outline-offset: 5px; }
:target { scroll-margin-top: 24px; }
.w { max-width: 1176px; margin-inline: auto; padding-inline: 28px; }
.cap { display: block; font-weight: 700; font-size: 16px; letter-spacing: .07em; text-transform: uppercase; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mark { display: flex; align-items: center; gap: 14px; padding-block: 28px 12px; font-size: 17px; font-weight: 700; }
.seed { display: block; width: 26px; height: 26px; border: 6px solid var(--ledge); border-radius: 9px 16px 9px 16px; transform: rotate(-16deg); }
.lost { padding-block: 60px 90px; max-width: 850px; }
.lost > * + * { margin-top: 24px; }
@media (max-width: 640px) {
  body { font-size: 18px; line-height: 1.6; }
  .w { padding-inline: 20px; }
  .mark { padding-block: 20px 8px; font-size: 16px; }
  h1 { max-width: 20ch; }
  .lost { padding-block: 44px 64px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}