/* Textile library: where our fabrics are used, by brand and by fabric. Ansley v1 editorial palette.
   One bold element, the fabric swatch card (a mill header card: ratio numerals, fabric name, the cloth, the brand
   tally); everything around it stays quiet. Controls are round, content is square. Light theme only. */
:root {
  color-scheme: light;
  --paper: #f6f3ec;
  --ink: #161514;
  --muted: #6d6961;
  --muted-deep: #65615a;   /* small text on linen: #6d6961 there is 4.4:1, this is 5.0:1 */
  --burgundy: #6d1d28;
  --linen: #ebe7dd;
  --hairline: #cfc6b8;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 3vw, 40px);
  --page: 1360px;
  --head: 58px;            /* sticky header height; the filter column sticks below it */
  --lift: 0 16px 30px -20px rgba(22, 21, 20, .5);
}

* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 60; padding: 8px 14px;
  background: var(--ink); color: var(--paper); text-decoration: none;
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }

/* ---------- header (the portfolio pages' header, on paper) ---------- */
.lib-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: rgba(246, 243, 236, .96); border-bottom: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lib-header-inner {
  max-width: var(--page); min-height: calc(var(--head) - 1px); margin: 0 auto; padding: 10px var(--gutter);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px;
}
.lib-brand { font-size: 15px; font-weight: 500; letter-spacing: .32em; text-decoration: none; }
.lib-crumbs { font-size: 12px; color: var(--muted); }
.lib-crumbs a { text-decoration: none; color: var(--ink); }
.lib-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lib-views {
  margin-left: auto; display: inline-flex; padding: 2px;
  border: 1px solid var(--hairline); border-radius: 999px; background: var(--paper);
}
.lib-views button {
  min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none;
  font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.lib-views button:hover { color: var(--ink); }
.lib-views button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- page ---------- */
.lib { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter) 72px; }
.lib-intro { padding: 30px 0 22px; max-width: 70ch; }
.lib-intro h1 { font: 400 clamp(34px, 3.4vw, 48px)/1.05 var(--serif); letter-spacing: -.01em; }
.lib-lead { margin-top: 10px; font-size: 15px; color: var(--muted); }
.lib-error { color: var(--burgundy); }

/* ---------- shelves of swatch cards ---------- */
.shelf { margin: 0 0 26px; }
.shelf-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; }
.shelf-head h2 { font: 400 21px/1.2 var(--serif); }
.shelf-head p { font-size: 13px; color: var(--muted); }
/* Each shelf is one row: the cards share its width and the row scrolls sideways once a new fabric or blend would
   make them narrower than their minimum. The padding (taken back by the margin) leaves room for the hover lift
   and the focus ring inside the scroll clip. position: relative keeps the visually hidden labels inside that clip;
   absolutely placed, they would otherwise escape it and widen the page. */
.shelf-row {
  position: relative; display: grid; grid-auto-flow: column; gap: 16px; align-items: stretch;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
  padding: 6px 6px 16px; margin: -6px -6px -10px;
}
.shelf-row.is-named { grid-auto-columns: minmax(240px, 1fr); }
.shelf-row.is-blend { grid-auto-columns: minmax(124px, 1fr); }

