/* NOTE-CARD FACE — one shared tier for every paper note card on the site:
   the Kind words testimonial cards (.tnote) and the Get in touch recap note (.note).
   Owns the silhouette (corner radius + shadow), the type, and the content / thin
   divider / meta-row structure, so the two can never drift.
   Pages own only: where the card sits, its background, its state animations, and
   (Get in touch) the tri-fold panel geometry. Linked after buttons.css.
   Tablet-band (768–1279) sizing lives in scale.css; mobile in each page. */

/* Silhouette: 12px radius (--radius-xl) + the two-layer warm paper shadow. */
.tnote,.note{border-radius:var(--radius-xl);box-shadow:0 40px 70px -30px rgba(38,28,10,.4),0 14px 30px -18px rgba(38,28,10,.26)}

/* Content block (quote / message). Pinned lead 24/32, never ramped. */
.ttext{position:relative;margin:0;font:400 24px/32px 'NaN SuperX','NaN SuperX Fallback',Helvetica,Arial,sans-serif;letter-spacing:-.01em;color:#242424;text-wrap:pretty}
/* One exception, by type-system rule: the Get in touch recap card carries the visitor's own
   note, which is BODY copy ("Get in touch copy" inherits --type-body), and its length is
   theirs rather than ours. At the site's body token it reads at 45-75 characters per line
   inside the conversation column, where the 24/32 lead could only ever fit ~30. The Kind
   words testimonial lead keeps the pinned 24/32. */
.note .ttext{font-size:18px;line-height:28px}

/* Thin divider between content block and meta row (Kind words only — the Get in touch
   recap has no divider). */
.trule{position:relative;height:1px;background:rgba(36,36,36,.16);flex:none}

/* Meta row, bottom-aligned. */
.tmeta{position:relative;display:flex;align-items:flex-end;gap:var(--space-4);flex:none}
.tphoto{position:relative;overflow:hidden;width:72px;height:72px;flex:none;display:flex;align-items:center;justify-content:center;background:none;color:#242424;font-family:'Nohemi','Nohemi Fallback',Helvetica,Arial,sans-serif;font-weight:500;font-size:24px;letter-spacing:.02em;border-radius:999px;text-decoration:none}
/* Profile photo, when there is one: a CIRCLE with no fill of any kind behind it. The
   portraits are cut-outs with transparent backgrounds, so the paper reads straight through
   them; contain-fit so the subject is never cropped by the circle. Initials otherwise.
   When the block is a link (avatar -> LinkedIn) the anchor IS the circle. */
.tpimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
a.tphoto{cursor:pointer;-webkit-tap-highlight-color:transparent}
a.tphoto:focus-visible{outline:2px solid #242424;outline-offset:3px}
/* Name line: the handwritten face at the site's hand base size. */
.tname{font:500 var(--hand-size)/36px 'JuniperBay',cursive}
/* Role / company (and any secondary meta line). */
.trole{font:400 14px/20px 'Nohemi','Nohemi Fallback',Helvetica,Arial,sans-serif;opacity:.6;margin-top:3px}
/* Bottom-align: role baseline level with the photo's bottom edge (half-leading + descent). */
.tmetatx{margin-bottom:-6px}

@media (max-width:1279px){
.tphoto{width:52px;height:52px;font-size:18px}
.tname{font-size:25px;line-height:30px}
}