/* ============================================================================
   05 · "Del ángulo de venta al creativo terminado."
   Family: string-timeline. The approved mockup (and verifier 05, blocker
   v05-01) wants separate objects on visible oak, not one desk-spanning panel:
   a tilted headline sheet at the top left, and under it three index cards
   pinned straight to the desk with the red string through their pins, a kraft
   tag on the string over each card's shoulder, and a kraft envelope of
   included resources under each card. Every word therefore still sits on
   paper or kraft; nothing is ink on oak.

   WHY THE STAGE IS A TRANSPARENT [data-board].  board.js only knows the pins
   of `.pinned` elements that carry an id, so the three step cards must be
   `.pinned` children of one board. The board needs no surface (MATERIALS.md
   board.js table: "Felt is optional"), so the stage is a bare wrapper: the
   desk shows through it, the string lies on the oak at --z-felt and every
   paper covers it. No data-board-drag, no data-board-parallax, no physics
   (no data-swing, no data-drag); the engine only measures and draws.

   WHY THE CARDS ARE position:relative.  `.pinned` is absolute by default, and
   an absolute row would need a hard height on a box full of copy (three step
   bodies and three envelopes of different lengths). The cards stay `.pinned`
   for the string and are laid out by the stage grid instead, which is the
   same override materials.css itself makes for `.board-stack` below 900px.
   The pins are real elements, board.js reads their rects, so the geometry is
   identical either way.

   GEOMETRY (desktop >= 900px), measured in Chrome at 1440:
     section      1440 x 1350. Padding --gap-section (108) x --desk-pad (37).
     head sheet   860 x 249 at -.6deg, left aligned, two pins at (46, 28) and
                  (100% - 46, 28). The clothespins prop fills the oak to its
                  right, as in the mockup.
     stage        1200 wide, 3 x 337px columns, column-gap --gap-object (49),
                  row-gap 66, padding-top 52, --gap-object under the head.
     cards        337 x 225 / 250 / 213 on the oak: same top edge (so the
                  string is one straight run), free bottom edge.
     string       pins at 18% / 18% / 82% x -7px of their card, so the line
                  clears the cards' top edges by 6px and reads as one run with
                  three brass heads on it; card 3 mirrors its pin so the last
                  segment reaches the far right (polyline 60,46 443,44
                  1040,44). On oak the red reads as cord, not as text: it is
                  2px, aria-hidden and decorative, exactly as on the hero felt.
     connector    204 x 31 kraft tag lying on that line, bottom:100% + 2px so
                  the string disappears behind it.
     envelopes    367 x 415 each (a flex column stretched to the row, so the
                  three stamps sit on one baseline), --env-flap 49px, side
                  padding 40px (16 more than the material's default) and the
                  stamp in a band under the inner sheet, so kraft dominates
                  the closed face (verifier v05-03). The 66px row gap is the clearance
                  the open state needs: the standing flap paints ~46px above
                  the envelope's top edge and the risen inner sheet 29px above
                  it (MATERIALS.md), so an open envelope never reaches its card.
   390: 390 x 2144. Head sheet full width, then one column in source order
        (card, its envelope, the next card), cards 335 x 189, envelopes
        366 x 297, row-gap 52 with 26 more under each envelope so the three
        groups stay legible as groups. The same svg keeps a box, so board.js
        recomputes the same three pins into a vertical line (60,38 60,681
        60,1296) that shows in the gaps between the objects; card 3's pin
        joins the other two at 18% for exactly that reason. Envelopes open on
        tap and stay open (the button keeps focus), props off.
   ========================================================================= */

.s-05{
  position:relative;
  padding:var(--gap-section) var(--desk-pad);
  --pin-size:clamp(18px,1.85vw,27px);
}

/* ---------- the headline sheet ------------------------------------------ */
.s-05 .s05-head{
  width:100%;
  max-width:860px;
  margin:0 auto 0 0;
  padding:clamp(26px,3.4vw,46px) clamp(20px,3.4vw,48px) clamp(24px,3.2vw,44px);
}
.s-05 .s05-h2{max-width:22ch}
.s-05 .s05-h2 span{display:block}
.s-05 .s05-sub{
  margin-top:clamp(10px,1.1vw,16px);
  max-width:var(--measure);
  color:var(--ink-soft);
}

