:root{
  --ground:#F2F0EC; --paper:#FAF9F6; --ink:#1A1A1A;
  --muted:#8A8580; --rule:#DEDAD3; --signal:#D8402F;
  --pad:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.ml{font-size:10px;font-weight:500;text-transform:uppercase;
    letter-spacing:.14em;color:var(--muted)}
.ml-ink{color:var(--ink)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--signal);
     display:inline-block;flex:none}
.wrap{padding:0 var(--pad)}
.rule{border-top:1px solid var(--rule)}

h1.page{font-size:clamp(40px,7vw,96px);font-weight:500;letter-spacing:-.035em;
        line-height:.9;text-transform:uppercase;margin:0}

/* header */
header{position:sticky;top:0;z-index:50;background:var(--ground);
  border-bottom:1px solid var(--rule)}
.hd{display:flex;align-items:center;justify-content:space-between;
    padding:20px var(--pad);gap:24px}
.brand{display:flex;align-items:center;gap:10px}
nav.main{display:flex;gap:32px}
nav.main a{display:flex;align-items:center;gap:8px}
nav.main a[aria-current]{color:var(--ink)}
nav.main a:hover{color:var(--ink)}
.menu-btn{display:none;background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:10px;font-weight:500;text-transform:uppercase;
  letter-spacing:.16em}

/* hero */
.hero{display:grid;grid-template-columns:420px 1fr;gap:64px;
      padding:96px var(--pad) 0;align-items:start}
.hero h1{font-size:clamp(40px,5.4vw,76px);font-weight:500;letter-spacing:-.035em;
         line-height:.94;text-transform:uppercase;margin:0}
.hero-img{justify-self:end;max-width:100%}

/* grid */
.filters{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.filters #count{white-space:nowrap}
.filters .set{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none}
.filters .set::-webkit-scrollbar{display:none}
.filt{background:none;border:0;padding:0;font-family:inherit;cursor:pointer;
  white-space:nowrap;display:flex;align-items:center;gap:8px;
  font-size:10px;font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted)}
.filt[aria-pressed="true"]{color:var(--ink)}
.filt .dot{opacity:0}
.filt[aria-pressed="true"] .dot{opacity:1}

.grid{columns:3;column-gap:32px;padding-top:64px}
.grid .item{break-inside:avoid;margin:0 0 96px}
figure{margin:0}
figure a{display:block;transition:opacity .2s ease}
figure a:hover{opacity:.85}
.ph{background:#E4E0D9}
figcaption{padding-top:14px}
.cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.cap .t{font-size:17px}
.cap .tag{font-size:11px;color:var(--muted);white-space:nowrap}
.meta{font-size:11px;color:var(--muted);padding-top:4px}
.wt{font-size:9px;text-transform:uppercase;letter-spacing:.14em;
    color:var(--muted);opacity:.75;padding-top:4px}

/* detail */
.detail{background:var(--paper)}
.detail main{display:flex;flex-direction:column;align-items:center;
  padding:120px var(--pad)}
.detail .cap-block{padding-top:40px}
.prevnext{display:flex;justify-content:space-between;align-items:center;
  gap:24px;padding:32px var(--pad);border-top:1px solid var(--rule)}

/* series rows */
.srow{display:flex;gap:64px;align-items:center;padding:48px 0;
  border-bottom:1px solid var(--rule)}
.srow .im{width:40%;flex:none}
.srow h2{font-size:40px;font-weight:500;letter-spacing:-.03em;
  line-height:1.05;text-transform:uppercase;margin:0}
.srow p{max-width:62ch}

/* cv */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}
.cvrow{display:flex;gap:20px;align-items:baseline;padding:14px 0;
  border-bottom:1px solid var(--rule)}
.cvy{font-size:11px;color:var(--muted);width:44px;flex:none}
.cvt{font-size:17px}

/* contact */
.clink{font-size:clamp(22px,3vw,32px);letter-spacing:-.02em;
  display:flex;align-items:center;gap:16px;padding:6px 0}
.clink .dot{opacity:0;transition:opacity .2s ease}
.clink:hover .dot{opacity:1}

/* footer */
footer{border-top:1px solid var(--rule);margin-top:160px;
  padding:96px var(--pad) 64px}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:start}
.fcol{display:flex;flex-direction:column;gap:12px}

.empty{border:1px dashed var(--rule);padding:96px 0;text-align:center;
  color:var(--muted)}

@media (max-width:1100px){ .grid{columns:2} }
@media (max-width:760px){
  :root{--pad:20px}
  .ml{letter-spacing:.16em}
  nav.main{display:none}
  nav.main.open{display:flex;position:fixed;inset:0;background:var(--ground);
    flex-direction:column;gap:8px;padding:88px 20px;z-index:60}
  nav.main.open a{font-size:32px;letter-spacing:-.02em;min-height:44px}
  .menu-btn{display:block;position:relative;z-index:70}
  .hero{grid-template-columns:1fr;gap:40px;padding-top:40px}
  .hero-img{justify-self:start}
  .filters{flex-direction:column;align-items:flex-start;gap:12px;position:relative}
  .filters .set{width:100%;padding-right:40px}
  .filters::after{content:'';position:absolute;right:0;top:0;width:44px;height:22px;
    background:linear-gradient(to right,rgba(242,240,236,0),var(--ground));
    pointer-events:none}
  .grid{columns:1;padding-top:40px}
  .grid .item{margin-bottom:64px}
  .srow{flex-direction:column;gap:24px;align-items:flex-start}
  .srow .im{width:100%}
  .srow h2{font-size:28px}
  .cols2{grid-template-columns:1fr;gap:48px}
  .detail main{padding:48px 20px}
  .fgrid{grid-template-columns:1fr;gap:32px}
  footer{margin-top:96px;padding-top:48px}
  .prevnext{flex-direction:column;align-items:flex-start;gap:16px}
}