/* Paper — stacked sheets, tape, a torn edge. */
:root { --t-font-display: "Fraunces", Georgia, serif; --t-font-body: "Inter", system-ui, sans-serif; --t-max: 1000px; --t-radius: 4px; --t-radius-sm: 3px; --t-shadow: 0 1px 2px rgba(0,0,0,.06), 0 14px 30px -18px rgba(0,0,0,.35); }
body { background-color: var(--t-surface2); background-image: radial-gradient(color-mix(in srgb, var(--t-text) 6%, transparent) 1px, transparent 1px); background-size: 5px 5px; }

/* the desk: cover as a photo print with a torn edge; the hero on a sheet */
.t-hero--desk .t-cover { width: min(100% - 2 * var(--t-gutter), var(--t-max)); margin: clamp(20px, 4vw, 48px) auto 0; aspect-ratio: 16 / 6; max-height: 360px; transform: rotate(-.8deg); box-shadow: var(--t-shadow); border: 10px solid var(--t-surface); border-block-end-width: 36px; }
.t-hero--desk .t-hero__inner { background: var(--t-surface); box-shadow: var(--t-shadow); padding: clamp(24px, 4vw, 44px); margin-block-start: clamp(-16px, -2vw, -28px); position: relative; gap: 24px; }
/* the torn top edge: the sheet is masked to a solid area that starts 12px down plus a scalloped strip across the top 12px */
.t-hero--desk .t-hero__inner { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12' preserveAspectRatio='none'><path d='M0 12 L0 6 Q10 0 20 6 T40 6 T60 6 T80 6 T100 6 T120 6 L120 12 Z' fill='black'/></svg>") top / 120px 12px repeat-x, linear-gradient(#000, #000) 0 12px / 100% calc(100% - 12px) no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12' preserveAspectRatio='none'><path d='M0 12 L0 6 Q10 0 20 6 T40 6 T60 6 T80 6 T100 6 T120 6 L120 12 Z' fill='black'/></svg>") top / 120px 12px repeat-x, linear-gradient(#000, #000) 0 12px / 100% calc(100% - 12px) no-repeat; }
.t-hero--desk .t-hero__media { position: relative; margin: 0; }
.t-hero--desk .t-hero__media::before { content: ""; position: absolute; top: -12px; inset-inline-start: 50%; width: 90px; height: 26px; transform: translateX(-50%) rotate(-4deg); background: color-mix(in srgb, var(--t-accent2) 55%, transparent); box-shadow: 0 1px 2px rgba(0,0,0,.15); z-index: 2; }
.t-hero--desk .t-photo { width: clamp(120px, 17vw, 168px); border-radius: 2px; border: 8px solid var(--t-surface); border-block-end-width: 26px; box-shadow: var(--t-shadow); transform: rotate(2deg); }
.t-hero--desk .t-eyebrow { color: var(--t-accent-text); }
.t-hero--desk .t-name { font-weight: 600; font-size: clamp(2.4rem, 5.5vw, 3.8rem); }
.t-hero--desk .t-headline { font-family: var(--t-font-display); font-style: italic; font-weight: 400; }
.t-hero--desk .t-stats strong { font-weight: 400; font-style: italic; }
.btn { --bs-btn-border-radius: 4px; --bs-btn-font-weight: 600; }
.t-link { border-radius: 4px; background: var(--t-surface2); }

/* sheets */
.t-main { gap: 28px; }
.t-section { background: var(--t-surface); box-shadow: var(--t-shadow); padding: clamp(20px, 3.5vw, 36px); position: relative; }
.t-section:nth-child(odd) { transform: rotate(-.35deg); }
.t-section:nth-child(even) { transform: rotate(.35deg); }
.t-section::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--t-surface); transform: rotate(1.2deg); box-shadow: var(--t-shadow); opacity: .7; }
.t-section__title { font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 1.9rem); border-block-end: 1px solid var(--t-line); padding-block-end: 8px; }
.t-section--summary .t-section__title { display: none; }
.t-summary { font-family: var(--t-font-display); font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.4; max-width: 50ch; }
.card { box-shadow: var(--t-shadow); border: 0; }
.card:nth-child(even) { transform: rotate(.6deg); } .card:nth-child(odd) { transform: rotate(-.5deg); }
.t-gallery__item figure { border: 8px solid var(--t-surface); border-block-end-width: 24px; box-shadow: var(--t-shadow); border-radius: 2px; }
.t-gallery__item:nth-child(odd) figure { transform: rotate(-1deg); } .t-gallery__item:nth-child(even) figure { transform: rotate(1.2deg); }
.t-quote { background: var(--t-surface2); border: 0; }
.t-quote blockquote { font-style: italic; }
.t-chip { background: var(--t-surface2); border: 0; }
.t-menu__leader { border-block-end-color: color-mix(in srgb, var(--t-text) 40%, transparent); }
.t-footer { border: 0; }
@media (prefers-reduced-motion: reduce) { .t-section, .card, .t-gallery__item figure, .t-hero--desk .t-cover, .t-hero--desk .t-photo { transform: none; } }