/* =========================================================================
   site.css — the components.

   Desktop-first, per the brief ("mobile in the long run, not on the first
   launch"). Breakpoints exist so a phone gets a usable single column rather
   than a broken page, but every judgement is made for the 1440px frame.

   Loaded after base.css, so the layer order declared there already applies.
   ========================================================================= */

@layer layout {
  /* ---------------------------------------------------------------------
     Shell
     --------------------------------------------------------------------- */

  .skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 200;
    background: var(--surface-raised);
    color: var(--ink);
    border: 1px solid var(--gold);
    padding: 12px 18px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    transition: top var(--t-hover) var(--ease);
  }

  .skip:focus {
    top: 12px;
  }

  .main {
    flex: 1 0 auto;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--content);
    margin-inline: auto;
    padding: 40px var(--gutter) 96px;
    outline: none;
  }

  .page-home .main,
  .page-gallery .main {
    max-width: var(--wide);
  }

  .page-home .main {
    padding-top: 0;
    padding-bottom: 64px;
  }

  .announce,
  .preview-bar {
    position: relative;
    z-index: 2;
    text-align: center;
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    padding: 9px var(--gutter);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    color: var(--ink-muted);
  }

  .preview-bar {
    background: color-mix(in srgb, var(--gold) 16%, var(--bg-deep));
    color: var(--ink);
    border-bottom-color: var(--gold);
  }

  .preview-bar .smallcaps {
    color: var(--gold);
  }

  /* ---------------------------------------------------------------------
     Header — 84px, gold hairline beneath, sticky, no shrink animation.
     --------------------------------------------------------------------- */

  .header {
    position: sticky;
    top: 0;
    z-index: 60;
    height: var(--header-h);
    background: var(--bg);
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  }

  .header__inner {
    height: 100%;
    max-width: var(--wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    flex: 0 0 auto;
  }

  .brand__badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex: 0 0 auto;
  }

  /* Sized so that, if the SVG has not been dropped in yet, the alt text still
     reads as a wordmark rather than as broken furniture. */
  /* The header lockup, set as type. Three lines echoing the artwork's
     arrangement, but legible: the small lines are real 10px caps rather than a
     6px smear of a downscaled raster. */
  .brand__wordmark {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    font-family: var(--font-display);
    color: var(--gold);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .brand__wordmark-sm {
    font-size: 0.625rem;
    letter-spacing: 0.34em;
    /* letter-spacing adds a trailing gap; pull it back so the stack centres */
    text-indent: 0.34em;
    color: var(--gold-soft);
  }

  .brand__wordmark-lg {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 55%, #8A6320 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* If the gradient-clipped text fails to paint, fall back to a solid fill. */
  @supports not (background-clip: text) {
    .brand__wordmark-lg {
      color: var(--gold);
    }
  }

  /* ---------------------------------------------------------------------
     Footer
     --------------------------------------------------------------------- */

  .footer {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    padding: 0 var(--gutter) 56px;
  }

  .footer__inner {
    max-width: var(--content);
    margin-inline: auto;
  }

  .footer__rule {
    margin-bottom: 34px;
    opacity: 0.4;
  }

  .footer__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }

  .footer__head {
    color: var(--gold);
    margin-bottom: 14px;
  }

  .footer__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  .footer__link {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    text-decoration: none;
  }

  .footer__link:hover {
    color: var(--gold-soft);
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  .footer__note {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    line-height: 1.6;
    max-width: 34ch;
  }
}

@layer components {
  /* ---------------------------------------------------------------------
     Navigation
     --------------------------------------------------------------------- */

  .nav {
    margin-left: auto;
  }

  .nav__list {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
  }

  .nav__item {
    position: relative;
  }

  .nav__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 13px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
  }

  .nav__link::after {
    content: '';
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 6px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-hover) var(--ease);
  }

  .nav__link:hover::after,
  .nav__link[aria-current]::after,
  .nav__item--has-menu[data-open='true'] > .nav__link::after {
    transform: scaleX(1);
  }

  .nav__link:hover {
    color: var(--gold-soft);
  }

  .nav__link--contact {
    color: var(--gold);
    margin-left: 10px;
    border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
    border-radius: var(--radius);
  }

  .nav__link--contact::after {
    display: none;
  }

  .nav__link--contact:hover {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 10%, transparent);
  }

  .nav__caret {
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.7;
    flex: 0 0 auto;
  }

  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 232px;
    list-style: none;
    margin: 0;
    padding: 7px 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 1px solid var(--gold);
    border-radius: 0 0 var(--radius) var(--radius);
    z-index: 70;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--t-hover) var(--ease), transform var(--t-hover) var(--ease),
      visibility var(--t-hover) var(--ease);
  }

  /* Hover and keyboard-focus open it with no JavaScript at all.
     nav.js adds click-to-toggle and arrow-key movement on top. */
  .nav__item--has-menu:hover > .nav__menu,
  .nav__item--has-menu:focus-within > .nav__menu,
  .nav__item--has-menu[data-open='true'] > .nav__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Set by nav.js when the panel would otherwise overflow the right edge. */
  .nav__menu[data-flip] {
    left: auto;
    right: 0;
  }

  .nav__menu-link {
    display: block;
    padding: 9px 18px;
    font-size: var(--fs-sm);
    color: var(--ink);
    text-decoration: none;
  }

  .nav__menu-link:hover,
  .nav__menu-link:focus-visible {
    background: var(--surface-raised);
    color: var(--gold-soft);
  }

  .nav__menu-link[aria-current] {
    color: var(--gold);
  }

  .nav__menu-item--all .nav__menu-link {
    color: var(--ink-muted);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 1px solid var(--line);
    margin-bottom: 5px;
    padding-bottom: 11px;
  }

  .nav__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .nav__burger-bars,
  .nav__burger-bars::before,
  .nav__burger-bars::after {
    display: block;
    width: 20px;
    height: 1px;
    background: var(--ink);
  }

  .nav__burger-bars::before,
  .nav__burger-bars::after {
    content: '';
    position: relative;
  }

  .nav__burger-bars::before {
    top: -6px;
  }

  .nav__burger-bars::after {
    top: 5px;
  }

  /* ---------------------------------------------------------------------
     Buttons
     --------------------------------------------------------------------- */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease),
      border-color var(--t-hover) var(--ease);
  }

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

  .btn--solid:hover {
    background: color-mix(in srgb, var(--accent) 82%, white);
    color: var(--accent-ink);
  }

  .btn--outline {
    border-color: var(--gold);
    color: var(--gold);
  }

  .btn--outline:hover {
    color: var(--gold-soft);
    border-color: var(--gold-soft);
    background: color-mix(in srgb, var(--gold) 12%, transparent);
  }

  .btn--quiet {
    border-color: var(--line);
    color: var(--ink);
  }

  .btn--quiet:hover {
    border-color: var(--gold);
    color: var(--gold-soft);
    background: transparent;
  }

  /* ---------------------------------------------------------------------
     Splash — the logo artwork as a lit canvas on the dark wall
     --------------------------------------------------------------------- */

  .splash {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .lit {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 74px;
    /* The pool of light is inset negatively so it spills past the canvas. On a
       narrow window that spill would widen the document and give the whole page
       a horizontal scrollbar. `clip` contains it without creating a scroll
       container, so the sticky header is unaffected. The gradient is already
       fully transparent where this bites. */
    overflow-x: clip;
  }

  .lit__stage {
    position: relative;
    width: min(940px, 100%);
  }

  /* The warm pool of light behind the canvas. It touches the wall, never the
     work — this is the site's own artwork, not a piece for sale. */
  .lit__pool {
    position: absolute;
    inset: -16% -14%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
      56% 52% at 50% 44%,
      color-mix(in srgb, var(--gold-soft) 22%, transparent) 0%,
      color-mix(in srgb, var(--gold) 9%, transparent) 40%,
      transparent 72%
    );
    filter: blur(16px);
  }

  .lit__frame {
    position: relative;
    z-index: 1;
    background: var(--matte);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: calc(var(--mat-width) * 1.7);
  }

  .lit__art {
    width: 100%;
    height: auto;
  }

  @media (prefers-reduced-motion: no-preference) {
    /*
      No `both` here, deliberately. `animation-fill-mode: both` applies the
      keyframes' `from` state — opacity 0 — *before* the animation starts, and a
      browser that opens this page in a background tab pauses animations until
      the tab is focused. The hero then sits invisible behind a matte, which is
      precisely what someone sees when a shared link is opened in a new tab.
      Without a fill mode the element rests at its normal, visible style and the
      fade is pure decoration on top.
    */
    .lit__frame {
      animation: lit-rise 400ms var(--ease);
    }
  }

  @keyframes lit-rise {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .mission {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 66px;
    gap: 16px;
  }

  .mission__head {
    color: var(--gold);
  }

  .mission__rule {
    margin: 0;
  }

  .mission__body {
    --measure: 62ch;
    text-align: left;
    margin-top: 6px;
  }

  .splash-contact {
    padding-top: 54px;
    text-align: center;
  }

  .splash-contact__line {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .splash-contact__cta {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
    padding-bottom: 2px;
  }

  .splash-contact__cta:hover {
    color: var(--gold-soft);
    border-bottom-color: var(--gold-soft);
  }

  .splash-contact__sep {
    color: var(--ink-muted);
  }

  .splash-contact__mail {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    text-decoration: none;
    letter-spacing: 0.02em;
  }

  .splash-contact__mail:hover {
    color: var(--gold-soft);
  }

  /* ---------------------------------------------------------------------
     Page furniture
     --------------------------------------------------------------------- */

  .crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .crumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .crumbs__link {
    color: var(--ink-muted);
    text-decoration: none;
  }

  .crumbs__link:hover {
    color: var(--gold-soft);
  }

  .crumbs__here {
    color: var(--ink);
  }

  .crumbs__sep {
    color: var(--gold);
    opacity: 0.7;
  }

  .pagehead {
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .pagehead__title {
    font-size: var(--fs-2xl);
  }

  .pagehead__rule {
    margin: 2px 0;
  }

  .pagehead__meta {
    margin-top: -4px;
  }

  .pagehead__blurb {
    max-width: 68ch;
    color: var(--ink-muted);
    font-size: var(--fs-md);
  }

  .pagehead__blurb--lead {
    color: var(--ink);
  }

  .section-head {
    color: var(--gold);
    margin-bottom: 10px;
    display: block;
  }

  .siblings {
    margin-top: 28px;
  }

  .siblings__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
  }

  .siblings__link {
    display: inline-block;
    padding: 8px 15px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .siblings__link:hover {
    color: var(--gold-soft);
    border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  }

  .siblings__link[aria-current] {
    color: var(--gold);
    border-color: var(--gold);
  }

  .filters {
    margin-top: 30px;
    padding: 18px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .filters__group {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .filters__label {
    color: var(--ink-muted);
  }

  .filters__input,
  .filters__select {
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    padding: 10px 12px;
    font-size: var(--fs-sm);
    min-width: 220px;
  }

  .filters__select {
    min-width: 200px;
  }

  .filters__input:hover,
  .filters__select:hover {
    border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
  }

  .filters__actions {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .filters__clear {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
  }

  .filters__count {
    margin-left: auto;
  }

  .empty {
    margin-top: 56px;
    max-width: 60ch;
  }

  .empty__line {
    font-size: var(--fs-md);
  }

  .empty__line + .empty__line {
    margin-top: 12px;
  }

  .empty__line--muted {
    color: var(--ink-muted);
    font-size: var(--fs-sm);
  }

  /* ---------------------------------------------------------------------
     The mat — the mount board every image sits on
     --------------------------------------------------------------------- */

  .mat {
    position: relative;
    display: block;
    background: var(--mat-bg, var(--matte));
    padding: var(--mat-pad, var(--mat-width));
    border: 1px solid var(--mat-line, var(--line));
    border-radius: var(--radius);
    transition: transform var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
  }

  .mat__well {
    display: block;
    position: relative;
    aspect-ratio: var(--aspect, auto);
    background: var(--bg-deep);
    border: var(--mat-inner, 1px) solid color-mix(in srgb, var(--line) 85%, transparent);
    overflow: hidden;
  }

  .mat__corner {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
  }

  .badge {
    display: inline-block;
    padding: 3px 8px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    line-height: 1.4;
    border: 1px solid var(--gold);
    color: var(--gold);
    background: var(--bg-deep);
    border-radius: 1px;
  }

  .badge--accent {
    border-color: var(--accent);
    color: var(--accent);
  }

  .badge--sold {
    border-color: var(--gold);
    color: var(--gold);
  }

  /* ---------------------------------------------------------------------
     The grid. Every value below comes from `galleryVars(layout)`, set inline
     on this element by the view. No per-setting classes exist.
     --------------------------------------------------------------------- */

  .grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: var(--gap, 28px);
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
  }

  .card__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .card__link:hover .mat,
  .card__link:focus-visible .mat {
    transform: translateY(var(--card-lift, -2px));
    border-color: var(--gold);
  }

  .card__link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
  }

  .card__noimg {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--surface);
  }

  .card__caption {
    margin-top: var(--cap-pad, 14px);
    padding-top: var(--cap-pad, 14px);
    border-top: var(--cap-rule, 1px) solid color-mix(in srgb, var(--gold) 45%, transparent);
    text-align: var(--cap-align, left);
  }

  .card__title {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
  }

  .card__artist,
  .card__meta {
    margin-top: 6px;
  }

  .card__price {
    margin-top: 9px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    justify-content: var(--cap-justify, flex-start);
  }

  .card__price .money {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    color: var(--ink);
  }

  .money--ask {
    font-family: var(--font-body) !important;
    font-size: var(--fs-sm) !important;
    color: var(--ink-muted) !important;
  }

  .card__obo {
    color: var(--gold);
  }

  .card[data-status='sold'] .card__title {
    color: var(--ink-muted);
  }

  /* ---------------------------------------------------------------------
     Pagination
     --------------------------------------------------------------------- */

  .pager {
    margin-top: 56px;
    border-top: 1px solid var(--line);
    padding-top: 22px;
  }

  .pager__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    list-style: none;
  }

  .pager__link {
    display: inline-block;
    min-width: 40px;
    text-align: center;
    padding: 9px 12px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
  }

  a.pager__link:hover {
    color: var(--gold-soft);
    border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  }

  .pager__link--current {
    color: var(--gold);
    border-color: var(--gold);
  }

  .pager__link--disabled {
    opacity: 0.4;
  }

  .pager__item--gap {
    color: var(--ink-muted);
    padding-inline: 4px;
  }

  /* ---------------------------------------------------------------------
     Item page — 62 / 38
     --------------------------------------------------------------------- */

  .item__cols {
    display: grid;
    grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
    gap: 56px;
    align-items: start;
    margin-top: 30px;
  }

  .stage__link {
    display: block;
    text-decoration: none;
    cursor: zoom-in;
  }

  .stage__mat {
    --mat-pad: calc(var(--mat-width) * 1.6);
  }

  /* The main image is never cropped: the well takes the picture's own shape. */
  .stage__mat .mat__well {
    aspect-ratio: auto;
  }

  .stage__img {
    width: 100%;
    height: auto;
  }

  .stage__link:hover .mat {
    border-color: var(--gold);
  }

  .stage__hint {
    margin-top: 10px;
    text-align: center;
  }

  .stage__empty {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    background: var(--surface);
    border: 1px solid var(--line);
  }

  .rail {
    margin-top: 22px;
  }

  .rail__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
  }

  .rail__item {
    width: 98px;
  }

  .rail__link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .rail__mat {
    --mat-pad: 6px;
  }

  .rail__mat .mat__well {
    aspect-ratio: 1 / 1;
  }

  .rail__img {
    height: 100%;
  }

  .rail__link:hover .mat,
  .rail__link[aria-current='true'] .mat {
    border-color: var(--gold);
  }

  .rail__label {
    display: block;
    margin-top: 7px;
    text-align: center;
    font-size: 10px;
  }

  .rail__link[aria-current='true'] .rail__label {
    color: var(--gold);
  }

  .videos {
    margin-top: 28px;
  }

  .videos__head {
    display: block;
    color: var(--gold);
    margin-bottom: 10px;
  }

  .videos__player {
    width: 100%;
    height: auto;
    background: var(--bg-deep);
    border: 1px solid var(--line);
  }

  .item__title {
    font-size: var(--fs-xl);
    line-height: 1.15;
  }

  .item__artist {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
  }

  .item__artist-link {
    font-size: var(--fs-md);
    color: var(--gold-soft);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  }

  .item__artist-link:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
  }

  .item__rule {
    margin: 22px 0 0;
  }

  .spec {
    margin-top: 22px;
    border-top: 1px solid var(--line);
  }

  .spec__row {
    display: grid;
    grid-template-columns: minmax(110px, 36%) minmax(0, 1fr);
    gap: 16px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--line);
  }

  .spec__label {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
    line-height: 1.5;
  }

  .spec__value {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--ink);
  }

  .spec__link {
    color: var(--gold-soft);
  }

  .price {
    margin-top: 28px;
  }

  .price__amount {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    line-height: 1.1;
    color: var(--ink);
  }

  .price__amount--ask,
  .price__amount--sold {
    color: var(--ink-muted);
  }

  .price__obo {
    margin-top: 6px;
  }

  .price__obo .smallcaps {
    color: var(--gold);
  }

  .actions {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .actions .btn {
    flex: 1 1 auto;
    min-width: 172px;
  }

  .actions__note,
  .actions__sold {
    flex: 1 0 100%;
    margin-top: 4px;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    line-height: 1.6;
    max-width: 44ch;
  }

  .actions__sold .smallcaps {
    color: var(--gold);
  }

  .item__about {
    margin-top: 64px;
    padding-top: 34px;
    border-top: 1px solid var(--line);
  }

  .item__about-head {
    display: block;
    color: var(--gold);
    margin-bottom: 10px;
  }

  .item__about .rule {
    margin-bottom: 22px;
  }

  /* ---------------------------------------------------------------------
     Artist
     --------------------------------------------------------------------- */

  .bio {
    margin-top: 34px;
  }

  .bio__none {
    font-size: var(--fs-lg);
    font-family: var(--font-display);
    color: var(--ink-muted);
  }

  .bio__links {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
  }

  .bio__links-link {
    font-size: var(--fs-sm);
    color: var(--gold-soft);
  }

  .artist__works {
    margin-top: 64px;
    padding-top: 34px;
    border-top: 1px solid var(--line);
  }

  /* ---------------------------------------------------------------------
     Contact
     --------------------------------------------------------------------- */

  .contact__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 56px;
    align-items: start;
    margin-top: 34px;
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 60ch;
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .field__label {
    color: var(--ink);
  }

  .field__req {
    color: var(--gold);
    margin-left: 4px;
  }

  .field__hint {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    line-height: 1.55;
    max-width: 52ch;
  }

  .field__wrap {
    display: flex;
    align-items: stretch;
  }

  .field__prefix {
    display: grid;
    place-items: center;
    padding-inline: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-right: 0;
    color: var(--ink-muted);
    font-size: var(--fs-md);
  }

  .field__input {
    width: 100%;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    padding: 12px 14px;
    font-size: var(--fs-md);
    font-family: var(--font-body);
  }

  .field__input--prefixed {
    border-radius: 0 var(--radius) var(--radius) 0;
  }

  .field__input--area {
    resize: vertical;
    min-height: 150px;
    line-height: 1.55;
  }

  .field__input::placeholder {
    color: color-mix(in srgb, var(--ink-muted) 75%, transparent);
  }

  .field__input:hover {
    border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
  }

  .field--error .field__input,
  .field--error .field__prefix {
    border-color: var(--danger);
  }

  .field__error {
    font-size: var(--fs-xs);
    color: var(--danger);
    font-weight: 700;
  }

  /* Honeypot: off-canvas, never announced, never tabbable. */
  .hp {
    position: absolute !important;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .alert {
    margin-bottom: 26px;
    padding: 16px 20px;
    border: 1px solid var(--danger);
    border-left-width: 3px;
    background: color-mix(in srgb, var(--danger) 10%, var(--surface));
    border-radius: var(--radius);
  }

  .alert__head {
    color: var(--danger);
    display: block;
    margin-bottom: 8px;
  }

  .alert__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--fs-sm);
    padding-left: 1.1em;
  }

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

  .form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 4px;
  }

  .form__note {
    color: var(--ink-muted);
  }

  .sent {
    margin-top: 34px;
    max-width: 60ch;
    border-left: 1px solid var(--gold);
    padding-left: 24px;
  }

  .sent__line + .sent__line,
  .sent__actions {
    margin-top: 14px;
  }

  .sent__line--muted {
    color: var(--ink-muted);
    font-size: var(--fs-sm);
  }

  /* ---- Slide-to-verify ---- */

  /* Hidden until JavaScript is confirmed present; the <noscript> block below
     carries the alternative. Nothing else on the site needs JavaScript. */
  .captcha {
    display: none;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  :root.js .captcha {
    display: block;
  }

  .captcha__label {
    display: block;
    color: var(--ink);
  }

  /* `--cap-w` / `--cap-h` are the challenge's own pixels, delivered as a
     nonce'd rule by the view. Below that width the SVG scales down and
     slider-captcha.js converts screen pixels back into challenge pixels; the
     piece's size, seat and travel are all set from script for that reason. */
  .captcha__stage {
    position: relative;
    width: var(--cap-w, 320px);
    max-width: 100%;
    margin-top: 12px;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    overflow: hidden;
  }

  .captcha__bg svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .captcha__piece {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform;
    pointer-events: none;
  }

  .captcha__piece svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .captcha__track {
    position: relative;
    width: var(--cap-w, 320px);
    max-width: 100%;
    height: 44px;
    margin-top: 14px;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .captcha__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: color-mix(in srgb, var(--accent) 26%, transparent);
    pointer-events: none;
  }

  .captcha__handle {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 46px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--surface-raised);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    touch-action: none;
    cursor: grab;
  }

  .captcha__handle:active {
    cursor: grabbing;
  }

  .captcha__handle-mark {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--gold);
  }

  .captcha[data-state='ok'] .captcha__handle {
    border-color: var(--accent);
  }

  .captcha[data-state='ok'] .captcha__fill {
    background: color-mix(in srgb, var(--accent) 40%, transparent);
  }

  .captcha[data-state='bad'] .captcha__handle {
    border-color: var(--danger);
  }

  .captcha__help {
    margin-top: 10px;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    max-width: 48ch;
  }

  .captcha__status {
    margin-top: 6px;
    font-size: var(--fs-xs);
    color: var(--gold);
    min-height: 1.4em;
  }

  .noscript {
    padding: 20px;
    border: 1px solid var(--gold);
    border-left-width: 3px;
    background: var(--surface);
    border-radius: var(--radius);
  }

  .noscript__line + .noscript__line {
    margin-top: 10px;
  }

  .noscript__line--muted {
    color: var(--ink-muted);
    font-size: var(--fs-sm);
  }

  .noscript a {
    color: var(--gold-soft);
  }

  /* ---- Side column ---- */

  .asking,
  .reach {
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .reach {
    margin-top: 24px;
  }

  .asking__head,
  .reach__head {
    display: block;
    color: var(--gold);
    margin-bottom: 10px;
  }

  .asking__body {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }

  .asking__mat {
    --mat-pad: 6px;
  }

  .asking__mat .mat__well {
    aspect-ratio: 1 / 1;
  }

  .asking__img {
    height: 100%;
  }

  .asking__title {
    font-family: var(--font-display);
    font-size: var(--fs-md);
  }

  .asking__title a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  }

  .asking__title a:hover {
    color: var(--gold-soft);
  }

  .asking__artist,
  .asking__price {
    margin-top: 7px;
  }

  .asking__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
  }

  .asking__price .money {
    font-family: var(--font-display);
    font-size: var(--fs-md);
  }

  .asking__obo {
    color: var(--gold);
  }

  .reach__list {
    list-style: none;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .reach__tag {
    display: block;
    margin-bottom: 3px;
  }

  .reach__link {
    font-size: var(--fs-sm);
    color: var(--gold-soft);
    text-decoration: none;
    word-break: break-word;
  }

  .reach__link:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  .reach__note {
    margin-top: 18px;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    line-height: 1.6;
  }

  /* ---------------------------------------------------------------------
     Error pages
     --------------------------------------------------------------------- */

  .errpage {
    max-width: 60ch;
    margin: 64px auto 0;
    text-align: center;
  }

  .errpage__code {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    line-height: 1;
    color: var(--gold);
    opacity: 0.35;
  }

  .errpage__title {
    margin-top: 14px;
    font-size: var(--fs-2xl);
  }

  .errpage__rule {
    margin: 22px auto;
  }

  .errpage__line + .errpage__line {
    margin-top: 12px;
  }

  .errpage__line--muted {
    color: var(--ink-muted);
    font-size: var(--fs-sm);
  }

  .errpage__nav {
    margin-top: 34px;
  }

  .errpage__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    list-style: none;
  }

  .errpage__link {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
    text-decoration: none;
  }

  .errpage__link:hover {
    color: var(--gold-soft);
  }

  .errpage__ref {
    margin-top: 22px;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
  }

  .errpage__actions {
    margin-top: 34px;
  }

  /* ---------------------------------------------------------------------
     Lightbox — built by lightbox.js, styled here
     --------------------------------------------------------------------- */

  .lb {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--bg-deep) 96%, transparent);
    opacity: 0;
    transition: opacity var(--t-panel) var(--ease);
  }

  .lb[data-open='true'] {
    opacity: 1;
  }

  .lb__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
    flex: 0 0 auto;
  }

  .lb__caption {
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lb__tools {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }

  .lb__btn {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 38px;
    padding-inline: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: transparent;
  }

  .lb__btn:hover {
    border-color: var(--gold);
    color: var(--gold-soft);
  }

  .lb__btn[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  .lb__canvas {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    contain: strict;
  }

  .lb__canvas[data-dragging='true'] {
    cursor: grabbing;
  }

  .lb__img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    transform-origin: 0 0;
    will-change: transform;
    /* Still never tinted, never rounded, never shadowed. */
    border-radius: 0;
    box-shadow: none;
    filter: none;
  }

  .lb__hint {
    flex: 0 0 auto;
    padding: 10px 18px 16px;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    border-top: 1px solid var(--line);
  }

  body[data-lb-open='true'] {
    overflow: hidden;
  }

/* ------------------------------------------------------------------ *
 * Spotlight — the Featured page, its archive, and the optional band on
 * the splash page. Same rules as everywhere else: the mat frames the
 * work, the work itself is never tinted, shadowed or scaled.
 * ------------------------------------------------------------------ */

  .feature__head {
    text-align: center;
    padding-block: 8px 20px;
  }

  .feature__kicker {
    color: var(--gold);
    display: block;
    margin-bottom: 10px;
  }

  .feature__title {
    font-family: var(--font-display);
    font-size: var(--fs-xxl);
    line-height: 1.1;
    margin: 0;
  }

  .feature__subject {
    margin: 10px 0 0;
    color: var(--ink-muted);
  }

  .feature__subject-link {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    color: var(--ink);
  }

  .feature__dates {
    margin-left: 10px;
  }

  .feature__archived-note {
    border: 1px solid var(--line);
    border-left: 2px solid var(--gold);
    background: var(--surface);
    padding: 12px 16px;
    color: var(--ink-muted);
    margin-bottom: 28px;
  }

  /* The write-up leads; the highlighted piece sits beside it. */
  .feature__body {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    gap: 48px;
    align-items: start;
  }

  .feature__bio {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }

  .feature__bio-heading {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    margin: 0 0 12px;
  }

  .feature__no-bio {
    color: var(--ink-muted);
    font-style: italic;
  }

  .feature__bio-more {
    margin-top: 16px;
  }

  .feature__piece-img {
    display: block;
    width: 100%;
    height: auto;
  }

  .feature__piece-meta {
    margin-top: 16px;
  }

  .feature__piece-title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    margin: 0 0 6px;
  }

  .feature__piece-dims {
    display: block;
    color: var(--ink-muted);
  }

  .feature__piece-price {
    font-size: var(--fs-lg);
    margin: 12px 0 0;
  }

  .feature__obo {
    display: block;
    color: var(--gold);
    margin-top: 4px;
  }

  /* A sold highlight is a normal outcome, not a broken page. */
  .feature__piece-sold {
    margin: 12px 0 0;
    color: var(--gold);
  }

  .feature__piece-actions {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
  }

  .feature__also {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
  }

  .feature__also-heading {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    margin: 0 0 12px;
  }

  .feature__archive-link {
    margin-top: 40px;
    text-align: center;
    color: var(--ink-muted);
  }

  /* --- archive --------------------------------------------------- */

  .feature-archive__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
  }

  .feature-archive__item + .feature-archive__item {
    border-top: 1px solid var(--line);
  }

  .feature-archive__link {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 4px;
    color: inherit;
    text-decoration: none;
  }

  .feature-archive__link:hover .feature-archive__title {
    color: var(--gold-soft);
  }

  .feature-archive__mat {
    flex: 0 0 92px;
  }

  .feature-archive__img {
    display: block;
    width: 100%;
    height: auto;
  }

  .feature-archive__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .feature-archive__kicker {
    color: var(--gold);
  }

  .feature-archive__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    transition: color 150ms ease-out;
  }

  /* --- the optional band on the splash page ---------------------- */

  .splash-feature {
    padding-top: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .splash-feature__kicker {
    color: var(--gold);
  }

  .splash-feature__rule {
    margin: 0;
  }

  .splash-feature__link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: inherit;
    text-decoration: none;
    text-align: left;
  }

  .splash-feature__thumb img {
    display: block;
    border: 1px solid var(--line);
  }

  .splash-feature__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .splash-feature__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    transition: color 150ms ease-out;
  }

  .splash-feature__link:hover .splash-feature__title {
    color: var(--gold-soft);
  }

  .splash-feature__subject {
    color: var(--ink-muted);
    font-size: var(--fs-sm);
  }

}

