/* ============================================================
   /en/browse/ — The Index. Editorial archive page.
   Inherits .crumb / .hhero / .hhero-eyebrow / .hhero-aside / .meta-row
   from health-styles.css. Only browse-specific composition lives here.
   ============================================================ */

/* ----------------------------------------------------------------
   Browse hero — override the lane-photo treatment .hhero ships with.
   The Index is a title-page composition, not a lane portrait.
   ---------------------------------------------------------------- */
.hhero.browse-hero {
  background:
    linear-gradient(180deg, rgba(12, 13, 16, 0.92) 0%, rgba(12, 13, 16, 0.78) 60%, rgba(12, 13, 16, 0.94) 100%),
    radial-gradient(ellipse at 18% 0%, rgba(255, 122, 58, 0.14), transparent 52%),
    url("https://images.unsplash.com/photo-1518611012118-696072aa579a?w=2400&q=80");
  background-size: cover;
  background-position: center 32%;
  padding-top: clamp(96px, 12vw, 168px);
  padding-bottom: clamp(72px, 8vw, 120px);
}
.hhero.browse-hero::after {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 31px,
      rgba(236, 231, 220, 0.022) 31px,
      rgba(236, 231, 220, 0.022) 32px
    );
  mix-blend-mode: overlay;
  opacity: 0.55;
}
.hhero.browse-hero h1 {
  font-size: clamp(64px, 9.5vw, 142px);
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.hhero.browse-hero .lede { max-width: 56ch; }
.hhero.browse-hero .hhero-aside { align-self: end; }

/* Health/Fitness palette markers used inside chips and shelf rail rows */
.lane-mark { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.lane-mark.health  { background: var(--accent); }
.lane-mark.fitness { background: var(--ink); border: 1px solid var(--rule-strong); }

/* ============================================================
   No. 07 — Toolbar (search + lane toggle)
   ============================================================ */
.browse-toolbar {
  background: var(--bg);
  border-top: 1px solid var(--rule);
  padding: 80px 0 56px;
}
.browse-toolbar .frame { padding: 0 56px; max-width: 1440px; margin: 0 auto; }

.bt-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

/* Editorial search bar — bigger, calmer than hero composer */
.bt-search {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 28px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 4px;
  transition: border-color 0.2s, background 0.2s;
}
.bt-search:focus-within {
  border-color: var(--ink-dim);
  background: var(--bg-elev-2);
}
.bt-search svg {
  width: 22px; height: 22px;
  color: var(--ink-mute);
  flex-shrink: 0;
  align-self: center;
}
.bt-prefix {
  font-family: "Fraunces", "Playfair Display", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.bt-search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-family: "Fraunces", "Playfair Display", serif;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink);
  line-height: 1.3;
  padding: 0;
  min-width: 0;
}
.bt-search input::placeholder {
  color: var(--ink-mute);
  font-style: italic;
}
.bt-clear {
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  font-family: "Inter Tight", sans-serif;
  align-self: center;
}
.bt-clear:hover { color: var(--ink); }

/* Lane toggle — editorial pill row that echoes hero-cine .lane-toggle */
.bt-lane-toggle {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 4px;
  background: var(--bg-elev);
  flex-shrink: 0;
}
.bt-lane-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  color: var(--ink-dim);
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}
.bt-lane-toggle button:hover { color: var(--ink); }
.bt-lane-toggle button.active {
  background: var(--ink);
  color: var(--bg);
}
.bt-lane-toggle button em {
  font-family: "JetBrains Mono", monospace;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  opacity: 0.8;
}
.bt-lane-toggle button.active em { color: var(--bg); opacity: 0.65; }
.bt-lane-toggle button.active .lane-mark.fitness { border-color: rgba(236, 231, 220, 0.4); }

/* ============================================================
   No. 08 — The Index (sticky shelf rail + grouped list)
   ============================================================ */
.browse-index {
  background: var(--bg);
  padding: 24px 0 140px;
}
.browse-index .frame { padding: 0 56px; max-width: 1440px; margin: 0 auto; }

.bi-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  margin-top: 28px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  align-items: start;
}

/* --- Shelf rail (sticky, like a printed magazine's index) --- */
.bi-rail {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-right: 24px;
  border-right: 1px solid var(--rule);
}
.bi-rail .r-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.bi-rail .r-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.bi-shelf {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  transition: padding 0.18s, color 0.18s;
  color: var(--ink-dim);
}
.bi-shelf:hover {
  color: var(--ink);
  padding-left: 6px;
}
.bi-shelf.is-active {
  color: var(--ink);
}
.bi-shelf.is-active .name { color: var(--accent); }

