@font-face{font-family:"Timeless Sans";src:url(/fonts/TimelessSansVF.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}

:root{
  --bg:#dfdfd8;
  --block:#d5d5cd;
  --ink:#0a0a0a;
  --mute:#74746d;
  --sans:"Timeless Sans",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --gut:clamp(20px,3.4vw,44px);
  --gap:clamp(12px,2.6vw,40px);
  --r:clamp(6px,.7vw,10px);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#121211;--block:#1c1c1a;--ink:#f1f1ec;--mute:#92928b}
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:10}
.skip:focus{left:8px}

.wrap{max-width:1512px;margin:0 auto;padding:0 var(--gut)}

/* header */
.top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding-top:clamp(18px,2.6vw,32px);
  color:var(--mute);
  font-size:15px;
}
.top nav{display:flex;gap:clamp(16px,2.4vw,32px)}
.top a{transition:color .15s}
.top a:hover,.top a[aria-current]{color:var(--ink)}

/* hero */
.hero{padding:clamp(40px,6vw,88px) 0 clamp(40px,6vw,88px)}
.back{display:inline-block;color:var(--mute);font-size:15px;transition:color .15s}
.back:hover{color:var(--ink)}
h1{
  margin-top:clamp(28px,4vw,56px);
  font-weight:500;
  font-size:clamp(32px,5vw,76px);
  line-height:1.08;
  letter-spacing:-.025em;
  max-width:15em;
  text-wrap:balance;
}
h1 em{font-style:normal;color:var(--mute)}
.facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px var(--gap);
  margin-top:clamp(40px,6vw,88px);
  max-width:1100px;
}
.facts dt{color:var(--mute);font-size:15px;line-height:1.3}
.facts dd{margin-top:4px;font-size:17px;font-weight:500;line-height:1.3}

/* images */
.ph{overflow:hidden;background:var(--block);border-radius:var(--r)}
.ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ph.l{aspect-ratio:2160/1350}
.ph.p{aspect-ratio:1080/1350}
.gal:hover .ph img{transform:scale(1.02)}
.fcap{margin-top:14px;color:var(--mute);font-size:15px;line-height:1.4}
.gal{margin:0 0 clamp(56px,8vw,120px)}
.gal.free .ph{aspect-ratio:auto}
.gal.free .ph img{height:auto}

/* landscape + portrait pairs, same arrangements as the home page */
.gal[class*="v-"]{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  align-items:start;
}
.v-a{grid-template-columns:2fr 1fr !important}
.v-a .l{grid-column:1;grid-row:1}
.v-a .p{grid-column:2;grid-row:1}
.v-b .p{grid-column:1 / span 5;grid-row:1}
.v-b .l{grid-column:6 / span 7;grid-row:1}
.v-c .p{grid-column:1 / span 3;grid-row:1}
.v-c .l{grid-column:4 / span 9;grid-row:1}
.v-d .l{grid-column:1 / span 9;grid-row:1}
.v-d .p{grid-column:10 / span 3;grid-row:1;margin-top:clamp(0px,9vw,140px)}
.v-e .l{grid-column:1 / span 7;grid-row:1}
.v-e .p{grid-column:8 / span 4;grid-row:1;margin-top:clamp(0px,6vw,96px)}

/* two portraits */
.pp{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.pp .ph:nth-child(2){margin-top:clamp(0px,7vw,110px)}
/* three portraits */
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:start}
.row3 .ph:nth-child(2){margin-top:clamp(0px,5vw,80px)}
.row3 .ph:nth-child(3){margin-top:clamp(0px,10vw,160px)}
/* a lone portrait */
.solo{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}
.solo .ph{grid-column:5 / span 4}
/* scrolling page preview */
.scroll{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}
.scroll .sf{grid-column:4 / span 6;max-height:min(80vh,780px);overflow-y:auto;overscroll-behavior:contain;border-radius:var(--r);background:var(--block)}
.scroll .sf img{display:block;width:100%;height:auto}
.scroll .fcap{grid-column:4 / span 6}

/* text */
.txt{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  margin:0 0 clamp(56px,8vw,120px);
}
.txt h2{grid-column:1 / span 3;font-size:17px;font-weight:500;line-height:1.3;padding-top:.45em}
.txt div{grid-column:4 / span 6;max-width:36em}
.txt p{font-size:clamp(18px,1.7vw,22px);line-height:1.4;text-wrap:pretty}
.txt p + p{margin-top:1em}
.txt ul{margin-top:1em;padding-left:1.1em}
.txt p + ul,.txt ul + p{margin-top:1em}
.txt li{font-size:clamp(18px,1.7vw,22px);line-height:1.4;text-wrap:pretty}
.txt li + li{margin-top:.5em}
.txt a{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.quote{
  max-width:20em;
  margin:0 0 clamp(56px,8vw,120px) calc((100% + var(--gap)) / 12 * 3);
  font-size:clamp(24px,3vw,40px);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.02em;
  text-wrap:balance;
}

/* pager */
.pager{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
  padding-top:clamp(32px,4vw,56px);
  border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
}
.pager a{display:flex;flex-direction:column;gap:6px;padding:8px 0}
.pager a.next{text-align:right;align-items:flex-end}
.pager span{color:var(--mute);font-size:15px}
.pager b{font-size:clamp(22px,3vw,40px);font-weight:500;line-height:1.1;letter-spacing:-.02em;transition:opacity .15s}
.pager a:hover b{opacity:.55}

.foot{
  margin-top:clamp(72px,9vw,128px);
  padding-bottom:40px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  color:var(--mute);
  font-size:15px;
}
.foot .links{display:flex;gap:24px}
.foot a:hover{color:var(--ink)}

@media (max-width:900px){
  .txt h2{grid-column:1 / -1;margin-bottom:14px;padding-top:0}
  .txt div{grid-column:1 / -1}
  .quote{margin-left:0}
  .scroll .sf,.scroll .fcap{grid-column:1 / -1}
  .solo .ph{grid-column:3 / span 8}
}
@media (max-width:760px){
  .gal[class*="v-"]{grid-template-columns:2fr 1fr !important}
  .gal[class*="v-"] .l{grid-column:1;grid-row:1;margin-top:0}
  .gal[class*="v-"] .p{grid-column:2;grid-row:1;margin-top:0}
  .pp .ph:nth-child(2),.row3 .ph:nth-child(n){margin-top:0}
  .pager{grid-template-columns:1fr}
  .pager a.next{text-align:left;align-items:flex-start}
}

@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  .js .rv.on{opacity:1;transform:none}
}