
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:#fbfaf7;scroll-behavior:smooth}
:root{
  --frame:#fbfaf7;--frame-text:#3a352c;--frame-line:rgba(58,53,44,.18);--sage:#8a9382;
}
:root[data-frame="ink"]{--frame:#0c0c0b;--frame-text:#d9d5cb;--frame-line:rgba(217,213,203,.18);--sage:#afb8a7}
body{background:var(--frame);color:var(--frame-text);font-family:'Archivo Narrow',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s,color .4s}
a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}
.serif{font-family:'Playfair Display SC',serif;font-weight:400}
.small-caps{font-size:11px;letter-spacing:2.2px;text-transform:uppercase}
::selection{background:var(--sage);color:#000}
a:focus-visible,button:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

.frame-shell{padding:22px 26px 0}
.fhead{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--frame-line)}
.fhead .wordmark{font-family:'Playfair Display SC',serif;font-size:20px}
.fhead .nav{display:flex;gap:22px}
.fhead .nav a{font-size:11px;letter-spacing:2.2px;text-transform:uppercase;opacity:.75}
.fhead .nav a:hover{opacity:1}
.fright{display:flex;align-items:center;gap:14px}
.toggle{border:1px solid var(--frame-line);background:none;color:var(--frame-text);font:inherit;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;padding:6px 12px;cursor:pointer}
.toggle:hover{opacity:.7}
.hamb-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:12px;position:relative;z-index:301}
.hamb-btn span{width:22px;height:1.5px;background:var(--frame-text);display:block}
.hamb-menu{position:fixed;inset:0;z-index:300;background:var(--frame);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;opacity:0;pointer-events:none;transition:opacity .3s}
.hamb-menu.open{opacity:1;pointer-events:auto}
.hamb-menu a{font-family:'Playfair Display SC',serif;font-size:28px;color:var(--frame-text);padding:8px 20px}
@media(max-width:900px){.fhead .nav{display:none}.hamb-btn{display:flex}}

