/* Photography section. Self-contained: it does not load the Webflow stylesheet,
   so nothing here can be moved by a change elsewhere on the site. */

:root{
  --paper:#ffffff;
  --ink:#0E0054;             /* 18.31:1 on white */
  --col:1200px;
  --muted:#3a406a;
  --line:#e6e6ee;
  --rule:#dddddd;            /* the heavier rules on the project pages */
  --pink:#ff0091;
  --pink-ink:#c2006e;          /* 4.6:1 on white, for pink used as text */
  --display:"LT Remark","Libre Caslon Display",Georgia,serif;
  --sans:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(18px,4vw,56px);
}

@font-face{
  font-family:"LT Remark";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/lt-remark-regular.woff2) format("woff2");
}
@font-face{
  font-family:"LT Remark";
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/lt-remark-italic.woff2) format("woff2");
}
@font-face{
  font-family:"LT Remark";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(../fonts/lt-remark-bold.woff2) format("woff2");
}
@font-face{
  font-family:"Albert Sans";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(../fonts/albert-sans-latin.woff2) format("woff2");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:20}
.skip:focus{left:0}

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

/* ---------- top bar ---------- */
.bar{padding:26px 0 0}
.back{
  display:inline-block;
  font-size:14px;font-weight:500;
  color:var(--ink);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;
  padding:11px 22px;
  transition:border-color .2s ease,color .2s ease;
}
.back:hover{border-color:var(--pink);color:var(--pink-ink)}
.back:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* ---------- the name ---------- */
.name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(3.2rem,13vw,13rem);
  line-height:.92;letter-spacing:-.015em;
  margin:.18em 0 0;
}
.standfirst{
  font-size:clamp(1rem,1.4vw,19px);color:var(--muted);
  margin:22px 0 0;max-width:34ch;
}

/* ---------- the three sections, across the top of the landing page ----------
   A centred row of three doors. Each one is also the only route to its
   section page, so this is navigation before it is decoration. */
.sections{
  list-style:none;padding:0;
  margin:clamp(30px,2.6vw,42px) auto 0;
  max-width:var(--col);
  display:flex;justify-content:center;
  gap:clamp(26px,5vw,96px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.sections li{margin:0}
.sections a{
  display:block;padding:clamp(14px,1.3vw,22px) 4px;
  color:var(--ink);text-decoration:none;text-align:center;
}
.sections .word{
  display:block;
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,2.3vw,40px);line-height:1.1;letter-spacing:-.01em;
}
.sections .count{
  display:block;margin-top:4px;
  font-size:13px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;
}
.sections a:hover .word{color:var(--pink-ink)}
.sections a:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
@media (max-width:620px){
  .sections{flex-direction:column;gap:0}
  .sections li+li{border-top:1px solid var(--line)}
}

/* ---------- project list inside a section ---------- */
.eyebrow{
  font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0;
}
.projects{list-style:none;margin:clamp(40px,6vw,80px) 0 0;padding:0;display:grid;gap:clamp(34px,5vw,72px)}
.projects a{display:block;color:var(--ink);text-decoration:none}
.projects img{width:100%}
.projects h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.1;margin:18px 0 0;
}
.projects p{font-size:16px;color:var(--muted);margin:8px 0 0;max-width:56ch}
.projects a:hover h2{color:var(--pink-ink)}
.projects a:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
@media (min-width:860px){
  .projects{grid-template-columns:repeat(2,1fr)}
  .projects li:nth-child(even){margin-top:clamp(40px,8vw,140px)}
}

/* ---------- section pages ---------- */
.meta{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:clamp(70px,10vw,150px);padding:34px 0 60px}
.foot p{margin:0;font-size:15px;color:var(--muted)}
.foot a{color:var(--pink-ink)}
.foot a:hover{color:var(--pink)}

/* ---------- reveal ----------
   Gated on .js, which the snippet in each page's <head> sets. Only
   script can add .is-in, so without that gate a visitor with
   JavaScript off would get a page of invisible content. */
@media (prefers-reduced-motion:no-preference){
  .js [data-rise]{
    opacity:0;transform:translateY(22px);
    transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1);
  }
  .js [data-rise].is-in{opacity:1;transform:none}
}

/* ============================================================
   Landing page, from the Paper design.
   ============================================================ */

.centre{text-align:center}
.name--hero{
  font-size:clamp(3.2rem,14.8vw,256px);
  line-height:1.2;letter-spacing:.03em;
  text-align:center;margin:.1em 0 0;
}

.band,.col{max-width:var(--col);margin-inline:auto}
.triptych{margin:calc(clamp(44px,6vw,86px) + 15px) auto 0}
.triptych img{width:100%}
.triptych figcaption{
  margin-top:14px;text-align:center;
  font-size:13px;line-height:1.5;color:var(--muted);   /* 9.9:1 on white */
}

