/* ═══════════════════════════════════════════════════════════════════════════
   HERO LAB 31 · PHOTO · ACCENT · ONE LIT WINDOW          scope: .pl (photo-lab)
   Base: 11-arr-a2-sand.html. Arrangement A survives: shared left axis, one big
   void, the split CTA, the enlarged subhead, the mark band as a footer rail,
   the headline breaking out across the plate's left edge.

   ── THE PRINCIPLE, AND WHY THE PAGE FLIPPED ────────────────────────────────
   ACCENT: establish a pattern calm enough to break, then break it exactly once.
   The photograph already does this. A hundred dark panes, one lit. The job
   here is to make the LAYOUT say the same sentence, so the page and the
   picture argue together instead of the picture arguing alone inside a mat.

   Three moves carry it:

   1  THE FIELD IS THE PATTERN. The whole hero is one dark facade green with a
      faint hairline lattice ruled across it at roughly the photograph's own
      on-screen pane pitch (31 x 42px at 1440, against the photo's 25 x 34px).
      The page is a grid of unlit cells before a single word is read. The
      photograph is not pasted onto that grid; it is the part of the grid where
      the cells become real windows.

   2  THE SIGNUP IS TWO WINDOWS, ONE LIT. The email field is a transparent
      56px pane with a 1px frame: the lattice runs straight through it, so it
      reads as an unlit cell. Next to it, at the same height, the CTA is the
      lit one, filled with #f2c184 sampled from the photograph's lit pane, and
      split by a single 1px dark mullion into a label pane and an arrow pane,
      which is the exact geometry of the lit window in the picture (it is a
      pair of panes with one mullion, not a single sheet). The unlit pane is
      defined by its frame; the lit pane is defined by its light and carries no
      frame at all. One accent colour, on the one action, twice stated as one
      idea rather than as two competing marks.

   3  NOTHING ELSE IS ALLOWED TO BE WARM. Headline, lede, label, ghost link,
      strip and the ten provider marks are all in one neutral paper-on-green
      family. The base's terracotta caption dot is gone with the portrait. If
      a second thing were warm there would be no accent, only decoration.

   ── THE PORTRAIT IS GONE ───────────────────────────────────────────────────
   The mount, the caption and the 4:5 slot are removed with it. The photograph
   is decorative texture (alt="", aria-hidden on the figure), not a subject
   that needs a mat, so it is presented as a plain hard-edged panel: no border,
   no radius, no shadow, no scrim, no grayscale. Full colour, as asked.

   ── THE BASE'S LEFTOVER STRIP, RESOLVED NOT INHERITED ──────────────────────
   In the base the plate was painted with a hard-stop gradient: a clay rail,
   then a bark frame, then a sand mount, all sitting on a paper ground. Four
   values met inside 120px, and the outermost of them showed as a narrow
   terracotta sliver down the left of the dark frame that read as a leftover.
   That rail existed for exactly one reason: display ink #00201a on bark is
   1.20:1, so the headline's break-out had nowhere legible to land, and clay
   was the cheapest surface that cleared 3:1.

   Inverting the page removes the reason, so the fix is subtraction, not a
   better sliver. The ground is now the photograph's own facade green, the
   display ink is paper, and paper over the photograph's crossing zone measures
   3.95:1 at its single brightest pixel and 13.09:1 at the median, which beats
   the clay rail's 3.62:1. So the rail, the frame and the mount are all
   deleted. The photograph meets the field directly on all four sides: ONE
   edge, ONE tonal step, no ladder of browns, and no colour left over to show.

   ── WHY THE PALETTE CHANGED RATHER THAN THE PHOTOGRAPH ─────────────────────
   The photograph is a dark green concrete facade with one warm light in it.
   Sampled: overall mean #162c2a, the flat return wall #07201e, the lit pane
   #f2c184. That is the brand's own forest-and-terracotta pair, photographed.
   So the page moved to meet it: ground #0c2723, one step deeper than the
   photo's mean so the picture reads as the lit part of the field. Paper
   #fffdf0 and mist #d7d1bc carry all the type. Nothing was desaturated.

   ── GEOMETRY, BY CALCULATION ───────────────────────────────────────────────
   The plate moved from grid-column 9/13 to 8/13, one column wider and one
   column earlier, which lengthens the headline's break-out from the base's
   57px to 166px at 1440. The cut is the message, so it is made longer.

     page margin  = clamp(20, 4vw=57.6, 64)              = 57.6px
     grid width G = min(1280, 1440 - 115.2)              = 1280px  (capped)
     gutter g     = clamp(22, 2vw=28.8, 32)              = 28.8px
     column       = (G - 11g)/12                         = 80.27px
     plate offset = 7 columns + 7 gutters                = 763.47px
     plate width  = 5 columns + 4 gutters                = 516.53px
     headline     = min(13.5vw, 200)                     = 194.4px
     ink advance  = 4.782em (measured on this face by the orchestrator against
                    the base's 57px tail at a 872.5px plate offset)
                  = 4.782 x 194.4                        = 929.5px
     CROSSING     = 929.5 - 763.47                       = 166.0px = 32.1% of
                                                            the plate's width
   The crossing peaks where the font-size and the grid are capped but the
   gutter still grows: 956.4 - 765.3 = 191.1px at 1920, which is 37.1%.

   WHERE THAT PUTS THE INK, AND WHY IT NEVER TOUCHES THE LIGHT. The panel is
   always shorter than 1.491:1, the source's aspect, so cover always scales by
   height and the full 848px of source height is visible. The lit pane is at
   source x 778-884 of 1264 and y 340-436 of 848. With object-position 62%,
   the visible crop is 780-900px of source width depending on viewport, which
   lands the lit pane at 61-69% of the panel's width and a fixed 40-51% of its
   height. The headline reaches 37.1% of the width at worst and stops at 36%
   of the height, so it clears the light on both axes at every size. No type
   is ever placed on the lit pane, where paper would be 1.10:1.

   ── CONTRAST · flat pairs, WCAG relative luminance ─────────────────────────
   paper  #fffdf0 on night #0c2723, headline and field text ... 15.46:1  body
   mist   #d7d1bc on night, lede, label, ghost link ........... 10.33:1  body
   placeholder #9aa79f on night .............................. 6.32:1  body
   night  #0c2723 on lit #f2c184, CTA label and arrow ......... 9.58:1  body
   lit    #f2c184 on night, the accent mass ................... 9.58:1  n-text
   frame  #5a7871 on night, the unlit pane's border ............ 3.28:1  n-text
   frame  #5a7871 on void #07201e, the footer rail's edge ...... 3.53:1  n-text
   paper  #fffdf0 on void #07201e ............................ 16.66:1  body
   night  #0c2723 on lit-up #f8dcb6, CTA on hover ............. 11.96:1  body
   marks  paper at 0.38 over void, the ten glyphs .............. 3.46:1  dec.

   ── CONTRAST · type measured against the photograph's actual pixels ────────
   Every zone below was sampled from the PNG at the exact source rectangle the
   layout puts ink on, not against a nominal background colour.
   headline crossing, desktop 1001-2560px, src x220-600 y25-270
       worst single pixel 3.95:1 · p99.9 4.32:1 · median 13.20:1
   headline crossing, stacked, panel's bottom 32px band, src y812-848
       worst single pixel 4.05:1 · p99.9 4.58:1 · median 15.59:1
   headline crossing, stacked at 390, superset band src y790-848
       worst single pixel 3.40:1 · p99.9 4.29:1 · median 15.59:1
   WORST CASE ANYWHERE: 3.40:1, one pixel in the stacked layout's bottom band
   at 390. The headline is 60-200px display type, so the bar is 3:1 and it
   clears at every viewport. No body text touches the photograph at all.
   Banned pairings, checked and avoided: any type on the lit pane 1.10:1,
   terracotta on forest 2.43:1, ink #00201a on the facade mean 1.17:1.
   ═══════════════════════════════════════════════════════════════════════════ */