/* ---- hero panel: the develop ---- */
.panel{position:relative;margin:22px 0;aspect-ratio:16/10;overflow:hidden;background:#000}
.panel .hf{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.panel .hf.on{opacity:1}
.panel .hf .ph{position:absolute;inset:0}
.panel .hf img{width:100%;height:100%;object-fit:cover;filter:sepia(.7) saturate(1.5) hue-rotate(-8deg) brightness(.24) contrast(.75) blur(2px);transition:filter 1.2s cubic-bezier(.2,.6,.2,1)}
.panel .hf.developed img{filter:grayscale(.28) contrast(1.05) brightness(.82) blur(0)}
.panel .hf .safelight{position:absolute;inset:0;background:rgba(190,60,20,.34);mix-blend-mode:multiply;transition:opacity 1.2s ease;pointer-events:none}
.panel .hf.developed .safelight{opacity:0}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.04) 30%,rgba(0,0,0,.04) 70%,rgba(0,0,0,.4));pointer-events:none;z-index:1}
.ptext{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:5%}
.ptext .eyebrow{color:#f2efe8;font-size:11px;letter-spacing:2.4px;text-transform:uppercase}
.hero-title{color:#f2efe8;font-size:clamp(40px,7vw,94px);line-height:.9;max-width:7ch;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.ptext .ethos{max-width:420px}
.ptext .ethos .lbl{font-family:'Playfair Display SC',serif;font-style:italic;font-size:15px;color:#f2efe8;display:block;margin-bottom:10px}
.ptext .ethos p{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;line-height:1.9;color:rgba(242,239,232,.82)}
.pidx{display:flex;flex-wrap:wrap;gap:14px 30px}
.pidx a{color:#f2efe8;font-size:11px;letter-spacing:2px;text-transform:uppercase;border-bottom:1px solid rgba(242,239,232,.4);padding-bottom:3px;transition:opacity .3s;white-space:nowrap}
.pidx a:hover{opacity:.6}
@media(prefers-reduced-motion:reduce){.panel .hf,.panel .hf img,.panel .hf .safelight{transition:none}}

.findex{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:8px 0 40px;border-bottom:1px solid var(--frame-line)}
.findex .col a{display:block;font-size:12px;letter-spacing:.5px;padding:6px 0;opacity:.8}
.findex .col a:hover{opacity:1}
.foot-note{padding:18px 0 10px;font-size:11px;letter-spacing:1px;opacity:.55}

/* ---- Latest strip: ships hidden until latest.json has real items ---- */
.latest{padding:26px 0 6px;border-bottom:1px solid var(--frame-line)}
.latest.hidden{display:none}
.latest .lhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.latest .lhead .small-caps{opacity:.55}
.lstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.litem .ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:#000}
.litem img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.03) brightness(.92)}
.litem .cap{margin-top:7px;font-size:10px;letter-spacing:1px;opacity:.6}
.litem .cap b{display:block;font-weight:400;opacity:.4;font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;margin-top:2px}
.litem a{color:inherit;text-decoration:none}
.litem a:focus-visible{outline:2px solid currentColor;outline-offset:4px}

.rowsec{padding:9vh 26px 3vh;max-width:1180px;margin:0 auto;scroll-margin-top:24px}
.rowsec .k{opacity:.5;display:block;margin-bottom:8px}
.rowsec h2{font-family:'Playfair Display SC',serif;font-weight:400;font-size:clamp(28px,4vw,46px)}
.rowsec p{margin-top:8px;font-size:14px;opacity:.7;max-width:56ch}
.rowsec .act{display:inline-block;margin-top:12px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;border-bottom:1px solid var(--frame-line)}

/* ---- under-photo row: photo, then its museum label beneath (2026-09-29: moved off the side
   column at Johan's request; same field content/structure, just relocated). Caption width caps
   at the photo's own max-height-driven width so it reads as belonging to that frame, not the
   full row -- left-aligned to match the rest of the page's rag. ---- */
.frow{width:calc(100% - 52px);max-width:1180px;margin:0 auto 106px}
.frow .ph{display:flex}
.frow img{display:block;width:auto;height:auto;max-width:100%;max-height:80vh;filter:grayscale(.2) contrast(1.03) brightness(.9)}
.fc{max-width:640px;margin-top:16px;padding-top:12px;border-top:1px solid var(--frame-line)}
.fc-fields{display:flex;flex-direction:column;gap:3px}
.fc-row{display:flex;gap:10px;margin:0}
.fc-row dt{flex:0 0 auto;width:70px;font-family:'Archivo Narrow',sans-serif;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;opacity:.45}
.fc-row dd{margin:0;font-family:'Archivo Narrow',sans-serif;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;opacity:.85}
.fc-note{margin:9px 0 0;font-family:'Archivo Narrow',sans-serif;font-size:11.5px;letter-spacing:.2px;text-transform:none;line-height:1.5;opacity:.6}
.fc-note-label{display:block;margin-top:12px;font-family:'Archivo Narrow',sans-serif;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;opacity:.5}
.fc-map{margin-top:14px}
.caption-key{width:calc(100% - 52px);max-width:1180px;margin:42px auto 0;font-size:11px;line-height:1.5;letter-spacing:.4px;opacity:.62}
.strip-item{flex:0 0 auto;width:max-content;max-width:85vw;scroll-snap-align:start}
.strip-item .fc{max-width:520px}
.strip-item .fc-row dt{width:66px}

/* ---- series strip: multi-image sets scroll horizontally; one label for the series, now under
   the strip too (matches frow's move, reads better than the old side column here as well). ---- */
.fstripwrap{width:calc(100% - 52px);max-width:1180px;margin:0 auto 106px}
.fstrip{width:100%;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.fstrip::-webkit-scrollbar{height:5px}
.fstrip::-webkit-scrollbar-thumb{background:var(--frame-line)}
.fstrip img{display:block;height:64vh;width:auto;max-width:none;flex:0 0 auto;scroll-snap-align:start;filter:grayscale(.2) contrast(1.03) brightness(.9)}
.fstrip .strip-item img{max-width:85vw}
.fstripwrap .fc{max-width:100%}

/* ---- coordinate + crosshair map chip v2: no country outline, no flags ---- */
.geo{display:flex;align-items:center;gap:10px}
.geo svg{flex:0 0 auto}
.geo .coord{font-family:'Archivo Narrow',sans-serif;font-size:10px;letter-spacing:1.4px;opacity:.55}

/* ---- About: editorial magazine spread ---- */
.about-spread{width:calc(100% - 52px);max-width:1180px;margin:0 auto 106px;padding-top:9vh;border-top:1px solid var(--frame-line)}
.about-head{margin-bottom:44px}
.about-head .small-caps{opacity:.5}
.about-head h2{font-family:'Playfair Display SC',serif;font-weight:400;font-size:clamp(32px,4.6vw,58px);line-height:1.05;margin-top:10px}
.about-head .byline{margin-top:10px;font-size:11px;letter-spacing:2px;text-transform:uppercase;opacity:.55}
.about-grid{display:grid;grid-template-columns:38% 1fr;gap:56px;align-items:start}
.about-grid .asp-img{aspect-ratio:4/5;overflow:hidden}
.about-grid .asp-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.02) brightness(.94)}
.about-body{column-count:2;column-gap:40px;font-family:'Playfair Display SC',serif;font-weight:400;font-size:16px;line-height:1.65}
.about-body p{margin:0 0 1.3em;break-inside:avoid-column}

/* ---- site footer: base rules restored (dropped by accident in an earlier rewrite this round;
   only the mobile override survived, which was flattening the footer links together) ---- */
.site-foot{border-top:1px solid var(--frame-line);padding:34px 26px 40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px 40px;align-items:baseline;font:400 13px/1.4 'Archivo Narrow',sans-serif;opacity:.85}
.site-foot nav,.site-foot .sf-soc{display:flex;gap:22px;flex-wrap:wrap}
.site-foot a:hover{opacity:.7}
.site-foot .sf-mail{font-family:'Playfair Display SC',serif;font-size:18px;opacity:1}

@media(max-width:900px){
  .about-spread{width:calc(100% - 28px);margin:0 auto 76px;padding-top:7vh}
  .about-grid{grid-template-columns:1fr;gap:26px}
  .about-grid .asp-img{max-width:420px}
  .about-body{column-count:1;font-size:15.5px}
}
@media(max-width:900px){
  .frame-shell{padding:14px 14px 0}
  .ptext .ethos p{line-height:1.7}
  .pidx{gap:10px 18px}
  .findex{grid-template-columns:1fr}
  .frow,.fstripwrap{width:calc(100% - 28px);margin:0 auto 76px}
  .fc{max-width:100%}
  .frow img{max-height:70vh}
  .fstrip img{height:50vh}
  .fstrip .strip-item img{max-width:82vw}
  .caption-key{width:calc(100% - 28px);margin-top:28px}
  .rowsec{padding:7vh 14px 2vh}
  .lstrip{grid-template-columns:repeat(3,1fr)}
  .litem:nth-child(n+4){display:none}
  .site-foot{padding:28px 14px}
}

/* ===== Stills V4 (generated by tools-stills/gen_production_stills.py; edits are overwritten on rebuild) ===== */
:root{--text:var(--frame-text);--line:var(--frame-line);--g:6px;--rh:260px}
.cnt{opacity:.5;font-size:.82em;letter-spacing:1px;margin-left:5px}
.slim{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;gap:10px 24px;padding:9px 26px;background:var(--frame);border-bottom:1px solid var(--frame-line);font-size:11px;letter-spacing:2.2px;text-transform:uppercase;transition:background .3s,color .3s}
.slim nav{display:flex;gap:6px 24px;flex-wrap:wrap}
.slim a{opacity:.8;padding:3px 0}.slim a:hover,.slim a[aria-current]{opacity:1;border-bottom:1px solid currentColor}
.slim .tot{opacity:.45}
.slim.ovl{position:fixed;left:0;right:0;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,0));color:#f2efe8;border-bottom:0}
.slim.ovl.sc2{background:var(--frame);color:var(--frame-text);border-bottom:1px solid var(--frame-line)}
.fovl{position:absolute;z-index:30;left:0;right:0;top:46px;padding:12px 26px;color:#f2efe8}
.fovl .fhead{border-bottom:1px solid rgba(242,239,232,.3)}
.fovl .toggle,.fovl .hamb-btn span{color:#f2efe8;border-color:#f2efe8}.fovl .hamb-btn span{background:#f2efe8}
.panel.single img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;filter:grayscale(.28) contrast(1.05) brightness(.82)}
.panel .hf img{object-position:var(--focus,50% 28%)}
.panel .hf .ph::before{content:"";position:absolute;inset:-6%;background:var(--bd) center/cover no-repeat;filter:blur(38px) brightness(.38) saturate(1.1);opacity:0;transition:opacity .4s}
.panel .hf.contain .ph::before{opacity:1}
.panel .hf.contain img{object-fit:contain;position:relative;object-position:50% 50%}
.panel .hf .ph{background:#000;overflow:hidden}
.panel .hf .ph.dip{display:flex;align-items:center;justify-content:center;gap:6px}
.panel .hf .ph.dip img{position:relative;flex:0 0 auto;width:auto;height:auto;max-width:calc(50% - 3px);max-height:84%;object-fit:contain}
.panel .hf[data-dip] .ph::before{opacity:1}
@media(max-width:900px){.panel .hf .ph.dip img{max-height:62%}}
.idxbar{padding:22px 0 8px;gap:12px 30px}
.idxbar a{color:inherit;border-bottom:1px solid var(--frame-line);opacity:.85}
.idxbar a:hover{opacity:1}
@media(prefers-reduced-motion:reduce){
 .panel .hf{transition:opacity 1.4s ease!important}
 .panel .hf img{filter:grayscale(.28) contrast(1.05) brightness(.82)!important;transition:none!important;animation:none!important}
 .panel .hf .safelight{display:none!important}
}
.panel.full{height:100vh;min-height:560px;aspect-ratio:auto;margin:0}
.panel.full .ptext{padding:140px 26px 4vh}
@media(prefers-reduced-motion:no-preference){.panel.single img{filter:sepia(.7) saturate(1.5) hue-rotate(-8deg) brightness(.24) contrast(.75) blur(2px);animation:dev 1.4s cubic-bezier(.2,.6,.2,1) .15s forwards}}
@keyframes dev{to{filter:grayscale(.28) contrast(1.05) brightness(.82) blur(0)}}
.findex{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px 30px;padding:8px 0 40px;border-bottom:1px solid var(--frame-line)}
.findex h3{font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:400;opacity:.5;margin:14px 0 6px}
.findex a{display:flex;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:.5px;padding:6px 0;opacity:.85;border-top:1px solid var(--frame-line)}
.findex a:hover{opacity:1}.findex a b{font-weight:400;opacity:.5}
.grp{padding:12vh 26px 0;max-width:1232px;margin:0 auto;scroll-margin-top:50px}
.grp .k{opacity:.5;display:block;margin-bottom:6px}
.grp h2{font-family:'Playfair Display SC',serif;font-weight:400;font-size:clamp(34px,5vw,64px);line-height:1}
.rowsec{padding:9vh 26px 3vh;max-width:1232px;margin:0 auto;scroll-margin-top:50px}
.rowsec .k{opacity:.5;display:block;margin-bottom:8px}
.rowsec h2{font-family:'Playfair Display SC',serif;font-weight:400;font-size:clamp(26px,3.8vw,44px)}
.rowsec h2 a:hover{color:var(--sage)}
.rowsec p{margin-top:8px;font-size:14px;opacity:.7;max-width:56ch}
.rowsec .act{display:inline-block;margin-top:12px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;border-bottom:1px solid var(--frame-line)}
.wrap{padding:0 26px;max-width:1232px;margin:0 auto}
.jg{display:flex;flex-wrap:wrap;gap:var(--g);list-style:none}
.jg::after{content:"";flex-grow:1000000}
.jg>li{flex-basis:calc(var(--ar)*var(--rh));min-width:0}
.jg a{display:block}
.jg img{width:100%;height:auto;background:rgba(127,127,127,.12);filter:grayscale(.2) contrast(1.03) brightness(.9);transition:filter .3s}
.jg a:hover img{filter:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 26px 4px;max-width:1232px;margin:0 auto}
.chip{border:1px solid var(--frame-line);background:none;color:inherit;font:inherit;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;padding:5px 10px;cursor:pointer}
.chip[aria-pressed=true]{background:var(--sage);color:#0c0c0b;border-color:var(--sage)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:16px 26px 0;max-width:1232px;margin:0 auto}
.card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.2) contrast(1.03) brightness(.9)}
.card b{display:block;font-weight:400;font-family:'Playfair Display SC',serif;font-size:16px;margin-top:6px;line-height:1.15}
.card span{font-size:10.5px;opacity:.55;letter-spacing:1px}
[hidden]{display:none!important}
.book{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start;padding:22px 26px 0;max-width:1400px;margin:0 auto}
.book .ph img{width:auto;height:auto;max-width:100%;max-height:82vh;filter:grayscale(.2) contrast(1.03) brightness(.9)}
.book .fc{margin-top:0;max-width:none}
.fc-cta{margin:18px 0 0}
.fc-cta .act{display:inline-block;border:1px solid var(--frame-line);padding:12px 20px;font-size:11px;letter-spacing:2px;text-transform:uppercase}
.fc-cta .act:hover{background:var(--sage);color:#0c0c0b;border-color:var(--sage)}
.pn{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:1400px;margin:30px auto 0;padding:14px 26px 0;font-size:11px;letter-spacing:2px;text-transform:uppercase}
.pn a{border-bottom:1px solid var(--frame-line);padding-bottom:3px}.pn .off{opacity:.3}.pn .c{opacity:.6;border:0}
.dhead{max-width:1400px;margin:0 auto;padding:7vh 26px 0}
.dhead .k{opacity:.5;display:block;margin-bottom:6px}
.dhead .k a:hover{color:var(--sage)}
.fc-meta{margin:16px 0 0;font-size:11.5px;letter-spacing:.3px;line-height:1.5;opacity:.6}
.dhead h1,.dhead h2{font-family:'Playfair Display SC',serif;font-weight:400;font-size:clamp(22px,3vw,34px)}
.caption-key{width:calc(100% - 52px);max-width:1180px;margin:30px auto 0;font-size:11px;line-height:1.5;letter-spacing:.4px;opacity:.62}
.pgfoot{max-width:1232px;margin:60px auto 0;padding:0 26px}
.sub-page .frame-shell{padding-bottom:0}
.hero-title.wide{max-width:13ch}
@media(max-width:900px){
 .slim{padding:8px 14px;font-size:10px;letter-spacing:1.6px}.slim .tot{display:none}
 .fovl{padding:10px 14px}
 .findex{grid-template-columns:1fr}
 .grp,.rowsec,.wrap,.chips,.cards,.dhead,.pgfoot{padding-left:14px;padding-right:14px}
 .book{grid-template-columns:1fr;gap:18px;padding:16px 14px 0}.pn{padding:14px 14px 0}
 .panel{aspect-ratio:4/5}.panel.full{height:92vh}.panel.full .ptext{padding:96px 14px 3vh}
 .caption-key{width:calc(100% - 28px)}
 :root{--rh:170px;--g:4px}
}
