/* ============================================================================
   02 · "Testea más ángulos. Sin grabar cada creativo."
   Family: sheet-typographic. The one section on the desk that is nothing but
   type on paper: a single wide sheet, two brass pins, and a rubber stamp
   across the lower-right corner. No board, no photograph, no felt.

   GEOMETRY (desktop >= 900px), measured in Chrome at 1440:
     section      1440 x 745. Padding --gap-section (108) x --desk-pad (37).
     sheet        1200 x 540 (1205 with the -.5deg tilt in its bounding box),
                  centred, padding 60 / 66 / 52. The two pins sit at
                  (54, 31) and (100% - 54, 31), inside that top margin and
                  clear of the H2, whose cap height starts at 60px.
     headline     .t-h2 at 48.2px, the two copy leaves as two blocks,
                  max-width 24ch so line 2 ("Sin grabar cada creativo.",
                  640px) never collides with the stamp column.
     rule         1px of --ink-soft at .34, --gap-row (26) above and below.
     columns      3 x 324px, column-gap --gap-object (49). "Más creativos para
                  testear cada semana." breaks after "para" in .t-h3 (20.2px)
                  at that measure, two lines, as in the mockup.
     stamp        the copy is 68 characters, so the mockup's one-line stamp is
                  out of reach: max-width 36ch sets it as four centred lines,
                  346 x 94 (369 x 122 bounding box at -3.4deg), which keeps a
                  rubber stamp's block proportion instead of a paragraph's.
                  The quiet link sits --gap-row to its left, on its centre.
     props        tape roll and clothespins in the desk margin either side of
                  the sheet, tucked a few pixels under its top corners.
   390: 390 x 707. One column, sheet 371 x 598 inside the 12px desk margin,
        columns stacked at --gap-row, the stamp (336 x 79) under the last
        column with the link beneath it, props off (the material hides them).
        The headline's second sentence is 341px of type in a 333px measure and
        the scale's floor is 1.65rem, so it wraps balanced (two even lines)
        rather than orphaning "creativo.".
   ========================================================================= */

.s-02{
  position:relative;
  padding:var(--gap-section) var(--desk-pad);
  /* the mockup's brass heads read at about 26px on a 1200px sheet; the
     material's default (24px max) is sized for the smaller objects on felt. */
  --pin-size:clamp(18px,1.85vw,27px);
}

/* ---------- the sheet ---------------------------------------------------- */
.s-02 .s02-sheet{
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding:clamp(30px,4.2vw,60px) clamp(18px,4.6vw,66px) clamp(28px,3.6vw,52px);
}

/* ---------- headline: two copy leaves, two lines ------------------------- */
/* One block per copy leaf, which is the mockup's two-line headline; at 390
   the second line is balanced instead (see the mobile block). */
.s-02 .s02-h2{max-width:24ch}
.s-02 .s02-h2 span{display:block}

.s-02 .s02-sub{
  margin-top:clamp(10px,1.1vw,16px);
  max-width:var(--measure);
  color:var(--ink-soft);
}

/* ---------- the thin rule ----------------------------------------------- */
/* The mockup's rule is a confident near-black hairline, so it is --ink at .7,
   not --ink-soft: --paper-edge and a washed grey both disappear at 1px. */
.s-02 .s02-rule{
  margin:var(--gap-row) 0;
  border:0;
  height:1px;
  background:var(--ink);
  opacity:.7;
}

/* ---------- the three typed columns ------------------------------------- */
.s-02 .s02-cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:var(--gap-object);
  row-gap:var(--gap-object);
  align-items:start;
}
.s-02 .s02-col-title{max-width:18ch}
.s-02 .s02-col-body{
  margin-top:clamp(8px,.85vw,13px);
  color:var(--ink-soft);
}

/* ---------- the lower band: the typed line and the stamp ---------------- */
/* Verifier 02: a 68-character stamp reads as a bordered text box, and the
   quadrant under columns one and two was 605 x 174px of dead paper. So the
   sentence is typed ink where that hole was, the link follows it in the same
   line, and the stamp carries the short phrase (s02.stampShort) at the
   mockup's size across the lower-right corner. */
