/* Browse pages (Explore, Genres).
   One stylesheet for both. Satoshi only (self-hosted), warm palette built from the
   site's sand, one accent. Header and footer are untouched: the token block below is
   byte-for-byte what the old inline styles declared, so they render exactly as before. */

@font-face{font-family:BrowseSatoshi;src:url('/fonts/satoshi/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:BrowseSatoshi;src:url('/fonts/satoshi/Satoshi-Medium.woff2') format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:BrowseSatoshi;src:url('/fonts/satoshi/Satoshi-Bold.woff2') format('woff2');font-weight:700 900;font-display:swap}

/* ── Shared site tokens (unchanged; header/footer depend on them) ── */
:root{
  --bg-primary:#0a0a0b;
  --bg-surface:#141416;
  --bg-surface-hover:#1c1c1f;
  --border-subtle:#27272a;
  --text-primary:#f4f4f5;
  --text-secondary:#a1a1aa;
  --text-muted:#71717a;
  --accent:#e8d5b7;
  --accent-glow:rgba(232,213,183,.08);
  --font-serif:'Instrument Serif',Georgia,serif;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans);overflow-x:hidden;margin:0;padding:0;-webkit-font-smoothing:antialiased}

/* ── Page tokens: one hue (the site's sand), no stock greys ── */
body.browse-page{
  --b-sand:#e8d5b7;
  --b-ink:#0c0b09;
  --b-text:#efe9dc;
  --b-text-2:rgba(239,233,220,.68);
  --b-text-3:rgba(239,233,220,.54);
  --b-line:rgba(232,213,183,.12);
  --b-line-2:rgba(232,213,183,.3);
  --b-fill:rgba(232,213,183,.05);
  --b-font:BrowseSatoshi,system-ui,sans-serif;
  --b-r:6px;
  --b-ease:cubic-bezier(.16,1,.3,1);
  --b-pad:22px;
  --b-wrap:100%;
  --b-nav:56px;
}
@media(min-width:701px){body.browse-page{--b-pad:16px}}
@media(min-width:901px){body.browse-page{--b-nav:64px}}
/* Same column the home page uses: 1200px of content, 32px gutter. */
@media(min-width:1024px){body.browse-page{--b-pad:32px;--b-wrap:1264px}}

.browse-page .b-hero,
.browse-page .b-rail,
.browse-page .filter-section,
.browse-page .az-nav-container,
.browse-page .b-main{font-family:var(--b-font)}

.browse-page .b-hero-inner,
.browse-page .b-rail-inner,
.browse-page .filter-container,
.browse-page .az-nav-container,
.browse-page .b-main{max-width:var(--b-wrap);margin-left:auto;margin-right:auto;padding-left:var(--b-pad);padding-right:var(--b-pad)}

/* ── Hero ── */
.browse-page .b-hero{padding:120px 0 40px}
.browse-page .b-title{font-family:var(--b-font);margin:0 0 18px;font-weight:500;font-size:clamp(2.6rem,6.4vw,5.25rem);line-height:1.1;letter-spacing:-.05em;color:var(--b-text);text-wrap:balance}
.browse-page .b-sub{margin:0;max-width:46ch;font-size:1.0625rem;line-height:1.6;color:var(--b-text-2)}
.browse-page .genres-back-link{display:inline-flex;align-items:center;gap:6px;margin-bottom:20px;font-size:.8125rem;font-weight:500;color:var(--b-text-3);text-decoration:none;transition:color .2s ease}
.browse-page .genres-back-link:hover{color:var(--b-text)}

/* Brush word: the home page's dry-brush band, here on Satoshi Bold. Plays once. */
.nv-brush-defs{position:absolute;width:0;height:0}
.browse-page .b-word{position:relative;display:inline-block;white-space:nowrap;font-weight:700}
.browse-page .b-word-base{color:var(--b-sand)}
.browse-page .b-word-ov{position:absolute;left:0;top:0;color:var(--b-ink);animation:bInk 1.4s cubic-bezier(.65,0,.35,1) .3s both}
.browse-page .b-band{position:absolute;left:-.05em;right:-.05em;top:-.16em;width:calc(100% + .1em);height:1.4em;overflow:visible;pointer-events:none}
.browse-page .b-band path{fill:none;stroke:var(--b-sand);stroke-width:90px;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:0;filter:url(#nvDry);animation:bStroke 1.4s cubic-bezier(.65,0,.35,1) .3s both}
@keyframes bStroke{from{stroke-dashoffset:1;opacity:0}1%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes bInk{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% 0 -20% 0)}}

/* ── Sticky bars (Genres rail, Explore filters) ── */
.browse-page .b-rail,
.browse-page .filter-section{position:sticky;top:var(--b-nav);z-index:40;background:rgba(10,10,11,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--b-line);border-bottom:1px solid var(--b-line)}

/* Genres rail */
.browse-page .b-rail-inner{display:flex;gap:8px;padding-top:12px;padding-bottom:12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.browse-page .b-rail-inner::-webkit-scrollbar{display:none}
.browse-page .genre-pill-chip{flex:0 0 auto;display:inline-flex;align-items:center;min-height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--b-line);background:transparent;color:var(--b-text-2);font-size:.8125rem;font-weight:500;text-decoration:none;white-space:nowrap;transition:border-color .2s var(--b-ease),color .2s var(--b-ease),background .2s var(--b-ease)}
.browse-page .genre-pill-chip:hover{border-color:var(--b-line-2);color:var(--b-text)}
.browse-page .genre-pill-chip:focus-visible{outline:2px solid var(--b-sand);outline-offset:2px}
.browse-page .genre-pill-chip.is-active{background:var(--b-sand);border-color:var(--b-sand);color:var(--b-ink)}

/* ── Main column ── */
.browse-page .b-main{padding-top:40px;padding-bottom:96px}

/* Shelf / section headers */
.browse-page .genre-shelf-section,
.browse-page .language-section{margin-bottom:64px}
.browse-page .genre-shelf-section{scroll-margin-top:calc(var(--b-nav) + 72px)}
.browse-page .genre-shelf-header,
.browse-page .section-header-clean{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;border:0;padding:0}
.browse-page .genre-shelf-title-group{display:flex;align-items:baseline;gap:12px}
.browse-page .genre-shelf-title,
.browse-page .section-title-clean{margin:0;font-family:var(--b-font);font-size:1.625rem;font-weight:600;line-height:1.15;letter-spacing:-.035em;color:var(--b-text)}
.browse-page .genre-count-quiet,
.browse-page .section-count-clean{font-size:.8125rem;font-weight:400;color:var(--b-text-3);font-variant-numeric:tabular-nums}
.browse-page .genre-viewall-link{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:500;color:var(--b-text-2);text-decoration:none;transition:color .2s ease,gap .2s ease}
.browse-page .genre-viewall-link:hover{color:var(--b-sand);gap:9px}

/* ── Grids and cards ── */
.browse-page .genres-grid,
.browse-page .explore-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:28px 22px}
.browse-page .story-card-editorial{display:flex;flex-direction:column;gap:12px;min-width:0;color:inherit;text-decoration:none}
.browse-page .story-card-editorial:focus-visible{outline:2px solid var(--b-sand);outline-offset:4px;border-radius:var(--b-r)}
.browse-page .card-cover-container{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--b-r);background:var(--b-fill);border:1px solid var(--b-line);transition:border-color .3s var(--b-ease)}
.browse-page .card-cover-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--b-ease)}
.browse-page .story-card-editorial:hover .card-cover-container{border-color:var(--b-line-2)}
.browse-page .story-card-editorial:hover .card-cover-img{transform:scale(1.035)}
.browse-page .card-type-tag{position:absolute;top:8px;left:8px;padding:3px 9px;border-radius:999px;background:rgba(10,10,11,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--b-sand);font-size:.625rem;font-weight:600;line-height:1.4;letter-spacing:.08em;text-transform:uppercase}
.browse-page .card-meta-outside{display:flex;flex-direction:column;gap:3px;min-width:0}
.browse-page .card-title-outside{font-size:.9375rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--b-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.browse-page .card-author-outside{font-size:.8125rem;font-weight:400;color:var(--b-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browse-page .card-stats-row{display:flex;align-items:center;gap:10px;font-size:.75rem;font-weight:500;color:var(--b-text-3);font-variant-numeric:tabular-nums}
.browse-page .stat-rating{display:inline-flex;align-items:center;gap:4px;color:var(--b-sand)}
.browse-page .stat-rating svg{width:12px;height:12px;fill:var(--b-sand)}

/* ── Explore: filters ── */
.browse-page .filter-container{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.browse-page .filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.browse-page .custom-dropdown{position:relative}
.browse-page .custom-dropdown-btn{display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:0 14px;border-radius:var(--b-r);border:1px solid var(--b-line);background:transparent;color:var(--b-text-2);font-family:var(--b-font);font-size:.8125rem;font-weight:500;cursor:pointer;outline:none;transition:border-color .2s var(--b-ease),color .2s var(--b-ease)}
.browse-page .custom-dropdown-btn:hover{border-color:var(--b-line-2);color:var(--b-text)}
.browse-page .custom-dropdown-btn:focus-visible{outline:2px solid var(--b-sand);outline-offset:2px}
.browse-page .custom-dropdown-btn.is-active{border-color:var(--b-line-2);color:var(--b-sand)}
.browse-page .custom-dropdown-btn .dropdown-chevron{width:14px;height:14px;opacity:.6;transition:transform .18s ease}
.browse-page .custom-dropdown.is-open .dropdown-chevron{transform:rotate(180deg)}
.browse-page .custom-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:100;display:none;flex-direction:column;gap:2px;min-width:200px;max-height:320px;overflow-y:auto;padding:5px;border-radius:var(--b-r);border:1px solid var(--b-line);background:#100f0c;box-shadow:0 18px 40px rgba(0,0,0,.55);scrollbar-width:thin;scrollbar-color:rgba(232,213,183,.25) transparent}
.browse-page .custom-dropdown.is-open .custom-dropdown-menu{display:flex}
.browse-page .custom-dropdown-item{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:4px;color:var(--b-text-2);font-size:.8125rem;font-weight:500;text-decoration:none;transition:background .15s ease,color .15s ease}
.browse-page .custom-dropdown-item:hover{background:var(--b-fill);color:var(--b-text)}
.browse-page .custom-dropdown-item.is-selected{color:var(--b-sand);background:var(--b-fill)}
.browse-page .filter-count-badge{font-size:.8125rem;color:var(--b-text-3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Explore: A-Z index */
.browse-page .az-nav-container{padding-top:16px;padding-bottom:0}
.browse-page .az-nav-row{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.browse-page .az-label{margin-right:10px;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--b-text-3)}
.browse-page .az-link{padding:5px 8px;border-radius:4px;color:var(--b-text-3);font-size:.8125rem;font-weight:500;text-decoration:none;transition:color .15s ease,background .15s ease}
.browse-page .az-link:hover{color:var(--b-text)}
.browse-page .az-link.is-active{background:var(--b-sand);color:var(--b-ink)}

/* Explore: layout + sidebar */
.browse-page .explore-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:56px;align-items:start}
.browse-page .explore-main{min-width:0}
.browse-page .explore-aside{position:sticky;top:calc(var(--b-nav) + 84px)}
/* No ad rendered: let the catalog use the full column. */
.browse-page .explore-layout:not(:has(.explore-aside *)){grid-template-columns:minmax(0,1fr)}
.browse-page .explore-layout:not(:has(.explore-aside *)) .explore-aside{display:none}
@media(max-width:1024px){
  .browse-page .explore-layout{grid-template-columns:minmax(0,1fr);gap:40px}
  .browse-page .explore-aside{position:static}
}

/* Pagination */
.browse-page .pg-nav-editorial{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:56px}
.browse-page .pg-info-editorial{font-size:.8125rem;color:var(--b-text-3);font-variant-numeric:tabular-nums}
.browse-page .pg-links-editorial{display:flex;gap:6px;flex-wrap:wrap}
.browse-page .pg-btn-editorial{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--b-r);border:1px solid var(--b-line);color:var(--b-text-2);font-size:.8125rem;font-weight:500;text-decoration:none;transition:border-color .2s var(--b-ease),color .2s var(--b-ease)}
.browse-page .pg-btn-editorial:hover{border-color:var(--b-line-2);color:var(--b-text)}
.browse-page .pg-btn-editorial.is-active{background:var(--b-sand);border-color:var(--b-sand);color:var(--b-ink)}
.browse-page .pg-btn-editorial[aria-disabled="true"]{opacity:.35;pointer-events:none}

/* Empty states */
.browse-page .empty-state-editorial{padding:72px 0;max-width:46ch;color:var(--b-text-3)}
.browse-page .empty-state-editorial h3{margin:16px 0 8px;font-family:var(--b-font);font-size:1.5rem;font-weight:600;letter-spacing:-.03em;color:var(--b-text)}
.browse-page .empty-state-editorial p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--b-text-2)}
.browse-page .empty-btn{display:inline-flex;align-items:center;min-height:44px;margin-top:22px;padding:0 22px;border-radius:var(--b-r);background:var(--b-sand);color:var(--b-ink);font-size:.875rem;font-weight:600;text-decoration:none;transition:background .2s ease}
.browse-page .empty-btn:hover{background:#f3e6cf}

/* ── Phones ── */
@media(max-width:768px){
  .browse-page .b-hero{padding:88px 0 28px}
  .browse-page .b-title{font-size:clamp(2.25rem,11vw,3.4rem);margin-bottom:14px}
  .browse-page .b-sub{font-size:1rem}
  .browse-page .b-main{padding-top:28px;padding-bottom:72px}
  .browse-page .genre-shelf-section,
  .browse-page .language-section{margin-bottom:44px}
  .browse-page .genre-shelf-title,
  .browse-page .section-title-clean{font-size:1.3rem}
  .browse-page .genres-grid,
  .browse-page .explore-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  /* Filters: three controls on one row; menus span the whole row. */
  .browse-page .filter-container{flex-direction:column;align-items:stretch;gap:8px}
  .browse-page .filter-row{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .browse-page .custom-dropdown{position:static;min-width:0}
  .browse-page .custom-dropdown-btn{width:100%;justify-content:space-between;padding:0 9px;font-size:.78rem}
  .browse-page .custom-dropdown-btn .dropdown-chevron{display:none}
  .browse-page .custom-dropdown-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .browse-page .custom-dropdown-menu{left:0;right:0;min-width:0;width:100%}
  .browse-page .filter-count-badge{display:none}
  .browse-page .az-nav-container{padding-right:0;overflow-x:auto;scrollbar-width:none}
  .browse-page .az-nav-container::-webkit-scrollbar{display:none}
  .browse-page .az-nav-row{flex-wrap:nowrap;width:max-content;padding-right:var(--b-pad)}
  .browse-page .az-link{min-width:32px;text-align:center}
  .browse-page .pg-nav-editorial{flex-direction:column;align-items:flex-start}
}
@media(max-width:380px){
  .browse-page .genres-grid,
  .browse-page .explore-grid{gap:18px 10px}
}

@media(hover:none){
  .browse-page .story-card-editorial:hover .card-cover-img{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .browse-page .b-band path,
  .browse-page .b-word-ov{animation:none}
  .browse-page .card-cover-img,
  .browse-page .genre-pill-chip,
  .browse-page .custom-dropdown-btn{transition:none}
}