/* archive.css — the Index (spec 4.2, 5.3): header, facets, List (scrub / touch), Sheet, Names. Scoped to .index. */

.index{margin-top:var(--row-gap)}

/* header line: title · hint · LIST SHEET NAMES */
.index .ix-head{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--g);align-items:baseline;
  margin-inline:var(--m);padding-top:var(--s3);border-top:1px solid var(--hairline)}
.index .ix-head > *{grid-column:1/-1}
.index .ix-head h2{color:var(--ink)}
.index .ix-hint{color:var(--muted);padding-top:6px}
.index .ix-lg{font-size:var(--fs-13);line-height:calc(var(--fs-11) * 1.35)} /* same line box as the 11px hints: switching views never moves the page */
.index .ix-w{font-family:var(--serif);font-style:italic;font-size:1.1em;line-height:0;letter-spacing:0;text-transform:none}
.index .ix-views{display:flex;align-items:center;margin:var(--s2) 0 0 -6px}

/* facets: a ledger, labels in the N° column, values from the title column */
.index .ix-facets{margin:var(--s5) var(--m) 0}
.index .ix-f{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--g);align-items:start}
.index .ix-fl{grid-column:1/3;display:flex;align-items:center;min-height:var(--tap);color:var(--muted);line-height:1}
.index .ix-fc{grid-column:3/-1;display:flex;flex-wrap:wrap;align-items:center;min-width:0;margin-left:-6px}
.index .ix-more > summary{display:none}
/* brand: the native select is an invisible 16px layer (no iOS zoom on tap) over a chip that shows its value */
.index .ix-selw{position:relative;display:inline-flex;align-items:center}
.index .ix-sel{position:absolute;inset:0;width:100%;opacity:0;font-size:16px;appearance:none;-webkit-appearance:none;
  margin:0;padding:0;border:0;border-radius:0;background:none;cursor:pointer}
.index .ix-selv{padding-right:22px}
.index .ix-selw.is-set .ix-selv{color:var(--ink);text-decoration-color:currentColor}
.index .ix-selw:has(.ix-sel:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
@media (hover:hover){ .index .ix-selw:hover .ix-selv{color:var(--ink)} }
.index .ix-sel option,.index .ix-sel optgroup{text-transform:none;letter-spacing:0;color:CanvasText;background:Canvas}
.index .ix-chev{position:absolute;right:8px;top:50%;width:5px;height:5px;margin-top:-4px;border:solid var(--muted);border-width:0 1px 1px 0;rotate:45deg;pointer-events:none}
.index .ix-selw.is-set .ix-chev{border-color:var(--ink)}

.index .ix-count{display:flex;align-items:center;gap:var(--s4);margin:var(--s4) var(--m) 0;min-height:var(--tap);color:var(--ink)}
.index .ix-clear{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--muted)}
@media (hover:hover){ .index .ix-clear:hover{color:var(--ink)} }

.index .ix-empty{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--g);row-gap:var(--s2);
  padding:var(--s5) var(--m) var(--s5)}
.index .ix-empty > *{grid-column:1/-1;justify-self:start}
.index .ix-empty .v-20{color:var(--ink)}
.index .ix-empty .ui{display:inline-flex;align-items:center;min-height:var(--tap)}

@media (min-width:768px){
  .index .ix-head h2{grid-column:1/10}
  .index .ix-views{grid-column:10/-1;grid-row:1;margin-block:calc((11px - var(--tap)) / 2)}
  .index .ix-empty > *{grid-column:3/-1}
}
@media (min-width:1024px){
  .index .ix-head h2{grid-column:1/14}
  .index .ix-hint{grid-column:14/-1}
  .index .ix-views{grid-column:19/-1}
}
@media (min-width:1440px){ .index .ix-hint{grid-column:14/19;grid-row:1;padding-top:0} }

