@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-opsz-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-opsz-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
[hidden]{display:none!important}

:root{--m:clamp(1.25rem,4vw,4.5rem);--g:max(var(--m),calc((100vw - 90rem)/2 + var(--m)));--bg:#ffffff;--fg:#1f1f1d;--mut:#74746f;--ph:#f0f0ee;--ln:#dddddb;color-scheme:light}
html,body{background:var(--bg)!important;color:var(--fg)!important}
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--bg);color:var(--fg);font:17px/1.65 "Newsreader","Iowan Old Style",Palatino,Georgia,serif}
a{color:inherit;text-decoration:none}
a{transition:opacity .2s}
a:hover{opacity:.5}
main a:hover{opacity:1;color:#4a2b20}
footer a:hover{opacity:1;color:#e0aa64}
#pn a,#pn .sub-f button,#pn .cl{transition:color .2s,opacity .2s}
#pn a:not(.lg):hover,#pn .sub-f button:hover,#pn .cl:hover{opacity:1}
:focus-visible{outline:1px solid var(--fg);outline-offset:3px}
header{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;justify-content:flex-end;pointer-events:none;align-items:center;padding:calc(1.4rem + env(safe-area-inset-top,0px)) var(--g) 1.4rem}
.bar{display:flex;gap:2px;pointer-events:auto}
.bar .brand{background:none;color:#4a2b20;border-radius:9px 0 0 9px;padding:.5rem .85rem;font-size:.9rem;line-height:1;transition:opacity .3s}
.bar .brand:hover,.bar #tg:hover{opacity:1}
.bar #tg{transition:color .2s}
.bar #tg:hover{color:#e0aa64}
.bar .brand,.bar #tg{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:2.7rem;padding:0 1.1rem;font-size:1.2rem;line-height:1;letter-spacing:0;font-weight:400;margin:0}
body.mo .bar .brand{opacity:0;pointer-events:none}
header #tg{pointer-events:auto}
#tg{background:#4a2b20;border:0;border-radius:9px;line-height:1;padding:.5rem .85rem;text-align:center;font:inherit;font-size:.9rem;color:#f2f2ee;cursor:pointer;transition:opacity .2s}
#tg:hover{opacity:.7}
body.onhero header,body.onhero .brand{color:#f2f2ee}

#pn{color:#f2f2ee;position:fixed;top:var(--t,1.4rem);right:var(--r,2rem);width:var(--w,5rem);height:var(--h,2rem);background:#4a2b20;z-index:10;display:flex;flex-direction:column;justify-content:space-between;border-radius:9px;overflow:hidden;visibility:hidden;transition:top .8s cubic-bezier(.645,.045,.355,1),right .8s cubic-bezier(.645,.045,.355,1),width .8s cubic-bezier(.645,.045,.355,1),height .8s cubic-bezier(.645,.045,.355,1),border-radius .8s cubic-bezier(.645,.045,.355,1),background-color .8s cubic-bezier(.645,.045,.355,1),visibility 0s .8s}
#pn.open{top:var(--t,1.4rem);right:var(--r,2rem);width:min(30rem,calc(100% - 2 * var(--r,2rem)));height:min(44rem,calc(100% - var(--t,1.4rem) - 1.4rem));border-radius:9px;overflow:auto;visibility:visible;transition:top .8s cubic-bezier(.645,.045,.355,1),right .8s cubic-bezier(.645,.045,.355,1),width .8s cubic-bezier(.645,.045,.355,1),height .8s cubic-bezier(.645,.045,.355,1),border-radius .8s cubic-bezier(.645,.045,.355,1),background-color .8s cubic-bezier(.645,.045,.355,1),visibility 0s}
#pn>*{opacity:0;width:min(30rem,calc(100vw - 1.6rem));box-sizing:border-box;flex:none;transition:opacity .2s}
#pn.open>*{opacity:1;transition:opacity .6s ease .3s}
#pn.open{overflow-x:hidden}
#pn>div:nth-child(2){display:flex;flex-direction:column;padding:calc(3.6rem + env(safe-area-inset-top,0px)) 2.5rem 0}
#pn>.contact{padding:0}
.ci{padding:0 2.5rem 2.6rem}
.ci a{font-size:.85rem;color:#f2f2ee}
.sb{background:none;padding:1.5rem 2.5rem calc(1.6rem + env(safe-area-inset-bottom,0px))}
.sb .sub-f{margin:0 0 .9rem}
.sb .sub-n{margin:0}
#pn>.cl,#pn.open>.cl{position:absolute;top:0;right:0;width:var(--w,5rem);height:var(--h,2rem);padding:0;display:grid;place-items:center;line-height:1;opacity:1;z-index:2;color:#f2f2ee;transition:top .8s cubic-bezier(.645,.045,.355,1),right .8s cubic-bezier(.645,.045,.355,1)}
#pn.open>.cl{top:var(--ct,0);right:var(--cr,0)}
.cl span{font-size:1.2rem;grid-area:1/1;transition:opacity .35s ease}
.cl .b{opacity:0}
#pn.open .cl .a{opacity:0}
#pn.open .cl .b{opacity:1}
#pn>.cl:hover{opacity:.5}
#sc{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);z-index:9;opacity:0;visibility:hidden;transition:opacity .45s ease,backdrop-filter .45s ease,-webkit-backdrop-filter .45s ease,visibility 0s .45s}
#sc.open{opacity:1;visibility:visible;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:opacity .45s ease,backdrop-filter .45s ease,-webkit-backdrop-filter .45s ease,visibility 0s}
@media(prefers-reduced-motion:reduce){#pn,#sc,#pn>*{transition:none!important}}
.cl{background:none;border:0;font:inherit;font-size:.9rem;color:var(--fg);cursor:pointer}
nav{display:flex;flex-direction:column;margin-top:1rem}
nav a{font-size:2rem;line-height:1.3;font-weight:300}
nav a[aria-current]{font-weight:400}
.sub{display:flex;flex-direction:column;padding-left:.2rem;margin:.1rem 0 .6rem}
.sub a{font-size:1.05rem;color:rgba(242,242,238,.7);line-height:1.7}
.contact{font-size:.85rem;color:rgba(242,242,238,.75);line-height:1.8}
.contact a{display:block}
.contact .lg{margin-bottom:1.7rem}
.sub-f{display:flex;gap:1rem;align-items:baseline;margin:1.4rem 0;border-bottom:1px solid rgba(242,242,238,.35)}
.sub-f:focus-within{border-color:#f2f2ee}
.sub-f input{flex:1;min-width:0;background:none;border:0;outline:0;font:inherit;color:#f2f2ee;padding:.3rem 0}
.sub-f input::placeholder{color:rgba(242,242,238,.85)}
.sub-f button{background:none;border:0;font:inherit;color:#f2f2ee;cursor:pointer;padding:.3rem 0;transition:opacity .2s}
.sub-f button:hover{opacity:.5}
footer{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;padding:2.5rem var(--g) 2rem;box-sizing:border-box;font-size:.8rem;background:#4a2b20;color:rgba(242,242,238,.8)}
footer a{color:#f2f2ee}
footer span{margin-right:auto}
@media(max-width:700px){footer{padding:2rem var(--m) 1.6rem}}
.sub-n{font-size:.75rem;line-height:1.5;color:rgba(242,242,238,.72);margin:-.8rem 0 1.4rem}
.lg img{display:block;height:4.4rem;width:auto}
main{padding:6rem var(--m) calc(5rem + env(safe-area-inset-bottom,0px));min-height:100vh;max-width:90rem;margin:0 auto}
main.h{padding:0;max-width:none}
.hero{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:flex-end;padding:2.5rem var(--m);background:#000;color:#f2f2ee}
.hero .hl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.75rem;opacity:.5}
.hero .media{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;z-index:0}
.hero h2{position:relative;z-index:1;font-weight:300;font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.12;max-width:12ch}
@media(max-aspect-ratio:1/1){.hero .media{width:140%;max-width:none;left:-20%;height:auto;top:50%;transform:translateY(-47.8%);object-fit:fill}}
.sec{padding:6rem var(--m);max-width:90rem;margin:0 auto}
.sec:last-child{padding-bottom:7rem}
.sec h2{font-weight:400;font-size:1.3rem;line-height:1.2;color:#4a2b20;margin:0 0 1rem}
.sec.st{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem 6rem}
.sec.st p{font-size:1.15rem;line-height:1.32;max-width:30rem}
.pol{display:grid;grid-template-columns:6rem minmax(0,1fr);gap:0 2rem;max-width:58rem}
.pol .mk{color:#4a2b20;font-size:1.7rem;line-height:1;margin-top:-.3rem}
.pol .txt{max-width:40rem}
.pol h2{font-weight:400;font-size:.95rem;color:#4a2b20;margin:2.4rem 0 .6rem}
.pol ul{margin:0 0 1.1rem;padding-left:1.1rem}
.pol .d{color:var(--mut);font-size:.85rem;margin-bottom:.5rem}
h1{font-weight:400;font-size:1rem;margin-bottom:2rem}
.ph{background:var(--ph);width:100%;display:flex;align-items:flex-end;padding:.6rem .8rem}
.ph span{font-size:.72rem;color:var(--mut)}
figure figcaption{font-size:.82rem;color:var(--mut);margin-top:.5rem;line-height:1.5}
.home{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:4rem;align-items:end}
.home h2,.about h2{font-weight:400;font-size:1rem;color:#4a2b20;margin:2rem 0 .4rem}
.home p+p{margin-top:1rem}
.txt{max-width:36rem}
.txt p{margin-bottom:1.1rem}
.more{display:inline-block;margin-top:1.2rem;font-size:.9rem}
.wk{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem 2rem;align-items:start}
.wk a:nth-child(1){grid-column:1/8}.wk a:nth-child(2){grid-column:9/13;margin-top:6rem}.wk a:nth-child(3){grid-column:3/8}
.wg h2{font-weight:400;font-size:.95rem;color:#4a2b20;margin:4rem 0 1.4rem}
.wg h2:first-child{margin-top:0}
.wf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.6rem 2rem}
.wf>a{display:block}
.cp{font-size:.82rem;margin-top:.6rem;line-height:1.5}
.cp span{color:var(--mut)}
.lead{color:var(--mut);font-size:.9rem;margin:-1rem 0 2.5rem}
.single{display:flex;flex-direction:column;gap:4rem;max-width:44rem}
.single figure:nth-child(2){align-self:flex-end;width:78%}
.fan{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}
.fan>div{display:flex;flex-direction:column;gap:1rem}
.fan>div:nth-child(2){margin-top:5rem}
.cer{columns:3;column-gap:2.5rem}
.cer figure{break-inside:avoid;margin:0 0 3rem}
.idx h2{font-weight:400;font-size:.95rem;color:#4a2b20;margin:3rem 0 1rem}
.idx h2:first-of-type{margin-top:0}
.idx a{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:.9rem 0;border-top:1px solid var(--ln);max-width:44rem}
.idx a small{color:var(--mut);font-size:.8rem;padding-top:.2rem}
.idx a span{display:block}
.idx a em{display:block;font-style:normal;color:var(--mut);font-size:.92rem;margin-top:.3rem}
.essay{max-width:34rem}
.essay h1{font-size:1.5rem;margin-bottom:.4rem}
.essay .d{color:var(--mut);font-size:.85rem;margin-bottom:2rem}
.note{margin-top:2rem;font-size:.82rem;color:var(--mut)}
.about{max-width:36rem}
.about .ph{margin-bottom:2.5rem}
.about h2{margin-top:2.5rem}
.about p.l{margin-bottom:.5rem}
.about a::after{content:" \2197";color:#4a2b20}
@media(max-width:900px){.cer{columns:2}.home{grid-template-columns:1fr;gap:2rem}}
@media(max-width:760px){
body{font-size:16px}
:root{--mut:#5c5c57}
#pn.open{top:0;right:0;width:var(--ow,100%);height:var(--oh,100%);border-radius:0}
#pn>*{width:100vw}
#pn>div:nth-child(2){padding-left:1.8rem;padding-right:1.8rem}
.ci{padding-left:1.8rem;padding-right:1.8rem}
.sb{padding-left:1.8rem;padding-right:1.8rem}
.contact{font-size:.95rem}
.ci a{font-size:.95rem}
.sub-f input,.sub-f button{font-size:1rem}
.sub-n{font-size:.85rem;color:rgba(242,242,238,.8)}
.cp{font-size:.95rem;line-height:1.5;margin-top:.7rem}
.wg h2{font-size:1.05rem;margin:3.2rem 0 1.2rem}
footer{font-size:.88rem}
.bar #tg{font-size:0;width:2.7rem;padding:0;background:linear-gradient(#f2f2ee,#f2f2ee) center calc(50% - 4px)/1.25rem 1.5px no-repeat,linear-gradient(#f2f2ee,#f2f2ee) center calc(50% + 4px)/1.25rem 1.5px no-repeat,#4a2b20}
.cl .a{display:block;width:1.25rem;height:9.5px;font-size:0;background:linear-gradient(#f2f2ee,#f2f2ee) top/100% 1.5px no-repeat,linear-gradient(#f2f2ee,#f2f2ee) bottom/100% 1.5px no-repeat}
.cl .b{display:block;position:relative;width:1.25rem;height:1.25rem;font-size:0}
.cl .b::before,.cl .b::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;background:#f2f2ee}
.cl .b::before{transform:translateY(-50%) rotate(45deg)}
.cl .b::after{transform:translateY(-50%) rotate(-45deg)}
figure figcaption{font-size:.92rem}
nav a{font-size:1.7rem}
main{padding:5.5rem var(--m) 4rem}
.hero{padding:2rem var(--m)}
.sec{padding:4rem var(--m)}.sec h2{font-size:1.2rem}.sec.st{display:block}.sec.st>div+div{margin-top:3rem}.pol{display:block}.pol .mk{display:block;margin-bottom:1.2rem}.sec.st p{font-size:1.2rem}
.wk{display:flex;flex-direction:column;gap:2rem}.wk a:nth-child(n){margin-top:0}
.fan{grid-template-columns:1fr}.fan>div:nth-child(2){margin-top:0}
.single figure:nth-child(2){width:100%}
.cer{columns:1}
.wf{grid-template-columns:1fr;gap:2.4rem}
.idx a{grid-template-columns:1fr;gap:.2rem}
}
@media(prefers-reduced-motion:no-preference){main{animation:in .25s ease-out}@keyframes in{from{opacity:0}to{opacity:1}}}


/* drop-down menu: attached to the top edge, slides down over the page */
#pn,#pn.open{top:0;left:0;right:0;width:100%;height:min(100vh,38rem);height:min(100dvh,38rem);border-radius:0;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
#pn{transform:translateY(-102%);visibility:hidden;transition:transform .7s cubic-bezier(.645,.045,.355,1),visibility 0s .7s}
#pn.open{transform:none;visibility:visible;transition:transform .7s cubic-bezier(.645,.045,.355,1),visibility 0s}
#pn>*{width:auto}
#pn>div:nth-child(2){grid-column:1;grid-row:1;padding:calc(4.6rem + env(safe-area-inset-top,0px)) var(--g) 0}
#pn>.contact{grid-column:2;grid-row:1;align-self:end;max-width:26rem;padding:0 0 0 0}
.ci{padding:0 0 2rem}
.sb{padding:0 0 calc(2rem + env(safe-area-inset-bottom,0px))}
#pn>.cl,#pn.open>.cl{top:var(--ct,0);right:var(--cr,0);transition:none}
@media(max-width:760px){
#pn,#pn.open{display:flex;flex-direction:column;justify-content:space-between;left:auto;right:0;width:84%;height:100vh;height:100dvh}
#pn{transform:translateX(102%)}
#pn.open{transform:none}
#pn>*{width:100%}
#pn>div:nth-child(2){padding:calc(4.6rem + env(safe-area-inset-top,0px)) 1.8rem 0}
#pn>.contact{max-width:none;padding:0}
.ci{padding:0 1.8rem 2rem}
.sb{padding:0 1.8rem calc(1.8rem + env(safe-area-inset-bottom,0px))}
}
/* close icon (x) inside the panel, all sizes */
.cl .a{display:none}
.cl .b{display:block;position:relative;width:1.25rem;height:1.25rem;font-size:0}
.cl .b::before,.cl .b::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;background:#f2f2ee}
.cl .b::before{transform:translateY(-50%) rotate(45deg)}
.cl .b::after{transform:translateY(-50%) rotate(-45deg)}
/* desktop: side panel sliding in from the right edge */
@media(min-width:761px){
#pn,#pn.open{display:flex;flex-direction:column;justify-content:space-between;left:auto;right:0;width:min(28rem,100%);height:100vh;height:100dvh}
#pn{transform:translateX(102%)}
#pn.open{transform:none}
#pn>*{width:100%}
#pn>div:nth-child(2){padding:calc(4.6rem + env(safe-area-inset-top,0px)) 2.5rem 0}
#pn>.contact{max-width:none;padding:0}
.ci{padding:0 2.5rem 2rem}
.sb{padding:0 2.5rem calc(2rem + env(safe-area-inset-bottom,0px))}
}


/* permanent brown strip on the right edge; the menu icon lives in it and the panel slides over it */
:root{--sw:4.5rem}
@media(max-width:760px){:root{--sw:3.6rem}}
body{padding-right:var(--sw)}
header{padding-right:calc(var(--sw) + var(--g))}
header .bar #tg{position:fixed;top:0;right:0;width:var(--sw);height:100vh;height:100dvh;padding:0;margin:0;border-radius:0;font-size:0;opacity:1;transition:none;background:linear-gradient(#f2f2ee,#f2f2ee) center calc(2.75rem + env(safe-area-inset-top,0px) - 4px)/1.25rem 1.5px no-repeat,linear-gradient(#f2f2ee,#f2f2ee) center calc(2.75rem + env(safe-area-inset-top,0px) + 4px)/1.25rem 1.5px no-repeat,#4a2b20}
header .bar #tg:hover{background:linear-gradient(#e0aa64,#e0aa64) center calc(2.75rem + env(safe-area-inset-top,0px) - 4px)/1.25rem 1.5px no-repeat,linear-gradient(#e0aa64,#e0aa64) center calc(2.75rem + env(safe-area-inset-top,0px) + 4px)/1.25rem 1.5px no-repeat,#4a2b20}
#pn>.cl,#pn.open>.cl{width:var(--sw);height:2.7rem;top:calc(1.4rem + env(safe-area-inset-top,0px));right:0;transition:none}
/* name back on the left, white on a brown block so it stays readable on light pages */
header{justify-content:flex-start;padding-left:var(--g)}
header .bar .brand{display:none}
#pn>.pname{position:absolute;top:calc(1.4rem + env(safe-area-inset-top,0px));left:0;width:auto;height:2.7rem;display:flex;align-items:center;padding-left:1.8rem;font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif;font-weight:500;font-size:2.7rem;line-height:1;color:#9d6138}
/* push: the page slides left by the width of the open panel instead of being covered */
:root{--pw:min(17rem,100vw)}
@media(max-width:760px){:root{--pw:78vw}}
main{transition:transform .7s cubic-bezier(.645,.045,.355,1)}
body.mo main{transform:none}
#sc,#sc.open{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
@media(prefers-reduced-motion:reduce){main{transition:none}}
/* the strip stays in place above everything; the panel slides out from behind it and the page is pushed by exactly the same distance */
header{z-index:20}
header .bar #tg:focus,header .bar #tg:focus-visible{outline:none}
#pn,#pn.open{right:0;left:auto;width:calc(var(--pw) + var(--sw));padding-right:var(--sw);box-sizing:border-box;box-shadow:-1px 0 0 #4a2b20}
#pn{transform:translateX(calc(100% - var(--sw)))}
#pn.open{transform:none}
@media(max-width:760px){#pn>.pname{font-size:2.3rem}
#pn,#pn.open{left:0;right:0;width:100%;padding-right:0;height:100vh;height:100dvh;box-shadow:none}
#pn{transform:translateY(-102%)}
#pn.open{transform:none}
body.mo main{transform:none}
:root{--sw:0px;--sh:3.4rem}
body{padding-top:calc(var(--sh) + env(safe-area-inset-top,0px))}
html body::after{top:0;left:0;right:0;bottom:auto;width:auto;height:calc(var(--sh) + env(safe-area-inset-top,0px))}
main:not(.h){padding-top:2.5rem}
.hero{height:calc(100vh - var(--sh));height:calc(100dvh - var(--sh) - env(safe-area-inset-top,0px))}
#pn>.pname{top:env(safe-area-inset-top,0px);height:var(--sh)}
#pn>div:nth-child(2){padding-top:calc(5rem + env(safe-area-inset-top,0px))}
html header .bar #tg,html header .bar #tg:hover{top:env(safe-area-inset-top,0px);right:var(--g);width:2.7rem;height:var(--sh);border-radius:0;background:linear-gradient(#f2f2ee,#f2f2ee) center calc(50% - 4px)/1.25rem 1.5px no-repeat,linear-gradient(#f2f2ee,#f2f2ee) center calc(50% + 4px)/1.25rem 1.5px no-repeat,transparent;transition:background-size .4s cubic-bezier(.645,.045,.355,1),background-color .4s ease}
body.mo header .bar #tg,body.mo header .bar #tg:hover{background-size:0 1.5px,0 1.5px;background-color:transparent}
header .bar #tg::before,header .bar #tg::after{top:calc(50% - .75px)}}
#pn>.cl,#pn.open>.cl{display:none}
header .bar #tg::before,header .bar #tg::after{content:"";position:absolute;left:50%;top:calc(2.75rem + env(safe-area-inset-top,0px));width:1.25rem;margin-left:-.625rem;height:1.5px;background:#f2f2ee;opacity:0;transition:opacity .3s}
header .bar #tg::before{transform:rotate(45deg)}
header .bar #tg::after{transform:rotate(-45deg)}
body::after{content:"";position:fixed;top:0;right:0;bottom:0;width:var(--sw);background:#4a2b20;z-index:8;pointer-events:none}
header .bar #tg,header .bar #tg:hover{background-color:transparent;transition:background-size .4s cubic-bezier(.645,.045,.355,1)}
body.mo header .bar #tg,body.mo header .bar #tg:hover{background-size:0 1.5px,0 1.5px}
#pn>*{transition:opacity .45s ease}
/* menu content simply fades in with the panel */
#pn.open>*{opacity:1;transition:opacity .4s ease .25s}
/* desktop home: image left, text beside it, everything in one screen (phones keep the scrolling page) */
@media(min-width:761px){
main.h{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);height:100vh;height:100dvh;min-height:0;overflow:hidden}
main.h .hero{height:100%;min-height:0}
main.h .hero .media{object-fit:cover;object-position:50% 48%}
main.h .sec.st{display:grid;grid-template-columns:1fr;align-content:center;gap:2.6rem;max-width:none;margin:0;padding:2rem clamp(2rem,5vw,6rem);overflow:auto}
main.h .sec.st p{max-width:28rem}
}
.wr{display:flex;align-items:center;gap:.2rem}
.pl{position:relative;width:2.4rem;height:2.4rem;background:none;border:0;padding:0;font-size:0;color:rgba(242,242,238,.9);cursor:pointer;transition:color .2s}
.pl::before,.pl::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transition:transform .25s ease}
.pl::before{width:1rem;height:2px;margin:-1px 0 0 -.5rem}
.pl::after{width:2px;height:1rem;margin:-.5rem 0 0 -1px}
.pl[aria-expanded=true]::after{transform:scaleY(0)}
@media(min-width:761px){
body::after{content:""}
header .bar #tg,header .bar #tg:hover{background-image:none}
header .bar #tg::before{display:none}
header .bar .brand{display:block;position:fixed;top:calc(100vh - 1.8rem - 1.2em);top:calc(100dvh - 1.8rem - 1.2em);right:calc((var(--sw) + 1.2em) / 2);width:max-content;height:1.2em;padding:0;white-space:nowrap;font-size:1rem;line-height:1.2;color:#f2f2ee;background:none;border-radius:0;z-index:2;transform-origin:100% 100%;transform:rotate(90deg);transition:top .7s cubic-bezier(.645,.045,.355,1),right .7s cubic-bezier(.645,.045,.355,1),transform .7s cubic-bezier(.645,.045,.355,1)}
body.mo header .bar .brand{opacity:1;pointer-events:auto;right:calc((var(--sw) - 2.05rem) / 2);transform:none}
#pn .sb{padding-bottom:calc(6.9rem + env(safe-area-inset-bottom,0px))}
header .bar #tg::after{content:"close";left:0;right:0;top:2.25rem;width:auto;height:auto;margin:0;background:none;transform:none;text-align:center;font-size:1rem;line-height:1;color:#f2f2ee}
html body.mo header .bar #tg:hover::after{background:none;color:#f2f2ee}
}
header .bar #tg::before,header .bar #tg::after{transition:opacity .4s ease,background-color .2s}
body.mo header .bar #tg::before,body.mo header .bar #tg::after{opacity:1}
body.mo header .bar #tg:hover::before,body.mo header .bar #tg:hover::after{background:#f2f2ee}
@media(min-width:761px){
html body header .bar #tg::before,html body header .bar #tg::after,html body.mo header .bar #tg:hover::before,html body.mo header .bar #tg:hover::after{content:"";display:block;position:absolute;left:50%;right:auto;top:calc(2.75rem - .75px);width:1.25rem;height:1.5px;margin:0 0 0 -.625rem;padding:0;background:#f2f2ee;opacity:1;font-size:0;transform-origin:50% 50%}
html body header .bar #tg::before{transform:translateY(-7px);transition:transform .5s cubic-bezier(.645,.045,.355,1)}
html body header .bar #tg::after{transform:translateY(7px);transition:transform .5s cubic-bezier(.645,.045,.355,1)}
html body.mo header .bar #tg::before{transform:rotate(45deg)}
html body.mo header .bar #tg::after{transform:rotate(-45deg)}
html header .bar #tg,html header .bar #tg:hover{background-image:linear-gradient(#f2f2ee,#f2f2ee);background-repeat:no-repeat;background-position:center calc(2.75rem - .75px);background-size:1.25rem 1.5px;transition:background-size .3s ease}
html body.mo header .bar #tg,html body.mo header .bar #tg:hover{background-size:0 1.5px}
}
}
#pn>div:nth-child(2){padding-top:calc(5.6rem + env(safe-area-inset-top,0px))}
@media(min-width:761px){#pn>.pname{padding-left:2.5rem;font-size:3.4rem}}


html #pn nav a{font-size:1.4rem}
html #pn .sub a{font-size:.95rem}
html #pn .pl{margin-left:-.4rem}
html header .bar .brand{font-size:1.5rem;color:#c28a5e}
html #pn .pl::before{width:.65rem;height:1.5px;margin:-.75px 0 0 -.325rem}
html #pn .pl::after{width:1.5px;height:.65rem;margin:-.325rem 0 0 -.75px}
/* strip and panel on the left (desktop only) */
@media(min-width:761px){
html body{padding-right:0;padding-left:var(--sw)}
html header{padding-right:var(--g);padding-left:0}
html body::after{right:auto;left:0}
html header .bar #tg{right:auto;left:0}
html #pn,html #pn.open{right:auto;left:0;padding-right:0;padding-left:0;box-shadow:1px 0 0 #4a2b20}
html #pn{transform:translateX(calc(-100% + var(--sw)))}
html header .bar .brand{right:auto;left:calc((var(--sw) + 1.2em) / 2);transform-origin:0 100%;transform:rotate(-90deg)}
html body.mo header .bar .brand{left:calc(var(--sw) / 2 + .625rem);transform:none}
html #pn>div:nth-child(2){padding-left:calc(var(--sw) + 1rem)}
html #pn .sb{padding-left:calc(var(--sw) + 1rem)}
html #pn .ci{padding-left:calc(var(--sw) + 1rem)}
html #pn .sub{padding-left:2.5rem}
}


@media(min-width:761px){
html header .bar .brand{font-size:calc(var(--nf,40) * 1px)}
html header .bar .brand{transition:top .7s cubic-bezier(.645,.045,.355,1),right .7s cubic-bezier(.645,.045,.355,1),left .7s cubic-bezier(.645,.045,.355,1),transform .7s cubic-bezier(.645,.045,.355,1),font-size .7s cubic-bezier(.645,.045,.355,1),color .7s ease}
html #pn .sb{padding-bottom:calc(3.6rem + var(--nf,40) * 1.2px)}
html header .bar .brand{color:#a96f46}
html body.mo header .bar .brand{color:#c28a5e}
}


@media(min-width:761px){
html header .bar .brand{left:calc(var(--sw) / 2 + .625rem);transform:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s .35s}
html body.mo header .bar .brand{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s ease .25s,visibility 0s}
}


@media(min-width:761px){
html header .bar .brand,html body.mo header .bar .brand{display:none}
html #pn .sb{padding-bottom:calc(2rem + env(safe-area-inset-bottom,0px))}
}


html #pn>.nb{display:block;flex:none;box-sizing:border-box;width:100%;background:#cdbba6;color:#4a2b20;padding:1.1rem 1.8rem 1.25rem;font-size:1.6rem;line-height:1.2;white-space:nowrap;text-decoration:none}
html #pn>div:nth-child(2){flex:1 1 auto}
@media(min-width:761px){
html #pn>.nb{padding-left:calc(var(--sw) / 2 + .625rem);padding-right:2.5rem;font-size:calc(var(--nf,40) * 1px)}
html #pn .sb{padding-bottom:calc(1.8rem + env(safe-area-inset-bottom,0px))}
html body::after{background:linear-gradient(to top,#cdbba6 var(--nbh,86px),#4a2b20 var(--nbh,86px))}
}


.lgo{display:none}
@media(min-width:761px){
html header .bar .lgo{display:flex;position:fixed;left:0;bottom:0;width:var(--sw);height:var(--nbh,86px);align-items:center;justify-content:center;z-index:9;opacity:1;transition:opacity .35s ease .25s}
html header .bar .lgo img{display:block;height:3rem;width:auto}
html body.mo header .bar .lgo{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}
}


html #pn>.nb,html #pn.open>.nb{opacity:1;color:#4a2b20;transition:none}


@media(min-width:761px){
html body.mo header .bar .lgo{opacity:1;visibility:visible;pointer-events:auto;transition:none}
html #pn>.nb{padding-left:calc(var(--sw) + 1rem);padding-top:1.94rem;padding-bottom:.41rem}
}


html #pn>div:nth-child(2),html #pn>.contact,html #pn>.nb,html #pn.open>div:nth-child(2),html #pn.open>.contact,html #pn.open>.nb{opacity:1;transition:none}
.nbl{display:none}
@media(min-width:761px){
html #pn>.nb{position:relative}
html #pn>.nb .nbl{display:flex;position:absolute;left:0;top:0;bottom:0;width:var(--sw);align-items:center;justify-content:center}
html #pn>.nb .nbl img{display:block;height:3rem;width:auto}
html header .bar .lgo,html body.mo header .bar .lgo{transition:opacity .2s ease .85s}
html body.mo header .bar .lgo{opacity:0;visibility:hidden;pointer-events:none;transition:none}
}
@media(max-width:760px){
html #pn>.nb,html header .bar .lgo{display:none}
}
@media(min-width:761px){
html body #pn{transition:transform .7s cubic-bezier(.4,0,.2,1) .15s,visibility 0s .86s}
html body #pn.open{transition:transform .5s cubic-bezier(.4,0,.2,1),visibility 0s}
html body #pn>div:nth-child(2),html body #pn>.contact,html body #pn>.nb .nt{opacity:0;transform:translateX(-40px);transition:opacity .35s ease,transform .5s cubic-bezier(.4,0,.2,1)}
html body #pn.open>div:nth-child(2),html body #pn.open>.contact,html body #pn.open>.nb .nt{opacity:1;transform:none;transition:opacity .5s ease .3s,transform .5s ease .3s}
html body #pn>.nb .nt{display:inline-block}
html header .bar .lgo,html body.mo header .bar .lgo{opacity:1;visibility:visible;pointer-events:auto;transition:none}
html #pn>.nb .nbl{display:none}
html body header .bar #tg::before,html body header .bar #tg::after{transition:transform .6s cubic-bezier(.4,0,.2,1) .15s}
html header .bar #tg,html header .bar #tg:hover{transition:background-size .6s cubic-bezier(.4,0,.2,1) .15s}
html body.mo header .bar #tg::before,html body.mo header .bar #tg::after{transition:transform .5s cubic-bezier(.4,0,.2,1)}
html body.mo header .bar #tg,html body.mo header .bar #tg:hover{transition:background-size .5s cubic-bezier(.4,0,.2,1)}
}
.essay p+p{margin-top:1.1em}
.essay .gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(14rem,100%),1fr));gap:1rem;margin-top:3rem}
.ci .lb{display:block;font-size:.85rem;line-height:1.5;color:rgba(242,242,238,.72);margin-bottom:.2rem}
/* reading hierarchy: page title > section heading > text; space separates sections */
main h1,.essay h1{font-size:clamp(1.6rem,2.4vw,2rem);font-weight:300;line-height:1.2;letter-spacing:-.005em;margin-bottom:2.8rem}
.essay h1{margin-bottom:.5rem}
.pol h2,.about h2,.idx h2,.wg h2{font-size:1.2rem;font-weight:400;line-height:1.3;color:#4a2b20;margin:3.6rem 0 .9rem}
.pol .txt>h1+.d+h2,.about>figure+h2,.idx>h2:first-child,.wg>h2:first-child{margin-top:0}
.pol .d{margin-bottom:2.8rem}
.sb .lb{display:block;font-size:.85rem;line-height:1.5;color:rgba(242,242,238,.72);margin-bottom:.2rem}
.pol h1{margin-bottom:.5rem}
/* menu: contact and mailing list read as two labelled sections, apart from the navigation */
#pn .ci .lb,#pn .sb .lb{color:#cdbba6;font-size:.85rem;letter-spacing:.02em;border-top:1px solid rgba(242,242,238,.2);padding-top:.8rem;margin-bottom:.45rem}
#pn .ci{padding-bottom:2.4rem}
#pn .ci a{font-size:1rem}
/* about: photograph and text side by side; the photograph stays in view while the text scrolls */
.about{max-width:none}
.about .bio-img img{display:block;width:100%;height:auto}
.about .bio-txt{max-width:36rem}
.about .bio-txt>h2:first-child{margin-top:0}
/* wide screens: one screen, no page scroll. photograph as large as the height allows,
   text scaled to the window height so it fits beside it; on very short windows the text column scrolls */
@media (min-width:1000px) and (min-height:600px){
main.ab{height:100vh;height:100dvh;min-height:0;max-width:none;padding:0;overflow:hidden}
main.ab .about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto;align-content:center;align-items:start;gap:clamp(2rem,3vw,4rem);height:100%;padding:0 var(--m) 0 calc(var(--m) * .6)}
/* photograph starts level with the first line of the bio: text padding + heading line + heading gap */
main.ab .bio-img{margin:calc(1.2rem + 1.2rem * 1.3 + .5rem + 3px) 0 0}
main.ab .bio-img img{width:auto;max-width:100%;max-height:calc(100dvh - 9rem)}
main.ab .bio-txt{max-height:100vh;max-height:100dvh;overflow:auto;padding-block:1.2rem;line-height:1.5;max-width:36rem}
main.ab .bio-txt h2{font-size:1.2rem;line-height:1.3;margin:1.3rem 0 .5rem}
main.ab .bio-txt>h2:first-child{margin-top:0}
main.ab .bio-txt p:not(.l)+p:not(.l){margin-top:.6em}
main.ab .bio-txt p.l{margin-bottom:.15em}
main.ab .bio-txt p.l[style]{margin-top:.6em!important}
}
@media (max-width:760px){.about .bio-img{margin-bottom:3rem}}
.about .bio-txt p:not(.l)+p:not(.l){margin-top:1rem}
/* one text size for running text on every page */
:root{--fs:14.5px}
body{font-size:var(--fs)}
.sec.st p,main.h .sec.st p{font-size:var(--fs);line-height:1.6}
.essay p,.pol p,.about p{font-size:var(--fs)}
/* ---- the site's one layout: menu on the left, images (or the page title) in the middle, text on the right ---- */
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,3vw,4rem);align-items:start}
.split>.sm,.split>.st{min-width:0}
.split>.st{max-width:36rem}
.split>.sm h1{margin-bottom:.6rem}
.split .d{color:var(--mut);font-size:.85rem;margin:0}
.split>.sm .mk{display:block;margin-top:1.6rem;color:#4a2b20;font-size:1.7rem;line-height:1}
.split>.st>h1{margin-bottom:.6rem}
.split>.st h2{font-size:1.2rem;font-weight:400;line-height:1.3;color:#4a2b20;margin:2.6rem 0 .6rem}
.split>.st>h2:first-child,.split .idx>h2:first-child{margin-top:0}
.split.titled>.sm{position:sticky;top:2.5rem}
.split .et{margin-top:2rem}
.split .et p+p,.split.doc>.st p+p{margin-top:1.1em}
.split.imaged>.sm{display:flex;flex-direction:column;gap:1.5rem}
.split.head{margin-bottom:.4rem}
.split.head .lead{margin:.4rem 0 0}
.split.row{margin-top:3.6rem}
.split.row>.sm{display:flex;flex-direction:column;gap:1rem}
.split.row>.st h2{margin:0 0 .4rem}
.split.row .wt{margin:0}
.split.row .wc{color:var(--mut);margin:.2rem 0 0;font-size:.92rem;line-height:1.5}
.split.row .more{margin-top:.8rem}
.split figure{margin:0}
@media (max-width:999px){
.split{grid-template-columns:minmax(0,1fr);gap:1.4rem}
.split.titled>.sm{position:static}
.split.row{margin-top:2.6rem}
}
/* about follows the same columns */
@media (min-width:1000px) and (min-height:600px){
main.ab{max-width:90rem;margin:0 auto}
main.ab .about{padding:0 var(--m)}
}
.split.essay{max-width:none}
.split.titled .et{margin-top:.55rem}
@media (max-width:999px){.split>.sm:empty{display:none}}
/* gallery: several images of one thing, all visible in a grid */
.gg{display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:1rem;align-items:start}
.gg figure.wide{grid-column:1/-1}
.gg figcaption{font-size:.85rem}
@media (min-width:1000px){.split.imaged>.sm{position:sticky;top:2.5rem}}
/* phones and tablets: text first, images after it (a page title stays at the top) */
@media (max-width:999px){
.split:not(.titled)>.sm{order:2}
.split.row>.st{margin-bottom:.2rem}
}
@media (max-width:999px),(max-height:599px){
.about{display:flex;flex-direction:column}
.about .bio-img{order:2;margin:3rem 0 0}
}
@media (max-width:999px){.split.row{gap:.8rem}}
/* previous / next essay at the end of each essay */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3.6rem;padding-top:1.2rem;border-top:1px solid var(--ln)}
.pn a{display:flex;flex-direction:column;gap:.2rem}
.pn .nx{text-align:right;align-items:flex-end}
.pn small{font-size:.8rem;color:var(--mut)}
.pn span{color:var(--fg)}
.pn a:hover span{color:#4a2b20}
.pn a{font-size:var(--fs);line-height:1.4;font-weight:400}
/* ---- type scale and colour, consolidated ----
   four sizes in the content: title, heading, text, small
   three colours: text, muted (secondary information), umber (section headings only) */
:root{--t-title:clamp(1.6rem,2.4vw,2rem);--t-head:1.12rem;--t-small:12.5px}
main h1,.essay h1,.split h1{font-size:var(--t-title)}
main h2,.sec h2,.split>.st h2,.about h2,main.ab .bio-txt h2,.split.row>.st h2,.idx h2,.pol h2,.wg h2,.home h2{font-size:var(--t-head);font-weight:400;color:#4a2b20}
main p,.idx a span,.idx a em,.pn span,.wt,.about p.l,.split.row .wt{font-size:var(--fs)}
figure figcaption,.gg figcaption,.split .d,.essay .d,.pol .d,.lead,.wc,.split.row .wc,.idx a small,.pn small,.cp,.note,.more,main .more{font-size:var(--t-small);line-height:1.5}
.lead,.wc,.split.row .wc,figure figcaption,.d,.idx a small,.idx a em,.pn small{color:var(--mut)}
main a:hover,main a:hover span,.pn a:hover span,.split.row h2 a:hover{opacity:.55;color:inherit}
main a{transition:opacity .2s}
.idx h2 a,.split.row h2 a{color:inherit}
.split.doc>.st p.l{margin:0}.split.doc>.st p.l+p.l{margin-top:.3em}
.split figure img{display:block;width:100%;height:auto;background:#000}
/* enlarged view of a photograph */
img[data-full]{cursor:zoom-in}
.lb-v{position:fixed;inset:0;z-index:30;background:#0d0d0c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;padding:calc(3.5rem + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(1.4rem + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));cursor:zoom-out;opacity:0;transition:opacity .25s ease}
.lb-v.on{opacity:1}
.lb-v img{max-width:100%;max-height:calc(100% - 2.5rem);width:auto;height:auto;object-fit:contain;background:none}
.lb-v p{margin:0;font-size:var(--t-small);line-height:1.5;color:rgba(242,242,238,.7);text-align:center;max-width:40rem}
.lb-v button{position:absolute;top:calc(1rem + env(safe-area-inset-top,0px));right:max(1.2rem,env(safe-area-inset-right,0px));background:none;border:0;font:inherit;font-size:var(--t-small);color:rgba(242,242,238,.8);cursor:pointer;padding:.4rem}
.lb-v button:hover{color:#f2f2ee}
@media(prefers-reduced-motion:reduce){.lb-v{transition:none}}
.lb-v button:focus-visible{outline:1px solid rgba(242,242,238,.3);outline-offset:2px}
a img[data-full]{cursor:pointer}

/* ==== layout v2 ==== */
/* name on every page */
a.nm,p.nm{display:inline-block;font-size:var(--fs);color:var(--fg);letter-spacing:.01em;margin:0 0 3rem}
main.h .sec.st p.nm{margin:0 0 .4rem;font-size:var(--fs)}
/* works pages: images across the content width, caption beneath */
main.works-pg{max-width:90rem}
.ph-head{margin-bottom:2.6rem}
.ph-head h1{margin-bottom:.4rem}
.ph-head .lead{margin:0}
.wgrid{display:grid;gap:clamp(.8rem,1.4vw,1.4rem);align-items:start}
.wgrid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wgrid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wgrid figure{margin:0}
.wgrid figure img{display:block;width:100%;height:auto;background:#000}
.wgrid figcaption{font-size:var(--t-small);color:var(--mut);margin-top:.45rem}
.work{margin-bottom:clamp(3.5rem,6vw,5.5rem)}
.wgrid.pair{gap:clamp(1.4rem,2.5vw,2.6rem)}
.wgrid.pair .work{margin-bottom:0}
.wcap{margin-top:.9rem;max-width:36rem}
.wcap .wt{margin:0;font-size:var(--fs);color:var(--fg)}
.wcap .wc{margin:.15rem 0 0;font-size:var(--t-small);line-height:1.55;color:var(--mut)}
a.wtile{display:block;color:inherit}
a.wtile:hover{opacity:1}
a.wtile .wt{color:#4a2b20}
@media (max-width:760px){
.wgrid.c3,.wgrid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
main.works-pg>.wgrid.c3,.wgrid.pair{grid-template-columns:minmax(0,1fr)}
.work .wgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* menu: light, separated by fine lines instead of the umber fill */
:root{--line:#dddddb}
html body::after{background:var(--bg);box-shadow:1px 0 0 var(--line)}
html header .bar #tg,html header .bar #tg:hover{background-image:linear-gradient(var(--fg),var(--fg)),linear-gradient(var(--fg),var(--fg));background-color:transparent}
html body header .bar #tg::before,html body header .bar #tg::after,html body.mo header .bar #tg:hover::before,html body.mo header .bar #tg:hover::after{background:var(--fg)}
html body header .bar #tg:hover::before,html body header .bar #tg:hover::after{background:#4a2b20}
html #pn,html #pn.open{background:var(--bg);color:var(--fg);box-shadow:1px 0 0 var(--line)}
html #pn nav a,html #pn .wr a{color:var(--fg)}
html #pn .sub a{color:var(--mut)}
html #pn a:not(.lg):hover,html #pn .sub a:hover{color:#4a2b20;opacity:1}
html #pn .pl,html #pn .cl{color:var(--fg)}
html #pn .contact,html #pn .ci a,html #pn .sub-f input,html #pn .sub-f button{color:var(--fg)}
html #pn .sub-f{border-bottom-color:var(--line)}
html #pn .sub-f:focus-within{border-bottom-color:var(--fg)}
html #pn .sub-f input::placeholder{color:var(--mut)}
html #pn .sub-n{color:var(--mut)}
html #pn .ci .lb,html #pn .sb .lb{color:#4a2b20;border-top-color:var(--line)}
html #pn>.nb,html #pn.open>.nb{background:var(--bg);color:#4a2b20;box-shadow:0 -1px 0 var(--line)}
html body::after{background:linear-gradient(to top,var(--bg) var(--nbh,86px),var(--bg) var(--nbh,86px))}
main.works-pg{display:block}
main.works-pg>a.nm{display:block}
@media (max-width:760px){main.works-pg>.wgrid.c3{gap:2.6rem}}
/* name set vertically in the side strip, part of the frame rather than the page */
.vname{position:fixed;z-index:9;left:calc(var(--sw,4.5rem) / 2);top:50%;display:block;transform:translate(-50%,-50%) rotate(180deg);writing-mode:vertical-rl;font-size:var(--fs);letter-spacing:.12em;color:var(--fg);white-space:nowrap;transition:opacity .3s}
.vname:hover{opacity:.55}
body.mo .vname{opacity:0;pointer-events:none}
@media (max-width:760px){
.vname{top:env(safe-area-inset-top,0px);left:0;height:var(--sh,3.4rem);transform:none;writing-mode:horizontal-tb;display:flex;align-items:center;padding-left:max(20px,env(safe-area-inset-left,0px));letter-spacing:.06em}
}
/* name replaces the caliper at the foot of the strip, and stays while the menu is open */
html header .bar .lgo{display:none!important}
:root{--nbh:0px}
.vname{z-index:11;top:auto;bottom:calc(1.6rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%) rotate(180deg)}
body.mo .vname{opacity:1;pointer-events:auto}
@media (max-width:760px){.vname{top:env(safe-area-inset-top,0px);bottom:auto;transform:none}}
/* page titles sit on the same line as the menu icon */
@media (min-width:761px){
main:not(.h){padding-top:calc(2.75rem + env(safe-area-inset-top,0px) - .6 * var(--t-title))}
.split.titled>.sm{top:calc(2.75rem - .6 * var(--t-title))}
}
.vname{z-index:21}
/* phone menu: larger type, 48px tap targets */
@media (max-width:760px){
html #pn nav a{font-size:1.9rem;line-height:1.15;min-height:3rem;display:flex;align-items:center}
html #pn nav>a,html #pn .wr{margin:.15rem 0}
html #pn .pl{width:3rem;height:3rem;margin-left:.1rem;flex:none}
html #pn .pl::before{width:.85rem;height:1.5px;margin:-.75px 0 0 -.425rem}
html #pn .pl::after{width:1.5px;height:.85rem;margin:-.425rem 0 0 -.75px}
html #pn .sub{padding-left:.15rem;margin:0 0 .5rem}
html #pn .sub a{font-size:1.15rem;line-height:1.3;min-height:2.75rem}
html #pn .contact a{min-height:2.75rem;display:flex;align-items:center;font-size:1.05rem}
html #pn{overflow-y:auto;overscroll-behavior:contain}
}
/* lightbox: page shows faintly through white */
.lb-v{background:rgba(255,255,255,.94)}
.lb-v p{color:var(--mut)}
.lb-v button{color:var(--mut)}
.lb-v button:hover{color:var(--fg)}
.lb-v button:focus,.lb-v button:focus-visible{outline:none}
.lb-v button:focus-visible{color:var(--fg)}
.lb-v img{max-height:100%}
.lb-v:has(p) img{max-height:calc(100% - 5.5rem)}
.lb-v p .lt{color:var(--fg)}
/* lightbox: previous / next view */
.lb-v .lb-a{top:50%;right:auto;width:3rem;height:3rem;margin-top:-1.5rem;padding:0;color:var(--mut)}
.lb-v .lb-a:hover,.lb-v .lb-a:focus-visible{color:var(--fg)}
.lb-v .lb-p{left:max(.75rem,env(safe-area-inset-left,0px))}
.lb-v .lb-n{right:max(.75rem,env(safe-area-inset-right,0px));left:auto}
.lb-v .lb-a::before{content:"";position:absolute;left:50%;top:50%;width:.8rem;height:.8rem;border:solid currentColor;pointer-events:none}
.lb-v .lb-p::before{border-width:0 0 1.5px 1.5px;transform:translate(-25%,-50%) rotate(45deg)}
.lb-v .lb-n::before{border-width:1.5px 1.5px 0 0;transform:translate(-75%,-50%) rotate(45deg)}
.lb-v.multi{padding-left:max(4rem,env(safe-area-inset-left,0px));padding-right:max(4rem,env(safe-area-inset-right,0px))}
.lb-v.multi:has(p) img{max-height:calc(100% - 6.8rem)}
.lb-v .ln{color:var(--mut);letter-spacing:.04em}
@media (max-width:760px){
.lb-v.multi{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:calc(4rem + env(safe-area-inset-bottom,0px))}
.lb-v .lb-a{top:auto;bottom:calc(.5rem + env(safe-area-inset-bottom,0px));margin-top:0}
}
.gg.sq img{aspect-ratio:1/1;width:100%;height:auto;object-fit:contain;background:none}
@media (max-width:600px){.gg.sq{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.split.pnrow{margin-top:0}
@media (max-width:600px){.gg[style*="--c:3"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* essay images start level with the title and stay put while the text scrolls */
@media (min-width:1000px){.split.imaged>.sm{margin-top:0;top:calc(2.75rem - .6 * var(--t-title))}}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:760px){html #pn .sb{padding:0 1.8rem calc(1.6rem + env(safe-area-inset-bottom,0px));margin-top:.4rem}html #pn .sub-f input,html #pn .sub-f button{font-size:1.05rem;min-height:2.75rem}}