:root{
    color-scheme:light;
    --paper:#FBFBF9;
    --ink:#16181B;
    --ink-soft:#5E6469;
    --rule:#E4E4DF;
    --accent:#2F5A6B;
    --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
    --serif:"Newsreader",Georgia,"Times New Roman",serif;
    --measure:34rem;
    --gutter:clamp(1rem,5vw,4.5rem);
  }

  *,*::before,*::after{box-sizing:border-box;}

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:1rem;
    -webkit-font-smoothing:antialiased;
  }

  img{display:block;max-width:100%;height:auto;}
  a{color:inherit;}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

  .label{
    font-size:.6875rem;
    font-weight:500;
    letter-spacing:.17em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }

  /* ---------- masthead ---------- */

  .masthead{
    position:sticky;
    top:env(safe-area-inset-top,0px);
    z-index:20;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:.5rem 1rem;
    flex-wrap:wrap;
    padding:1.15rem var(--gutter);
    background:color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter:saturate(1.2) blur(10px);
    border-bottom:1px solid var(--rule);
  }

  .wordmark{
    font-size:.8125rem;
    font-weight:600;
    letter-spacing:.24em;
    text-transform:uppercase;
    text-decoration:none;
    white-space:nowrap;
  }

  .masthead nav{display:flex;gap:clamp(.85rem,3vw,1.6rem);flex-wrap:wrap;}

  .masthead nav a{
    font-size:.6875rem;
    font-weight:500;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--ink-soft);
    text-decoration:none;
    padding-bottom:2px;
    border-bottom:1px solid transparent;
    transition:color .2s ease,border-color .2s ease;
  }

  .masthead nav a:hover{color:var(--ink);}
  .masthead nav a.on{color:var(--ink);border-bottom-color:var(--ink);}

  main{padding-inline:var(--gutter);}

  /* ---------- home hero ---------- */

  .hero{
    position:relative;
    margin-top:0;
    background:#111214;
    aspect-ratio:2 / 1;
    max-height:70vh;
    overflow:hidden;
  }

  .hero img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity 1.4s ease;
  }

  .hero img.on{opacity:1;}

  .hero-cap{
    position:absolute;
    left:0;
    bottom:0;
    padding:1rem var(--gutter) 1.25rem;
    color:rgba(255,255,255,.82);
    font-size:.6875rem;
    font-weight:500;
    letter-spacing:.15em;
    text-transform:uppercase;
    z-index:2;
    text-shadow:0 1px 12px rgba(0,0,0,.6);
  }

  /* ---------- standfirst ---------- */

  .standfirst{
    max-width:46rem;
    padding-block:clamp(3rem,8vw,6rem) clamp(2.25rem,5vw,3.5rem);
  }

  .standfirst p{
    margin:0;
    font-family:var(--serif);
    font-size:clamp(1.35rem,2.9vw,2.05rem);
    font-weight:200;
    line-height:1.32;
    text-wrap:balance;
  }

  .standfirst .label{display:block;margin-bottom:1.5rem;}

  /* ---------- work wall ---------- */

  .wall{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(1rem,3vw,2.75rem);
    row-gap:clamp(2.75rem,6vw,5.5rem);
    padding-bottom:clamp(4rem,9vw,7rem);
  }

  .wall .wide{grid-column:1 / -1;}

  .work{display:block;text-decoration:none;color:inherit;}
  .work figure{margin:0;}

  .plate{overflow:hidden;background:#EDEDE9;}

  .work .plate img{
    width:100%;
    aspect-ratio:3 / 2;
    object-fit:cover;
    transition:opacity .45s ease,transform .8s cubic-bezier(.2,.7,.3,1);
  }

  .wide .plate img{aspect-ratio:21 / 9;}
  .work:hover .plate img{opacity:.88;transform:scale(1.014);}

  .work figcaption{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:.35rem 1rem;
    flex-wrap:wrap;
    margin-top:1rem;
    padding-bottom:.85rem;
    border-bottom:1px solid var(--rule);
    transition:border-color .25s ease;
  }

  .work:hover figcaption{border-bottom-color:var(--ink);}

  .work h2{
    margin:0;
    font-size:clamp(1.0625rem,1.9vw,1.375rem);
    font-weight:500;
    letter-spacing:-.008em;
    line-height:1.2;
  }

  .status{
    display:inline-block;
    margin-right:.6rem;
    padding:.18rem .5rem;
    background:color-mix(in srgb, var(--accent) 12%, var(--paper));
    color:var(--accent);
    font-size:.625rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

  .status.standalone{margin:1.75rem 0 -1rem;}

  .work .meta{
    font-size:.6875rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
    text-align:right;
  }

  /* ---------- project page ---------- */

  .back{
    display:inline-block;
    margin-block:clamp(2rem,5vw,3.25rem) 0;
    font-size:.6875rem;
    font-weight:500;
    letter-spacing:.17em;
    text-transform:uppercase;
    color:var(--ink-soft);
    text-decoration:none;
  }

  .back:hover{color:var(--ink);}

  .project-head{
    padding-block:clamp(1.75rem,4.5vw,3rem) clamp(2.25rem,5.5vw,3.5rem);
    border-bottom:1px solid var(--rule);
  }

  .project-head h1{
    margin:0;
    font-family:var(--serif);
    font-weight:200;
    font-size:clamp(2.3rem,8vw,5.5rem);
    line-height:1;
    letter-spacing:-.02em;
    text-wrap:balance;
  }

  .project-head h1 em{font-style:italic;font-weight:200;}

  .project-head .subtitle{
    margin:1.15rem 0 0;
    max-width:36rem;
    font-family:var(--serif);
    font-size:clamp(1.1rem,2.2vw,1.45rem);
    font-weight:200;
    font-style:italic;
    color:var(--ink-soft);
  }

  .factfile{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));
    gap:1.6rem 2rem;
    margin:0;
    padding-block:2rem;
    border-bottom:1px solid var(--rule);
  }

  .factfile div{display:flex;flex-direction:column;gap:.45rem;}
  .factfile dt{margin:0;}
  .factfile dd{margin:0;font-size:.9375rem;line-height:1.45;}

  .fullplate{margin-block:clamp(2.25rem,5.5vw,4rem);}
  .fullplate img{width:100%;}

  .caption{
    margin:.85rem 0 0;
    max-width:36rem;
    font-size:.75rem;
    letter-spacing:.04em;
    color:var(--ink-soft);
  }

  .essay{max-width:var(--measure);padding-block:clamp(1rem,3vw,2rem);}

  .essay p{
    margin:0 0 1.45em;
    font-family:var(--serif);
    font-size:1.1875rem;
    font-weight:300;
    line-height:1.66;
  }

  .essay p.lead{font-size:1.375rem;font-weight:200;line-height:1.52;}

  /* filmstrip gallery */

  .strip{
    display:flex;
    gap:clamp(.75rem,2vw,1.5rem);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    margin-block:clamp(2.25rem,5.5vw,4rem);
    padding-bottom:1.1rem;
    -webkit-overflow-scrolling:touch;
  }

  .strip figure{flex:0 0 min(78vw,520px);margin:0;scroll-snap-align:start;}

  .strip button{
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:#EDEDE9;
    cursor:pointer;
    line-height:0;
    overflow:hidden;
  }

  .strip img{
    width:100%;
    aspect-ratio:3 / 2;
    object-fit:cover;
    transition:opacity .35s ease,transform .7s cubic-bezier(.2,.7,.3,1);
  }

  .strip button:hover img{opacity:.86;transform:scale(1.025);}

  .strip figcaption{
    margin-top:.7rem;
    font-size:.75rem;
    letter-spacing:.04em;
    color:var(--ink-soft);
  }

  /* pull quote */

  .pullquote{
    max-width:52rem;
    margin-block:clamp(2.75rem,6.5vw,5rem);
    padding-top:1.85rem;
    border-top:1px solid var(--ink);
  }

  .pullquote blockquote{
    margin:0;
    font-family:var(--serif);
    font-size:clamp(1.45rem,3.2vw,2.25rem);
    font-weight:200;
    font-style:italic;
    line-height:1.3;
    text-wrap:balance;
  }

  .pullquote .attrib{
    margin-top:1.4rem;
    font-size:.75rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    line-height:1.6;
  }

  /* film link */

  .filmplate{
    position:relative;
    display:block;
    margin-block:clamp(2.25rem,5.5vw,4rem);
    text-decoration:none;
    color:inherit;
  }

  .filmplate .plate{position:relative;}

  .filmplate img{
    width:100%;
    aspect-ratio:16 / 9;
    object-fit:cover;
    filter:saturate(.92) brightness(.93);
    transition:filter .4s ease;
  }

  .filmplate:hover img{filter:saturate(1) brightness(1);}

  .filmplate .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}

  .filmplate .play span{
    padding:.7rem 1.15rem;
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter:blur(6px);
    font-size:.6875rem;
    font-weight:500;
    letter-spacing:.17em;
    text-transform:uppercase;
  }

  /* before/after */

  .reveal{
    position:relative;
    overflow:hidden;
    margin-block:clamp(2.25rem,5.5vw,4rem);
    cursor:ew-resize;
    touch-action:none;
    user-select:none;
  }

  .reveal img{width:100%;}
  .reveal .unlit{filter:brightness(.26) saturate(.3) contrast(1.06);}

  .reveal .lit{
    position:absolute;
    inset:0;
    height:100%;
    object-fit:cover;
    clip-path:inset(0 calc(100% - var(--split,50%)) 0 0);
  }

  .reveal .handle{
    position:absolute;
    top:0;
    bottom:0;
    left:var(--split,50%);
    width:1px;
    background:rgba(255,255,255,.85);
    pointer-events:none;
  }

  .reveal .handle::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:38px;
    height:38px;
    transform:translate(-50%,-50%);
    border:1px solid rgba(255,255,255,.85);
    border-radius:50%;
  }

  /* notes + next */

  .note{
    max-width:var(--measure);
    margin-block:clamp(2.25rem,5.5vw,3.5rem);
    padding:1.1rem 1.3rem;
    border-left:2px solid var(--accent);
    background:color-mix(in srgb, var(--accent) 5%, var(--paper));
    font-size:.875rem;
    line-height:1.6;
    color:var(--ink-soft);
  }

  .note strong{color:var(--ink);font-weight:600;}

  .nextwork{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:.5rem 1rem;
    flex-wrap:wrap;
    padding-block:1.85rem;
    border-top:1px solid var(--ink);
    text-decoration:none;
    color:inherit;
  }

  .nextwork h3{
    margin:0;
    font-family:var(--serif);
    font-weight:200;
    font-style:italic;
    font-size:clamp(1.4rem,3.2vw,2.15rem);
    line-height:1.15;
  }

  /* ---------- photography index ---------- */

  .series{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
    gap:clamp(2rem,4.5vw,3.25rem);
    padding-bottom:clamp(4rem,9vw,7rem);
  }

  .series article{border-top:1px solid var(--ink);padding-top:1.25rem;}

  .series h2{
    margin:0 0 .75rem;
    font-size:1.0625rem;
    font-weight:500;
    letter-spacing:-.005em;
  }

  .series p{
    margin:0;
    font-family:var(--serif);
    font-weight:300;
    font-size:1rem;
    line-height:1.6;
    color:var(--ink-soft);
  }

  .series .plate-slot{
    width:100%;
    margin-bottom:1.1rem;
    padding:0;
    border:0;
    background:#EFEFEB;
    aspect-ratio:3 / 2;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    font-family:var(--sans);
    font-size:.625rem;
    font-weight:500;
    letter-spacing:.17em;
    text-transform:uppercase;
    color:#A6A69F;
  }

  .series button.plate-slot{cursor:pointer;}

  .series .plate-slot img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:opacity .35s ease,transform .7s cubic-bezier(.2,.7,.3,1);
  }

  .series button.plate-slot:hover img{opacity:.86;transform:scale(1.03);}

  .series h2 .label{margin-left:.5rem;font-size:.625rem;}

  /* ---------- text pages ---------- */

  .textpage{max-width:var(--measure);padding-block:clamp(2.5rem,6vw,4.5rem) clamp(4rem,9vw,7rem);}

  .textpage h1{
    margin:0 0 2rem;
    font-family:var(--serif);
    font-weight:200;
    font-size:clamp(2.25rem,6.5vw,4rem);
    line-height:1.02;
    letter-spacing:-.02em;
  }

  .textpage p{
    margin:0 0 1.4em;
    font-family:var(--serif);
    font-size:1.1875rem;
    font-weight:300;
    line-height:1.66;
  }

  .textpage h2{
    margin:2.75rem 0 1rem;
    font-size:.6875rem;
    font-weight:500;
    letter-spacing:.17em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }

  .textpage ul{margin:0 0 1.4em;padding-left:1.1rem;}

  .textpage li{
    margin-bottom:.55rem;
    font-family:var(--serif);
    font-size:1.0625rem;
    font-weight:300;
    line-height:1.55;
  }

  .visually-hidden{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;border:0;
  }

  .subscribe{
    max-width:38rem;
    margin-block:clamp(2.5rem,6vw,4rem);
    padding:clamp(1.5rem,3.5vw,2.25rem);
    background:color-mix(in srgb, var(--accent) 6%, var(--paper));
    border-top:1px solid var(--accent);
  }

  .subscribe.tight{margin-block:clamp(2rem,5vw,3rem);}

  .subscribe p{
    margin:.9rem 0 1.4rem;
    max-width:30rem;
    font-family:var(--serif);
    font-weight:300;
    font-size:1.0625rem;
    line-height:1.6;
    color:var(--ink-soft);
  }

  .sub-form{display:flex;flex-wrap:wrap;gap:.6rem;}

  .sub-form input{
    flex:1 1 15rem;
    min-width:0;
    padding:.75rem .85rem;
    border:1px solid var(--rule);
    border-radius:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--serif);
    font-size:1.0625rem;
  }

  .sub-form input:focus{outline:none;border-color:var(--accent);}

  .sub-form button{
    flex:0 0 auto;
    padding:.75rem 1.4rem;
    border:0;
    background:var(--ink);
    color:var(--paper);
    font-family:var(--sans);
    font-size:.6875rem;
    font-weight:600;
    letter-spacing:.17em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background .2s ease;
  }

  .sub-form button:hover{background:var(--accent);}

  .sub-note{
    margin:1rem 0 0 !important;
    font-family:var(--sans) !important;
    font-size:.8125rem !important;
    line-height:1.5;
  }

  .sub-note.ok{color:var(--accent);}
  .sub-note.warn{color:#8A3A2E;}

  .inline-link{
    color:var(--accent);
    text-decoration:none;
    border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    transition:border-color .2s ease;
  }

  .inline-link:hover{border-bottom-color:var(--accent);}

  .inline-plate{
    margin:clamp(2rem,5vw,3.25rem) 0;
  }

  .inline-plate button{
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:#EDEDE9;
    cursor:pointer;
    line-height:0;
    overflow:hidden;
  }

  .inline-plate img{
    width:100%;
    transition:opacity .35s ease;
  }

  .inline-plate button:hover img{opacity:.9;}

  .inline-plate figcaption{margin-top:.8rem;}

  /* ---------- journal ---------- */

  .posts{
    display:flex;
    flex-direction:column;
    gap:clamp(2rem,4.5vw,3.25rem);
    padding-bottom:clamp(2rem,5vw,3.5rem);
  }

  .post{
    display:grid;
    grid-template-columns:minmax(0,10rem) minmax(0,1fr);
    gap:clamp(1rem,3vw,2rem);
    align-items:start;
    padding-top:1.5rem;
    border-top:1px solid var(--rule);
    text-decoration:none;
    color:inherit;
    transition:border-color .25s ease;
  }

  .post:hover{border-top-color:var(--ink);}

  .post .plate img{
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    transition:opacity .35s ease;
  }

  .post:hover .plate img{opacity:.86;}

  .post-text{display:flex;flex-direction:column;gap:.6rem;max-width:34rem;}

  .post-text h2{
    margin:0;
    font-family:var(--serif);
    font-weight:200;
    font-size:clamp(1.4rem,3vw,2rem);
    line-height:1.15;
    letter-spacing:-.01em;
  }

  .post-text p{
    margin:0;
    font-family:var(--serif);
    font-weight:300;
    font-size:1.0625rem;
    line-height:1.6;
    color:var(--ink-soft);
  }

  @media (max-width:560px){
    .post{grid-template-columns:minmax(0,1fr);}
    .post .plate img{aspect-ratio:3 / 2;}
  }

  /* ---------- contact form ---------- */

  .contact{
    display:flex;
    flex-direction:column;
    gap:1.75rem;
    margin-block:2.25rem 1rem;
  }

  .contact fieldset{margin:0;padding:0;border:0;}
  .contact legend{padding:0;margin-bottom:.9rem;}

  .chips{display:flex;flex-wrap:wrap;gap:.5rem;}

  .chip{position:relative;cursor:pointer;}

  .chip input{
    position:absolute;
    opacity:0;
    width:100%;
    height:100%;
    margin:0;
    cursor:pointer;
  }

  .chip span{
    display:inline-block;
    padding:.5rem .85rem;
    border:1px solid var(--rule);
    font-size:.75rem;
    letter-spacing:.02em;
    color:var(--ink-soft);
    transition:border-color .2s ease,color .2s ease,background .2s ease;
  }

  .chip input:checked + span{
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 8%, var(--paper));
    color:var(--accent);
  }

  .chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px;}

  .field{display:flex;flex-direction:column;gap:.55rem;}

  .contact input[type="text"],
  .contact input[type="email"],
  .contact textarea{
    width:100%;
    padding:.75rem .85rem;
    border:1px solid var(--rule);
    border-radius:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--serif);
    font-size:1.0625rem;
    line-height:1.5;
  }

  .contact textarea{resize:vertical;min-height:8rem;}

  .contact input:focus,
  .contact textarea:focus{outline:none;border-color:var(--accent);}

  .send{
    align-self:flex-start;
    padding:.8rem 1.6rem;
    border:0;
    background:var(--ink);
    color:var(--paper);
    font-family:var(--sans);
    font-size:.6875rem;
    font-weight:600;
    letter-spacing:.17em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background .2s ease;
  }

  .send:hover{background:var(--accent);}

  .formnote{
    margin:0;
    font-family:var(--sans) !important;
    font-size:.8125rem !important;
    color:var(--accent);
  }

  .reveal{
    padding:.45rem .8rem;
    border:1px solid var(--rule);
    background:transparent;
    color:var(--ink-soft);
    font-family:var(--sans);
    font-size:.75rem;
    letter-spacing:.06em;
    cursor:pointer;
    transition:border-color .2s ease,color .2s ease;
  }

  .reveal:hover{border-color:var(--ink);color:var(--ink);}

  /* ---------- lightbox ---------- */

  .lb{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:rgba(12,13,15,.97);}

  .lb-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem clamp(1rem,4vw,2rem);
    color:#F2F2EF;
  }

  .lb-bar .count{font-size:.6875rem;font-weight:500;letter-spacing:.17em;font-variant-numeric:tabular-nums;opacity:.7;}

  .lb button{
    border:0;
    background:transparent;
    color:#F2F2EF;
    font-family:var(--sans);
    font-size:.6875rem;
    font-weight:500;
    letter-spacing:.17em;
    text-transform:uppercase;
    cursor:pointer;
    padding:.5rem;
  }

  .lb-stage{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(.5rem,3vw,2rem);
    padding:0 clamp(.5rem,3vw,2rem);
    min-height:0;
  }

  .lb-stage img{max-height:100%;max-width:100%;object-fit:contain;}

  .lb .arrow{flex:0 0 auto;font-size:1.5rem;letter-spacing:0;opacity:.75;}
  .lb .arrow:hover{opacity:1;}

  .lb-caption{
    padding:1rem clamp(1rem,4vw,2rem) 1.6rem;
    color:#C9C9C4;
    font-family:var(--serif);
    font-weight:300;
    font-size:.9375rem;
    line-height:1.5;
    text-align:center;
  }

  /* ---------- footer ---------- */

  footer{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:.5rem 1rem;
    flex-wrap:wrap;
    margin-top:clamp(3rem,7vw,5rem);
    padding:2rem var(--gutter) 3rem;
    border-top:1px solid var(--rule);
  }

  footer a{color:var(--ink-soft);text-decoration:none;}
  footer a:hover{color:var(--ink);}

  @media (max-width:640px){
    .wall{grid-template-columns:minmax(0,1fr);}
    .wall .wide .plate img{aspect-ratio:16 / 9;}
    .work .meta{text-align:left;}
    .hero{aspect-ratio:4 / 3;}
  }

  @media (prefers-reduced-motion:reduce){
    *{transition-duration:.001ms !important;}
  }

