@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap');

:root {
  --paper: #f3f0e8;
  --paper-deep: #e8e3d8;
  --ink: #121513;
  --muted: #62645e;
  --line: rgba(18, 21, 19, .18);
  --forest: #17382d;
  --blue: #2046d8;
  --orange: #ff6027;
  --lime: #cafa1e;
  --display: "DM Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--display); }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }

.shell { width: min(100% - 48px, 1440px); margin: 0 auto; }
.eyebrow { margin: 0; color: var(--muted); font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.eyebrow--light { color: rgba(243, 240, 232, .72); }
.number { color: var(--orange); font: 500 12px/1 var(--mono); letter-spacing: .03em; }
.split-rule { border-top: 1px solid var(--line); }
.skip-link { position: fixed; z-index: 100; left: 12px; top: -64px; padding: 12px 16px; background: var(--lime); color: var(--ink); font-weight: 700; }
.skip-link:focus { top: 12px; }

.site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(243, 240, 232, .94); }
.header-inner { height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { font-size: 16px; font-weight: 800; letter-spacing: -.05em; }
.wordmark span { color: var(--orange); }
.main-nav { display: flex; align-items: center; gap: 26px; font-size: 13px; font-weight: 600; }
.main-nav a { position: relative; padding: 7px 0; }
.main-nav a[aria-current="page"]::after, .main-nav a:hover::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--ink); }
.nav-contact { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 700; }
.menu-button { display: none; padding: 8px 0 8px 12px; border: 0; background: transparent; font-size: 12px; font-weight: 800; }

.hero { min-height: calc(100svh - 75px); display: grid; grid-template-columns: minmax(0, .95fr) minmax(500px, 1.05fr); border-bottom: 1px solid var(--line); }
.hero-copy { display: flex; flex-direction: column; justify-content: space-between; min-height: 740px; padding: 36px clamp(24px, 5vw, 84px) 44px max(24px, calc((100vw - 1440px) / 2)); border-right: 1px solid var(--line); }
.hero-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.hero-meta p:last-child { margin: 0; max-width: 180px; text-align: right; font-size: 12px; line-height: 1.55; }
.hero-title { max-width: 700px; margin: 44px 0; font-size: clamp(70px, 10vw, 164px); font-weight: 800; line-height: .81; letter-spacing: -.105em; }
.hero-title em { display: block; color: var(--forest); font-size: .27em; font-style: normal; letter-spacing: -.06em; line-height: 1.05; }
.hero-footer { display: flex; justify-content: space-between; align-items: end; gap: 24px; border-top: 1px solid var(--line); padding-top: 16px; }
.hero-footer p { max-width: 310px; margin: 0; font-size: 15px; line-height: 1.55; }
.text-link { display: inline-flex; gap: 9px; align-items: center; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.text-link:hover { color: var(--blue); }
.text-link .arrow { font-family: var(--display); font-size: 18px; }

.hero-visual { position: relative; min-height: 740px; overflow: hidden; background: var(--forest); isolation: isolate; }
.hero-visual::before { content: ""; position: absolute; inset: 0; background: var(--paper); clip-path: polygon(73% 0, 100% 0, 100% 100%, 86% 100%); z-index: -1; }
.hero-project-window { position: absolute; z-index: 1; top: 15.3%; left: 50.5%; width: 39.5%; aspect-ratio: 1.88 / 1; overflow: hidden; background: var(--lime); }
.hero-project-window img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; mix-blend-mode: multiply; }
.navigator { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 48%; pointer-events: none; }
.navigator-tag { position: absolute; z-index: 3; top: 42px; right: 28px; display: grid; gap: 6px; min-width: 140px; padding: 12px; background: var(--paper); color: var(--ink); }
.navigator-tag strong { font-size: 13px; }
.navigator-tag span { font: 500 10px var(--mono); color: var(--muted); }
.hero-caption { position: absolute; z-index: 3; right: 30px; bottom: 25px; max-width: 210px; font: 500 11px/1.55 var(--mono); color: var(--paper); }

