@layer components {

  :root {
    --header-h: 4.25rem;
  }

  @media (min-width: 62.5625rem) {
    :root { --header-h: 5rem; }
  }

  .skip-link {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: var(--z-toast);
    display: inline-block;
    padding: var(--s-3) var(--s-5);
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    background-image: none;
    transform: translateY(-110%);
    transition: transform var(--dur) var(--ease);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
    outline-offset: -4px;
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background: var(--paper);
    border-block-end: var(--bw) solid transparent;
    transition: border-color var(--dur) var(--ease);
  }

  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in oklab, var(--paper) 88%, transparent);
    transition: background-color var(--dur) var(--ease);
  }

  @supports (backdrop-filter: blur(1px)) {
    .site-header::before {
      backdrop-filter: blur(14px) saturate(140%);
    }
  }

  .site-header[data-scrolled] {
    border-block-end-color: var(--rule);
  }

  .site-header[data-scrolled]::before {
    background: color-mix(in oklab, var(--paper) 94%, transparent);
  }

  [data-nav-open] .site-header::before {
    background: var(--paper);
  }

  @supports (animation-timeline: scroll(root block)) {
    .site-header::after {
      content: "";
      position: absolute;
      inset-block-end: calc(var(--bw) * -1);
      inset-inline-start: 0;
      inline-size: 100%;
      block-size: var(--bw-strong);
      background: var(--accent);
      transform-origin: 0 50%;
      scale: 0 1;
      pointer-events: none;
      animation: bsd-scroll-progress linear both;
      animation-timeline: scroll(root block);
    }

    @keyframes bsd-scroll-progress {
      from { scale: 0 1; }
      to   { scale: 1 1; }
    }
  }

  .site-header__inner {
    width: min(100% - (var(--page-margin) * 2), var(--container));
    margin-inline: auto;
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    gap: var(--s-5);
  }

  .wordmark {
    display: flex;
    align-items: center;
    margin-inline-end: auto;
    background-image: none;
    padding-block-end: 0;
    color: var(--ink);
    flex-shrink: 0;
  }

  .wordmark__logo {
    --logo-h: 2.25rem;
    display: block;
    flex-shrink: 0;
    block-size: var(--logo-h);
    inline-size: calc(var(--logo-h) * 175.76 / 76);
    background: var(--logo-url) center / contain no-repeat;
    transition: opacity var(--dur) var(--ease);
  }

  @media (min-width: 1000px) {
    .wordmark__logo { --logo-h: 2.625rem; }
  }

  .wordmark--footer .wordmark__logo { --logo-h: 3.25rem; }

  @media (hover: hover) and (pointer: fine) {
    a.wordmark:hover .wordmark__logo {
      opacity: 0.72;
    }

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

  a.wordmark:active .wordmark__logo {
    opacity: 0.6;
  }

  .wordmark__fallback {
    display: none;
    align-items: center;
    gap: var(--s-3);
  }

  @media print, (forced-colors: active) {
    .wordmark__logo { display: none; }
    .wordmark__fallback { display: flex; }
  }

  .wordmark__mark {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    background: var(--accent);
    flex-shrink: 0;
  }

  .wordmark__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
  }

  .wordmark__name,
  .wordmark__place {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: -0.015em;
    white-space: nowrap;
  }

  .wordmark__place {
    color: var(--ink-2);
  }

  .wordmark--footer .wordmark__name,
  .wordmark--footer .wordmark__place {
    font-size: var(--fs-base);
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(var(--s-4), 1.6vw, var(--s-6));
    padding: 0;
    list-style: none;
  }

  .site-nav__list li + li { margin-block-start: 0; }

  .site-nav__link {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: -0.008em;
    color: var(--ink-2);
    background-size: 0% 1px;
    background-position: 0 100%;
    padding-block-end: 0.2em;
    white-space: nowrap;
  }

  @media (hover: hover) and (pointer: fine) {
    .site-nav__link:hover {
      color: var(--ink);
      background-size: 100% 1px;
    }
  }

  .site-nav__link:focus-visible {
    color: var(--ink);
    background-size: 100% 1px;
  }

  .site-nav__link[aria-current] {
    color: var(--ink);
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 100% var(--bw-strong);
  }

  @media (min-width: 62.5625rem) {
    .site-nav__list {
      position: relative;
    }

    .site-nav__list::after {
      content: "";
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: 0;
      inline-size: 1px;
      block-size: var(--bw-strong);
      background: var(--accent);
      transform-origin: 0 50%;
      translate: var(--nav-ind-x, 0) 0;
      scale: var(--nav-ind-w, 0) 1;
      opacity: 0;
      pointer-events: none;
      transition:
        translate var(--dur) var(--ease),
        scale var(--dur) var(--ease),
        opacity var(--dur-fast) var(--ease);
    }

    .site-nav__list[data-nav-indicator]::after {
      opacity: 1;
    }

    .site-nav__list[data-nav-indicator] .site-nav__link[aria-current] {
      background-image: none;
    }

    .site-nav__list[data-nav-indicator-instant]::after {
      transition: none;
    }
  }

  .site-nav__group {
    position: relative;
  }

  .nav-group__summary {
    display: inline-flex;
    align-items: center;
    gap: 0.42em;
    cursor: pointer;
  }

  .nav-group__chevron {
    inline-size: 0.36em;
    block-size: 0.36em;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    rotate: 45deg;
    translate: 0 -0.1em;
    transition:
      rotate var(--dur) var(--ease),
      translate var(--dur) var(--ease);
  }

  [open] > .nav-group__summary .nav-group__chevron {
    rotate: 225deg;
    translate: 0 0.06em;
  }

  .site-nav__group:has(.site-nav__link[aria-current]) .nav-group__summary {
    color: var(--ink);
  }

  .nav-group__list {
    padding: 0;
    list-style: none;
  }

  .nav-group__list li + li { margin-block-start: 0; }

  .site-nav__link--sub {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    letter-spacing: -0.006em;
    color: var(--ink-2);
    background-image: none;
    padding-block-end: 0;
  }

  @media (hover: hover) and (pointer: fine) {
    .site-nav__link--sub:hover {
      color: var(--ink);
      background-size: 0% 1px;
    }
  }

  .site-nav__link--sub:focus-visible {
    color: var(--ink);
    background-size: 0% 1px;
  }

  @media (min-width: 62.5625rem) {
    .nav-group__panel {
      position: absolute;
      inset-block-start: var(--s-6);
      inset-inline-start: calc(var(--s-4) * -1);
      z-index: var(--z-overlay);
      min-inline-size: 11.75rem;
      padding-block: var(--s-2);
      background: var(--paper-raised);
      border: var(--bw) solid var(--rule);
      box-shadow: var(--shadow-overlay);
    }

    .site-nav__link--sub {
      padding: var(--s-2) var(--s-4);
      white-space: nowrap;
    }

    @media (hover: hover) and (pointer: fine) {
      .site-nav__link--sub:hover {
        background-color: var(--paper-sunk);
      }
    }

    .site-nav__link--sub:focus-visible,
    .site-nav__link--sub:active {
      background-color: var(--paper-sunk);
    }

    .site-nav__link--sub[aria-current] {
      color: var(--ink);
      box-shadow: inset var(--bw-strong) 0 0 0 var(--accent);
    }

    @supports (transition-behavior: allow-discrete) and
              selector(details::details-content) {
      .nav-group::details-content {
        opacity: 0;
        translate: 0 -0.4rem;
        transition:
          opacity var(--dur-fast) var(--ease),
          translate var(--dur) var(--ease-out),
          content-visibility var(--dur) var(--ease) allow-discrete;
      }

      .nav-group[open]::details-content {
        opacity: 1;
        translate: 0 0;
      }
    }
  }

  .site-nav .site-nav__cta { display: none; }

  @media (max-width: 62.5rem) {
    .site-nav {
      position: fixed;
      inset: var(--header-h) 0 0 0;
      z-index: var(--z-overlay);
      background: var(--paper);
      border-block-start: var(--bw) solid var(--rule);

      overflow-y: auto;
      overscroll-behavior: contain;
      padding: var(--s-6) var(--page-margin) var(--s-9);

      opacity: 0;
      visibility: hidden;
      transform: translateY(-0.5rem);
      transition:
        opacity var(--dur) var(--ease),
        transform var(--dur) var(--ease),
        visibility 0s linear var(--dur);
    }

    [data-nav-open] .site-nav {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition-delay: 0s;
    }

    .site-nav__list {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }

    .site-nav__list > li {
      border-block-end: var(--bw) solid var(--rule);
    }

    .site-nav__link {
      display: block;
      padding-block: var(--s-4);
      font-size: var(--fs-2xl);
      letter-spacing: var(--track-2xl);
      color: var(--ink);
      background-image: none;

      opacity: 0;
      transform: translateY(0.5rem);
      transition:
        opacity var(--dur-entrance) var(--ease-out),
        transform var(--dur-entrance) var(--ease-out);
    }

    [data-nav-open] .site-nav__link {
      opacity: 1;
      transform: none;
    }

    .site-nav__list > li:nth-child(1) .site-nav__link { transition-delay: 40ms; }
    .site-nav__list > li:nth-child(2) .site-nav__link { transition-delay: 80ms; }
    .site-nav__list > li:nth-child(3) .site-nav__link { transition-delay: 120ms; }
    .site-nav__list > li:nth-child(4) .site-nav__link { transition-delay: 160ms; }
    .site-nav__list > li:nth-child(5) .site-nav__link { transition-delay: 200ms; }
    .site-nav__list > li:nth-child(6) .site-nav__link { transition-delay: 240ms; }

    @media (hover: hover) and (pointer: fine) {
      .site-nav__link:hover {
        color: var(--accent);
      }
    }

    .site-nav__link[aria-current] {
      color: var(--accent);
      background-image: none;
    }

    .site-nav__group { position: static; }

    .nav-group__summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-group__chevron {
      inline-size: 0.3em;
      block-size: 0.3em;
      border-inline-end-width: 2px;
      border-block-end-width: 2px;
      color: var(--ink-3);
    }

    .nav-group__panel {
      padding-block-end: var(--s-4);
    }

    .site-nav__link--sub {
      padding-block: var(--s-2);
      padding-inline-start: var(--s-4);
      font-size: var(--fs-lg);
      letter-spacing: var(--track-body);
      color: var(--ink-2);
    }

    .site-nav__link--sub[aria-current] {
      color: var(--accent);
    }

    @supports (interpolate-size: allow-keywords) and
              (transition-behavior: allow-discrete) and
              selector(details::details-content) {
      .nav-group::details-content {
        block-size: 0;
        overflow: hidden;
        opacity: 0;
        translate: 0 0;
        transition:
          block-size var(--dur) var(--ease),
          opacity var(--dur) var(--ease),
          content-visibility var(--dur) var(--ease) allow-discrete;
      }

      .nav-group[open]::details-content {
        block-size: auto;
        opacity: 1;
      }
    }

    .site-nav .site-nav__cta {
      display: flex;
      margin-block-start: var(--s-6);
    }

    .site-header .site-header__cta {
      display: none;
    }
  }

  @media (max-width: 62.5rem) and (prefers-reduced-motion: reduce) {
    .site-nav__link {
      opacity: 1;
      transform: none;
      transition-delay: 0s !important;
    }
  }

  .site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-shrink: 0;
  }

  .theme-toggle {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    color: var(--ink-2);
    transition: color var(--dur-fast) var(--ease);
  }

  @media (hover: hover) and (pointer: fine) {
    .theme-toggle:hover { color: var(--ink); }
  }

  .theme-toggle:active { color: var(--ink); translate: 0 1px; }

  .theme-toggle__glyph {
    --icon-size: 1.25rem;
    --icon-stroke: 1.7;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
  }

  .theme-toggle__sun,
  .theme-toggle__moon {
    transform-box: view-box;
    transform-origin: 50% 50%;
    transition:
      opacity var(--dur) var(--ease),
      rotate 420ms var(--ease-spring, var(--ease-out)),
      scale 420ms var(--ease-spring, var(--ease-out));
  }

  .theme-toggle__sun  { opacity: 1; rotate: 0deg;    scale: 1; }
  .theme-toggle__moon { opacity: 0; rotate: -80deg;  scale: 0.4; }

  :root[data-theme="dark"] .theme-toggle__sun  { opacity: 0; rotate: 80deg;  scale: 0.4; }
  :root[data-theme="dark"] .theme-toggle__moon { opacity: 1; rotate: 0deg;   scale: 1; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle__sun  { opacity: 0; rotate: 80deg; scale: 0.4; }
    :root:not([data-theme="light"]) .theme-toggle__moon { opacity: 1; rotate: 0deg;  scale: 1; }
  }

  .theme-toggle__sun path {
    transition: opacity var(--dur-fast) var(--ease) 80ms;
  }

  :root[data-theme="dark"] .theme-toggle__sun path { opacity: 0; transition-delay: 0ms; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle__sun path { opacity: 0; transition-delay: 0ms; }
  }

  .nav-toggle {
    display: none;
    align-items: center;
    gap: var(--s-2);
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    padding-inline: var(--s-2);
    color: var(--ink);
  }

  @media (max-width: 62.5rem) {
    .nav-toggle { display: inline-flex; }
  }

  .nav-toggle__bars {
    position: relative;
    inline-size: 1.125rem;
    block-size: 0.6875rem;
    flex-shrink: 0;
  }

  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: var(--bw-strong);
    background: currentColor;
    transition: transform var(--dur) var(--ease);
  }

  .nav-toggle__bars::before { inset-block-start: 0; }
  .nav-toggle__bars::after  { inset-block-end: 0; }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
    transform: translateY(0.3438rem) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    transform: translateY(-0.3438rem) rotate(-45deg);
  }

  .nav-toggle__label {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-block-size: 2.75rem;
    padding: var(--s-3) var(--s-5);
    border: var(--bw) solid transparent;
    border-radius: var(--r-0);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0.005em;
    text-align: center;
    background-image: none;
    padding-block-end: var(--s-3);
    cursor: pointer;
    transition:
      background-color var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease),
      color var(--dur-fast) var(--ease);
  }

  .btn:active {
    translate: 0 1px;
  }

  .btn--sm {
    min-block-size: 2.25rem;
    padding: var(--s-2) var(--s-4);
    font-size: var(--fs-xs);
  }

  .btn--lg {
    min-block-size: 3.25rem;
    padding: var(--s-4) var(--s-6);
    font-size: var(--fs-base);
  }

  .btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
  }

  @media (hover: hover) and (pointer: fine) {
    .btn--primary:hover {
      background: var(--accent-hover);
      border-color: var(--accent-hover);
      color: var(--accent-ink);
    }
  }

  .btn--primary:active {
    background: var(--accent-active);
    border-color: var(--accent-active);
  }

  .btn--secondary {
    border-color: var(--rule-strong);
    color: var(--ink);
  }

  @media (hover: hover) and (pointer: fine) {
    .btn--secondary:hover {
      border-color: var(--ink);
      background: var(--ink-wash);
      color: var(--ink);
    }
  }

  .btn--secondary:active {
    border-color: var(--ink);
    background: var(--accent-tint);
    color: var(--ink);
  }

  .btn--ghost {
    color: var(--ink-2);
    padding-inline: var(--s-2);
  }

  @media (hover: hover) and (pointer: fine) {
    .btn--ghost:hover {
      color: var(--accent);
    }
  }

  .btn--ghost:active {
    color: var(--accent-active);
  }

  .btn--on-accent {
    background: var(--accent-ink);
    border-color: var(--accent-ink);
    color: var(--accent);
  }

  @media (hover: hover) and (pointer: fine) {
    .btn--on-accent:hover {
      background: transparent;
      border-color: var(--accent-ink);
      color: var(--accent-ink);
    }
  }

  .btn--on-accent:active {
    background: color-mix(in oklab, var(--accent-ink) 16%, transparent);
    border-color: var(--accent-ink);
    color: var(--accent-ink);
  }

  .btn--full { inline-size: 100%; }

  .btn[aria-disabled="true"] {
    background: transparent;
    border-color: var(--rule);
    border-style: dashed;
    color: var(--ink-2);
    pointer-events: none;
  }

  .btn__arrow {
    display: inline-block;
    transition: transform var(--dur) var(--ease);
  }

  @media (hover: hover) and (pointer: fine) {
    .btn:hover .btn__arrow {
      transform: translateX(3px);
    }
  }

  .btn[data-pending] .btn__arrow {
    display: none;
  }

  .btn__dots {
    display: inline-flex;
    align-items: center;
    gap: 0.1em;
  }

  .btn__dot {
    inline-size: 0.2em;
    aspect-ratio: 1;
    border-radius: var(--r-pill);
    background: currentColor;
    animation: bsd-dot-pulse calc(var(--dur) * 2) var(--ease) infinite;
  }

  .btn__dot:nth-child(2) { animation-delay: calc(var(--stagger) * 3); }
  .btn__dot:nth-child(3) { animation-delay: calc(var(--stagger) * 6); }

  @keyframes bsd-dot-pulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
  }

  .link-arrow {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-2);
    font-weight: var(--fw-medium);
    color: var(--accent);
    background-size: 0% 1px;
  }

  @media (hover: hover) and (pointer: fine) {
    .link-arrow:hover {
      color: var(--accent-hover);
      background-size: 100% 1px;
    }
  }

  .link-arrow:active {
    color: var(--accent-active);
    background-size: 100% 1px;
  }

  .link-arrow::after {
    content: "\2192";
    display: inline-block;
    transition: transform var(--dur) var(--ease);
  }

  @media (hover: hover) and (pointer: fine) {
    .link-arrow:hover::after {
      transform: translateX(3px);
    }
  }

  .link-arrow--lg { font-size: var(--fs-lg); }

  .link-mono {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    letter-spacing: var(--track-mono);
    color: var(--ink-2);
    background-size: 100% 1px;
  }

  @media (hover: hover) and (pointer: fine) {
    .link-mono:hover { color: var(--accent); }
  }

  .link-mono:active { color: var(--accent-active); }

  .eyebrow {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-3);
  }

  .eyebrow__num {
    color: var(--brand);
  }

  .eyebrow--brand { color: var(--brand); }

  .meta-stamp {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2) var(--s-4);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
  }

  .meta-stamp__sep {
    color: var(--ink-3);
  }

  .section {
    padding-block: var(--section-y);
  }

  .section--sunk    { background: var(--paper-sunk); }
  .section--ruled   { border-block-start: var(--bw) solid var(--rule); }
  .section--tight   { padding-block: calc(var(--section-y) * 0.55); }

  .section--accent {
    background: var(--accent);
    color: var(--accent-ink);
  }

  .section--accent :is(.display, .h1, .h2, .h3, .h4, .h5) { color: var(--accent-ink); }

  .section--accent .lead    { color: color-mix(in oklab, var(--accent-ink) 82%, var(--accent)); }
  .section--accent .eyebrow { color: color-mix(in oklab, var(--accent-ink) 82%, var(--accent)); }

  .section--accent :is(.eyebrow__num, .ruled-list__index) { color: var(--accent-ink); }

  .section-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--s-5) var(--gutter);
    align-items: start;
    margin-block-end: var(--head-y);
  }

  .section-head__eyebrow {
    grid-column: 1 / span 3;
    padding-block-start: 0.45em;
  }

  @supports (animation-timeline: view()) {
    .section-head__eyebrow {
      animation: bsd-label-drift linear both;
      animation-timeline: view(block);
      animation-range: entry 0% exit 100%;
    }

    @keyframes bsd-label-drift {
      from { translate: 0 var(--label-drift); }
      to   { translate: 0 calc(var(--label-drift) * -1); }
    }
  }

  .section-head__title {
    grid-column: 4 / span 7;
  }

  html.js .section-head.reveal .section-head__title {
    clip-path: inset(-0.14em -0.25em calc(var(--title-wipe) - 0.14em) -0.25em);
    transition: clip-path var(--dur-entrance) var(--ease-out);
    transition-delay: calc(var(--stagger) * 2);
  }

  html.js .section-head.reveal.is-inview .section-head__title {
    clip-path: inset(-0.14em -0.25em -0.14em -0.25em);
  }

  .section-head__lead {
    grid-column: 4 / span 6;
  }

  .section-head__aside {
    grid-column: 11 / span 2;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-3);
    text-align: end;
    padding-block-start: 0.45em;
  }

  @media (max-width: 60rem) {
    .section-head {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--s-4);
    }

    .section-head__eyebrow,
    .section-head__title,
    .section-head__lead,
    .section-head__aside {
      grid-column: 1 / -1;
      padding-block-start: 0;
      text-align: start;
    }

    .section-head { --label-drift: 0px; }
  }

  .rule {
    border: 0;
    border-block-start: var(--bw) solid var(--rule);
    margin: 0;
  }

  .rule--strong { border-block-start-color: var(--rule-strong); }
  .rule--brand  { border-block-start: var(--bw-strong) solid var(--brand); }
  .rule--short  { inline-size: 4rem; }

  .section--accent .link-arrow { color: var(--accent-ink); }

  @media (hover: hover) and (pointer: fine) {
    .section--accent .link-arrow:hover {
      color: color-mix(in oklab, var(--accent-ink) 76%, var(--accent));
    }
  }

  .section--accent .link-arrow:active {
    color: var(--accent-ink);
    background-color: color-mix(in oklab, var(--accent-ink) 16%, transparent);
  }

  .section--accent :is(.rule, .accordion, .accordion__item) {
    border-color: color-mix(in oklab, var(--accent-ink) 28%, transparent);
  }

  .section--accent .chip {
    color: var(--accent-ink);
    border-color: color-mix(in oklab, var(--accent-ink) 45%, transparent);
  }

  .section--accent :is(.meta-stamp, .note-sm, .spec-list dt) {
    color: color-mix(in oklab, var(--accent-ink) 82%, var(--accent));
  }

  .section--accent .meta-stamp__sep {
    color: color-mix(in oklab, var(--accent-ink) 82%, var(--accent));
  }

  .page-hero {
    padding-block-start: calc(var(--header-h) + var(--s-6));
    padding-block-end: clamp(var(--s-6), 5vw, var(--s-8));
  }

  .page-hero__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(var(--s-5), 3vw, var(--s-7)) var(--gutter);
    align-items: end;
  }

  .page-hero__main {
    grid-column: 1 / span 7;
    align-self: start;
  }

  .page-hero__aside {
    grid-column: 9 / span 4;
    display: grid;
    gap: var(--s-4);
    justify-items: start;
    align-content: end;
  }

  .page-hero__foot {
    grid-column: 1 / -1;
    padding-block-start: var(--s-5);
    border-block-start: var(--bw) solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3) var(--s-6);
  }

  .page-hero__title { margin-block-start: var(--s-5); }
  .page-hero__lead  { margin-block-start: var(--s-5); }

  .page-hero__plate { grid-column: 1 / -1; }

  .page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-block-start: var(--s-6);
  }

  .page-hero__main > .eyebrow,
  .page-hero__title,
  .page-hero__lead,
  .page-hero__actions,
  .page-hero__aside,
  .page-hero__foot,
  .page-hero__plate {
    animation-name: var(--entrance);
    animation-duration: var(--dur-entrance);
    animation-timing-function: var(--ease-out);
    animation-fill-mode: both;
  }

  .page-hero__title    { animation-delay: calc(var(--stagger) * 1); }
  .page-hero__lead     { animation-delay: calc(var(--stagger) * 2); }
  .page-hero__actions,
  .page-hero__aside    { animation-delay: calc(var(--stagger) * 3); }
  .page-hero__foot     { animation-delay: calc(var(--stagger) * 4); }
  .page-hero__plate    { animation-delay: calc(var(--stagger) * 5); }

  @keyframes bsd-rise {
    from {
      opacity: 0;
      translate: 0 var(--lift);
    }
    to {
      opacity: var(--rest-opacity, 1);
      translate: 0 0;
    }
  }

  @media (max-width: 60rem) {
    .page-hero {
      padding-block-start: calc(var(--header-h) + var(--s-5));
    }

    .page-hero__inner { grid-template-columns: minmax(0, 1fr); }

    .page-hero__main,
    .page-hero__aside { grid-column: 1 / -1; }

    .page-hero__aside { align-content: start; }
  }

  .split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--s-7) var(--gutter);
    align-items: start;
  }

  .split__a { grid-column: 1 / span 5; }
  .split__b { grid-column: 7 / span 6; }

  .split--wide-first .split__a { grid-column: 1 / span 7; }
  .split--wide-first .split__b { grid-column: 9 / span 4; }

  @media (max-width: 60rem) {
    .split { grid-template-columns: minmax(0, 1fr); }

    .split__a,
    .split__b,
    .split--wide-first .split__a,
    .split--wide-first .split__b { grid-column: 1 / -1; }
  }

  .spec-list {
    display: grid;
    gap: 0;
    border-block-start: var(--bw) solid var(--rule);
  }

  .spec-list > div {
    display: grid;
    grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
    gap: var(--s-2) var(--s-4);
    padding-block: var(--s-4);
    border-block-end: var(--bw) solid var(--rule);
  }

  .spec-list dt {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-3);
    padding-block-start: 0.15em;
  }

  .spec-list dd {
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
    color: var(--ink);
  }

  .spec-list dd small,
  .spec-list__note {
    display: block;
    margin-block-start: var(--s-2);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--ink-3);
  }

  @media (max-width: 30rem) {
    .spec-list > div { grid-template-columns: minmax(0, 1fr); }
  }

  .ruled-list {
    display: grid;
    gap: 0;
    list-style: none;
    padding: 0;
    border-block-start: var(--bw) solid var(--rule);
  }

  .ruled-list > li {
    margin-block-start: 0;
    padding-block: var(--s-5);
    border-block-end: var(--bw) solid var(--rule);
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 0 var(--gutter);
  }

  .ruled-list:not(.ruled-list--plain) > li > :not(.ruled-list__index) {
    grid-column: 2;
  }

  .ruled-list__index {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--track-label);
    color: var(--brand);
    font-variant-numeric: tabular-nums;
    padding-block-start: 0.4em;
  }

  .ruled-list__title {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    letter-spacing: var(--track-body);
    line-height: var(--lh-snug);
    color: var(--ink);
    text-wrap: balance;
  }

  .ruled-list__title .icon {
    --icon-size: 1rem;
    color: var(--brand);
    translate: 0 0.08em;
  }

  .ruled-list__body {
    margin-block-start: var(--s-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--ink-2);
    max-width: var(--measure-narrow);
  }

  .ruled-list--plain > li { grid-template-columns: minmax(0, 1fr); }

  @media (max-width: 40rem) {
    .ruled-list > li { grid-template-columns: minmax(0, 1fr); }

    .ruled-list:not(.ruled-list--plain) > li > :not(.ruled-list__index) {
      grid-column: 1;
    }

    .ruled-list__index {
      grid-row: auto;
      padding-block-start: 0;
      margin-block-end: var(--s-2);
    }
  }

  .cta-band__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--s-6) var(--gutter);
    align-items: end;
  }

  .cta-band__main { grid-column: 1 / span 7; }

  .cta-band__actions {
    grid-column: 9 / span 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
  }

  @media (max-width: 60rem) {
    .cta-band__inner { grid-template-columns: minmax(0, 1fr); }

    .cta-band__main,
    .cta-band__actions { grid-column: 1 / -1; }
  }

  .note-sm {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--ink-2);
  }

  .section-more { margin-block-start: var(--s-6); }

  .icon-sprite {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
  }

  .icon {
    display: block;
    inline-size: var(--icon-size, 1em);
    block-size: var(--icon-size, 1em);
    flex-shrink: 0;
    fill: currentColor;
  }

  .icon--stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke, 1.5);
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .icon--inline {
    --icon-size: 1.05em;
    translate: 0 0.06em;
  }

  .icon-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--s-3);
  }

  .icon-row > .icon {
    --icon-size: 1.25rem;
    color: var(--accent);
    translate: 0 0.1em;
  }

  .stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: 0;
    border-block-start: var(--bw) solid var(--rule);
  }

  .stat {
    padding: var(--s-5) var(--s-5) var(--s-5) 0;
    border-block-end: var(--bw) solid var(--rule);
  }

  .stat-row > .stat + .stat {
    border-inline-start: var(--bw) solid var(--rule);
    padding-inline-start: var(--s-5);
  }

  @media (max-width: 40rem) {
    .stat-row > .stat + .stat {
      border-inline-start: 0;
      padding-inline-start: 0;
    }
  }

  .stat__value {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-medium);
    line-height: 1;
    letter-spacing: var(--track-3xl);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .stat__value--accent { color: var(--accent); }

  .stat__label {
    display: block;
    margin-block-start: var(--s-3);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-3);
  }

  .stat__note {
    display: block;
    margin-block-start: var(--s-2);
    font-size: var(--fs-xs);
    color: var(--ink-3);
  }

  .tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: var(--gutter);
  }

  .tile-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  }

  .tile-grid > li + li { margin-block-start: 0; }

  .tile-grid + .tile-grid { margin-block-start: var(--head-y); }

  .tile-grid--quad {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  @media (max-width: 60rem) {
    .tile-grid--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 40rem) {
    .tile-grid--quad { grid-template-columns: minmax(0, 1fr); }
  }

  .tile-grid--trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @media (max-width: 60rem) {
    .tile-grid--trio { grid-template-columns: minmax(0, 1fr); }
  }

  .tile-grid--sextet {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @media (max-width: 60rem) {
    .tile-grid--sextet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 40rem) {
    .tile-grid--sextet { grid-template-columns: minmax(0, 1fr); }
  }

  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    --card-pad: var(--s-5);
    padding: var(--card-pad);
    border: var(--bw) solid var(--rule);
    background: transparent;
    transition: border-color var(--dur) var(--ease);
  }

  @media (hover: hover) and (pointer: fine) {
    .card:has(a:hover),
    .card--link:hover {
      border-color: var(--accent-hover);
    }
  }

  .card:has(a:active),
  .card--link:active {
    border-color: var(--accent-active);
  }

  .card__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-3);
  }

  .card__eyebrow .icon {
    --icon-size: 0.875rem;
    color: var(--brand);
  }

  .card__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    letter-spacing: var(--track-body);
    line-height: var(--lh-snug);
    color: var(--ink);
    text-wrap: balance;
    transition: color var(--dur-fast) var(--ease);
  }

  @media (hover: hover) and (pointer: fine) {
    .card:has(a:hover) .card__title,
    .card--link:hover .card__title {
      color: var(--accent-hover);
    }
  }

  .card:has(a:active) .card__title,
  .card--link:active .card__title {
    color: var(--accent-active);
  }

  .card__body {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--ink-2);
    max-width: none;
  }

  .card__meta {
    margin-block-start: auto;
    padding-block-start: var(--s-3);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-3);
  }

  .card__link {
    background-image: none;
    color: inherit;
  }

  .card__link::before {
    content: "";
    position: absolute;
    inset: 0;
  }

  .card--pad-lg { --card-pad: var(--s-6); }

  .card__plate {
    margin-inline: calc(var(--card-pad) * -1);
    margin-block-start: calc(var(--card-pad) * -1);
    margin-block-end: calc(var(--card-pad) - var(--s-3));
    --pending-ridge: 76%;
    --pending-ridge-weight: 0.3;
  }

  .card__plate .plate__box {
    border-width: 0 0 var(--bw);
  }

  .card__plate .plate__pending {
    padding: var(--s-3);
  }

  .prose :is(.ruled-list__title, .card__title) {
    font-family: var(--font-sans);
  }

  .prose :is(.ruled-list__body, .card__body) {
    font-size: var(--fs-base);
    line-height: var(--lh-prose);
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.25rem 0.625rem;
    border: var(--bw) solid var(--rule-strong);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-2);
    white-space: nowrap;
  }

  .chip::before {
    content: "";
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
  }

  .chip--neutral { color: var(--ink-3); border-color: var(--rule); }

  .chip--open {
    color: var(--status-open);
    border-color: color-mix(in oklab, var(--status-open) 40%, transparent);
  }

  .chip--warn {
    color: var(--status-warn);
    border-color: color-mix(in oklab, var(--status-warn) 40%, transparent);
  }

  .chip--closed {
    color: var(--status-closed);
    border-color: color-mix(in oklab, var(--status-closed) 40%, transparent);
  }

  .chip--brand {
    color: var(--brand);
    border-color: color-mix(in oklab, var(--brand) 40%, transparent);
  }

  .chip--flat::before { display: none; }

  .chip--code {
    text-transform: none;
  }

  :root[data-cfp-state="before"] .chip[data-cfp-chip]::before {
    animation: bsd-chip-pulse calc(var(--dur) * 4) var(--ease) 3 both;
  }

  @keyframes bsd-chip-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.42; }
  }

  @media print, (forced-colors: active) {
    :root[data-cfp-state="before"] .chip[data-cfp-chip]::before {
      animation: none;
    }
  }

  .chip-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .chip-cloud > li { margin-block-start: 0; }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
    padding: clamp(var(--s-5), 4vw, var(--s-8));
    border: var(--bw) dashed var(--rule-strong);
    background: var(--accent-wash);
  }

  .empty-state__title {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-2);
  }

  .empty-state__body {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-body);
    color: var(--ink);
    max-width: var(--measure-narrow);
    text-wrap: pretty;
  }

  .empty-state__action {
    margin-block-start: var(--s-2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3) var(--s-4);
  }

  .empty-state__note {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--ink-2);
  }

  .empty-state--center {
    align-items: center;
    text-align: center;
  }

  .empty-state--center .empty-state__body { margin-inline: auto; }

  .accordion {
    border-block-start: var(--bw) solid var(--rule);
  }

  .accordion__item {
    border-block-end: var(--bw) solid var(--rule);
  }

  .accordion__trigger {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-5);
    padding-block: var(--s-5);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    letter-spacing: var(--track-body);
    line-height: var(--lh-snug);
    color: var(--ink);
    transition: color var(--dur-fast) var(--ease);
  }

  @media (hover: hover) and (pointer: fine) {
    .accordion__trigger:hover { color: var(--accent); }

    .accordion__trigger:hover .accordion__mark { color: var(--accent); }
  }

  .accordion__trigger:active { color: var(--accent-active); }
  .accordion__trigger:active .accordion__mark { color: var(--accent-active); }

  .accordion__mark {
    --icon-size: 1.25rem;
    align-self: start;
    color: var(--ink-3);
    transition: color var(--dur-fast) var(--ease);
  }

  .accordion__mark-bar {
    transform-box: view-box;
    transform-origin: 50% 50%;
    transition: rotate var(--dur) var(--ease-out);
  }

  .accordion__item[open] > .accordion__trigger .accordion__mark {
    color: var(--accent);
  }

  .accordion__item[open] > .accordion__trigger .accordion__mark-bar {
    rotate: 90deg;
  }

  .accordion__panel {
    padding-block-end: var(--s-5);
    padding-inline-end: clamp(0rem, 8vw, 8rem);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--ink-2);
  }

  .accordion__panel > * + * { margin-block-start: var(--s-4); }

  .accordion__panel a {
    color: var(--accent);
  }

  @supports (interpolate-size: allow-keywords) and
            (transition-behavior: allow-discrete) and
            selector(details::details-content) {
    .accordion__item::details-content {
      block-size: 0;
      overflow: hidden;
      transition:
        block-size var(--dur) var(--ease),
        content-visibility var(--dur) var(--ease) allow-discrete;
    }

    .accordion__item[open]::details-content {
      block-size: auto;
    }
  }

  .quote {
    padding-inline-start: var(--s-5);
    border-inline-start: var(--bw-strong) solid var(--accent);
  }

  .quote__text {
    font-family: var(--font-serif);
    font-size: var(--fs-2xl);
    line-height: 1.24;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-wrap: pretty;
  }

  .quote__cite {
    display: block;
    margin-block-start: var(--s-4);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-3);
  }

  .statement {
    container: statement / inline-size;
    margin-block: clamp(var(--s-7), 4.5vw, var(--s-9));
    padding-block: clamp(var(--s-5), 2.2vw, var(--s-7));
    border-block: var(--bw) solid var(--rule);
  }

  .statement__mark {
    display: block;
    margin-block-end: var(--s-4);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent);
  }

  .statement__text {
    font-family: var(--font-serif);
    font-size: var(--fs-2xl);
    line-height: 1.22;
    letter-spacing: -0.014em;
    color: var(--ink);
    max-width: 44ch;
    text-wrap: balance;
  }

  @container statement (max-width: 48rem) {
    .statement__text { font-size: var(--fs-xl); }
  }

  .statement--bare {
    padding-block: 0;
    border-block: 0;
  }

  .divider {
    display: none;
  }

  @supports (mask-image: url("../img/contour.svg")) {
    .divider {
      display: block;
      block-size: clamp(2.75rem, 8.3vw, 7.5rem);
      background-color: var(--rule-strong);
      mask-image: url("../img/contour.svg");
      mask-repeat: no-repeat;
      mask-size: auto 100%;
      mask-position: center;
    }
  }

  .divider--faint { background-color: var(--rule); }

  .divider--accent {
    background-color: color-mix(in oklab, var(--accent) 55%, transparent);
  }

  html.js .divider.reveal {
    opacity: 1;
    transform: none;
    clip-path: inset(0 var(--wipe) 0 0);
    transition: clip-path var(--dur-slow) var(--ease-out);
  }

  html.js .divider.reveal.is-inview {
    clip-path: inset(0 0 0 0);
  }

  @media print, (forced-colors: active) {
    .divider { display: none; }
  }

  .plate {
    display: block;
  }

  .plate__box {
    position: relative;
    aspect-ratio: var(--plate-ratio, 3 / 2);
    overflow: hidden;
    background: var(--paper-sunk);
    border: var(--bw) solid var(--rule);
  }

  .plate--16x9 { --plate-ratio: 16 / 9; }
  .plate--4x3  { --plate-ratio: 4 / 3; }
  .plate--1x1  { --plate-ratio: 1; }
  .plate--2x1  { --plate-ratio: 2; }
  .plate--2x3  { --plate-ratio: 2 / 3; }
  .plate--3x4  { --plate-ratio: 3 / 4; }
  .plate--21x9 { --plate-ratio: 21 / 9; }
  .plate--36x5 { --plate-ratio: 36 / 5; }

  .plate__img {
    position: absolute;
    inset: 0;
    z-index: 1;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: var(--plate-focus, 50% 50%);
  }

  .plate--focus-10 { --plate-focus: 50% 10%; }
  .plate--focus-35 { --plate-focus: 50% 35%; }
  .plate--focus-65 { --plate-focus: 50% 65%; }

  .plate--focus-x84 { --plate-focus: 84% 50%; }

  .plate--focus-bun-tikki { --plate-focus: 58% 50%; }

  .plate--drawn .plate__box {
    background: var(--paper);
  }

  .plate--drawn .plate__img {
    padding: var(--s-5);
    object-fit: contain;
  }

  .plate--bleed .plate__box {
    border: 0;
    background: none;
  }

  .plate__box:has(.plate__img--photo) {

    isolation: isolate;
  }

  .plate__img--photo {
    filter:
      grayscale(var(--photo-desaturate, 0.92))
      contrast(var(--photo-contrast, 1.04));
  }

  .plate__box:has(.plate__img--photo)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--accent);
    opacity: var(--photo-tone, 0.14);
    mix-blend-mode: soft-light;
    pointer-events: none;
  }

  @media print, (forced-colors: active) {
    .plate__box:has(.plate__img--photo) { background: none; }
    .plate__box:has(.plate__img--photo)::after { content: none; }
    .plate__img--photo { filter: none; }
  }

  .plate__pending {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: end;
    gap: var(--s-1);
    padding: var(--s-4);
  }

  .plate__pending::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: var(--pending-ridge, 62%);
    background: url("../img/ridge.svg") no-repeat center bottom / 150% auto;
    opacity: var(--pending-ridge-weight, 0.4);
    pointer-events: none;
  }

  .plate__pending-label,
  .plate__pending-note {
    position: relative;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    text-shadow:
      0 0 2px var(--paper-sunk), 0 0 2px var(--paper-sunk),
      0 0 2px var(--paper-sunk), 0 0 2px var(--paper-sunk);
  }

  .plate__pending-label { color: var(--ink-2); }
  .plate__pending-note  { color: var(--ink-3); text-transform: none; letter-spacing: var(--track-mono); }

  @supports (animation-timeline: view()) {
    .plate--drift .plate__img,
    .plate--drift .plate__pending::before {
      animation: bsd-plate-drift linear both;
      animation-timeline: view(block);
      animation-range: entry 0% exit 100%;
    }

    .plate--drift .plate__img {
      inset-block: calc(var(--plate-drift) * -1);
      block-size: calc(100% + var(--plate-drift) * 2);
    }

    .plate--drift .plate__pending::before {
      inset-block-end: calc(var(--plate-drift) * -1);
      block-size: calc(var(--pending-ridge, 62%) + var(--plate-drift) * 2);
    }

    @keyframes bsd-plate-drift {
      from { translate: 0 var(--plate-drift); }
      to   { translate: 0 calc(var(--plate-drift) * -1); }
    }
  }

  .plate__caption {
    max-width: 68ch;
  }

  .plate__credit {
    color: var(--ink-3);
  }

  .plate--ruled,
  .plates--ruled,
  .partner-block--ruled {
    margin-block-start: var(--s-7);
    padding-block-start: var(--s-6);
    border-block-start: var(--bw) solid var(--rule);
  }

  .plate--lead {
    margin-block-end: var(--head-y);
  }

  .plates {
    display: grid;
    grid-template-columns: repeat(var(--plates-cols, 2), minmax(0, 1fr));
    gap: var(--s-6) var(--gutter);
  }

  .plates--3 { --plates-cols: 3; }
  .plates--4 { --plates-cols: 4; }

  @media (max-width: 60rem) {
    .plates--3 { --plates-cols: 2; }
    .plates--4 { --plates-cols: 2; }
  }

  @media (max-width: 40rem) {
    .plates { --plates-cols: 1; }
  }

  .partner-wall {
    display: grid;
    grid-template-columns: repeat(var(--partner-cols, 3), minmax(0, 1fr));
    gap: var(--s-6) var(--gutter);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ink-2);
    --partner-w: 15rem;
  }

  .partner-wall > li + li { margin-block-start: 0; }

  .partner-wall--compact { --partner-w: 11rem; }

  .partner-block__label {
    margin-block-end: var(--s-5);
  }

  .partner {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .partner__name {
    font-size: var(--fs-xs);
    line-height: 1.35;
    text-align: center;
  }

  .partner__mark { display: none; }

  @supports (mask-image: url("../img/partners/offsec.webp")) {
    .partner__mark {
      display: block;
      inline-size: min(100%, var(--partner-w));
      aspect-ratio: 16 / 5;
      background-color: currentColor;
      mask-repeat: no-repeat;
      mask-size: contain;
      mask-position: center;
    }

    .partner__name {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    .partner--altered-security .partner__mark { mask-image: url("../img/partners/altered-security.webp"); }
    .partner--cloudsek        .partner__mark { mask-image: url("../img/partners/cloudsek.webp"); }
    .partner--hack-defender   .partner__mark { mask-image: url("../img/partners/hack-defender.webp"); }
    .partner--infosectrain    .partner__mark { mask-image: url("../img/partners/infosectrain.webp"); }
    .partner--iotsrg          .partner__mark { mask-image: url("../img/partners/iotsrg.webp"); }
    .partner--jsmon           .partner__mark { mask-image: url("../img/partners/jsmon.webp"); }
    .partner--leetsec         .partner__mark { mask-image: url("../img/partners/leetsec.webp"); }
    .partner--offsec          .partner__mark { mask-image: url("../img/partners/offsec.webp"); }
    .partner--upes-x-pivot    .partner__mark { mask-image: url("../img/partners/upes-x-pivot.webp"); }
  }

  @media (hover: hover) and (pointer: fine) {
    .partner {
      color: color-mix(in oklab, var(--ink) var(--partner-ink, 0%), var(--ink-2));
      transition: color var(--dur) var(--ease-out);
    }
  }

  @media (max-width: 60rem) {
    .partner-wall { --partner-cols: 2; }
  }

  @media print, (forced-colors: active) {
    .partner__mark { display: none; }

    .partner__name {
      position: static;
      width: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
  }

  .locator__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .locator__viewport:focus-visible {
    outline: var(--bw-focus) solid var(--focus);
    outline-offset: var(--s-1);
  }

  .locator__canvas {
    position: relative;
    min-inline-size: 60rem;
    aspect-ratio: 2 / 1;
  }

  .locator__box {
    position: absolute;
    inset: 0;
    background: var(--paper);
    border: var(--bw) solid var(--rule);
  }

  .locator__map {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .locator__names {
    position: absolute;
    inset: 0;
    margin-block-start: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
  }

  .locator__names li + li { margin-block-start: 0; }

  .locator__place,
  .locator__feature {
    position: relative;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink-2);
  }

  .locator__feature { color: var(--ink-3); }

  .locator__place { padding-inline-start: var(--s-3); }

  .locator__place::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 50%;
    translate: -50% -50%;
    inline-size: 5px;
    block-size: 5px;
    border-radius: 50%;
    background: currentColor;
  }

  .locator__place--city {
    color: var(--ink);
  }

  .locator__place--city::before {
    inline-size: 7px;
    block-size: 7px;
    background: var(--accent);
  }

  .locator__place--campus {
    color: var(--ink);
  }

  .locator__place,
  .locator__feature {
    position: absolute;
    translate: calc(var(--locator-flip, 0) * -100%) -50%;
    text-shadow:
      0 0 2px var(--paper), 0 0 2px var(--paper),
      0 0 2px var(--paper), 0 0 2px var(--paper);
  }

  .locator__place--flip,
  .locator__feature--flip { --locator-flip: 1; }

  .locator__place {
    padding-inline:
      calc((1 - var(--locator-flip, 0)) * var(--s-3))
      calc(var(--locator-flip, 0) * var(--s-3));
  }

  .locator__place::before {
    inset-inline-start: calc(var(--locator-flip, 0) * 100%);
  }

  .locator__feature--foothills { inset-inline-start: 3%;  inset-block-start: 6%; }
  .locator__place--mussoorie   { inset-inline-start: 35%; inset-block-start: 17%; }
  .locator__feature--yamuna    { inset-inline-start: 12%; inset-block-start: 18%; }
  .locator__feature--ganges    { inset-inline-start: 82%; inset-block-start: 20%; }
  .locator__place--campus      { inset-inline-start: 29%; inset-block-start: 25%; }
  .locator__place--city        { inset-inline-start: 35%; inset-block-start: 44%; }
  .locator__place--rishikesh   { inset-inline-start: 91%; inset-block-start: 55%; }
  .locator__place--airport     { inset-inline-start: 64%; inset-block-start: 66%; }
  .locator__feature--rajaji    { inset-inline-start: 76%; inset-block-start: 86%; }
  .locator__feature--shivaliks { inset-inline-start: 3%;  inset-block-start: 88%; }
  .locator__feature--delhi     { inset-inline-start: 19%; inset-block-start: 92%; }

  .field {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }

  .field__label {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-2);
  }

  .field__input {
    min-block-size: 2.75rem;
    padding: var(--s-3) var(--s-4);
    border: var(--bw) solid var(--rule-strong);
    border-radius: var(--r-1);
    background: var(--paper);
    color: var(--ink);
    font-size: var(--fs-base);
    transition: border-color var(--dur-fast) var(--ease);
  }

  @media (hover: hover) and (pointer: fine) {
    .field__input:hover { border-color: var(--ink-3); }
  }

  .field__input:focus-visible {
    border-color: var(--accent);
    outline-offset: 1px;
  }

  .field__hint {
    font-size: var(--fs-xs);
    color: var(--ink-3);
  }

  .field__error {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--track-mono);
    color: var(--status-closed);
  }

  .field--invalid .field__input { border-color: var(--status-closed); }

  .field__input:user-invalid { border-color: var(--status-closed); }

  @keyframes bsd-field-shake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(calc(var(--shake) * -1)); }
    30%      { transform: translateX(var(--shake)); }
    45%      { transform: translateX(calc(var(--shake) * -0.6)); }
    60%      { transform: translateX(calc(var(--shake) * 0.6)); }
    75%      { transform: translateX(calc(var(--shake) * -0.3)); }
    90%      { transform: translateX(calc(var(--shake) * 0.3)); }
  }

  .field__input[data-shake] {
    animation: bsd-field-shake var(--dur) var(--ease);
  }

  .field__req {
    color: var(--ink-3);
    letter-spacing: var(--track-mono);
  }

  .form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5) var(--gutter);
    max-inline-size: 46rem;
  }

  .field--full { grid-column: 1 / -1; }

  @media (max-width: 44rem) {
    .form { grid-template-columns: minmax(0, 1fr); }
  }

  .form__foot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4) var(--s-5);
  }

  .field__control {
    position: relative;
    display: flex;
  }

  .field__control .field__input { inline-size: 100%; }

  .field__control--select::after {
    content: "";
    position: absolute;
    inset-inline-end: var(--s-4);
    inset-block-start: 50%;
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-inline-end: 1.5px solid var(--ink-2);
    border-block-end: 1.5px solid var(--ink-2);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
  }

  select.field__input {
    appearance: none;
    padding-inline-end: var(--s-7);
    line-height: var(--lh-snug);
  }

  @media (forced-colors: active) {
    select.field__input {
      appearance: auto;
      padding-inline-end: var(--s-4);
    }

    .field__control--select::after { display: none; }
  }

  textarea.field__input {
    min-block-size: 9rem;
    resize: vertical;
    line-height: var(--lh-body);
  }

  .field--check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--s-3);
  }

  .field__check,
  .field__radio {
    appearance: auto;
    margin-block-start: 0.15rem;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    accent-color: var(--accent);
    cursor: pointer;
  }

  .field__check-label,
  .field__choice-label {
    display: block;
    color: var(--ink);
    cursor: pointer;
  }

  .field__check-label .field__hint,
  .field__choice-label .field__hint {
    display: block;
    margin-block-start: var(--s-1);
  }

  .field__check-label .field__req,
  .field__choice-label .field__req {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
  }

  .field--choice {
    border: 0;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
  }

  .field__legend {
    float: left;
    inline-size: 100%;
    padding: 0;
    margin-block-end: var(--s-3);
  }

  .field__choices {
    clear: both;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }

  .field__choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--s-3);
  }

  html.js .reveal {
    opacity: 0;
    transform: translateY(var(--lift));
    transition:
      opacity var(--dur-entrance) var(--ease-out),
      transform var(--dur-entrance) var(--ease-out);
  }

  html.js .reveal.is-inview {
    opacity: 1;
    transform: none;
  }

  html.js .reveal--delay-1 { transition-delay: calc(var(--stagger) * 1); }
  html.js .reveal--delay-2 { transition-delay: calc(var(--stagger) * 2); }
  html.js .reveal--delay-3 { transition-delay: calc(var(--stagger) * 3); }
  html.js .reveal--delay-4 { transition-delay: calc(var(--stagger) * 4); }

  @media (prefers-reduced-motion: reduce) {
    html.js .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  .site-footer {
    background: var(--paper-sunk);
    border-block-start: var(--bw) solid var(--rule);
    padding-block: clamp(var(--s-7), 6vw, var(--s-9));
  }

  .site-footer__inner {
    width: min(100% - (var(--page-margin) * 2), var(--container));
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(var(--s-6), 5vw, var(--s-8)) var(--gutter);
  }

  .site-footer__brand { grid-column: 1 / span 3; }
  .site-footer__nav   { grid-column: 4 / span 6; display: flex; gap: var(--gutter); flex-wrap: wrap; }
  .site-footer__contact { grid-column: 10 / span 3; }
  .site-footer__legal { grid-column: 1 / -1; }

  @media (max-width: 75rem) {
    .site-footer__brand   { grid-column: 1 / span 5; }
    .site-footer__nav     { grid-column: 7 / span 6; }
    .site-footer__contact { grid-column: 1 / span 5; }
  }

  @media (max-width: 60rem) {
    .site-footer__brand,
    .site-footer__nav,
    .site-footer__contact,
    .site-footer__legal { grid-column: 1 / -1; }
  }

  .site-footer__tagline {
    margin-block-start: var(--s-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--ink-2);
    max-width: 34ch;
  }

  .site-footer__meta {
    margin-block-start: var(--s-4);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-3);
  }

  .footer-col { flex: 1 1 7rem; }

  .footer-col__title {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-3);
    margin-block-end: var(--s-4);
  }

  .footer-col__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }

  .footer-col__list li + li { margin-block-start: 0; }

  .footer-col__list a {
    font-size: var(--fs-sm);
    color: var(--ink-2);
    background-size: 0% 1px;
  }

  @media (hover: hover) and (pointer: fine) {
    .footer-col__list a:hover {
      color: var(--accent);
      background-size: 100% 1px;
    }
  }

  .footer-col__list a:active {
    color: var(--accent-active);
    background-size: 100% 1px;
  }

  .site-footer__mailto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    margin-block-end: var(--s-5);
    color: var(--ink-3);
  }

  .site-footer__mailto .icon {
    --icon-size: 1rem;
    flex-shrink: 0;
  }

  .site-footer__email {
    display: inline-block;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
  }

  .site-footer__email[data-copied]::after {
    content: " copied";
    color: var(--status-open);
  }

  .social-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .social-list li + li { margin-block-start: 0; }

  .social-list__link {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    --icon-size: 20px;
    border: var(--bw) solid var(--rule);
    color: var(--ink-2);
    background-image: none;
    padding-block-end: 0;

    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--track-mono);

    transition:
      border-color var(--dur-fast) var(--ease),
      color var(--dur-fast) var(--ease);
  }

  @media (hover: hover) and (pointer: fine) {
    .social-list__link:hover {
      border-color: var(--accent);
      color: var(--accent);
    }
  }

  .social-list__link:active {
    border-color: var(--accent-active);
    color: var(--accent-active);
    translate: 0 1px;
  }

  .btn__icon {
    --icon-size: 1rem;
    transition: translate var(--dur-fast) var(--ease);
  }

  @media (hover: hover) and (pointer: fine) {
    .btn:hover .btn__icon { translate: 3px 0; }
  }

  .btn:active .btn__icon { translate: 1px 0; }

  .site-footer__legal {
    padding-block-start: var(--s-6);
    border-block-start: var(--bw) solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-4) var(--s-6);
    font-size: var(--fs-xs);
    color: var(--ink-3);
  }

  .site-footer__legal p { max-width: 60ch; margin: 0; }

  .site-footer__legal p:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
  }

  .site-footer__legal a {
    color: var(--ink-3);
    background-size: 0% 1px;
  }

  @media (hover: hover) and (pointer: fine) {
    .site-footer__legal a:hover {
      color: var(--accent);
      background-size: 100% 1px;
    }
  }

  .site-footer__legal a:active {
    color: var(--accent-active);
    background-size: 100% 1px;
  }

  @media (max-width: 62.5rem) {
    .footer-col__list { gap: 0; }

    .footer-col__list a,
    .site-footer__mailto :is(a, button),
    .site-footer__legal p:last-child :is(a, button) {
      display: inline-flex;
      align-items: center;
      min-block-size: 2.75rem;
    }

    .footer-col__list a { display: flex; }
    .site-footer__legal p:last-child { align-items: center; }
  }

  .consent {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: var(--z-toast);
    display: flex;
    justify-content: flex-end;
    padding: var(--gutter);
    pointer-events: none;
  }

  .consent[hidden] { display: none; }

  .consent__inner {
    pointer-events: auto;
    inline-size: min(34rem, 100%);
    max-block-size: calc(100vh - (var(--gutter) * 2));
    max-block-size: calc(100dvh - (var(--gutter) * 2));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: clamp(var(--s-5), 3vw, var(--s-6));
    border: var(--bw) solid var(--rule-strong);
    background: var(--paper-raised);
    box-shadow: var(--shadow-overlay);
    opacity: 0;
    transform: translateY(var(--lift));
    transition:
      opacity var(--dur) var(--ease),
      transform var(--dur) var(--ease-out);
  }

  .consent[data-open] .consent__inner {
    opacity: 1;
    transform: none;
  }

  .consent:focus-visible {
    outline: none;
  }

  .consent:focus-visible .consent__inner {
    outline: var(--bw-strong) solid var(--accent);
    outline-offset: 3px;
  }

  .consent__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-3);
  }

  .consent__title {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-body);
    font-weight: var(--fw-medium);
  }

  .consent__body {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--ink-2);
    text-wrap: pretty;
  }

  .consent__cats {
    display: grid;
    gap: var(--s-3);
    margin: 0;
    padding-block: var(--s-4);
    border-block: var(--bw) solid var(--rule);
  }

  .consent__cat dt {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink);
  }

  .consent__cat dd {
    margin: var(--s-1) 0 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--ink-3);
  }

  .consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .consent__meta {
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--ink-3);
  }

  .consent__meta a { color: var(--ink-2); }
  @media (hover: hover) and (pointer: fine) {
    .consent__meta a:hover { color: var(--accent); }
  }

  .consent__meta a:active { color: var(--accent-active); }

  [data-nav-open] .consent { display: none; }

  .site-footer__legal button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--ink-3);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.25em;
    transition:
      color var(--dur-fast) var(--ease),
      text-decoration-color var(--dur-fast) var(--ease);
  }

  @media (hover: hover) and (pointer: fine) {
    .site-footer__legal button:hover {
      color: var(--accent);
      text-decoration-color: currentColor;
    }
  }

  .site-footer__legal button:active {
    color: var(--accent-active);
    text-decoration-color: currentColor;
  }

  [data-nav-open] body {
    overflow: hidden;
    padding-inline-end: var(--scrollbar-w, 0px);
  }

  :root:not([data-theme-wipe]) .site-header {
    view-transition-name: bsd-header;
  }

  :root:not([data-theme-wipe]) .site-footer {
    view-transition-name: bsd-footer;
  }

  :root[data-theme-wipe]::view-transition-old(root) {
    animation: none;
  }

  :root[data-theme-wipe]::view-transition-new(root) {
    animation: bsd-theme-wipe var(--dur-slow) var(--ease-out) both;
  }

  @keyframes bsd-theme-wipe {
    from { clip-path: circle(0 at var(--wipe-x) var(--wipe-y)); }
    to   { clip-path: circle(var(--wipe-r) at var(--wipe-x) var(--wipe-y)); }
  }
}