/* Home hero "het levende schrift" (/ and /en/ only). The red pen works a sum
   out on squared paper; markup is static-first, assets/js/hero-console.js
   adds typing, live re-solving and the write-in (.is-writing). Same cascade
   layer as the components in style.css. */
@layer components {
  .schrift-hero {
    padding: var(--s-6) 0 var(--s-7);
  }

  .schrift-hero__grid {
    display: grid;
    gap: var(--s-6);
  }

  .schrift-hero h1 {
    max-width: 13ch;
    margin: 0;
    font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  /* The teacher underlines the key words once, by hand. */
  .pen-under {
    padding-bottom: 0.1em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C40 4 90 3.5 132 5.5s52 2 66-1' fill='none' stroke='%23FF6B6E' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 0.28em no-repeat;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    animation: pen-under 700ms var(--ease-out) 350ms both;
  }

  /* one word ("Step-by-step") must not break at its hyphens */
  .pen-under--word {
    white-space: nowrap;
  }

  :root[data-theme="light"] .pen-under {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C40 4 90 3.5 132 5.5s52 2 66-1' fill='none' stroke='%23C41E2A' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  }

  @keyframes pen-under {
    from {
      background-size: 0% 0.28em;
    }
  }

  .schrift-hero .lede {
    max-width: 40ch;
    margin: var(--s-4) 0 0;
    color: var(--ink-2);
    font-size: var(--fs-md);
    line-height: 1.5;
  }

  .quick-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--s-3);
    margin-top: var(--s-5);
  }

  .quick-links__label {
    color: var(--ink-3);
    font-size: var(--fs-xs);
    font-weight: 600;
  }

  .quick-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--s-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .quick-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    font-size: var(--fs-sm);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    transition: text-decoration-color var(--t-ui) ease;
  }

  .quick-links a:hover {
    text-decoration-color: var(--pen);
  }

  /* ---------- the sheet ---------- */

  .sheet {
    --ln: 48px;
    --margin: 9.5rem;
    min-width: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-2);
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.05),
      0 32px 64px -44px rgba(10, 14, 22, 0.6);
  }

  .sheet__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-2) var(--s-4);
    border-bottom: 1px solid var(--line);
  }

  .sheet__levels-label {
    color: var(--ink-3);
    font-size: var(--fs-sm);
  }

  .sheet__levels {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-2);
  }

  .sheet__level {
    min-width: 58px;
    min-height: 44px;
    padding: 0 var(--s-3);
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition:
      background-color var(--t-ui) ease,
      color var(--t-ui) ease;
  }

  .sheet__level:hover {
    color: var(--ink);
  }

  .sheet__level[aria-selected="true"] {
    background: var(--ink);
    color: var(--paper);
  }

  .sheet__tip {
    margin-left: auto;
    color: var(--info);
    font-family: var(--font-note);
    font-size: 1.3rem;
    line-height: 1;
  }

  /* Squared paper with the red margin rule; every line is two squares tall. */
  .sheet__page {
    position: relative;
    min-height: calc(5 * var(--ln) + var(--s-5));
    padding: var(--s-2) 0 var(--s-4);
    background-image:
      linear-gradient(90deg, transparent calc(100% - var(--margin)), var(--margin-rule) calc(100% - var(--margin)), var(--margin-rule) calc(100% - var(--margin) + 1.5px), transparent calc(100% - var(--margin) + 1.5px)),
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 100% 100%, 24px 24px, 24px 24px;
  }

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

  .sheet__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--margin);
    align-items: end;
    min-height: var(--ln);
    padding-left: var(--s-5);
  }

  .sheet__line--sum:focus-within {
    box-shadow: inset 0 -2px 0 var(--pen);
  }

  .sheet__sum {
    width: 100%;
    min-width: 0;
    height: var(--ln);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    caret-color: var(--pen);
  }

  .sheet__sum:focus {
    outline: none;
  }

  .sheet__work,
  .sheet__eq {
    padding-bottom: 5px;
    color: var(--ink);
    font-family: var(--font-note);
    font-size: 1.85rem;
    line-height: 1;
  }

  .sheet__note {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 var(--s-3) 7px var(--s-4);
    color: var(--pen-strong);
    font-family: var(--font-note);
    font-size: 1.3rem;
    line-height: 1.05;
  }

  .sheet__note svg {
    width: 13px;
    height: 13px;
    flex: none;
  }

  .sheet__line--answer {
    grid-template-columns: auto minmax(0, 1fr) var(--margin);
    gap: var(--s-5);
    margin-top: var(--s-2);
  }

  .sheet__answer {
    position: relative;
    justify-self: start;
    display: inline-block;
    min-width: 4.5rem;
    text-align: center;
    padding: 0 0.75rem 2px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 2.125rem;
    font-weight: 700;
    line-height: var(--ln);
    font-variant-numeric: tabular-nums;
  }

  .sheet__circle {
    position: absolute;
    inset: -6px -18px;
    width: calc(100% + 36px);
    max-width: none; /* base svg { max-width: 100% } would shrink it */
    height: calc(100% + 12px);
    overflow: visible;
    pointer-events: none;
  }

  .sheet__circle path {
    fill: none;
    stroke: var(--pen);
    stroke-width: 2.4;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }

  .sheet__error {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    margin: var(--s-3) var(--s-5) 0;
    color: var(--pen-strong);
    font-size: var(--fs-sm);
    font-weight: 600;
  }

  .sheet__error::before {
    content: "!";
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 0.75rem;
    line-height: 1;
  }

  /* States: the level notes belong to the worked example only. */
  .sheet.is-live:not(.is-demo) .sheet__note--hint,
  .sheet.is-live:not(.is-demo) .sheet__note--trap,
  .sheet.is-typing .sheet__steps,
  .sheet.is-typing .sheet__line--answer,
  .sheet.is-typing .sheet__note--hint {
    visibility: hidden;
  }

  /* The pen writes each line left to right, then circles the answer. */
  .sheet.is-writing .sheet__steps .sheet__line,
  .sheet.is-writing .sheet__line--answer {
    animation: pen-write 520ms var(--ease-out) calc(var(--i, 0) * 340ms + 100ms) both;
  }

  .sheet.is-writing .sheet__circle path {
    animation: pen-circle 640ms var(--ease-out) calc(var(--i, 0) * 340ms + 420ms) both;
  }

  .sheet.is-writing.is-demo .sheet__note--trap {
    animation: note-in 360ms ease calc(var(--i, 0) * 340ms + 1000ms) both;
  }

  .sheet.is-writing.is-demo .sheet__note--hint {
    animation: note-in 360ms ease both;
  }

  @keyframes pen-write {
    from {
      clip-path: inset(-24px 100% -24px -24px);
    }
    to {
      clip-path: inset(-24px -24px -24px -24px);
    }
  }

  @keyframes pen-circle {
    from {
      stroke-dashoffset: 1;
    }
  }

  @keyframes note-in {
    from {
      opacity: 0;
      translate: -4px 0;
    }
  }

  /* Maths keys: the symbols a phone keyboard hides. */
  .sheet__keys {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    border-top: 1px solid var(--line);
  }

  .sheet__key {
    display: grid;
    place-items: center;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--t-press) ease;
  }

  .sheet__key:last-child {
    border-right: 0;
  }

  .sheet__key svg {
    width: 20px;
    height: 20px;
  }

  .sheet__key:hover {
    background: var(--sunk);
  }

  .sheet__key:active {
    background: var(--line);
  }

  .sheet__key--eq,
  .sheet__key--eq:hover {
    background: var(--ink);
    color: var(--paper);
  }

  @media (max-width: 599px) {
    .sheet {
      --margin: 7.25rem;
    }

    .sheet__line {
      padding-left: var(--s-4);
    }

    .sheet__work,
    .sheet__eq {
      font-size: 1.6rem;
    }

    .sheet__note {
      padding-left: var(--s-3);
      font-size: 1.1rem;
    }

    .sheet__tip {
      margin-left: 0;
    }

    .sheet__keys {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .sheet__key:nth-child(5) {
      border-right: 0;
    }

    .sheet__key:nth-child(-n + 5) {
      border-bottom: 1px solid var(--line);
    }
  }

  /* Doors (EN hero; NL uses the same list in #start). */
  .mode-chooser--hero {
    margin-top: var(--s-7);
  }

  @media (min-width: 1024px) {
    .schrift-hero {
      padding: var(--s-7) 0 var(--s-8);
    }

    .schrift-hero__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--s-7);
      align-items: center;
    }
  }

  @media (min-width: 1280px) {
    .schrift-hero__grid {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: var(--s-8);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pen-under,
    .sheet.is-writing .sheet__steps .sheet__line,
    .sheet.is-writing .sheet__line--answer,
    .sheet.is-writing .sheet__circle path,
    .sheet.is-writing .sheet__note {
      animation: none;
    }
  }
}

