/* andreapistolesi.com — Andrea Pistolesi, portfolio
   Hand-built. No framework, no build step, no webfonts, no trackers.
   The site's job: corporate customers in every field. Authorial in quality,
   professionally oriented in purpose. Photographs first, nothing in their way. */

:root{
  --paper:#ffffff;
  --ink:#141414;
  --muted:#6e6e6e;
  --rule:#e2e2e2;
  --max:1600px;
  --sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
h1,h2,h3{font-weight:600; line-height:1.2; margin:0; letter-spacing:-.01em}
p{margin:0 0 1em}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; background:var(--ink); color:#fff; padding:8px 12px; z-index:99}

/* ---------- header ---------- */
header.site{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--rule)}
.bar{max-width:var(--max); margin:0 auto; padding:13px 26px;
  display:flex; align-items:baseline; justify-content:space-between; gap:22px; flex-wrap:wrap}
.ident{text-decoration:none; display:flex; align-items:baseline; gap:11px; flex-wrap:wrap}
.ident .n{font-size:16px; font-weight:600; letter-spacing:.01em}
.ident .r{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
nav.main{display:flex; gap:19px; flex-wrap:wrap}
nav.main a{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--muted); padding-bottom:2px; border-bottom:1px solid transparent}
nav.main a:hover{color:var(--ink)}
nav.main a.on{color:var(--ink); border-bottom-color:var(--ink)}

/* One line, above the photographs, saying what the site is. A visitor landing
   here sees fifteen pictures and no explanation — nothing tells them this is
   the selection rather than the whole account. Andrea's point, and correct.
   It is a line, not a gate: ~40px, no click required, the photographs start
   immediately beneath it. */
.what{max-width:var(--max); margin:0 auto; padding:14px 26px 15px;
  font-size:12.5px; letter-spacing:.02em; color:var(--muted);
  border-bottom:1px solid var(--rule)}
.what a{text-decoration:none; color:var(--ink); border-bottom:1px solid var(--rule)}
.what a:hover{border-bottom-color:var(--ink)}
@media (max-width:620px){ .what{padding:12px 18px 13px; font-size:12px} }

/* ---------- the front fifteen: continuous scroll, full width ----------
   No clicking, no JavaScript. The whole opening statement is consumed by
   scrolling. Images are max 2560px, so the column never exceeds that. */
.reel{max-width:2560px; margin:0 auto}
.reel figure{margin:0 0 4px}
.reel img{width:100%}
@media (min-width:900px){ .reel figure{margin-bottom:8px} }

