/* ==========================================================================
   Hançerlioğlu — Ustalık Eserleri
   Page layer. Loaded AFTER style.css and inherits every design token,
   the media placeholder system, the preloader, cursor, header, overlay
   menu, scroll progress and footer from it.
   --------------------------------------------------------------------------
   00. Page tokens & JS-hidden states
   01. Header — current page
   02. Cover
   03. Collection shell (two columns)
   04. Category index (sticky)
   05. Category
   06. Item row
   07. Hover preview (cursor follower)
   08. Closing note
   09. Story drawer
   10. Responsive
   11. Reduced motion & no-js
   ========================================================================== */


/* ==========================================================================
   00. PAGE TOKENS & JS-HIDDEN STATES
   ========================================================================== */

.page--collection {
  --catnav-top: clamp(6.5rem, 15vh, 9.5rem);
  --preview-w: clamp(15rem, 19vw, 21.5rem);
  --drawer-w: min(38rem, 94vw);
  --rule-soft: rgba(244, 244, 240, 0.075);
}

/* Cover elements are animated in by collection.js. They only start hidden
   when JS is present, so the page stays readable if it never arrives. */
.js [data-cover] {
  opacity: 0;
}


/* ==========================================================================
   01. HEADER — CURRENT PAGE
   ========================================================================== */

.header__link--current {
  color: var(--color-cream);
}

.header__link--current .header__link-index {
  color: var(--color-gold);
}

.header__link--current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--color-gold);
}

.menu__link[aria-current="page"] .menu__link-text {
  color: var(--color-gold);
}


/* ==========================================================================
   02. COVER
   ========================================================================== */

.cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(2.5rem, 7vh, 5rem);
  min-height: 100svh;
  padding: calc(var(--catnav-top) + 2rem) var(--gutter) clamp(2rem, 5vh, 3.25rem);
  overflow: hidden;
}

.cover__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #070603;
}

.cover__media-inner {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(105% 78% at 76% 12%, rgba(212, 175, 55, 0.20), transparent 60%),
    radial-gradient(85% 70% at 12% 92%, rgba(150, 92, 36, 0.22), transparent 64%),
    linear-gradient(165deg, #16110a 0%, #070605 58%, #120d07 100%);
}

.cover__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: saturate(0.82) contrast(1.06);
}

.cover__video.is-broken {
  display: none;
}

.cover__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.86) 0%, rgba(5, 5, 5, 0.28) 38%, rgba(5, 5, 5, 0.94) 100%),
    linear-gradient(90deg, rgba(5, 5, 5, 0.78) 0%, rgba(5, 5, 5, 0) 62%);
}

.cover__grain {
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.05;
  mix-blend-mode: overlay;
}

.cover__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}

.cover__overline {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 1.6vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 4vh, 2.75rem);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.cover__back {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--color-gold);
  transition: color 0.45s var(--ease-out-soft);
}

.cover__back-arrow {
  display: inline-block;
  transition: transform 0.55s var(--ease-out-soft);
}

.cover__back:hover {
  color: var(--color-gold-bright);
}

.cover__back:hover .cover__back-arrow {
  transform: translateX(-0.375rem);
}

.cover__overline-rule {
  flex: 0 0 auto;
  width: clamp(2rem, 6vw, 5.5rem);
  height: 1px;
  background-color: var(--color-line-gold);
}

.cover__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.022em;
  color: var(--color-cream);
}

.cover__title em {
  font-style: italic;
  color: var(--color-gold);
}

.cover__english {
  margin-top: clamp(1.25rem, 3vh, 2rem);
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  font-weight: 400;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.cover__lede {
  max-width: 44ch;
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  font-size: var(--fs-lede);
  line-height: 1.75;
  color: var(--color-text);
}

.cover__footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: clamp(1.5rem, 4vh, 2.5rem);
  border-top: 1px solid var(--color-line);
}

.cover__facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 6vw, 5.5rem);
}

.cover__fact-label {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.cover__fact-value {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.625rem);
  color: var(--color-cream);
}

.cover__cue {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-text-dim);
  white-space: nowrap;
}

