/* ===========================================================================
   Case file index — the row of category links above a collection page.

   What was here: five beige buttons in a row, straight-cornered, grey outline,
   the active one black. They worked, and they looked like a filter widget
   borrowed from an admin panel — the same visual language as the "In stock
   only" checkboxes, sitting directly under a 92px serif headline printed on
   paper. On a page that goes to the trouble of a hand-drawn illustration and
   an uppercase case-file eyebrow, the one element that says "which case file am
   I reading" was the least designed thing on the screen.

   What replaced it: an index, not a button row. A printed rule with a label at
   each end, then numbered entries with no boxes at all — the number carries the
   hierarchy, an orange underline carries the state. It reads as the contents
   page of a folder, which is exactly what a collection is here.

   Sub-shelves get their own drawer underneath: a lighter, indented line of
   names prefixed with a dash. They only appear for the family you are inside,
   so the nav never becomes a two-level menu that has to stay open all the time.

   Prefix: .cf- / .cf__  (case files). Nothing outside this file, and nothing in
   site.css, is touched — the shop keeps its own type scale.
   ------------------------------------------------------------------------ */

.cf {
  --cf-ink: #2b3129;
  --cf-muted: #6d7269;
  --cf-orange: #e8753f;
  --cf-green: #2f3f2e;
  --cf-line: rgba(44, 51, 39, 0.16);
  --cf-line-soft: rgba(44, 51, 39, 0.1);
  margin: clamp(24px, 2.8vw, 34px) 0 0;
}

/* ------------------------------------------------------------ label + rule */

.cf__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 5px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cf-muted);
}

.cf__label {
  white-space: nowrap;
}

/* A rule that eats the slack between the two labels: the oldest trick in print
   layout, and still the cheapest way to make a row of links feel typeset. */
.cf__rule {
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  background: var(--cf-line);
}

.cf__count {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- the row */

.cf__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(16px, 2.2vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--cf-line);
}

.cf__item {
  display: flex;
  min-width: 0;
}

.cf__tab {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  /* The 2px underline is the state indicator, so it sits on top of the row's
     own 1px rule rather than below it — negative margin, not absolute. */
  margin-bottom: -1px;
  padding: 12px 0 11px;
  border-bottom: 2px solid transparent;
  color: var(--cf-muted);
  font-size: 13.5px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.cf__tab:hover {
  color: var(--cf-ink);
  border-bottom-color: rgba(44, 51, 39, 0.3);
}

.cf__tab.is-on {
  color: var(--cf-ink);
  border-bottom-color: var(--cf-orange);
  font-weight: 600;
}

.cf__tab:focus-visible {
  outline: 2px solid var(--cf-orange);
  outline-offset: 3px;
}

/* The number is the hierarchy. Nine pixels of letterspaced type reads as a
   filing mark, not as content — which is why it never competes with the name. */
.cf__no {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: rgba(44, 51, 39, 0.42);
  font-variant-numeric: tabular-nums;
}

.cf__tab.is-on .cf__no {
  color: var(--cf-orange);
}

/* The index's first entry is the star, not a number — it sits in the same slot
   so the row still reads as one list, but at a size the glyph needs. */
.cf__no--mark {
  font-size: 11px;
  letter-spacing: 0;
  color: var(--cf-orange);
}

.cf__name {
  white-space: nowrap;
}

/* How many shelves live on this one. A tiny filled pill when you are inside the
   family, a quiet outline when you are not. */
.cf__kids {
  align-self: center;
  padding: 1px 5px 2px;
  border-radius: 999px;
  background: rgba(47, 63, 46, 0.08);
  color: #4c544a;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.cf__tab.is-on .cf__kids {
  background: var(--cf-green);
  color: #f6efdc;
}

/* ------------------------------------------------------------ sub-shelves */

/* Only drawn for the family you are standing in — a permanently open second
   level would double the height of the nav to serve one click. */
.cf__drawer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 11px 0 0;
}

.cf__drawer-label {
  flex: 0 0 auto;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(44, 51, 39, 0.45);
}

