.archive-main { background: var(--paper); color: var(--ink); }
.archive-hero { padding-top: 100px; padding-bottom: 95px; }
.archive-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 11%; align-items: end; margin-top: 30px; }
.archive-hero h1 { margin: 0; font-size: clamp(48px, 6vw, 83px); line-height: 1.1; letter-spacing: -.09em; font-weight: 900; }
.archive-hero h1 em { color: var(--clay-dark); }
.archive-hero-grid > p { max-width: 360px; color: var(--muted); font-size: 14px; line-height: 2.15; border-right: 2px solid var(--clay); padding-right: 18px; margin: 0 0 7px; }
.archive-legend { display: flex; gap: 25px; border-top: 1px solid var(--line); padding-top: 19px; margin-top: 70px; color: var(--muted); font-size: 10px; }
.archive-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.dot-before { background: #8d938a; }.dot-process { background: var(--clay); }.dot-after { background: var(--ink); }
.archive-project { padding-bottom: 115px; }
.archive-project--dark { background: var(--ink); color: var(--paper); max-width: none; padding: 90px max(40px, calc((100vw - 1160px) / 2)) 115px; }
.archive-project--dark .archive-project-head { border-color: var(--line-light); }
.archive-project--dark .archive-category, .archive-project--dark .archive-facts small, .archive-project--dark .archive-intro > p { color: #aaa9a1; }
.archive-project--dark .archive-stage { border-color: var(--line-light); }
.archive-project--dark .archive-stage-head p, .archive-project--dark .stage-count { color: #aaa9a1; }
.archive-project--dark .archive-thumb > span:last-child { color: #aaa9a1; }
.archive-project--dark .archive-number, .archive-project--dark .archive-label { color: var(--cream); }
.archive-project--dark .archive-intro .arrow-link { color: var(--cream); border-color: var(--line-light); }
.archive-project-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; border-top: 1px solid var(--line); padding-top: 26px; }
.archive-number, .archive-label { color: var(--clay-dark); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .14em; }
.archive-project h2 { margin: 19px 0 10px; font-size: clamp(36px, 4vw, 57px); line-height: 1.25; letter-spacing: -.07em; }
.archive-category { color: var(--muted); font-size: 11px; margin: 0; }
.archive-facts { display: flex; gap: 35px; max-width: 480px; }
.archive-facts > div { min-width: 140px; border-right: 1px solid var(--line); padding-right: 15px; }
.archive-facts small { display: block; color: var(--clay-dark); font-size: 9px; margin-bottom: 7px; }
.archive-facts strong { display: block; font-size: 11px; line-height: 1.8; }
.archive-intro { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding: 29px 0 50px; }
.archive-intro > p { max-width: 540px; color: var(--muted); font-size: 13px; line-height: 2.1; margin: 0; }
.archive-intro .arrow-link { margin-top: 0; white-space: nowrap; }
.comparison-block { display: grid; grid-template-columns: .64fr 1.36fr; align-items: center; gap: 9%; padding-bottom: 60px; }
.comparison-block h3 { margin: 14px 0 10px; font-size: 25px; }
.comparison-block p { color: var(--muted); max-width: 270px; font-size: 11px; line-height: 2; margin: 0; }
.compare { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 8; background: var(--paper-2); }
.compare > img, .compare-before img { width: 100%; height: 100%; display: block; object-fit: cover; }
.compare-after { position: absolute; inset: 0; z-index: 0; }
.compare-before { position: absolute; inset: 0 auto 0 0; width: 50%; z-index: 1; overflow: hidden; direction: ltr; }
.compare-before img { width: 100%; max-width: none; }
.compare input { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare-label { position: absolute; z-index: 3; top: 15px; padding: 5px 8px; color: white; background: rgba(22, 28, 25, .62); font-size: 9px; }
.compare-label-before { left: 15px; }.compare-label-after { right: 15px; }
.compare-handle { position: absolute; z-index: 3; top: 0; bottom: 0; right: 50%; width: 2px; background: white; box-shadow: 0 0 0 1px rgba(0,0,0,.16); pointer-events: none; }
.compare-handle::after { content: '↔'; position: absolute; top: 50%; right: 50%; width: 34px; height: 34px; display: grid; place-content: center; transform: translate(50%, -50%); border: 1px solid white; border-radius: 50%; background: var(--clay); color: white; font-family: Arial, sans-serif; }
.stage-list { display: grid; gap: 58px; }
.archive-stage { border-top: 1px solid var(--line); padding-top: 22px; }
.archive-stage-head { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 20px; }
.archive-stage-head h3 { margin: 9px 0 5px; font-size: 23px; }
.archive-stage-head p { color: var(--muted); font-size: 11px; margin: 0; }
.stage-count { color: var(--muted); font-size: 10px; }
.archive-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.archive-thumb { min-width: 0; border: 0; background: none; color: inherit; text-align: right; padding: 0; }
.archive-thumb.is-extra { display: none; }
.archive-gallery.show-all .archive-thumb.is-extra { display: block; }
.archive-thumb-image { display: block; position: relative; overflow: hidden; aspect-ratio: 1.1 / 1; background: var(--paper-2); }
.archive-thumb-image::after { content: '@bazsazi.aminnoara'; position: absolute; inset: auto auto 9px 10px; padding: 4px 6px; color: rgba(255,255,255,.83); background: rgba(20,26,24,.46); font: 8px 'DM Mono', monospace; direction: ltr; }
.archive-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.8); transition: transform .5s ease, filter .3s; }
.archive-thumb:hover img { transform: scale(1.05); filter: saturate(1); }
.archive-thumb > span:last-child { display: block; color: var(--muted); font-size: 9px; margin-top: 8px; }
.show-more { justify-self: start; border: 1px solid var(--line); background: none; color: inherit; padding: 9px 14px; font-size: 10px; margin-top: 17px; }
.show-more:hover { border-color: var(--clay); color: var(--clay-dark); }
.archive-project--note { padding-top: 18px; }
.archive-project--note .archive-project-head { margin-bottom: 36px; }
.charbagh-note { display: grid; grid-template-columns: 80px 1fr; gap: 35px; border: 1px solid var(--line); padding: 40px 45px; background: #e9e4dc; }
.note-symbol { color: var(--clay-dark); font: 24px 'DM Mono', monospace; }
.charbagh-note h3 { margin: 0 0 12px; font-size: 22px; }.charbagh-note p { max-width: 720px; color: var(--muted); font-size: 12px; line-height: 2.1; margin: 0; }.charbagh-note .button { margin-top: 24px; }
.archive-cta { background: var(--clay); color: var(--paper); padding: 80px 0; }.archive-cta .container { display: flex; justify-content: space-between; align-items: end; gap: 35px; }.archive-cta h2 { margin: 16px 0 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.35; }.archive-cta h2 em { color: var(--ink); }.archive-cta .archive-label { color: #fbe8d5; }.archive-cta .button-light { background: var(--ink); }
.lightbox { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: 30px; background: rgba(17, 20, 18, .88); }.lightbox.open { display: grid; }.lightbox img { max-width: min(92vw, 1000px); max-height: 88vh; object-fit: contain; }.lightbox-close { position: fixed; top: 22px; left: 25px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.5); background: var(--ink); color: white; font-size: 28px; line-height: 1; }
@media (max-width: 760px) {
  .archive-hero { padding-top: 64px; padding-bottom: 65px; }.archive-hero-grid { display: block; margin-top: 25px; }.archive-hero h1 { font-size: 53px; }.archive-hero-grid > p { margin-top: 28px; }.archive-legend { margin-top: 45px; gap: 13px; font-size: 9px; }
  .archive-project, .archive-project--dark { padding-bottom: 75px; padding-top: 65px; }.archive-project--dark { padding-left: 20px; padding-right: 20px; }.archive-project-head { display: block; }.archive-facts { margin-top: 25px; gap: 12px; }.archive-facts > div { min-width: 0; flex: 1; }.archive-intro { display: block; padding-bottom: 37px; }.archive-intro .arrow-link { margin-top: 22px; }.comparison-block { display: block; }.comparison-block > div:first-child { margin-bottom: 23px; }.compare { aspect-ratio: 1 / 1.05; }.archive-gallery { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; }.archive-stage-head { display: block; }.stage-count { display: block; margin-top: 12px; }.charbagh-note { display: block; padding: 29px 23px; }.note-symbol { display: block; margin-bottom: 22px; }.archive-cta .container { display: block; }.archive-cta .button { margin-top: 29px; }
}