.cover__cue-line {
  position: relative;
  display: block;
  width: clamp(3rem, 7vw, 6rem);
  height: 1px;
  background-color: var(--color-line-gold);
  overflow: hidden;
}

.cover__cue-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background-color: var(--color-gold);
}


/* ==========================================================================
   03. COLLECTION SHELL
   ========================================================================== */

.collection {
  position: relative;
  padding: 0 var(--gutter) clamp(4rem, 10vh, 8rem);
  background-color: var(--color-void);
}

.collection__grid {
  display: grid;
  grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 9rem);
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Stretched so the sticky index has the full column height to travel in */
.collection__aside {
  align-self: stretch;
}

.collection__body {
  min-width: 0;
}


/* ==========================================================================
   04. CATEGORY INDEX (STICKY)
   ========================================================================== */

.catnav {
  position: sticky;
  top: var(--catnav-top);
}

.catnav__label {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-gold);
}

.catnav__label-rule {
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--color-line-gold);
}

.catnav__item + .catnav__item {
  border-top: 1px solid var(--rule-soft);
}

.catnav__link {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.75rem;
  padding: clamp(0.6rem, 1.1vh, 0.85rem) 0;
  color: var(--color-text-dim);
  transition: color 0.5s var(--ease-out-soft);
}

/* The gold tick that grows out to the left of the active category */
.catnav__link::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 0.5rem);
  width: clamp(0.5rem, 1.4vw, 1.125rem);
  height: 1px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.65s var(--ease-out-soft);
}

.catnav__index {
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  color: var(--color-text-faint);
  transition: color 0.5s var(--ease-out-soft);
}

.catnav__name {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  transition: color 0.5s var(--ease-out-soft);
}

.catnav__count {
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

.catnav__link:hover {
  color: var(--color-cream);
}

.catnav__link.is-active {
  color: var(--color-cream);
}

.catnav__link.is-active::before {
  transform: scaleX(1);
}

.catnav__link.is-active .catnav__index,
.catnav__link.is-active .catnav__count {
  color: var(--color-gold-deep);
}

.catnav__link.is-active .catnav__name {
  color: var(--color-gold);
}

.catnav__note {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  padding-top: clamp(1.25rem, 3vh, 1.75rem);
  border-top: 1px solid var(--rule-soft);
  font-size: var(--fs-micro);
  line-height: 1.9;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}


/* ==========================================================================
   05. CATEGORY
   ========================================================================== */

.category {
  scroll-margin-top: var(--catnav-top);
  padding-top: clamp(4.5rem, 12vh, 10rem);
}

.category:first-child {
  padding-top: clamp(3.5rem, 9vh, 7rem);
}

.category__head {
  max-width: 58ch;
  margin-bottom: clamp(2.25rem, 6vh, 4rem);
}

.category__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-text-dim);
}

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

.category__rule {
  width: clamp(1.75rem, 4vw, 3.5rem);
  height: 1px;
  background-color: var(--color-line-gold);
}

.category__title {
  margin-top: clamp(0.875rem, 2vh, 1.5rem);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--color-cream);
}

.category__english {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.375rem);
  font-style: italic;
  color: var(--color-gold);
}

.category__note {
  margin-top: clamp(1.25rem, 3vh, 1.875rem);
  max-width: 52ch;
  color: var(--color-text);
}


/* ==========================================================================
   06. ITEM ROW
   ========================================================================== */

/* Base row: thumbnail beside the name. This is what small screens, reduced
   motion and a JS-less browser all get, and it is a finished layout in its
   own right — the cursor-follower further down is layered on top of it. */
.item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(4.5rem, 16vw, 6.5rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 1.5rem);
  align-items: center;
  border-top: 1px solid var(--rule-soft);
}

.item:last-child {
  border-bottom: 1px solid var(--rule-soft);
}

/* Gold hairline along the top edge of the row */
.item::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.55), rgba(212, 175, 55, 0.04));
  transform-origin: left center;
  transition: transform 1.1s var(--ease-out-soft);
  pointer-events: none;
}

/* It only needs to draw itself in when there is motion to draw it with */
.has-motion .item::after {
  transform: scaleX(0);
}

.has-motion .item.is-in::after {
  transform: scaleX(1);
}

