/* ============================================================
   "THREE THINGS HAPPEN" — section candidates
   ------------------------------------------------------------
   Same three claims, same real UI fragments, six treatments.
   What differs is the container and how the fragment is framed.
   ============================================================ */

.t3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px,1fr)); gap: var(--s4); }
.t3__t { font-family: var(--display); font-weight: var(--w-display); font-size: var(--t-md);
  letter-spacing: -0.022em; color: var(--ink); }
.t3__b { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-3); margin-top: 8px; }
.t3__more { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s3);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink); }
.t3__more::after { content: '→'; transition: transform var(--fast) var(--ease); }
.t3__more:hover::after { transform: translateX(3px); }

/* the shared UI fragment frame */
.t3__ui { border-radius: var(--r); overflow: hidden; height: 128px; padding: var(--s2);
  font-size: var(--t-xs); background: var(--white); }
.t3__line { display: flex; justify-content: space-between; align-items: baseline; }
.t3__who { font-weight: 600; color: var(--ink); }
.t3__meta { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.t3__rule { height: 1px; background: var(--line); margin: 10px 0; }

/* ---- A. CORNER BRACKETS  (Spade) ---------------------------
   Crop marks at each corner instead of a border. The card is
   defined by its corners, which reads as measured rather than
   boxed — and it leaves the fragment sitting on the page. */
.t3A__c { position: relative; padding: var(--s4); }
.t3A__c::before, .t3A__c::after,
.t3A__c > .t3A__br::before, .t3A__c > .t3A__br::after {
  content: ''; position: absolute; width: 12px; height: 12px; border: 1px solid var(--ink-4);
}
.t3A__c::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.t3A__c::after  { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.t3A__c > .t3A__br::before { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.t3A__c > .t3A__br::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.t3A__lab { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3); }
.t3A__sq { width: 18px; height: 18px; border-radius: 4px; background: var(--brand-wash);
  border: 1px solid var(--brand-line); }

/* ---- B. ROTATED SCATTER  (Fruitful) — CHOSEN -----------------
   Cards tilted a degree or two and genuinely overlapping, like
   something dealt onto a table.

   Two things make the difference between "deliberate" and "the CSS
   broke". First, the overlap has to be REAL: with `gap: 0` three
   equal columns only butt against each other, so the rotation just
   collides the corners. Negative inline margins pull each card under
   its neighbour, and the z-order says which is on top. Second, the
   tilt needs a reason to exist — hovering straightens the card and
   lifts it out of the stack, which reads as "these are objects" and
   not "these are misaligned divs".

   Shadows do the layering work, so they have to be strong enough to
   separate a white card from a white card. */
.t3B { gap: 0; align-items: start; }

/* The reveal and the tilt CANNOT live on the same element. `.js [data-rise].in`
   sets `transform: none`, so a rotation authored on the card is wiped the
   moment the card scrolls into view — it would look right until it animated,
   then snap flat. So the WRAPPER reveals and owns the z-order; the CARD tilts.
   Position is carried by explicit modifier classes rather than :nth-child, so
   wrapping the cards can't silently re-number them. */
.t3B__i { position: relative; }
.t3B__i--a { z-index: 1; }
.t3B__i--b { z-index: 3; }
.t3B__i--c { z-index: 2; }
.t3B__i:hover { z-index: 4; }

.t3B__c { position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s4);
  box-shadow: 0 1px 2px rgba(15,15,15,0.05), 0 12px 28px -8px rgba(15,15,15,0.16);
  transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease); }
/* The overlap must land on card CHROME, never on copy. -28px each side put the
   middle card straight over "…books a slot" and the "It follows up" heading,
   because the outer cards' own padding (--s4) is smaller than the overlap, so
   text began inside the covered strip — and rotation swung it further under.
   Two halves to the fix: a smaller overlap, and padding on the overlapped side
   of each outer card that is strictly larger than it. */
.t3B__c--a { transform: rotate(-2.4deg); padding-inline-end: calc(var(--s4) + 26px); }
.t3B__c--b { transform: rotate(1.4deg) translateY(22px); margin-inline: -16px; }
.t3B__c--c { transform: rotate(2.6deg) translateY(6px); padding-inline-start: calc(var(--s4) + 26px); }
.t3B__i:hover .t3B__c { transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 2px 4px rgba(15,15,15,0.06), 0 26px 52px -12px rgba(15,15,15,0.24); }

/* the stack needs room the flat version does not: the middle card hangs 20px
   below the row and the rotated corners swing outside the grid box, so without
   this the shadows clip into the next section. */