/* mobile: TYPE scrolls sideways, the rest sits in MORE FILTERS */
@media (max-width:767px){
  /* less chrome above the first photographed row (the chips' 44px tap boxes already give the air) */
  .index .ix-views{margin-top:0}
  .index .ix-hint{padding-top:2px}
  .index .ix-facets{margin-top:0}
  .index .ix-count{margin-top:0}
  .index .ix-f{display:block}
  .index .ix-fl{display:block;min-height:0;padding-top:var(--s3)}
  .index .ix-f--type .ix-fl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .index .ix-fc{margin-left:-6px}
  .index .ix-f--type .ix-fc{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(-1 * var(--m));padding-inline:calc(var(--m) - 6px)}
  .index .ix-f--type .ix-fc{padding-block:6px;margin-block:-6px} /* room for the focus ring inside the scroller, layout unchanged */
  .index .ix-f--type .ix-fc::-webkit-scrollbar{display:none}
  .index .ix-f--type .chip,.index .ix-f--type .sep{flex:none}
  .index .ix-more > summary{display:inline-flex;margin-left:-6px;color:var(--ink)}
  .index .ix-more[open] > summary{text-decoration-color:currentColor}
  .index .ix-more > .ix-f:last-child{padding-bottom:var(--s2)}
  .index .ix-more .sep{display:none}
  .index .ix-more .ix-fc{column-gap:10px}
}

/* ------------------------------------------------------------- list ---- */

.index .ix-list{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--g);padding-inline:var(--m);margin-top:var(--s2)}
.index .ix-rows{grid-column:1/-1;min-width:0;border-top:1px solid var(--hairline)}
.index .ix-row{border-bottom:1px solid var(--hairline)}
.index .ix-row.stitch-line{border-bottom:0;padding-bottom:1px}
.index .ix-link{color:inherit;text-decoration:none}
.index .ix-no{color:var(--ink);transition:color var(--t-fast) var(--ease)}
.index .ix-title{display:block;color:var(--ink);font-size:min(clamp(34px, 8vw, 132px), 100cqi / 7.3);transition:color var(--t-fast) var(--ease)}
.index .ix-sub{display:block;margin-top:8px;color:var(--muted)}
.index .ix-meta{display:flex;flex-direction:column;gap:3px;color:var(--muted)}
.index .ix-rows:has(.is-active) .ix-row:not(.is-active) .ix-title{color:var(--dim)}
.index .ix-row.is-active .ix-no,.index .ix-d[open] .ix-no{color:var(--mark)}

/* a non-matching row: one muted line, still a link */
.index .ix-line{display:flex;align-items:center;gap:var(--s3);min-height:var(--tap);color:var(--muted);text-decoration:none;
  transition:color var(--t-fast) var(--ease)}
@media (hover:hover){ .index .ix-line:hover{color:var(--ink)} }
.index .ix-line .ix-no{color:inherit}
.index .ix-row.is-out > :first-child,.index .ix-row:not(.is-out) > .ix-line{display:none}

/* scrub rows (fine pointer, ≥768): N° 1–2 · title 3–7 · meta 8–9 · preview 10–12 (desktop: 3–13 · 14–18 · 19–24) */
.index .is-scrub .ix-rows{grid-column:1/10;display:grid;grid-template-columns:subgrid}
.index .is-scrub .ix-row,.index .is-scrub .ix-link,.index .is-scrub .ix-line{grid-column:1/-1;display:grid;grid-template-columns:subgrid}
.index .is-scrub .ix-link{padding-block:14px;align-items:start}
.index .is-scrub .ix-no{grid-column:1/3}
.index .is-scrub .ix-link .ix-no,.index .is-scrub .ix-meta{padding-top:3px}
.index .is-scrub .ix-t{grid-column:3/8;min-width:0;container-type:inline-size}
.index .is-scrub .ix-meta{grid-column:8/-1}
.index .is-scrub .ix-lt{grid-column:3/-1}
.index .is-scrub .ix-pvcol{grid-column:10/-1;min-width:0}
/* scrub on a tablet-width window: N° and facet labels take one column so the meta never breaks mid-label */
@media (hover:hover) and (pointer:fine) and (min-width:768px) and (max-width:1023px){
  .index .ix-fl{grid-column:1/2}
  .index .ix-fc,.index .ix-empty > *{grid-column:2/-1}
  .index .is-scrub .ix-no{grid-column:1/2}
  .index .is-scrub .ix-t{grid-column:2/7}
  .index .is-scrub .ix-meta{grid-column:7/-1}
  .index .is-scrub .ix-lt{grid-column:2/-1}
}
@media (min-width:1024px){
  .index .is-scrub .ix-rows{grid-column:1/19}
  .index .is-scrub .ix-t{grid-column:3/14}
  .index .is-scrub .ix-meta{grid-column:14/-1}
  .index .is-scrub .ix-pvcol{grid-column:19/-1}
}