.swatch {
  container-type: inline-size;   /* the ratio numerals size to the card (cqi below) */
  position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; text-align: left;
  border: 1px solid var(--hairline); background: var(--paper); cursor: pointer;
  transition: transform .16s ease-out, box-shadow .16s ease-out, opacity .16s ease-out;
}
.swatch-head { display: block; padding: 14px 16px 12px; background: var(--linen); }
.swatch-ratio {
  display: block; font: 400 56px/1 var(--serif); font-size: min(56px, 19cqi); letter-spacing: -.01em;
  font-variant-numeric: oldstyle-nums proportional-nums; white-space: nowrap;
}
.swatch-ratio .slash { color: var(--muted-deep); }
/* "% not stated" takes the numerals' line: same line box, so every cloth band in the row starts level */
.swatch-ratio.is-unstated, .swatch.is-blend .swatch-ratio.is-unstated {
  font-size: 21px; font-size: min(21px, 13.5cqi); line-height: 36px; line-height: min(36px, 24cqi);
  font-style: italic; letter-spacing: 0;
}
.swatch-name { display: block; margin-top: 6px; font: 400 19px/1.25 var(--serif); }
/* The cloth: the swatch photo cropped close, so the band shows fabric rather than the garment. */
.swatch-cloth {
  display: block; aspect-ratio: 8 / 3; background-color: var(--linen);
  background-repeat: no-repeat; background-size: 260% auto; background-position: 50% 55%;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.swatch-cloth.is-closeup { background-size: cover; background-position: 50% 50%; }
.swatch-cloth.is-empty { display: grid; place-items: center; font-size: 12px; color: var(--muted-deep); }
.swatch-tally {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
  padding: 10px 16px 13px; font-size: 13px; color: var(--muted);
}
.tally-n { margin-left: 5px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.tally-review { display: inline-flex; align-items: center; gap: 6px; color: var(--burgundy); }
.tally-review::before, .chip.is-review::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--burgundy);
}

.swatch.is-blend .swatch-head { padding: 11px 14px 9px; }
.swatch.is-blend .swatch-ratio { font-size: 36px; font-size: min(36px, 24cqi); }
.swatch.is-blend .swatch-cloth { aspect-ratio: 2 / 1; }
.swatch.is-blend .swatch-tally { padding: 8px 14px 11px; font-size: 12px; column-gap: 12px; }

.swatch[aria-pressed="true"] { border-color: var(--ink); }
.swatch[aria-pressed="true"] .swatch-head { background: var(--ink); color: var(--paper); }
.swatch[aria-pressed="true"] .swatch-ratio .slash { color: rgba(246, 243, 236, .6); }
.swatch.is-dim { opacity: .45; }
.swatch.is-dim:hover, .swatch.is-dim:focus-visible { opacity: .8; }
@media (hover: hover) {
  .swatch:hover { transform: translateY(-2px); box-shadow: var(--lift); }
}

/* ---------- the selected fabric ---------- */
.selection {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px;
  margin: 4px 0 20px; max-width: 100%;
}
.selection-text { flex: 1 1 420px; max-width: 72ch; }
.selection-title { font: 400 24px/1.25 var(--serif); }
.selection-title .ratio { margin-left: 10px; font-size: 21px; color: var(--muted); }
.selection-note { margin-top: 4px; color: var(--ink); }
.selection-cross { margin-top: 4px; font-size: 13px; color: var(--muted); }

