/* =====================================================================
   pn-compare · PlotNua Before → Possible comparison (v1.3, 30 Oct 2026; v1.1 earlier)
   ---------------------------------------------------------------------
   One shared component for the Discovery hero standard. It consolidates
   the two earlier implementations rather than adding a third:
     .cmp        (DISC-008 v2 hero)  → pointer capture, one write per frame,
                                        hero integration with .d-hero
     .ns-compare (DISC-031 inline)   → value model, visible tags, AI label,
                                        jump buttons, caption bar, styling
   Value model: --pos = the share of the width, from the LEFT, that still
   shows BEFORE. BEFORE is always on the left. Default start 35.
   Progressive enhancement: until the script adds .is-live, only the
   POSSIBLE image (and its AI label) is shown; no controls.
   Tokens come from the anthracite identity (pn-identity / pn-premium-
   discovery) with safe fallbacks, so the component also works on its own.
   ===================================================================== */
.pn-compare{
  --pos:35%;
  --pnc-ivory:var(--p4-ivory,#F2EBE0);
  --pnc-anth:var(--p4-anth,#27282A);
  --pnc-card:var(--pd-card,#2E3033);
  --pnc-line:var(--p4-line2,rgba(242,235,224,.22));
  --pnc-stone:var(--p4-stone,#C2BDB5);
  --pnc-accent:var(--p4-terra,#CF8566);
  --pnc-sans:var(--p4-sans,'Hanken Grotesk',system-ui,sans-serif);
  --pnc-serif:var(--p4-serif,'Instrument Serif',Georgia,serif);
  position:relative; margin:0;
}
.pn-compare__stage{
  position:relative; overflow:hidden; line-height:0;
  touch-action:pan-y; -webkit-user-select:none; user-select:none;
  background:var(--pnc-anth);
}
.pn-compare__stage picture{ display:block; }
.pn-compare__stage img{
  display:block; width:100%; height:100%; object-fit:cover;
  object-position:var(--pnc-focus,50% 50%);
  -webkit-user-drag:none; pointer-events:none;
}
/* POSSIBLE is the base layer (and the no-JS picture). BEFORE sits on top,
   clipped to the left share. Both use identical sizing, so pixels align. */
.pn-compare__possible{ position:relative; width:100%; height:100%; }
.pn-compare__before{
  position:absolute; inset:0; display:none;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
  -webkit-clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}
.pn-compare__before picture{ width:100%; height:100%; }

.pn-compare__line,.pn-compare__knob,.pn-compare__tag,.pn-compare__bar{ display:none; }

.pn-compare.is-live .pn-compare__before{ display:block; }
.pn-compare.is-live .pn-compare__stage{ cursor:ew-resize; }
.pn-compare.is-live .pn-compare__line{
  display:block; position:absolute; top:0; bottom:0; left:var(--pos); z-index:2;
  width:2px; margin-left:-1px; pointer-events:none;
  background:rgba(242,235,224,.92); box-shadow:0 0 0 1px rgba(15,14,10,.18);
}
.pn-compare.is-live .pn-compare__knob{
  display:flex; align-items:center; justify-content:center; gap:10px;
  position:absolute; top:var(--pnc-knob-y,50%); left:var(--pos); z-index:3; pointer-events:none;
  width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%;
  background:rgba(27,28,30,.72); border:2px solid var(--pnc-ivory);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 6px 22px rgba(0,0,0,.35);
  transition:transform .2s ease, border-color .2s ease;
}
.pn-compare__knob::before,.pn-compare__knob::after{ content:""; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.pn-compare__knob::before{ border-right:8px solid var(--pnc-ivory); }
.pn-compare__knob::after{ border-left:8px solid var(--pnc-ivory); }

/* Keyboard: the range is visually hidden but focusable; its focus is shown
   on the handle and as a ring around the image. */
.pn-compare__range{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; opacity:0;
}
.pn-compare.is-live:has(.pn-compare__range:focus-visible) .pn-compare__knob,
.pn-compare.is-live.is-focus .pn-compare__knob{ border-color:var(--pnc-accent); transform:scale(1.08); outline:3px solid var(--pnc-ivory); outline-offset:3px; }
.pn-compare.is-live:has(.pn-compare__range:focus-visible) .pn-compare__stage,
.pn-compare.is-live.is-focus .pn-compare__stage{ outline:3px solid var(--pnc-ivory); outline-offset:-3px; }

/* Tags: solid backgrounds, never bare text on the image. */
.pn-compare.is-live .pn-compare__tag{
  display:block; position:absolute; top:18px; z-index:2; margin:0; pointer-events:none;
  font-family:var(--pnc-sans); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; line-height:1;
  padding:8px 12px; border-radius:999px; transition:opacity .2s ease;
}
.pn-compare__tag.is-before{ left:18px; color:var(--pnc-ivory); background:rgba(27,28,30,.78); }
.pn-compare__tag.is-possible{ right:18px; color:var(--pnc-anth); background:rgba(242,235,224,.92); }
.pn-compare[data-end="before"] .pn-compare__tag.is-possible,
.pn-compare[data-end="possible"] .pn-compare__tag.is-before{ opacity:0; }

.pn-compare__ai{
  position:absolute; z-index:2; right:18px; bottom:16px; margin:0; line-height:1.2;
  font-family:var(--pnc-sans); font-size:12px; font-weight:600; letter-spacing:.06em;
  color:var(--pnc-ivory); background:rgba(27,28,30,.62); padding:6px 11px; border-radius:999px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); pointer-events:none;
}

/* Instruction text: touch wording on phones and touch tablets, pointer
   wording elsewhere; .pn-compare__sr carries the keyboard guidance for
   assistive technology (linked from the range with aria-describedby). */
.pn-compare__sr{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.pn-compare__help-touch{ display:none; }
@media (max-width:719px), (hover:none) and (pointer:coarse){
  .pn-compare__help-touch{ display:inline; }
  .pn-compare__help-pointer{ display:none; }
}
/* Optional divider fade (hero): below --pnc-line-fade the line becomes a
   hairline, so it does not cut through text laid over the image. Default
   (unset) = no fade. */
.pn-compare.is-live .pn-compare__line{
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--pnc-line-fade,106%) - 6%),rgba(0,0,0,.2) var(--pnc-line-fade,106%),rgba(0,0,0,.2) 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--pnc-line-fade,106%) - 6%),rgba(0,0,0,.2) var(--pnc-line-fade,106%),rgba(0,0,0,.2) 100%);
}

/* Caption / help bar with jump buttons */
.pn-compare.is-live .pn-compare__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px;
  padding:16px 22px 18px; background:var(--pnc-card); line-height:1.5;
}
.pn-compare__bar p{ margin:0; font-family:var(--pnc-sans); font-size:14.5px; color:var(--pnc-stone); }
.pn-compare__cap{ font-family:var(--pnc-serif) !important; font-style:italic; font-size:clamp(18px,1.5vw,22px) !important; color:var(--pnc-ivory) !important; }
.pn-compare__jump{ display:inline-flex; gap:8px; }
.pn-compare__jump button{
  min-height:44px; min-width:44px; padding:0 18px; border-radius:999px; cursor:pointer;
  border:1px solid var(--pnc-line); background:transparent; color:var(--pnc-ivory);
  font-family:var(--pnc-sans); font-size:14px; font-weight:600; letter-spacing:.04em;
}
.pn-compare__jump button:hover{ border-color:var(--pnc-stone); }
.pn-compare__jump button:focus-visible{ outline:3px solid var(--pnc-ivory); outline-offset:2px; }
.pn-compare__jump button[aria-pressed="true"]{ background:var(--pnc-ivory); color:var(--pnc-anth); border-color:var(--pnc-ivory); }

