/* Cardstack — bento grid of tiles. */
:root { --t-font-display: "Manrope", system-ui, sans-serif; --t-font-body: "Manrope", system-ui, sans-serif; --t-max: 1200px; --t-radius: 24px; --t-radius-sm: 14px; --t-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -20px rgba(0,0,0,.18); }
body { background: var(--t-surface2); }

/* hero as a wide tile with the cover inside it */
.t-hero--tile { width: min(100% - 2 * var(--t-gutter), var(--t-max)); margin: clamp(16px, 3vw, 32px) auto 0; background: var(--t-surface); border-radius: var(--t-radius); overflow: hidden; border: 1px solid var(--t-line); box-shadow: var(--t-shadow); }
.t-hero--tile .t-cover { aspect-ratio: 4 / 1; max-height: 240px; }
.t-hero--tile .t-hero__inner { width: auto; padding: 0 clamp(20px, 3vw, 36px) clamp(24px, 3vw, 36px); }
.t-hero--tile .t-photo { width: clamp(104px, 14vw, 144px); border-radius: 28px; box-shadow: 0 0 0 5px var(--t-surface); }
.t-name { font-weight: 800; letter-spacing: -0.03em; font-size: clamp(2.2rem, 5vw, 3.4rem); }
.t-headline { font-weight: 500; }
.t-eyebrow { font-weight: 800; }
.t-stats { background: var(--t-surface2); border-radius: var(--t-radius-sm); padding: 16px 20px; margin-block-start: 24px; }
.t-stats strong { font-weight: 800; }
.btn { --bs-btn-font-weight: 700; }

/* the grid: sections become tiles with spans by kind */
.t-layout { padding-block: clamp(16px, 3vw, 32px) clamp(32px, 5vw, 56px); }
.t-main { display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: dense; }
.t-section { grid-column: span 6; background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-radius); padding: clamp(18px, 2.5vw, 28px); box-shadow: var(--t-shadow); min-width: 0; }
.t-section__title { font-size: var(--t-size-0); text-transform: uppercase; letter-spacing: .14em; color: var(--t-muted); font-weight: 800; margin-block-end: 14px; }
@media (min-width: 760px) {
  .t-section--summary, .t-section--experience, .t-section--projects, .t-section--portfolio, .t-section--services, .t-section--about, .t-section--testimonials, .t-section--contact { grid-column: span 6; }
  .t-section--skills, .t-section--education, .t-section--certifications, .t-section--awards, .t-section--achievements, .t-section--publications, .t-section--languages, .t-section--interests, .t-section--links, .t-section--custom, .t-section--resume { grid-column: span 3; }
}
@media (min-width: 1100px) {
  .t-section--summary { grid-column: span 4; }
  .t-section--skills { grid-column: span 2; }
  .t-section--experience { grid-column: span 4; }
  .t-section--education { grid-column: span 2; }
  .t-section--certifications, .t-section--awards, .t-section--achievements, .t-section--publications, .t-section--languages, .t-section--interests, .t-section--links, .t-section--custom, .t-section--resume { grid-column: span 2; }
  .t-section--testimonials { grid-column: span 4; }
  .t-section--about { grid-column: span 4; }
  .t-section--contact { grid-column: span 6; }
}
/* the statement tile: text centred in the accent tile with a ghost quote mark, so a tall row never leaves a bare block of colour */
.t-section--summary { background: var(--t-accent); color: var(--t-on-accent); border: 0; display: grid; align-content: center; position: relative; overflow: hidden; }
.t-section--summary::before { content: "\201C"; position: absolute; top: -.12em; inset-inline-end: 16px; font-size: clamp(8rem, 16vw, 14rem); line-height: 1; font-weight: 800; opacity: .16; pointer-events: none; }
.t-section--summary .t-section__title { display: none; }
.t-summary { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.3; position: relative; max-width: 26ch; }
.t-section--contact .t-form { max-width: 640px; }
.card { box-shadow: none; background: var(--t-surface2); border: 0; }
.t-quote { background: var(--t-surface2); border: 0; }
.t-chip { background: var(--t-bg); }
.t-timeline { gap: 16px; }
.t-timeline__item { background: var(--t-surface2); border-radius: var(--t-radius-sm); padding: 14px 16px; }
@media (min-width: 600px) { .t-timeline__item { grid-template-columns: 1fr; gap: 2px; } }

/* bento hero (the Cardstack signature): the identity as tiles */
.t-hero--bento { padding-block-start: clamp(16px, 3vw, 32px); }
.t-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-block: 0; }
@media (min-width: 760px) { .t-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(120px, auto); grid-auto-flow: dense; } }
.t-bento__tile { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-radius); padding: 18px 20px; box-shadow: var(--t-shadow); display: grid; align-content: center; gap: 6px; min-width: 0; }
.t-bento__tile--photo { grid-column: span 2; grid-row: span 2; padding: 0; overflow: hidden; place-items: center; background: var(--t-surface2); min-height: 220px; position: relative; }
.t-bento__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-bento__tile--photo .t-photo { width: 56%; border-radius: 28px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--t-surface) 80%, transparent), 0 20px 40px -20px rgba(0,0,0,.5); position: relative; }
.t-bento__tile--name { grid-column: span 2; grid-row: span 2; }
@media (min-width: 760px) { .t-bento__tile--name { grid-column: span 4; } }
.t-bento__tile--name .t-name { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.t-bento__tile--stat { text-align: center; background: var(--t-accent); color: var(--t-on-accent); border: 0; }
.t-bento__tile--stat strong { font-weight: 800; font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1; }
.t-bento__tile--stat span { font-size: var(--t-size-0); opacity: .85; }
.t-bento__tile--tag { grid-column: span 2; font-size: var(--t-size-2); }
@media (min-width: 760px) { .t-bento__tile--tag { grid-column: span 3; } }
.t-bento__tile--tag .t-tagline { margin: 0; color: var(--t-text); font-weight: 500; }
.t-bento__tile--loc { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.t-bento__tile--loc .t-icon { color: var(--t-accent-text); }
.t-bento__tile--cta { grid-column: span 2; background: var(--t-surface2); border: 0; }
.t-bento__tile--cta .t-actions { margin: 0; }
.t-bento__tile--links { grid-column: span 2; }
@media (min-width: 760px) { .t-bento__tile--links { grid-column: span 6; } }
.t-bento__tile--links .t-links { margin: 0; }