:root{
  --wall:#d7dad2; --wall-deep:#c3c7bd; --paper:#eceee8;
  --ink:#22261e; --ink-soft:#5b6153; --ochre:#b86a1c; --ochre-soft:#e0a24a;
  --measure:34rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--wall);color:var(--ink);
  font:400 1rem/1.65 "Archivo",system-ui,sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:.055em}
a:hover{color:var(--ochre)}
:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
section[id]{scroll-margin-top:5rem}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--paper);padding:.6rem 1rem;z-index:20}
.wrap{width:min(100% - 2.5rem,72rem);margin-inline:auto}

.masthead{position:sticky;top:0;z-index:10;
  background:color-mix(in srgb,var(--wall) 88%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--wall-deep)}
.masthead-inner{display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap;padding:.85rem 0}
.masthead .mark{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.02rem;
  text-decoration:none;white-space:nowrap}
.masthead nav{display:flex;gap:1.3rem;font-size:.88rem;color:var(--ink-soft)}
.masthead nav a{text-decoration:none}
.masthead nav a[aria-current]{color:var(--ink);text-decoration:underline}

.hero{display:grid;gap:2.5rem 4rem;align-items:end;padding:3rem 0 5rem;grid-template-columns:1fr}
.hero-figure{margin:0}
.hero-figure img{width:auto;max-height:min(72vh,40rem);margin-left:auto;
  box-shadow:0 1.4rem 2.6rem -1.1rem rgba(34,38,30,.5)}
.hero-name{font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 144;
  font-size:clamp(2.4rem,8.5vw,5.2rem);line-height:.94;margin:0 0 1.5rem;letter-spacing:-.015em}
.hero-name span{display:block}
.statement{font-family:"Fraunces",Georgia,serif;font-size:1.15rem;line-height:1.5;
  font-style:italic;max-width:26rem;margin:0}
@media(min-width:60rem){
  .hero{grid-template-columns:minmax(0,26rem) minmax(0,1fr);padding:4.5rem 0 7rem}
  .hero-text{order:-1;padding-bottom:.5rem}
}

.section-head{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:1.45rem;
  margin:0 0 3.2rem;color:var(--ink-soft)}
.page-title{font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:clamp(2rem,6vw,3.2rem);line-height:1.08;margin:0 0 .6rem;letter-spacing:-.01em}
.page-sub{color:var(--ink-soft);margin:0 0 3rem;font-size:.95rem}

.works{padding-bottom:4.5rem}
.hang{display:flex;flex-direction:column;gap:5rem}
.work{margin:0;display:grid;gap:1.2rem;grid-template-columns:1fr;align-items:start}
.work img{width:100%;box-shadow:0 1.4rem 2.6rem -1.1rem rgba(34,38,30,.5)}
.work h3{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:1.3rem;
  font-style:italic;margin:0;line-height:1.3}
.spec{font-size:.84rem;color:var(--ink-soft);margin:.4rem 0 0;font-variant-numeric:tabular-nums}
.status{display:inline-block;margin:.9rem 0 0;padding:.24rem .6rem;font-size:.74rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--wall-deep);background:var(--paper)}
.series{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ochre);margin:0 0 .5rem}
details.story{margin-top:1.3rem;border-top:1px solid var(--wall-deep);padding-top:1rem}
details.story summary{cursor:pointer;list-style:none;font-size:.88rem;color:var(--ochre);
  display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;
  border:1px solid var(--ochre-soft);transition:background .18s ease,color .18s ease}
details.story summary::-webkit-details-marker{display:none}
details.story summary:hover{background:var(--ochre);color:var(--paper);border-color:var(--ochre)}
details.story[open] summary .label-closed{display:none}
details.story:not([open]) summary .label-open{display:none}
details.story .body{font-size:.95rem;line-height:1.72;padding-top:1.1rem}
details.story .body p{margin:0 0 .9rem}
details.story .body p:last-child{margin-bottom:0}
.ask{display:inline-block;margin-top:1.2rem;padding:.6rem 1.1rem;font-size:.85rem;
  text-decoration:none;color:var(--ink-soft);border:1px solid var(--wall-deep)}
