/* Andrea Pistolesi — pistolesiphoto.com
   Hand-built. No frameworks, no webfonts, no external requests.
   Note: source images are max 1000px wide; nothing is displayed beyond that. */

:root{
  --paper:#faf9f6;
  --ink:#191714;
  --muted:#6d675e;
  --rule:#ddd7cc;
  --wash:#f2efe9;
  --measure:34rem;
  --max:1080px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-weight:600; line-height:1.15; letter-spacing:-.012em; margin:0}
p{margin:0 0 1em}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:99}

/* ---------- header ---------- */
header.site{border-bottom:1px solid var(--rule); background:var(--paper);
  position:sticky; top:0; z-index:20}
.bar{display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap; padding-top:16px; padding-bottom:14px}
.ident{text-decoration:none; display:flex; flex-direction:column}
.ident .n{font-size:19px; font-weight:600; letter-spacing:.005em}
.ident .r{font-family:var(--sans); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); margin-top:3px}
header nav{display:flex; gap:22px; flex-wrap:wrap}
header nav a{font-family:var(--sans); font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; text-decoration:none; color:var(--muted);
  padding-bottom:2px; border-bottom:1px solid transparent}
header nav a:hover{color:var(--ink)}
header nav a.on{color:var(--ink); border-bottom-color:var(--ink)}

/* ---------- shared type ---------- */
.kicker{font-family:var(--sans); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 14px}
.lede{font-size:1.16rem; line-height:1.55; color:#3a352e; max-width:var(--measure)}
.ph{padding:64px 0 32px; max-width:46rem}
.ph h1{font-size:clamp(2rem,4.4vw,3.05rem)}
.ph .sub{font-size:1.2rem; color:var(--muted); margin-top:12px; font-style:italic}
.sec{font-size:1.5rem; margin:0 0 18px}
.l a{font-family:var(--sans); font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--ink);
  padding-bottom:2px}
.note{font-size:.92rem; color:var(--muted); max-width:var(--measure)}
.count{font-family:var(--sans); font-size:12px; letter-spacing:.06em;
  color:var(--muted); border-top:1px solid var(--rule); padding-top:14px; margin-top:8px}

/* ---------- home ---------- */
.opening{padding:78px 0 42px}
.opening h1{font-size:clamp(1.9rem,4vw,2.85rem); max-width:22ch; letter-spacing:-.015em}
.opening .lede{margin-top:26px}
.hero{margin:8px auto 0}
.heroimg{width:100%; max-width:1000px; margin:0 auto}

.method{padding:56px 0; margin-top:56px;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--wash)}
.big{font-size:clamp(1.35rem,2.6vw,1.75rem); line-height:1.4; max-width:30ch; margin:0 0 34px}
.nums{margin:0; display:grid; gap:4px 26px}
.nums.row{grid-template-columns:repeat(4,1fr)}
.nums dt{font-size:clamp(1.5rem,3vw,2.1rem); font-weight:600; letter-spacing:-.02em}
.nums dd{margin:0 0 18px; font-family:var(--sans); font-size:12px;
  letter-spacing:.05em; color:var(--muted); line-height:1.4}

