/* Photo Essay (single Story, Form = Photo Essay). Loaded only on those pages, after
   article.css / article-meta.css. Everything is scoped to .pe-article.

   Layout model: ONE container. .pe-container (max --pe-container-w, responsive side padding
   --pe-pad) wraps both the hero panel and the article body; the hero panel and the opening text
   share one reading-column width (--pe-read-w), so their edges always match. .pe-body is a 12-column grid inside it, and each pe-* section
   places itself on that grid, so any order, subset or repetition stays coherent. Photographs keep their
   natural proportions: scaled by width, never cropped to a fixed ratio. Portrait and square
   photographs are given a narrower share of the row (the renderer adds is-portrait / is-square)
   instead of being stretched to the landscape width.

   Sections are written at render time by the section blocks (inc/photo-essay-blocks.php) — or,
   for essays written before them, by Group blocks carrying the same classes. Content that is NOT
   inside a pe-section (e.g. an old paragraph) falls back to the single hero/opening text column,
   so existing content stays safe. */

.pe-article{--pe-container-w:1240px;--pe-pad:clamp(20px,4vw,48px);--pe-gap:clamp(72px,9vw,148px);--pe-col:24px;--pe-read-w:min(100%,52rem);--pe-note-hang:56px;--pe-body-size:18px;--pe-rule:44px;overflow-x:clip;}
.pe-container{box-sizing:border-box;width:100%;max-width:var(--pe-container-w);margin-inline:auto;padding-inline:var(--pe-pad);}

/* ---------- full-screen hero ----------
   The photograph is full bleed and fills the first screen. One solid, semi-transparent dark panel
   (no gradient) sits at the bottom, exactly as wide as the reading column (--pe-read-w) that the
   opening passage uses, flush with the bottom edge of the hero; photograph stays visible above and to both sides. Its content is centred. */