/* =========================================================================
   Responsive. Desktop-first: these only step down.
   ========================================================================= */

/* ------------------------------------------------------------------ *
 * Nav width.
 *
 * Addendum 01 added "All Works" and "Featured" to a row that already carried
 * five categories, one of them three words long. At the 1440 design width it
 * fits; below that it has to give ground in stages before the burger takes
 * over. Without this the row overflows and Contact — the one item that must
 * always be reachable — falls off the right edge.
 * ------------------------------------------------------------------ */

/* The nav is the element allowed to shrink; the brand never is. */
.header__inner > .nav {
  min-width: 0;
  margin-left: auto;
}

@media (max-width: 1440px) {
  .header__inner {
    gap: 20px;
  }

  .nav__link {
    padding-inline: 10px;
  }
}

@media (max-width: 1340px) {
  .header__inner {
    gap: 14px;
  }

  .nav__link {
    padding-inline: 8px;
    letter-spacing: 0.07em;
  }

  .brand__wordmark-lg {
    font-size: 1.25rem;
  }
}

@media (max-width: 1200px) {
  .nav__link {
    font-size: 0.6875rem;
    padding-inline: 7px;
    letter-spacing: 0.05em;
  }

  .brand__badge {
    width: 44px;
    height: 44px;
  }

  .brand__wordmark-lg {
    font-size: 1.125rem;
  }

  .brand__wordmark-sm {
    font-size: 0.5625rem;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
  }

  .item__cols,
  .contact__cols {
    gap: 40px;
  }
}