/* ---------- home body: "het schrift, per hoofdstuk" ----------
   Contents list with level filter, instrument shelf, the six-step path drawn
   by the pen, guide index cards, the nagekeken stamp and the FAQ. */
@layer components {
  .schrift-hero ~ .section {
    padding: var(--s-8) 0 0;
  }

  .schrift-hero ~ .section h2 {
    margin-bottom: var(--s-3);
    font-size: var(--fs-lg);
    letter-spacing: -0.03em;
  }

  .schrift-hero ~ .section h2 + p {
    max-width: 62ch;
    color: var(--ink-2);
  }

  /* Search as a written line. */
  .home-start .site-search label {
    color: var(--ink-3);
    font-size: var(--fs-sm);
  }

  .home-start .site-search-row {
    max-width: 44rem;
    border: 0;
    border-bottom: 2px solid var(--ink);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .home-start .site-search-row:focus-within {
    border-bottom-color: var(--pen);
    box-shadow: none;
  }

  .home-start .site-search input {
    min-height: 56px;
    padding-inline: 0;
    background: transparent;
    font-family: var(--font-display);
    font-size: var(--fs-md);
  }

  /* Topic loop: one ruled row per topic, three doors as chips. */
  .home-start h3 {
    margin: var(--s-7) 0 var(--s-2);
    font-size: var(--fs-base);
  }

  .home-topics {
    border-top: 1px solid var(--line-strong);
    line-height: 1.3;
  }

  .home-topics li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--line);
    font-size: 0; /* hides the ": " and " · " separators; children restore it */
  }

  .home-topics li > * {
    font-size: var(--fs-sm);
  }

  .home-topics strong {
    flex: 1 1 11rem;
    font-family: var(--font-display);
    font-size: var(--fs-base);
  }

  .home-topics a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--s-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--t-ui) ease, color var(--t-ui) ease;
  }

  @media (max-width: 599px) {
    .home-topics strong {
      flex-basis: 100%;
    }
  }

  .home-topics a:hover {
    border-color: var(--pen);
    color: var(--pen-strong);
  }

  /* ---------- level filter + contents list ---------- */
  .level-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin: var(--s-5) 0 var(--s-3);
  }

  .level-filter__group {
    display: inline-flex;
    gap: 2px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none; /* one row that scrolls on phones, like the calculator tabs */
    padding: 2px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-2);
    background: var(--surface);
  }

  .level-filter button {
    flex: none;
    min-width: 64px;
    min-height: 44px;
    padding: 0 var(--s-4);
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--t-ui) ease, color var(--t-ui) ease;
  }

  .level-filter button:hover {
    color: var(--ink);
  }

  .level-filter button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper);
  }

  .level-filter__count {
    margin: 0;
    color: var(--info);
    font-family: var(--font-note);
    font-size: 1.35rem;
    line-height: 1;
  }

  .contents-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 1.5px solid var(--ink);
  }

  .contents-list > a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 22px;
    grid-template-areas: "title tag arrow" "desc levels arrow";
    grid-column: auto;
    gap: 2px var(--s-4);
    align-items: center;
    min-height: 0;
    padding: var(--s-3) var(--s-2) var(--s-3) 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    transition: background-color var(--t-ui) ease;
  }

  .contents-list > a:hover {
    border-color: var(--line);
    background: color-mix(in srgb, var(--sunk) 70%, transparent);
    transform: none;
  }

  .contents-list h3 {
    grid-area: title;
    font-family: var(--font-display);
    font-size: 1.125rem;
    letter-spacing: -0.01em;
  }

  .contents-list p {
    grid-area: desc;
    color: var(--ink-2);
    font-size: var(--fs-sm);
    line-height: 1.45;
  }

  .contents-list .badge-row {
    grid-area: levels;
    justify-self: end;
    gap: 4px;
    margin: 0;
  }

  .contents-list .badge {
    padding: 1px 6px;
    font-size: 0.6875rem;
  }

  .contents-tag {
    grid-area: tag;
    justify-self: end;
    color: var(--ink-3);
    font-size: var(--fs-xs);
    font-weight: 600;
  }

  .contents-list > a::after,
  .tool-shelf > a::after {
    content: "";
    grid-area: arrow;
    width: 22px;
    height: 13px;
    background: var(--pen);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M1 7.5c6-.8 13-.6 21-.3M16 1.5c2.4 2 4.3 3.7 6 5.7-1.9 1.9-3.8 3.6-6.2 5.3' fill='none' stroke='%23000' stroke-width='1.8' 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 24 14'%3E%3Cpath d='M1 7.5c6-.8 13-.6 21-.3M16 1.5c2.4 2 4.3 3.7 6 5.7-1.9 1.9-3.8 3.6-6.2 5.3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.55;
    transition: translate var(--t-panel) var(--ease-out), opacity var(--t-ui) ease;
  }

  .contents-list > a:hover::after,
  .contents-list > a:focus-visible::after,
  .tool-shelf > a:hover::after,
  .tool-shelf > a:focus-visible::after {
    opacity: 1;
    translate: 4px 0;
  }

  /* Level highlight: other-level tools go pencil-grey (contrast kept: ink-3),
     the chosen level badge is ringed on the rest. */
  .contents-list > a.is-other-level h3,
  .contents-list > a.is-other-level p,
  .contents-list > a.is-other-level .contents-tag {
    color: var(--ink-3);
  }

  .contents-list[data-level="vmbo"] .badge-vmbo,
  .contents-list[data-level="havo"] .badge-havo,
  .contents-list[data-level="vwo"] .badge-vwo {
    outline: 1.5px solid currentColor;
    outline-offset: 1px;
  }

  .contents-list > a.is-in {
    animation: row-in 380ms var(--ease-out) calc(var(--n, 0) * 28ms) both;
  }

  @keyframes row-in {
    from {
      opacity: 0;
      translate: 0 8px;
    }
  }

  @media (min-width: 900px) {
    .contents-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--s-7);
    }
  }

  /* ---------- instrument shelf ---------- */
  .tool-shelf {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 1.5px solid var(--ink);
  }

  .tool-shelf > a {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 22px;
    grid-template-areas: "icon title arrow" "icon desc arrow";
    gap: 2px var(--s-4);
    align-items: center;
    min-height: 0;
    padding: var(--s-4) var(--s-2) var(--s-4) 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    transform: none;
  }

  .tool-shelf > a {
    box-shadow: none;
  }

  .tool-shelf > a:hover {
    border-color: var(--line);
    background: transparent;
    transform: none;
  }

  .tool-shelf h3 {
    grid-area: title;
    font-family: var(--font-display);
    font-size: 1.125rem;
  }

  .tool-shelf p {
    grid-area: desc;
    color: var(--ink-2);
    font-size: var(--fs-sm);
  }

  .tool-shelf .badge-row {
    display: none;
  }

  .tool-icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-2);
    background: var(--surface);
    color: var(--ink);
    transition: rotate var(--t-panel) var(--ease-out), translate var(--t-panel) var(--ease-out);
  }

  .tool-icon svg {
    width: 26px;
    height: 26px;
  }

  .tool-icon .ink-pen {
    stroke: var(--pen);
  }

  .tool-shelf > a:hover .tool-icon {
    rotate: -6deg;
    translate: 0 -2px;
  }

  @media (min-width: 720px) {
    .tool-shelf {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--s-7);
    }
  }

  /* ---------- six steps, drawn by the pen as you scroll ---------- */
  .path-track {
    --node: 34px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
    margin: var(--s-5) 0;
    padding: 0;
    counter-reset: path-step;
  }

  .path-track::before,
  .path-track::after {
    content: "";
    position: absolute;
    top: calc(var(--node) / 2);
    bottom: calc(var(--node) / 2);
    left: calc(var(--node) / 2 - 1px);
    width: 2px;
    background: var(--line-strong);
  }

  .path-track::after {
    background: var(--pen);
    transform-origin: 50% 0;
  }

  .path-track li {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: var(--node);
    padding: 0;
    border: 0;
    background: none;
    font-weight: 600;
  }

  .path-track li::before {
    content: counter(path-step);
    display: grid;
    place-items: center;
    flex: none;
    width: var(--node);
    height: var(--node);
    border: 1.5px solid var(--pen);
    border-radius: 50%;
    background: var(--paper);
    color: var(--pen-strong);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
  }

  @media (min-width: 720px) {
    .path-track {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 0;
    }

    .path-track::before,
    .path-track::after {
      top: calc(var(--node) / 2 - 1px);
      bottom: auto;
      left: calc(100% / 12);
      right: calc(100% / 12);
      width: auto;
      height: 2px;
    }

    .path-track::after {
      transform-origin: 0 50%;
    }

    .path-track li {
      flex-direction: column;
      gap: var(--s-2);
      text-align: center;
      font-size: var(--fs-sm);
    }
  }

  @supports (animation-timeline: view()) {
    .path-track::after {
      animation: path-draw linear both;
      animation-timeline: view();
      animation-range: cover 15% cover 50%;
    }

    .path-track li::before {
      animation: path-node step-end both;
      animation-timeline: view();
    }

    .path-track li:nth-child(1)::before { animation-range: cover 0% cover 15%; }
    .path-track li:nth-child(2)::before { animation-range: cover 0% cover 22%; }
    .path-track li:nth-child(3)::before { animation-range: cover 0% cover 29%; }
    .path-track li:nth-child(4)::before { animation-range: cover 0% cover 36%; }
    .path-track li:nth-child(5)::before { animation-range: cover 0% cover 43%; }
    .path-track li:nth-child(6)::before { animation-range: cover 0% cover 50%; }
  }

  @keyframes path-draw {
    from {
      transform: scale(0);
    }
  }

  /* before the pen reaches a step it is still pencil */
  @keyframes path-node {
    from {
      border-color: var(--line-strong);
      color: var(--ink-3);
    }
    to {
      border-color: var(--pen);
      background: var(--pen-wash);
      color: var(--pen-strong);
    }
  }

  /* ---------- guides: two index cards ---------- */
  .guide-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--s-5);
    margin-top: var(--s-4);
  }

  .guide-cards > a {
    padding: var(--s-5) var(--s-5) var(--s-6);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-1);
    background:
      linear-gradient(90deg, transparent 2.25rem, var(--margin-rule) 2.25rem, var(--margin-rule) calc(2.25rem + 1px), transparent calc(2.25rem + 1px)) 0 0 / 100% 100% no-repeat,
      var(--surface);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 18px 30px -24px rgba(10, 14, 22, 0.5);
    rotate: -0.6deg;
    transition: rotate var(--t-panel) var(--ease-out), translate var(--t-panel) var(--ease-out);
  }

  .guide-cards > a:nth-child(2) {
    rotate: 0.5deg;
  }

  .guide-cards > a:hover,
  .guide-cards > a:focus-visible {
    rotate: 0deg;
    translate: 0 -3px;
    transform: none;
  }

  .guide-cards > a > * {
    margin-left: 1.5rem;
  }

  /* ---------- sources: checked and signed ---------- */
  .home-sources {
    position: relative;
    padding: var(--s-5);
    border: 1px solid var(--line-strong);
    background: var(--surface);
  }

  .home-sources > p:first-child {
    max-width: 62ch;
  }

  .stamp {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin: var(--s-4) 0 0;
    padding: 4px 8px 4px 12px;
    border: 2px solid var(--pen);
    border-radius: 6px;
    color: var(--pen-strong);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    rotate: -4deg;
  }

  .stamp .paraaf {
    width: 52px;
    height: 24px;
  }

  @media (min-width: 900px) {
    .home-sources {
      padding-right: 14rem;
    }

    .stamp {
      position: absolute;
      top: 50%;
      right: var(--s-6);
      margin: 0;
      translate: 0 -50%;
    }
  }

  /* ---------- FAQ: question in pencil, answer slides open ---------- */
  .home-faq > .wrap,
  .home-faq:not(:has(> .wrap)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .home-faq summary {
    min-height: 56px;
    padding: var(--s-4) 0;
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }

  .faq-plus {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--pen);
    transition: rotate var(--t-panel) var(--ease-out);
  }

  /* no fallback chevron: the plus turns into a cross */
  .home-faq summary:not(:has(.faq-chevron))::after {
    content: none;
  }

  .home-faq details[open] .faq-plus {
    rotate: 45deg;
  }

  .home-faq details > p {
    max-width: 62ch;
    padding-bottom: var(--s-5);
    font-size: var(--fs-base);
  }

  @supports selector(::details-content) {
    .home-faq details {
      interpolate-size: allow-keywords;
    }

    .home-faq details::details-content {
      height: 0;
      overflow: clip;
      transition:
        height var(--t-panel) var(--ease-out),
        content-visibility var(--t-panel) allow-discrete;
    }

    .home-faq details[open]::details-content {
      height: auto;
    }
  }

  @media (min-width: 1024px) {
    .home-faq > .wrap,
    .home-faq:not(:has(> .wrap)) {
      grid-template-columns: 16rem minmax(0, 1fr);
      column-gap: var(--s-8);
    }

    .home-faq h2 {
      grid-column: 1;
      grid-row: 1 / span 6;
      align-self: start;
      position: sticky;
      top: calc(52px + var(--s-5));
    }

    .home-faq details {
      grid-column: 2;
    }

    .home-faq h2 + details {
      border-top: 1px solid var(--line);
    }
  }

  /* ---------- EN: topic jump chips ---------- */
  .jump-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: 0 0 var(--s-6);
  }

  .jump-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--s-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--t-ui) ease;
  }

  .jump-chips a:hover {
    border-color: var(--pen);
  }

  .home-prose {
    margin-top: var(--s-7);
    padding-top: var(--s-6);
    border-top: 1.5px solid var(--ink);
  }

  @media (prefers-reduced-motion: reduce) {
    .contents-list > a.is-in,
    .path-track::after,
    .path-track li::before {
      animation: none;
    }

    .faq-plus,
    .tool-icon,
    .guide-cards > a {
      transition: none;
    }

    .home-faq details::details-content {
      transition: none;
    }
  }
}

/* Unlayered on purpose: search.css is unlayered, and unlayered rules beat every
   cascade layer, so the home search restyle must be unlayered too. */
.home-start .site-search {
  max-width: 44rem;
}

.home-start .site-search-row {
  padding: 0;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
}

.home-start .site-search-row:focus-within {
  outline: none;
  border-bottom-color: var(--pen);
  box-shadow: 0 2px 0 var(--pen);
}