/* the pull quote */
.pull{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.35rem,2.1vw,30px);line-height:1.2;
  text-align:center;color:var(--ink);
  max-width:584px;margin:clamp(38px,3.4vw,56px) auto 0;
}

/* ---------- about ---------- */
.about{max-width:var(--col);margin:clamp(70px,10vw,150px) auto 0;border-top:1px solid var(--ink);padding-top:30px}
.about .label{
  display:block;font-size:18px;font-weight:700;letter-spacing:normal;
  text-transform:uppercase;color:var(--ink);margin:0 0 30px;
}
.about h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.4rem,5.5vw,80px);line-height:1.2;letter-spacing:.02em;
  margin:0 0 22px;
}
.about .role{
  font-family:var(--display);font-size:clamp(1.15rem,1.8vw,25px);line-height:1.4;
  letter-spacing:.02em;margin:0;max-width:42ch;
}
.about-cols{display:grid;gap:clamp(30px,4vw,56px);margin:clamp(40px,5vw,72px) 0 0}
.about-cols h3{
  font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:normal;
  margin:0 0 6px;color:var(--ink);
}
.about-cols .studies p{font-size:16px;line-height:1.75;margin:0;color:var(--ink)}
.about-cols .journey p{
  font-family:var(--display);font-size:clamp(1.1rem,1.75vw,26px);line-height:1.23;
  letter-spacing:.02em;margin:0 0 20px;text-wrap:pretty;color:var(--ink);
}
.about-cols .journey p:last-child{margin-bottom:0}
@media (min-width:900px){
  .about-cols{grid-template-columns:471px minmax(0,713px);gap:11px}
}

/* ---------- the closing band ---------- */
.thanks{
  margin-top:clamp(70px,10vw,150px);
  background:var(--ink);
  color:#fff;text-align:center;padding:clamp(44px,7vw,84px) 0;
}
.thanks h2{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(1.5rem,3vw,40px);line-height:1.2;margin:0 0 18px;
}
.thanks p{font-size:clamp(1rem,1.3vw,18px);line-height:1.5;margin:0 auto;max-width:56ch}
.thanks a{color:#fff;font-weight:700;text-underline-offset:3px}
.thanks a:hover{text-decoration-thickness:2px}

/* ---------- site footer ---------- */
.sitefoot{border-top:0;padding:clamp(34px,5vw,54px) 0 44px}
.sitefoot-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px}
.sitefoot .mark{font-weight:700;font-size:18px;color:var(--ink);text-decoration:none}
.sitefoot nav{display:flex;flex-wrap:wrap;gap:22px}
.sitefoot nav a{font-size:15px;font-weight:500;color:var(--ink);text-decoration:none}
.sitefoot nav a:hover{color:var(--pink-ink)}
.sitefoot .social{margin-left:auto;display:flex;gap:10px}
.sitefoot .social a{
  width:38px;height:38px;border-radius:50%;background:#b8bcc9;
  display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;
  text-decoration:none;letter-spacing:.02em;
}
.sitefoot .social a:hover{background:var(--pink)}
.sitefoot .colophon{margin:clamp(26px,4vw,44px) 0 0;padding-top:22px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}

/* ---------- the six-tile grid ----------
   As it was before: six photographs, three across, each linking to its
   project. No titles, which is what the design shows. */
.tiles{
  list-style:none;padding:0;
  margin:clamp(52px,8vw,110px) auto 0;
  max-width:var(--col);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,26px);
}
.tiles li{margin:0}
.tiles a{display:block;overflow:clip}
.tiles img{
  width:100%;height:100%;aspect-ratio:3 / 4;object-fit:cover;
  background:#f2f2f6;transition:opacity .3s ease;
}
.tiles a:hover img{opacity:.85}
.tiles a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:760px){
  .tiles{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   Portraits, from the Paper artboard. The artboard is 1728 wide
   with a 1200 content column, so every size below is either the
   drawn pixel value or that value as a share of 1728.
   ============================================================ */

.pmeta{
  font-size:18px;line-height:22px;color:var(--ink);
  margin:clamp(30px,2.3vw,40px) 0 0;
}
.headline{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.1rem,4.63vw,80px);   /* 80px at the artboard width */
  line-height:1.05;letter-spacing:0;
  margin:clamp(22px,1.9vw,32px) 0 0;
}
.subhead{
  font-size:clamp(1.05rem,1.39vw,24px);line-height:1.25;
  color:var(--ink);max-width:1000px;
  margin:clamp(24px,1.97vw,34px) 0 0;
}

/* The mosaic. Each row is as wide as the column and as tall as she
   drew it, so --ar carries the row's own proportion and --cols the
   widths inside it. Images cover at centre, which is how the
   artboard fills them. */
.mosaic{
  max-width:var(--col);margin:clamp(38px,3.2vw,54px) auto 0;
  display:grid;gap:23px;
}
.mosaic .row{
  display:grid;gap:16px;
  grid-template-columns:var(--cols,1fr);
  grid-template-rows:minmax(0,1fr);   /* a definite track, so height:100% resolves */
  aspect-ratio:var(--ar);
  min-width:0;                 /* or the photographs' own widths push the row wider */
}
.mosaic figure{margin:0;min-width:0;min-height:0;overflow:clip}
.mosaic img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  background:#f2f2f6;
}
.r1 {--ar:1200/769;--cols:1fr}
.r2 {--ar:1200/397;--cols:1fr 1fr}
.r3 {--ar:1200/802;--cols:1fr}
.r4 {--ar:1200/918;--cols:1fr}
.r5 {--ar:1200/397;--cols:1fr 1fr}
.r6 {--ar:1200/808;--cols:1fr}
.r7 {--ar:1200/397;--cols:1fr 1fr}
.r8 {--ar:1200/849;--cols:1fr 1fr}
.r9 {--ar:1200/470;--cols:501fr 686fr}
.r10{--ar:1200/517;--cols:734fr 449fr}
.r11{--ar:1200/554;--cols:367fr 815fr}