/* A real button laid over the whole row: the entire strip is clickable and
   keyboard reachable without nesting interactive elements. */
.item__trigger {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  background: none;
}

.item__trigger:focus-visible {
  outline-offset: -6px;
}

/* Placed explicitly: the figure follows the text in the markup so that the
   name is what a reader and a crawler meet first, but the thumbnail belongs
   on the left of the row. */
.item__inner {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: clamp(1rem, 2vw, 1.5rem) 0;
}

.item__index { grid-column: 1; }
.item__name  { grid-column: 2; }
.item__note  { grid-column: 2; }

.item__index {
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
  transition: color 0.55s var(--ease-out-soft);
}

/* Inline flow rather than flex: a name is a run of text that has to wrap
   inside a narrow column, and the İmza badge has to travel with the last
   word rather than sit on a line of its own. */
.item__name {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.35vw, 2.25rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--color-cream);
  transition:
    color 0.55s var(--ease-out-soft),
    transform 0.75s var(--ease-out-soft);
}

.item__tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.7rem;
  padding: 0.28em 0.7em 0.24em;
  border: 1px solid var(--color-line-gold);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  white-space: nowrap;
}

.item__note {
  font-size: var(--fs-small);
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--color-text-dim);
  transition: color 0.55s var(--ease-out-soft);
}

.item__cue {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0;
  transform: translateX(-0.625rem);
  transition:
    opacity 0.5s var(--ease-out-soft),
    transform 0.6s var(--ease-out-soft);
}

.item__cue-arrow {
  display: inline-block;
  transition: transform 0.6s var(--ease-out-soft);
}

/* Hover / focus state, driven by a class so touch + keyboard behave alike */
.item.is-hover .item__name {
  color: var(--color-gold);
  transform: translateX(clamp(0.375rem, 0.9vw, 0.875rem));
}

.item.is-hover .item__index {
  color: var(--color-gold-deep);
}

.item.is-hover .item__note {
  color: var(--color-text);
}

.item.is-hover .item__cue {
  opacity: 1;
  transform: translateX(0);
}

.item.is-hover .item__cue-arrow {
  transform: translateX(0.25rem);
}

.item.is-hover::after {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.9), rgba(212, 175, 55, 0.08));
}

/* The story text lives with its item and is lifted into the drawer on open */
.item__story[hidden] {
  display: none;
}


/* ==========================================================================
   07. PREVIEW
   --------------------------------------------------------------------------
   In the flow by default — a catalogue thumbnail sitting beside its name.
   On a wide pointer-driven screen with motion enabled it lifts out of the
   flow and becomes the card that follows the cursor.
   ========================================================================== */

.preview {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #0b0906;
  background-image:
    radial-gradient(120% 95% at 18% 8%, rgba(212, 175, 55, 0.20), transparent 58%),
    radial-gradient(95% 85% at 88% 90%, rgba(150, 92, 36, 0.24), transparent 62%),
    linear-gradient(155deg, #16110a 0%, #0a0806 55%, #120d07 100%);
}

.preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid rgba(212, 175, 55, 0.2);
  pointer-events: none;
}

.preview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: var(--grain);
  opacity: 0.2;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.preview__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}

.preview__img.is-broken {
  display: none;
}

.preview__fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: rgba(212, 175, 55, 0.5);
}

/* --------------------------------------------------------------------------
   Wide screens: the row spreads into four columns and earns its cue.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .item {
    grid-template-columns: clamp(6rem, 8vw, 9rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
  }

  .item__inner {
    grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 13rem) 5.5rem;
    gap: clamp(1rem, 2vw, 2rem);
    padding: clamp(1.15rem, 2.1vw, 1.85rem) 0;
  }

  .item__note {
    grid-column: auto;
  }

  .item__cue {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   Enhancement: the cursor follower. Only once collection.js has confirmed
   GSAP is live and motion is welcome, and only where there is a fine pointer
   with room to show a card of this size.

   The figure goes position: fixed here, which means no ancestor of it may
   carry a transform, filter or will-change: transform. The row reveal
   therefore animates .item__inner — a sibling — and never .item or anything
   above it in the tree.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (pointer: fine) {
  .has-motion .item {
    display: block;
  }

  .has-motion .preview {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 44;
    width: var(--preview-w);
    aspect-ratio: 4 / 5;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.6);
  }
}


/* ==========================================================================
   08. CLOSING NOTE
   ========================================================================== */