/* ---- INLINE variant: a framed figure at the image's own aspect ratio ---- */
.pn-compare--inline{ border-radius:var(--pd-r,18px); overflow:hidden; background:var(--pnc-card); box-shadow:var(--pd-shadow,0 18px 40px rgba(0,0,0,.28)); }
.pn-compare--inline .pn-compare__stage{ aspect-ratio:var(--pnc-ratio,1536/1024); }

/* ---- HERO variant: fills the .d-hero frame; the hero copy never blocks the
   drag except over its own text; the bar is hidden on large screens (the
   tags and handle carry it) and shown on small ones under the image. ---- */
.pn-compare--hero{ position:absolute; inset:0; }
.pn-compare--hero .pn-compare__stage{ position:absolute; inset:0; }
.pn-compare--hero .pn-compare__possible,.pn-compare--hero .pn-compare__possible picture{ height:100%; }
.pn-compare--hero .pn-compare__tag{ top:auto; bottom:auto; }
.pn-compare--hero.is-live .pn-compare__tag{ top:calc(var(--pnc-top-offset,96px)); }
.pn-compare--hero .pn-compare__ai{ bottom:auto; top:calc(var(--pnc-top-offset,96px) + 40px); }
.pn-compare--hero.is-live .pn-compare__bar{ display:none; }
.pn-compare--hero{ --pnc-knob-y:38%; }

/* Hero page frame (works inside the existing .d-hero header) */
.d-hero.pn-hero-compare{ height:92vh; height:92svh; min-height:560px; }
/* On touch screens the site draws a fixed Back dock (body::after, height
   --pn-dock). The hero then ends at the top of the dock so its copy is never
   covered. --pnc-hdr is the sticky header height (69px in the current header). */