/* ================= production additions ================= */

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  padding:.65rem 1rem;
  background:var(--ink);
  color:var(--paper);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
}
.skip:focus{left:var(--gutter);}

/* click-to-play film: poster until pressed, then the player */
.film{margin-block:clamp(2.25rem,5.5vw,4rem);}
.film .filmplate{margin:0;}
.film-embed{
  position:relative;
  aspect-ratio:16 / 9;
  background:#000;
}
.film-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* before / after, only shown when a real unlit frame exists */
.reveal .unlit{filter:none;}

.textpage ul{padding-left:1.1rem;}
.textpage h2 + ul{margin-top:0;}

.notice{
  max-width:var(--measure);
  padding-block:clamp(3rem,8vw,6rem) clamp(4rem,9vw,7rem);
}
.notice h1{
  margin:0 0 1.25rem;
  font-family:var(--serif);
  font-weight:200;
  font-size:clamp(2rem,6vw,3.5rem);
  line-height:1.05;
  letter-spacing:-.02em;
}
.notice p{
  margin:0 0 1.2em;
  font-family:var(--serif);
  font-weight:300;
  font-size:1.1875rem;
  line-height:1.6;
}

footer nav{display:flex;gap:1.25rem;flex-wrap:wrap;}

.post-date{display:block;margin-bottom:1rem;}

