:root { --ink: #1d1a1f; --ink-soft: #69616a; --paper: #f7f1ea; --paper-deep: #ebe0d6; --accent: #c66752; --accent-light: #f0b49e; --line: rgba(29, 26, 31, .16); --serif: Georgia, 'Times New Roman', serif; --mono: 'SFMono-Regular', Consolas, monospace; }
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; font-family: Arial, 'Microsoft YaHei', sans-serif; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.wardrobe-site { overflow: hidden; }
.wardrobe-topbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; height: 78px; padding: 0 clamp(24px, 7vw, 112px); }
.wardrobe-brand { align-items: center; display: inline-flex; font-size: 22px; font-weight: 700; letter-spacing: -.08em; }
.wardrobe-brand > span:last-child { color: var(--accent); }
.brand-mark { display: inline-flex; gap: 3px; margin-right: 9px; transform: rotate(-18deg); }
.brand-mark i { background: var(--accent); display: block; height: 13px; width: 3px; }
.brand-mark i:nth-child(2) { background: var(--ink); height: 18px; }
.brand-mark i:nth-child(3) { height: 10px; }
.wardrobe-meta { color: var(--ink-soft); display: flex; font-family: var(--mono); font-size: 10px; gap: 25px; letter-spacing: .06em; margin-left: auto; text-transform: uppercase; }
.back-link { border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: 10px; letter-spacing: .05em; margin-left: 38px; padding-bottom: 4px; text-transform: uppercase; }
.back-link span { color: var(--accent); padding-left: 5px; }
.wardrobe-hero { background: var(--paper-deep); min-height: 560px; padding: 105px clamp(24px, 12vw, 190px) 58px; position: relative; }
.hero-copy { max-width: 690px; position: relative; z-index: 1; }
.eyebrow, .section-kicker, .hero-index, .look-category, .look-number, .look-image-count, .dialog-facts, .viewer-caption { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow { color: var(--ink-soft); margin: 0 0 33px; }
.live-dot { background: var(--accent); border-radius: 50%; display: inline-block; height: 7px; margin-right: 7px; width: 7px; }
h1, h2, p { margin-top: 0; }
h1 { font-family: var(--serif); font-size: clamp(53px, 8.1vw, 121px); font-weight: 500; letter-spacing: -.09em; line-height: .93; margin-bottom: 31px; }
h1 em, h2 em { color: var(--accent); font-style: normal; }
.hero-copy > p:last-child { color: var(--ink-soft); font-size: 16px; line-height: 1.85; max-width: 520px; }
.hero-stamp { align-items: center; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); display: flex; flex-direction: column; height: 215px; justify-content: center; position: absolute; right: 13vw; top: 125px; transform: rotate(10deg); width: 215px; }
.hero-stamp span { font-family: var(--serif); font-size: 76px; letter-spacing: -.1em; line-height: .8; }
.hero-stamp small { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; line-height: 1.5; margin-top: 13px; text-align: center; text-transform: uppercase; }
.hero-stamp i { border: 1px solid var(--accent-light); border-radius: 50%; height: 244px; position: absolute; width: 244px; }
.hero-index { align-items: center; bottom: 28px; color: var(--ink-soft); display: flex; gap: 14px; left: clamp(24px, 7vw, 112px); position: absolute; right: clamp(24px, 7vw, 112px); }
.hero-index span:first-child { color: var(--accent); }.hero-index span:last-child { background: var(--line); flex: 1; height: 1px; }
.look-section { padding: 104px clamp(24px, 7vw, 112px) 125px; }
.section-head { align-items: end; display: flex; justify-content: space-between; }
.section-kicker { color: var(--ink-soft); margin-bottom: 19px; }.section-kicker span:first-child { color: var(--accent); margin-right: 13px; }
h2 { font-family: var(--serif); font-size: clamp(51px, 6.8vw, 94px); font-weight: 500; letter-spacing: -.1em; line-height: .9; margin-bottom: 0; }
.section-note { color: var(--ink-soft); font-size: 13px; line-height: 1.8; margin: 0 0 5px; text-align: right; }
.look-toolbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 26px; margin-top: 78px; padding-bottom: 18px; }
.search { align-items: center; border-bottom: 1px solid var(--ink); display: flex; min-width: min(350px, 100%); padding: 0 0 10px; }.search > span { color: var(--accent); font-size: 23px; margin-right: 10px; }.search input { background: transparent; border: 0; color: var(--ink); flex: 1; font-size: 13px; outline: 0; }.search kbd { color: var(--ink-soft); font-family: var(--mono); font-size: 10px; }
.chapter-filters { display: flex; flex-wrap: wrap; gap: 8px; }.filter-button { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); cursor: pointer; font-family: var(--mono); font-size: 10px; padding: 8px 11px; text-transform: uppercase; transition: .2s ease; }.filter-button:hover, .filter-button.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sort-control { align-items: center; display: flex; gap: 9px; margin-left: auto; }.sort-control span { color: var(--ink-soft); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }.sort-control select { background: var(--paper); border: 0; color: var(--ink); font-family: var(--mono); font-size: 10px; outline: 0; text-transform: uppercase; }
.result-count { color: var(--accent); font-family: var(--mono); font-size: 10px; white-space: nowrap; }
.look-grid { display: grid; gap: 9px; grid-template-columns: repeat(4, 1fr); margin-top: 27px; }.look-card { background: var(--paper-deep); border: 0; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; min-width: 0; padding: 0; text-align: left; transition: transform .25s ease, box-shadow .25s ease; }.look-card:hover { box-shadow: 0 14px 30px rgba(29,26,31,.12); transform: translateY(-5px); }.look-card-featured { grid-column: span 2; grid-row: span 2; }
.look-cover { background: #ddd2c9; display: block; overflow: hidden; position: relative; }.look-image-pair { aspect-ratio: 1 / 1.18; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }.look-image-pair img { display: block; height: 100%; min-width: 0; object-fit: cover; transition: transform .5s ease; width: 100%; }.look-card-featured .look-image-pair { aspect-ratio: 1.25 / 1; }.look-card:hover .look-image-pair img { transform: scale(1.04); }.look-image-tags { bottom: 12px; display: flex; gap: 5px; left: 13px; position: absolute; }.look-image-tags span { background: rgba(29,26,31,.72); color: white; font-family: var(--mono); font-size: 8px; letter-spacing: .05em; padding: 5px 6px; text-transform: uppercase; }.look-number, .look-image-count { color: white; left: 13px; position: absolute; text-shadow: 0 1px 5px rgba(0,0,0,.5); top: 12px; }.look-image-count { left: auto; right: 13px; }
.look-copy { display: flex; flex-direction: column; min-height: 155px; padding: 16px 15px 15px; position: relative; }.look-category { color: var(--accent); font-size: 9px; margin-bottom: 11px; }.look-copy strong { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -.05em; line-height: 1.12; max-width: 90%; }.look-description { color: var(--ink-soft); font-size: 11px; line-height: 1.55; margin-top: 9px; max-width: 90%; }.look-arrow { bottom: 15px; color: var(--accent); font-size: 18px; position: absolute; right: 15px; }.no-results { color: var(--ink-soft); padding: 60px 0; text-align: center; }
.wardrobe-note { background: var(--ink); color: var(--paper); padding: 105px clamp(24px, 18vw, 280px) 120px; }.wardrobe-note .section-kicker { color: #aaa1a8; }.wardrobe-note .section-kicker span:first-child { color: var(--accent-light); }.wardrobe-note blockquote { font-family: var(--serif); font-size: clamp(37px, 5vw, 70px); letter-spacing: -.08em; line-height: 1.05; margin: 55px 0 38px; }.wardrobe-note > p:last-child { color: #b8afb5; font-size: 14px; line-height: 1.9; max-width: 470px; }
.wardrobe-footer { align-items: center; background: var(--ink); border-top: 1px solid rgba(247,241,234,.2); color: #aaa1a8; display: flex; font-family: var(--mono); font-size: 9px; justify-content: space-between; letter-spacing: .06em; padding: 25px clamp(24px, 7vw, 112px); text-transform: uppercase; }.wardrobe-footer .wardrobe-brand { color: var(--paper); font-family: Arial, sans-serif; font-size: 19px; letter-spacing: -.08em; }.wardrobe-footer .brand-mark i:nth-child(2) { background: var(--paper); }
.look-dialog, .image-viewer { background: var(--paper); border: 0; box-shadow: 0 24px 80px rgba(0,0,0,.28); color: var(--ink); max-height: 90vh; max-width: 920px; padding: 0; width: min(920px, calc(100% - 32px)); }.look-dialog::backdrop, .image-viewer::backdrop { background: rgba(29,26,31,.72); backdrop-filter: blur(4px); }.dialog-close, .viewer-close { background: var(--ink); border: 0; color: var(--paper); cursor: pointer; font-size: 20px; height: 38px; line-height: 1; position: absolute; right: 15px; top: 15px; width: 38px; z-index: 2; }.dialog-hero { background: var(--paper-deep); display: grid; grid-template-columns: 1fr 1fr; min-height: 300px; }.dialog-hero img { height: 100%; max-height: 420px; object-fit: cover; width: 100%; }.dialog-hero > div { align-self: end; padding: 35px; }.dialog-hero > div > span { color: var(--accent); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }.dialog-hero h2 { font-size: clamp(36px, 5vw, 62px); margin-top: 18px; }.dialog-body { display: flex; gap: 40px; justify-content: space-between; padding: 33px 35px 25px; }.dialog-description { font-family: var(--serif); font-size: 22px; letter-spacing: -.04em; line-height: 1.35; margin-bottom: 13px; }.dialog-note { color: var(--ink-soft); font-size: 12px; line-height: 1.7; max-width: 390px; }.dialog-facts { color: var(--ink-soft); display: flex; flex-direction: column; gap: 11px; min-width: 170px; text-align: right; }.dialog-gallery { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); max-height: 55vh; overflow-y: auto; padding: 0 35px 35px; }.dialog-gallery button { background: var(--paper-deep); border: 0; cursor: pointer; padding: 0; position: relative; text-align: left; }.dialog-gallery img { aspect-ratio: 3 / 4; display: block; object-fit: cover; width: 100%; }.dialog-gallery span { bottom: 12px; color: white; font-family: var(--mono); font-size: 10px; left: 13px; position: absolute; text-shadow: 0 1px 5px rgba(0,0,0,.5); text-transform: uppercase; }.image-viewer { background: var(--ink); max-width: 1100px; width: calc(100% - 70px); }.image-viewer figure { margin: 0; text-align: center; }.image-viewer img { display: block; height: min(78vh, 760px); margin: auto; max-width: 100%; object-fit: contain; width: 100%; }.viewer-close { background: var(--paper); color: var(--ink); }.viewer-caption { color: var(--paper); display: flex; justify-content: space-between; padding: 15px 24px 18px; }
@media (max-width: 900px) { .wardrobe-meta { display: none; }.hero-stamp { opacity: .55; right: 6vw; }.look-toolbar { align-items: flex-start; flex-wrap: wrap; }.sort-control { margin-left: 0; }.look-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .wardrobe-topbar { height: 68px; }.back-link { font-size: 9px; margin-left: auto; }.wardrobe-hero { min-height: 670px; padding-top: 80px; }.hero-stamp { right: -35px; top: 360px; transform: scale(.7) rotate(10deg); }.hero-copy > p:last-child { font-size: 14px; max-width: 290px; }.section-head { align-items: flex-start; display: block; }.section-note { margin-top: 28px; text-align: left; }.look-section { padding-bottom: 80px; padding-top: 80px; }.look-toolbar { gap: 18px; margin-top: 55px; }.search { min-width: 100%; }.chapter-filters { order: 3; }.result-count { margin-left: auto; }.look-grid { grid-template-columns: repeat(2, 1fr); }.look-card-featured { grid-column: span 2; grid-row: span 1; }.look-card-featured .look-image-pair { aspect-ratio: 1 / 1.05; }.look-copy { min-height: 145px; padding: 13px; }.look-copy strong { font-size: 17px; }.look-description { font-size: 10px; }.wardrobe-note { padding-bottom: 85px; padding-top: 80px; }.wardrobe-footer { align-items: flex-start; flex-direction: column; gap: 10px; }.dialog-hero { display: block; }.dialog-hero img { max-height: 280px; }.dialog-hero > div { padding: 25px; }.dialog-body { display: block; padding: 25px; }.dialog-facts { margin-top: 25px; text-align: left; }.dialog-gallery { padding: 0 25px 25px; }.image-viewer { width: calc(100% - 20px); } }