.ask:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media(min-width:62rem){
  .hang{gap:7rem}
  .work{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:3.5rem}
  .work img{height:auto}
  .work > img{grid-column:1;grid-row:1}
  .work > figcaption{grid-column:2;grid-row:1}
  .work:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .work:nth-child(even) > img{grid-column:2;margin-left:auto}
  .work:nth-child(even) > figcaption{grid-column:1}
}

.ex-shot{margin:0 0 3.5rem}
.ex-shot img{width:100%;box-shadow:0 1.4rem 2.6rem -1.1rem rgba(34,38,30,.5)}
.ex-shot.lead{margin-bottom:2.2rem}
.lede{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:1.2rem;
  line-height:1.5;max-width:32rem;margin:0 0 3.5rem}
.lede.closing{border-top:1px solid var(--wall-deep);padding-top:2rem;margin-bottom:2.5rem}
figcaption.cap{font-size:.82rem;color:var(--ink-soft);padding-top:.7rem}
.ex-body{max-width:var(--measure)}
.ex-body p{margin:0 0 1.15rem}
.ex-block{margin:0 0 3.5rem}
.ex-block h2{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:1.35rem;
  margin:0 0 1.2rem}
.ex-grid{display:grid;gap:2rem;grid-template-columns:1fr;margin:0 0 3.5rem}
.ex-grid{align-items:start}
.ex-grid.tiles img{aspect-ratio:9/10;object-fit:cover;width:100%}
.ex-shot.narrow{max-width:30rem}
.ex-grid figure{margin:0}
.ex-grid img{width:100%}
@media(min-width:50rem){.ex-grid{grid-template-columns:1fr 1fr;gap:2.5rem}}
.fact{border-left:2px solid var(--ochre-soft);padding:.2rem 0 .2rem 1.1rem;
  margin:0 0 3rem;font-size:.92rem;color:var(--ink-soft);max-width:var(--measure)}
.fact strong{color:var(--ink);font-weight:500}

.about{background:var(--paper);padding:5rem 0;
  border-top:1px solid var(--wall-deep);border-bottom:1px solid var(--wall-deep)}
.about-grid{display:grid;gap:2.2rem;grid-template-columns:1fr}
.about-grid img{width:min(100%,17rem)}
.about p{margin:0 0 1.1rem;max-width:var(--measure)}
.about p:last-child{margin-bottom:0}
@media(min-width:52rem){.about-grid{grid-template-columns:17rem minmax(0,1fr);gap:4rem}}
.contact{padding:5rem 0 5.5rem;min-height:calc(100svh - 9rem)}
.contact p{max-width:var(--measure);margin:0 0 1.1rem}
.contact .email{font-family:"Fraunces",Georgia,serif;font-size:clamp(1.25rem,4.5vw,1.9rem);
  font-style:italic;word-break:break-word}
.legal{padding:3rem 0 5rem;max-width:var(--measure)}
.legal h2{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:1.15rem;
  margin:2.2rem 0 .6rem}
.legal p{margin:0 0 .8rem}
.todo{background:#f6e7cf;border-left:3px solid var(--ochre);padding:.9rem 1.1rem;
  font-size:.9rem;margin:0 0 1.6rem}

footer{border-top:1px solid var(--wall-deep);padding:1.5rem 0 2.4rem;font-size:.8rem;
  color:var(--ink-soft);display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
footer a{text-decoration:none}

@media(max-width:36rem){
  .wrap{width:min(100% - 1.8rem,72rem)}
  .hang{gap:4rem}
  .masthead nav{gap:.9rem;font-size:.8rem}
  .hero-figure img{max-height:none;width:100%}
  .ask,details.story summary{width:100%;justify-content:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}