.pl {
  /* ── Palette · sampled from the photograph, warm accent kept in colour ──── */
  --pl-night:  #0c2723;   /* the field. One step deeper than the photo's mean */
  --pl-void:   #07201e;   /* the photo's flat return wall · the footer rail   */
  --pl-frame:  #5a7871;   /* structural hairline · the unlit pane's border    */
  --pl-mist:   #d7d1bc;   /* secondary ink                                    */
  --pl-paper:  #fffdf0;   /* display ink                                      */
  --pl-lit:    #f2c184;   /* THE ACCENT · sampled from the lit pane           */
  --pl-lit-up: #f8dcb6;   /* the light coming up, hover only                  */
  --pl-mullion: rgba(255, 253, 240, 0.065);  /* the lattice                   */

  /* Lattice pitch. Portrait cells, sized to the photograph's own on-screen
     pane pitch: 31.7 x 41.8px at 1440 against the photo's 25 x 34px. */
  --pl-cell-w: clamp(26px, 2.2vw, 34px);
  --pl-cell-h: clamp(34px, 2.9vw, 46px);

  /* ── SPACING SCALE · unchanged from the base ───────────────────────────── */
  --sp-0: 4px;                        /* hairline offset                      */
  --sp-1: 8px;                        /* BIND · inside one cluster            */
  --sp-2: 12px;                       /* BIND · caption to figure             */
  --sp-3: clamp(16px, 1.2vw, 20px);   /* RELATE · line to line                */
  --sp-4: clamp(22px, 2vw, 32px);     /* RELATE · item to item, grid gutter   */
  --sp-5: clamp(32px, 3.2vw, 48px);   /* SEPARATE · action from action        */
  --sp-6: clamp(44px, 4.6vw, 72px);   /* SEPARATE · group from group          */
  --sp-7: clamp(64px, 7vw, 104px);    /* ISOLATE · the one big void           */
  --sp-page: clamp(20px, 4vw, 64px);  /* page margin                          */

  /* Left-column measure. The stack stays 10 columns wide, as in the base, so
     that the headline never runs out of box and wraps: its ink advance peaks
     at 956.4px where the type and the grid are both capped, and a 9-column
     stack measures only 952px at 1920, which would break the line and kill
     the crossing. At 10 columns the stack is 1061px and the line always
     holds. The plate starts at 763.5px of that, so the measure has to stay
     under 72%; 62% leaves 105px of air at 1440 and 106px at 1920. */
  --pl-measure: 62%;

  /* Headline size, unchanged from the base to the character, so the 4.782em
     ink advance the orchestrator measured still holds. */
  --pl-h1: clamp(60px, 13.5vw, 200px);

  background: var(--pl-night);
  color: var(--pl-paper);
  /* Sits below the sticky masthead and fills the first viewport, the same role
     the live .hero plays (min-height: calc(100svh - nav)). */
  min-height: calc(100svh - var(--nav-height, 64px));
  display: flex;
  flex-direction: column;
}

