/* PG Proposition — scoped to .pg-proposition. Ported from DRobb .proposition.
   Section + plate use .pg-reveal only to receive .pg-in (own fade neutralised);
   heading clip + plate draws/labels key on .pg-in. */

.pg-proposition.pg-reveal, .pg-proposition .plate.pg-reveal{ opacity:1; transform:none; filter:none; transition:none; will-change:auto; }
/* Any SVG dropped in the plate (built-in or a pasted Custom one) fills it. */
.pg-proposition .plate > svg{ width:100%; height:auto; display:block; overflow:visible; }

.pg-proposition{ padding:160px 96px; border-top:1px solid var(--pg-ink-thread); background:var(--pg-bone-warm); }
.pg-proposition.alt{ background:var(--pg-bone-soft); }
.pg-proposition .container{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; gap:96px; align-items:center; }
.pg-proposition.flip .container{ grid-template-columns:1.1fr 1fr; }
.pg-proposition .text-col .num{ font-family:var(--pg-font-display); font-weight:300; font-style:italic; font-variation-settings:"opsz" 144; font-size:84px; color:var(--pg-terracotta); line-height:.85; margin-bottom:14px; }
.pg-proposition .text-col .label{ font-family:var(--pg-font-sans); font-size:10px; text-transform:uppercase; letter-spacing:.30em; color:var(--pg-ink-soft); margin-bottom:36px; }
.pg-proposition .text-col .label em{ font-family:var(--pg-font-italic); font-style:italic; letter-spacing:0; text-transform:none; color:var(--pg-ink); font-size:13px; display:block; margin-top:6px; }
.pg-proposition h3{ font-family:var(--pg-font-display); font-weight:300; font-variation-settings:"opsz" 144; font-size:clamp(40px,5.4vw,72px); line-height:1.02; letter-spacing:-.018em; text-transform:lowercase; color:var(--pg-ink); margin-bottom:32px; }
.pg-proposition h3 em{ font-style:italic; color:var(--pg-terracotta); }
.pg-proposition .pull-h{ display:block; overflow:hidden; padding-bottom:.08em; }
.pg-proposition .pull-h .pull-h-in{ display:block; transform:translateY(102%); transition:transform 1600ms var(--pg-ease) 200ms; }
.pg-proposition.pg-in .pull-h .pull-h-in{ transform:translateY(0); }
.pg-proposition .pull-rule{ display:block; width:64px; height:1px; background:var(--pg-terracotta); margin:6px 0 32px; transform:scaleX(0); transform-origin:left; transition:transform 1400ms var(--pg-ease) 1000ms; }
.pg-proposition.pg-in .pull-rule{ transform:scaleX(1); }
.pg-proposition .prose p{ font-family:var(--pg-font-italic); font-size:20px; line-height:1.64; color:var(--pg-ink); margin-bottom:1.3em; }
.pg-proposition .prose p:last-child{ margin-bottom:0; }
.pg-proposition .prose p em{ font-style:italic; color:var(--pg-terracotta); }
.pg-proposition .prose p strong{ font-weight:400; font-style:italic; background:linear-gradient(transparent 64%, rgba(200,146,61,.22) 64%); padding:0 2px; }

.pg-proposition .plate{ width:100%; max-width:520px; justify-self:end; aspect-ratio:1/1.18; background:var(--pg-bone); border:1px solid var(--pg-ink-thread); padding:36px 32px 28px; position:relative; overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 30px 60px -28px rgba(26,24,22,.18); }
.pg-proposition.flip .plate{ justify-self:start; }
.pg-proposition .plate::before{ content:''; position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply; pointer-events:none; 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.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.pg-proposition .plate-head{ display:flex; justify-content:space-between; font-family:var(--pg-font-sans); font-size:9px; text-transform:uppercase; letter-spacing:.28em; color:var(--pg-ink-soft); margin-bottom:18px; position:relative; z-index:2; }
.pg-proposition .plate-head em{ font-family:var(--pg-font-italic); font-style:italic; letter-spacing:0; text-transform:none; color:var(--pg-terracotta); font-size:11px; }
.pg-proposition .plate-foot{ position:absolute; left:32px; right:32px; bottom:18px; text-align:center; font-family:'Caveat',cursive; font-size:15px; color:var(--pg-ink-soft); border-top:1px dashed var(--pg-ink-thread); padding-top:8px; }
.pg-proposition .plate-svg{ width:100%; height:auto; display:block; overflow:visible; position:relative; z-index:1; }
.pg-proposition .plate-svg .ink{ fill:none; stroke:var(--pg-ink); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; }
.pg-proposition .plate-svg .ink-light{ fill:none; stroke:var(--pg-ink-pale); stroke-width:.7; stroke-linecap:round; }
.pg-proposition .plate-svg .ink-dash{ fill:none; stroke:var(--pg-ink-pale); stroke-width:.5; stroke-dasharray:1 3; }
.pg-proposition .plate-svg text{ font-family:'Caveat',cursive; font-size:13px; fill:var(--pg-ink-soft); }
.pg-proposition .plate-svg text.italic{ font-family:var(--pg-font-italic); font-style:italic; fill:var(--pg-terracotta); font-size:11px; }
.pg-proposition .draw{ stroke-dasharray:var(--len,800); stroke-dashoffset:var(--len,800); transition:stroke-dashoffset var(--dur,2800ms) var(--pg-ease-soft) var(--dly,200ms); }
.pg-proposition .plate.pg-in .draw{ stroke-dashoffset:0; }
.pg-proposition .plate-label{ opacity:0; transform:translateY(4px); transition:opacity 1200ms var(--pg-ease), transform 1200ms var(--pg-ease); transition-delay:var(--dly,800ms); }
.pg-proposition .plate.pg-in .plate-label{ opacity:1; transform:translateY(0); }
.pg-proposition .plate-mark{ opacity:0; transition:opacity 1200ms var(--pg-ease) var(--dly,1200ms); }
.pg-proposition .plate.pg-in .plate-mark{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .pg-proposition .pull-h .pull-h-in{ transform:none; transition:none; }
  .pg-proposition .pull-rule{ transform:scaleX(1); }
  .pg-proposition .draw{ stroke-dashoffset:0; }
  .pg-proposition .plate-label, .pg-proposition .plate-mark{ opacity:1; transform:none; }
}
@media (max-width:880px){
  .pg-proposition{ padding:110px 24px; }
  .pg-proposition .container, .pg-proposition.flip .container{ grid-template-columns:1fr; gap:48px; }
  .pg-proposition .plate{ max-width:none; justify-self:stretch; }
}