/* email reveal on About (kept apart from the before/after slider's .reveal) */
.addr-line{margin-top:1.5rem;}
.addr-btn{
  padding:.45rem .8rem;
  border:1px solid var(--rule);
  background:transparent;
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:.75rem;
  letter-spacing:.06em;
  cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.addr-btn:hover{border-color:var(--ink);color:var(--ink);}

/* ---------- press ---------- */
.textpage h3{
  margin:2.25rem 0 .9rem;
  font-family:var(--serif);
  font-size:1.1875rem;
  font-weight:300;
  line-height:1.4;
}
.textpage-press{max-width:44rem;}
.textpage-press > .essay > p:first-child{max-width:var(--measure);}
.textpage-press ul{list-style:none;padding-left:0;margin:0 0 1.4em;}
.textpage-press li{
  display:grid;
  grid-template-columns:minmax(0,11rem) minmax(0,1fr);
  gap:.2rem 1.25rem;
  padding:.8rem 0;
  margin:0;
  border-top:1px solid var(--rule);
}
.textpage-press li:last-child{border-bottom:1px solid var(--rule);}
.textpage-press li strong{
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.04em;
  padding-top:.2rem;
  color:var(--ink);
}
@media (max-width:560px){
  .textpage-press li{grid-template-columns:minmax(0,1fr);}
}

/* several images in a row: a contact sheet that opens in the viewer */
.sheet{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));
  gap:clamp(.5rem,1.4vw,.9rem);
  margin:0 0 2rem;
}
.sheet-plate{margin:0;}
.sheet-plate button{
  display:block;width:100%;padding:0;border:0;background:#EDEDE9;cursor:zoom-in;line-height:0;overflow:hidden;
}
.sheet-plate img{width:100%;aspect-ratio:3 / 2;object-fit:cover;object-position:top;transition:opacity .3s ease;}
.sheet-plate button:hover img{opacity:.85;}
.sheet-plate figcaption{display:none;}
.textpage-press .inline-plate{max-width:13rem;margin:0 0 2rem;}
.textpage-press .inline-plate figcaption{display:none;}

