@layer components {
  .icon {
    inline-size: 1.25em;
    block-size: 1.25em;
    flex: none;
  }

  .skip-link {
    position: fixed;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: 300;
    padding: var(--space-2) var(--space-4);
    background: var(--yellow);
    color: var(--on-yellow);
    border: var(--border) solid #000000;
    border-radius: var(--radius-button);
    font-weight: 700;
    transform: translateY(-200%);
  }
  .skip-link:focus {
    transform: none;
  }

  /* ── Cards ─────────────────────────────────────────────── */
  .card {
    position: relative;
    background: var(--paper);
    color: var(--ink);
    border: var(--border-lg) solid var(--ink);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
  }
  .card[class*='tone-'] {
    border-color: #000000;
  }
  @media (prefers-reduced-motion: no-preference) {
    .card--press {
      transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
    }
  }
  .card--press:hover {
    transform: translate(var(--shadow-offset-sm), var(--shadow-offset-sm));
    box-shadow: none;
  }
  .card-strip {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 0.9rem;
    border-block-end: var(--border) solid #000000;
    border-start-start-radius: calc(var(--radius-card) - var(--border-lg));
    border-start-end-radius: calc(var(--radius-card) - var(--border-lg));
  }

  /* ── Pressable pills and buttons: heavy bottom/right borders that shrink when pressed ── */
  .pill,
  .btn,
  .icon-btn,
  .theme-toggle,
  .navbar__toggle {
    --press: var(--border-press);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 44px;
    border: var(--border) solid #000000;
    border-block-end-width: var(--press);
    border-inline-end-width: var(--press);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
  }
  @media (prefers-reduced-motion: no-preference) {
    .pill,
    .btn,
    .icon-btn,
    .theme-toggle,
    .navbar__toggle {
      transition:
        transform 0.1s ease,
        border-width 0.1s ease;
    }
  }
  :is(.pill, .btn, .icon-btn, .theme-toggle, .navbar__toggle):is(:hover, :active) {
    border-block-end-width: var(--border);
    border-inline-end-width: var(--border);
    transform: translate(2px, 2px);
  }
  :is(.pill, .btn, .icon-btn, .theme-toggle, .navbar__toggle):active {
    transform: translate(3px, 3px);
  }
  /* Disabled buttons look it, and don't press. */
  :is(.pill, .btn, .icon-btn):is(:disabled, [aria-disabled='true']) {
    border-block-end-width: var(--press);
    border-inline-end-width: var(--press);
    opacity: 0.55;
    transform: none;
    cursor: not-allowed;
  }

  .pill {
    padding: var(--space-1) var(--space-4);
    background: #ffffff;
    color: #000000;
    border-radius: var(--radius-pill);
  }
  .pill[aria-current='true'] {
    background: var(--yellow);
    color: var(--on-yellow);
  }
  .pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .btn {
    padding: var(--space-2) var(--space-6);
    background: #ffffff;
    color: #000000;
    border-radius: var(--radius-button);
    font-size: 1.05rem;
    font-weight: 900;
  }
  .btn--block {
    inline-size: 100%;
  }
  .btn--small {
    min-block-size: 40px;
    padding: var(--space-1) var(--space-4);
    font-size: 0.9rem;
  }
  .btn--ink {
    background: #000000;
    color: #ffffff;
  }

  .icon-btn {
    inline-size: 44px;
    padding: 0;
    background: #ffffff;
    color: #000000;
    border-radius: 10px;
  }
  .icon-btn--ink {
    background: #000000;
    color: #ffffff;
  }

  /* ── Labels ────────────────────────────────────────────── */
  .section-title {
    justify-self: start;
    inline-size: fit-content;
    padding: var(--space-1) var(--space-6);
    border: var(--border-lg) solid #000000;
    border-radius: var(--radius-pill);
    box-shadow: 4px 4px 0 #000000;
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    rotate: -1deg;
  }

  .chip {
    display: inline-block;
    padding: 0 var(--space-2);
    border: var(--border) solid #000000;
    border-radius: var(--radius-tag);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.6;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .tag {
    padding: 0 var(--space-2);
    border: var(--border) solid var(--ink);
    border-radius: var(--radius-tag);
    font-family: var(--font-mono);
    font-size: 0.8rem;
  }

  .highlight {
    padding: 0 0.2em;
    background: #ffffff;
    color: #000000;
    border: 1px solid #000000;
    border-radius: 4px;
  }

  .badge-card {
    justify-self: start;
    padding: var(--space-3) var(--space-4);
    background: #ffffff;
    color: #000000;
    border: var(--border) solid #000000;
    border-radius: var(--radius-button);
    box-shadow: 4px 4px 0 #000000;
    font-weight: 700;
  }

  .badge-featured {
    display: inline-block;
    padding: 0 var(--space-3);
    background: var(--red);
    color: var(--on-red);
    border: var(--border) solid #000000;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  @media (prefers-reduced-motion: no-preference) {
    .fx-pulse .badge-featured {
      animation: fx-pulse 1.6s ease-in-out infinite;
    }
  }
  @keyframes fx-pulse {
    50% {
      transform: scale(1.08) rotate(-3deg);
    }
  }

  /* ── Social links ──────────────────────────────────────── */
  .social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .social--icons .social__link {
    display: inline-grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    background: #ffffff;
    color: #000000;
    border: var(--border) solid #000000;
    border-radius: 50%;
    box-shadow: 3px 3px 0 #000000;
  }
  .social--icons .social__link:hover {
    background: var(--yellow);
    transform: translate(2px, 2px);
    box-shadow: none;
  }
  .social--buttons .social__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 44px;
    padding: var(--space-1) var(--space-4);
    background: var(--social-tone, var(--pink));
    color: #000000;
    border: var(--border) solid #000000;
    border-block-end-width: 5px;
    border-inline-end-width: 5px;
    border-radius: var(--radius-button);
    font-weight: 700;
    text-decoration: none;
  }
  .social--buttons li:nth-child(5n + 2) {
    --social-tone: var(--yellow);
  }
  .social--buttons li:nth-child(5n + 3) {
    --social-tone: var(--green);
  }
  .social--buttons li:nth-child(5n + 4) {
    --social-tone: var(--purple);
  }
  .social--buttons li:nth-child(5n + 5) {
    --social-tone: var(--blue);
  }
  .social--buttons .social__link:hover {
    border-block-end-width: var(--border);
    border-inline-end-width: var(--border);
    transform: translate(2px, 2px);
  }

  /* ── Scroll progress ───────────────────────────────────── */
  .progress {
    display: none;
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 120;
    block-size: 8px;
    background: var(--yellow);
    border-block-end: 2px solid #000000;
  }
  .js .progress {
    display: block;
  }
  .progress__bar {
    block-size: 100%;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
  }
  :dir(rtl) .progress__bar {
    transform-origin: right;
  }

  /* ── Navbar ────────────────────────────────────────────── */
  .site-header {
    padding: var(--space-4) var(--gutter) 0;
  }
  .js .site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
  }
  @media (min-width: 48rem) {
    .site-header {
      position: fixed;
      inset-block-start: 0;
      inset-inline: 0;
      z-index: 100;
    }
  }
  .navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    inline-size: min(100%, var(--container));
    margin-inline: auto;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6);
    background: var(--purple);
    color: var(--on-purple);
    border: var(--border-lg) solid #000000;
    border-radius: var(--radius-card);
    box-shadow: 6px 6px 0 #000000;
  }
  .navbar__logo {
    font-family: var(--font-display);
    font-size: 1.7rem;
    line-height: 1;
    color: #ffffff;
    text-decoration: none;
    text-shadow:
      2px 2px 0 #000000,
      -1px -1px 0 #000000,
      1px -1px 0 #000000,
      -1px 1px 0 #000000;
  }
  .navbar__menu,
  .navbar__links,
  .navbar__extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }
  .navbar__toggle,
  .theme-toggle {
    inline-size: 44px;
    padding: 0;
    background: #ffffff;
    color: #000000;
    border-radius: 50%;
  }
  .navbar__toggle[aria-expanded='false'] .icon--close,
  .navbar__toggle[aria-expanded='true'] .icon--open,
  :root[data-theme='dark'] .theme-toggle .icon--moon,
  :root:not([data-theme='dark']) .theme-toggle .icon--sun {
    display: none;
  }
  @media (max-width: 47.99rem) {
    .js .navbar__menu {
      display: none;
      position: absolute;
      inset-block-start: calc(100% + var(--space-3));
      inset-inline: 0;
      flex-direction: column;
      align-items: stretch;
      padding: var(--space-4);
      background: var(--paper);
      color: var(--ink);
      border: var(--border-lg) solid #000000;
      border-radius: var(--radius-card);
      box-shadow: 6px 6px 0 #000000;
    }
    .js .navbar__menu[data-open] {
      display: flex;
    }
    .js .navbar__links {
      flex-direction: column;
      align-items: stretch;
    }
  }
  @media (min-width: 48rem) {
    .navbar {
      border-radius: var(--radius-pill);
    }
    .navbar__toggle {
      display: none;
    }
  }

  .date-chip {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding: 0 var(--space-3);
    background: var(--yellow);
    color: var(--on-yellow);
    border: var(--border) solid #000000;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .date-chip__cursor {
    margin-inline-start: 0.2em;
  }
  @media (prefers-reduced-motion: no-preference) {
    .date-chip__cursor {
      animation: fx-blink 1s steps(1) infinite;
    }
  }
  @keyframes fx-blink {
    50% {
      opacity: 0;
    }
  }

  /* ── Footer ────────────────────────────────────────────── */
  .site-footer {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--gutter);
    background: #000000;
    color: #ffffff;
    text-align: center;
    border-block-start: var(--border-lg) solid #000000;
  }
  .site-footer__line {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--pink);
  }
  .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
  }

  /* ── Forms ─────────────────────────────────────────────── */
  .field {
    display: grid;
    gap: var(--space-1);
  }
  .field__label {
    font-weight: 700;
  }
  .field__optional {
    font-weight: 400;
    font-size: 0.9em;
  }
  .field__input {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 44px;
    padding: var(--space-2) var(--space-3);
    background: var(--paper);
    color: var(--ink);
    border: var(--border) solid var(--ink);
    border-radius: var(--radius-button);
    box-shadow: 3px 3px 0 var(--ink);
  }
  .field__input:focus-visible {
    outline-offset: 2px;
  }
  .field__input[aria-invalid='true'] {
    border-color: var(--red);
    box-shadow: 3px 3px 0 var(--red);
  }
  textarea.field__input {
    resize: vertical;
  }
  .hp {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .form-status:empty {
    display: none;
  }
  .form-status {
    padding: var(--space-2) var(--space-3);
    background: #ffffff;
    color: #000000;
    border: var(--border) solid #000000;
    border-radius: var(--radius-button);
    font-weight: 700;
  }

  .form-status--error {
    background: var(--red);
    color: var(--on-red);
  }
  .field__hint {
    font-size: 0.9rem;
  }
  .field__error {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
  }
  .field__error::before {
    content: '⚠ ';
  }
  .field--check {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2) var(--space-3);
  }
  .field--check .field__error {
    grid-column: 1 / -1;
  }
  .field__check {
    inline-size: 1.4rem;
    block-size: 1.4rem;
    accent-color: var(--ink);
  }
  .search-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .search-form .field__input {
    flex: 1 1 14rem;
    inline-size: auto;
  }
  .link-button {
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
  }
  .pill[aria-current='page'] {
    background: var(--yellow);
    color: var(--on-yellow);
  }
  .empty-state {
    display: grid;
    gap: var(--space-3);
  }

  .contact-form,
  .comment-form {
    display: grid;
    gap: var(--space-4);
  }
  .contact-form .btn,
  .comment-form .btn {
    justify-self: start;
  }

  /* ── Contact dialog ────────────────────────────────────── */
  .contact-dialog {
    inline-size: min(100% - 2 * var(--gutter), 38rem);
    max-block-size: calc(100dvh - 2rem);
    padding: 0;
    color: var(--ink);
    background: transparent;
    border: none;
    overflow: visible;
  }
  .contact-dialog::backdrop {
    background: rgb(10 8 30 / 0.6);
    backdrop-filter: blur(6px);
  }
  .contact-dialog__card {
    display: grid;
    gap: var(--space-4);
    max-block-size: calc(100dvh - 2rem);
    overflow: auto;
    padding: var(--space-6);
    background: var(--paper);
    border: var(--border-lg) solid var(--ink);
    border-radius: var(--radius-card);
    box-shadow: 8px 8px 0 var(--ink);
  }
  @media (prefers-reduced-motion: no-preference) {
    .contact-dialog[open] .contact-dialog__card {
      animation: fx-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
  }
  @keyframes fx-pop {
    from {
      opacity: 0;
      transform: translateY(2rem) scale(0.9) rotate(-2deg);
    }
  }
  .contact-dialog__close-form {
    justify-self: end;
    margin-block-end: calc(-1 * var(--space-8));
  }
  .contact-dialog__title {
    font-size: 2rem;
    padding-inline-end: 3rem;
  }

  /* ── Preloader (created by JavaScript, first visit per session only) ── */
  html[data-preload] body > :not(.preloader) {
    visibility: hidden;
    /* Safety net: content appears even if the script never runs. */
    animation: fx-reveal 0s linear 1.2s forwards;
  }
  @keyframes fx-reveal {
    to {
      visibility: visible;
    }
  }
  .preloader {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    place-items: center;
    background: var(--page);
    transition: transform 0.18s ease-in;
  }
  .preloader.is-leaving {
    transform: translateY(-100%);
  }
  .preloader__box {
    display: grid;
    gap: var(--space-3);
    inline-size: min(80vw, 22rem);
    padding: var(--space-6);
    background: var(--paper);
    color: var(--ink);
    border: var(--border-lg) solid var(--ink);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
  }
  .preloader.is-jerk .preloader__box {
    animation: fx-jerk 0.14s ease-in-out;
  }
  @keyframes fx-jerk {
    50% {
      transform: translate(4px, -4px) rotate(-2deg);
    }
  }
  .preloader__label {
    font-family: var(--font-mono);
    font-weight: 700;
  }
  .preloader__bar {
    block-size: 1.5rem;
    overflow: hidden;
    background: var(--paper);
    border: var(--border) solid var(--ink);
    border-radius: var(--radius-pill);
  }
  .preloader__fill {
    block-size: 100%;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.4, 1);
  }
  .preloader.is-filling .preloader__fill {
    transform: scaleX(1);
  }

  /* ── Custom cursor: fine pointers only, never on text fields, never with reduced motion ── */
  @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .fx-cursor,
    .fx-cursor :is(a, button, summary, label, select, [role='button']) {
      cursor:
        url('/img/cursor.svg') 3 2,
        auto;
    }
    .fx-cursor :is(input, textarea, [contenteditable]) {
      cursor: text;
    }
    .fx-cursor :is(input[type='range'], input[type='checkbox'], input[type='radio']) {
      cursor: pointer;
    }
  }

  /* Rich text rendered from the block editor. */
  .prose > * + * {
    margin-block-start: var(--space-3);
  }
  .prose :is(ul, ol) {
    display: grid;
    gap: var(--space-2);
    padding-inline-start: 1.25rem;
  }
  .prose li::marker {
    color: var(--ink);
    font-weight: 900;
  }
  .prose .checklist {
    list-style: none;
    padding-inline-start: 0;
  }
}

@layer utilities {
  /* Palette tones win over component backgrounds: background plus its readable text color. */
  .tone-pink {
    background: var(--pink);
    color: var(--on-pink);
  }
  .tone-purple {
    background: var(--purple);
    color: var(--on-purple);
  }
  .tone-blue {
    background: var(--blue);
    color: var(--on-blue);
  }
  .tone-red {
    background: var(--red);
    color: var(--on-red);
  }
  .tone-yellow {
    background: var(--yellow);
    color: var(--on-yellow);
  }
  .tone-green {
    background: var(--green);
    color: var(--on-green);
  }
  .tone-paper {
    background: var(--paper);
    color: var(--ink);
  }
  .tone-ink {
    background: var(--ink);
    color: var(--paper);
  }

  /* `hidden` always wins, even over components that set their own display. */
  [hidden]:not([hidden='until-found']) {
    display: none !important;
  }

  .visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  /* Reduced motion: every animation and transition finishes instantly. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}