/* pages/design-archive.css: /archive (templates/design-archive.php). Intro, filter pills, CSS-columns masonry with the
   /work curtain on every tile, full-screen <dialog> lightbox. Tokens from tokens.css; sizes fluid 360 -> 1440. */
@layer custom {
  .arc {
    --arc-gap: clamp(1rem, 0.583rem + 1.852vw, 2.25rem);
    --arc-tile: var(--clr-deep);
    --arc-line: var(--clr-white-20);
  }

  /* intro + filters */
  .arc-intro-wrap {
    overflow: hidden;
    padding-bottom: 0.2em; /* descenders survive the linesUp mask; no negative margin (siblings must not overlap) */
  }
  .arc-intro {
    max-inline-size: 46ch;
    margin: 0 0 clamp(1.75rem, 1.333rem + 1.852vw, 3rem);
    font-size: clamp(1.125rem, 1rem + 0.556vw, 1.5rem);
    line-height: 1.5;
    color: var(--clr-white-60);
    text-wrap: pretty;
  }
  /* Filters: large text tabs in the display face, muted until active, count as a superscript (editorial, like the
     page titles), not pills. Hit area stays >= 44px. */
  /* inline tabs + text-wrap: balance, so a wrapped row splits evenly (no lone tab on the last row) */
  .arc-filters {
    display: block;
    text-wrap: balance;
    line-height: 1.45;
    margin-bottom: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);
    font-size: clamp(1.75rem, 0.03rem + 2.88vw, 2.9rem);
  }
  .arc-filter {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    vertical-align: top;
    margin-right: 0.4em;
    white-space: nowrap;
    padding: 0 0 0.12em;
    border: 0;
    background: none;
    color: var(--clr-white-40);
    font: inherit;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: color 0.45s cubic-bezier(0.54, 0.54, 0.14, 0.99);
  }
  .arc-filter:last-child { margin-right: 0; }
  .arc-filter__label { white-space: nowrap; }
  /* touch target >= 44px without changing the line box */
  .arc-filter::before { content: ""; position: absolute; inset: max(0px, calc((44px - 100%) / -2)) -0.2em; }
  .arc-filter__count {
    margin-left: 0.3em;
    font-size: 0.36em;
    line-height: 1;
    letter-spacing: 0;
    position: relative;
    top: 0.35em;
    color: inherit;
    opacity: 0.8;
  }
  /* underline: draws in from the left on the active tab */
  .arc-filter::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.6s cubic-bezier(0.54, 0.54, 0.14, 0.99);
  }
  @media (hover: hover) {
    .arc-filter:hover { color: var(--clr-white-60); }
  }
  .arc-filter[aria-pressed="true"] { color: var(--clr-white); }
  .arc-filter[aria-pressed="true"]::after { transform: scaleX(1); transform-origin: left center; }
  .arc-filter:focus-visible {
    outline: 2px solid var(--clr-white);
    outline-offset: 6px;
    border-radius: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .arc-filter, .arc-filter::after { transition: none; }
  }

  /* masonry: CSS columns, 1 / 2 / 3 */
  .arc-grid {
    columns: 3;
    column-gap: var(--arc-gap);
    margin: 0 0 clamp(4rem, 2.667rem + 5.926vw, 8rem);
    padding: 0;
    list-style: none;
  }
  @media (width < 1024px) { .arc-grid { columns: 2; } }
  @media (width < 600px) { .arc-grid { columns: 1; } }
  .arc-item {
    break-inside: avoid;
    margin: 0 0 var(--arc-gap);
    text-wrap: initial;
  }
  .arc-item[hidden] { display: none; }
  .arc-figure { margin: 0; }
  .arc-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: zoom-in;
  }
  .arc-media {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--arc-tile);
  }
  .arc-media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    transition: transform 0.8s cubic-bezier(0.54, 0.54, 0.14, 0.99);
  }
  @media (hover: hover) {
    .arc-link:hover .arc-media img { transform: scale(1.03); }
  }
  .arc-link:focus-visible {
    outline: 2px solid var(--clr-white);
    outline-offset: 3px;
    box-shadow: none;
  }
  /* curtain, same as the /work cards: scaleX 1 -> 0 once the tile top passes 75% */
  .arc-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--clr-page-dark);
    transform-origin: right center;
    transition: transform 0.8s cubic-bezier(0.54, 0.54, 0.14, 0.99);
    pointer-events: none;
  }
  .arc-item.is_inview .arc-media::before,
  html:not(.js) .arc-media::before,
  html.reduced .arc-media::before {
    transform: scaleX(0);
  }
  .arc-cap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 1rem;
    padding-top: 0.875rem;
    font-size: 1rem;
    line-height: 1.4;
  }
  .arc-cap__title {
    color: var(--clr-white);
    font-weight: 500;
    text-wrap: balance;
  }
  .arc-cap__cat {
    color: var(--clr-white-40);
    white-space: nowrap;
  }

  /* lightbox */
  .arc-lb {
    position: fixed;
    inset: 0;
    inline-size: 100vw;
    block-size: 100dvh;
    max-inline-size: none;
    max-block-size: none;
    margin: 0;
    padding: 0;
    border: 0;
    /* translucent: the page stays faintly visible behind a blur */
    background: rgb(13 13 13 / 0.78);
    -webkit-backdrop-filter: blur(18px) saturate(0.85);
    backdrop-filter: blur(18px) saturate(0.85);
    color: var(--clr-white);
    touch-action: pan-y pinch-zoom;
    opacity: 0;
    transition: opacity 0.35s, display 0.35s allow-discrete, overlay 0.35s allow-discrete;
  }
  .arc-lb[open] { opacity: 1; }
  @starting-style { .arc-lb[open] { opacity: 0; } }
  .arc-lb::backdrop { background: transparent; }
  .arc-lb__stage {
    display: grid;
    place-items: center;
    block-size: 100%;
    padding: 5rem clamp(1rem, -1.5rem + 11.111vw, 8.5rem) 6.5rem;
    box-sizing: border-box;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
  }
  .arc-lb.is-dragging .arc-lb__stage { cursor: grabbing; }
  .arc-lb__figure { will-change: transform, opacity; }
  .arc-lb__figure {
    display: grid;
    justify-items: center;
    gap: 1rem;
    margin: 0;
    max-inline-size: 100%;
  }
  .arc-lb__img {
    display: block;
    inline-size: auto;
    block-size: auto;
    max-inline-size: min(100%, 1600px);
    max-block-size: calc(100dvh - 12rem);
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
  }
  .arc-lb__cap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1rem;
    font-size: 1rem;
    line-height: 1.4;
    text-align: center;
  }
  .arc-lb__count {
    color: var(--clr-white-40);
    letter-spacing: 0.04em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .arc-lb__btn {
    position: absolute;
    display: grid;
    place-items: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    padding: 0;
    border: 1px solid var(--clr-white-20);
    border-radius: 50%;
    background: rgb(13 13 13 / 0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--clr-white);
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
  }
  .arc-lb__btn[hidden] { display: none; }
  .arc-lb__btn svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  @media (hover: hover) {
    .arc-lb__btn:hover { border-color: var(--clr-white); background: rgb(255 255 255 / 0.08); }
  }
  .arc-lb__btn:focus-visible {
    outline: none;
    border-color: var(--clr-white);
    box-shadow: 0 0 0 1px var(--clr-white);
    border-radius: 50%;
  }
  .arc-lb__close { top: 1rem; right: 1rem; }
  .arc-lb__prev,
  .arc-lb__next { top: 50%; translate: 0 -50%; }
  .arc-lb__prev { left: clamp(1rem, 0.5rem + 2.222vw, 2.5rem); }
  .arc-lb__next { right: clamp(1rem, 0.5rem + 2.222vw, 2.5rem); }
  @media (width < 768px) {
    .arc-lb__prev,
    .arc-lb__next { top: auto; bottom: 1rem; translate: none; }
    .arc-lb__prev { left: calc(50% - 4rem); }
    .arc-lb__next { right: calc(50% - 4rem); }
  }
}