/* ---------- portfolio index under the reel ---------- */
.index{max-width:var(--max); margin:0 auto; padding:64px 26px 8px}
.index h2{font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:22px}
.folios{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.folios li{border-bottom:1px solid var(--rule)}
.folios a{display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:19px 2px; text-decoration:none}
.folios .t{font-size:clamp(1.35rem,3.4vw,2.1rem); font-weight:600; letter-spacing:-.02em}
.folios .c{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap}
.folios a:hover .t{text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px}

/* ---------- portfolio pages ---------- */
.ph{max-width:var(--max); margin:0 auto; padding:48px 26px 26px}
.ph h1{font-size:clamp(1.7rem,4.6vw,3rem)}
.ph .sub{font-size:1.02rem; color:var(--muted); margin-top:9px; max-width:56ch}
.ph .n{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:14px}

.plates{max-width:2560px; margin:0 auto}
.plates figure{margin:0 0 4px}
.plates img{width:100%}
@media (min-width:900px){ .plates figure{margin-bottom:8px} }
/* Captions were dropped: the client names carry the credential better than
   eighteen descriptions, and they sit in the page blurb. The rule stays for the
   one plate that cannot be read without a line — Caduta-01, the nine-frame
   sequence. */
.plates figcaption{max-width:var(--max); margin:9px auto 0; padding:0 26px;
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

/* ---------- the close: PDF and contact, on every portfolio ---------- */
.close{max-width:var(--max); margin:0 auto; padding:58px 26px 10px;
  border-top:1px solid var(--rule); margin-top:56px;
  display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.btn{display:inline-block; text-decoration:none; font-size:12px; letter-spacing:.11em;
  text-transform:uppercase; padding:14px 24px; border:1px solid var(--ink); color:var(--ink)}
.btn:hover{background:var(--ink); color:#fff}
.btn.off{border-color:var(--rule); color:#b0b0b0; pointer-events:none}
.close .note{font-size:11.5px; color:var(--muted); letter-spacing:.02em; margin:0}

/* ---------- contact ---------- */
.contact{max-width:var(--max); margin:0 auto; padding:58px 26px 90px}
.contact h1{font-size:clamp(1.7rem,4.6vw,3rem); margin-bottom:30px}
.rows{list-style:none; margin:0; padding:0; max-width:640px; border-top:1px solid var(--rule)}
.rows li{display:flex; gap:22px; padding:16px 2px; border-bottom:1px solid var(--rule); flex-wrap:wrap}
.rows .k{flex:0 0 130px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.rows .v{flex:1; min-width:220px; font-size:1.02rem}
.rows a{text-decoration:none; border-bottom:1px solid var(--rule)}
.rows a:hover{border-bottom-color:var(--ink)}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--rule); margin-top:70px}
.foot{max-width:var(--max); margin:0 auto; padding:26px 26px 44px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
.foot p{margin:0; font-size:11.5px; letter-spacing:.05em; color:var(--muted)}
.foot a{text-decoration:none; border-bottom:1px solid var(--rule)}

@media (max-width:620px){
  .bar{padding:11px 18px}
  .index,.ph,.close,.contact,.foot{padding-left:18px; padding-right:18px}
  .plates figcaption{padding:0 18px}
  .reel figure,.plates figure{margin-bottom:3px}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }

/* ---------- prose (film page, about) ---------- */
.prose{max-width:var(--max); margin:0 auto; padding:0 26px 8px}
.prose p{max-width:62ch; font-size:1.02rem; color:#3c3c3c}
.about{max-width:62ch; margin-bottom:38px}
.about p{font-size:1.02rem; color:#3c3c3c}

/* ---------- film cards ---------- */
.films{max-width:var(--max); margin:0 auto; padding:30px 26px 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px 26px}
a.film{text-decoration:none; display:block}
a.film img{width:100%; margin-bottom:13px}
a.film h3{font-size:1.12rem; margin-bottom:3px}
a.film .s{font-size:.95rem; color:var(--muted); margin:0 0 5px}
a.film .d{font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:0}
a.film:hover h3{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
@media (max-width:900px){ .films{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .films{grid-template-columns:1fr; padding:24px 18px 0} .prose{padding:0 18px 8px} }

/* ---------- film page strands ---------- */
.strand{max-width:var(--max); margin:0 auto; padding:46px 26px 0}
.strand h2{font-size:clamp(1.3rem,2.8vw,1.75rem); margin-bottom:10px}
.strand .lede{max-width:62ch; font-size:1.02rem; color:#3c3c3c; margin:0 0 .7em}
.strand .lede a{border-bottom:1px solid var(--rule); text-decoration:none}
.strand .lede a:hover{border-bottom-color:var(--ink)}
.titles{list-style:none; margin:18px 0 0; padding:0; max-width:760px; border-top:1px solid var(--rule)}
.titles li{display:flex; gap:20px; justify-content:space-between; flex-wrap:wrap;
  padding:13px 2px; border-bottom:1px solid var(--rule)}
.titles .t{font-size:1.05rem; font-weight:600}
.titles .c{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
@media (max-width:620px){ .strand{padding:34px 18px 0} }

/* ---------- click-to-play film posters ----------
   .shot is 16/9 because that is the shape of the Vimeo player and of every
   poster it holds (all 1280x720) — it is a video frame, not a photograph, so
   the no-cropping rule for .reel and .plates does not apply here. */
.shot{position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  background:#111; margin-bottom:13px}
.shot img{width:100%; height:100%; object-fit:cover; margin:0;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
a.film:hover .shot img{transform:scale(1.03)}
.shot iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.pbtn{position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px 0 0 -27px;
  border-radius:50%; background:rgba(20,20,20,.6); pointer-events:none;
  transition:background .25s, transform .25s}
.pbtn::after{content:""; position:absolute; left:21px; top:16px;
  border-style:solid; border-width:11px 0 11px 17px;
  border-color:transparent transparent transparent #fff}
a.film:hover .pbtn{background:rgba(20,20,20,.85); transform:scale(1.06)}
@media (max-width:620px){ .pbtn{width:46px;height:46px;margin:-23px 0 0 -23px} }

/* The PDF is downloaded in one place only — the foot of the page, after the
   work. The line in the header is a signpost, not a second download: it says a
   PDF exists and anchors to #end. Andrea's reasoning, and it is right: a
   download link at the top lets a reader take the file and never look at the
   photographs, which is the opposite of what the page is for. The anchor still
   gets the impatient reader there in one click, so nothing is lost. */
.pdftop{text-decoration:none; border-bottom:1px solid var(--rule)}
.pdftop:hover{color:var(--ink); border-bottom-color:var(--ink)}
.pdftop.off{color:#b8b8b8; border-bottom-color:transparent}
/* html{scroll-behavior:smooth} is already set, so #end glides rather than jumps. */
.close{scroll-margin-top:80px}

/* The five properties, in every footer. pistolesi.com is no longer a hub, so
   each property carries the whole set and the current one is named but not
   linked. Order is fixed: Portfolio · The Record · Archive · Books · Prints. */
.foot .here{color:var(--ink)}