body:has(> .pn-return) .d-hero.pn-hero-compare{ height:min(92svh, calc(100svh - var(--pnc-hdr,69px) - var(--pn-dock,0px))); }
.d-hero.pn-hero-compare .d-hero-scrim{ pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(15,14,10,.34) 0%, rgba(15,14,10,0) 24%, rgba(15,14,10,0) 46%, rgba(15,14,10,.70) 74%, rgba(15,14,10,.90) 100%),
    linear-gradient(90deg, rgba(15,14,10,.42) 0%, rgba(15,14,10,.18) 36%, rgba(15,14,10,0) 56%); }
.d-hero.pn-hero-compare .d-hero-copy{ z-index:2; pointer-events:none; }
.d-hero.pn-hero-compare .d-hero-copy a{ pointer-events:auto; }

/* Portrait tablets and phones: the copy and the jump bar move BELOW the
   image, so the whole image stays draggable and the text sits on a solid
   background. Square on portrait tablets, 4:5 on phones. */
@media (max-width:1024px) and (orientation:portrait), (max-width:719px){
  .d-hero.pn-hero-compare{ height:auto; min-height:0; display:flex; flex-direction:column; background:var(--pnc-anth); }
  .d-hero.pn-hero-compare .pn-compare--hero{ position:relative; inset:auto; --pnc-knob-y:50%; }
  .d-hero.pn-hero-compare .pn-compare--hero .pn-compare__stage{ position:relative; inset:auto; aspect-ratio:1/1; }
  .d-hero.pn-hero-compare .pn-compare--hero.is-live .pn-compare__bar{ display:flex; }
  .d-hero.pn-hero-compare .pn-compare--hero.is-live .pn-compare__tag{ top:12px; }
  .d-hero.pn-hero-compare .pn-compare--hero .pn-compare__ai{ top:auto; bottom:10px; right:10px; }
  .d-hero.pn-hero-compare .d-hero-scrim{ display:none; }
  .d-hero.pn-hero-compare .d-hero-copy{ position:relative; inset:auto; width:100%; max-width:none; margin:0; box-sizing:border-box; padding:28px 22px 8px; pointer-events:auto; text-align:left; }
}
@media (max-width:719px){
  .d-hero.pn-hero-compare .pn-compare--hero .pn-compare__stage{ aspect-ratio:4/5; }
  .pn-compare.is-live .pn-compare__knob{ width:48px; height:48px; margin:-24px 0 0 -24px; }
  .pn-compare.is-live .pn-compare__tag{ font-size:11px; padding:7px 11px; }
  .pn-compare__tag.is-before{ left:12px; } .pn-compare__tag.is-possible{ right:12px; }
  .pn-compare__ai{ font-size:11px; padding:5px 10px; }
  .pn-compare.is-live .pn-compare__bar{ padding:14px 16px 16px; }
  .pn-compare__jump{ width:100%; } .pn-compare__jump button{ flex:1; }
}
@media (prefers-reduced-motion:reduce){
  .pn-compare__knob,.pn-compare__tag{ transition:none !important; }
}

/* Page-level hero image rules (fade-in / scale on .d-hero img) must not touch
   the comparison: both layers stay static so their pixels always align. */
.d-hero .pn-compare img,.pn-compare img{ opacity:1 !important; transform:none !important; transition:none !important; }

/* =====================================================================
   v1.1 · HERO STANDARD (30 Oct 2026, founder Pass 2 approval D1)
   Opt-in only: every rule below needs .pn-hero-compare--std on the .d-hero
   header, so pages built on v1 (DISC-032) render exactly as before.
   What the standard adds, so a Discovery needs no page-specific hero layer:
   - desktop: the page keeps its own hero copy and typography; the handle
     sits in the upper part of the frame (--pnc-knob-y), the divider fades
     under the copy (data-line-fade-under), and the tags and AI label clear
     the sticky header (--pnc-top-offset);
   - phones and portrait tablets: a compact Discovery title above the image
     (.pn-hero-compare__mtitle, aria-hidden; the single H1 stays below for
     assistive technology), a 4:5 image, the jump bar, then the hero copy on
     a solid background with the page's own typography.
   ===================================================================== */
