/* Look 4 — Lookbook / Image-led cinematic */
:root { --paper:#ede7d8; --paper-2:#e3dcc9; --ink:#1b1814; --muted:#7a7063; --line:#1b1814; --accent:#5a3521; --sans:"Söhne","Inter Tight",ui-sans-serif,system-ui,sans-serif; }
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;font-weight:400}
img{display:block;max-width:100%;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}

.lb-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;padding:20px 32px;align-items:baseline;mix-blend-mode:difference;color:#efe7d6;font-size:12px;letter-spacing:.04em;pointer-events:none}
.lb-nav > *{pointer-events:auto}
.lb-nav__brand{font-weight:500;letter-spacing:.02em}
.lb-nav__center{justify-self:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.lb-nav__links{justify-self:end;display:flex;gap:22px}
.lb-nav__links a{opacity:.85;transition:opacity 150ms}.lb-nav__links a:hover{opacity:1}

.lb-hero{height:100vh;min-height:640px;position:relative;overflow:hidden;background:#1a1510}
.lb-hero img{position:absolute;inset:0;filter:saturate(0.92) brightness(0.85)}
.lb-hero__bottom{position:absolute;left:32px;right:32px;bottom:32px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;color:#efe7d6}
.lb-hero__name{font-size:clamp(32px,4vw,56px);font-weight:500;letter-spacing:-.01em;line-height:1;margin:0}
.lb-hero__sub{font-size:14px;opacity:.75;margin:8px 0 0;max-width:42ch}
.lb-hero__meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;text-align:right}
.lb-hero__meta div{margin-bottom:4px}
.lb-hero__scroll{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#efe7d6;opacity:.7}

.lb-section{padding:80px 32px 24px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:baseline}
.lb-section__num{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lb-section__title{font-size:clamp(24px,2.6vw,34px);font-weight:500;margin:0;letter-spacing:-.01em}
.lb-section__meta{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

#work{position:relative}
.lb-filters{position:sticky;top:16px;z-index:40;margin:0 auto 28px;padding:8px;display:inline-flex;gap:6px;flex-wrap:wrap;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 64px);background:rgba(239,231,214,.82);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border:1px solid var(--line);border-radius:999px;box-shadow:0 1px 2px rgba(27,24,20,.04),0 10px 30px -12px rgba(27,24,20,.18)}
.lb-filters::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.lb-chip{font-size:14px;letter-spacing:.02em;padding:10px 20px;border:1px solid transparent;background:transparent;border-radius:999px;transition:background 150ms,color 150ms;font-weight:400;position:relative}
.lb-chip:hover{background:rgba(27,24,20,.06)}.lb-chip.on{background:#3f4d7f;color:#fff;border-color:#3f4d7f}
.lb-chip.on:hover{background:#3f4d7f}

.lb-story{padding:0 32px 80px;display:flex;flex-direction:column;gap:96px}
.lb-story__piece{display:grid;grid-template-columns:5fr 4fr;gap:12px;align-items:start}
.lb-story__piece:nth-child(even){grid-template-columns:4fr 5fr}
.lb-story__piece:nth-child(even) .lb-story__cover{order:2}
.lb-story__piece:nth-child(even) .lb-story__row{order:1}
.lb-story__cover{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);cursor:pointer;position:relative}
.lb-story__cover img{transition:transform 800ms cubic-bezier(.2,.7,.2,1)}
.lb-story__cover:hover img{transform:scale(1.02)}
.lb-story__row{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:8px}
.lb-story__row .thumb{aspect-ratio:1/1;overflow:hidden;background:var(--paper-2);cursor:pointer}
.lb-story__row .thumb img{transition:transform 600ms cubic-bezier(.2,.7,.2,1)}
.lb-story__row .thumb:hover img{transform:scale(1.03)}
.lb-story__caption{grid-column:1/-1;margin-top:4px}
.lb-story__caption{display:grid;grid-template-columns:auto 1fr auto;gap:16px;padding-top:12px;border-top:1px solid var(--line);align-items:baseline}
.lb-story__caption h3{font-size:22px;font-weight:500;letter-spacing:-.01em;margin:0}
.lb-story__caption p{font-size:13px;color:var(--muted);margin:0;max-width:60ch}
.lb-story__caption .meta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right;white-space:nowrap}

.lb-about{padding:80px 32px;display:grid;grid-template-columns:1fr 1fr;gap:48px;border-top:1px solid var(--line);align-items:start}
.lb-about__img{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);max-width:520px}
.lb-about__copy h2{font-size:clamp(28px,3vw,40px);font-weight:500;margin:0 0 20px;letter-spacing:-.01em;max-width:14ch}
.lb-about__copy p{font-size:16px;line-height:1.6;margin:0 0 14px;max-width:48ch}
.lb-about__copy .signoff{font-size:13px;color:var(--muted);margin-top:24px}

.lb-cv{padding:80px 32px;border-top:1px solid var(--line)}
.lb-cv__head{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:baseline;padding-bottom:16px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.lb-cv__contact{font-size:13px;letter-spacing:.04em;color:var(--muted);text-align:right;display:flex;flex-direction:column;gap:4px;align-items:flex-end;line-height:1.5}
.lb-cv__contact a{color:var(--ink);font-weight:500}
.lb-cv__contact a:hover{color:var(--accent)}
.lb-cv__head h2{font-size:clamp(24px,2.6vw,32px);font-weight:500;margin:0;letter-spacing:-.01em}
.lb-cv__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 64px;max-width:1200px}
.lb-cv__block h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.lb-cv__row{display:grid;grid-template-columns:1fr auto;gap:14px;padding:12px 0;border-bottom:1px solid rgba(27,24,20,.08);align-items:baseline}
.lb-cv__row .co{font-size:16px;font-weight:500}
.lb-cv__row .role{font-size:13px;color:var(--muted);margin-top:2px}
.lb-cv__row .period{font-size:12px;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.lb-cv__row ul{margin:8px 0 0;padding-left:16px;font-size:13px;color:var(--ink);line-height:1.55;grid-column:1/-1}
.lb-cv__row ul li{margin-bottom:3px}
.lb-cv__tags{display:flex;flex-wrap:wrap;gap:6px}
.lb-cv__tags span{font-size:12px;padding:5px 10px;border:1px solid var(--line);border-radius:999px}

.lb-foot{padding:80px 32px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:end}
.lb-foot h2{font-size:clamp(32px,4vw,56px);font-weight:500;margin:0;letter-spacing:-.01em;max-width:14ch}
.lb-foot__mail{font-size:18px;font-weight:500;border-bottom:1px solid var(--line);padding-bottom:4px;justify-self:center}
.lb-foot__mail:hover{color:var(--accent);border-color:var(--accent)}
.lb-foot__meta{font-size:12px;letter-spacing:.06em;color:var(--muted);text-align:right}
.lb-foot__meta div{margin-bottom:4px}

.lb-colophon{padding:18px 32px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.08em;color:var(--muted);border-top:1px solid var(--line)}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(27,24,20,.96);display:grid;grid-template-rows:1fr;padding:20px}
.lightbox__stage{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;justify-items:center;gap:20px}
.lightbox__stage img{max-height:calc(100vh - 40px);max-width:100%;object-fit:contain;width:auto;height:auto}
.lightbox__nav{width:44px;height:44px;border:1px solid rgba(237,231,216,.3);color:var(--paper);font-size:18px;border-radius:50%}

@media (max-width:900px){
  .lb-about,.lb-cv__grid,.lb-foot{grid-template-columns:1fr}
  .lb-story__piece,.lb-story__piece:nth-child(even){grid-template-columns:1fr;gap:8px}
  .lb-story__piece:nth-child(even) .lb-story__cover,.lb-story__piece:nth-child(even) .lb-story__row{order:unset}
  .lb-story__row{grid-template-columns:1fr 1fr}
  .lb-hero__bottom,.lb-section,.lb-story__caption,.lb-cv__head,.lb-nav{grid-template-columns:1fr;gap:12px;text-align:left}
  .lb-nav__center,.lb-nav__links{justify-self:start}
  .lb-foot__meta{text-align:left}
}