.route-band { position: relative; padding: 40px 0 60px; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--paper-deep); }
.route-band .shell { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
.route-band h2 { max-width: 400px; margin: 8px 0 0; font-size: clamp(26px, 3vw, 44px); letter-spacing: -.06em; line-height: 1.03; }
.route-band .route-visual { width: min(65%, 900px); margin: 25px -10% -10px 0; mix-blend-mode: multiply; }

.section { padding: clamp(72px, 10vw, 148px) 0; }
.section-header { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: end; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.section-title { margin: 0; font-size: clamp(42px, 6vw, 88px); font-weight: 800; letter-spacing: -.085em; line-height: .86; }
.section-intro { max-width: 430px; margin: 0 0 3px auto; font-size: 16px; line-height: 1.55; }

.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--line); }
.work-card { position: relative; min-height: 485px; padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.work-card:first-child, .work-card:nth-child(2) { border-top: 0; }
.work-card__image { position: absolute; inset: 0; overflow: hidden; background: var(--paper-deep); }
.work-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.work-card:hover .work-card__image img { transform: scale(1.045); }
.work-card__scrim { position: absolute; inset: 0; background: rgba(18, 21, 19, .15); }
.work-card__meta { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; color: var(--paper); font: 500 11px var(--mono); text-shadow: 0 1px 10px rgba(0,0,0,.3); }
.work-card__name { position: absolute; z-index: 1; bottom: 18px; left: 18px; right: 18px; display: flex; align-items: end; justify-content: space-between; gap: 20px; color: var(--paper); }
.work-card__name h3 { margin: 0; font-size: clamp(28px, 3.4vw, 54px); line-height: .9; letter-spacing: -.08em; }
.work-card__name span { display: grid; width: 34px; height: 34px; place-items: center; background: var(--lime); color: var(--ink); font-size: 20px; }

.archive { background: var(--ink); color: var(--paper); }
.archive .section-header { border-color: rgba(243, 240, 232, .24); }
.archive .section-title { color: var(--lime); }
.archive .section-intro { color: rgba(243, 240, 232, .76); }
.archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid rgba(243, 240, 232, .24); }
.archive-card { min-height: 310px; padding: 15px; border-right: 1px solid rgba(243, 240, 232, .24); border-bottom: 1px solid rgba(243, 240, 232, .24); }
.archive-card img { width: 100%; height: 230px; object-fit: cover; margin-bottom: 14px; }
.archive-card h3 { margin: 0; font-size: 16px; letter-spacing: -.03em; }
.archive-card p { margin: 5px 0 0; color: rgba(243, 240, 232, .64); font: 500 10px var(--mono); }

.about-strip { display: grid; grid-template-columns: 1.25fr .75fr; background: var(--blue); color: white; }
.about-strip__copy { padding: clamp(52px, 7vw, 110px) max(24px, calc((100vw - 1440px) / 2)) clamp(52px, 7vw, 110px) clamp(24px, 7vw, 108px); }
.about-strip h2 { max-width: 740px; margin: 20px 0 32px; font-size: clamp(40px, 5.5vw, 82px); letter-spacing: -.08em; line-height: .91; }
.about-strip p { max-width: 460px; margin: 0; font-size: 16px; line-height: 1.65; }
.about-strip__stats { display: grid; align-content: center; gap: 0; border-left: 1px solid rgba(255,255,255,.35); }
.about-strip__stats div { padding: 27px 30px; border-bottom: 1px solid rgba(255,255,255,.35); }
.about-strip__stats strong { display: block; font-size: 24px; letter-spacing: -.06em; }
.about-strip__stats span { display: block; margin-top: 7px; font: 500 11px var(--mono); opacity: .8; }