.collection__close {
  margin-top: clamp(5rem, 14vh, 11rem);
  padding-top: clamp(2.5rem, 6vh, 4rem);
  border-top: 1px solid var(--color-line-gold);
  text-align: center;
}

.collection__close-mark {
  font-size: 0.75rem;
  color: var(--color-gold-deep);
}

.collection__close-text {
  max-width: 42ch;
  margin: clamp(1.5rem, 4vh, 2.5rem) auto 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-cream);
}

.collection__close-link {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-line-gold);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-gold);
  transition: border-color 0.5s var(--ease-out-soft);
}

.collection__close-arrow {
  display: inline-block;
  transition: transform 0.6s var(--ease-out-soft);
}

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

.collection__close-link:hover .collection__close-arrow {
  transform: translateX(0.375rem);
}


/* ==========================================================================
   09. STORY DRAWER
   ========================================================================== */

/* The panel travels on a CSS transition rather than a tween, so the drawer
   works identically with GSAP, without it, and under reduced motion — where
   the global transition override in style.css makes it instant. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 88;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.9s;
}

.drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.drawer__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(3, 3, 3, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.7s var(--ease-in-out-soft);
}

.drawer.is-open .drawer__scrim {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: var(--drawer-w);
  background-color: #080706;
  border-left: 1px solid var(--color-line-gold);
  box-shadow: -2rem 0 6rem rgba(0, 0, 0, 0.7);
  transform: translateX(100%);
  transition: transform 0.9s var(--ease-in-out-soft);
  will-change: transform;
}

.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

/* Only used when Lenis is not running and cannot hold the scroll itself */
.is-drawer-open {
  overflow: hidden;
}

.drawer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex: 0 0 auto;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.25rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--rule-soft);
  background-color: #080706;
}

.drawer__counter {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

.drawer__counter #drawerIndex {
  color: var(--color-gold);
}

.drawer__counter-sep {
  padding: 0 0.25rem;
}

.drawer__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.drawer__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  font-size: 0.8125rem;
  color: var(--color-text-dim);
  transition:
    color 0.4s var(--ease-out-soft),
    border-color 0.4s var(--ease-out-soft);
}

.drawer__step:hover:not(:disabled) {
  color: var(--color-gold);
  border-color: var(--color-line-gold);
}

.drawer__step:disabled {
  opacity: 0.28;
  cursor: default;
}

.drawer__close {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: 0.5rem;
  padding: 0.5rem 0.25rem 0.5rem 0.75rem;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-dim);
  transition: color 0.4s var(--ease-out-soft);
}

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

.drawer__close-mark {
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

.drawer__close-mark::before,
.drawer__close-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}

.drawer__close-mark::before { transform: rotate(45deg); }
.drawer__close-mark::after { transform: rotate(-45deg); }

.drawer__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.drawer__media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 58vh;
  overflow: hidden;
  background-color: #0b0906;
  background-image:
    radial-gradient(120% 95% at 18% 8%, rgba(212, 175, 55, 0.18), transparent 58%),
    radial-gradient(95% 85% at 88% 90%, rgba(150, 92, 36, 0.22), transparent 62%),
    linear-gradient(155deg, #16110a 0%, #0a0806 55%, #120d07 100%);
}

.drawer__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0) 55%, rgba(8, 7, 6, 0.92) 100%);
  pointer-events: none;
}

.drawer__img,
.drawer__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}

.drawer__img { z-index: 1; }
.drawer__video { z-index: 2; }

.drawer__img.is-broken,
.drawer__video.is-broken,
.drawer__video:not([src]) {
  display: none;
}

.drawer__media-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  padding: 1.5rem;
}

.drawer__media-mark {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  letter-spacing: 0.08em;
  color: rgba(212, 175, 55, 0.5);
}

.drawer__media-text {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: rgba(244, 244, 240, 0.2);
}