/* ---------- chips ---------- */
.facets {
  display: grid; gap: 10px; margin: 0 0 18px; padding: 14px 0;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.facet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.facet-label { min-width: 92px; font-size: 13px; color: var(--muted); }
.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px;
  border: 1px solid var(--hairline); border-radius: 999px; background: transparent;
  font-size: 13px; line-height: 1.2; cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip.is-zero { color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip[aria-pressed="true"] .chip-n { color: rgba(246, 243, 236, .72); }
.chip[aria-pressed="true"].is-review::before { background: var(--paper); }

/* ---------- results ---------- */
.results-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px;
  margin: 0 0 16px;
}
.results-count { font-size: 14px; }
.results-count strong { font-weight: 500; }
.text-btn {
  padding: 4px 0; border: 0; background: none; font-size: 13px; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px;
}
.text-btn:hover { text-decoration-color: currentColor; }
.hint { margin: 0 0 24px; color: var(--muted); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 36px 16px; }

.tile { display: flex; flex-direction: column; min-width: 0; }
.tile-link { display: flex; flex-direction: column; gap: 3px; text-decoration: none; }
.tile-media {
  position: relative; display: block; aspect-ratio: 4 / 5; margin-bottom: 9px;
  background: var(--linen); overflow: hidden;
}
.tile-media img { width: 100%; height: 100%; object-fit: cover; }
.tile-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--muted-deep); }
.tile-flag {
  position: absolute; left: 8px; top: 8px; padding: 2px 8px; font-size: 12px; line-height: 1.5;
  color: var(--burgundy); background: var(--paper); border: 1px solid currentColor;
}
.tile-flag.is-removed { color: var(--paper); background: var(--burgundy); border-color: var(--burgundy); }
.tile.is-removed .tile-media img, .tile.is-removed .tile-film { opacity: .5; filter: grayscale(.5); }
.tile-brand { font-size: 12px; color: var(--muted); }
.tile-name {
  font: 400 16px/1.3 var(--serif);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.tile-link:hover .tile-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tile-fabric { margin-top: 2px; font-size: 13px; }
.tile-ratio { margin-left: 6px; font-family: var(--serif); font-size: 15px; font-variant-numeric: oldstyle-nums; white-space: nowrap; }
.tile-ratio:first-child { margin-left: 0; }
.tile-ratio .slash { color: var(--muted); }
.tile-unstated { margin-left: 6px; color: var(--muted); }
.tile-unstated:first-child { margin-left: 0; }
.tile-content, .tile-status {
  font-size: 12px; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.tile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.act {
  min-height: 32px; padding: 0 13px; border: 1px solid var(--ink); border-radius: 999px;
  background: transparent; font-size: 13px; cursor: pointer;
}
.act:hover { background: var(--ink); color: var(--paper); }
.act.is-no { border-color: var(--burgundy); color: var(--burgundy); }
.act.is-no:hover { background: var(--burgundy); color: var(--paper); }
/* aria-disabled, not disabled: the pressed button keeps keyboard focus while its decision is saving */
.act[aria-disabled="true"] { opacity: .5; cursor: progress; }
.act[aria-disabled="true"]:hover { background: transparent; color: var(--ink); }
.act.is-no[aria-disabled="true"]:hover { color: var(--burgundy); }
.tile-decided { font-size: 12px; color: var(--muted); }
.tile-msg { margin-top: 6px; font-size: 12px; color: var(--muted); }
.tile-msg.is-error { color: var(--burgundy); }

.empty { grid-column: 1 / -1; max-width: 60ch; padding: 28px 0 8px; }
.empty-title { font: 400 21px/1.3 var(--serif); }
.empty-hint { margin: 6px 0 14px; color: var(--muted); }
.empty .act { padding: 0 16px; }

/* ---------- filter grid ---------- */
.fg { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 0 40px; align-items: start; }
.fg-filters {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--head) + 16px);
  max-height: calc(100vh - var(--head) - 32px); overflow: auto; padding: 2px 4px 2px 2px;
}
.fg-filters > summary {
  display: none; list-style: none; cursor: pointer; justify-content: space-between; align-items: center;
  min-height: 48px; font-size: 14px;
}
.fg-filters > summary::-webkit-details-marker { display: none; }
.fg-filters > summary::after { content: "+"; font-size: 20px; font-weight: 300; line-height: 1; }
.fg-filters[open] > summary::after { content: "\2212"; }
.fg-summary-n { margin-left: 8px; color: var(--muted); }
.fg-group { min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.fg-group legend { padding: 0; margin: 0 0 6px; font: 400 17px/1.3 var(--serif); }
.fg-group-note { margin: -2px 0 6px; font-size: 12px; color: var(--muted); }
.check { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: 14px; cursor: pointer; }
.check input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.check-label .ratio { font-family: var(--serif); font-size: 16px; font-variant-numeric: oldstyle-nums; }
.check-label .ratio .slash { color: var(--muted); }
.check-n { margin-left: auto; padding-left: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.check.is-zero .check-label { color: var(--muted); }
.fg-clear { margin-top: 4px; }
.fg-results { min-width: 0; }

/* ---------- brand x fabric ---------- */
.matrix-wrap { position: relative; overflow-x: auto; margin: 0 0 30px; border-top: 1px solid var(--ink); }
.matrix-note { margin: -18px 0 26px; font-size: 13px; color: var(--muted); }
.matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.matrix th, .matrix td { padding: 0; border-bottom: 1px solid var(--hairline); text-align: right; white-space: nowrap; }
.matrix thead th { padding: 10px 12px 8px; font: 400 15px/1.25 var(--serif); vertical-align: bottom; }
.matrix thead .col-group { padding-top: 12px; font: 400 12px/1.3 var(--sans); color: var(--muted); text-align: left; }
.matrix thead .ratio { font-size: 18px; font-variant-numeric: oldstyle-nums; }
.matrix thead .ratio .slash, .matrix thead .ratio-unstated { color: var(--muted); }
.matrix thead .ratio-unstated { font-style: italic; }
.matrix .row-head { padding: 0 20px 0 0; text-align: left; font: 400 16px/1.3 var(--serif); }
.matrix thead .corner { padding-left: 0; text-align: left; font: 400 12px/1.3 var(--sans); color: var(--muted); }
.matrix .split { border-left: 1px solid var(--hairline); }
.matrix td button {
  display: block; width: 100%; min-height: 44px; padding: 0 12px; border: 0; background: none;
  font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; cursor: pointer;
}
.matrix td button:hover { background: var(--linen); }
.matrix td button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.matrix .zero { display: block; padding: 0 12px; line-height: 44px; color: var(--muted); font-variant-numeric: tabular-nums; }
.matrix .total { padding: 0 12px; line-height: 44px; font-variant-numeric: tabular-nums; }
.matrix tfoot th, .matrix tfoot td { border-top: 1px solid var(--ink); border-bottom: 0; }
.matrix tfoot .total { font-weight: 500; }

/* ---------- footer ---------- */
.lib-footer { border-top: 1px solid var(--hairline); font-size: 12px; color: var(--muted); }
.lib-footer p {
  max-width: var(--page); margin: 0 auto;
  padding: 26px var(--gutter) calc(26px + env(safe-area-inset-bottom, 0px));
}

/* ---------- narrow screens ---------- */
@media (max-width: 899px) {
  .fg { grid-template-columns: minmax(0, 1fr); }
  .fg-filters {
    position: static; max-height: none; overflow: visible; padding: 0; margin: 0 0 22px;
    border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  }
  .fg-filters > summary { display: flex; }
  .fg-filters[open] > summary { margin-bottom: 4px; }
  .fg-groups { padding-bottom: 8px; }
}
@media (max-width: 699px) {
  .lib-header { position: static; }
  .lib-views { margin-left: 0; width: 100%; }
  .lib-views button { flex: 1 1 0; padding: 0 8px; }
  .lib-intro { padding: 22px 0 18px; }
  .lib-lead { font-size: 14px; }
  /* swatch rows scroll sideways, bleeding to the screen edge */
  .shelf-row {
    display: flex; scroll-snap-type: x proximity;
    margin: -6px calc(-1 * var(--gutter)) -6px; padding: 6px var(--gutter) 12px; scroll-padding-inline: var(--gutter);
  }
  .shelf-row > .swatch { scroll-snap-align: start; }
  .shelf-row.is-named > .swatch { flex: 0 0 min(76vw, 300px); }
  .shelf-row.is-blend > .swatch { flex: 0 0 min(42vw, 170px); }
  .facet-label { min-width: 0; width: 100%; }
  /* the brand column stays put while the counts scroll; long names wrap so it keeps to about a third */
  .matrix .row-head {
    position: sticky; left: 0; z-index: 1; min-width: 96px; padding: 8px 12px 8px 0;
    white-space: normal; line-height: 1.2; background: var(--paper);
  }
  .matrix thead .corner { position: sticky; left: 0; z-index: 1; background: var(--paper); }
}
@media (max-width: 559px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .tile-name { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .swatch { transition: none; }
  .swatch:hover { transform: none; box-shadow: none; }
}