/* ---------- the stage: three steps on the oak, two rows ----------------- */
.s-05 .s05-stage{
  position:relative;
  counter-reset:s05step;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:start;
  column-gap:var(--gap-object);
  row-gap:clamp(52px,4.6vw,66px);
  width:100%;
  max-width:var(--content-max);
  margin:var(--gap-object) auto 0;
  padding-top:clamp(48px,3.6vw,52px);
}

.s-05 .s05-card{
  position:relative;
  counter-increment:s05step;
  grid-row:1;
}
.s-05 .s05-card-1{grid-column:1}
.s-05 .s05-card-2{grid-column:2}
.s-05 .s05-card-3{grid-column:3}

.s-05 .s05-env{grid-row:2}
.s-05 .s05-env-1{grid-column:1}
.s-05 .s05-env-2{grid-column:2}
.s-05 .s05-env-3{grid-column:3}

/* ---------- step card: numeral, title, body ----------------------------- */
/* The numeral is a CSS counter, and it rides the type scale instead of
   inventing a size: the span is inside the .t-h3 title, so 2.15em is always
   2.15 x the step-title size (43px at 1440, 36px at 390). */
.s-05 .s05-num{
  display:block;
  font-size:2.15em;
  line-height:1;
  letter-spacing:-.035em;
  margin-bottom:.1em;
}
.s-05 .s05-num::before{content:counter(s05step,decimal-leading-zero)}

.s-05 .s05-body{
  margin-top:clamp(8px,.85vw,13px);
  color:var(--ink-soft);
}

/* The connector tag lies ON the string, over the card's free shoulder:
   bottom:100% + 2px puts its box across the line the string runs on, so the
   string disappears behind it. Cards 1 and 2 are pinned at 18% and carry the
   tag on the right; card 3 is pinned at 82% and carries it on the left, so the
   last segment of the string runs to the far right of the composition and the
   third tag still sits on a drawn line. The cap keeps the tag clear of the pin
   at every width (it wraps to two lines between 900 and 1050px instead). */
.s-05 .s05-connector{
  position:absolute;
  bottom:calc(100% + 2px);
  right:8px;
  max-width:calc(74% - 8px);
  z-index:var(--z-paper);
}
.s-05 .s05-card-3 .s05-connector{right:auto;left:8px}

/* the pin's x lives here, not inline, because card 3 mirrors it at desktop and
   joins the others again in the phone column (where a mirrored last pin would
   drag the vertical string diagonally across the page). */
.s-05 .s05-card > .pin{--px:18%}
.s-05 .s05-card-3 > .pin{--px:82%}

/* ---------- the red string ---------------------------------------------- */
/* data-draw="scroll": board.js writes the points and --len, site.js writes
   --draw 0 -> 1 on scroll. --draw defaults to 1, so with no JS and with
   reduced motion the string is already complete. Never display:none it: the
   engine recomputes the points whenever the svg has a box, which is how the
   same element turns vertical below 900px. */
.s-05 .s05-string{z-index:var(--z-felt)}

/* ---------- the kraft envelopes ----------------------------------------- */
/* Two changes to the material's box, both from verifier 05:
   - a smaller flap than the default, so the standing flap of the open state
     stays inside the 66px row gap and never paints over its card;
   - 24px more side padding than the default and the stamp in a band under the
     inner sheet, so the kraft face dominates when the envelope is shut
     instead of reading as a kraft-bordered note card. */
.s-05 .s05-env{
  --env-flap:clamp(40px,3.4vw,49px);
  z-index:var(--z-lift);
  padding:
    calc(var(--env-flap) + clamp(10px,1.2vw,18px))
    clamp(24px,2.8vw,40px)
    clamp(14px,1.6vw,22px);
  /* a column, stretched to the row, with the stamp band pushed to the bottom:
     the three envelopes hold different amounts of copy, and three stamps at
     three different heights read as an accident rather than as a row. */
  display:flex;
  flex-direction:column;
  align-self:stretch;
}
.s-05 .envelope-sheet > p + p{margin-top:clamp(7px,.75vw,11px)}
.s-05 .s05-env-title{margin-bottom:clamp(4px,.45vw,7px)}
.s-05 .s05-env-asset{margin-top:clamp(10px,1vw,15px)}