.bi-shelf .num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.bi-shelf .name {
  font-family: "Playfair Display", "Bodoni Moda", serif;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.bi-shelf .name .it {
  font-style: italic;
  font-family: "Fraunces", serif;
  color: var(--accent);
  font-weight: 400;
}
.bi-shelf .ct {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.bi-shelf.is-pending {
  opacity: 0.5;
  cursor: default;
}
.bi-shelf.is-pending:hover { padding-left: 0; color: var(--ink-dim); }

/* --- Index list (grouped) --- */
.bi-list {
  min-width: 0;
}
.bi-state {
  padding: 56px 0;
  text-align: center;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 19px;
  color: var(--ink-dim);
  border: 1px dashed var(--rule);
  border-radius: 4px;
}
.bi-state.is-err { color: var(--accent-soft); font-style: normal; font-family: "Inter Tight", sans-serif; }

.bi-group + .bi-group {
  margin-top: 72px;
  padding-top: 56px;
  border-top: 1px solid var(--rule);
}

.bi-group-head {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: baseline;
  margin-bottom: 24px;
}
.bi-group-head .g-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  text-transform: uppercase;
  padding-top: 8px;
}
.bi-group-head .g-name {
  margin: 0;
  font-family: "Playfair Display", "Bodoni Moda", serif;
  font-weight: 500;
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.bi-group-head .g-name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s;
}
.bi-group-head .g-name a:hover { color: var(--accent); }
.bi-group-head .g-name .it {
  font-style: italic;
  font-family: "Fraunces", serif;
  color: var(--accent);
  font-weight: 400;
}
.bi-group-head .g-meta {
  grid-column: 2;
  margin-top: 10px;
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.bi-group-head .g-meta .sep { opacity: 0.5; }
.bi-group-head .g-meta .g-dek {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-dim);
}

/* --- Row list --- */
.bi-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.bi-row { border-bottom: 1px solid var(--rule); }

.bi-link {
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0 22px 4px;
  color: inherit;
  text-decoration: none;
  transition: padding 0.22s, background 0.22s;
}
.bi-link:hover {
  background: var(--bg-elev);
  padding-left: 18px;
}
.bi-link.is-pending-link {
  opacity: 0.5;
  cursor: default;
}
.bi-link.is-pending-link:hover { background: transparent; padding-left: 4px; }

.bi-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  padding-top: 6px;
}
.bi-body { min-width: 0; }
.bi-title {
  margin: 0 0 6px;
  font-family: "Playfair Display", "Bodoni Moda", serif;
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bi-link:hover .bi-title { color: var(--accent); }
.bi-title .it {
  font-style: italic;
  font-family: "Fraunces", serif;
  font-weight: 400;
}
.bi-dek {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bi-pending-note {
  font-style: italic;
  font-family: "Fraunces", serif;
}
.bi-arr {
  align-self: center;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 22px;
  color: var(--ink-mute);
  transition: transform 0.22s, color 0.22s;
}
.bi-link:hover .bi-arr {
  color: var(--accent);
  transform: translateX(4px);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .browse-toolbar .frame,
  .browse-index .frame { padding: 0 40px; }
  .bi-grid {
    grid-template-columns: 220px 1fr;
    gap: 40px;
  }
}

@media (max-width: 760px) {
  .browse-toolbar { padding: 56px 0 40px; }
  .browse-toolbar .frame,
  .browse-index .frame { padding: 0 24px; }
  .bt-row { grid-template-columns: 1fr; gap: 18px; }
  .bt-lane-toggle { width: 100%; justify-content: space-between; }
  .bt-lane-toggle button { flex: 1; justify-content: center; padding: 10px 8px; }
  .bt-search { padding: 16px 18px; }
  .bt-search input { font-size: 18px; }

  .bi-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bi-rail {
    position: static;
    border-right: 0;
    padding-right: 0;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
  }
  .bi-group-head {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .bi-group-head .g-meta { grid-column: 1; }
  .bi-link {
    grid-template-columns: 36px 1fr 20px;
    gap: 14px;
    padding: 18px 0;
  }
  .bi-link:hover { padding-left: 4px; background: transparent; }
}