is the hover target and a bare box: it NEVER moves. The visual card is .pc-lift inside it, and that is what translates on hover. Reason (Daniel caught this 2026-08-16): when the moving element is also the :hover target, translate(-2px,-2px) pulls the right and bottom edges out from under a cursor resting on them, so hover drops, the card returns, hover fires again — a visible loop at the top-right and bottom-right corners. A child can move freely because the parent's hit box stays put. This also ends a latent conflict with .reveal, which animates transform on this same element. */ .principle-card { display: flex; height: 100%; } .pc-lift { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 28px; display: flex; flex-direction: column; gap: 14px; /* resting shadow sits at zero offset (hidden behind the card) so hover animates the OFFSET — the shadow slides out as the card lifts, instead of a formed shadow fading in */ box-shadow: 0 0 0 var(--pc); transition: border-color 0.25s ease, transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); } /* hover = hard offset shadow in the card's stripe: the 70s print take on a lift */ .principle-card:hover .pc-lift { border-color: var(--pc); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--pc); } .pc-head { display: flex; align-items: center; gap: 12px; } .pc-dash { width: 26px; height: 4px; border-radius: 2px; background: var(--pc); transition: width 0.3s var(--ease-out); } .pc-num { font-family: var(--font-mono); font-weight: 300; font-size: 0.6875rem; /* 11px */ letter-spacing: 1.5px; color: var(--text-muted); } /* mini ribbon — each principle card's dash is a miniature of the site ribbon (crimson→teal, homepage order): the same four-stripe mark on all four cards says "one set"; the card's own stripe is lit + stretched to say which member this is. Hover: the whole ribbon saturates and the lit stripe stretches further. */ .pc-ribbon { display: flex; align-items: center; gap: 5px; } .pc-ribbon span { width: 7px; height: 4px; border-radius: 2px; opacity: 0.28; transition: width 0.3s var(--ease-out), opacity 0.25s ease; } .pc-ribbon span:nth-child(1) { background: var(--rainbow-4); } .pc-ribbon span:nth-child(2) { background: var(--rainbow-3); } .pc-ribbon span:nth-child(3) { background: var(--rainbow-2); } .pc-ribbon span:nth-child(4) { background: var(--rainbow-1); } .pc-ribbon .active { width: 24px; opacity: 1; } .principle-card:hover .pc-ribbon span { opacity: 1; } .principle-card:hover .pc-ribbon .active { width: 38px; } /* numbers stay in the kicker's muted brown (AA contrast on the card surface, 4.57:1); the lit ribbon stripe alone carries the color mapping */ .pc-title { font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem; /* 20px */ line-height: 1.3; color: var(--text-primary); } .pc-body { font-family: var(--font-sans); font-size: 0.9375rem; /* 15px */ line-height: 1.65; color: var(--text-secondary); } /* ── What I'm looking for ──────────────────────────────────── */ .about-looking { padding-top: 40px; padding-bottom: 60px; display: flex; flex-direction: column; gap: var(--sp-3); } .about-looking .study-richtext { max-width: 820px; } .about-looking .study-cta { align-self: flex-start; } /* ── Closing CTA row: THE VINYL BUTTON ───────────────────── The component (.about-cta / .about-btn / -primary, the record img and the .lbl span) MOVED to css/styles.css on 2026-09-09 so the case-study closers can use it (those pages never load this file). Nothing here. */ /* Inline case-study links inside principle cards: quiet at rest, card color on hover — a link mid-sentence, not a CTA, so the serif title keeps the hierarchy */ .pc-body a { color: inherit; text-decoration: underline; text-underline-position: from-under; } .pc-body a:hover, .pc-body a:focus-visible { color: var(--pc); } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 860px) { .about-hero { padding-top: var(--sp-6); padding-bottom: var(--sp-6); } .about-side { grid-template-columns: 1fr; } .pcard-side { justify-self: center; max-width: 280px; height: auto; aspect-ratio: 3 / 4; } .about-side.is-fan { grid-template-columns: 1fr; } .about-pcards.is-fan { justify-content: center; padding-right: 0; } .pcard-caption { font-size: 0.875rem; } .about-who .study-two-col { grid-template-columns: 1fr; } .about-portrait { max-width: 480px; } .about-principles { grid-template-columns: 1fr; } .about-fanrow { grid-template-columns: 1fr 1fr; } .strip-row { flex-direction: column; gap: 12px; } .strip-items { gap: 10px 20px; } .strip-items img { height: 34px; } .strip-items .logo-circle { width: 34px; } .strip-emoji { font-size: 29px; } } /* Below 480 the fan stops being survivable. A side-by-side pair is bounded by 2W - 0.14C <= C, where C is the container: `margin-left: -14%` resolves against the container inline size, NOT the card. So W <= 0.57C, about 197px at 386, and no padding or type reduction fits a 105-character caption into the 240px of height that buys. Measured after the padding fix, forcing the fan geometry back on at 386: the Cup back still runs over, the eyebrow gone entirely and the divider clipped. (Two passes measured the overage differently, 90-101px and 48-57px, about one gap-delta apart; the sign and the conclusion are what matter.) The fan is kept everywhere it fits (481 and up all measured clean); this is its geometry's fallout, not a change of direction. Replaced the old `width: 52%` rule, which only kept the tilted card inside the gutter and never addressed the overflow. 2026-09-10. */ /* Between 481 and ~545 the fanned pair broke the page's 20px gutter: the left card's tilted corner measured -2px at 481, 1px at 500 and 12px at 520, so the certificate ran flush into the screen edge while the paragraph above it stayed inset. Silent, because nothing scrolls horizontally. Clamping the card here puts that edge at 34px and keeps the tilt, the overlap and the hover lift exactly as they are everywhere else the fan survives. 2026-09-11. */ @media (min-width: 481px) and (max-width: 560px) { .is-fan .pcard-pair { width: 50%; } } @media (max-width: 480px) { .about-pcards.is-fan { flex-direction: column; align-items: center; gap: 20px; } .is-fan .pcard-pair { width: 82%; } /* 316x421 at 386, against a 275px need */ .is-fan .pcard-pair:first-child, .is-fan .pcard-pair:last-child { transform: none; margin-left: 0; } /* The H1 joke puts "dinner for six." on its own line at 1280 and 1440, and at 386 it degraded to a one-word orphan ("six." alone on line four, 50px wide) that also split "dinner for / six.". Balance fixes it here (205/250/234/267) but MUST stay scoped: unscoped it evens the H1 to 639/638 at 1280 and kills the settled break. 2026-09-10. */ .about-hero .study-title { text-wrap: balance; } }