/* still yes — reportage detail page styles
   Shared across all 7 reportage-*.html pages. Loaded in addition to
   shared/{base,header,footer}.css. Per-page customisations live
   inline (typically `style="object-position:..."` on the hero img).
*/

/* ===== Hero ===== */
.r-hero{position:relative;height:92vh;min-height:600px;overflow:hidden;color:#FDF9F4}
.r-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.r-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.05) 40%,rgba(0,0,0,.65) 100%)}
.r-hero .marker{position:absolute;top:48px;left:64px;display:flex;align-items:center;gap:14px;z-index:2;color:#FDF9F4}
.r-hero .marker .num{font-family:var(--serif);font-style:italic;font-size:32px;color:var(--accent);line-height:1}
.r-hero .marker .rule{width:48px;height:1px;background:rgba(253,249,244,.55)}
.r-hero .marker .label{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:rgba(253,249,244,.88)}
.r-hero .back{position:absolute;top:48px;right:64px;z-index:2;color:#FDF9F4;text-decoration:none;font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(253,249,244,.45);border-radius:999px;padding:14px 22px;min-height:44px;transition:background .2s,border-color .2s,gap .2s}
.r-hero .back:hover{gap:14px;background:rgba(253,249,244,.12);border-color:#FDF9F4}
.r-hero .copy{position:absolute;left:64px;right:64px;bottom:72px;z-index:2;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
.r-hero .hand{font-family:var(--hand-font);font-size:38px;color:#FDF9F4;transform:rotate(-3deg);display:inline-block;margin-bottom:18px;line-height:1;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.r-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(56px,8vw,130px);line-height:1;letter-spacing:-.02em;margin:0;color:#FDF9F4;text-wrap:balance;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.r-hero h1 i{font-style:italic;color:var(--accent)}
.r-hero .facts{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(253,249,244,.88);display:flex;flex-direction:column;gap:8px;text-align:right;font-weight:500}
.r-hero .facts em{font-style:normal;color:#FDF9F4}

/* ===== Intro ===== */
.r-intro{max-width:920px;margin:0 auto;padding:96px 32px;display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:start}
.r-intro .side{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:500;writing-mode:vertical-rl;transform:rotate(180deg);padding-top:8px}
.r-intro .body p{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.2vw,30px);line-height:1.4;color:var(--ink);margin:0;text-wrap:pretty;max-width:38ch}
.r-intro .body p i{color:var(--accent);font-style:italic}

/* ===== Chapter heading ===== */
.r-chapter{max-width:1240px;margin:0 auto;padding:64px 32px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.r-chapter .n{font-family:var(--serif);font-style:italic;font-size:54px;color:var(--accent);line-height:1;letter-spacing:-.02em}
.r-chapter h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.2vw,48px);margin:0;letter-spacing:-.012em;line-height:1.05}
.r-chapter h2 i{font-style:italic;color:var(--ink-500)}
.r-chapter .meta{margin-left:auto;font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:500}

/* ===== Gallery (justified, edge-flush) ===== */
.r-gal{max-width:1240px;margin:0 auto;padding:0 32px 24px;display:flex;flex-direction:column;gap:14px}
.r-gal .row{display:flex;gap:14px}
.r-gal .row.feature{margin:18px 0}
.r-gal .tile{flex-basis:0;overflow:hidden;border-radius:var(--r-sm);background:var(--ink-100);min-width:0;position:relative}
.r-gal .tile.l{flex-grow:1.5;aspect-ratio:3/2}
.r-gal .tile.p{flex-grow:.667;aspect-ratio:2/3}
.r-gal .tile.feat{aspect-ratio:16/9}
.r-gal .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.r-gal .tile:hover img{transform:scale(1.03)}

/* ===== Pull caption ===== */
.r-caption{max-width:920px;margin:0 auto;padding:96px 32px;text-align:center}
.r-caption .mark{font-family:var(--serif);font-style:italic;font-size:120px;color:var(--accent);line-height:0;display:block;opacity:.55}
.r-caption blockquote{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(28px,3.2vw,42px);line-height:1.2;color:var(--ink);margin:24px 0 0;text-wrap:balance;letter-spacing:-.005em}
.r-caption blockquote i{color:var(--accent)}

/* ===== Closing band ===== */
.r-foot{background:var(--ink-800);color:var(--on-paper);padding:120px 32px}
.r-foot .inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.r-foot .left h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.2vw,48px);line-height:1.05;letter-spacing:-.01em;margin:0;color:#FDF9F4;text-wrap:balance;max-width:14ch}
.r-foot .left h3 i{font-style:italic;color:var(--accent)}
.r-foot .left p{margin:24px 0 32px;font-size:16px;line-height:1.6;color:rgba(253,249,244,.78);max-width:48ch}
.r-foot .left .btns{display:flex;gap:14px;flex-wrap:wrap}
.r-foot .left a{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:#FDF9F4;text-decoration:none;background:transparent;border:1px solid #FDF9F4;border-radius:999px;padding:14px 22px;transition:gap .2s,color .2s,background .2s,border-color .2s}
.r-foot .left a:hover{gap:14px;background:var(--accent);border-color:var(--accent)}
.r-foot .next{padding:28px;background:rgba(253,249,244,.04);border:1px solid rgba(253,249,244,.12);border-radius:var(--r-sm);text-decoration:none;color:inherit;display:flex;gap:20px;align-items:center;transition:background .2s,border-color .2s}
.r-foot .next:hover{background:rgba(253,249,244,.08);border-color:rgba(253,249,244,.24)}
.r-foot .next .preview{width:120px;height:150px;flex:0 0 120px;border-radius:4px;overflow:hidden;background:var(--ink-700)}
.r-foot .next .preview img{width:100%;height:100%;object-fit:cover;display:block}
.r-foot .next .info{display:flex;flex-direction:column;gap:8px;color:#FDF9F4}
.r-foot .next .label{font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(253,249,244,.6);font-weight:500}
.r-foot .next h4{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.05;margin:0}
.r-foot .next h4 i{font-style:italic;color:var(--accent)}
.r-foot .next .place{font-family:var(--sans);font-size:12px;color:rgba(253,249,244,.7);letter-spacing:.06em}
.r-foot .next .arrow{margin-left:auto;color:rgba(253,249,244,.6);font-size:20px}
.r-foot .next:hover .arrow{color:var(--accent)}

@media (max-width:1000px){
  .r-hero .marker{left:24px;top:24px}
  .r-hero .back{right:24px;top:24px}
  .r-hero .copy{left:24px;right:24px;bottom:48px;grid-template-columns:1fr;gap:24px}
  .r-hero .facts{text-align:left}
  .r-intro{grid-template-columns:1fr;gap:24px;padding:64px 24px}
  .r-intro .side{writing-mode:horizontal-tb;transform:none}
  .r-gal{padding:0 20px 16px;gap:10px}
  .r-gal .row{flex-direction:column;gap:10px}
  .r-gal .tile.l,.r-gal .tile.p{flex:0 0 auto;width:100%}
  .r-gal .tile.l{aspect-ratio:3/2}
  .r-gal .tile.p{aspect-ratio:2/3}
  .r-gal .tile.feat{aspect-ratio:3/2}
  .r-chapter{padding:32px 20px 16px}
  .r-caption{padding:64px 24px}
  .r-foot{padding:80px 20px}
  .r-foot .inner{grid-template-columns:1fr;gap:48px}
  .r-foot .next .preview{width:80px;height:100px;flex:0 0 80px}
}