/* the shared preview box: sticky, clip-path reveal, sized by the cover's true resolution */
.index .ix-pv{position:sticky;top:18vh;padding-top:14px}
.index .ix-clip{clip-path:inset(0 0 100% 0);transition:clip-path calc(200ms * var(--motion)) var(--ease-reveal)}
.index.pv-on .ix-clip{clip-path:inset(0);transition-duration:calc(400ms * var(--motion))}
.index .ix-box{position:relative;width:min(100%, 22vw, 400px, calc(var(--cw, 400) * 1px));aspect-ratio:4/5;container-type:size}
.index .ix-stack,.index .ix-box > .slot{position:absolute;inset:0}
.index .ix-box img{position:absolute;left:0;bottom:0;max-width:none;height:auto;aspect-ratio:var(--r);
  width:min(100cqw, 100cqh * var(--r), var(--nw) * 1px);opacity:0}
.index .ix-box img.is-on{opacity:1}
.index .ix-box img.ix-free{width:100%;height:100%;object-fit:contain;object-position:0 100%}
.index .ix-box .stamp{position:absolute;left:22px;top:19px}
.index .ix-ro{display:flex;flex-direction:column;gap:3px;padding-top:10px;color:var(--ink)}
/* a credit part moves to the next line whole (never DUCK- / YOUNG); one wider than the column wraps at its spaces */
.index .ix-ro .nowrap,.index .ix-cr .nowrap{display:inline-block;max-width:100%;white-space:normal}

/* touch rows: <details>, the summary is the row */
.index .ix-sum{display:grid;grid-template-columns:minmax(0,1fr) 56px;column-gap:var(--s3);align-items:start;padding-block:14px}
.index .ix-sum:focus-visible{outline-offset:-1px}
.index .ix-st{display:flex;flex-direction:column;align-items:flex-start;min-width:0;container-type:inline-size}
.index .ix-st .ix-no{padding-bottom:10px}
.index .ix-st .ix-meta{display:block;margin-top:10px}
.index .ix-th{display:block;width:56px;height:70px}
.index .ix-th img{width:100%;height:100%;object-fit:contain}
.index .ix-uf{display:grid;justify-items:start;gap:var(--s3);padding-bottom:var(--s4)}
/* columns hug their frames (62vw at most, 46svh tall at most, never past W/1.5), so a tablet strip has no gaps */
.index .ix-strip{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:8px;align-items:end;
  width:calc(100% + 2 * var(--m));margin-inline:calc(-1 * var(--m));padding-inline:var(--m);scroll-padding-inline:var(--m);
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.index .ix-strip::-webkit-scrollbar{display:none}
.index .ix-strip > li{display:flex;flex-direction:column;align-items:flex-start;min-width:0;scroll-snap-align:start;
  width:min(62vw, calc(var(--nw) * 1px), calc(46svh * var(--r)))}
.index .ix-strip img{width:100%;height:auto;aspect-ratio:var(--r)}
.index .ix-fr{display:block;width:100%;cursor:zoom-in}
.index .ix-fr:focus-visible{outline-offset:-2px} /* the strip scrolls, so an outside ring would be clipped */
.index .ix-sc{padding-top:8px;color:var(--ink)}
.index .ix-cr{color:var(--muted)}
.index .ix-open,.index .ix-acts > *{display:inline-flex;align-items:center;min-height:44px}
.index .ix-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3) var(--s2);width:min(100%, 420px)}
.index .ix-slots .slot,.index .ix-slots img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain}
.index .ix-acts{display:flex;flex-direction:column;align-items:flex-start}
@supports (interpolate-size:allow-keywords){
  .index .ix-d{interpolate-size:allow-keywords}
  .index .ix-d::details-content{height:0;overflow:visible clip;
    transition:height calc(300ms * var(--motion)) var(--ease-morph),content-visibility calc(300ms * var(--motion)) allow-discrete}
  .index .ix-d[open]::details-content{height:auto}
}

/* ------------------------------------------------------------ sheet ---- */