.page-hero { padding: clamp(88px, 13vw, 180px) 0 64px; border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 930px; margin: 22px 0 0; font-size: clamp(68px, 11.5vw, 180px); letter-spacing: -.11em; line-height: .77; }
.page-hero p { max-width: 550px; margin: 34px 0 0 auto; font-size: 16px; line-height: 1.6; }
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 36px; }
.filter { padding: 9px 13px; border: 1px solid var(--line); background: transparent; cursor: pointer; font: 500 11px var(--mono); }
.filter:hover, .filter.is-active { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.all-work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; border-left: 1px solid var(--line); }
.all-work-card { grid-column: span 6; min-height: 400px; padding: 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.all-work-card--small { grid-column: span 4; min-height: 330px; }
.all-work-card.is-hidden { display: none; }
.all-work-card img { width: 100%; height: 320px; object-fit: cover; background: var(--paper-deep); }
.all-work-card--small img { height: 240px; }
.all-work-card__meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 13px; }
.all-work-card h2 { margin: 0; font-size: 18px; letter-spacing: -.04em; }
.all-work-card p { margin: 4px 0 0; font: 500 10px var(--mono); color: var(--muted); }

.bio-layout { display: grid; grid-template-columns: .8fr 1.2fr; border-left: 1px solid var(--line); }
.bio-photo { position: relative; min-height: 610px; display: grid; place-items: end center; overflow: hidden; isolation: isolate; background: var(--forest); border-right: 1px solid var(--line); }
.bio-photo::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 54% 66%, rgba(189, 229, 0, .14), transparent 47%), linear-gradient(145deg, #164638 0%, var(--forest) 58%, #0d2e25 100%); }
.bio-photo img { display: block; width: min(94%, 580px); max-height: 610px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .2)); }
.bio-content { padding: clamp(34px, 6vw, 88px); }
.bio-content h1 { max-width: 600px; margin: 13px 0 44px; font-size: clamp(40px, 5.5vw, 82px); letter-spacing: -.085em; line-height: .9; }
.bio-content > p { max-width: 640px; font-size: 17px; line-height: 1.7; }
.profile-list { margin: 52px 0 0; border-top: 1px solid var(--line); }
.profile-list div { display: grid; grid-template-columns: 125px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.profile-list dt { font: 500 11px var(--mono); color: var(--muted); }
.profile-list dd { margin: 0; font-size: 14px; line-height: 1.55; }
.timeline { border-top: 1px solid var(--line); }
.timeline-item { display: grid; grid-template-columns: 150px 1fr; gap: 28px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.timeline-item time { font: 500 11px var(--mono); color: var(--orange); }
.timeline-item h3 { margin: 0; font-size: 19px; letter-spacing: -.04em; }
.timeline-item p { max-width: 670px; margin: 8px 0 0; font-size: 14px; line-height: 1.6; }

.contact-card { display: grid; grid-template-columns: 1.3fr .7fr; min-height: 560px; background: var(--forest); color: var(--paper); }
.contact-card__main { padding: clamp(38px, 7vw, 105px); }
.contact-card h1 { max-width: 780px; margin: 22px 0 44px; color: var(--lime); font-size: clamp(54px, 8.5vw, 130px); letter-spacing: -.1em; line-height: .78; }
.contact-card .text-link { color: var(--lime); }
.contact-list { display: grid; align-content: center; border-left: 1px solid rgba(243,240,232,.3); }
.contact-list a, .contact-list div { display: block; padding: 25px 30px; border-bottom: 1px solid rgba(243,240,232,.3); }
.contact-list span { display: block; margin-bottom: 10px; color: rgba(243,240,232,.65); font: 500 10px var(--mono); }
.contact-list strong { font-size: 18px; letter-spacing: -.03em; }

.case-layout { display: grid; grid-template-columns: .82fr 1.18fr; border-top: 1px solid var(--line); }
.case-side { padding: 30px; border-right: 1px solid var(--line); }
.case-side h1 { margin: 12px 0 32px; font-size: clamp(46px, 6vw, 86px); letter-spacing: -.09em; line-height: .85; }
.case-side p { margin: 0; font-size: 15px; line-height: 1.65; }
.case-meta { margin-top: 55px; border-top: 1px solid var(--line); }
.case-meta div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.case-meta span { font: 500 10px var(--mono); color: var(--muted); }
.case-media { display: grid; gap: 0; }
.case-media img { width: 100%; min-height: 440px; object-fit: cover; border-bottom: 1px solid var(--line); }

.site-footer { padding: 22px 0; border-top: 1px solid var(--line); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; font: 500 10px var(--mono); color: var(--muted); }

@media (max-width: 900px) {
  .shell { width: min(100% - 32px, 1440px); }
  .main-nav { position: fixed; inset: 74px 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px 18px; border-bottom: 1px solid var(--line); background: var(--paper); }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .main-nav a[aria-current="page"]::after, .main-nav a:hover::after { display: none; }
  .nav-contact { margin-top: 15px; justify-content: center; }
  .menu-button { display: block; }
  .hero { display: block; }
  .hero-copy { min-height: 550px; padding-right: 24px; border-right: 0; }
  .hero-visual { min-height: min(117vw, 760px); }
  .hero-visual::before { display: none; }
  .navigator-tag { top: 18px; right: 16px; }
  .hero-caption { right: 16px; bottom: 16px; }
  .route-band .shell { display: block; }
  .route-band .route-visual { width: 110%; max-width: none; margin: 30px -5% 0; }
  .section-header { grid-template-columns: 1fr; }
  .section-intro { margin: 0; }
  .about-strip, .contact-card, .case-layout, .bio-layout { grid-template-columns: 1fr; }
  .about-strip__copy { padding: 62px 24px; }
  .about-strip__stats, .contact-list { border-left: 0; border-top: 1px solid rgba(255,255,255,.35); }
  .bio-photo { min-height: 490px; border-right: 0; border-bottom: 1px solid var(--line); }
  .case-side { border-right: 0; }
}

@media (max-width: 640px) {
  .header-inner { height: 64px; }
  .main-nav { inset: 64px 0 auto; }
  .hero-copy { min-height: 510px; padding-top: 25px; }
  .hero-title { margin: 30px 0; font-size: clamp(70px, 22vw, 124px); }
  .hero-footer { align-items: flex-start; flex-direction: column; }
  .hero-visual { min-height: 510px; }
  .hero-project-window { top: 15.3%; left: 50.5%; width: 39.5%; }
  .navigator-tag { transform: scale(.83); transform-origin: top right; }
  .hero-caption { max-width: 165px; font-size: 9px; }
  .work-grid, .archive-grid { grid-template-columns: 1fr; }
  .work-card { min-height: 390px; }
  .archive-card { min-height: 275px; }
  .archive-card img { height: 190px; }
  .all-work-card, .all-work-card--small { grid-column: span 12; min-height: 300px; }
  .all-work-card img, .all-work-card--small img { height: 245px; }
  .timeline-item, .profile-list div { grid-template-columns: 1fr; gap: 8px; }
  .case-media img { min-height: 280px; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
}

/* Homepage: live editorial cover, built from layout, type and independent imagery. */
.wordmark small { margin-left: 10px; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.home-page .site-header { display: block; }
.rich-hero { position: relative; min-height: 680px; height: calc(100svh - 75px); max-height: 920px; overflow: hidden; border-bottom: 1px solid var(--line); }
.rich-hero__inner { position: relative; width: min(100% - 48px, 1440px); height: 100%; margin: 0 auto; }
.rich-copy { position: absolute; z-index: 4; top: clamp(44px, 7vh, 84px); left: 0; width: min(31%, 410px); }
.rich-copy .eyebrow { margin-bottom: 18px; }
.rich-copy h1 { margin: 0; font-size: clamp(54px, 5.4vw, 90px); font-weight: 700; letter-spacing: -.09em; line-height: .88; }
.rich-copy h1 span { display: block; font-weight: 400; }
.rich-copy p { max-width: 290px; margin: 22px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.rich-copy .text-link { margin-top: 22px; }
.rich-stage { position: absolute; z-index: 2; top: 30px; right: 132px; bottom: clamp(222px, 28vh, 270px); left: 30%; }
.rich-ip { position: absolute; z-index: 3; bottom: -7%; left: -2%; width: min(50%, 480px); height: 112%; object-fit: contain; object-position: center bottom; filter: drop-shadow(14px 18px 22px rgba(18, 21, 19, .10)); }
.rich-project { position: absolute; z-index: 2; top: 24%; right: 0; width: 62%; height: 60%; border: clamp(7px, .75vw, 12px) solid var(--lime); background: var(--paper-deep); overflow: visible; }
.rich-project img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.rich-project::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.45); pointer-events: none; }
.project-tab { position: absolute; z-index: 2; top: -34px; left: -12px; padding: 9px 16px 8px; background: var(--lime); color: var(--ink); font: 700 10px var(--display); letter-spacing: -.02em; }
.project-dossier { position: absolute; z-index: 2; top: 24%; right: 0; transform: translateX(100%); width: 132px; height: 60%; padding: 24px 16px; background: var(--forest); color: var(--paper); }
.project-dossier > p { margin: 0 0 22px; color: rgba(243,240,232,.68); font: 500 8px var(--mono); letter-spacing: .03em; }
.project-dossier h2 { margin: 0 0 28px; font: 500 11px/1.5 var(--mono); }
.project-dossier ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.project-dossier li { font: 500 8px/1.4 var(--mono); }
.project-dossier li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--lime); vertical-align: 1px; }
.project-dossier li:nth-child(2)::before { background: #6483c8; }.project-dossier li:nth-child(3)::before { background: #1d6d4c; }.project-dossier li:nth-child(4)::before { background: var(--orange); }
.hero-corner { position: absolute; z-index: 1; width: 28px; height: 28px; border-color: var(--lime); border-style: solid; opacity: .95; }
.hero-corner--top { top: 0; right: -84px; border-width: 3px 3px 0 0; }.hero-corner--bottom { right: -84px; bottom: 3px; border-width: 0 3px 3px 0; }
.rich-gallery { position: absolute; z-index: 5; right: 0; bottom: 0; left: 0; height: clamp(206px, 25vh, 246px); padding-top: 14px; border-top: 1px solid var(--line); background: linear-gradient(90deg, rgba(243,240,232,.92), rgba(243,240,232,.98)); }
.rich-gallery__bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.rich-gallery__bar h2 { margin: 0; font: 500 11px var(--mono); }
.rich-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.rich-work { min-width: 0; }
.rich-work__image { position: relative; height: clamp(92px, 11vh, 132px); overflow: hidden; background: var(--paper-deep); }
.rich-work__image::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 17px; height: 17px; border: 4px solid var(--lime); border-right: 0; border-bottom: 0; }
.rich-work:nth-child(2) .rich-work__image::before { border-color: #6483c8; }.rich-work:nth-child(3) .rich-work__image::before { border-color: #1d6d4c; }.rich-work:nth-child(4) .rich-work__image::before { border-color: var(--orange); }
.rich-work__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.rich-work:hover .rich-work__image img { transform: scale(1.04); }
.rich-work__number { display: block; margin-top: 7px; font-size: clamp(20px, 1.8vw, 28px); font-weight: 700; letter-spacing: -.06em; line-height: 1; }
.rich-work__number--lime { color: #b5df00; }.rich-work__number--blue { color: #5279ba; }.rich-work__number--forest { color: var(--forest); }.rich-work__number--orange { color: var(--orange); }
.rich-work h3 { margin: 4px 0 0; font-size: 14px; letter-spacing: -.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rich-work p { margin: 4px 0 0; color: var(--muted); font: 500 8px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1100px) {
  .rich-copy { width: 34%; }.rich-stage { right: 116px; left: 34%; }
  .project-dossier { width: 116px; padding: 18px 12px; }.project-dossier h2 { font-size: 10px; }
  .rich-gallery__grid { gap: 12px; }
}

@media (max-width: 760px) {
  .wordmark small { display: none; }
  .rich-hero { height: auto; min-height: 0; max-height: none; overflow: visible; }
  .rich-hero__inner { width: min(100% - 32px, 1440px); display: flex; flex-direction: column; }
  .rich-copy { position: relative; top: auto; width: 100%; padding: 55px 0 34px; }
  .rich-copy h1 { font-size: clamp(50px, 15vw, 80px); }
  .rich-copy p { max-width: 310px; }
  .rich-stage { position: relative; top: auto; right: auto; bottom: auto; left: auto; height: 460px; margin: 0 -16px; }
  .rich-ip { bottom: -8%; left: -14%; width: 82%; height: 120%; }
  .rich-project { top: 12%; right: 8px; width: 58%; height: 48%; }
  .project-dossier { top: 62%; right: 8px; transform: none; width: 58%; height: 105px; display: flex; gap: 16px; padding: 14px; }
  .project-dossier > p { display: none; }.project-dossier h2 { margin: 0; }.project-dossier ul { gap: 6px; }
  .hero-corner { right: 13px; }.hero-corner--top { top: 0; }.hero-corner--bottom { bottom: 3px; }
  .rich-gallery { position: relative; height: auto; padding: 22px 0 28px; background: transparent; }
  .rich-gallery__grid { gap: 12px; grid-template-columns: repeat(2, 1fr); }
  .rich-work__image { height: 120px; }.rich-work__number { font-size: 25px; }
  .rich-work h3 { font-size: 12px; }
}

/* Complete portfolio archive */
.works-hero { position: relative; isolation: isolate; min-height: clamp(720px, 64vw, 960px); overflow: hidden; }
.works-hero > .eyebrow { position: relative; z-index: 3; width: max-content; margin-left: 51%; }
.works-hero > h1 { position: relative; z-index: 3; width: min(58%, 760px); }
.works-hero > p { position: relative; z-index: 3; }
.works-hero__guide { position: absolute; z-index: 2; top: 12px; right: clamp(18px, 7vw, 135px); width: clamp(330px, 29vw, 470px); transform: rotate(-1.5deg); transform-origin: center bottom; }
.works-hero__guide img { width: 100%; height: auto; filter: drop-shadow(14px 18px 26px rgba(18, 21, 19, .12)); transition: transform .45s ease, filter .45s ease; }
.works-hero__guide:hover img, .works-hero__guide:focus-visible img { transform: translateY(-8px) rotate(1.5deg); filter: drop-shadow(18px 26px 32px rgba(18, 21, 19, .18)); }
.works-hero__guide:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.works-hero .archive-index { position: relative; z-index: 4; }
.archive-index { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.archive-index a { padding: 9px 12px; border: 1px solid var(--line); font: 500 10px var(--mono); }
.archive-index a:hover { background: var(--ink); color: var(--paper); }
.catalog { padding-top: 0; }
.catalog-section { padding: clamp(45px, 7vw, 92px) 0; border-top: 1px solid var(--line); }
.catalog-heading { display: grid; grid-template-columns: minmax(95px, .42fr) minmax(0, 1fr) auto; gap: 22px; align-items: end; margin-bottom: 28px; }
.catalog-heading h2 { margin: 0; font-size: clamp(30px, 4vw, 56px); letter-spacing: -.075em; line-height: .9; }
.catalog-heading p { max-width: 440px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.catalog-heading .count { color: var(--orange); font: 500 11px var(--mono); white-space: nowrap; }
.case-list { display: grid; gap: 12px; }
.case-panel { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case-panel + .case-panel { border-top: 0; }
.case-panel summary { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 90px; padding: 14px 0; cursor: pointer; list-style: none; }
.case-panel summary::-webkit-details-marker { display: none; }
.case-panel summary::after { content: "+"; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--ink); font-size: 20px; line-height: 1; }
.case-panel[open] summary::after { content: "−"; background: var(--ink); color: var(--paper); }
.case-panel__cover { width: 76px; height: 56px; object-fit: cover; background: var(--paper-deep); }
.case-panel__title strong { display: block; font-size: 20px; letter-spacing: -.05em; }
.case-panel__title span { display: block; margin-top: 5px; color: var(--muted); font: 500 10px var(--mono); }
.case-panel__body { padding: 5px 0 30px; }
.asset-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.asset-tile { min-width: 0; padding: 0; border: 0; background: transparent; cursor: zoom-in; text-align: left; }
.asset-tile img { width: 100%; height: clamp(130px, 18vw, 250px); object-fit: cover; background: var(--paper-deep); transition: transform .35s ease; }
.asset-tile:hover img { transform: scale(.985); }
.asset-tile span { display: block; margin-top: 8px; color: var(--muted); font: 500 10px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-gallery--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.asset-gallery--four .asset-tile img { height: clamp(105px, 12vw, 180px); }
.catalog-note { margin: 18px 0 0; color: var(--muted); font: 500 10px/1.6 var(--mono); }
.lightbox[hidden] { display: none; }
.lightbox { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(18, 21, 19, .94); }
.lightbox__image { max-width: min(94vw, 1600px); max-height: calc(100vh - 100px); object-fit: contain; }
.lightbox__meta { position: fixed; bottom: 27px; left: 28px; color: var(--paper); font: 500 11px var(--mono); }
.lightbox__close { position: fixed; top: 20px; right: 20px; min-width: 58px; padding: 11px 14px; border: 1px solid var(--paper); background: var(--paper); color: var(--ink); cursor: pointer; font: 700 11px var(--mono); }

@media (max-width: 760px) {
  .works-hero { min-height: 0; padding: 62px 0 42px; overflow: visible; }
  .works-hero > .eyebrow { margin-left: 0; }
  .works-hero > h1 { width: 100%; font-size: clamp(54px, 15vw, 88px); }
  .works-hero__guide { position: relative; top: auto; right: auto; display: block; width: min(84vw, 350px); margin: -14px 0 -18px auto; }
  .works-hero > p { margin: 22px 0 0; }
  .catalog-heading { grid-template-columns: 1fr; gap: 13px; }
  .catalog-heading .count { grid-row: 1; }
  .case-panel summary { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; }
  .case-panel__cover { width: 60px; height: 48px; }
  .case-panel__title strong { font-size: 16px; }
  .asset-gallery, .asset-gallery--four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .asset-tile img, .asset-gallery--four .asset-tile img { height: 130px; }
  .lightbox { padding: 14px; }
  .lightbox__meta { bottom: 15px; left: 15px; }
}

/* Homepage: faithful live reconstruction of the selected editorial reference. */
.home-page { background: #f8f6f2; }
.home-page .site-header { border-bottom: 0; background: transparent; }
.home-page .header-inner { width: calc(100% - 56px); max-width: none; height: 72px; }
.home-page .wordmark { font-size: 15px; letter-spacing: -.04em; }
.home-page .wordmark small { margin-left: 18px; color: #74736e; font-size: 14px; font-weight: 500; letter-spacing: -.03em; }
.home-page .main-nav { gap: clamp(34px, 3.2vw, 76px); color: #74736e; font-size: 14px; font-weight: 500; }
.home-page .main-nav a { padding: 9px 0 14px; }
.home-page .main-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.home-page .main-nav a[aria-current="page"]::after { right: auto; bottom: 2px; left: 50%; width: 6px; height: 6px; border-radius: 50%; transform: translateX(-50%); background: var(--ink); }

.faithful-home { position: relative; isolation: isolate; height: max(610px, 58.5vw, calc(100svh - 72px)); overflow: visible; background: #f8f6f2; }
.faithful-copy { position: absolute; z-index: 3; top: clamp(52px, calc(9.8vw - 72px), 148px); left: clamp(42px, 3.05vw, 68px); width: min(29%, 520px); }
.faithful-copy h1 { margin: 0; font-family: var(--display); font-size: clamp(58px, 5.38vw, 120px); line-height: .87; letter-spacing: -.09em; }
.faithful-copy h1 strong, .faithful-copy h1 span { display: block; }
.faithful-copy h1 strong { font-weight: 800; }.faithful-copy h1 span { font-weight: 400; }
.faithful-copy p { max-width: 300px; margin: clamp(28px, 2.7vw, 60px) 0 0 4px; color: #555751; font-size: clamp(11px, .72vw, 15px); line-height: 1.78; }
.faithful-copy .text-link { margin: clamp(29px, 3.1vw, 68px) 0 0 4px; color: #4d4f4a; font-size: clamp(10px, .68vw, 13px); }
.faithful-scene { position: absolute; z-index: 2; top: -52px; left: 29.2vw; display: block; width: 66.49vw; max-width: 1480px; }
.faithful-scene img { display: block; width: 100%; height: auto; image-rendering: auto; }
.faithful-corner { position: absolute; z-index: 1; width: clamp(22px, 1.4vw, 31px); height: clamp(22px, 1.4vw, 31px); border-color: var(--lime); border-style: solid; border-width: 3px 0 0 3px; }
.faithful-corner--left { top: clamp(78px, 7.4vw, 164px); left: clamp(24px, 1.45vw, 32px); }
.faithful-corner--right-top, .faithful-corner--right-bottom { display: none; }
.faithful-gallery { position: absolute; z-index: 5; right: 0; bottom: 0; left: 0; height: clamp(235px, 24vw, 430px); padding: 13px clamp(30px, 1.5vw, 34px) 0; border-top: 1px solid rgba(18,21,19,.18); background: #f8f6f2; }
.faithful-gallery__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: clamp(8px, .7vw, 15px); }
.faithful-gallery__bar h2 { margin: 0; color: #50524d; font: 500 clamp(9px, .62vw, 13px) var(--mono); }
.faithful-gallery__bar h2 span { margin-left: 10px; color: #777873; }
.faithful-gallery__bar .text-link { font-size: clamp(9px, .62vw, 12px); }
.faithful-gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.55vw, 35px); }
.faithful-work { min-width: 0; }
.faithful-work__image { position: relative; overflow: hidden; aspect-ratio: 1.63 / 1; background: #e9e3d8; }
.faithful-work__image::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: clamp(13px, 1.1vw, 24px); height: clamp(13px, 1.1vw, 24px); border: clamp(3px, .24vw, 5px) solid var(--lime); border-right: 0; border-bottom: 0; }
.faithful-work:nth-child(2) .faithful-work__image::before { border-color: #4e7dff; }.faithful-work:nth-child(3) .faithful-work__image::before { border-color: var(--forest); }.faithful-work:nth-child(4) .faithful-work__image::before { border-color: var(--orange); }
.faithful-work__image img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 50%; transition: transform .45s ease; }
.faithful-work:nth-child(2) img { object-position: 50% 50%; }.faithful-work:nth-child(3) img { object-position: 50% 50%; }.faithful-work:nth-child(4) img { object-position: 50% 50%; }
.faithful-work:hover .faithful-work__image img { transform: scale(1.035); }
.faithful-work__number { display: block; margin-top: clamp(7px, .55vw, 12px); font-size: clamp(24px, 1.85vw, 42px); font-weight: 700; line-height: .9; letter-spacing: -.06em; }
.faithful-work__number--lime { color: #bde500; }.faithful-work__number--blue { color: #537bb7; }.faithful-work__number--forest { color: var(--forest); }.faithful-work__number--orange { color: var(--orange); }
.faithful-work h3 { margin: clamp(5px, .38vw, 9px) 0 0; font-size: clamp(12px, 1vw, 21px); letter-spacing: -.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faithful-work p { margin: 5px 0 0; color: #787973; font: 500 clamp(7px, .5vw, 11px)/1.3 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 760px) {
  .home-page .header-inner { width: calc(100% - 32px); height: 64px; }
  .home-page .main-nav { gap: 0; font-size: 13px; }
  .home-page .main-nav a[aria-current="page"]::after { display: none; }
  .faithful-home { height: auto; min-height: 0; overflow: visible; }
  .faithful-copy { position: relative; top: auto; left: auto; width: min(100% - 32px, 620px); margin: 0 auto; padding: 64px 0 34px; }
  .faithful-copy h1 { font-size: clamp(58px, 16vw, 92px); }
  .faithful-copy p, .faithful-copy .text-link { margin-left: 0; }
  .faithful-scene { position: relative; top: auto; left: auto; width: 112%; max-width: none; margin: -16px -6% -40px; }
  .faithful-corner { display: none; }
  .faithful-gallery { position: relative; height: auto; padding: 20px 16px 34px; }
  .faithful-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 12px; }
  .faithful-work__number { font-size: 26px; }
  .faithful-work h3 { font-size: 12px; }
  .faithful-work p { font-size: 8px; }
}