section.wrap{padding:64px 24px}
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px}
.split p{max-width:36ch}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:38px 30px; padding-bottom:56px}
.cards.four{grid-template-columns:repeat(4,1fr); padding-bottom:26px}
.card{text-decoration:none; display:block}
.card .thumb{aspect-ratio:4/3; overflow:hidden; background:var(--wash); margin-bottom:14px}
.card .thumb img{width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.card:hover .thumb img{transform:scale(1.035)}
.card h2,.card h3{font-size:1.18rem; margin-bottom:5px}
.card .sub{font-size:.95rem; color:var(--muted); margin:0 0 6px; font-style:italic}
.card .meta{font-family:var(--sans); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin:0}

/* ---------- project page ---------- */
.cols{display:grid; grid-template-columns:minmax(0,var(--measure)) 1fr;
  gap:56px; padding-top:48px; padding-bottom:48px; align-items:start}
.prose h2{font-size:1.22rem; margin:34px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p{max-width:var(--measure)}
.outcome{border-top:2px solid var(--ink); padding-top:16px}
.outcome h2{font-family:var(--sans); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.outcome p{font-size:.98rem}
.outcome .where{font-size:.88rem; color:var(--muted)}
.links{list-style:none; margin:0; padding:0}
.links li{font-size:.98rem; padding:7px 0; border-bottom:1px solid var(--rule)}
.links a{text-decoration:none; border-bottom:1px solid var(--rule)}

.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding-bottom:40px}
.gallery figure{margin:0; aspect-ratio:3/2; overflow:hidden; background:var(--wash)}
.gallery img{width:100%; height:100%; object-fit:cover}

.video{position:relative; padding-bottom:56.25%; height:0; margin:0 0 48px;
  max-width:1000px; background:#000}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.vgrid{display:grid; grid-template-columns:1fr 1fr; gap:40px}
.vgrid h3{font-size:1.15rem; margin-bottom:6px}
.vgrid p{font-size:.95rem; color:var(--muted)}
.strand{border-top:1px solid var(--rule); padding:52px 0}
.strand h2{font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:16px}

/* ---------- stories ---------- */
.filter{display:block; margin-top:28px}
.filter span{font-family:var(--sans); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:7px}
.filter input{font-family:var(--serif); font-size:1rem; padding:10px 12px;
  border:1px solid var(--rule); background:#fff; width:min(340px,100%); border-radius:0}
.filter input:focus{outline:2px solid var(--ink); outline-offset:-1px}
.stories{display:grid; grid-template-columns:repeat(4,1fr); gap:30px 22px; padding-bottom:52px}
.story{margin:0}
.story .thumb{aspect-ratio:3/2; overflow:hidden; background:var(--wash); margin-bottom:9px}
.story img{width:100%; height:100%; object-fit:cover}
.story figcaption{font-family:var(--sans); font-size:11.5px; letter-spacing:.05em;
  line-height:1.45; color:var(--muted); text-transform:uppercase}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--rule); margin-top:40px; padding:34px 0 56px}
.foot{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap}
.foot p{margin:0; font-family:var(--sans); font-size:11.5px; letter-spacing:.05em;
  color:var(--muted)}
.foot a{text-decoration:none; border-bottom:1px solid var(--rule)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .cards,.cards.four{grid-template-columns:repeat(2,1fr)}
  .stories{grid-template-columns:repeat(3,1fr)}
  .cols{grid-template-columns:1fr; gap:38px}
  .split,.vgrid{grid-template-columns:1fr; gap:38px}
  .nums.row{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  body{font-size:17px}
  .wrap{padding:0 18px}
  .bar{padding-top:13px; padding-bottom:11px}
  header nav{gap:15px}
  header nav a{font-size:11px}
  .ph{padding:40px 0 24px}
  .opening{padding:44px 0 30px}
  section.wrap{padding:44px 18px}
  .stories{grid-template-columns:repeat(2,1fr); gap:22px 14px}
  .cards{gap:28px 18px}
  .gallery{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* ---------- film grids ---------- */
.films{display:grid; grid-template-columns:repeat(3,1fr); gap:34px 26px; margin:30px 0 26px}
.films.two{grid-template-columns:repeat(2,1fr); max-width:760px}
.film{text-decoration:none; display:block}
.film .thumb{aspect-ratio:16/9; overflow:hidden; background:#111; margin-bottom:12px}
.film .thumb img{width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.film:hover .thumb img{transform:scale(1.035)}
.film h3{font-size:1.1rem; margin-bottom:4px}
.film .sub{font-size:.92rem; color:var(--muted); font-style:italic; margin:0 0 4px}
.film .meta{font-family:var(--sans); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:0}
.film .blurb{font-size:.93rem; color:#4a453d; margin:9px 0 0}
.strand h3{font-size:1.25rem; margin:0 0 4px}
.strand > .sub{font-size:.95rem; color:var(--muted); font-style:italic; margin:0 0 12px}
.blurb.wide{max-width:var(--measure); color:#3a352e}
@media (max-width:900px){
  .films{grid-template-columns:repeat(2,1fr)}
  .films.two{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .films,.films.two{grid-template-columns:1fr; gap:26px}
}

/* ---------- in-preparation block, plain definition lists, notices ---------- */
.prep{border-left:2px solid var(--rule); padding:4px 0 4px 22px; margin:34px 0 26px}
.prep h3{font-size:1.2rem; margin:0 0 10px}
.nums.plain dt{font-size:.78rem; font-family:var(--sans); letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); font-weight:400}
.nums.plain dd{font-family:var(--serif); font-size:.98rem; letter-spacing:0;
  text-transform:none; color:var(--ink); margin-bottom:16px}
.prose .warn{border-left:2px solid var(--ink); padding-left:16px; font-weight:600}
.prose h2{scroll-margin-top:90px}

/* ---------- click-to-play film posters ---------- */
.film.play .thumb{position:relative}
.film.play .thumb iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.pbtn{position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px;
  border-radius:50%; background:rgba(20,18,15,.62); pointer-events:none;
  transition:background .25s, transform .25s}
.pbtn::after{content:""; position:absolute; left:22px; top:17px;
  border-style:solid; border-width:11px 0 11px 17px;
  border-color:transparent transparent transparent #fff}
.film.play:hover .pbtn{background:rgba(20,18,15,.85); transform:scale(1.06)}
@media (max-width:560px){ .pbtn{width:46px;height:46px;margin:-23px 0 0 -23px}
  .pbtn::after{left:18px;top:14px;border-width:9px 0 9px 14px} }

/* ---------- home opening: statement beside a portrait ---------- */
.opening .oh{display:grid; grid-template-columns:1fr minmax(300px,40%);
  gap:64px; align-items:center; padding-top:24px}
.opening .otext h1{max-width:19ch}
.oport{margin:0}
.oport img{width:100%; height:auto; display:block; background:var(--wash)}
.oport figcaption{font-family:var(--sans); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); margin-top:12px}
@media (max-width:860px){
  .opening .oh{grid-template-columns:1fr; gap:34px}
  .opening .otext h1{max-width:none}
  .oport{max-width:440px}
}

/* ---------- breathing room under page titles ----------
   h1/h2/h3 carry margin:0, so a heading followed directly by a paragraph
   had no gap at all on sub-pages. The home page set its own; .ph did not. */
.ph h1 + .lede,
.ph h1 + .sub,
.strand h2 + .lede{margin-top:20px}
.ph .sub + .lede{margin-top:16px}
@media (max-width:560px){
  .ph h1 + .lede,
  .ph h1 + .sub,
  .strand h2 + .lede{margin-top:24px}
  .ph h1{line-height:1.2}
}