@import "https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg:oklch(97.2% .01 80);--surface:oklch(94.8% .014 78);--surface-2:oklch(92.8% .016 78);--ink:oklch(17% .012 65);--ink-soft:oklch(30% .012 65);--ink-muted:oklch(50% .012 70);--ink-faint:oklch(70% .012 78);--hairline:oklch(85% .012 75);--hairline-strong:oklch(78% .012 72);--accent:oklch(42% .16 30);--accent-soft:oklch(94% .04 30);--serif:"Instrument Serif", "Times New Roman", Georgia, serif;--sans:"Geist", -apple-system, "Helvetica Neue", Arial, sans-serif;--mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--max-width:1480px;--gutter:clamp(20px, 4vw, 56px);--hairline-w:1px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}[data-theme=dark]{--bg:oklch(16% .012 70);--surface:oklch(20% .012 70);--surface-2:oklch(24% .014 70);--ink:oklch(94% .01 80);--ink-soft:oklch(82% .012 80);--ink-muted:oklch(62% .012 75);--ink-faint:oklch(40% .012 70);--hairline:oklch(30% .012 70);--hairline-strong:oklch(40% .012 70);--accent:oklch(72% .18 30);--accent-soft:oklch(28% .06 30);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-size:16px;line-height:1.55}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}input,select{font:inherit;color:inherit}em{font-style:italic}::selection{background:var(--accent);color:var(--bg)}.mono{font-family:var(--mono)}.app-shell{flex-direction:column;min-height:100vh;display:flex}.main{flex:1}.top-nav{z-index:50;background:color-mix(in oklch, var(--bg) 88%, transparent);-webkit-backdrop-filter:blur(12px);border-bottom:var(--hairline-w) solid var(--hairline);position:sticky;top:0}.top-nav-inner{max-width:var(--max-width);padding:14px var(--gutter);grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin:0 auto;display:grid}.wordmark{text-align:left;align-items:center;gap:12px;text-decoration:none;display:flex}.wordmark-mark{font-family:var(--serif);color:var(--accent);font-size:28px;line-height:1;display:inline-block;transform:rotate(-12deg)}.wordmark-text{flex-direction:column;line-height:1.05;display:flex}.wordmark-text span{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);font-size:10px}.wordmark-text em{font-family:var(--serif);color:var(--ink);font-size:22px;font-style:italic;line-height:1}.nav-links{justify-content:center;gap:28px;display:flex}.nav-link{font-family:var(--sans);color:var(--ink-muted);border-bottom:1px solid #0000;align-items:baseline;gap:6px;padding:6px 0;font-size:14px;font-weight:500;text-decoration:none;transition:color .15s,border-color .15s;display:inline-flex}.nav-link:hover{color:var(--ink)}.nav-link.is-active{color:var(--ink);border-bottom-color:var(--ink)}.nav-count{font-family:var(--mono);color:var(--ink-faint);border:1px solid var(--hairline);border-radius:999px;padding:2px 5px;font-size:10px}.nav-trailing{justify-content:flex-end;gap:8px;display:flex}.theme-toggle{border:1px solid var(--hairline);width:32px;height:32px;color:var(--ink-soft);border-radius:999px;transition:border-color .15s,color .15s}.theme-toggle:hover{color:var(--ink);border-color:var(--hairline-strong)}.collection-page,.detail-page{max-width:var(--max-width);padding:0 var(--gutter);margin:0 auto}.page-head{border-bottom:var(--hairline-w) solid var(--hairline);padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(32px,4vw,48px)}.page-head-meta{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);align-items:center;gap:14px;margin-bottom:28px;font-size:11px;display:flex}.kicker-divider{color:var(--ink-faint)}.page-title{font-family:var(--serif);letter-spacing:-.02em;color:var(--ink);margin:0;font-size:clamp(56px,11vw,168px);font-weight:400;line-height:.95}.page-title em{color:var(--accent);font-style:italic}.page-head-foot{grid-template-columns:1fr 1fr;align-items:end;gap:clamp(24px,4vw,64px);margin-top:clamp(32px,5vw,56px);display:grid}.page-lead{font-family:var(--serif);color:var(--ink-soft);text-wrap:pretty;max-width:48ch;margin:0;font-size:clamp(18px,1.6vw,24px);line-height:1.35}.page-counts{border-top:var(--hairline-w) solid var(--hairline);grid-template-columns:repeat(4,1fr);gap:24px;margin:0;padding-top:18px;display:grid}.page-counts>div{flex-direction:column;gap:6px;display:flex}.page-counts dt{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);font-size:10px}.page-counts dd{font-family:var(--serif);color:var(--ink);margin:0;font-size:clamp(28px,3vw,44px);line-height:1}.filter-bar{border-bottom:var(--hairline-w) solid var(--hairline);flex-direction:column;gap:18px;padding:24px 0;display:flex}.filter-bar-row{flex-wrap:wrap;align-items:end;gap:16px;display:flex}.filter-bar-row.filter-bar-pills{align-items:flex-start;gap:24px}.search-wrap{border-bottom:var(--hairline-w) solid var(--hairline-strong);flex:1;align-items:center;min-width:280px;padding:0;display:flex;position:relative}.search-icon{width:18px;height:18px;color:var(--ink-muted);margin-right:10px}.search-input{font-family:var(--serif);color:var(--ink);background:0 0;border:0;outline:none;flex:1;padding:10px 0;font-size:20px;font-style:italic}.search-input::placeholder{color:var(--ink-faint)}.search-clear{background:var(--surface);width:22px;height:22px;color:var(--ink-muted);border-radius:999px;font-size:18px;line-height:1}.sort-wrap{border-bottom:var(--hairline-w) solid var(--hairline-strong);align-self:stretch;align-items:center;gap:10px;display:flex}.sort-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-muted);font-size:10px}.sort-select{font-family:var(--sans);color:var(--ink);cursor:pointer;background:0 0;border:0;outline:none;font-size:14px;font-weight:500}.filter-group{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.filter-group-label{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-right:4px;font-size:10px}.filter-pill{font-family:var(--sans);color:var(--ink-soft);border:var(--hairline-w) solid var(--hairline-strong);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:500;transition:all .15s}.filter-pill:hover{color:var(--ink);border-color:var(--ink)}.filter-pill.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink)}.grid{grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,44px) clamp(20px,2.4vw,36px);padding:clamp(32px,4vw,56px) 0;display:grid}@media (width<=1100px){.grid{grid-template-columns:repeat(3,1fr)}}@media (width<=800px){.grid{grid-template-columns:repeat(2,1fr)}}@media (width<=520px){.grid{grid-template-columns:1fr}}.empty-state{text-align:center;font-family:var(--serif);color:var(--ink-muted);grid-column:1/-1;padding:80px 0;font-size:22px;font-style:italic}.btn-text{font-family:var(--sans);color:var(--ink);border-bottom:1px solid var(--ink);margin-top:12px;padding-bottom:1px;font-size:13px;font-style:normal;font-weight:500}.card{cursor:pointer;outline:none;flex-direction:column;gap:14px;display:flex}.card:focus-visible .card-image-wrap{outline:2px solid var(--accent);outline-offset:4px}.card-image-wrap{aspect-ratio:1;background:var(--surface);transition:transform .3s;position:relative;overflow:hidden}.card:hover .card-image-wrap{transform:translateY(-2px)}.card-index{font-family:var(--mono);letter-spacing:.12em;color:var(--ink-muted);background:color-mix(in oklch, var(--bg) 84%, transparent);border-radius:2px;padding:4px 8px;font-size:10px;position:absolute;top:12px;left:12px}.card-priority-badge{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;background:color-mix(in oklch, var(--bg) 84%, transparent);color:var(--ink-muted);border-radius:2px;padding:4px 10px;font-size:10px;font-weight:600;position:absolute;top:12px;left:12px}.card-priority-badge.priority-grail{background:var(--accent);color:#fff}.card-priority-badge.priority-want{background:color-mix(in oklch, var(--ink) 80%, transparent);color:var(--bg)}.card-priority-badge.priority-nice{background:color-mix(in oklch, var(--bg) 84%, transparent);color:var(--ink-muted)}.card-palette-edge{height:6px;position:absolute;bottom:0;left:0;right:0}.card-body{flex-direction:column;gap:8px;display:flex}.card-meta-top{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);justify-content:space-between;font-size:10px;display:flex}.card-title{font-family:var(--sans);letter-spacing:-.01em;color:var(--ink);margin:0;font-size:17px;font-weight:500;line-height:1.2}.card-colorway{font-family:var(--serif);color:var(--ink-soft);margin:0;font-size:18px;font-style:italic;line-height:1.25}.card-foot{border-top:var(--hairline-w) solid var(--hairline);justify-content:space-between;align-items:center;margin-top:4px;padding-top:12px;display:flex}.card-meta-right{font-family:var(--mono);color:var(--ink-soft);align-items:center;gap:6px;font-size:11px;display:flex}.card-dot{color:var(--ink-faint)}.mini-palette{align-items:center;gap:6px;display:inline-flex}.mini-palette-dot{border:var(--hairline-w) solid color-mix(in oklch, var(--ink) 8%, transparent);border-radius:999px;width:14px;height:14px}.mini-palette-more{font-family:var(--mono);color:var(--ink-faint);margin-left:2px;font-size:10px}.page-foot{border-top:var(--hairline-w) solid var(--hairline);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);justify-content:space-between;align-items:center;gap:24px;padding:28px 0 56px;font-size:11px;display:flex}.page-foot-em{font-family:var(--serif);text-transform:none;letter-spacing:0;color:var(--ink-soft);font-size:16px;font-style:italic}.detail-topbar{border-bottom:var(--hairline-w) solid var(--hairline);justify-content:space-between;align-items:center;padding:24px 0;display:flex}.back-link{font-family:var(--sans);color:var(--ink-soft);cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;font-size:13px;font-weight:500;transition:color .15s;display:inline-flex}.back-link:hover{color:var(--ink)}.detail-pager{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);align-items:center;gap:16px;font-size:11px;display:flex}.pager-btn{color:var(--ink-soft);align-items:center;gap:6px;transition:color .15s;display:inline-flex}.pager-btn:hover{color:var(--ink)}.pager-label{letter-spacing:.12em}.pager-index{border-left:var(--hairline-w) solid var(--hairline);border-right:var(--hairline-w) solid var(--hairline);color:var(--ink);padding:0 14px}.detail-hero{border-bottom:var(--hairline-w) solid var(--hairline);grid-template-columns:1.2fr 1fr;gap:clamp(32px,5vw,80px);padding:clamp(40px,6vw,80px) 0;display:grid}@media (width<=900px){.detail-hero{grid-template-columns:1fr}}.detail-hero-image{aspect-ratio:1;background:var(--surface);position:relative;overflow:hidden}.detail-hero-tags{flex-wrap:wrap;gap:8px;display:flex;position:absolute;top:16px;left:16px;right:16px}.tag{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:color-mix(in oklch, var(--bg) 84%, transparent);border:var(--hairline-w) solid var(--hairline);padding:5px 9px;font-size:10px}.tag-cat{background:var(--accent-soft);color:var(--accent);border-color:#0000}.detail-hero-info{flex-direction:column;align-items:flex-start;padding-top:12px;display:flex}.detail-kicker{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);align-items:center;gap:12px;margin-bottom:24px;font-size:11px;display:flex}.detail-title{font-family:var(--serif);letter-spacing:-.02em;color:var(--ink);margin:0;font-size:clamp(40px,5.4vw,88px);font-weight:400;line-height:.98}.detail-title em{color:var(--accent);font-style:italic}.detail-description{font-family:var(--serif);color:var(--ink-soft);text-wrap:pretty;margin:28px 0 0;font-size:clamp(18px,1.4vw,22px);line-height:1.4}.detail-specs{border-top:var(--hairline-w) solid var(--hairline);grid-template-columns:1fr 1fr;gap:0;width:100%;margin:clamp(32px,4vw,48px) 0 0;display:grid}.detail-specs>div{border-bottom:var(--hairline-w) solid var(--hairline);flex-direction:column;gap:4px;padding:18px 0;display:flex}.detail-specs>div:nth-child(odd){padding-right:16px}.detail-specs>div:nth-child(2n){border-left:var(--hairline-w) solid var(--hairline);padding-left:16px}.detail-specs dt{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);font-size:10px}.detail-specs dd{font-family:var(--serif);color:var(--ink);margin:0;font-size:22px}.detail-specs dd.mono{font-family:var(--mono);font-size:15px}.section-palette,.section-pants,.section-personal{border-bottom:var(--hairline-w) solid var(--hairline);padding:clamp(48px,6vw,88px) 0}.section-head{grid-template-columns:1.2fr 1fr;align-items:end;gap:clamp(24px,4vw,80px);margin-bottom:clamp(32px,4vw,56px);display:grid}@media (width<=900px){.section-head{grid-template-columns:1fr}}.section-head-left{flex-direction:column;gap:10px;display:flex}.section-kicker{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);font-size:11px}.section-title{font-family:var(--serif);letter-spacing:-.02em;color:var(--ink);margin:0;font-size:clamp(36px,4vw,60px);font-weight:400;line-height:1}.section-title em{color:var(--accent);font-style:italic}.section-intro{font-family:var(--serif);color:var(--ink-soft);text-wrap:pretty;max-width:50ch;margin:0;font-size:clamp(16px,1.2vw,19px);line-height:1.45}.palette-strip{flex-direction:column;gap:24px;display:flex}.palette-strip-bar{border:var(--hairline-w) solid var(--hairline);width:100%;height:clamp(140px,18vw,220px);display:flex;overflow:hidden}.palette-strip-seg{cursor:crosshair;border:none;flex:1;padding:0;transition:flex-grow .4s,opacity .2s}.palette-strip-bar:hover .palette-strip-seg{opacity:.7}.palette-strip-bar:hover .palette-strip-seg.is-hovered{opacity:1;flex-grow:6!important}.palette-strip-legend{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;display:grid}.palette-legend-item{border:var(--hairline-w) solid var(--hairline);cursor:default;align-items:center;gap:12px;padding:12px 14px;transition:border-color .15s,background .15s;display:flex}.palette-legend-item.is-hovered{border-color:var(--ink);background:var(--surface)}.palette-legend-chip{border:var(--hairline-w) solid color-mix(in oklch, var(--ink) 10%, transparent);border-radius:4px;width:28px;height:28px}.palette-legend-hex{font-family:var(--mono);letter-spacing:.04em;color:var(--ink);flex:1;font-size:13px}.palette-legend-pct{font-family:var(--mono);color:var(--ink-muted);font-size:11px}.pants-grid{border-top:var(--hairline-w) solid var(--hairline);border-left:var(--hairline-w) solid var(--hairline);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;display:grid}.pants-card{border-right:var(--hairline-w) solid var(--hairline);border-bottom:var(--hairline-w) solid var(--hairline);background:var(--bg);flex-direction:column;gap:22px;padding:28px 28px 32px;transition:background .2s;display:flex}.pants-card:hover{background:var(--surface)}.pants-card-head{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.pants-rank{font-family:var(--mono);letter-spacing:.12em;color:var(--ink-muted);padding-top:6px;font-size:11px}.pants-swatch-wrap{flex-direction:column;align-items:center;gap:6px;display:flex}.pants-swatch{justify-content:center;align-items:center;width:84px;height:110px;display:flex}.pants-shape{width:100%;height:100%}.pants-hex{font-family:var(--mono);letter-spacing:.06em;color:var(--ink-muted);font-size:10px}.pants-card-body{flex-direction:column;gap:8px;display:flex}.pants-label{font-family:var(--serif);color:var(--ink);letter-spacing:-.01em;margin:0;font-size:26px;font-style:italic;font-weight:400;line-height:1.05}.pants-reason{font-family:var(--sans);color:var(--ink-soft);text-wrap:pretty;margin:0;font-size:14px;line-height:1.5}.personal-grid{border-top:var(--hairline-w) solid var(--hairline);border-left:var(--hairline-w) solid var(--hairline);grid-template-columns:repeat(4,1fr);gap:0;display:grid}@media (width<=900px){.personal-grid{grid-template-columns:repeat(2,1fr)}}.personal-card{border-right:var(--hairline-w) solid var(--hairline);border-bottom:var(--hairline-w) solid var(--hairline);flex-direction:column;gap:10px;padding:24px 24px 28px;display:flex}.personal-card dt{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);font-size:10px}.personal-card dd{font-family:var(--serif);color:var(--ink);margin:0;font-size:22px}.personal-card dd.big-num{font-size:clamp(28px,3vw,40px);line-height:1}.personal-delta{font-family:var(--mono);color:var(--ink-muted);font-size:11px}.personal-card-notes{grid-column:span 4}@media (width<=900px){.personal-card-notes{grid-column:span 2}}.notes-text{max-width:60ch;font-style:italic;line-height:1.35;font-family:var(--serif)!important;color:var(--ink-soft)!important;font-size:clamp(20px,1.6vw,26px)!important}.detail-foot{grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,80px);padding:clamp(40px,6vw,80px) 0 80px;display:grid}.big-pager{text-align:left;border-top:var(--hairline-w) solid var(--hairline-strong);flex-direction:column;gap:10px;padding:28px 0;transition:opacity .15s;display:flex}.big-pager:hover{opacity:.7}.big-pager-right{text-align:right;align-items:flex-end}.big-pager-kicker{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);font-size:11px}.big-pager-title{font-family:var(--serif);color:var(--ink);margin-top:4px;font-size:clamp(28px,3.4vw,48px);line-height:1}.big-pager-color{font-family:var(--serif);color:var(--ink-soft);margin-top:6px;font-size:clamp(18px,1.4vw,22px);font-style:italic}.card-image-wrap img,.detail-hero-image img{object-fit:scale-down;width:100%;height:100%;display:block}.stats-charts{flex-direction:column;display:flex}.stats-charts .section-palette{border-bottom:var(--hairline-w) solid var(--hairline)}.stats-grid-2col{grid-template-columns:1fr 1fr;gap:0;display:grid}.stats-grid-2col>:nth-child(odd){border-right:var(--hairline-w) solid var(--hairline);padding-right:clamp(16px,3vw,40px)}.stats-grid-2col>:nth-child(2n){padding-left:clamp(16px,3vw,40px)}@media (width<=900px){.stats-grid-2col{grid-template-columns:1fr}.stats-grid-2col>:nth-child(odd){border-right:none;padding-right:0}.stats-grid-2col>:nth-child(2n){padding-left:0}}.recharts-tooltip-wrapper{font-family:var(--sans)!important;font-size:13px!important}.pairing-bar{border-bottom:var(--hairline-w) solid var(--hairline);flex-direction:column;gap:16px;padding:24px 0;display:flex}.pairing-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.pairing-title{font-family:var(--serif);color:var(--ink);margin:0;font-size:20px;font-style:italic}.pairing-subtitle{font-family:var(--sans);color:var(--ink-muted);font-size:13px}.pairing-pants-grid{flex-wrap:wrap;gap:10px;display:flex}.pairing-swatch{border:var(--hairline-w) solid var(--hairline);cursor:pointer;border-radius:6px;flex-direction:column;align-items:center;gap:6px;min-width:70px;padding:8px 12px 10px;transition:all .15s;display:flex}.pairing-swatch:hover{border-color:var(--ink-muted);background:var(--surface)}.pairing-swatch.is-active{border-color:var(--accent);background:var(--accent-soft)}.pairing-swatch-dot{border:var(--hairline-w) solid color-mix(in oklch, var(--ink) 10%, transparent);border-radius:4px;width:28px;height:28px}.pairing-swatch-label{font-family:var(--mono);letter-spacing:.06em;color:var(--ink-muted);text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:72px;font-size:9px;overflow:hidden}.pairing-custom{border:var(--hairline-w) solid var(--hairline);border-radius:6px;align-items:center;gap:10px;min-width:70px;padding:8px 12px;display:flex}.pairing-color-input{cursor:pointer;background:0 0;border:none;border-radius:4px;width:28px;height:28px;padding:0}.pairing-color-input::-webkit-color-swatch-wrapper{padding:0}.pairing-color-input::-webkit-color-swatch{border:var(--hairline-w) solid color-mix(in oklch, var(--ink) 10%, transparent);border-radius:4px}.pairing-match-count{font-family:var(--mono);color:var(--accent);margin-left:auto;font-size:11px}