/* One column on a phone, at each photograph's own proportion, so a
   small screen shows the whole frame rather than her desktop crop. */
@media (max-width:700px){
  .mosaic .row{grid-template-columns:1fr;aspect-ratio:auto}
  .mosaic img{height:auto;aspect-ratio:auto}
}

/* ---------- the other projects ---------- */
.onward{
  max-width:var(--col);margin:clamp(60px,6vw,104px) auto 0;
  border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);
  padding:clamp(24px,2.6vw,34px) 0;
  display:flex;gap:24px;justify-content:space-between;
}
.onward a{
  display:block;color:var(--ink);text-decoration:none;
}
.onward a:last-child{text-align:right}
.onward .lbl{display:block;font-size:16px;line-height:20px}
.onward .to{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.35rem,1.74vw,30px);line-height:1.2;margin-top:6px;
}
.onward a:hover .to{color:var(--pink-ink)}
.onward a:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
/* On the narrowest phones "Meanwhile, in Iran" wraps opposite a
   one-line title, so stack them instead. */
@media (max-width:360px){
  .onward{flex-direction:column;gap:26px}
  .onward a:last-child{text-align:left}
}

/* ---------- the pill under it ---------- */
.homeward{max-width:var(--col);margin:clamp(52px,4.6vw,80px) auto 0;text-align:center}
.homeward a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:250px;min-height:66px;padding:0 28px;
  border:1px solid var(--ink);border-radius:999px;
  font-size:16px;line-height:20px;color:var(--ink);text-decoration:none;
  transition:background-color .2s ease,color .2s ease;
}
.homeward a:hover{background:var(--ink);color:#fff}
.homeward a:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* ============================================================
   The two-column series grids, from the Paper artboards. Both sit in
   the 1200px column; each modifier carries its own tile proportion and
   gutters, which are the ones she drew. In both cases the proportion is
   the photographs' own, so nothing is cropped at any width.
   ============================================================ */

.grid2{
  max-width:var(--col);margin:clamp(38px,3.2vw,54px) auto 0;
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:var(--gx);row-gap:var(--gy);
}
/* Meanwhile, in Iran: 594px tiles, every photograph 900x600 */
.grid2--landscape{--gx:12px;--gy:13px;--tile:3 / 2}
/* Headshots: 592px tiles, every photograph 750x1090 */
.grid2--upright{--gx:16px;--gy:16px;--tile:750 / 1090}

.grid2 figure{margin:0;min-width:0;overflow:clip}
.grid2 img{
  width:100%;height:auto;aspect-ratio:var(--tile);object-fit:cover;
  background:#f2f2f6;
}
@media (max-width:700px){
  .grid2{grid-template-columns:1fr}
}

/* ---------- the credits block under a series ---------- */
.credits{
  max-width:var(--col);margin:clamp(34px,2.6vw,44px) auto 0;
  border-top:1px solid var(--ink);padding-top:40px;
}
.credits h2{
  font-size:18px;line-height:22px;font-weight:700;
  text-transform:uppercase;letter-spacing:normal;
  margin:0 0 4px;color:var(--ink);
}
.credits-cols{display:grid;gap:clamp(30px,4vw,44px)}
.credits .where p{font-size:16px;line-height:22px;letter-spacing:.02em;margin:0}
.credits .story p{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.1rem,1.51vw,26px);line-height:1.23;letter-spacing:.02em;
  margin:0 0 20px;text-wrap:pretty;
}
.credits .story p:last-child{margin-bottom:0}
@media (min-width:900px){
  .credits-cols{grid-template-columns:471px minmax(0,713px);gap:11px}
}