.pe-hero{position:relative;display:flex;align-items:flex-end;min-height:100vh;min-height:100svh;color:#fff;background:#14120f;isolation:isolate;}
.pe-hero-media{position:absolute;inset:0;z-index:-1;margin:0;}
.pe-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%;}
.pe-hero-inner{padding-top:140px;}
.pe-hero-panel{box-sizing:border-box;max-width:var(--pe-read-w);margin-inline:auto;text-align:center;padding:clamp(28px,4vw,48px) clamp(20px,5vw,64px) clamp(28px,3.4vw,40px);background:rgba(18,22,26,.62);border-radius:4px 4px 0 0;}
.pe-eyebrow{margin:0 0 14px;font-family:var(--sans);font-weight:700;font-size:13px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.pe-hero h1{font-family:var(--sans);font-weight:700;font-size:clamp(32px,4.4vw,60px);line-height:1.08;letter-spacing:-0.015em;color:#fff;margin:0 auto 18px;max-width:20ch;}
.pe-hero .pe-intro{font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:rgba(255,255,255,.92);margin:0 auto;max-width:44rem;}
.pe-rule{display:block;width:var(--pe-rule);height:3px;margin:26px auto 24px;background:var(--accent);}
/* same metadata components as a standard Story (article-meta.css), centred and recoloured for the panel */
.pe-hero .article-meta-row{justify-content:center;gap:20px 28px;margin:0;padding:0;border:0;}
.pe-hero .author-avatar{width:48px;height:48px;overflow:hidden;}
.pe-hero .author-avatar img{display:block;width:100%;height:100%;object-fit:cover;}
.pe-hero .author-info{text-align:left;}
.pe-hero .author-name{color:#fff;font-size:15px;}
.pe-hero .author-role{color:rgba(255,255,255,.72);font-size:13px;}
.pe-hero .meta-divider{height:40px;background:rgba(255,255,255,.3);}
.pe-hero .meta-format{color:rgba(255,255,255,.78);}
.pe-hero .meta-date{color:rgba(255,255,255,.88);}
/* hero photograph caption: on the page background directly under the hero, aligned to the container */
.pe-hero-caption{margin:0;padding:12px 0 0;text-align:right;font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.5;color:#8a8d93;}

/* ---------- body grid ---------- */
.pe-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pe-col);padding:var(--pe-gap) 0 calc(var(--pe-gap) * .9);}
.pe-body > *{grid-column:1 / -1;max-width:var(--pe-read-w);margin-block:0 26px;margin-inline:auto;}   /* loose content: the opening's reading column */
.pe-body > .pe-section{max-width:none;margin-inline:0;margin-block:0 var(--pe-gap);}
.pe-body > .pe-section:last-child{margin-bottom:0;}
.pe-body p:empty{display:none;}

.pe-body p{font-family:var(--serif);font-size:var(--pe-body-size);line-height:1.8;color:var(--body);margin:0 0 26px;}
.pe-body h2{font-family:var(--sans);font-weight:700;font-size:clamp(24px,2.6vw,32px);line-height:1.2;letter-spacing:-0.01em;color:var(--heading);margin:0 0 20px;}
.pe-body h3{font-family:var(--sans);font-weight:700;font-size:20px;line-height:1.25;color:var(--heading);margin:0 0 14px;}
.pe-body a{color:var(--accent);}

/* images: natural proportions — scaled by width, never cropped, never letterboxed */
.pe-body figure{margin:0;}
.pe-body figure img{display:block;width:100%;max-width:100%;height:auto;}
.pe-body figure img:not([src]){display:none;}
.pe-body figcaption{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.55;color:#8a8d93;max-width:58ch;}

/* ---------- Opening: one passage in a centred reading column, same body type as the rest ---------- */
.pe-body > .pe-opening{max-width:var(--pe-read-w);margin-inline:auto;margin-bottom:clamp(48px,6vw,88px);}
.pe-opening > p:last-child{margin-bottom:0;}
.pe-opening > p:first-of-type::first-letter{font-family:var(--serif);font-weight:600;font-size:5.5rem;line-height:.85;float:left;color:var(--accent);margin:6px 14px 0 0;}
@supports (initial-letter:3) or (-webkit-initial-letter:3){
.pe-opening > p:first-of-type::first-letter{-webkit-initial-letter:3;initial-letter:3;float:none;line-height:normal;margin:0 14px 0 0;}
}

/* ---------- Photograph (full container width; portrait / square are centred and narrower) ---------- */
.pe-photo,.pe-lead,.pe-closing{grid-column:1 / -1;}
.pe-photo figure,.pe-lead > figure,.pe-closing figure{display:block;}
.pe-photo figure.is-portrait,.pe-lead > figure.is-portrait,.pe-closing figure.is-portrait{max-width:min(100%,34rem);margin-inline:auto;}
.pe-photo figure.is-square,.pe-lead > figure.is-square,.pe-closing figure.is-square{max-width:min(100%,46rem);margin-inline:auto;}
.pe-lead-text{max-width:var(--pe-read-w);margin-top:40px;}
.pe-lead-text p:last-child{margin-bottom:0;}

/* ---------- Photograph + Text (photo left; .pe-mirror = photo right) ---------- */
.pe-split{--pe-gap-x:clamp(32px,5.5vw,88px);grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--pe-gap-x);align-items:center;}
.pe-split.pe-mirror{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}
.pe-split.pe-mirror > figure{order:2;}
.pe-split > figure.is-portrait{max-width:min(100%,30rem);}
.pe-split > figure.is-square{max-width:min(100%,40rem);}
.pe-split.pe-mirror > figure.is-portrait,.pe-split.pe-mirror > figure.is-square{justify-self:end;}
.pe-split-text{max-width:30rem;}
.pe-split-text::before,.pe-pair-statement::before{content:"";display:block;width:var(--pe-rule);height:2px;background:var(--accent);margin-bottom:22px;}
.pe-pair-statement::before{margin-inline:auto;}
.pe-quote blockquote::before{content:"\201C";display:block;font-family:var(--serif);font-size:72px;line-height:.7;height:36px;color:var(--accent);margin-bottom:14px;}
.pe-split-text > :last-child{margin-bottom:0;}

/* ---------- Two Photographs: equal columns, top edges aligned, statement above ---------- */
.pe-pair{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);align-items:start;}
.pe-pair > figure{min-width:0;}
.pe-pair-statement{grid-column:1 / -1;margin-bottom:clamp(20px,3vw,40px);}

/* ---------- Statement / quote: centred, large serif ---------- */
.pe-quote{grid-column:1 / -1;text-align:center;}
.pe-quote blockquote{margin:0;padding:0;border:0;}
.pe-body .pe-quote blockquote p,.pe-body p.pe-pair-statement{font-family:var(--serif);font-weight:500;letter-spacing:-0.01em;color:var(--heading);}
.pe-body .pe-quote blockquote p{font-size:clamp(28px,3.8vw,48px);line-height:1.22;max-width:24ch;margin:0 auto;}
.pe-body p.pe-pair-statement{font-size:clamp(24px,3vw,38px);line-height:1.25;max-width:28ch;margin-inline:auto;text-align:center;padding-bottom:clamp(16px,2vw,28px);}
.pe-quote em,.pe-pair-statement em{font-style:normal;color:var(--accent);}
.pe-quote cite{display:block;margin-top:24px;font-family:var(--sans);font-style:normal;font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}

/* ---------- Text Passage (older / optional; heading, paragraphs, one key sentence) ---------- */
.pe-text{grid-column:1 / -1;max-width:var(--pe-read-w);margin-inline:auto;}
.pe-body p.pe-feature{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.8vw,34px);line-height:1.28;letter-spacing:-0.005em;color:var(--accent);max-width:22ch;margin:14px 0 0;}
.pe-body p.pe-aside{font-family:var(--sans);font-size:14.5px;line-height:1.65;color:#8a8d93;max-width:32ch;margin:22px 0 0;padding-top:16px;border-top:1px solid var(--border);}

/* ---------- Closing Photograph ---------- */
.pe-closing{text-align:center;}
.pe-closing figcaption{text-align:center;margin-inline:auto;}
.pe-body .pe-closing-line{font-family:var(--serif);font-size:clamp(19px,2vw,24px);line-height:1.6;color:var(--heading);max-width:36ch;margin:48px auto 0;}

/* ---------- Photograph + Overlapping Note (note right; .pe-mirror = note left) ----------
   The photograph and the card are placed on the shared 12-column grid and overlap by one or two
   columns, so the overlap follows the layout, not the image's height. The card hangs
   --pe-note-hang below the photograph; the section's padding makes room for it. The photograph's
   caption sits on the side away from the card. */
.pe-note{--n-fig:1 / span 8;--n-card:7 / span 6;grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pe-col);align-items:end;padding-bottom:var(--pe-note-hang);}
.pe-note.pe-mirror{--n-fig:5 / span 8;--n-card:1 / span 6;}
.pe-note.is-square{--n-fig:1 / span 6;--n-card:5 / span 6;}
.pe-note.is-square.pe-mirror{--n-fig:7 / span 6;--n-card:3 / span 6;}
.pe-note.is-portrait{--n-fig:1 / span 5;--n-card:5 / span 6;}
.pe-note.is-portrait.pe-mirror{--n-fig:8 / span 5;--n-card:3 / span 6;}
.pe-note > figure{grid-column:var(--n-fig);grid-row:1;}
.pe-note figcaption{max-width:min(58ch,45%);}
.pe-note.pe-mirror figcaption{margin-left:auto;text-align:right;}
.pe-note-card{grid-column:var(--n-card);grid-row:1;position:relative;z-index:1;margin-bottom:calc(var(--pe-note-hang) * -1);padding:32px clamp(24px,3vw,40px) 12px;background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-top:2px solid var(--accent);}
.pe-body .pe-note-label{font-family:var(--sans);font-weight:600;font-size:12px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 12px;}
.pe-note-card p:not(.pe-note-label){text-align:left;}
.pe-body .pe-text > .pe-note-label{margin-bottom:10px;}