/* ── Variant label strip ──────────────────────────────────────────────────── */
.pl__strip {
  flex: none;
  padding: var(--sp-2) var(--sp-page);
  border-bottom: 1px solid var(--pl-frame);   /* 3.28:1, non-text             */
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pl-mist);                      /* 10.33:1 on night             */
}

/* ── Hero · MOVE 1 · the field is already a grid of unlit cells ───────────── */
.pl__hero {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: var(--sp-5) var(--sp-page);
  /* Break-outs stay inside the hero box, so the document can never scroll
     sideways. */
  overflow: clip;
  background-color: var(--pl-night);
  background-image:
    repeating-linear-gradient(to right,
      var(--pl-mullion) 0 1px, transparent 1px var(--pl-cell-w)),
    repeating-linear-gradient(to bottom,
      var(--pl-mullion) 0 1px, transparent 1px var(--pl-cell-h));
}

.pl__grid {
  width: 100%;
  min-width: 0;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sp-4);
  row-gap: var(--sp-6);
  align-items: start;
}
.pl__grid > * { min-width: 0; }

/* ── The plate · the photograph, and nothing around it ────────────────────── */
/* No mat, no frame, no rail, no radius, no shadow, no scrim. The panel meets
   the field on one edge with one tonal step, which is what makes a leftover
   sliver structurally impossible here. It is the same green either side of
   that edge, so the picture reads as the field waking up rather than as an
   object dropped on it. */
.pl .plate {
  grid-column: 8 / 13;
  grid-row: 1;
  align-self: stretch;
  position: relative;
  z-index: 1;                         /* below the copy, above the ground     */
  margin: 0;
  min-width: 0;
  min-height: clamp(360px, 52vh, 560px);
  overflow: hidden;
  background: var(--pl-void);         /* shows only during decode             */
}
/* object-position x=62% keeps the lit pane at 61-69% of the panel's width at
   every viewport, which is clear of the headline's 37.1% worst-case reach.
   The panel is always shorter than the source's 1.491 aspect, so cover scales
   by height and the y value never bites. */