/* work galleries: the whole set at a glance */
.work-sheet{margin-block:clamp(2.25rem,5.5vw,4rem);}
.sheet-work{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:clamp(.5rem,1.4vw,1rem);margin:0;}
.sheet-work .sheet-plate img{object-position:center;}
.sheet-note{margin:.9rem 0 0;font-size:.75rem;letter-spacing:.04em;color:var(--ink-soft);}
@media (max-width:640px){.sheet-work{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* press features: films and magazine pages, each with its own page */
.textpage-press{max-width:64rem;}
.textpage-press .essay{max-width:44rem;}
.features{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:clamp(1.25rem,3vw,2.25rem) clamp(.75rem,2vw,1.5rem);margin:0 0 1rem;}
.feature{display:flex;flex-direction:column;gap:.6rem;text-decoration:none;color:inherit;}
.feature .plate{position:relative;}
.feature .plate img{width:100%;aspect-ratio:3 / 2;object-fit:cover;object-position:top;transition:opacity .35s ease;}
.feature:hover .plate img{opacity:.86;}
.feature .plate.is-film::after{
  content:"\25B6";position:absolute;left:.75rem;bottom:.75rem;width:2.2rem;height:2.2rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;padding-left:.15rem;
  background:color-mix(in srgb, var(--paper) 88%, transparent);color:var(--ink);
}
.feature h3{margin:0;font-family:var(--serif);font-weight:300;font-size:1.125rem;line-height:1.35;}
.feature:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.textpage-press > h2{margin-top:3rem;}
@media (max-width:640px){.features{grid-template-columns:repeat(2,minmax(0,1fr));}}

.spreads{max-width:64rem;}
.spreads .inline-plate{margin:clamp(1.5rem,4vw,2.5rem) 0;}


/* ---------- wide screens: hold the page to a comfortable measure ---------- */
:root{--maxw:96rem;}
#main{max-width:var(--maxw);margin-inline:auto;}
.masthead,footer{padding-inline:max(var(--gutter), calc((100% - var(--maxw))/2 + var(--gutter)));}
/* the hero sized by width, not by an aspect box that shrinks against max-height */
.hero{aspect-ratio:auto;height:clamp(20rem,46vw,72vh);}
@media (max-width:640px){.hero{height:auto;aspect-ratio:4 / 3;}}
/* the viewer is a flex box, so it needs telling that hidden means hidden */
.lb[hidden]{display:none !important;}

/* the viewer: one consistent size for every image, click the picture for the next */
.lb-stage img{flex:1 1 auto;width:100%;height:100%;object-fit:contain;cursor:pointer;min-width:0;}

/* Quotation inside a text page (Press, About) */
.essay blockquote{
  margin:clamp(1.75rem,4vw,2.75rem) 0;
  padding-top:1.4rem;
  border-top:1px solid var(--ink);
  max-width:46rem;
}
.essay blockquote p{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.2rem,2.5vw,1.6rem);
  font-weight:200;
  font-style:italic;
  line-height:1.35;
  text-wrap:pretty;
}
.essay blockquote cite{
  display:block;
  margin-top:.9rem;
  font-style:normal;
  font-size:.8rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.65;
}

/* Press page: wider frame so the lead image and the cards breathe,
   while the text and link lists keep their narrow measure. */
.textpage-press{max-width:66rem;}
.textpage-press > .inline-plate:first-of-type{
  max-width:none;
  margin:clamp(1.5rem,4vw,2.5rem) 0 clamp(2.5rem,6vw,4rem);
}
.textpage-press > .inline-plate:first-of-type figcaption{display:block;}

/* External press card: mark it as leaving the site */
.feature.is-ext h3::after{content:" \2197";opacity:.45;}

/* Two or more films side by side on a work page */
.film-many{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:clamp(1rem,2.5vw,2rem);}
.film-note{margin:.6rem 0 0;}

/* A second contact sheet inside a work's extra text sits clear of the next-work rule */
.essay + .work-sheet, .work-sheet + .essay{margin-top:clamp(1.5rem,4vw,2.5rem);}
.work-sheet{margin-bottom:clamp(2rem,5vw,3.5rem);}

/* Long-read essay page: a reading measure for the text, images at full width */
.textpage-essay{max-width:66rem;}
.textpage-essay .essay{max-width:44rem;}
.textpage-essay .kicker{margin:0 0 .6rem;}
.textpage-essay > .inline-plate{max-width:none;margin:clamp(1.5rem,4vw,2.5rem) 0;}
.textpage-essay > .inline-plate figcaption{display:block;}
.textpage-essay h3{margin-top:clamp(2rem,5vw,3rem);}
main > .back{display:inline-block;margin:clamp(1.5rem,4vw,2.5rem) 0 0;}
.back-bottom{margin:clamp(2.5rem,6vw,4rem) 0 0;padding-top:1.4rem;border-top:1px solid var(--line,rgba(0,0,0,.12));}

/* ---- Dark works (Luminosity) ---------------------------------------- */
.theme-dark{
  color-scheme:dark;
  --paper:#050709;
  --ink:#E9ECEE;
  --ink-soft:#8E979E;
  --rule:#1A2026;
  --accent:#6FD3E0;
  background:var(--paper);
}
.theme-dark .plate,.theme-dark .sheet-plate button,.theme-dark .strip button,.theme-dark .fullplate{background:#0A0E12;}
.theme-dark .masthead nav a.on{border-bottom-color:var(--ink);}
.theme-dark .fullplate img{box-shadow:0 0 120px 10px rgba(80,190,210,.08);}
.theme-dark .sheet-plate img{transition:opacity 1.1s ease,transform 1.1s ease;}
.theme-dark .sheet-plate.dim img{opacity:.04;transform:scale(1.02);}
.theme-dark .sheet-plate button:hover img{opacity:.9;}
.theme-dark .sheet-note,.theme-dark .caption{color:var(--ink-soft);}
.theme-dark .nextwork{border-top-color:var(--rule);}
.theme-dark ::selection{background:rgba(111,211,224,.35);}

/* ---- "Where it went" press strip on a work --------------------------- */
.pressline{margin:4.5rem 0 1rem;border-top:1px solid var(--rule);padding-top:1.5rem;}
.pressline-intro{max-width:var(--measure);font-family:var(--serif);font-size:1.25rem;line-height:1.4;margin:0 0 1.75rem;color:var(--ink-soft);}
.pressline ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:0 2rem;}
.pressline li{border-top:1px solid var(--rule);}
.pressline li a{display:block;padding:.85rem 0 .95rem;text-decoration:none;}
.pressline .outlet{display:block;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.3rem;}
.pressline .headline{display:block;font-family:var(--serif);font-size:1.0625rem;line-height:1.3;}
.pressline li a:hover .headline{text-decoration:underline;text-underline-offset:.2em;}
.theme-dark .pressline li a:hover .outlet{color:var(--accent);}