/* ---------- Unfilled positions publish no blank space ---------- */
.pe-body h2:empty,.pe-body figcaption:empty,.pe-body cite:empty{display:none;}
.pe-body figure:not(:has(img[src])){display:none;}
.pe-body .pe-section:not(:has(img[src])):not(:has(p:not(:empty):not(.pe-note-label))):not(:has(h2:not(:empty))){display:none;}
.pe-split-text:not(:has(p:not(:empty))):not(:has(h2:not(:empty))),
.pe-lead-text:not(:has(p:not(:empty))),
.pe-note-card:not(:has(p:not(.pe-note-label):not(:empty))){display:none;}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
.pe-note{--n-fig:1 / span 9;--n-card:6 / span 7;}
.pe-note.pe-mirror{--n-fig:4 / span 9;--n-card:1 / span 7;}
.pe-note.is-square{--n-fig:1 / span 7;--n-card:6 / span 6;}
.pe-note.is-square.pe-mirror{--n-fig:6 / span 7;--n-card:1 / span 6;}
.pe-note.is-portrait{--n-fig:1 / span 6;--n-card:5 / span 7;}
.pe-note.is-portrait.pe-mirror{--n-fig:7 / span 6;--n-card:1 / span 7;}
}

/* ---------- Mobile: one column; pairs stack; the note sits under its photograph and caption ---------- */
@media (max-width:760px){
.pe-article{--pe-gap:64px;}
.pe-hero-inner{padding-top:110px;}
.pe-hero-panel{padding:26px 20px 28px;}
.pe-hero .article-meta-row{flex-direction:column;gap:14px;}
.pe-hero .meta-author{flex-direction:row;text-align:left;}
.pe-hero .meta-divider{width:40px;height:1px;}
.pe-hero .meta-format-date{text-align:center;}
.pe-hero-caption{text-align:left;}
.pe-body{display:block;}
.pe-body > .pe-section{margin-bottom:var(--pe-gap);}
.pe-body > .pe-opening{margin-bottom:48px;}
.pe-opening > p:first-of-type::first-letter{font-size:3.6rem;}
.pe-split,.pe-split.pe-mirror{display:block;}
.pe-split > figure,.pe-split > figure.is-portrait,.pe-split > figure.is-square{max-width:none;margin-bottom:28px;}
.pe-split.pe-mirror > figure{order:0;}
.pe-pair{display:block;}
.pe-pair > figure + figure{margin-top:28px;}
.pe-note,.pe-note.pe-mirror{display:block;padding-bottom:0;}
.pe-note figcaption,.pe-note.pe-mirror figcaption{max-width:none;margin-left:0;text-align:left;}
.pe-note-card{margin:20px 0 0;padding:26px 22px 8px;}
.pe-body .pe-closing-line{margin-top:36px;}
}
@media (prefers-reduced-motion:reduce){.pe-article *{scroll-behavior:auto;}}