/* ==========================================================================
   Reading pages: the privacy policy and the 404. Same paper, no world.
   ========================================================================== */

.doc-inner {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  padding: calc(6.2rem + env(safe-area-inset-top)) var(--gutter) 5rem;
}
.back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 1.4rem .2rem;
  color: var(--note-ink);
  text-decoration: none;
  transform: rotate(-2deg);
  transition: transform .6s var(--ease-spring);
}
.back::before {
  content: "";
  width: 1.9rem; height: 1.2rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M28 12.5C20 13 12 11 3.4 5.2M3.4 5.2c3.4.2 6.3-.3 8.8-1.6M3.4 5.2c.9 3 2.4 5.6 4.3 7.7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%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 30 18'%3E%3Cpath d='M28 12.5C20 13 12 11 3.4 5.2M3.4 5.2c3.4.2 6.3-.3 8.8-1.6M3.4 5.2c.9 3 2.4 5.6 4.3 7.7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) { .back:hover { transform: rotate(-2deg) translateX(-3px); } }

.doc-card { width: 100%; }
.doc-card h1 {
  font-family: var(--font-display);
  font-weight: 880;
  font-size: clamp(2.4rem, 1.9rem + 2.2vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.012em;
  margin: 0 0 .9rem;
}
.doc-card h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 1.2rem + .5vw, 1.65rem);
  line-height: 1.15;
  margin: 2.2rem 0 .7rem;
  padding-top: 1.4rem;
  background: linear-gradient(90deg, var(--rule) 55%, transparent 55%) top left / 10px 1.5px repeat-x;
}
.doc-card h3 { font-weight: 800; font-size: 1.05rem; margin: 1.4rem 0 .4rem; }
.doc-card p { max-width: none; margin: 0 0 .9rem; }
.doc-card p + p { margin-top: 0; }
.doc-card ul { margin: 0 0 1rem; padding: 0; }
.doc-card li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .45rem;
}
.doc-card li::before {
  content: "";
  position: absolute;
  left: .15rem; top: .72em;
  width: .7rem; height: 2px;
  background: var(--red);
  border-radius: 2px;
  transform: rotate(-8deg);
}
.doc-card a { color: var(--note-ink); text-underline-offset: .2em; }
.doc-card .sub { color: var(--ink-2); font-size: var(--fs-small); margin: 0 0 1.6rem; }
.doc-card .box {
  position: relative;
  margin: 0 0 1.6rem;
  padding: 1.1rem 1.2rem .4rem;
  background: var(--card-2);
  box-shadow: 0 1px 0 rgb(var(--shadow) / .12), 0 10px 18px -12px rgb(var(--shadow) / calc(var(--sh-a) * 2.4));
  transform: rotate(-.6deg);
}
.doc-card .box::before {
  content: "";
  position: absolute;
  left: 50%; top: -.7rem;
  width: 5.2rem; height: 1.35rem;
  margin-left: -2.6rem;
  background: var(--tape);
  transform: rotate(3deg);
}

/* language switcher: two flags, lifted from the policy page as they were */
.langbar { display: flex; gap: 10px; margin: 0 0 1.4rem; }
.langbar button {
  padding: 0; border: 0; background: none; cursor: pointer;
  line-height: 0; border-radius: 4px;
}
.langbar svg {
  display: block; width: 34px; height: 21px; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--rule);
}
.langbar button[aria-pressed="false"] svg { filter: saturate(.15); opacity: .45; }
.langbar button[aria-pressed="true"] svg { box-shadow: 0 0 0 2px var(--ink); }
html[data-lang="bg"] [lang="en"],
html[data-lang="en"] [lang="bg"] { display: none; }
html:not([data-lang]) .langbar { display: none; }

/* ---- 404: a dead end ------------------------------------------------------ */
.nf-inner {
  max-width: 40rem;
  margin: 0 auto;
  padding: calc(5.6rem + env(safe-area-inset-top)) var(--gutter) 5rem;
  text-align: center;
}
.nf-scene { width: min(100%, 26rem); height: auto; margin: 0 auto 1.4rem; overflow: visible; }
.nf .label { justify-content: center; }
.nf h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 2rem + 3vw, 4.2rem);
  line-height: .98;
  letter-spacing: -.012em;
  margin: 0 0 .8rem;
  text-wrap: balance;
}
.nf p { max-width: 30rem; margin: 0 auto 1.8rem; color: var(--ink-2); text-wrap: pretty; }
.nf .actions { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; justify-content: center; align-items: center; }
.nf .link-hand { color: var(--note-ink); text-decoration: none; }

.nf-scene .s-asph { fill: var(--asph); }
.nf-scene .s-curb { fill: var(--curb); }
.nf-scene .s-paint { stroke: var(--paint); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.nf-scene .s-edge { stroke: var(--paint); stroke-width: 1.4; fill: none; opacity: .8; }
.nf-scene .s-lawn { fill: var(--g5); }
.nf-scene .s-lawn2 { fill: var(--g6); }
.nf-scene .s-core { fill: var(--core); }
.nf-scene .s-sh { fill: rgb(var(--shadow) / var(--sh-a)); }
.nf-scene .s-red { fill: var(--red); }
.nf-scene .s-white { fill: #fbfaf5; }
.nf-scene .s-blue { fill: var(--blue); }
.nf-scene .s-pole { fill: var(--pole); }
.nf-scene .s-ink { stroke: var(--ink); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nf-scene .s-trail { stroke: var(--ink-3); fill: none; stroke-width: 1.4; stroke-dasharray: 3 5; stroke-linecap: round; }
.nf-scene .s-car { fill: var(--car); }
.nf-scene .s-roof { fill: var(--card); }
.nf-scene .s-glass { fill: var(--car-glass); }
.nf-scene .s-tree1 { fill: var(--g2); }
.nf-scene .s-tree2 { fill: var(--g4); }
.nf-scene .s-bark { fill: var(--bark); }