.d-hero.pn-hero-compare--std .pn-compare--hero{ --pnc-knob-y:34%; }
.pn-hero-compare__mtitle{ display:none; }
@media (max-width:1024px) and (orientation:portrait), (max-width:719px){
  .d-hero.pn-hero-compare--std .pn-hero-compare__mtitle{
    display:block; order:-1; padding:18px 22px 16px; background:var(--p4-anth,#27282A);
    border-bottom:1px solid var(--p4-line2,rgba(242,235,224,.14)); }
  .pn-hero-compare__mkicker{ display:block; font-family:var(--p4-sans,'Hanken Grotesk',system-ui,sans-serif); font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--p4-stone,#C2BDB5); margin-bottom:6px; }
  .pn-hero-compare__mname{ display:block; font-family:var(--p4-serif,'Instrument Serif',Georgia,serif); font-size:clamp(28px,7.6vw,36px); line-height:1.04; color:var(--p4-ivory,#F2EBE0); }
  /* the eyebrow repeats the compact title: hidden visually, kept for AT */
  .d-hero.pn-hero-compare--std .d-hero-copy .eyebrow{ position:absolute !important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  .d-hero.pn-hero-compare--std .d-hero-copy{ padding:24px 22px 28px; }
}

/* v1.1 · layout-shift fix (30 Oct 2026). On phones and portrait tablets the jump bar sits
   below the image; it used to appear only when the script went live, pushing the hero copy
   down (~106 px, CLS 0.03). Where scripting is enabled its space is now reserved from the
   first paint (invisible until live); without scripting nothing is reserved, as before.
   The final layout is unchanged. */
@media (scripting:enabled){
  @media (max-width:1024px) and (orientation:portrait), (max-width:719px){
    .d-hero.pn-hero-compare .pn-compare--hero:not(.is-live) .pn-compare__bar{ display:flex; visibility:hidden; flex-wrap:wrap; align-items:center;
      justify-content:space-between; gap:10px 24px; padding:16px 22px 18px; background:var(--pnc-card); line-height:1.5; }
  }
  @media (max-width:719px){
    .d-hero.pn-hero-compare .pn-compare--hero:not(.is-live) .pn-compare__bar{ padding:14px 16px 16px; }
  }
}

/* =====================================================================
   v1.3 · OPENING ON BEFORE (founder directive, 30 Oct 2026)
   Every hero opens on the complete BEFORE image (data-start="100"); the POSSIBLE image is revealed
   only when the visitor moves the divider. Three additions, all additive:
   - no flash of POSSIBLE: where scripting is enabled, a figure that opens at 100 shows its BEFORE
     layer, whole, from the first paint (before the script runs); without scripting nothing changes,
     and the POSSIBLE picture with its alt text remains the static image;
   - while the BEFORE picture is still loading, its layer is the anthracite ground, never POSSIBLE;
   - the handle stays inside the frame at either end (it would otherwise sit half outside it at 100).
   ===================================================================== */
.pn-compare__before{ background:var(--pnc-anth); }
@media (scripting:enabled){
  .pn-compare[data-start="100"]:not(.is-live){ --pos:100%; }
  .pn-compare[data-start="100"]:not(.is-live) .pn-compare__before{ display:block; }
}
.pn-compare.is-live .pn-compare__knob{ left:clamp(30px, var(--pos), calc(100% - 30px)); }

/* =====================================================================
   v1.4 · AI DISCLOSURE BENEATH THE COMPARISON (founder review, 31 Oct 2026; opt-in)
   A hero may carry its AI disclosure as a quiet line BENEATH the comparison instead of the
   overlay badge (.pn-compare__ai): .pn-compare__note inside the figure (phones and portrait
   tablets: directly under the Before/Possible buttons) and .pn-hero-note directly after the
   hero header (desktop: a line under the hero). Exactly one is displayed at a time; both are
   visible without JavaScript. Pages that do not use them are unchanged.
   ===================================================================== */
.pn-compare__note{ display:none; }
.pn-hero-note{ display:block; box-sizing:border-box; max-width:1240px; margin:0 auto; padding:12px 40px 0;
  font-family:var(--p4-sans,'Hanken Grotesk',system-ui,sans-serif); font-size:13px; line-height:1.45; letter-spacing:.01em;
  color:var(--p4-stone,#C2BDB5); }
/* alignment with heroes whose copy is not on the 1240 px content column: a full-width line with the copy's own
   left inset (e.g. 4vw), or centred under centred hero copy */
.pn-hero-note--inset{ max-width:none; padding-left:var(--pnn-inset,40px); padding-right:var(--pnn-inset,40px); }
.pn-hero-note--centre{ text-align:center; }
@media (max-width:1024px) and (orientation:portrait), (max-width:719px){
  .pn-compare--hero .pn-compare__note{ display:block; margin:0; padding:0 22px 16px; background:var(--pnc-card);
    font-family:var(--pnc-sans); font-size:12.5px; line-height:1.45; color:var(--pnc-stone); }
  .pn-compare--hero:not(.is-live) .pn-compare__note{ padding-top:14px; }
  .pn-hero-note{ display:none; }
}
@media (max-width:719px){ .pn-compare--hero .pn-compare__note{ padding:0 16px 14px; } }