/* Baseball first birthday (Basic) — vintage trading card: cream card stock, red stitching, navy ink */
.t-base { --bg: #F3E9D2; --surface: #FFFBF2; --surface-2: #EBDDBF; --ink: #1D3557; --ink-2: #4F5D73; --accent: #C8102E; --accent-hover: #A70D26; --accent-ink: #FFFFFF; --accent-text: #A70D26; --tint: #F7E3DF; --line: #E0D0AE; --line-strong: #C9B48A; --display: "Playfair Display", Georgia, serif; --body: "Figtree", system-ui, sans-serif; --radius: 10px; }
.t-base h1, .t-base h2, .t-base h3 { font-family: var(--display); color: var(--ink); }
.bb-hero { padding: clamp(40px, 7vw, 90px) 0; background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .6), transparent 50%), var(--bg); }
.bb-hero-in { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(28px, 6vw, 70px); align-items: center; }
.bb-card { background: #FFFBF2; padding: 14px; border-radius: 14px; box-shadow: 0 0 0 6px #fff, 0 0 0 8px #1D3557, 0 30px 50px -24px rgba(29, 53, 87, .6); transform: rotate(-3deg); }
.bb-card-top { display: flex; justify-content: space-between; font: 800 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #C8102E; padding: 2px 4px 10px; }
.bb-photo { border: 4px solid #1D3557; border-radius: 6px; overflow: hidden; aspect-ratio: 1; }
.bb-photo svg { display: block; width: 100%; height: 100%; }
.bb-name { margin-top: -26px; position: relative; text-align: center; }
.bb-name h1 { display: inline-block; background: #C8102E; color: #fff; padding: 8px 20px 10px; font: italic 900 clamp(28px, 4vw, 36px)/1 var(--display); transform: skew(-6deg); box-shadow: 4px 4px 0 #1D3557; }
.bb-name p { margin-top: 10px; font: 800 13px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: #1D3557; }
.bb-pos { margin-top: 12px; display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: baseline; padding-top: 10px; border-top: 2px dashed #C9B48A; }
.bb-pos span { font: 800 11px/1 var(--body); letter-spacing: .14em; color: #8A7653; }
.bb-pos b { font: 700 18px/1 var(--display); color: #1D3557; }
.bb-pre { font: italic 400 22px/1.3 var(--display); color: var(--accent-text); }
.bb-big { font-size: clamp(48px, 8vw, 92px); line-height: .95; font-weight: 900; letter-spacing: -.02em; margin-top: 6px; }
.bb-when { margin-top: 16px; font-size: 18px; color: var(--ink); }
.bb-cta { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.t-base .btn { border-radius: 6px; }
.t-base .btn.line { color: var(--ink); border-color: var(--ink); }
.bb-count { --count-bg: #1D3557; --count-line: #1D3557; color: #F3E9D2; }
.bb-count div { border-radius: 6px !important; }
.bb-stats { padding-block: clamp(56px, 8vw, 96px); background: #1D3557; color: #F3E9D2; }
.bb-stats h2 { color: #F3E9D2; font-size: clamp(34px, 5vw, 52px); font-style: italic; }
.bb-note { color: #C9D3E3; margin-top: 4px; }
.bb-table { width: 100%; max-width: 680px; margin-top: 24px; border-collapse: collapse; font: 500 17px/1.4 var(--body); }
.bb-table th, .bb-table td { padding: 14px 12px; border-bottom: 1px solid rgba(243, 233, 210, .25); text-align: left; }
.bb-table thead th { font: 800 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #E9B44C; }
.bb-table tbody th { color: #fff; font-weight: 700; }
.bb-lineup { padding-block: clamp(56px, 8vw, 96px); }
.bb-lineup h2, .bb-rsvp h2 { font-size: clamp(34px, 5vw, 52px); font-style: italic; }
.bb-innings { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bb-innings li { background: var(--surface); border-radius: var(--radius); padding: 18px; border-top: 5px solid var(--accent); box-shadow: 0 0 0 1px var(--line); display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
.bb-innings b { font: 700 20px/1.2 var(--display); }
.bb-innings span { font: 700 15px/1.4 "IBM Plex Mono", monospace; color: var(--accent-text); }
.bb-innings p { grid-column: 1 / -1; color: var(--ink-2); }
.bb-map { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 16px 18px; border-radius: var(--radius); background: var(--surface-2); color: var(--ink); text-decoration: none; font-weight: 600; }
.bb-map b { color: var(--accent-text); }
.bb-rsvp { padding-block: clamp(56px, 8vw, 96px); text-align: center; background: var(--surface-2); }
.bb-sub { margin-top: 6px; color: var(--ink-2); }
.bb-rsvp .rsvp { margin-top: 24px; text-align: left; border-radius: 10px; }
.bb-foot { padding: 46px 20px 40px; text-align: center; background: #1D3557; color: #F3E9D2; }
.bb-foot .made { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: inherit; text-decoration: none; font-size: 14px; }
@media (max-width: 780px) { .bb-hero-in { grid-template-columns: minmax(0, 1fr); } .bb-card { max-width: 320px; margin: 0 auto; } .bb-copy { text-align: center; } .bb-cta { justify-content: center; } .bb-innings { grid-template-columns: minmax(0, 1fr); } }
.bb-count div { background: #1D3557 !important; border-color: #1D3557 !important; backdrop-filter: none !important; }
.bb-count b, .bb-count span { color: #F3E9D2 !important; }