@media (max-width: 1080px) {
  :root {
    --fs-2xl: 2.125rem;
    --fs-3xl: 3rem;
  }

  /* The admin's column count is a desktop instruction. Below this width we
     stop honouring it literally and fill the row instead. */
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  }

  .item__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

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

  .contact__side {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }

  .reach {
    margin-top: 0;
  }
}

/* Eight top-level items (five categories plus All Works, Featured and
   Contact) stop fitting on one row below about 1050px, and Contact is the
   one link that must never fall off. The burger takes over here rather
   than shrinking the type past legibility. */
@media (max-width: 1024px) {
  .header {
    position: static;
    height: auto;
  }

  .header__inner {
    flex-wrap: wrap;
    gap: 12px;
    padding-block: 14px;
  }

  .nav {
    margin-left: 0;
    width: 100%;
  }

  .nav__list {
    flex-wrap: wrap;
    gap: 2px 6px;
  }

  .nav__link--contact {
    margin-left: 0;
  }

  /* Sub-menus become an inline list rather than an overlay. */
  .nav__menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    margin: 4px 0 8px 13px;
    padding: 0;
  }

  .nav__item--has-menu:hover > .nav__menu,
  .nav__item--has-menu:focus-within > .nav__menu,
  .nav__item--has-menu[data-open='true'] > .nav__menu {
    display: block;
  }

  /* With JavaScript, the whole nav collapses behind the burger. */
  :root.js .nav__burger {
    display: inline-flex;
  }

  :root.js .nav {
    display: none;
  }

  :root.js .nav[data-open='true'] {
    display: block;
  }

  :root.js .nav__item--has-menu:hover > .nav__menu,
  :root.js .nav__item--has-menu:focus-within > .nav__menu {
    display: none;
  }

  :root.js .nav__item--has-menu[data-open='true'] > .nav__menu {
    display: block;
  }

  .footer__cols {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
  }

  .lit {
    padding-top: 44px;
  }

  .mission {
    padding-top: 48px;
  }
}

@media (max-width: 680px) {
  :root {
    --gutter: 18px;
    --fs-2xl: 1.75rem;
    --fs-xl: 1.4375rem;
    --fs-3xl: 2.5rem;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 18px;
  }

  .main {
    padding-bottom: 64px;
  }

  .filters {
    flex-direction: column;
    align-items: stretch;
  }

  .filters__input,
  .filters__select {
    min-width: 0;
    width: 100%;
  }

  .filters__count {
    margin-left: 0;
  }

  .actions .btn {
    min-width: 0;
    width: 100%;
  }

  .asking__body {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .spec__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .brand__badge {
    width: 44px;
    height: 44px;
  }

  .brand__wordmark {
    height: 24px;
  }

  .lb__bar {
    padding: 10px 12px;
  }

  .lb__caption {
    display: none;
  }
}

@media (max-width: 900px) {
  .feature__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 560px) {
  .splash-feature__link {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .feature-archive__link {
    gap: 14px;
  }

  .feature-archive__mat {
    flex-basis: 68px;
  }
}

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