@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/inter-800.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-700.woff2") format("woff2");
}

/* v1.1.2: no blue tap-highlight box on mobile when a control is pressed */
html, a, button, [role="button"], .gallery-item, input, label, summary { -webkit-tap-highlight-color: transparent; }
/* v1.1.2: rings only for keyboard focus (:focus-visible). Taps/clicks that focus an element never draw the browser's
   default focus outline. Browsers without :focus-visible drop this rule and keep their defaults. */
:focus:not(:focus-visible) { outline: none; }

/* v1.1.1: opt out of Android WebView "algorithmic darkening" (X / Twitter in-app browser), which re-coloured the
   1392 gradient and darkened its white top to near-black. "only light" keeps the browser defaults (form controls,
   keyboard focus ring colour) exactly as before; the page is already dark, so nothing else changes. */
:root { color-scheme: only light;
      --black: #000000;
      --graphite: #3C4046;
      --titanium: #6A737C;
      --titanium-text: #6E7780; /* titanium nudged to 4.6:1 on black for small text */
      --orange: #FF5E00;
      --yellow: #FFC600;
      --white: #FFFFFF;
      --bg: var(--black);
      --panel: var(--graphite);
      --panel-2: var(--titanium);
      --text: var(--white);
      --muted: #AEB4BA;
      --line: rgba(106,115,124,.48);
      --orange-soft: rgba(255,94,0,.14);
      --yellow-soft: rgba(255,198,0,.14);
      --max: 1180px;
      --radius: 12px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: var(--bg); }
    /* v0.7.0z4: no smooth scrolling for reduced-motion users */
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
    /* v0.7.0z4: #home sits right under the sticky header; an oversized margin clamps to the very top of the page,
       so Home / Back to top land at scrollY 0 at every header height. Other anchors are unchanged. */
    #home { scroll-margin-top: 200px; }
    body {
      margin: 0;
      color: var(--text);
      background: #000000;
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
      overflow-x: hidden;
    }
    body.locked { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    a:active { color: var(--orange); }
    button { font: inherit; }

    .noise {
      position: fixed;
      inset: 0;
      z-index: 40;
      pointer-events: none;
      opacity: .028;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
    }

    .wrap {
      width: min(calc(100% - 34px), var(--max));
      margin: 0 auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 30;
      backdrop-filter: blur(18px);
      background: rgba(9,9,10,.78);
      border-bottom: 1px solid var(--line);
    }
    .header-inner {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
.brand-logo {
      display: block;
      width: auto;
      height: 40px;
      max-width: 110px;
      flex: 0 0 auto;
      object-fit: contain;
    }
    .brand strong {
      font-family: "Space Grotesk", Inter, system-ui, sans-serif;
      font-weight: 700;
      font-size: 1.35rem;
      letter-spacing: -.07em;
    }
    .brand span {
      color: var(--muted);
      font-size: .8rem;
      text-transform: uppercase;
      letter-spacing: .15em;
      white-space: nowrap;
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 24px;
    }
    .nav a {
      color: #D8DCE0;
      text-transform: uppercase;
      letter-spacing: .13em;
      font-size: .8rem;
      font-weight: 700;
    }
    @media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .nav a:hover {
      color: var(--titanium);
      text-decoration: underline;
      text-underline-offset: 0.35em;
      text-decoration-thickness: 1.5px;
      text-decoration-color: rgba(255,94,0,.85);
    } }
    .nav a:active { color: var(--yellow); text-decoration: none; }
    .nav a.active {
      color: var(--orange);
      font-weight: 800;
      text-decoration: none;
    }
    @media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .nav a.active:hover {
      color: var(--orange);
      text-decoration: underline;
      text-underline-offset: 0.35em;
      text-decoration-thickness: 1.5px;
      text-decoration-color: #C5CAD0;
    } }

    .nav-toggle {
      display: none;
      position: relative;
      width: 38px;
      height: 38px;
      border: 2px solid var(--line);
      background: transparent;
      color: white;
      border-radius: 10px;
      cursor: pointer;
      font-size: 0;
    }
    .nav-toggle::before {
      content: "";
      position: absolute;
      left: 9px;
      right: 9px;
      top: 50%;
      height: 2px;
      background: #fff;
      box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
      transform: translateY(-50%);
    }

    .eyebrow {
      margin: 0 0 18px;
      color: var(--orange);
      font-size: .66rem;
      line-height: 1.2;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-weight: 800;
    }

    .button {
      min-height: 48px;
      padding: 0 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 2px solid transparent;
      border-radius: 10px;
      text-transform: uppercase;
      letter-spacing: .13em;
      font-size: .66rem;
      font-weight: 800;
      cursor: pointer;
    }
    .button-primary {
      background: var(--orange);
      color: #000000;
    }
    @media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .button-primary:hover { filter: brightness(1.08); border-color: #C5CAD0; } }
    .button-primary:active { background: var(--yellow); color: var(--black); }
    .button-secondary {
      border-color: var(--line);
      color: white;
      background: rgba(255,255,255,.02);
    }
    @media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .button-secondary:hover { border-color: rgba(255,94,0,.75); } }
    .button-secondary:active { border-color: var(--yellow); color: var(--yellow); }

    .hero-card {
      aspect-ratio: 4 / 5;
      border: 2px solid var(--line);
      border-radius: 16px;
      padding: 18px;
      background:
        linear-gradient(145deg, rgba(255,94,0,.09), transparent 35%),
        linear-gradient(160deg, #3C4046, #202327);
      box-shadow: 0 30px 90px rgba(0,0,0,.45);
      position: relative;
      overflow: hidden;
    }

    .hero-card::before,
    .hero-card::after {
      content: "";
      position: absolute;
      inset: auto;
      border: 2px solid rgba(255,255,255,.08);
      transform: rotate(30deg);
    }
    .hero-card::before {
      width: 260px;
      height: 260px;
      right: -40px;
      top: 44px;
    }
    .hero-card::after {
      width: 170px;
      height: 170px;
      left: -55px;
      bottom: 74px;
      border-color: rgba(255,94,0,.25);
    }

    .hero-card-inner {
      height: 100%;
      border-radius: 12px;
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 34%, rgba(255,94,0,.22), transparent 28%),
        repeating-linear-gradient(60deg, transparent 0 31px, rgba(255,255,255,.035) 31px 32px),
        repeating-linear-gradient(-60deg, transparent 0 31px, rgba(255,255,255,.035) 31px 32px),
        #282C31;
    }
    .hero-card-mark {
      width: 66%;
      aspect-ratio: 1;
      clip-path: polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);
      background: linear-gradient(145deg, #6A737C, #3C4046);
      display: grid;
      place-items: center;
    }
    .hero-card-mark > div {
      width: 91%;
      aspect-ratio: 1;
      clip-path: inherit;
      background: #000000;
      display: grid;
      place-items: center;
      border: 2px solid rgba(255,94,0,.45);
    }
    .hero-card-mark span {
      font-family: "Space Grotesk", Inter, system-ui, sans-serif;
      font-weight: 700;
      font-size: clamp(2rem, 6vw, 4rem);
      letter-spacing: -.08em;
    }
    .hero-card-label {
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 22px;
      display: flex;
      justify-content: space-between;
      color: var(--muted);
      font-size: .57rem;
      text-transform: uppercase;
      letter-spacing: .16em;
    }

    .section {
      padding: 110px 0;
      border-top: 1px solid var(--line);
    }

    .section-head {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 70px;
      margin-bottom: 44px;
      align-items: end;
    }

    .section-head h2 {
      margin: 0;
      font-family: "Space Grotesk", Inter, system-ui, sans-serif;
      font-weight: 700;
      font-size: clamp(2.7rem, 7vw, 5.7rem);
      line-height: .95;
      letter-spacing: -.07em;
    }

    .section-head p:last-child {
      max-width: 560px;
      margin: 0;
      color: var(--muted);
      line-height: 1.7;
    }

    .filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 22px;
    }
    .filter-button {
      border: 2px solid var(--line);
      background: transparent;
      color: var(--muted);
      padding: 11px 16px;
      border-radius: 10px;
      font-size: .78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .13em;
      cursor: pointer;
    }
    @media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .filter-button:not(.active):hover {
      border-color: rgba(255,94,0,.75);
    } }
    .filter-button.active {
      color: var(--black);
      background: var(--orange);
      border-color: var(--orange);
    }
    @media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .filter-button.active:hover { filter: brightness(1.08); border-color: #C5CAD0; } }

    /* v0.7.0 gallery pagination: page controls match the filter tabs (orange hover, grey press, dimmed when disabled) */
    .gallery-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px 16px;
      margin-bottom: 22px;
    }
    .gallery-toolbar .filters { margin-bottom: 0; }
    /* Top pager stays right-aligned, also when it wraps onto its own line (tablet/phone) */
    .gallery-toolbar .gallery-pager { margin-left: auto; }
    .gallery-pager {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .gallery-pager-bottom {
      justify-content: flex-end;
      margin-top: 22px;
    }
    .pager-button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 2px solid var(--line);
      background: transparent;
      color: var(--muted);
      padding: 11px 16px;
      border-radius: 10px;
      font-size: .78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .13em;
      cursor: pointer;
    }
    .pager-prev::before,
    .pager-next::after {
      content: "";
      width: 7px;
      height: 7px;
      border-top: 2px solid var(--orange);
      border-right: 2px solid var(--orange);
    }
    .pager-prev::before { transform: rotate(-135deg); margin-left: 3px; }
    .pager-next::after { transform: rotate(45deg); margin-right: 3px; }
    @media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .pager-button:not(:disabled):hover { border-color: rgba(255,94,0,.75); } }
    .pager-button:not(:disabled):active { border-color: #C5CAD0; color: #C5CAD0; }
    .pager-button:disabled { opacity: .38; cursor: default; }
    .pager-button:disabled::before,
    .pager-button:disabled::after { border-color: currentColor; }
    .pager-status {
      min-width: 4.5em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: var(--titanium-text);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .13em;
      white-space: pre;
    }
    /* single page: prev/next are disabled (dimmed); the "1 / 1" status stays readable */
    /* Current page number: click to type a page (orange underline hover, grey press, orange focus) */
    .pager-current {
      margin: 0;
      padding: 2px 4px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: inherit;
      letter-spacing: inherit;
      cursor: pointer;
      text-decoration-line: underline;
      text-decoration-color: transparent;
      text-decoration-thickness: 2px;
      text-underline-offset: 4px;
    }
    @media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .pager-current:not(:disabled):hover { text-decoration-color: rgba(255,94,0,.75); } }
    .pager-current:not(:disabled):active { text-decoration-color: #C5CAD0; }
    /* No ring on mouse/touch focus; keyboard focus gets a rounded orange ring */
    .pager-current:focus { outline: none; }
    .pager-current:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
    .pager-current:disabled { cursor: default; }
    .pager-current[hidden],
    .pager-input[hidden] { display: none; }
    .pager-input {
      margin: 0;
      padding: 2px 4px;
      border: 2px solid var(--line);
      border-radius: 6px;
      background: rgba(255,255,255,.02);
      color: var(--titanium-text);
      font: inherit;
      letter-spacing: inherit;
      text-align: center;
      outline: none;
    }
    .pager-input:focus { border-color: var(--orange); }
    .pager-input::selection { background: var(--orange-soft); color: var(--white); }
    .pager-current { touch-action: manipulation; }
    /* Phones/tablets: 16px input text so iOS Safari doesn't auto-zoom on focus; tighter spacing keeps the box compact */
    @media (max-width: 680px), (pointer: coarse) {
      .pager-input {
        font-size: 16px;
        letter-spacing: 0;
        padding: 0 4px;
        line-height: 1.2;
      }
    }
    /* v0.7.0 gallery search: magnifier icon right after Videos; expands in place into the field */
    .filters-tail {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .gallery-search {
      flex: 0 0 auto;
      width: 41px;
      min-width: 41px;
      transition: width .22s ease, flex-grow .22s ease;
    }
    .gallery-search.is-open { width: var(--search-open-w, 260px); }
    .gallery-search { position: relative; }
    /* Tag suggestions: overlay panel under the open search field (never pushes layout) */
    .search-suggest {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      z-index: 20;
      width: max(100%, 300px);
      max-width: min(360px, calc(100vw - 34px));
      display: block;
      padding: 0;
      max-height: min(60vh, 280px);
      overflow-y: auto;
      overscroll-behavior: contain;
      border: 2px solid var(--line);
      border-radius: 12px;
      background-color: var(--black);
      background-image: linear-gradient(rgba(255,255,255,.02), rgba(255,255,255,.02));
      box-shadow: 0 14px 30px rgba(0,0,0,.55);
    }
    .search-suggest[hidden] { display: none; }
    /* Sticky header: 'Tags' label + Clear text button */
    .suggest-head {
      position: sticky;
      top: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px 6px 12px;
      background-color: var(--black);
      background-image: linear-gradient(rgba(255,255,255,.02), rgba(255,255,255,.02));
    }
    .suggest-label {
      color: var(--titanium);
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .suggest-reset {
      appearance: none;
      margin: 0 -4px 0 0;
      padding: 4px 6px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--titanium);
      font: inherit;
      font-size: .66rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      cursor: pointer;
      touch-action: manipulation;
    }
    @media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .suggest-reset:not(.is-disabled):hover { color: var(--orange); } }
    .suggest-reset:not(.is-disabled):active { color: #C5CAD0; }
    .suggest-reset:focus { outline: none; }
    .suggest-reset:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
    .suggest-reset.is-disabled { opacity: .38; cursor: default; pointer-events: none; }
    .suggest-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 2px 10px 10px;
    }
    .suggest-empty {
      margin: 0;
      padding: 0 2px 2px;
      color: var(--titanium);
      font-size: .72rem;
      letter-spacing: .04em;
    }
    .tag-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      padding: 6px 12px;
      border: 2px solid var(--line);
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      cursor: pointer;
      touch-action: manipulation;
    }
    @media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .tag-chip:not(.is-disabled):hover { border-color: rgba(255,94,0,.75); } }
    .tag-chip:not(.is-disabled):active { border-color: #C5CAD0; color: #C5CAD0; }
    /* Greyed chip: no co-occurrence with the selected tags; dimmed like other disabled controls, not interactive */
    .tag-chip.is-disabled { color: var(--titanium-text); border-color: rgba(110,119,128,.3); cursor: default; pointer-events: none; }
    .tag-chip.is-disabled .tag-chip-count { color: var(--titanium-text); }
    .tag-chip:focus { outline: none; }
    .tag-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
    .tag-chip-count { color: var(--titanium); font-size: .66rem; letter-spacing: .06em; }
    .search-shell {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      height: 41px;
      border: 2px solid var(--line);
      border-radius: 10px;
      background-color: var(--black);
      background-image: linear-gradient(rgba(255,255,255,.02), rgba(255,255,255,.02));
      overflow: hidden;
    }
    @media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .search-shell:hover { border-color: rgba(255,94,0,.75); } }
    .gallery-search:not(.is-open) .search-shell:active { border-color: #C5CAD0; }
    .gallery-search.is-open .search-shell:focus-within { border-color: var(--orange); }
    .search-shell:has(.search-toggle:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
    .search-toggle {
      flex: 0 0 37px;
      width: 37px;
      height: 37px;
      margin: 0;
      padding: 0;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      touch-action: manipulation;
    }
    .search-toggle svg { display: block; }
    .search-toggle:focus { outline: none; }
    @supports not selector(:has(*)) {
      .search-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; }
    }
    .search-input {
      -webkit-appearance: none;
      appearance: none;
      flex: 1 1 auto;
      min-width: 0;
      width: 0;
      height: 100%;
      margin: 0;
      padding: 0 34px 0 0;
      border: 0;
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: .9rem;
      outline: none;
      opacity: 0;
      visibility: hidden;
    }
    .gallery-search.is-open .search-input { opacity: 1; visibility: visible; transition: opacity .15s ease .05s; }
    .search-input::placeholder { color: var(--titanium); opacity: 1; }
    .search-input::-webkit-search-cancel-button,
    .search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
    .search-input::selection { background: var(--orange-soft); color: var(--white); }
    .gallery-search:not(.is-open) .search-clear { display: none; }
    .search-clear {
      position: absolute;
      top: 50%;
      right: 6px;
      width: 26px;
      height: 26px;
      margin: 0;
      padding: 0;
      transform: translateY(-50%);
      border: 0;
      border-radius: 6px;
      background: transparent;
      cursor: pointer;
      touch-action: manipulation;
    }
    .search-clear[hidden] { display: none; }
    .search-clear::before,
    .search-clear::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 12px;
      height: 2px;
      border-radius: 1px;
      background: var(--titanium);
    }
    .search-clear::before { transform: translate(-50%, -50%) rotate(45deg); }
    .search-clear::after { transform: translate(-50%, -50%) rotate(-45deg); }
    @media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .search-clear:hover::before,
    .search-clear:hover::after { background: var(--orange); } }
    .search-clear:active::before,
    .search-clear:active::after { background: #C5CAD0; }
    .search-clear:focus { outline: none; }
    .search-clear:focus-visible { outline: 2px solid var(--orange); outline-offset: 0; border-radius: 6px; }
    @media (max-width: 680px) {
      /* Phones: tabs get the full line; the icon stays beside Videos and the open field fills the rest of that line */
      .gallery-toolbar .filters { flex: 1 1 100%; position: relative; }
      .filters-tail.is-search-open { flex: 1 1 auto; }
      .gallery-search { width: auto; flex: 0 1 41px; }
      .gallery-search.is-open { width: auto; flex-grow: 1; }
      .gallery-search { position: static; }
      .search-suggest {
        top: var(--suggest-top, calc(100% + 6px));
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
      }
      .gallery-search.is-takeover .search-shell {
        position: absolute;
        left: 0;
        right: 0;
        top: var(--search-top, 0);
        width: auto;
        z-index: 3;
      }
    }
    @media (max-width: 680px), (pointer: coarse) {
      .search-input { font-size: 16px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .gallery-search, .gallery-search.is-open .search-input { transition: none; }
    }
    /* v0.7.0z: active tags with no items in the current tab, greyed and not applied */
    .gallery-inactive { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 16px; }
    .gallery-inactive[hidden] { display: none; }
    .gallery-inactive-label { color: var(--titanium-text); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
    .gallery-empty {
      grid-column: 1 / -1;
      padding: 18px 2px;
      color: var(--titanium-text);   /* z5: was --titanium (4.35:1 on black); --titanium-text passes 4.5:1 */
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .gallery-grid { transition: opacity .22s ease; }
    .gallery-grid.is-fading { opacity: 0; }
    .gallery-grid:focus { outline: none; }
    @media (prefers-reduced-motion: reduce) {
      .gallery-grid { transition: none; }
    }
    /* 3-column slot grid (681px and up); paging places tiles explicitly (see PAGE_SLOTS in script.js) */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      align-items: start;
      container-type: inline-size;
    }
    .gallery-item {
      min-height: 0;
      aspect-ratio: 4 / 5;
      border: 2px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      position: relative;
      cursor: pointer;
      background: color-mix(in srgb, var(--graphite) 54%, var(--black));
      grid-column: span 1;
    }
    .gallery-item.tall { aspect-ratio: 4 / 5; }
        .gallery-item::after {
      content: "";
      position: absolute;
      inset: 14px;
      z-index: 2;
      pointer-events: none;
      background:
        linear-gradient(#C5CAD0, #C5CAD0) left top / 16px 2px no-repeat,
        linear-gradient(#C5CAD0, #C5CAD0) left top / 2px 16px no-repeat,
        linear-gradient(#C5CAD0, #C5CAD0) right top / 16px 2px no-repeat,
        linear-gradient(#C5CAD0, #C5CAD0) right top / 2px 16px no-repeat,
        linear-gradient(#C5CAD0, #C5CAD0) left bottom / 16px 2px no-repeat,
        linear-gradient(#C5CAD0, #C5CAD0) left bottom / 2px 16px no-repeat,
        linear-gradient(#C5CAD0, #C5CAD0) right bottom / 16px 2px no-repeat,
        linear-gradient(#C5CAD0, #C5CAD0) right bottom / 2px 16px no-repeat;
    }
.gallery-item:focus { outline: none; }
.gallery-item:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .gallery-item:hover::after {
      content: "";
      position: absolute;
      inset: 14px;
      z-index: 2;
      pointer-events: none;
      background:
        linear-gradient(#ff5e00, #ff5e00) left top / 16px 2px no-repeat,
        linear-gradient(#ff5e00, #ff5e00) left top / 2px 16px no-repeat,
        linear-gradient(#ff5e00, #ff5e00) right top / 16px 2px no-repeat,
        linear-gradient(#ff5e00, #ff5e00) right top / 2px 16px no-repeat,
        linear-gradient(#ff5e00, #ff5e00) left bottom / 16px 2px no-repeat,
        linear-gradient(#ff5e00, #ff5e00) left bottom / 2px 16px no-repeat,
        linear-gradient(#ff5e00, #ff5e00) right bottom / 16px 2px no-repeat,
        linear-gradient(#ff5e00, #ff5e00) right bottom / 2px 16px no-repeat;
    } }

    /* Wide = 2 slots in one row, same row height as a normal 4:5 tile (3 columns, two 14px gaps) */
    .gallery-item.wide {
      grid-column: span 2;
      aspect-ratio: auto;
      height: calc((100cqi - 28px) / 3 * 5 / 4);
    }

    .gallery-media {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .gallery-overlay {
      position: absolute;
      inset: auto 0 0 0;
      padding: 44px 28px 26px;
      background: linear-gradient(transparent, rgba(0,0,0,.82));
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 20px;
    }
    .gallery-overlay strong {
      display: inline;
      font-size: 1rem;
      background: rgba(0,0,0,.72);
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .gallery-overlay span {
      color: #C5CAD0;
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: .12em;
    }
    .play-badge {
      width: 40px;
      height: 40px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--orange);
      color: #000000;
      font-size: .78rem;
      font-weight: 900;
      margin-bottom: 8px;
      margin-right: 4px;
    }

    .links-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }

    .link-card {
      position: relative;
      overflow: hidden;
      min-height: 190px;
      border: 2px solid var(--line);
      border-radius: var(--radius);
      padding: 30px;
      background: linear-gradient(145deg, #3C4046, #202327);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 28px;
      align-items: center;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .link-card::before {
      content: "";
      position: absolute;
      top: 14px;
      right: 14px;
      width: 16px;
      height: 16px;
      clip-path: polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);
      background: rgba(106,115,124,.42);
      pointer-events: none;
    }
    /* v0.7.0z4: hover-capable pointers only, so a tap on touch screens doesn't leave a card stuck lifted/orange */
    @media (hover: hover) {
      .link-card:hover::before {
        background: rgba(255,94,0,.85);
      }

      .link-card:hover {
        transform: translateY(-1px);
        border-color: rgba(255,94,0,.75);
      }
    }
    .link-card small {
      display: block;
      color: var(--orange);
      font-size: .74rem;
      line-height: 1.2;
      text-transform: uppercase;
      letter-spacing: .13em;
      font-weight: 800;
      margin-bottom: 18px;
    }
    .link-card h3 {
      margin: 0 0 10px;
      font-size: clamp(1.55rem, 2.4vw, 2rem);
      line-height: 1.08;
      letter-spacing: -.025em;
    }
    .link-card p {
      margin: 0;
      max-width: 36ch;
      color: #C5CAD0;
      font-size: 1rem;
      line-height: 1.55;
    }
    .link-arrow {
      align-self: center;
      font-size: 1.8rem;
      line-height: 1;
      color: var(--orange);
    }

.link-card-disabled {
  opacity: .72;
  cursor: default;
  pointer-events: none;
}
.link-card-disabled:hover {
  transform: none;
  border-color: var(--line);
  background: linear-gradient(145deg, #3C4046, #202327);
}
.link-card-disabled .link-arrow { color: var(--titanium); }

.link-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 18px;
}
.link-card-top small {
  margin-bottom: 0;
}
.link-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 2px solid rgba(255,94,0,.85);
  border-radius: 4px;
  background: var(--orange);
  color: #000;
  font-size: .62rem;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
}

.link-card-featured {
  border-color: rgba(255,94,0,.85);
  box-shadow: 0 0 0 1px rgba(255,94,0,.22), 0 10px 28px rgba(255,94,0,.18);
  background: linear-gradient(145deg, rgba(255,94,0,.14), #202327 52%);
}
.link-card-featured::before {
  background: rgba(255,94,0,.85);
}
@media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .link-card-featured:hover {
  border-color: rgba(255,94,0,.95);
  box-shadow: 0 0 0 1px rgba(255,94,0,.35), 0 14px 34px rgba(255,94,0,.28);
  background: linear-gradient(145deg, rgba(255,94,0,.20), #202327 50%);
} }
@media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .link-card-featured:hover::before {
  background: rgba(255,94,0,1);
} }
/* Featured card: 'Subscribe' label and hex pip go white on hover (hover-capable pointers only, so a tap doesn't
   leave them stuck white) and on keyboard focus; same .2s ease as the card's other hover changes. */
.link-card-featured small,
.link-card-featured::before { transition: color .2s ease, background .2s ease; }
.link-card-featured:focus-visible small { color: #fff; }
.link-card-featured:focus-visible::before { background: #fff; }
@media (hover: hover) {
  .link-card-featured:hover small { color: #fff; }
  .link-card-featured:hover::before { background: #fff; }
}

.link-card-quiet {
  border-color: rgba(106,115,124,.55);
  background: linear-gradient(145deg, #34383d, #1d2023);
  opacity: .92;
}
.link-card-quiet::before {
  background: rgba(106,115,124,.35);
}
.link-card-quiet small {
  color: var(--orange);
}
@media (hover: hover) {
  .link-card-quiet:hover {
    transform: translateY(-1px);
    border-color: rgba(255,94,0,.75);
  }
  .link-card-quiet:hover::before {
    background: rgba(255,94,0,.85);
  }
}

    .contact-panel {
      border: 2px solid var(--line);
      border-radius: 16px;
      padding: clamp(28px, 6vw, 64px);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 40px;
      align-items: center;
      position: relative;
      overflow: hidden;
      border-color: #C5CAD0;
      background:
        url("../images/contact-paws.jpg") right center / cover no-repeat,
        #050505;
    }
    .contact-panel h2 {
      margin: 0 0 12px;
      font-family: "Space Grotesk", Inter, system-ui, sans-serif;
      font-weight: 700;
      font-size: clamp(2.5rem, 7vw, 5rem);
      line-height: .95;
      letter-spacing: -.07em;
    }
    .contact-panel p {
      margin: 0;
      color: var(--muted);
      line-height: 1.65;
    }
    .contact-panel .eyebrow {
      color: var(--orange);
    }
    .contact-panel .button {
      min-height: 56px;
      padding: 0 26px;
      font-size: .84rem;
      letter-spacing: .08em;
    }
    /* v1.1.4: contact email button hover outline 2px -> 3px (2px border + 1px inset shadow, no layout shift) */
    @media (hover: hover) { .contact-panel .button-primary:hover { box-shadow: inset 0 0 0 1px #C5CAD0; } }

    footer {
      padding: 30px 0 48px;
      color: var(--titanium-text);
      font-size: .63rem;
      text-transform: uppercase;
      letter-spacing: .13em;
    }
    .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }
    @media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ footer a:hover { color: var(--orange); } }
    footer a:active { color: var(--yellow); }

    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 80;
      background: rgba(2,2,3,.94);
      backdrop-filter: blur(12px);
      display: none;
      place-items: center;
      padding: 20px;
    }
    .lightbox.open { display: grid; }
    .lightbox-inner {
      width: min(100%, 980px);
      max-height: 92vh;
      border: 2px solid var(--line);
      border-radius: 14px;
      background: #202327;
      overflow: hidden;
      position: relative;
    }
    .lightbox-media {
      width: 100%;
      height: 74vh;
      max-height: 74vh;
      display: grid;
      place-items: center;
      background: #000000;
      overflow: hidden;
    }
    .lightbox-media img,
    .lightbox-media video {
      width: 100%;
      max-height: 74vh;
      object-fit: contain;
      display: block;
    }
    .lightbox-meta {
      padding: 18px 20px 20px;
      display: flex;
      justify-content: space-between;
      gap: 16px 36px;
      align-items: flex-start;
      flex-wrap: wrap;
    }
    .lightbox-meta h3 { margin: 0 0 5px; }
    .lightbox-meta p {
      margin: 0;
      color: var(--muted);
      font-size: .78rem;
    }
    .close-lightbox {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 46px;
      height: 46px;
      border: 2px solid var(--line);
      border-radius: 50%;
      background: rgba(0,0,0,.62);
      color: transparent;
      font-size: 0;
      cursor: pointer;
      z-index: 2;
    }
    .close-lightbox::before,
    .close-lightbox::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 18px;
      height: 2px;
      background: var(--orange);
      border-radius: 1px;
    }
    .close-lightbox::before { transform: translate(-50%, -50%) rotate(45deg); }
    .close-lightbox::after { transform: translate(-50%, -50%) rotate(-45deg); }
    @media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .close-lightbox:hover { border-color: var(--orange); } }
    .close-lightbox:active { border-color: #C5CAD0; }

    .lightbox-stage { position: relative; }
    /* v0.7.0z4: horizontal drags belong to our swipe, never to the browser's swipe-back; pinch-zoom still allowed */
    #lightboxStage { touch-action: pan-y pinch-zoom; }
    .lightbox-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 46px;
      height: 46px;
      border: 2px solid var(--line);
      border-radius: 50%;
      background: rgba(0,0,0,.62);
      color: transparent;
      font-size: 0;
      cursor: pointer;
      z-index: 2;
    }
    .lightbox-nav.prev { left: 10px; }
    .lightbox-nav.next { right: 10px; }
    .lightbox-nav::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 10px;
      height: 10px;
      border-top: 2px solid var(--orange);
      border-right: 2px solid var(--orange);
    }
    .lightbox-nav.prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
    .lightbox-nav.next::before { transform: translate(-70%, -50%) rotate(45deg); }
    @media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .lightbox-nav:hover { border-color: var(--orange); } }
    .lightbox-nav:active { border-color: #C5CAD0; }
    .lightbox-nav[hidden] { display: none; }

    .lightbox-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
      width: max-content;
      max-width: 100%;
      position: relative;
      z-index: 3;
    }
    .lightbox-actions[hidden] { display: none !important; }
    .lightbox-actions .button {
      text-decoration: none;
      white-space: nowrap;
    }
    .button-has-menu::after {
      content: "";
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: 10px;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 5px solid currentColor;
      opacity: .85;
      vertical-align: middle;
    }
    .platform-panel {
      position: absolute;
      right: 0;
      bottom: calc(100% + 8px);
      width: 100%;
      z-index: 4;
      border: 2px solid var(--line);
      border-radius: 12px;
      background: #16181b;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .platform-panel[hidden] { display: none !important; }
    .platform-panel a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 42px;
      padding: 0 14px;
      border-radius: 9px;
      text-decoration: none;
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--white);
      border: 2px solid transparent;
    }
    .platform-panel a.primary {
      background: var(--orange);
      color: #000000;
    }
    @media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .platform-panel a.primary:hover { filter: brightness(1.08); border-color: #C5CAD0; } }
    .platform-panel a.secondary {
      background: rgba(255,255,255,.02);
      border-color: var(--line);
      color: var(--white);
    }
    @media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .platform-panel a.secondary:hover { border-color: rgba(255,94,0,.75); } }

    .age-gate {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(3,3,4,.95);
      backdrop-filter: blur(16px);
    }
    .age-gate.hidden { display: none; }
    .age-card {
      width: min(100%, 560px);
      padding: clamp(28px, 7vw, 58px);
      border: 2px solid #C5CAD0;
      border-radius: 14px;
      position: relative;
      overflow: hidden;
      background:
        url("../images/contact-paws.jpg") 42% center / cover no-repeat,
        #050505;
    }
    .age-card h2 {
      margin: 0 0 18px;
      font-family: "Space Grotesk", Inter, system-ui, sans-serif;
      font-weight: 700;
      font-size: clamp(2rem, 7vw, 4rem);
      line-height: .98;
      letter-spacing: -.06em;
    }
    .age-card .eyebrow {
      color: var(--orange);
    }
    .age-card p {
      color: var(--muted);
      line-height: 1.65;
    }
    .age-actions {
      margin-top: 28px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    @media (max-width: 900px) {
      .section-head {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .links-grid { grid-template-columns: 1fr; }
      .link-card {
        min-height: 0;
        padding: 16px 16px;
        gap: 14px;
      }
      .link-card small { margin-bottom: 8px; }
      .link-card h3 { font-size: 1.35rem; margin-bottom: 6px; }
      .link-card p { font-size: .92rem; line-height: 1.35; }
      .link-arrow { font-size: 2rem; }
    }

    @media (max-width: 680px) {
      .age-gate { padding: 16px; }
      .age-card { width: 100%; padding: 32px 22px 28px; }
      .age-card h2 { font-size: 3.1rem; }
      .age-card .eyebrow { font-size: .78rem; }
      .age-card p { font-size: 1.05rem; }
      .header-inner { min-height: 66px; }
      .brand span { display: none; }
      .nav-toggle { display: block; }
      .nav {
        position: fixed;
        inset: 66px 0 auto 0;
        padding: 24px 17px 30px;
        background: rgba(9,9,10,.98);
        border-bottom: 1px solid var(--line);
        flex-direction: column;
        align-items: flex-start;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: .18s ease;
      }
      .nav.open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }
      .section { padding: 48px 0; }
      .lightbox { padding: 10px; }
      .lightbox-inner {
        display: flex;
        flex-direction: column;
        max-height: 92vh;
      }
      .lightbox-media {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: 50vh;
      }
      .lightbox-media img,
      .lightbox-media video { max-height: 50vh; }
      .lightbox-meta { flex: 0 0 auto; background: #101113; }
      .desc-ellipsis { background: #101113; }
      #lightboxDescription.is-clamped.is-full::after {
        background: linear-gradient(to right, transparent, #101113);
      }
      .gallery-overlay { padding: 28px 20px 34px; }
      .link-card {
        min-height: 0;
        padding: 16px 16px;
        gap: 14px;
      }
      .link-card small { margin-bottom: 8px; }
      .link-card h3 { font-size: 1.35rem; margin-bottom: 6px; }
      .link-card p { font-size: .92rem; line-height: 1.35; }
      /* v0.7.0z5: phones use a 2-column grid, 2 x 3 = 6 per page (PAGE_SLOTS / GRID_COLS in script.js).
         Every tile is 4:5 with a cover crop; a wide item fills the 2-column row at the same row height. */
      .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      .gallery-item { aspect-ratio: 4 / 5; border-radius: 10px; }
      .gallery-item.wide {
        aspect-ratio: auto;
        height: calc((100cqi - 10px) / 2 * 5 / 4);
      }
      /* Smaller corner brackets to suit the smaller tile */
      .gallery-item::after,
      .gallery-item:hover::after { inset: 8px; background-size: 11px 2px, 2px 11px, 11px 2px, 2px 11px, 11px 2px, 2px 11px, 11px 2px, 2px 11px; }
      .contact-panel {
        grid-template-columns: 1fr;
        align-items: start;
      }
      .lightbox-meta {
        align-items: flex-start;
        flex-direction: column;
      }
      .lightbox-actions {
        align-items: stretch;
        width: 100%;
        min-width: 0;
      }
      .lightbox-actions .button {
        width: 100%;
        justify-content: center;
      }
    }
.gallery-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.status{padding:18px;border:1px solid var(--line);border-radius:10px;color:var(--muted);grid-column:1/-1}

.lightbox-copy { min-width: 0; flex: 1 1 220px; }
@media (max-width: 680px) {
  .lightbox-copy { max-width: 100%; }
}
.lightbox-desc-clip { position: relative; }
/* Item tags under the description (lightbox + expanded panel); same chip look as the search dropdown */
.item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.item-tags[hidden] { display: none; }
.item-tags .tag-chip { padding: 4px 10px; font-size: .66rem; }
#lightboxDescription {
  line-height: 1.45;
  overflow-wrap: break-word;
}
#lightboxDescription.is-clamped {
  position: relative;
  max-height: calc(1.45em * var(--desc-lines, 2));
  overflow: hidden;
}
#lightboxDescription.is-clamped.is-full::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 2ch;
  height: 1.45em;
  pointer-events: none;
  background: linear-gradient(to right, transparent, #202327);
}
.desc-ellipsis {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  padding: 0 0 0 .25em;
  border: 0;
  background: #202327;
  color: #ff5e00;
  font: inherit;
  line-height: 1.45;
  cursor: pointer;
}
@media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .desc-ellipsis:hover { color: #ff5e00; } }
.desc-ellipsis:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.desc-ellipsis[hidden],
.desc-scrim[hidden],
.desc-panel[hidden],
.desc-scroll[hidden],
.desc-fade[hidden] { display: none !important; }
.desc-scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(0,0,0,.72);
}
.desc-panel {
  position: absolute;
  inset: 14px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #16181b;
  border: 2px solid #C5CAD0;
  border-radius: var(--radius);
  overflow: hidden;
}
.desc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 10px 16px;
  flex: 0 0 auto;
}
.desc-panel-head h3 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.04em;
  line-height: 1.15;
}
.desc-panel-thumb {
  width: 96px;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid #C5CAD0;
  flex: 0 0 auto;
  background: #202327;
}
.desc-panel-thumb.is-wide {
  width: 168px;
  height: 96px;
}
.desc-panel-thumb { cursor: pointer; }
.desc-panel-thumb[hidden] { display: none !important; }
.desc-panel-close {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: rgba(0,0,0,.62);
  color: transparent;
  font-size: 0;
  cursor: pointer;
}
.desc-panel-close::before,
.desc-panel-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--orange);
  border-radius: 1px;
}
.desc-panel-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.desc-panel-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .desc-panel-close:hover { border-color: var(--orange); } }
.desc-panel-close:active { border-color: #C5CAD0; }
.desc-panel-body {
  position: relative;
  /* sizes to the text; shrinks (and scrolls) only when text + pinned tags exceed the panel */
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.desc-panel-scroll {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 36px 16px 20px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
  overflow-wrap: break-word;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.desc-panel-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.desc-panel.has-tags .desc-panel-scroll { padding-bottom: 0; }
/* tags pinned under the scrolling text: same gap (1em of the description text) and 16px bottom padding as before when the text fits */
.desc-panel-tags {
  flex: 0 0 auto;
  margin: 0;
  padding: 1em 36px max(16px, env(safe-area-inset-bottom)) 20px;
  background: #16181b;
  font-size: .92rem;
  line-height: 1.55;
}
.desc-panel-tags[hidden] { display: none; }
.desc-panel-scroll p { margin: 0 0 1em; }
.desc-panel-scroll p:last-child { margin-bottom: 0; }
#lightboxDescription a,
.desc-panel-scroll a {
  color: #ff5e00;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ #lightboxDescription a:hover,
.desc-panel-scroll a:hover { color: var(--yellow); } }
#lightboxDescription strong,
.desc-panel-scroll strong { font-weight: 800; color: var(--white); }
#lightboxDescription em,
.desc-panel-scroll em { font-style: italic; }
.desc-fade {
  position: absolute;
  left: 0;
  right: 28px;
  height: 1.55em;
  pointer-events: none;
  z-index: 1;
}
.desc-fade-top {
  top: 0;
  background: linear-gradient(to bottom, #16181b, rgba(22,24,27,0));
}
.desc-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, #16181b, rgba(22,24,27,0));
}
.desc-scroll {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  width: 16px;
  z-index: 2;
  touch-action: none;
  cursor: pointer;
}
.desc-scroll::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: #3C4046;
}
.desc-scroll-thumb {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: #ff5e00;
  cursor: grab;
}
.desc-scroll-thumb.is-drag {
  box-shadow: 0 0 0 2px #C5CAD0;
}
@media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .desc-scroll-thumb:hover { box-shadow: 0 0 0 2px #C5CAD0; } }
.desc-scroll-thumb.is-drag { cursor: grabbing; }

/* =====================================================================
   HERO (v0.7.0s)
   Full-bleed photo on black, [k9_1392: gryFF] eyebrow, 1392 headline,
   titanium rule, plain (non-clickable) spec line. Hero fills exactly one
   viewport and stands on a titanium cap line (orange tick + hex node)
   that divides it from the Gallery.
   Mobile (<=680px): no buttons, photo centred on top with a fixed crop
   (full k9_1392 plate; short phones end just below the bone tags).
   ===================================================================== */
.hero{position:relative;isolation:isolate;overflow:hidden;height:calc(100vh - 73px);height:calc(100svh - 73px);min-height:560px;background:#000}
.hero + .section{border-top:0}

/* photo: box sits right of centre on desktop; the photo floor rests on the cap line */
.hero-media{--w:calc((max(560px, 100svh - 73px) - 8px) * 1.04);position:absolute;z-index:-3;top:0;bottom:8px;left:67%;aspect-ratio:1.04/1;
  /* keep >=40px of black between the photo and the right edge (only kicks in on narrower landscape screens, e.g. 1024x768) */
  transform:translateX(calc(-53% - max(0px, .47 * var(--w) - 33vw + 40px)))}
.hero-photo{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background:#000}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.hero-photo[hidden],.hero-card[hidden]{display:none!important}

/* faint hex texture behind the copy (desktop only) */
.hero-hex{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 32V66m0-32' fill='none' stroke='%236A737C' stroke-width='1'/%3E%3C/svg%3E");background-size:56px 98px;
  -webkit-mask-image:radial-gradient(ellipse 34% 58% at 17% 50%,#000,transparent 78%);mask-image:radial-gradient(ellipse 34% 58% at 17% 50%,#000,transparent 78%)}

/* copy */
.hero-copy{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center}
.hero .eyebrow{font-size:.78rem;letter-spacing:.22em;margin:0 0 20px}
.hero h1{margin:0;font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;font-size:clamp(5.5rem,14vw,12.5rem);line-height:.8;letter-spacing:-.075em;
  /* v1.1.1: .12em/.04em of padding gives background-clip:text room for glyph overhang above/below the .8 line box;
     equal negative margins keep the layout identical. Stops re-mapped to the taller box (.96em) so the glyphs get the
     same colours as v1.1.0: 0% -> .12/.96 = 12.5%, 55% -> (.12+.44)/.96 = 58.3333%, 100% -> (.12+.8)/.96 = 95.8333%. */
  padding:.12em 0 .04em;margin:-.12em 0 -.04em;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 58.3333%,#AEB4BA 95.8333%,#AEB4BA 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.hero h1{color:#fff;background:none}}
.ti-rule{position:relative;height:1px;width:100%;max-width:460px;margin:30px 0 0;background:linear-gradient(90deg,#6A737C,rgba(106,115,124,.12))}
.ti-rule::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:3px;background:var(--orange)}
.hero-line{margin:22px 0 0;font-family:"Space Grotesk",Inter,sans-serif;font-weight:500;font-size:clamp(1.3rem,2.1vw,1.85rem);line-height:1.2;color:#fff;letter-spacing:-.02em}
.hero-spec{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;color:#8E969E;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;cursor:default;user-select:none}
.hero-spec i{width:6px;height:7px;background:#4A5057;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hero-spec .spec-18{color:var(--orange)}
.hero-spec .ls{display:none}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero .button{min-height:52px;padding:0 28px;font-size:.72rem}

/* hex brand card: shown by script.js only if the hero photo fails to load */
.hero .hero-card{position:absolute;right:6%;top:50%;transform:translateY(-50%);width:min(36%,420px)}

/* titanium cap line */
.hero-cap{position:absolute;left:0;right:0;bottom:7px;height:1px;z-index:1;background:linear-gradient(90deg,rgba(106,115,124,.35),#6A737C 50%,rgba(106,115,124,.35))}
.hero-cap .cap-tick{position:absolute;top:-2px;left:max(17px,calc((100% - 1180px)/2));width:56px;height:3px;background:var(--orange)}
.hero-cap .cap-hex{position:absolute;top:-6px;left:calc(max(17px,calc((100% - 1180px)/2)) + 66px);width:12px;height:13px;background:#6A737C;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hero-cap .cap-hex::after{content:"";position:absolute;inset:2px;background:#000;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hero-media .hero-cap{display:none}

@media (max-width:680px){
  /* --u = crop unit (1vw on normal phones). On wide/short mobile-layout windows it shrinks so photo + copy
     still fit one viewport; it never drops below 2px (very short windows scroll instead of clipping).
     --h1 = headline size. Hero height = one viewport, but never more than photo + copy + a ~60px break,
     so tall narrow windows don't get a big empty gap; content always wins (no clipping). */
  .hero{--h1:min(32vw,14.6svh);--gap:clamp(24px,3.6svh,34px);
    /* copy block height: gap + eyebrow + headline + rule + line + spec (mirrors the rules below) */
    --copy:calc(var(--gap) + 13px + clamp(12px,1.8svh,16px) + .8 * var(--h1) + clamp(16px,2.6svh,24px) + 1px + clamp(14px,2.2svh,20px) + 1.2 * clamp(1.3rem,3.2svh,1.55rem) + clamp(10px,1.6svh,14px) + 13px);
    --u:clamp(2px, calc((100svh - 67px - var(--copy) - 48px) / 121), 1vw);
    height:auto;min-height:min(calc(100vh - 67px), calc(121 * var(--u) + var(--copy) + 64px));min-height:min(calc(100svh - 67px), calc(121 * var(--u) + var(--copy) + 64px))}
  .hero + .section{border-top:1px solid var(--line)}
  .hero-hex{display:none}
  /* fixed crop in --u: image renders 122u wide (152.5u tall), offset -10u; 121u box = ears .. full k9_1392 plate */
  .hero-media{left:50%;transform:translateX(-50%);top:0;bottom:auto;width:100%;height:calc(121 * var(--u));aspect-ratio:auto}
  .hero-photo{left:50%;right:auto;width:calc(122 * var(--u));transform:translateX(-53%)}
  .hero-photo img{position:absolute;left:0;top:calc(-10 * var(--u));width:100%;height:auto;object-fit:fill}
  .hero-copy{height:auto;justify-content:flex-start;padding-top:calc(121 * var(--u) + var(--gap));padding-bottom:48px}
  .hero .eyebrow{font-size:.68rem;margin-bottom:clamp(12px,1.8vh,16px);margin-bottom:clamp(12px,1.8svh,16px)}
  .hero h1{font-size:var(--h1)}
  .ti-rule{margin-top:clamp(16px,2.6vh,24px);margin-top:clamp(16px,2.6svh,24px);max-width:none}
  .hero-line{margin-top:clamp(14px,2.2vh,20px);margin-top:clamp(14px,2.2svh,20px);font-size:clamp(1.3rem,3.2vh,1.55rem);font-size:clamp(1.3rem,3.2svh,1.55rem)}
  .hero-spec{margin-top:clamp(10px,1.6vh,14px);margin-top:clamp(10px,1.6svh,14px);flex-wrap:nowrap;gap:10px;font-size:.64rem}
  .hero-spec .lf{display:none}
  .hero-spec .ls{display:inline}
  .hero-actions{display:none}
  .hero > .hero-cap{display:none}
  .hero-media .hero-cap{display:block;bottom:0}
  .hero-media .hero-cap .cap-tick{left:17px}
  .hero-media .hero-cap .cap-hex{left:83px}
  .hero .hero-card{right:auto;left:50%;top:calc(60.5 * var(--u));transform:translate(-50%,-50%);width:min(calc(56 * var(--u)),300px)}
}
/* portrait tablets (681-1199px wide, taller than wide): the desktop photo box (1.04:1 x full height)
   is wider than the screen, so the subject runs under the copy. Stack instead: photo on top, centred,
   cropped ears-to-plate and standing on the cap line; copy + both buttons below. */
@media (min-width:681px) and (max-width:1199px) and (orientation:portrait){
  .hero{display:grid;grid-template-rows:minmax(0,1fr) auto}
  .hero + .section{border-top:1px solid var(--line)}
  .hero-hex{display:none}
  /* overflow visible (v0.7.0z5): .hero-photo already clips the photo; clipping here cut the lower half of the cap hex */
  .hero-media{position:relative;top:auto;bottom:auto;left:auto;transform:none;width:100%;aspect-ratio:auto;overflow:visible}
  .hero-photo img{position:absolute;left:50%;top:-16.2%;width:auto;height:135.1%;max-width:none;transform:translateX(-50%);object-fit:fill}
  .hero-copy{height:auto;justify-content:flex-start;padding-top:clamp(28px,3.4vh,44px);padding-bottom:clamp(40px,5vh,64px);padding-top:clamp(28px,3.4svh,44px);padding-bottom:clamp(40px,5svh,64px)}
  .hero > .hero-cap{display:none}
  .hero-media .hero-cap{display:block;bottom:0}
  .hero .hero-card{right:auto;left:50%;top:8%;transform:translateX(-50%);width:min(40vw,360px)}
}
/* short phones: smaller image, crop ends just below the bone tags */
@media (max-width:680px) and (max-height:740px){
  .hero{--gap:28px;--u:clamp(2px, calc((100svh - 67px - var(--copy) - 48px) / 87.5), 1vw);
    min-height:min(calc(100vh - 67px), calc(87.5 * var(--u) + var(--copy) + 64px));min-height:min(calc(100svh - 67px), calc(87.5 * var(--u) + var(--copy) + 64px))}
  .hero-media{height:calc(87.5 * var(--u))}
  .hero-photo{width:calc(108 * var(--u))}
  .hero-photo img{top:calc(-8.8 * var(--u))}
  .hero-copy{padding-top:calc(87.5 * var(--u) + var(--gap))}
  .hero .hero-card{top:calc(43.75 * var(--u))}
}
/* v1.1.1: engines without svh (older WebViews / in-app browsers). Custom properties can't use the
   "vh first, svh second" fallback (the svh value always wins and is then invalid), so they are re-declared in vh here. */
@supports not (height:1svh){
  .hero-media{--w:calc((max(560px, 100vh - 73px) - 8px) * 1.04)}
  @media (max-width:680px){
    .hero{--h1:min(32vw,14.6vh);--gap:clamp(24px,3.6vh,34px);
      --copy:calc(var(--gap) + 13px + clamp(12px,1.8vh,16px) + .8 * var(--h1) + clamp(16px,2.6vh,24px) + 1px + clamp(14px,2.2vh,20px) + 1.2 * clamp(1.3rem,3.2vh,1.55rem) + clamp(10px,1.6vh,14px) + 13px);
      --u:clamp(2px, calc((100vh - 67px - var(--copy) - 48px) / 121), 1vw)}
  }
  @media (max-width:680px) and (max-height:740px){
    .hero{--gap:28px;--u:clamp(2px, calc((100vh - 67px - var(--copy) - 48px) / 87.5), 1vw)}
  }
}

/* Long titles (v0.7.0y)
   Tiles: at most 2 lines, then an ellipsis. The clamp sits on the wrapper so the per-line label boxes stay. */
.gallery-overlay > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  padding: 2px 0;      /* room for the label box's 2px padding inside the clip ... */
  margin: -2px 0;      /* ... without moving anything: 1-line titles keep their exact position */
}
.gallery-overlay strong { overflow-wrap: anywhere; }
@media (max-width: 680px) {
  /* v0.7.0z5 phone grid: compact 1-line title (the lightbox shows it in full) and a smaller play badge */
  .gallery-overlay { padding: 24px 13px 13px; gap: 4px; align-items: center; }   /* label sits inside the corner brackets; gap 4px (v1.1.0b) */
  .gallery-overlay > div:first-child { -webkit-line-clamp: 1; line-clamp: 1; }
  /* v1.1.0b: 11px, 3px side padding, -.02em tracking: the widest possible title (C26-4444-4-VID pattern, 14 chars)
     fits on one line beside the play badge at 360px wide (1.5px to spare); the 1-line clamp stays as a safety net */
  .gallery-overlay strong { font-size: .6875rem; padding: 1px 3px; letter-spacing: -.02em; }
  .play-badge { width: 26px; height: 26px; font-size: .6rem; margin: 0; }
}
/* Lightbox caption: full title, wrapping as needed; long unbroken words break inside the box */
#lightboxTitle {
  overflow-wrap: anywhere;
  line-height: 1.23;   /* = the previous 'normal' line box, so 1-line titles are unchanged */
}
/* Description panel: the title wraps fully; long unbroken words break instead of running under the close button */
.desc-panel-head h3 { overflow-wrap: anywhere; }
@media (max-width: 680px) {
  /* Short phones: the footer (220px text block + button) plus a 50vh video/photo was taller than the 92vh box,
     cutting off 'View full video' (375x667: 24px). Cap the media so media + 326px footer always fits;
     no change where 50vh already fits (e.g. 390x844). */
  .lightbox-media,
  .lightbox-media img,
  .lightbox-media video { max-height: min(50vh, calc(92vh - 326px)); }
  /* The text block keeps its 220px; a caption + description + tags taller than that scrolls inside it,
     so the footer height (and the button) never moves. */
  .lightbox-copy { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 681px) {
  /* Wider screens: media is 74vh of a 92vh box, leaving 18vh for the footer (minus 38px padding, 4px borders).
     A caption + description + tags taller than that scrolls inside the text block instead of being clipped. */
  .lightbox-copy { max-height: calc(18vh - 42px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ==========================================================================
   v1.1.0 multi-item entries (entry.items in gallery.json; single-item entries are unchanged)
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Tile count badge: top-right inside the corner brackets, same label box as the tile title; play badge stays bottom-right */
.count-badge {
  position: absolute; top: 24px; right: 24px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 6px;
  background: rgba(0,0,0,.72); border: 1px solid var(--line); border-radius: 4px;
  font: 700 .8rem/1 "Space Grotesk", Inter, system-ui, sans-serif; color: #fff; letter-spacing: .02em;
  pointer-events: none;
}
.count-badge svg { width: 14px; height: 14px; flex: 0 0 auto; display: block; }
/* v1.1.6: count chip border always stays grey (v1.1.1 tile-hover orange border removed) */
/* Lightbox strip: the current item is the orange-outlined thumb, the rest are dimmed */
.lightbox-strip {
  display: flex; align-items: center; gap: 8px;
  height: 70px; padding: 0 20px; box-sizing: border-box;
  background: #16181b; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
}
.lightbox-strip::-webkit-scrollbar { display: none; }
.lightbox-strip[hidden] { display: none; }
.lightbox-thumb {
  position: relative; width: 40px; height: 50px; padding: 0; flex: 0 0 auto;
  border: 2px solid var(--line); border-radius: 6px; overflow: hidden; background: #000; cursor: pointer;
  opacity: .55;
}
.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox-thumb[aria-current="true"] { border-color: var(--orange); opacity: 1; }
@media (hover: hover) { /* v1.1.1: hover-capable pointers only, so a tap does not leave this stuck on touch */ .lightbox-thumb:hover { opacity: 1; } }
.lightbox-thumb:focus { outline: none; }
.lightbox-thumb:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; opacity: 1; }
.lightbox-thumb .mini-play {
  position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--orange); color: #000; font-size: .42rem; font-weight: 900; display: grid; place-items: center;
}
/* The media gives up the strip's height, so the lightbox box itself keeps its size */
.lightbox.has-strip .lightbox-media { height: calc(74vh - 70px); max-height: calc(74vh - 70px); }
.lightbox.has-strip .lightbox-media img,
.lightbox.has-strip .lightbox-media video { max-height: calc(74vh - 70px); }
@media (max-width: 680px) {
  .count-badge { top: 14px; right: 14px; gap: 4px; padding: 3px 6px 3px 4px; font-size: .7rem; }
  .count-badge svg { width: 12px; height: 12px; }
  /* compact strip: 36x45 thumbs (4:5 like the tiles), scrolls sideways when a set has more than fit */
  .lightbox-strip { height: 55px; padding: 0 12px; gap: 6px; background: #000; border-top: 0; flex: 0 0 auto; }
  .lightbox-thumb { width: 36px; height: 45px; border-radius: 5px; }
  .lightbox-thumb .mini-play { width: 12px; height: 12px; right: 2px; bottom: 2px; font-size: .38rem; }
  .lightbox.has-strip .lightbox-media { height: auto; }
  .lightbox.has-strip .lightbox-media,
  .lightbox.has-strip .lightbox-media img,
  .lightbox.has-strip .lightbox-media video { max-height: calc(min(50vh, 92vh - 326px) - 55px); }
}

/* v1.1.0c Autoplay toggle: same metrics as the filter tabs / pager (2px line border, 10px radius, .78rem caps, .13em).
   OFF = titanium outline; ON = orange outline + soft orange fill + orange icon (not the solid tab fill). */
.autoplay-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  height: 41px; box-sizing: border-box;
  border: 2px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--muted);
  padding: 0 15px 0 12px;
  font: inherit; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
  cursor: pointer; touch-action: manipulation;
}
.autoplay-toggle svg { width: 18px; height: 18px; flex: 0 0 auto; display: block; }
.ap-hex { fill: none; stroke: var(--titanium); stroke-width: 1.8; }
.ap-tri { fill: var(--titanium); }
/* v1.1.1: hover only where hover is real; on touch a tap left :hover stuck, so the border stayed orange after turning OFF */
@media (hover: hover) { .autoplay-toggle:hover { border-color: rgba(255,94,0,.75); } }
.autoplay-toggle:active { border-color: #C5CAD0; }
.autoplay-toggle:focus { outline: none; }
.autoplay-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.autoplay-toggle[aria-pressed="true"] { border-color: var(--orange); background: var(--orange-soft); color: var(--white, #fff); }
.autoplay-toggle[aria-pressed="true"] .ap-hex { stroke: var(--orange); }
.autoplay-toggle[aria-pressed="true"] .ap-tri { fill: var(--orange); }
.gallery-toolbar .autoplay-toggle { margin-left: auto; }
.gallery-toolbar .autoplay-toggle + .gallery-pager { margin-left: 0; }
/* Lightbox: pill left of the close X, same 46px chrome as the X and the arrows */
.lightbox-autoplay {
  position: absolute; top: 10px; right: 66px; z-index: 2;
  height: 46px; border-radius: 23px; padding: 0 16px 0 13px;
  background: rgba(0,0,0,.62); font-size: .72rem;
}
.lightbox-autoplay[aria-pressed="true"] { background: rgba(0,0,0,.62); box-shadow: inset 0 0 0 40px var(--orange-soft); }
/* Hover preview: muted first teaser over the tile's still, under the overlay, brackets and badges */
.tile-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
@media (max-width: 680px) {
  /* phones: icon only, a 41px square at the left of the pager row; lightbox: 46px circle */
  .autoplay-toggle { width: 41px; padding: 0; justify-content: center; }
  .autoplay-toggle .ap-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gallery-toolbar .autoplay-toggle { margin-left: 0; }
  .gallery-toolbar .autoplay-toggle + .gallery-pager { margin-left: auto; }
  .lightbox-autoplay { width: 46px; border-radius: 50%; }
}

/* v1.1.0d: hover-preview label, top-left inside the corner brackets; same box as the count badge (top-right).
   Shown only while the muted preview is actually playing; hidden from screen readers. */
.preview-label {
  position: absolute; top: 24px; left: 24px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 6px;
  background: rgba(0,0,0,.72); border: 1px solid var(--line); border-radius: 4px;
  font: 700 .8rem/1 "Space Grotesk", Inter, system-ui, sans-serif; color: #fff; letter-spacing: .02em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0; transition: opacity .15s ease;
}
.preview-label svg { width: 14px; height: 14px; flex: 0 0 auto; display: block; }
.preview-label.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .preview-label { transition: none; } }
@media (max-width: 680px) {
  .preview-label { top: 14px; left: 14px; gap: 4px; padding: 3px 6px 3px 4px; font-size: .7rem; }
  .preview-label svg { width: 12px; height: 12px; }
}

/* v1.1.3b Lightbox player. The plain white circle was the browser's own overlay play button, drawn by the native
   video controls. Real Chrome for Android and Android WebView ignore author styling of those controls, so the
   lightbox <video> no longer gets the controls attribute at all and this page draws its own: a centred 1392 play
   button (paused/ended only) and a bottom bar (play/pause, time, scrubber, mute, full screen). Both sit above the
   video in #lightboxStage (z-index 3/4; the arrows are 2). */
.lightbox-play {
  position: absolute; top: 50%; left: 50%; z-index: 3;
  width: 76px; height: 76px; margin: -38px 0 0 -38px; padding: 0;
  display: grid; place-items: center;
  border: 2px solid var(--line); border-radius: 50%;
  background: rgba(0,0,0,.72); color: var(--white);
  cursor: pointer;
  opacity: 1; transition: opacity .2s ease, border-color .15s ease, color .15s ease;
}
.lightbox-play[hidden] { display: none; }
.lightbox-play svg { width: 32px; height: 32px; display: block; fill: currentColor; }
.lightbox-play .lp-tri { transform: translateX(1px); }
.lightbox-play .lp-bars { display: none; }
@media (hover: hover) { .lightbox-play:hover { border-color: var(--orange); color: var(--orange); } }
.lightbox-play:active { border-color: #C5CAD0; }
.lightbox-play:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* Playing: gone, taps fall through to the video. Tabbed to while playing, it shows the pause glyph it will act as. */
.lightbox-play.is-playing { opacity: 0; pointer-events: none; }
.lightbox-play.is-playing:focus-visible { opacity: 1; }
.lightbox-play.is-playing:focus-visible .lp-tri { display: none; }
.lightbox-play.is-playing:focus-visible .lp-bars { display: block; }
.lightbox-media video { cursor: pointer; }

.lb-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 26px 12px 6px;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%);
  color: var(--white);
  opacity: 1; transition: opacity .25s ease;
}
.lb-controls[hidden] { display: none; }
.lb-controls.is-idle { opacity: 0; pointer-events: none; }
.lbc-row { display: flex; align-items: center; gap: 4px; }
.lbc-gap { flex: 1 1 auto; }
.lbc-btn {
  width: 40px; height: 40px; padding: 0; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--white);
  cursor: pointer;
}
.lbc-btn svg { width: 22px; height: 22px; display: block; fill: currentColor; }
@media (hover: hover) { .lbc-btn:hover { color: var(--orange); } }
.lbc-btn:active { color: var(--yellow); }
.lbc-btn:focus-visible, .lbc-scrub:focus-visible { outline: 2px solid var(--orange); outline-offset: 0; }
.lbc-btn .i-pause, .lbc-btn .i-mute, .lbc-btn .i-fsx { display: none; }
.lb-controls.is-playing .i-play { display: none; }
.lb-controls.is-playing .i-pause { display: block; }
.lb-controls.is-muted .i-vol { display: none; }
.lb-controls.is-muted .i-mute { display: block; }
.lb-controls.is-full .i-fs { display: none; }
.lb-controls.is-full .i-fsx { display: block; }
.lbc-time { font-size: .78rem; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--white); padding: 0 6px; white-space: nowrap; }
/* Scrubber: 28px touch target, 4px titanium track, orange fill and thumb. touch-action none: a drag here is a seek,
   never a page pan or a lightbox swipe. */
.lbc-scrub { position: relative; height: 28px; margin: 0 6px; cursor: pointer; touch-action: none; border-radius: 6px; }
.lbc-track { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: rgba(174,180,186,.32); overflow: hidden; }
.lbc-buf { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(174,180,186,.45); }
.lbc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--orange); }
.lbc-thumb { position: absolute; top: 7px; left: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px rgba(0,0,0,.55); pointer-events: none; }
.lbc-scrub.is-dragging .lbc-thumb { transform: scale(1.25); }
/* Full screen: the stage (video + our controls) goes full screen, so the 1392 controls stay. iPhone has no element
   full screen and uses the system player instead (webkitEnterFullscreen). */
#lightboxStage:fullscreen { background: #000; display: flex; align-items: center; justify-content: center; }
#lightboxStage:fullscreen .lightbox-media { width: 100%; height: 100%; max-height: none; }
#lightboxStage:fullscreen .lightbox-media video { max-height: 100vh; height: 100%; }
#lightboxStage:fullscreen .lightbox-nav { display: none; }
#lightboxStage:-webkit-full-screen { background: #000; width: 100%; height: 100%; }
#lightboxStage:-webkit-full-screen .lightbox-media { width: 100%; height: 100%; max-height: none; }
#lightboxStage:-webkit-full-screen .lightbox-media video { max-height: 100vh; height: 100%; }
#lightboxStage:-webkit-full-screen .lightbox-nav { display: none; }
@media (prefers-reduced-motion: reduce) {
  .lightbox-play, .lb-controls { transition: none; }
  .lbc-scrub.is-dragging .lbc-thumb { transform: none; }
}
@media (max-width: 680px) {
  .lightbox-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .lightbox-play svg { width: 28px; height: 28px; }
  .lb-controls { padding: 22px 6px 4px; }
}

/* v1.1.4: Discount codes group in Links (FeturaX) */
.deals-group{margin-top:44px}
.deals-sub{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.deals-sub .eyebrow{margin:0}
.deals-sub h3{flex:0 1 auto;min-width:0;margin:0;font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-size:1.5rem;line-height:1.1;letter-spacing:-.03em}
.deals-sub::after{content:"";flex:1;min-width:24px;height:1px;background:var(--line)}
.deal-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;align-items:center;border:2px solid var(--line);border-radius:var(--radius);padding:18px 22px;background:#0b0c0d}
.deal-copy strong{font-size:1.2rem}
.deal-copy p{margin:2px 0 0;color:#C5CAD0;font-size:.92rem}
.deal-pill{display:inline-flex;align-items:center;gap:10px;margin:0;border:2px solid var(--orange);border-radius:999px;padding:3px 3px 3px 14px;background:#000;color:#fff;cursor:pointer;font:700 .95rem ui-monospace,Menlo,monospace;letter-spacing:.16em}
.deal-pill-lbl{background:var(--orange);color:#000;border-radius:999px;padding:5px 11px;font:800 .62rem Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.deal-pill.done .deal-pill-lbl{background:var(--yellow)}
.deal-shop{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:2px solid var(--orange);border-radius:8px;color:#fff;text-decoration:none;font:800 .72rem Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase}
@media (hover: hover) { .deal-shop:hover{background:rgba(255,94,0,.14)} }
.deal-pill:focus-visible,.deal-shop:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.deal-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:680px){
  .deals-sub h3{font-size:1.3rem}
  .deals-sub h3{white-space:nowrap}
  .deals-sub::after{min-width:16px}
  .deal-row{grid-template-columns:1fr;gap:12px}
  .deal-pill,.deal-shop{justify-self:start}
}

#dealsRows{display:grid;gap:10px}
.deal-tag{display:inline-flex;align-items:center;vertical-align:middle;margin-left:8px;padding:2px 7px;border:1px solid var(--orange);border-radius:4px;color:var(--orange);font:800 .58rem/1.4 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase}
/* v1.1.4: copy pill hover/focus = only the COPY label turns white (white bg, black text); code part unchanged; Copied keeps yellow */
.deal-pill-lbl{transition:background-color .15s ease,color .15s ease}
@media (hover: hover) {
  .deal-pill:hover .deal-pill-lbl{background:#fff;color:#000}
  .deal-pill.done:hover .deal-pill-lbl{background:var(--yellow);color:#000}
}
.deal-pill:focus-visible .deal-pill-lbl{background:#fff;color:#000}
.deal-pill.done:focus-visible .deal-pill-lbl{background:var(--yellow);color:#000}
@media (prefers-reduced-motion: reduce){.deal-pill-lbl{transition:none}}
/* v1.1.4: mobile codes row = name + line on top, then one action line: copy pill left, Shop right (no wrap) */
@media (max-width:680px){
  .deal-row{grid-template-columns:auto minmax(0,1fr);gap:12px 10px}
  .deal-copy{grid-column:1 / -1}
  .deal-pill{grid-column:1;justify-self:start}
  .deal-shop{grid-column:2;justify-self:end;white-space:nowrap;min-height:40px;padding:0 12px;font-size:.66rem;letter-spacing:.08em}
}
/* v1.1.5: gallery partner chip (top-left; same box/font as .count-badge top-right) + deal card modal */
.deal-chip {
  position: absolute; top: 24px; left: 24px; z-index: 4;
  display: inline-flex; align-items: center;
  padding: 4px 8px;
  background: rgba(0,0,0,.72); border: 1px solid var(--line); border-radius: 4px; /* v1.1.6: = .count-badge */
  font: 700 .8rem/1 "Space Grotesk", Inter, system-ui, sans-serif; color: #fff; letter-spacing: .02em;
  min-height: 24px; box-sizing: border-box;
  cursor: pointer; transition: border-color .15s ease;
}
.deal-chip-arrow { color: var(--orange); margin-left: .15em; }
/* v1.1.6: subtle hover; only hovering the chip itself turns its border orange */
@media (hover: hover) { .deal-chip:hover { border-color: var(--orange); } }
.deal-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* v1.1.8: no more shifted label; during a playing preview the chip fades out and the label fades in in its spot
   (same .15s fade as the label). visibility flips after the fade-out so the hidden chip is not clickable. */
.deal-chip { transition: border-color .15s ease, opacity .15s ease, visibility 0s linear 0s; }
.gallery-item.is-previewing .deal-chip { opacity: 0; visibility: hidden; pointer-events: none; transition: border-color .15s ease, opacity .15s ease, visibility 0s linear .15s; }
@media (prefers-reduced-motion: reduce) { .deal-chip, .gallery-item.is-previewing .deal-chip { transition: none; } }
@media (max-width: 680px) {
  .deal-chip { top: 14px; left: 14px; padding: 3px 6px; font-size: .7rem; min-height: 20px; }
}
.deal-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px; }
.deal-modal[hidden] { display: none; }
.deal-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.78); }
.deal-modal-card { position: relative; width: min(440px, 100%); border: 2px solid var(--orange); border-radius: var(--radius); background: #0b0c0d; padding: 16px 18px 18px; box-shadow: 0 20px 50px rgba(0,0,0,.6); animation: dealModalIn .18s ease both; }
@keyframes dealModalIn { from { opacity: 0; transform: translateY(8px); } }
.deal-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.deal-modal-head .eyebrow { margin: 0; }
.deal-modal-close { width: 36px; height: 36px; flex: none; border: 2px solid var(--line); border-radius: 8px; background: #000; color: #fff; cursor: pointer; font-size: .9rem; }
@media (hover: hover) { .deal-modal-close:hover { border-color: var(--orange); } }
.deal-modal-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* modal row always uses the compact (mobile) action line: name + line, then pill left / Shop right */
.deal-modal .deal-row { grid-template-columns: auto minmax(0,1fr); gap: 12px 10px; border: 0; padding: 0; background: none; }
.deal-modal .deal-copy { grid-column: 1 / -1; }
.deal-modal .deal-pill { grid-column: 1; justify-self: start; }
.deal-modal .deal-shop { grid-column: 2; justify-self: end; white-space: nowrap; min-height: 40px; padding: 0 12px; font-size: .66rem; letter-spacing: .08em; }
html.deal-modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .deal-chip { transition: none; } .deal-modal-card { animation: none; } }

/* v1.1.5: lightbox 'Deal: PARTNER ↗' pill, first in the tag row; tag-chip size, orange outline like the tile chip */
.item-tags .lb-deal {
  display: inline-flex; align-items: center; margin: 0; padding: 4px 10px;
  border: 2px solid var(--orange); border-radius: 999px; background: #000; color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; touch-action: manipulation; transition: background-color .15s ease, color .15s ease;
}
@media (hover: hover) { .item-tags .lb-deal:hover { background: var(--orange); color: #000; } }
.item-tags .lb-deal:active { background: var(--orange); color: #000; }
.item-tags .lb-deal:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .item-tags .lb-deal { transition: none; } }