/* PG Letter — scoped .pg-letter. Ported from DRobb where-next "letter / map
   trail". Chunks/opening/signoff reveal via .pg-reveal→.pg-in (pg-core); the
   ribbon waypoints/segments light up via .active (added by letter.js). */

.pg-letter{ position:relative; background:var(--pg-bone); padding:120px 56px 160px; }
.pg-letter::before{ content:''; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:.04; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.pg-letter .letter-grid{ position:relative; max-width:1300px; margin:0 auto; display:grid; grid-template-columns:160px 1fr 160px; gap:48px; align-items:start; }

/* LEFT — drawn route ribbon (sticky; no perspective here, so sticky is safe) */
.pg-letter .map-ribbon{ position:sticky; top:120px; align-self:start; height:calc(100vh - 160px); max-height:780px; }
.pg-letter .map-ribbon .ribbon-head{ font-family:var(--pg-font-sans); font-weight:400; text-transform:uppercase; letter-spacing:.32em; font-size:9px; color:var(--pg-ink-soft); margin-bottom:16px; text-align:center; }
.pg-letter .map-ribbon .ribbon-head em{ font-family:var(--pg-font-italic); font-style:italic; letter-spacing:0; text-transform:none; color:var(--pg-terracotta); font-size:11px; display:block; margin-top:4px; }
.pg-letter .map-ribbon svg{ width:100%; height:calc(100% - 60px); display:block; overflow:visible; }
.pg-letter .map-ribbon .ribbon-foot{ font-family:'Caveat', cursive; font-size:14px; color:var(--pg-ink-soft); text-align:center; margin-top:8px; opacity:.7; }
.pg-letter .map-ribbon .guide{ stroke:var(--pg-ink-line); stroke-width:.6; fill:none; }
.pg-letter .map-ribbon .segment{ stroke:var(--pg-terracotta); stroke-width:1.4; fill:none; stroke-linecap:round; stroke-dasharray:5 4; stroke-dashoffset:80; opacity:0; transition:stroke-dashoffset 2200ms var(--pg-ease-soft), opacity 800ms var(--pg-ease); }
.pg-letter .map-ribbon .wp{ fill:rgba(26,24,22,.20); stroke:rgba(26,24,22,.30); stroke-width:.6; transition:fill 800ms var(--pg-ease), stroke 800ms var(--pg-ease); }
.pg-letter .map-ribbon .wp-ring{ fill:none; stroke:var(--pg-terracotta); stroke-width:.8; opacity:0; transition:opacity 800ms var(--pg-ease); }
.pg-letter .map-ribbon .wp-label{ font-family:var(--pg-font-display); font-style:italic; font-size:11px; fill:var(--pg-ink-pale); transition:fill 800ms var(--pg-ease); }
.pg-letter .map-ribbon .wp-name{ font-family:'Caveat', cursive; font-size:12px; fill:var(--pg-ink-pale); transition:fill 800ms var(--pg-ease); }
.pg-letter .map-ribbon .wp.active{ fill:var(--pg-terracotta); stroke:var(--pg-terracotta); }
.pg-letter .map-ribbon .wp-ring.active{ opacity:.6; }
.pg-letter .map-ribbon .wp-label.active, .pg-letter .map-ribbon .wp-name.active{ fill:var(--pg-ink); }
.pg-letter .map-ribbon .segment.active{ stroke-dashoffset:0; opacity:1; }

/* RIGHT — decorative cartographer's margin */
.pg-letter .map-margin{ position:sticky; top:120px; align-self:start; height:calc(100vh - 160px); max-height:780px; }
.pg-letter .map-margin svg{ width:100%; height:100%; display:block; overflow:visible; }

/* CENTER — prose */
.pg-letter .prose-col{ max-width:600px; justify-self:center; width:100%; }
.pg-letter .opening{ display:flex; flex-direction:column; align-items:center; gap:32px; margin-bottom:80px; text-align:center; }
.pg-letter .opening .tag{ font-family:var(--pg-font-sans); font-weight:300; text-transform:uppercase; letter-spacing:.32em; font-size:10px; color:var(--pg-ink-soft); display:flex; align-items:center; gap:14px; }
.pg-letter .opening .tag .rule{ width:40px; height:1px; background:var(--pg-ink-hair); }
.pg-letter .opening h2{ font-family:var(--pg-font-display); font-weight:300; font-variation-settings:"opsz" 144; font-size:clamp(34px,4.4vw,56px); line-height:1.08; letter-spacing:-.018em; color:var(--pg-ink); max-width:22ch; }
.pg-letter .opening h2 em{ font-style:italic; color:var(--pg-terracotta); font-weight:300; }

.pg-letter .chunk{ margin-bottom:64px; position:relative; }
.pg-letter .chunk-label{ display:flex; align-items:center; gap:14px; font-family:var(--pg-font-sans); font-weight:400; text-transform:uppercase; letter-spacing:.32em; font-size:10px; color:var(--pg-terracotta); margin-bottom:24px; }
.pg-letter .chunk-label .rule{ flex:0 0 32px; height:1px; background:var(--pg-terracotta); opacity:.5; }
.pg-letter .chunk-label em{ font-family:var(--pg-font-display); font-style:italic; letter-spacing:0; text-transform:none; color:var(--pg-ink); font-size:14px; font-weight:300; }

.pg-letter .prose-col p{ font-family:var(--pg-font-italic); font-weight:400; font-size:22px; line-height:1.62; color:var(--pg-ink); margin-bottom:1.6em; letter-spacing:.001em; }
.pg-letter .chunk:first-of-type p:first-of-type::first-letter{ font-family:var(--pg-font-display); font-weight:300; font-style:italic; font-size:72px; float:left; line-height:.86; margin:4px 0 0 0; padding:0 14px 0 2px; color:var(--pg-terracotta); }
.pg-letter .prose-col p em{ font-style:italic; color:var(--pg-terracotta); }
.pg-letter .prose-col p strong{ font-weight:400; color:var(--pg-ink); font-style:italic; background:linear-gradient(transparent 65%, rgba(200,146,61,.22) 65%); padding:0 2px; }

/* inline pull-quote (a <blockquote> in the chunk body) */
.pg-letter .prose-col blockquote{ margin:64px -32px; padding:48px 32px; border-top:1px solid var(--pg-ink-hair); border-bottom:1px solid var(--pg-ink-hair); text-align:center; }
.pg-letter .prose-col blockquote p{ font-family:var(--pg-font-display); font-weight:300; font-variation-settings:"opsz" 144; font-size:clamp(28px,3.4vw,38px); line-height:1.18; letter-spacing:-.012em; color:var(--pg-ink); margin:0; }
.pg-letter .prose-col blockquote p em{ font-style:italic; color:var(--pg-terracotta); }
.pg-letter .prose-col blockquote cite{ display:block; margin-top:24px; font-family:var(--pg-font-sans); font-weight:300; font-style:normal; text-transform:uppercase; letter-spacing:.28em; font-size:10px; color:var(--pg-ink-soft); }

.pg-letter .prose-col .center-line{ font-family:var(--pg-font-display) !important; font-size:32px !important; font-weight:300 !important; line-height:1.2 !important; letter-spacing:-.012em !important; text-align:center; padding:24px 0; font-style:italic; }

/* sign-off (clip-reveals on .pg-in) */
.pg-letter .signoff{ margin-top:72px; padding-top:48px; border-top:1px solid var(--pg-ink-hair); display:flex; flex-direction:column; gap:32px; align-items:flex-start; }
.pg-letter .signoff.pg-reveal{ opacity:1; transform:none; } /* neutralise base fade; sub-parts animate themselves */
.pg-letter .signoff .pre-q{ font-family:var(--pg-font-italic); font-style:italic; font-weight:400; font-size:clamp(20px,2.2vw,26px); line-height:1.4; color:var(--pg-ink-soft); max-width:38ch; opacity:0; transform:translateY(10px); transition:opacity 1400ms var(--pg-ease) 200ms, transform 1400ms var(--pg-ease) 200ms; }
.pg-letter .signoff.pg-in .pre-q{ opacity:1; transform:translateY(0); }
.pg-letter .signoff .question{ font-family:var(--pg-font-display); font-weight:300; font-variation-settings:"opsz" 144; font-size:clamp(56px,7.5vw,96px); line-height:1.08; letter-spacing:-.02em; color:var(--pg-ink); text-transform:lowercase; }
.pg-letter .signoff .question .clip-w{ display:inline-block; overflow:hidden; padding-bottom:.48em; vertical-align:bottom; line-height:1.08; }
.pg-letter .signoff .question .clip-w > span{ display:inline-block; transform:translateY(120%); transition:transform 1800ms var(--pg-ease); padding-bottom:.14em; padding-right:.14em; }
.pg-letter .signoff.pg-in .question .clip-w:nth-child(1) > span{ transform:translateY(0); transition-delay:1100ms; }
.pg-letter .signoff.pg-in .question .clip-w:nth-child(2) > span{ transform:translateY(0); transition-delay:1500ms; }
.pg-letter .signoff .question em{ font-style:italic; color:var(--pg-terracotta); }
.pg-letter .signoff .name{ display:flex; align-items:baseline; gap:12px; font-family:var(--pg-font-italic); font-style:italic; font-size:24px; color:var(--pg-ink); opacity:0; transition:opacity 1200ms var(--pg-ease) 2800ms; }
.pg-letter .signoff.pg-in .name{ opacity:1; }
.pg-letter .signoff .name .sig-name{ font-family:'Caveat', cursive; font-style:normal; font-size:44px; line-height:1.25; color:var(--pg-ink); display:inline-block; padding-right:.3em; padding-bottom:.12em; clip-path:inset(0 100% 0 0); -webkit-clip-path:inset(0 100% 0 0); transition:clip-path 1800ms var(--pg-ease) 3200ms, -webkit-clip-path 1800ms var(--pg-ease) 3200ms; }
.pg-letter .signoff.pg-in .name .sig-name{ clip-path:inset(0 0% 0 0); -webkit-clip-path:inset(0 0% 0 0); }
.pg-letter .signoff .name .compass-mark{ width:18px; height:18px; color:var(--pg-terracotta); display:inline-block; vertical-align:-3px; margin-left:4px; opacity:0; transition:opacity 800ms var(--pg-ease) 4800ms; }
.pg-letter .signoff.pg-in .name .compass-mark{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .pg-letter .map-ribbon .segment{ transition:none; }
  .pg-letter .signoff .pre-q, .pg-letter .signoff .question .clip-w > span, .pg-letter .signoff .name, .pg-letter .signoff .name .sig-name, .pg-letter .signoff .name .compass-mark{ transition:none; opacity:1; transform:none; clip-path:none; -webkit-clip-path:none; }
}

@media (max-width:980px){
  .pg-letter{ padding:88px 24px 120px; }
  .pg-letter .letter-grid{ grid-template-columns:1fr; gap:32px; }
  .pg-letter .map-ribbon, .pg-letter .map-margin{ position:static; height:auto; max-height:none; }
  .pg-letter .map-ribbon svg{ height:300px; }
  .pg-letter .map-margin{ display:none; }
  .pg-letter .prose-col p{ font-size:20px; }
  .pg-letter .prose-col blockquote{ margin:48px -8px; padding:36px 8px; }
}