/* PG Prologue — scoped to .pg-prologue. Ported from the DRobb Philosophy
   #prologue: faint Tuscany map + a centred "memory" with clip-reveal lines. */

.pg-prologue{ position:relative; overflow:hidden; padding:200px 96px 180px; background:#F0E8D2; border-top:1px solid var(--pg-ink-thread); min-height:90vh; display:flex; flex-direction:column; align-items:center; }
.pg-prologue .prologue-bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.pg-prologue .map-paper{ position:absolute; inset:0; background:radial-gradient(ellipse at 30% 30%, rgba(180,140,80,.15) 0%, transparent 60%), radial-gradient(ellipse at 70% 70%, rgba(180,140,80,.12) 0%, transparent 60%); }
.pg-prologue .vignette{ position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(120,80,40,0) 50%, rgba(120,80,40,.16) 100%); }
.pg-prologue .grain{ position:absolute; inset:0; opacity:.45; mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

.pg-prologue .tuscan-map{ position:absolute; inset:0; z-index:0; opacity:.18; pointer-events:none; }
.pg-prologue .vintage-map{ width:100%; height:100%; display:block; }
.pg-prologue .vintage-map .coast{ fill:none; stroke:#3A2818; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.pg-prologue .vintage-map .border-outer{ fill:none; stroke:#3A2818; stroke-width:1.8; }
.pg-prologue .vintage-map .border-inner{ fill:none; stroke:#3A2818; stroke-width:.6; stroke-dasharray:3 4; }
.pg-prologue .vintage-map .hill{ fill:none; stroke:#5A3F22; stroke-width:.6; stroke-linecap:round; }
.pg-prologue .vintage-map .river{ fill:none; stroke:#3A2818; stroke-width:.7; stroke-linecap:round; }
.pg-prologue .vintage-map .city-dot{ fill:#3A2818; }
.pg-prologue .vintage-map .city-dot.terra{ fill:#B4533A; stroke:#B4533A; stroke-width:3; stroke-opacity:.3; }
.pg-prologue .vintage-map .city-label{ font-family:var(--pg-font-display); font-style:italic; font-size:14px; fill:#3A2818; }
.pg-prologue .vintage-map .city-label.major{ font-size:17px; }
.pg-prologue .vintage-map .city-label.terra{ fill:#B4533A; font-size:17px; font-weight:400; }
.pg-prologue .vintage-map .region-label{ font-family:var(--pg-font-display); font-style:italic; font-size:48px; fill:#3A2818; letter-spacing:.08em; }
.pg-prologue .vintage-map .small-label{ font-family:var(--pg-font-sans); font-size:9px; text-transform:uppercase; letter-spacing:.32em; fill:#3A2818; }
.pg-prologue .vintage-map .wave{ fill:none; stroke:#3A2818; stroke-width:.5; stroke-linecap:round; opacity:.7; }
.pg-prologue .vintage-map .compass-line{ stroke:#3A2818; stroke-width:.6; fill:none; }
.pg-prologue .vintage-map .compass-fill{ fill:#3A2818; }
.pg-prologue .vintage-map .compass-fill-terra{ fill:#B4533A; }

.pg-prologue .container{ position:relative; z-index:2; max-width:620px; margin:0 auto; text-align:center; }
.pg-prologue .marker{ display:inline-flex; align-items:center; gap:16px; font-family:var(--pg-font-sans); font-weight:400; font-size:13px; text-transform:uppercase; letter-spacing:.42em; color:var(--pg-ink); margin-bottom:56px; }
.pg-prologue .marker .rule{ width:44px; height:1px; background:var(--pg-ink); }
.pg-prologue .plate-cap{ font-family:var(--pg-font-italic); font-style:italic; font-size:18px; color:var(--pg-ink); letter-spacing:.04em; margin-bottom:80px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.pg-prologue .plate-cap em{ color:var(--pg-terracotta); font-style:normal; text-transform:uppercase; letter-spacing:.32em; font-size:12px; font-family:var(--pg-font-sans); font-weight:400; }
.pg-prologue .plate-cap .dash{ display:inline-block; width:18px; height:1px; background:var(--pg-ink-soft); }

.pg-prologue .prose p{ font-family:var(--pg-font-italic); font-size:23px; line-height:1.68; color:var(--pg-ink); margin-bottom:1.5em; text-align:left; font-weight:500; }
.pg-prologue .prose p em{ font-style:italic; color:var(--pg-terracotta); }
.pg-prologue .prose p strong{ font-weight:500; font-style:italic; background:linear-gradient(transparent 64%, rgba(200,146,61,.22) 64%); padding:0 2px; }
.pg-prologue .prose p:last-child{ margin-bottom:0; }

.pg-prologue .opener{ font-family:var(--pg-font-display); font-weight:300; font-variation-settings:"opsz" 144; font-style:italic; font-size:clamp(34px,4.6vw,56px); line-height:1.12; letter-spacing:-.018em; color:var(--pg-ink); text-align:center; margin:8px 0 64px; padding:0; }
.pg-prologue .opener .clip{ display:inline-block; overflow:hidden; padding-bottom:.1em; vertical-align:bottom; }
.pg-prologue .opener .clip > span{ display:inline-block; transform:translateY(105%); transition:transform 2000ms var(--pg-ease) 600ms; }
.pg-prologue .opener.pg-in .clip > span{ transform:translateY(0); }
.pg-prologue .opener-rule{ display:block; width:48px; height:1px; background:var(--pg-terracotta); margin:32px auto 0; transform:scaleX(0); transition:transform 1400ms var(--pg-ease) 1600ms; }
.pg-prologue .opener.pg-in .opener-rule{ transform:scaleX(1); }

.pg-prologue .lift{ margin:88px 0 80px; font-family:var(--pg-font-display); font-weight:300; font-variation-settings:"opsz" 144; font-size:clamp(36px,5vw,64px); line-height:1.1; letter-spacing:-.018em; color:var(--pg-ink); text-align:center; }
.pg-prologue .lift .clip{ display:inline-block; overflow:hidden; padding-bottom:.1em; vertical-align:bottom; }
.pg-prologue .lift .clip > span{ display:inline-block; transform:translateY(105%); transition:transform 2000ms var(--pg-ease) 600ms; }
.pg-prologue .lift.pg-in .clip > span{ transform:translateY(0); }
.pg-prologue .lift em{ font-style:italic; color:var(--pg-terracotta); }
.pg-prologue .lift-rule{ display:block; width:48px; height:1px; background:var(--pg-terracotta); margin:32px auto 0; transform:scaleX(0); transition:transform 1400ms var(--pg-ease) 1400ms; }
.pg-prologue .lift.pg-in .lift-rule{ transform:scaleX(1); }

@media (prefers-reduced-motion: reduce){
  .pg-prologue .opener .clip > span, .pg-prologue .lift .clip > span{ transform:none; transition:none; }
  .pg-prologue .opener-rule, .pg-prologue .lift-rule{ transform:scaleX(1); }
}
@media (max-width:880px){
  .pg-prologue{ padding:120px 24px 100px; }
}