.index .ix-sheet{padding-inline:var(--m);margin-top:var(--s2)}
.index .ix-g{padding-bottom:var(--s5)}
.index .ix-g.is-out{padding-bottom:0}
.index .ix-gh{display:flex;align-items:center;min-height:var(--tap);border-top:1px solid var(--hairline);margin-bottom:var(--s3);color:var(--ink)}
.index .ix-g.is-out .ix-gh{margin-bottom:0;color:var(--muted)}
.index .ix-g.is-out .ix-cells,.index .ix-g.is-out > .sr-only{display:none}
.index .ix-g:last-child{border-bottom:1px solid var(--hairline)}
.index .ix-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s2)}
.index .ix-cells .fig-link{position:relative}
/* the circle never reaches past the page margin (wide 3-up cells at 600–767px) */
.index .ix-cells .rc{left:max(-9%, -14px);right:max(-9%, -14px)}
.index .ix-cells .fig-cap{padding-top:6px}
.index .ix-cells img{object-position:50% 100%}
.index .ix-cells .slot,.index .ix-pol{display:block;width:100%;aspect-ratio:4/5;object-fit:contain}
@media (min-width:768px){
  .index .ix-cells{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--g)}
  .index .is-now .ix-cells{grid-template-columns:repeat(9,minmax(0,1fr))}
}
@media (min-width:1024px){ .index .ix-g:not(.is-now) .ix-cells{grid-template-columns:repeat(8,minmax(0,1fr))} }

/* ------------------------------------------------------------ names ---- */

.index .ix-names{grid-column:1/-1;display:grid;gap:var(--s5) var(--g);min-width:0}
.index .ix-ngh{display:flex;align-items:center;min-height:var(--tap);border-top:1px solid var(--hairline);margin-bottom:var(--s2);color:var(--muted)}
.index .ix-ng ul{display:grid;gap:var(--s4)}
.index .ix-nm{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.index .ix-nn{font-size:var(--fs-13);line-height:1.35;color:var(--ink);transition:color var(--t-fast) var(--ease)}
.index .ix-nn .ix-w{font-size:.9em;margin-left:.2em;vertical-align:super}
.index .ix-nt{color:var(--muted)}
.index .ix-nl{display:inline-block;padding-block:calc((var(--tap) - 1.35em) / 2)}
.index .ix-nm.is-dim .ix-nn,.index .ix-nm.is-dim .ix-nl{color:var(--muted)}
.index .is-scrub .ix-names{grid-column:1/10}
@media (min-width:768px){ .index .ix-names{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){
  .index .ix-names{grid-template-columns:repeat(4,minmax(0,1fr))}
  .index .is-scrub .ix-names{grid-column:1/19}
}
@media (min-width:1024px) and (max-width:1279px){ .index .is-scrub .ix-names{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* filter reflow: names exist only during the transition */
.index .vt .ix-row,.index .vt .ix-g{view-transition-name:var(--vtn);view-transition-class:ix-row}
::view-transition-group(*.ix-row){animation-duration:calc(400ms * var(--motion));animation-timing-function:var(--ease-reflow);overflow:clip}
/* the same for engines without view-transition-class (one rule per permanent N°) */
::view-transition-group(ix-r1),
::view-transition-group(ix-r2),
::view-transition-group(ix-r3),
::view-transition-group(ix-r4),
::view-transition-group(ix-r5),
::view-transition-group(ix-r6),
::view-transition-group(ix-r7),
::view-transition-group(ix-r8),
::view-transition-group(ix-r9),
::view-transition-group(ix-r10),
::view-transition-group(ix-r11),
::view-transition-group(ix-r12),
::view-transition-group(ix-r13),
::view-transition-group(ix-r14),
::view-transition-group(ix-r15),
::view-transition-group(ix-g1),
::view-transition-group(ix-g2),
::view-transition-group(ix-g3),
::view-transition-group(ix-g4),
::view-transition-group(ix-g5),
::view-transition-group(ix-g6),
::view-transition-group(ix-g7),
::view-transition-group(ix-g8),
::view-transition-group(ix-g9),
::view-transition-group(ix-g10),
::view-transition-group(ix-g11),
::view-transition-group(ix-g12),
::view-transition-group(ix-g13),
::view-transition-group(ix-g14),
::view-transition-group(ix-g15){animation-duration:calc(400ms * var(--motion));animation-timing-function:var(--ease-reflow);overflow:clip}