.pl .plate img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  /* No filter. The owner wants this photograph in colour. */
}

/* ── The copy stack · one left axis, unequal gaps ─────────────────────────── */
.pl .stack {
  grid-column: 1 / 11;
  grid-row: 1;
  position: relative;
  z-index: 3;                         /* paints over the photograph           */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-7);                   /* THE VOID · statement | action        */
}

/* Group 1 · the statement. Two lines bound tight. */
.pl .say {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

/* The element that breaks out. The stack is 10 columns wide and the plate
   starts at column 8, so 166px of the headline's ink crosses the photograph's
   left edge at 1440 and cuts into the field of dark windows. Full derivation
   and the measured pixel contrast are in the header block. */
.pl .h1 {
  /* Optical alignment: EB Garamond's capital C carries a left side bearing of
     0.038em, so pulling the box left by that em value puts the GLYPH, not the
     box, on the same axis as the lede, the field and the ghost link. */
  margin: 0 0 0 -0.038em;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--pl-h1);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--pl-paper);             /* 15.46:1 on night, 3.95:1 worst pixel
                                         over the photograph                  */
  overflow-wrap: anywhere;
}

/* The enlarged subhead, kept from the base: 21-30px, roughly one sixth of the
   headline and two and a half times the field label, sans against the
   headline's serif. */
.pl .lede {
  margin: 0;
  max-width: min(46ch, var(--pl-measure));
  font-family: var(--font-sans);
  font-size: clamp(21px, 2.05vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--pl-mist);              /* 10.33:1 on night                     */
}

/* Group 2 · the actions. */
.pl .act {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);                   /* primary action | secondary action    */
}

/* ── MOVE 2 · the signup is two windows, and one of them is lit ───────────── */
.pl .signup {
  min-width: 0;
  width: 100%;
  max-width: min(560px, var(--pl-measure));
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);                   /* BIND                                 */
}
.pl .su-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pl-mist);              /* 10.33:1 on night                     */
}
.pl .su-row {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;               /* both panes take the same height      */
  gap: var(--sp-1);                   /* BIND                                 */
}

/* The unlit pane. Transparent, so the lattice runs straight through it and it
   reads as one more dark cell in the grid. It is defined by its frame. */
.pl .su-input {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 56px;
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.4;
  color: var(--pl-paper);             /* 15.46:1 on night                     */
  background: transparent;
  border: 1px solid var(--pl-frame);  /* 3.28:1 - non-text >= 3:1             */
  border-radius: 0;
  padding: 0 var(--sp-3);
}
.pl .su-input::placeholder { color: #9aa79f; }   /* 6.32:1 on night           */

/* The lit pane. The one warm thing in the composition, in the one place that
   carries the message: the single action. #f2c184 is sampled from the
   photograph's lit window. It is defined by its light, so it carries no
   border at all, and the 1px night divider between the label cell and the
   arrow cell is the mullion the real lit window has. Size, weight and the
   accent do the work; the arrow is the affordance, not an ornament. */
.pl .su-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: stretch;
  min-width: 0;
  padding: 0;
  font: inherit;
  background: var(--pl-lit);          /* 9.58:1 against the field             */
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background 160ms ease;
}
.pl .su-btn__label {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 var(--sp-4);
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.45vw, 20px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--pl-night);             /* 9.58:1 on lit                        */
  white-space: nowrap;
}
.pl .su-btn__glyph {
  flex: 0 0 56px;
  width: 56px;
  display: grid;
  place-items: center;
  background: var(--pl-lit);
  border-left: 1px solid var(--pl-night);   /* the mullion                    */
  color: var(--pl-night);             /* 9.58:1 on lit - non-text >= 3:1      */
}
.pl .su-btn svg { display: block; width: 24px; height: 24px; }
.pl .su-btn:hover,
.pl .su-btn:hover .su-btn__glyph { background: var(--pl-lit-up); } /* 11.96:1 */

/* The secondary action stays a link and stays neutral. A second warm mark
   would mean no accent at all. */
.pl .ghost {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--pl-mist);              /* 10.33:1 on night                     */
  border-bottom: 1px solid var(--pl-mist);
  padding-bottom: var(--sp-0);
}
.pl .ghost:hover { color: var(--pl-paper); border-bottom-color: var(--pl-paper); }

.pl :focus-visible {
  outline: 3px solid var(--pl-paper); /* 15.46:1, and the offset puts the ring
                                         on the field even for the lit pane   */
  outline-offset: var(--sp-0);
}