.drawer__body {
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.75rem) clamp(3rem, 8vh, 5rem);
}

.drawer__eyebrow {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-gold);
}

.drawer__title {
  margin-top: clamp(0.875rem, 2vh, 1.25rem);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--color-cream);
}

.drawer__sub {
  margin-top: 0.875rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-style: italic;
  color: var(--color-text-dim);
}

.drawer__story {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  padding-top: clamp(1.5rem, 3vh, 2rem);
  border-top: 1px solid var(--rule-soft);
}

.drawer__story p {
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--color-text);
}

.drawer__story p + p {
  margin-top: 1.25rem;
}

/* Spec table — authored inside each item, styled once here */
.item__specs {
  display: grid;
  gap: 0;
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
}

.item__spec {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--rule-soft);
}

.item__spec:last-child {
  border-bottom: 1px solid var(--rule-soft);
}

.item__spec-key {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.item__spec-value {
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--color-cream);
}

.drawer__foot {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-text-faint);
}


/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

/* Below the desktop breakpoint the index turns into a sticky rail that runs
   along the top, and the row keeps the in-flow thumbnail it starts with. */
@media (max-width: 1024px) {
  .collection__grid {
    display: block;
  }

  .collection__aside {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0.75rem var(--gutter);
    background-color: rgba(5, 5, 5, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rule-soft);
  }

  .catnav {
    position: static;
  }

  .catnav__label,
  .catnav__note,
  .catnav__count {
    display: none;
  }

  .catnav__list {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .catnav__list::-webkit-scrollbar {
    display: none;
  }

  .catnav__item + .catnav__item {
    border-top: 0;
  }

  .catnav__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .catnav__link {
    display: block;
    padding: 0.5rem 0;
    white-space: nowrap;
  }

  .catnav__link::before {
    top: auto;
    bottom: 0;
    right: auto;
    left: 0;
    width: 100%;
    transform-origin: left center;
  }

  .catnav__index {
    display: none;
  }

  .catnav__name {
    font-size: 1rem;
  }

  .category {
    scroll-margin-top: 4.5rem;
  }

  .preview__fallback {
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    padding: 0.5rem;
  }

  .item__name {
    font-size: clamp(1.125rem, 4.2vw, 1.5rem);
  }
}

@media (max-width: 720px) {
  .cover__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
  }

  .cover__facts {
    gap: 2rem;
  }

  .drawer__panel {
    width: 100%;
    border-left: 0;
  }

  .drawer__media {
    aspect-ratio: 1 / 1;
    max-height: 46vh;
  }
}

@media (max-width: 480px) {
  .item__index {
    display: none;
  }

  /* One column now, so the name and note have to be moved back onto it —
     left where they are they would land in an implicit second column and
     get shunted to the right-hand edge. */
  .item__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .item__name,
  .item__note {
    grid-column: 1;
  }

  .item__tag {
    font-size: 0.5rem;
    letter-spacing: 0.16em;
  }

  .drawer__close-label {
    display: none;
  }
}


/* ==========================================================================
   11. REDUCED MOTION & NO-JS
   ========================================================================== */

/* The in-flow thumbnail, the drawn hairline and the four-column row are all
   the default state, so a JS-less browser already has a finished catalogue.
   Only three things need saying: the drawer cannot open, so the stories are
   printed underneath their names instead. */
.no-js .item__story[hidden] {
  display: block;
  grid-column: 2;
  grid-row: 2;
  max-width: 62ch;
  padding-bottom: clamp(1rem, 2.5vh, 1.75rem);
}

.no-js .item {
  align-items: start;
}

.no-js .item__trigger,
.no-js .item__cue,
.no-js .drawer {
  display: none;
}

/* Chromium draws its own broken-media badge over a <video> whose sources are
   missing, and without JS there is nothing to detect that and flag it. The
   layered gradient underneath is the better cover in that case. */
.no-js .cover__video {
  display: none;
}

/* Reduced motion keeps every layout above; it only opts out of the follower,
   which never engages because .has-motion is withheld. Cover copy that JS
   would have faded in is simply present from the start. */
@media (prefers-reduced-motion: reduce) {
  .js [data-cover] {
    opacity: 1;
  }
}