/* Birthday Calendar pages: same linen stationery look as the studio. */
.cal-page { padding-bottom: 20px; }
.crumbs { font-size: .8rem; color: var(--muted); margin: 18px 0 20px; }
.crumbs a { color: var(--ink-2); }
.day-hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.day-card canvas, .daygrid canvas, .monthgrid canvas { display: block; width: 100%; height: auto; aspect-ratio: 4/5; border-radius: 4px; background: var(--paper-2); box-shadow: 0 2px 2px rgba(36,23,49,.1), 0 30px 60px -26px rgba(36,23,49,.55); opacity: .0; transition: opacity .4s; }
.day-card canvas.on, .daygrid canvas.on, .monthgrid canvas.on { opacity: 1; }
.day-card { max-width: 460px; transform: rotate(-1.5deg); }
.day-text h1, .month-head h1 { font: 400 clamp(2.2rem, 5vw, 3.6rem)/1.02 var(--display); margin: 8px 0 18px; letter-spacing: -.01em; }
.day-text h1 em, .month-head h1 em { font-style: italic; color: var(--ribbon); }
.day-text blockquote { margin: 0 0 22px; padding-left: 18px; border-left: 2px solid var(--foil); font: italic 400 1.25rem/1.45 var(--display); color: var(--ink-2); }
.cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.small { font-size: .85rem; color: var(--muted); max-width: 520px; }
.facts { margin: 56px 0 10px; }
.facts h2, .cal-page section > h2 { font: 400 1.8rem/1.15 var(--display); margin: 0 0 14px; }
.facts dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; }
.facts dl div { background: var(--paper); border: 1px solid var(--hair); border-radius: 14px; padding: 18px; }
.facts dt { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.facts dd { margin: 0; color: var(--ink-2); }
.daynav { display: flex; justify-content: space-between; margin: 34px 0; font: 400 1.1rem var(--display); }
.daynav a { color: var(--ink); }
.daylist { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.daylist a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--paper); border: 1px solid var(--hair); text-decoration: none; color: var(--ink-2); font-weight: 500; }
.daylist a[aria-current] { background: var(--ink); color: #fff; }
.month-head { max-width: 760px; margin-bottom: 20px; }
.month-head .lede { color: var(--ink-2); font-size: 1.05rem; }
.monthnav { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin: 10px 0 28px; }
.monthnav a { text-align: center; padding: 11px 0; border-radius: 10px; background: var(--paper); border: 1px solid var(--hair-2); text-decoration: none; color: var(--ink-2); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.monthnav a[aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }
.daygrid, .monthgrid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 26px 18px; }
.monthgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.daygrid a, .monthgrid a { display: block; text-decoration: none; color: var(--ink); }
.daygrid b, .monthgrid b { display: block; font: 400 1.05rem/1.2 var(--display); margin-top: 10px; }
.daygrid small, .monthgrid small { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 860px) { .day-hero { grid-template-columns: 1fr; gap: 24px; } .facts dl { grid-template-columns: 1fr; } .monthnav { grid-template-columns: repeat(6, 1fr); } }