/* The label is a rubber stamp on the kraft, not a pill inside the paper: the
   button sits in the band below the inner sheet and its negative side margins
   let the stamp run across the full kraft face. When the envelope opens, the
   sheet rises out of it and the stamp stays behind on the envelope. */
.s-05 .s05-env-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-height:44px;
  margin:clamp(12px,1.4vw,20px) calc(-1 * clamp(12px,1.5vw,26px)) 0;
  margin-top:auto;
  padding-top:clamp(12px,1.4vw,20px);
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
/* The size is the one thing this rule takes from the material: at the default
   15px a 900-weight coral stamp multiplied into kraft is 4.2:1, which is only
   AA for large text, so the mark is set at 19px (>= 18.66px bold) where 3:1
   is the bar. --stamp-rot is the tilt the mockup shows; the blend, the grain
   and the border stay the material's. 14em keeps it to two lines. */
.s-05 .s05-env-stamp{
  --stamp-rot:-3deg;
  font-size:clamp(1.18rem,1.35vw,1.4rem);
  max-width:14em;
  white-space:normal;
  text-align:center;
}

/* ---------- desk props (decorative, outer edges only) ------------------- */
/* the tape roll lies under the headline sheet's top-left corner, as in the
   mockup: it is painted before the sheet, so only the part outside the paper
   shows and it never covers a word. */
.s-05 .s05-prop-tape{
  left:-18px;
  top:calc(var(--gap-section) - 68px);
  --prop-w:clamp(110px,10vw,148px);
  --rot:8deg;
}
.s-05 .s05-prop-clips{
  right:14px;
  top:calc(var(--gap-section) - 30px);
  --prop-w:clamp(118px,11.4vw,168px);
  --rot:-11deg;
}

/* ============================================================================
   MOTION
   1. the headline sheet settles 12px on entry, then each step card lands from
      above around its own pin, 70ms apart, left to right: the process is read
      in the order it happens.
   2. the string draws left to right as the section enters (site.js writes
      --draw on the scroll-drawn string): the line is the story, so it is
      literally drawn between the steps rather than appearing.
   3. an envelope opens on hover, on focus and on a tap that sets
      aria-expanded="true": the flap stands up, the inner sheet rises clear of
      the mouth and the stamp stays on the kraft. All three states are the
      material's own, so section CSS adds no transition at all.
   State hooks expected from site.js: `.is-in` on the head and the three
   cards, `--draw` on .s05-string, and `aria-expanded` on .s05-env-btn plus
   `.is-open` on the envelope named by its aria-controls
   (data-toggle-keep-visible: the content is never hidden, so there is no
   no-JS hole). Section CSS deliberately owns none of the three open states:
   `.envelope:hover`, `.envelope:focus-within` (the button lives inside the
   envelope, so a tap or a Tab opens it with no script at all) and
   `.envelope.is-open` are all the material's.
   ========================================================================= */

/* ============================================================================
   MOBILE < 900px: head sheet full width, then one column in source order
   (card, its envelope, the next card). The stage keeps its relative box and
   its svg, so the same string runs vertically through the same three pins and
   shows in the gaps between the objects on the oak.
   ========================================================================= */
@media (max-width: 899px){
  .s-05 .s05-head{
    max-width:none;
    padding:clamp(30px,8.2vw,34px) clamp(15px,4.2vw,20px) clamp(22px,5.4vw,26px);
  }
  .s-05 .pin-a{--px:24px;--py:20px}
  .s-05 .pin-b{--px:calc(100% - 24px);--py:20px}

  .s-05 .s05-h2,
  .s-05 .s05-sub{max-width:none}
  .s-05 .s05-h2 span{text-wrap:balance}

  .s-05 .s05-stage{
    grid-template-columns:1fr;
    row-gap:52px;
    padding-top:44px;
    margin-top:var(--gap-row);
  }
  .s-05 .s05-card,
  .s-05 .s05-env{grid-row:auto;grid-column:auto}
  /* the cards keep their inline --rot (all three are under 1deg) */
  .s-05 .s05-card-3 > .pin{--px:18%}
  .s-05 .s05-card-3 .s05-connector{right:8px;left:auto}
  .s-05 .s05-env{margin-bottom:var(--gap-row)}
}