/* The mark band is no longer an in-grid cluster; it is the full-bleed running
   .vb-rail appended at the foot of the .hero-variant wrapper (see the band
   normalisation block at the end of this file). */

/* ── Stacked · the crossing rotates to the photograph's bottom edge ───────── */
@media (max-width: 1000px) {
  .pl__grid { grid-template-columns: minmax(0, 1fr); }

  .pl .plate {
    grid-column: 1; grid-row: 1;
    align-self: start;                /* the ratio sets the height, not a row */
    min-height: 0;
    aspect-ratio: 3 / 2;              /* near the source's own 1.491          */
  }
  .pl .stack { grid-column: 1; grid-row: 2;
               /* Deliberate break-out overlap: the headline still crosses the
                  photograph, now across its bottom edge. -(sp-6 + sp-5) eats
                  the row gap and 32-48px more. gap cannot express an overlap.
                  Measured worst pixel in that band is 4.05:1 at 834 and
                  3.40:1 at 390, against a 3:1 bar for display type. */
               margin-top: calc((var(--sp-6) + var(--sp-5)) * -1); }

  .pl .lede, .pl .signup { max-width: 100%; }
}

@media (max-width: 560px) {
  .pl .plate { aspect-ratio: 4 / 3; } /* keeps the lit pane a readable size   */
  .pl .su-btn { flex: 1 1 auto; }
  .pl .su-btn__label { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .pl *, .pl *::before, .pl *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* SITE INTEGRATION */
.hero-variant { position: relative; z-index: 1; }
.sheet { margin-top: 0; }
.variant-status { margin: 12px 0 0; min-height: 1.25em; font-family: var(--font-sans, system-ui, sans-serif); font-size: 14px; line-height: 1.25; color: #0b3d33; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE OPENING · one authored first-paint entrance (animation pass)
   Concept "THE ONE LIGHT" · photo-led. The picture settles by CONVERGING on
   the single lit window, and the copy does NOT rise — it fades IN PLACE, a beat
   later, so the eye finds the light first and the words read as lit by it.
   transform + opacity only, on the site's own motion vocabulary.
   Reduced motion needs no special case: the blanket kill in the
   @media (prefers-reduced-motion: reduce) block above reverts every animated
   element to its visible base (opacity 1, resting transform: none), so the
   opening simply does not play and nothing hides — the same contract every
   other hero relies on.
   ═════════════════════════════════════════════════════════════════════════ */

/* Beat 1 · the photograph settles by converging on the one lit window.
   transform-origin 64% 45% sits on the warm lit pane: measured, the lit window
   lands at 61-69% of the plate width and 40-51% of its height under
   object-position 62% 50%, so pivoting the settle there makes the frame appear
   to focus down onto the light. The img declares NO base transform (only
   object-fit / object-position), so the settle's 'to' is `none` EXACTLY and
   there is no jump at rest; the scale(1.05) start adds the gesture on top of
   that base. The .pl .plate container is overflow: hidden, so the 1.05 start is
   clipped and cannot bleed past the panel. */
@keyframes pl-plate {
  from { transform: scale(1.05); }
  to   { transform: none; }
}
.pl .plate img {
  transform-origin: 64% 45%;
  animation: pl-plate var(--dur-reveal) var(--ease-editorial) both;
}

/* Beat 2 · the copy arrives as if lit. Opacity ONLY — no translate — so the
   words appear in place rather than sliding in, and slightly after the light so
   the eye reaches the window first: headline 360ms, lede 480ms, action 600ms.
   opacity:0 lives only inside this keyframe (applied with 'both'), never on a
   base rule, so reduced motion reverts each to opacity 1. */
@keyframes pl-copy {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pl .h1   { animation: pl-copy var(--dur-reveal) var(--ease-editorial) 360ms both; }
.pl .lede { animation: pl-copy var(--dur-slow)   var(--ease-editorial) 480ms both; }
.pl .act  { animation: pl-copy var(--dur-slow)   var(--ease-editorial) 600ms both; }

/* Press feedback on the one action. */
.pl .su-btn { transition: background 160ms ease, transform 140ms ease-out; }
.pl .su-btn:active { transform: scale(0.98); }

/* ═══════════════════════════════════════════════════════════════════════════
   FULL-BLEED RUNNING MARK BAND (band normalisation pass)
   Neutral .vb-rail so it never clashes with the comp's own classes. It is a
   block-level flex child of the full-width .hero-variant wrapper, so it spans
   edge to edge by construction (no 100vw, no negative margins, no overflow),
   and it sits last so it forms the crisp divider into the paper sheet.
   ═════════════════════════════════════════════════════════════════════════ */
.vb-rail {
  flex: none;
  min-width: 0;
  overflow: hidden;                 /* the track can never widen the page */
  background: #0b3d33;              /* forest */
  padding-block: clamp(22px, 2vw, 32px);
}
.vb-rail__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 200%;                      /* two sets, each exactly one rail wide */
  animation: vb-rail-run 58s linear infinite;
  will-change: transform;
}
.vb-rail__set {
  flex: 0 0 50%;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-around;    /* equal pitch across the seam */
}
.vb-rail__set img {
  display: block;
  flex: 0 0 auto;
  width: clamp(24px, 2.55vw, 38px);
  height: clamp(24px, 2.55vw, 38px);
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.45;                    /* quiet texture over forest */
}
@keyframes vb-rail-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* Reduced motion: the strip rests composed as one set, no clone, no clipping. */
@media (prefers-reduced-motion: reduce) {
  .vb-rail { padding-inline: clamp(20px, 4vw, 64px); }
  .vb-rail__track { width: 100%; max-width: 1280px; margin-inline: auto; animation: none; }
  .vb-rail__set { flex: 0 0 100%; flex-wrap: wrap; justify-content: space-around; row-gap: 16px; }
  .vb-rail__set--clone { display: none; }
}

/* Interior preview · a line glyph per item so the two reads scan instantly. */
.issue__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.issue__ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  border: 1px solid var(--border-divider);
  border-radius: 999px;
  color: #c56c47;
}
.issue__ico svg { width: 18px; height: 18px; }
.issue__body { min-width: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   SITE SIGNUP SKIN · match the chosen variant's email-first look on the REAL,
   wired form. Markup, the submit/Resend script and the type-to-expand
   animation are untouched — only the appearance is retuned from the glass card
   to the variant's .su-* look: no glass pane, a framed transparent field, and
   one warm "lit" action (amber, no stray border, glyph aligned).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Drop the glass card: the signup reads straight off the Forest ground. */
.pl .signupcard {
  width: min(560px, 100%);
  margin-top: var(--sp-2);
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
}
.pl .signup { gap: var(--sp-3); }
/* On success the script sets [hidden] on the form. The variant's
   `.pl .signup { display:flex }` was overriding site.css's `.signup[hidden]`,
   so the form stayed stacked above the confirmation. Hide it, so "You're on
   the list" takes the place where the email field was. */
.pl .signup[hidden] { display: none; }

/* Label + field, in the variant's su-label / su-input idiom. */
.pl .field { gap: var(--sp-1); }
.pl .field__label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pl-mist);
}
.pl .field__input {
  min-height: 56px;
  background: transparent;
  border: 1px solid var(--pl-frame);
  border-radius: 0;
  padding: 0 var(--sp-3);
  color: var(--pl-paper);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.4;
}
.pl .field__input::placeholder { color: #9aa79f; }
.pl .field__input:focus { border-color: var(--pl-lit); }
.pl .field__input:focus-visible { outline: 2px solid var(--pl-paper); outline-offset: 3px; }

/* The one lit action: amber body, no stray border, glyph cell aligned. */
.pl .signupcard .btn-split {
  align-self: flex-start;
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  background: var(--pl-lit);          /* the one lit accent, sampled from the window */
  border: 0;
  border-radius: 0;
  transition: background 160ms ease;
}
.pl .signupcard .btn-split__label {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 var(--sp-4);
  color: var(--pl-night);
  font-weight: 600;
  font-size: clamp(17px, 1.45vw, 20px);
  letter-spacing: 0.01em;
  text-transform: none;               /* sentence case, like the variant */
}
.pl .signupcard .btn-split__glyph {
  flex: 0 0 56px;
  width: 56px;
  display: grid;
  place-items: center;
  background: var(--pl-lit);
  border-left: 1px solid var(--pl-night);
  color: var(--pl-night);
}
.pl .signupcard .btn-split:hover,
.pl .signupcard .btn-split:hover .btn-split__glyph { background: var(--pl-lit-up); }