.cf__subs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cf__sub {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  color: var(--cf-muted);
  font-size: 12.5px;
  line-height: 1.4;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.cf__sub::before {
  content: '—';
  margin-right: 7px;
  color: rgba(44, 51, 39, 0.3);
}

.cf__sub:hover {
  color: var(--cf-ink);
}

.cf__sub.is-on {
  color: var(--cf-ink);
  font-weight: 600;
  border-bottom-color: var(--cf-orange);
}

.cf__sub.is-on::before {
  color: var(--cf-orange);
}

/* ------------------------------------------------------------- breakpoints */

/* --------------------------------------------------------- the phone layout
   The printed index does not survive a 390px column. Four long shelf names
   wrap into two ragged lines whose second line starts under "Home" instead of
   under the margin, so the eye reads an interrupted sentence rather than a
   list. The numbers are 9.5px — too small to read, wide enough to cost the
   space of a whole entry. And the open shelf is marked by 2px of orange hair
   under one of eight words: technically a state, practically invisible.

   Wrapping was not the problem; the structure was. So the phone gets its own
   structure instead of a squeezed copy of the desktop one:

     · one rail that never wraps, scrolls sideways, and bleeds past the text
       column on both sides — so the next chip is always half-cut by the screen
       edge, which says "there is more, it is over there" without an arrow;
     · each shelf is a solid chip, and the open one is printed in reverse
       (dark green fill, paper type) — a state you can see from arm's length;
     · numbers are dropped, because a desk reference is not a phone reference;
     · the sub-shelves hang off a vertical rule instead of sitting in a line of
       em-dashes that wrapped into something indistinguishable from the chips.

   No mask, no fade, no scroll-hint gradient. A chip cut in half by the screen
   edge is a clearer affordance than any of them, and it cannot lie. */

@media (max-width: 620px) {
  .cf {
    --cf-bleed: 5vw;
  }

  .cf__meta {
    margin-bottom: 9px;
  }

  .cf__row {
    flex-wrap: nowrap;
    gap: 0 7px;
    margin: 0 calc(-1 * var(--cf-bleed));
    padding: 1px var(--cf-bleed) 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 0;
  }

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

  .cf__item {
    flex: 0 0 auto;
  }

  .cf__no {
    display: none;
  }

  .cf__tab {
    margin-bottom: 0;
    padding: 9px 13px 10px;
    border-bottom: 0;
    border-radius: 999px;
    background: rgba(44, 51, 39, 0.055);
    font-size: 13px;
    white-space: nowrap;
  }

  .cf__tab:hover {
    border-bottom-color: transparent;
  }

  .cf__tab.is-on {
    background: var(--cf-green);
    color: #f6efdc;
  }

  /* Inside a dark fill the pale pill disappears, so the count inverts to a
     translucent chip of paper instead of solid green-on-green. */
  .cf__tab.is-on .cf__kids {
    background: rgba(246, 239, 220, 0.18);
    color: #f6efdc;
  }

  .cf__drawer {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
    padding-top: 0;
  }

  .cf__subs {
    display: block;
    margin-left: 1px;
    border-left: 1px solid rgba(44, 51, 39, 0.24);
  }

  .cf__sub {
    position: relative;
    display: block;
    padding: 8px 0 8px 15px;
    border-bottom: 0;
    font-size: 13px;
  }

  /* A rule joining each name back to the vertical line — the smallest possible
     drawing of "these belong under that". */
  .cf__sub::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 1px;
    margin-right: 0;
    background: rgba(44, 51, 39, 0.24);
  }

  .cf__sub.is-on {
    margin-left: -1px;
    padding-left: 14px;
    border-left: 2px solid var(--cf-orange);
  }

  .cf__sub.is-on::before {
    left: 2px;
    background: var(--cf-orange);
  }
}

/* -------------------------------------------------------- sub-shelves on a card
   The names of a shelf's sub-shelves, printed on its card. A count ("3
   sub-shelves") is a statistic; the names are an invitation, and this is the
   only place where a reader can see what is inside a shelf without opening it.

   Duplicated in category-board.css on purpose: the home page loads that file
   and never this one, the collection pages load this one and never that. Two
   files that cannot coexist on one page have to each carry the rule. */

.cat-kids {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.55;
  color: #96613f;
  letter-spacing: 0.005em;
}

.cat-kids::before {
  content: '↳';
  margin-right: 6px;
  opacity: 0.7;
}

/* `.category` lays its children out with space-between, which would float the
   new line into the middle of the tile. Pin it under the lede and let the count
   keep the floor. */
.category .cat-kids {
  margin-top: 6px;
}

.category .cat-count {
  margin-top: auto;
}