/* ── The Index: hueylightshop.com's "The Index" (image_on_hover_NXkQRi,
   .c-image-list), cloned from their section CSS and script (refs/huey/home.html
   9504-10288) and box-checked at 1905, 1024 and 390. After the Featured Edit, as
   on their page.
     left    a 668:744 picture, one per kind, cross-fading (.75s) on hover
     middle  flourish label, then the kinds with a superscript count; the active
             one is full ink, the rest at .5, hover = full ink + italic (.4s);
             under them the bracketed 【 SHOP All 】 button
     right   a small framed picture, also one per kind (max 177.61 x 264)
     corner  their looping drawing (a video) bottom right, kept as an empty box
     phones  (<= 990) a grid: the list, then the picture full width; the framed
             picture collapses to nothing there, as theirs does
   Their ink #374454 -> our navy #2a4254; their words -> ours; counts are true
   (photos of that kind on the site). Stand-ins: every picture (Sama's own
   photos), the frame (theirs is an ornate drawing: ours is a thin navy double
   line in the same box) and the corner drawing (empty box). */
.ix {
  --ix-ink: #2a4254; position: relative; padding: 0 38px; color: var(--ix-ink);
  font: 400 16px / 1.8 var(--f-body); letter-spacing: .6px;
}
@media (max-width: 749px) { .ix { padding: 15px; } }

.ix-list {
  position: relative; overflow: hidden; display: flex; flex-direction: row; align-items: stretch;
  justify-content: space-between; gap: 3%; padding: 80px 0 50px;
}
.ix-media, .ix-side { position: relative; flex: 1; }
.ix-media { width: 100%; aspect-ratio: 668 / 744; }
.ix-side { max-width: 177.61px; max-height: 264px; overflow: hidden; margin-left: 10vw; margin-right: 5%; }
.ix-nav {
  position: relative; display: flex; flex: 0 0 auto; flex-direction: column;
  align-items: flex-start; justify-content: flex-start; width: 20%;
}

/* the label: their h2 inline style (14 px Herbik caps, padding-right 2vw, the h2's .83em under it) */
.ix-head { white-space: nowrap; }
.ix .ix-label { position: relative; margin: 0 0 .83em; padding: 0 2vw 0 0; color: var(--ix-ink); }

/* the kinds */
.ix-names {
  width: 100%; margin: 0 0 0 45px; padding: 5px 2vw 2vw 0; list-style: none;
  font-size: 30px; letter-spacing: .6px;
}
.ix-names li { line-height: .8; }
.ix-names a {
  display: inline-block; padding: 5px 0; font-size: clamp(20px, 2vw, 120px);
  color: var(--ix-ink); text-decoration: none; opacity: .5; transition: opacity .4s ease;
  white-space: nowrap;   /* ours: "Memory Boxes" would break in two at 991-1100 (theirs are shorter) */
}
.ix-names a:hover { opacity: 1; font-style: italic; }
.ix-names a.is-active { opacity: 1; }
.ix-names span { font-size: 26px; letter-spacing: 0; border-bottom: .05em solid transparent; transition: border .35s; }
.ix-count { margin-left: .3em; font-size: 14px; vertical-align: super; }
@media (min-width: 991px) {
  .ix-names li:first-child a { padding-top: 0; }
  .ix-names li:last-child a { padding-bottom: 0; }
}

/* the button: .lk-btn (css/look.css) set as their .c-image-list__button: inline-block,
   13 px, padding-bottom 2vw, the script word inline (so not turned, as theirs) */
.ix-btn-wrap { margin: 20px 0 0 40px; }
.ix .ix-btn {
  display: inline-block; min-width: 122px; min-height: 47px; margin-left: -1px; padding: 0 0 2vw;
  font-size: 13px; line-height: 1.2; letter-spacing: 1.4px; white-space: normal;
}
.ix .ix-btn i { line-height: 1.2; }

/* the pictures: the active one shows, the rest wait underneath at 0 */
.ix img { transition: all .4s cubic-bezier(.4, 0, .2, 1); }
.ix-media-item, .ix-side-item { overflow: hidden; transition: opacity .75s; }
.ix-media-item { position: absolute; inset: 0; opacity: 0; z-index: 1; pointer-events: none; }
.ix-media-item.is-active { opacity: 1; z-index: 2; pointer-events: auto; }
.ix-media-link { position: relative; display: block; height: 100%; }
.ix-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ix-side-item.is-active { position: relative; opacity: 1; z-index: 2; }
.ix-side-item:not(.is-active) { position: absolute; inset: 0; opacity: 0; z-index: 1; pointer-events: none; }
.ix-side-media { position: relative; display: block; width: 100%; aspect-ratio: 177.619 / 264; }
/* stand-in for his ornate frame: two thin navy lines, the frame's own box */
.ix-frame { position: absolute; inset: 0; z-index: 2; border: 1px solid var(--ix-ink); pointer-events: none; }
.ix-frame::after { content: ""; position: absolute; inset: 3px; border: 1px solid var(--ix-ink); }
.ix-side-wrap {
  position: absolute; inset: 9% 13%; z-index: 1; aspect-ratio: 122.716 / 205;
  margin: 0 auto; overflow: hidden;
}
.ix-side-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* their corner drawing (a video, 1587 x 1104): the box only, until his artwork */
.ix-video { position: absolute; z-index: 9; bottom: 0; right: 10%; width: 15vw; aspect-ratio: 1587 / 1104; }

@media (max-width: 990px) {
  .ix-list {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nav secondary" "image image";
    align-items: start; gap: 15px;
  }
  .ix-media { grid-area: image; max-width: 100%; width: 100%; flex: unset; }
  .ix-nav { grid-area: nav; width: 100%; flex: unset; }
  .ix-side { grid-area: secondary; margin: 0; justify-self: end; align-self: start; flex: unset; }
  .ix-names { display: flex; flex-flow: column wrap; width: 100%; }
  .ix-names > * { flex: 1; }
  .ix-video { position: relative; display: inline-block; right: 0; width: 35vw; }
  /* the drawing sits on a text line under the list; our EB Garamond hangs 1.8 px
     lower than theirs, so that one line is set 2.4 px tighter (the list keeps 1.8) */
  .ix { line-height: 26.4px; }
  .ix-list { line-height: 1.8; }
}