/* Hanken Grotesk — self-hosted (SIL Open Font License, see fonts/OFL.txt) */
@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken-grotesk-var.woff") format("woff");font-weight:100 900;font-style:normal;font-display:swap}
/* B — document / index. One typeface: Hanken Grotesk. Hierarchy by size, weight and grey, not by family. */
:root{
  --ink:#0d0d0d; --paper:#fbfaf8; --dim:#8b8984; --line:#dcd9d3; --mist:#efeeeb;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
  --edge:clamp(18px,2.2vw,32px);  /* lines and header sit here, near the page edge */
  --side:clamp(24px,6vw,104px);   /* page margin left/right */
  --gap:clamp(18px,2.4vw,36px);   /* gutter between columns */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
.mono{font:400 12px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.12em}
.dim{color:var(--dim)}
.lbl{font:400 13px/1.4 var(--sans);color:var(--dim);letter-spacing:.02em}

/* header — identity left, sections centred on the page, index right */
.hd{position:fixed;inset:0 0 auto;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;gap:var(--gap);padding:20px var(--edge);
  font:400 12px/1.6 var(--sans);text-transform:uppercase;letter-spacing:.12em;mix-blend-mode:difference;color:#fff}
.hd-id{display:flex;flex-direction:column;justify-self:start}
.hd-role{opacity:.5;margin-top:2px}
.hd-nav{display:flex;flex-direction:column;align-items:center;text-align:center}
.hd-nav2{display:flex;flex-direction:column;align-items:flex-end;justify-self:end}
.hd nav a{transition:opacity .3s}
.hd nav a:hover,.hd a[aria-current]{opacity:.45}
.menu-btn{display:none}

/* hero — a plate with its caption */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:120px var(--side) 40px;cursor:pointer}
/* fixed stage; each image keeps its own format (vertical or horizontal), never cropped */
.hero .slides{width:min(100%,1100px);height:min(72vh,720px)}
.hero .slide{display:flex;align-items:center;justify-content:center}
.hero .slide img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.slides{position:relative;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.slide img{transform:scale(1.035);transition:transform 6s cubic-bezier(.2,.6,.2,1)}
.slide.is-active{opacity:1}
.slide.is-active img{transform:scale(1)}
.hero-cap{width:min(100%,1100px);display:flex;justify-content:center;gap:24px;margin-top:14px}
.cap{opacity:0;transform:translateY(4px);transition:opacity .6s ease .2s,transform .6s ease .2s}
.cap.is-in{opacity:1;transform:none}

.intro{padding:120px var(--side) 180px;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.intro p{grid-column:2/4;max-width:560px;justify-self:center;text-align:center;font:300 clamp(18px,1.45vw,22px)/1.55 var(--sans)}
.intro-2{color:#6b6964}

/* sections */
.sec{padding:0 var(--edge) 160px}
.sec{--inset:calc(var(--side) - var(--edge))}
.sec-head{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);border-top:1px solid currentColor;padding-top:10px;margin-bottom:110px}
.sec-head span:last-child{text-align:right;grid-column:4}

/* projects — info as a small labelled grid on the left; image centred in the right two thirds */
.project{display:grid;grid-template-columns:1fr 2fr;gap:calc(var(--gap)*2);padding:64px var(--inset) 180px;border-top:1px solid var(--line);align-items:start}
.sec-head+.project{border-top:0;padding-top:0}
.photo-grid,.ad-show,.about-text,.contact{margin-left:var(--inset);margin-right:var(--inset)}
.project-info{display:flex;flex-direction:column;gap:30px}
.p-head h3{font:500 17px/1.4 var(--sans);margin-top:8px}
.p-head .sub{font-weight:400;color:var(--dim);margin-left:6px}
.blk{border-top:1px solid var(--line);padding-top:10px}
.blk .lbl{margin-bottom:8px}
.blk p:not(.lbl){font-size:15.5px;line-height:1.6}
.blk .dimtxt{color:#5d5b57}
.note{color:var(--dim);font-size:13.5px}

.project-media{cursor:pointer}
.project-media .slides{transition:height .6s cubic-bezier(.2,.7,.2,1)}
.project-media .slide{bottom:auto;display:flex;justify-content:center}
/* keeps its own format; about the size of the hero plate; never stretched */
.project-media .slide img{width:auto;height:auto;max-width:100%;max-height:min(74vh,720px);object-fit:initial}
.ctrl{display:flex;gap:18px;align-items:center;margin-top:16px}
.project-media .ctrl{justify-content:center}
.ctrl button{text-transform:uppercase;font:inherit;padding:0 2px;transition:opacity .3s}
.ctrl button:hover{opacity:.45}

/* photography — pale grey band, five per row, natural formats; click to enlarge */
.photo{background:var(--mist);padding-top:22px;padding-bottom:180px}
.photo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);row-gap:64px;align-items:start}
.zoom{display:block;width:100%;cursor:zoom-in;overflow:hidden}
.zoom img{height:auto;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.zoom:hover img{transform:scale(1.025)}
.photo-grid figcaption{margin-top:10px;color:var(--dim)}

/* dark sections */
.dark{background:#0d0d0d;color:#f1efe9;--dim:#7b7973;--line:#2a2a2a}
.ad{padding-top:22px}
.ad-show{cursor:pointer}
.ad-show .slides{max-width:1200px;margin:0 auto}
.ad-show .slides{aspect-ratio:16/10}
.ad-show img{object-fit:contain}
.ad-show .ctrl{justify-content:space-between;max-width:1200px;margin:16px auto 0}
.about{padding-top:22px;padding-bottom:0;border-top:1px solid #2a2a2a}
.about-text{font:300 clamp(24px,2.6vw,42px)/1.35 var(--sans);color:#c9c6bf;letter-spacing:-.005em}
.contact{margin-top:120px;padding-bottom:120px}
.contact-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.contact-list li{border-top:1px solid #2a2a2a;padding-top:10px}
.contact-list span{display:block;font-size:13px;color:var(--dim);margin-bottom:8px}
.contact-list a{border-bottom:1px solid #555;transition:border-color .3s}
.contact-list a:hover{border-color:#fff}
.ft{display:flex;justify-content:space-between;padding:16px 0 22px;border-top:1px solid currentColor}

[data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
[data-reveal].is-in{opacity:1;transform:none}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(251,250,248,.97);display:flex;align-items:center;justify-content:center;padding:64px var(--side);opacity:0;transition:opacity .35s ease}
.lightbox[hidden]{display:none}
.lightbox.is-on{opacity:1}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;cursor:zoom-out}
.lightbox button{position:absolute;color:var(--ink);padding:6px}
.lb-close{top:18px;right:var(--side)}
.lb-prev{left:var(--side);bottom:18px}.lb-next{right:var(--side);bottom:18px}

/* archive — dark index table, image follows the cursor */
body.is-dark{--paper:#0d0d0d;--ink:#f1efe9;--dim:#76746e;--line:#2a2a2a;background:var(--paper);color:var(--ink)}
.archive{padding:160px var(--edge) 0;min-height:100vh}
.arc-head{display:grid;grid-template-columns:1fr 2fr;gap:calc(var(--gap)*2);margin-bottom:120px;align-items:start}
.arc-head p{max-width:620px;font-size:16px;line-height:1.6}
.arc-cols,.arc-item{display:grid;grid-template-columns:60px 2fr 1fr 2fr;gap:var(--gap);align-items:baseline}
.arc-cols{padding-bottom:10px;border-bottom:1px solid var(--ink)}
.arc-list{padding-bottom:180px}
.arc-item{padding:16px 0;border-bottom:1px solid var(--line);position:relative;transition:padding .4s ease}
.arc-item h3{font:400 clamp(22px,2vw,30px)/1.15 var(--sans)}
.arc-item .client{font-size:16px}
.arc-item.is-hover{padding-left:12px}
.arc-list.is-hovering .arc-item:not(.is-hover){color:var(--dim)}
.arc-preview{position:fixed;left:0;top:0;z-index:30;pointer-events:none;width:min(34vw,520px);opacity:0;transition:opacity .35s ease}
.arc-preview.is-on{opacity:1}
.arc-preview img{height:auto}
.arc-inline{grid-column:1/-1;max-height:0;overflow:hidden;transition:max-height .6s ease}
.arc-inline img{margin:12px 0 4px;height:auto}

@media (max-width:1100px){
  .photo-grid{grid-template-columns:repeat(3,1fr)}
  .project{grid-template-columns:1fr 1.6fr}
}
@media (max-width:820px){
  :root{--side:22px;--edge:22px}
  .hd{grid-template-columns:1fr auto;mix-blend-mode:normal;color:var(--ink);background:var(--paper)}
  .hd-nav,.hd-nav2{display:none}
  .menu-btn{display:block;text-transform:uppercase;align-self:start;justify-self:end}
  body.menu-open .hd{height:100svh;align-content:start}
  body.menu-open .hd-nav,body.menu-open .hd-nav2{display:flex;grid-column:1/-1;align-items:flex-start;text-align:left;justify-self:start;font:300 32px/1.3 var(--sans);text-transform:none;letter-spacing:0;margin-top:40px}
  body.menu-open .hd-nav2{margin-top:16px}
  .hero .slides{width:100%;height:62svh}
  .hero-cap{width:100%}
  .intro,.sec-head{grid-template-columns:1fr 1fr}
  .intro p{grid-column:1/-1}
  .intro{padding:70px var(--side) 110px}
  .sec-head{margin-bottom:60px}
  .sec-head span:last-child{grid-column:auto}
  .sec-head span:nth-child(2){display:none}
  .project{grid-template-columns:1fr;gap:36px;padding:44px 0 110px}
  .project-media{order:-1}
  .project-media .slide img{max-height:72vh}
  .photo-grid{grid-template-columns:1fr 1fr;row-gap:36px}
  .contact-list{grid-template-columns:1fr}
  .contact{margin-top:70px}
  .arc-head{grid-template-columns:1fr;gap:30px;margin-bottom:70px}
  .arc-cols{display:none}
  .arc-item{grid-template-columns:34px 1fr;cursor:pointer}
  .arc-item .client,.arc-item .disc{grid-column:2}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.blk p:not(.lbl)+p{margin-top:12px}

/* services — four short blocks, same hairline grammar as the rest */
.services{margin:110px var(--inset) 0}
.svc-lbl{margin-bottom:14px}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.svc{border-top:1px solid #2a2a2a;padding-top:12px}
.svc h4{font:500 15px/1.4 var(--sans);color:#f1efe9;margin-bottom:8px}
.svc p{font-size:15px;line-height:1.6;color:#9a978f}
@media (max-width:1100px){.svc-grid{grid-template-columns:1fr 1fr;row-gap:36px}}
@media (max-width:820px){.services{margin-top:70px}.svc-grid{grid-template-columns:1fr}}

.intro-2{display:block}

/* mobile archive: name the role line, since the column headings are hidden */
@media (max-width:820px){
  .arc-item .disc::before{content:"Role";display:block;color:var(--dim);opacity:.8;margin:6px 0 4px}
  .arc-item .disc{color:var(--ink)}
  body.menu-open .menu-btn{margin-top:28px}
}


.arc-item .agency,.arc-item .award{display:block;font-style:normal;margin-top:4px}
.arc-item .agency{color:var(--dim)}
.arc-item .award{color:var(--ink)}