.s-02 .s02-mark{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--gap-object);
  margin:var(--gap-object) 0 0;
}
.s-02 .s02-note{
  max-width:44ch;
  color:var(--ink);
}
/* The mark is not type in the scale: the mockup's stamp is about twice the
   material's default, which is sized for the small INCLUIDO marks, so the one
   thing this rule changes is the size (and the two-line break the material
   documents for a long stamp). The blend, the grain and the border are the
   material's and are left alone. 16em (border-box, so about 412px of measure
   at 1440) holds "SIN SUSCRIPCION" on line one and "MENSUAL" on line two at
   every viewport, because the cap and the type are both em. */
.s-02 .s02-stamp{
  --stamp-rot:-4deg;
  flex:0 0 auto;
  font-size:clamp(1.05rem,2vw,1.8rem);
  max-width:16em;
  white-space:normal;
  text-align:center;
}

/* ---------- desk props (decorative, outer edges only) ------------------- */
/* Both sit in the desk margin left of / right of the 1200px sheet and tuck a
   few pixels under its top corners, which is how objects lie on a desk; they
   are painted before the sheet, so they never cover a word. The right-hand one
   is inset 14px because a rotated cut-out's bounding box grows about 10px per
   side, and at right:0 that was 9px of horizontal scroll at 1024. */
.s-02 .s02-prop-tape{
  left:0;
  top:calc(var(--gap-section) - 34px);
  --prop-w:clamp(110px,10vw,150px);
  --rot:-7deg;
}
.s-02 .s02-prop-clips{
  right:14px;
  top:calc(var(--gap-section) - 22px);
  --prop-w:clamp(112px,10.4vw,156px);
  --rot:9deg;
}

/* ============================================================================
   MOTION
   1. the sheet settles 12px on entry: the page hands you one page to read, so
      it arrives as one object (materials' default [data-reveal]).
   2. each column follows 70ms behind the one before it, left to right, which
      is the order the eye reads them in.
   3. the stamp thumps down once, last: the sheet is read, THEN it is stamped.
      Scale 1.15 -> 1 in 250ms, no bounce, no loop, exactly one landing.
   Every start state is gated behind html.reveal-ready (only site.js adds it),
   so with no JS or reduced motion the whole sheet is complete and static.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference){
  /* MATERIALS.md section 11: the settle end state now keeps --rot and the
     hover lift, so this section no longer restates it. Only the thump, which
     is this section's own variant, is defined here. */
  html.reveal-ready .s-02 [data-reveal="thump"]{
    opacity:0;
    transform:rotate(var(--stamp-rot,-3.4deg)) scale(1.15);
  }
  html.reveal-ready .s-02 [data-reveal="thump"].is-in{
    opacity:1;
    transform:rotate(var(--stamp-rot,-3.4deg)) scale(1);
    transition:
      opacity 140ms linear calc(var(--i,0) * 70ms),
      transform 250ms cubic-bezier(.2,.9,.3,1) calc(var(--i,0) * 70ms);
  }
}

/* ============================================================================
   MOBILE < 900px
   ========================================================================= */
@media (max-width: 899px){
  .s-02 .s02-sheet{
    --rot:-.4deg;
    padding:clamp(34px,8.8vw,40px) clamp(15px,4.2vw,20px) clamp(22px,5.4vw,26px);
  }
  .s-02 .pin-a{--px:24px;--py:18px}
  .s-02 .pin-b{--px:calc(100% - 24px);--py:18px}

  .s-02 .s02-h2{max-width:none}
  /* at 390 the second sentence is 341px of type in a 333px measure, and the
     scale's floor (1.65rem) cannot shrink: balanced wrapping breaks it as two
     even lines instead of leaving "creativo." alone on a third. */
  .s-02 .s02-h2 span{text-wrap:balance}
  .s-02 .s02-sub{max-width:none}

  .s-02 .s02-cols{
    grid-template-columns:1fr;
    row-gap:var(--gap-row);
  }
  .s-02 .s02-col-title{max-width:none}

  .s-02 .s02-mark{
    flex-direction:column;
    align-items:center;
    gap:var(--gap-row);
    margin-top:var(--gap-row);
  }
  .s-02 .s02-note{max-width:none}
  .s-02 .s02-stamp{--stamp-rot:-3deg}
}