.t3B-wrap { padding-block: var(--s3) 46px; }

@media (max-width: 860px) {
  .t3B { gap: var(--s3); }
  .t3B__c { transform: none !important; margin-inline: 0 !important;
    padding-inline: var(--s4) !important; }
  .t3B__i:hover .t3B__c { transform: translateY(-4px) !important; }
}

/* ---- C. ONE LAYER, INK CHIP ON THE EDGE  (frames.html, option E) -
   The fragment IS the card. There is no mount behind it.

   It had one: a --paper-2 panel with the fragment sitting on it. That
   tint was chosen when the page ground was WHITE. Once the page moved
   to --paper the mount stopped reading as a soft bed and started
   reading as a dark frame drawn around every card — the same value,
   a completely different job, because a colour is only ever relative
   to what it sits on.

   Removing the mount takes the chip's ledge with it, so the chip goes
   INK: it needs no border to hold against white, and it is the only
   dark object in the section, which is what makes it read as a label
   on the card rather than as another card.

   The card is a flex column with the fragment flexing, so all three
   stretch to the tallest and the chips land on one line. A min-height
   would do it by luck; this does it by construction. */
.t3C__c { display: flex; flex-direction: column; }
.t3C__ui { position: relative; flex: 1; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s3); padding-bottom: var(--s4);
  /* --lift-3 rather than a hand-rolled value: the page already has a shadow
     scale and the ledger card, the hero sheets and these all need to sit at
     the same apparent height. A one-off rgba here would put this section on
     a different plane to everything else for no reason. */
  box-shadow: var(--lift-3);
  transition: box-shadow var(--slow) var(--ease), transform var(--slow) var(--ease); }
/* Lift on hover, but no cursor change and no link: these are not clickable and
   should not pretend to be. The movement is there because a card that responds
   to the pointer reads as an object, which is the whole point of the fragment. */
/* Only the CARD transforms. The chip is absolutely positioned INSIDE it, so it
   is carried by the card's own transform — translating it as well moved it
   twice as far and detached it from the edge it is supposed to sit on. */
.t3C__c:hover .t3C__ui { box-shadow: var(--lift-4); transform: translateY(-3px); }
/* the inner fragment keeps its markup but gives up its own chrome —
   two nested cards was the thing being removed */
.t3C__ui > .t3__ui { height: auto; padding: 0; border: 0; background: transparent;
  box-shadow: none; border-radius: 0; }
.t3C__chip { position: absolute; left: var(--s3); bottom: -14px;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: var(--r-pill); background: var(--ink); color: var(--white);
  box-shadow: var(--lift-2); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.t3C__c .t3__t { margin-top: var(--s5); }

/* ---- D. NUMBERED, NO CARDS  (Intercom, centred) ------------
   No container at all. A large ghosted number, a rule, and the
   copy. Cheapest and quietest — it lives or dies on the writing. */
.t3D__c { border-top: 1px solid var(--line-2); padding-top: var(--s3); }
.t3D__n { font-family: var(--display); font-weight: var(--w-display); font-size: 44px;
  line-height: 1; letter-spacing: -0.05em; color: var(--paper-3); }
.t3D__c .t3__t { margin-top: var(--s2); }

/* ---- E. ONE CARD ACCENTED  (ClickUp) -----------------------
   Three cards, one of them carrying the brand. Puts the eye
   somewhere instead of leaving three equal weights to compete. */
.t3E__c { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s4); box-shadow: var(--lift-1); }
.t3E__c--hot { background: var(--ink); border-color: var(--ink); }
.t3E__c--hot .t3__t { color: var(--white); }
.t3E__c--hot .t3__b { color: rgba(255,255,255,0.7); }
.t3E__c--hot .t3__more { color: var(--brand-hot); }
.t3E__c--hot .t3__ui { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.t3E__c--hot .t3__who { color: #fff; }
.t3E__c--hot .t3__meta { color: rgba(255,255,255,0.5); }
.t3E__c--hot .t3__rule { background: rgba(255,255,255,0.14); }

/* ---- F. ICON SQUARE + PILL BUTTON  (GitBook) --------------- */
.t3F__c { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); }
.t3F__ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
  border: 1px solid var(--line); background: var(--paper-2); margin-bottom: var(--s3);
  font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.t3F__btn { display: inline-block; margin-top: var(--s3); padding: 8px 15px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink); background: var(--white); }
.t3F__btn:hover { border-color: var(--ink-4); }