:root {
--blue:#56bed4;
--pink:#f83c8b;
--green:#36c47c;
--yellow:#f7ed62;
--cream:#fffdf0;
--ink:#162825;
--purple:#473477;
--display:'Bangers',Impact,'Arial Narrow',sans-serif;
--body:'Space Grotesk',Arial,sans-serif;
--border:3px solid var(--ink)
}

* {
box-sizing:border-box
}
html {
scroll-behavior:smooth;
scroll-padding-top:30px
}
body {
margin:0;
font:400 16px/1.65 var(--body);
color:var(--ink);
background:var(--cream)
}
a {
color:inherit;
text-decoration:none
}
button {
font:inherit;
cursor:pointer
}
a,button,summary {
-webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible {
outline:3px dashed currentColor;
outline-offset:6px
}
h1,h2,h3,p {
margin:0
}
h1,h2,h3 {
font-family:var(--display);
font-weight:400
}
em {
font-style:normal
}
h2 {
font-size:70px;
line-height:1.02;
letter-spacing:1px
}
h3 {
font-size:32px;
line-height:1.1;
letter-spacing:.5px
}
.section-shell {
max-width:1240px;
margin:auto;
padding-left:48px;
padding-right:48px
}
.skip-link {
position:fixed;
top:-100px;
left:20px;
background:var(--yellow);
border:var(--border);
padding:12px 20px;
z-index:20
}
.skip-link:focus {
top:20px
}
.site-header {
border-bottom:var(--border);
padding:21px 5%;
background:var(--cream);
display:flex;
justify-content:space-between;
align-items:center;
gap:30px
}
.brand {
display:block;
font:36px/.9 var(--display);
letter-spacing:1px
}
.brand>span {
font-size:24px;
color:var(--pink);
margin-left:5px;
-webkit-text-stroke:1px var(--ink)
}
.brand small {
display:block;
font:700 10px/1.4 var(--body);
letter-spacing:1.6px;
margin-top:7px
}
.site-header nav {
display:flex;
align-items:center;
gap:31px;
font-size:13px;
font-weight:700
}
.site-header nav a {
padding:7px 0;
position:relative
}
.site-header nav a:after {
content:'';
position:absolute;
bottom:0;
left:0;
width:100%;
height:3px;
transform:scaleX(0);
transform-origin:left;
background:var(--pink);
transition:transform .2s
}
.site-header nav a:hover:after {
transform:scaleX(1)
}
.nav-ticket {
display:inline-flex;
gap:19px;
align-items:center;
font-size:12px;
font-weight:700;
border:2px solid var(--ink);
background:var(--yellow);
padding:10px 15px;
box-shadow:3px 3px 0 var(--ink);
transform:rotate(2deg);
white-space:nowrap
}
.nav-ticket>span {
font-size:23px;
line-height:1
}
.hero {
position:relative;
overflow:hidden;
background:var(--blue);
border-bottom:var(--border);
background-image:radial-gradient(#20889935 1px,transparent 1px);
background-size:13px 13px
}
.hero-inner {
display:grid;
grid-template-columns:1fr 1.05fr;
gap:15px;
align-items:center;
padding-top:64px;
padding-bottom:65px;
min-height:740px
}
.hero-copy {
position:relative;
z-index:2
}
.sticker {
display:inline-block;
font-size:12px;
font-weight:700;
letter-spacing:1px;
background:var(--yellow);
border:2px solid var(--ink);
box-shadow:3px 3px 0 var(--ink);
padding:8px 14px;
transform:rotate(-3deg)
}
.hero-kicker {
margin-bottom:25px
}
.hero h1 {
font-size:94px;
line-height:.94;
letter-spacing:2px;
transform:rotate(-3deg);
transform-origin:left center;
max-width:500px
}
.age-line {
display:block;
font-size:151px;
color:var(--cream);
-webkit-text-stroke:2px var(--ink);
paint-order:stroke fill;
text-shadow:6px 6px 0 var(--ink);
line-height:.95;
margin-bottom:10px
}
.title-line {
display:block
}
.pink-line {
color:var(--pink);
-webkit-text-stroke:2px var(--ink);
paint-order:stroke fill;
text-shadow:4px 4px 0 var(--ink)
}
.hero-description {
font-size:15px;
line-height:1.8;
margin:30px 0 16px;
max-width:395px
}
.hero-description strong {
font-weight:700
}
.hero-date {
font-size:15px;
font-weight:700;
letter-spacing:.5px;
margin-bottom:22px
}
.button {
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:22px;
background:var(--pink);
border:var(--border);
box-shadow:5px 5px 0 var(--ink);
padding:15px 19px;
font-size:12px;
font-weight:700;
transition:transform .2s,box-shadow .2s
}
.button span {
font-size:24px;
line-height:1
}
.button:hover {
transform:translate(-2px,-2px);
box-shadow:7px 7px 0 var(--ink)
}
.hero-footnote {
font-size:11px;
margin-top:19px;
font-weight:500
}
.hero-art {
position:relative;
isolation:isolate;
min-width:0;
align-self:center;
margin:-30px -28px 0 -8px;
padding-top:20px
}
.art-halo {
position:absolute;
width:90%;
aspect-ratio:1;
top:15%;
left:5%;
background:var(--yellow);
border:var(--border);
border-radius:50%;
z-index:-1;
box-shadow:12px 12px 0 #21878a30
}
.denver-art {
width:100%;
height:auto;
aspect-ratio:1;
object-fit:contain;
display:block;
position:relative;
filter:drop-shadow(5px 8px 0 #16282518);
animation:hero-bob 5s ease-in-out infinite
}
.art-star {
position:absolute;
font-family:var(--display);
color:var(--cream);
-webkit-text-stroke:2px var(--ink);
paint-order:stroke fill;
text-shadow:3px 3px 0 var(--ink);
z-index:2;
line-height:1
}
.star-one {
font-size:81px;
top:9%;
left:5%;
transform:rotate(-15deg)
}
.star-two {
font-size:58px;
right:0;
bottom:19%;
transform:rotate(10deg)
}
.birthday-badge {
position:absolute;
right:-5px;
top:7px;
width:119px;
height:119px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
background:var(--pink);
color:var(--ink);
border:var(--border);
box-shadow:4px 4px 0 var(--ink);
border-radius:50%;
transform:rotate(12deg);
z-index:3
}
.birthday-badge>span {
font-size:9px;
font-weight:700;
line-height:1.5
}
.birthday-badge>strong {
font:56px/.95 var(--display)
}
.art-caption {
font:29px/1.1 var(--display);
text-align:center;
letter-spacing:1px;
transform:rotate(-4deg);
margin:-4px 0 0;
position:relative;
z-index:2
}
.art-caption span {
display:block;
font:500 12px/1.6 var(--body);
letter-spacing:0;
margin-top:4px
}
.hero-bottom {
position:relative;
max-width:1144px;
margin:0 auto 17px;
display:flex;
align-items:center;
justify-content:space-between;
gap:25px;
font-size:10px;
font-weight:700;
letter-spacing:1px;
border-top:1px solid #16282555;
padding-top:18px
}
.hero-bottom>span:last-child>span {
font-size:20px;
padding-left:12px
}
.ribbon-clip {
overflow:hidden;
background:var(--yellow)
}
.celebration-ribbon {
border-bottom:var(--border);
position:relative;
padding:17px 0
}
.ribbon-track {
display:flex;
align-items:center;
gap:35px;
width:max-content;
animation:marquee 32s linear infinite;
font:27px/1.2 var(--display);
letter-spacing:1.5px;
padding-right:35px;
white-space:nowrap
}
.ribbon-track>span:nth-child(even) {
color:var(--pink);
font-size:23px;
-webkit-text-stroke:1px var(--ink)
}
.motion-toggle {
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
width:36px;
height:36px;
background:var(--cream);
border:2px solid var(--ink);
border-radius:50%;
font-weight:700;
line-height:1;
box-shadow:2px 2px 0 var(--ink)
}
.countdown-section {
background:var(--purple);
color:var(--cream);
border-bottom:var(--border)
}
.countdown-inner {
display:flex;
justify-content:space-between;
align-items:center;
padding-top:49px;
padding-bottom:48px;
gap:45px
}
.eyebrow {
font:700 12px/1.5 var(--body);
letter-spacing:1px;
margin-bottom:21px
}
.countdown-section .eyebrow {
color:#d7c6ff;
margin-bottom:12px
}
.countdown-section h2 {
font-size:40px
}
.countdown-section h2 em {
color:var(--yellow)
}
.countdown {
display:flex;
gap:12px
}
.countdown>div {
display:flex;
align-items:center;
flex-direction:column
}
.countdown>div>span:first-child {
background:var(--yellow);
color:var(--ink);
border:var(--border);
box-shadow:4px 4px 0 var(--ink);
font:62px/1 var(--display);
min-width:78px;
text-align:center;
padding:11px 7px 9px;
font-variant-numeric:tabular-nums;
letter-spacing:3px
}
.countdown>div>span:last-child {
font-size:10px;
font-weight:700;
letter-spacing:1px;
margin-top:12px
}
.countdown-caption {
font-size:11px;
color:#ddcdfa;
text-align:center;
margin-top:14px
}
.weekend-section {
padding:81px 0 64px;
border-bottom:var(--border)
}
.section-heading {
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:40px;
margin-bottom:30px
}
.section-heading .eyebrow {
margin-bottom:23px
}
.section-heading h2 em {
color:var(--pink);
-webkit-text-stroke:1.5px var(--ink);
paint-order:stroke fill;
text-shadow:3px 3px 0 var(--ink)
}
.section-heading>p {
font-size:16px;
line-height:1.8;
max-width:340px
}
.mini-dot {
display:inline-block;
width:10px;
height:10px;
background:var(--pink);
border:1px solid var(--ink);
margin-right:7px;
transform:rotate(45deg)
}
.provisional-note {
font-size:12px;
margin:0 0 23px;
max-width:max-content;
border-bottom:2px solid var(--blue);
padding-bottom:5px
}
.program-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px
}
.program-card {
padding:23px 25px 21px;
border:var(--border);
box-shadow:6px 6px 0 var(--ink);
display:flex;
flex-direction:column;
transition:transform .25s,box-shadow .25s
}
.program-card:hover {
transform:translateY(-5px);
box-shadow:6px 11px 0 var(--ink)
}
.yellow-card {
background:var(--yellow);
transform:rotate(-1deg)
}
.pink-card {
background:#f78db7;
transform:rotate(1deg)
}
.green-card {
background:#66d79b;
transform:rotate(-1deg)
}
.program-card-top {
display:flex;
justify-content:space-between;
font-size:10px;
font-weight:700;
letter-spacing:1px;
border-bottom:2px solid var(--ink);
padding-bottom:14px;
gap:10px
}
.program-date {
display:flex;
align-items:center;
gap:17px;
margin:22px 0 24px
}
.program-date strong {
font:88px/.9 var(--display);
letter-spacing:2px
}
.program-date>div {
font:27px/1.2 var(--display);
letter-spacing:.7px
}
.program-date>div>span {
display:block;
font:700 9px/1.5 var(--body);
letter-spacing:.5px;
margin-top:3px
}
.program-card h3 {
font-size:30px;
margin-bottom:16px
}
.program-card>p {
font-size:16px;
line-height:1.75;
flex:1
}
.program-footer {
border-top:2px solid var(--ink);
padding-top:15px;
margin-top:25px;
font-size:10px;
font-weight:700;
line-height:1.6
}
.calendar-row {
display:flex;
justify-content:space-between;
align-items:center;
gap:30px;
margin-top:38px
}
.calendar-row p {
font-size:12px
}
.text-link {
font-size:12px;
font-weight:700;
display:inline-flex;
align-items:center;
gap:17px;
border-bottom:2px solid var(--ink);
padding-bottom:5px
}
.text-link span {
font-size:21px
}
.text-link:hover {
color:#c41561;
border-color:#c41561
}
.personal-note {
background:var(--blue);
border-bottom:var(--border);
padding:78px 0 73px;
text-align:center;
background-image:radial-gradient(#21879933 1px,transparent 1px);
background-size:12px 12px
}
.personal-note .sticker {
background:var(--cream);
margin-bottom:37px;
transform:rotate(2deg)
}
.personal-note h2 {
font-size:67px;
line-height:1.07;
letter-spacing:1px
}
.personal-note h2 em {
color:var(--yellow);
-webkit-text-stroke:2px var(--ink);
paint-order:stroke fill;
text-shadow:4px 4px 0 var(--ink)
}
.personal-note p:not(.sticker) {
font-size:16px;
line-height:1.9;
margin:27px auto 0;
max-width:650px
}
.personal-note p.note-highlight {
font-weight:700;
margin-top:18px
}
.signature {
font:36px/1 var(--display);
letter-spacing:1px;
display:block;
transform:rotate(-5deg);
margin-top:23px
}
.signature>span {
color:var(--pink);
-webkit-text-stroke:1px var(--ink);
font-size:25px;
margin-left:10px
}
.tribe-section {
background:var(--ink);
color:var(--cream);
padding:86px 0 67px;
border-bottom:var(--border)
}
.tribe-top {
display:grid;
grid-template-columns:1fr 1fr;
gap:90px
}
.tribe-heading .eyebrow {
color:var(--green)
}
.tribe-heading h2 {
font-size:63px
}
.tribe-heading h2 em {
color:var(--yellow)
}
.tribe-heading>p:not(.eyebrow) {
font-size:16px;
color:#d6e1dc;
line-height:1.8;
margin-top:25px
}
.tribe-count {
display:flex;
align-items:center;
gap:23px;
margin-top:31px
}
.tribe-count strong {
font:83px/1 var(--display);
color:var(--pink);
letter-spacing:2px
}
.tribe-count span {
font-size:13px;
line-height:1.8;
color:#d6e1dc
}
.family-list {
border-top:2px solid #537066;
margin-top:3px
}
.family-item {
border-bottom:2px solid #537066;
padding:23px 0 24px
}
.family-item>p {
font-size:10px;
font-weight:500;
letter-spacing:.6px;
color:#a1c0b1;
margin-bottom:12px
}
.family-item h3 {
font-size:33px;
letter-spacing:1px;
color:var(--green)
}
.family-item:nth-child(2) h3 {
color:var(--yellow)
}
.family-item:nth-child(3) h3 {
color:var(--blue)
}
.family-item:nth-child(4) h3 {
color:#ff82b6
}
.family-item h3>span:not(.family-heart) {
font-size:23px;
white-space:nowrap
}
.family-heart {
margin-left:20px;
color:var(--cream);
font-family:var(--body);
font-size:31px
}
.guestbook {
margin-top:54px;
border:var(--border);
background:var(--yellow);
box-shadow:6px 6px 0 #597267;
color:var(--ink)
}
.guestbook summary {
list-style:none;
padding:24px 26px;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
gap:20px
}
.guestbook summary::-webkit-details-marker {
display:none
}
.guestbook-title {
font:31px/1.2 var(--display);
letter-spacing:.8px;
display:flex;
align-items:center;
gap:22px
}
.guest-count {
font:700 10px/1 var(--body);
border:2px solid var(--ink);
padding:8px 10px;
background:var(--cream);
white-space:nowrap
}
.guestbook-toggle {
font-size:35px;
line-height:1;
transition:transform .25s
}
.guestbook[open] .guestbook-toggle {
transform:rotate(45deg)
}
.guestbook-content {
padding:0 26px 26px
}
.guestbook-content>p {
font-size:14px;
margin-bottom:22px
}
.guest-grid {
list-style:none;
padding:0;
margin:0;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0 28px
}
.guest-grid>li {
font-size:14px;
padding:11px 0;
border-top:1px solid #908a4055
}
.info-section {
padding:80px 0 83px;
border-bottom:var(--border)
}
.info-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:37px;
margin-top:44px
}
.info-grid>div {
border-top:4px solid var(--ink);
padding-top:21px
}
.info-grid>div:nth-child(1) {
border-color:var(--pink)
}
.info-grid>div:nth-child(2) {
border-color:var(--blue)
}
.info-grid>div:nth-child(3) {
border-color:var(--green)
}
.info-number {
font-size:12px;
font-weight:700;
letter-spacing:.7px
}
.info-grid h3 {
font-size:29px;
margin:17px 0 16px
}
.info-grid p {
font-size:16px;
line-height:1.8
}
.closing {
background:var(--pink);
border-bottom:var(--border);
padding:75px 0 67px;
position:relative;
overflow:hidden;
text-align:center
}
.closing-inner {
position:relative;
z-index:1
}
.closing .sticker {
margin-bottom:35px;
transform:rotate(-2deg)
}
.closing h2 {
font-size:87px;
line-height:1.02;
transform:rotate(-3deg);
letter-spacing:1px
}
.closing h2 em {
color:var(--cream);
-webkit-text-stroke:2px var(--ink);
paint-order:stroke fill;
text-shadow:5px 5px 0 var(--ink)
}
.closing p:not(.sticker) {
font-size:16px;
margin:31px auto 7px
}
.closing-signature {
font-size:12px;
font-weight:700;
letter-spacing:.5px
}
.back-top {
display:table;
font-size:12px;
font-weight:700;
margin:32px auto 0;
border-bottom:2px solid var(--ink);
padding-bottom:3px
}
.back-top>span {
font-size:20px;
margin-left:12px
}
.closing-star {
position:absolute;
left:-50px;
bottom:-60px;
font-size:390px;
line-height:1;
color:#db126c;
transform:rotate(12deg);
pointer-events:none
}
footer {
background:var(--ink);
color:var(--cream);
padding:27px 5%;
display:flex;
justify-content:space-between;
align-items:center;
gap:25px
}
.footer-brand {
font:28px/1.2 var(--display);
letter-spacing:1px
}
.footer-brand span {
color:var(--pink);
font-size:19px;
margin:0 4px
}
footer>span {
font-size:10px;
letter-spacing:.5px
}
.motion-paused * {
animation-play-state:paused!important
}
.js-motion .reveal {
opacity:0;
translate:0 20px;
transition:opacity .7s,translate .7s
}
.js-motion .reveal.is-visible {
opacity:1;
translate:0 0
}
@keyframes marquee {
to {
transform:translateX(-50%)
}

}
@keyframes hero-bob {
0%,100% {
transform:translateY(0) rotate(-1deg)
}
50% {
transform:translateY(-10px) rotate(1deg)
}

}

@media(min-width:1440px) {
.hero-inner {
min-height:790px
}
.hero-art {
margin-right:-45px
}
.hero h1 {
font-size:105px
}
.age-line {
font-size:167px
}

}

@media(max-width:1100px) {
.site-header {
gap:25px
}
.site-header nav {
gap:21px
}
.hero-inner {
gap:0;
min-height:720px;
padding-top:49px;
padding-bottom:52px
}
.hero h1 {
font-size:82px
}
.age-line {
font-size:136px
}
.hero-art {
margin-right:-20px;
margin-left:-15px
}
.birthday-badge {
width:103px;
height:103px;
right:0;
top:7px
}
.birthday-badge strong {
font-size:47px
}
.birthday-badge span {
font-size:8px
}
.hero-bottom {
margin-left:48px;
margin-right:48px;
font-size:9px;
letter-spacing:.3px
}
.countdown-inner {
gap:30px
}
.countdown-section h2 {
font-size:34px
}
.countdown {
gap:10px
}
.countdown>div>span:first-child {
min-width:67px;
font-size:55px
}
.program-grid {
gap:20px
}
.program-card {
padding:20px 19px
}
.program-date {
gap:13px
}
.program-date strong {
font-size:74px
}
.program-date>div {
font-size:24px
}
.program-card h3 {
font-size:27px
}
.tribe-top {
gap:55px
}
.tribe-heading h2 {
font-size:55px
}
.family-item h3 {
font-size:29px
}
.family-item h3>span:not(.family-heart) {
font-size:20px
}
.info-grid {
gap:29px
}
.info-grid h3 {
font-size:27px
}

}

@media(max-width:850px) {
.nav-ticket {
font-size:10px;
padding:9px 11px;
gap:10px
}
.site-header nav {
font-size:12px;
gap:18px
}
.brand {
font-size:31px
}
.hero h1 {
font-size:73px
}
.age-line {
font-size:119px
}
.hero-kicker {
font-size:10px;
padding:7px 10px
}
.hero-description {
font-size:14px;
max-width:320px
}
.hero-date {
font-size:14px
}
.button {
font-size:11px;
padding:13px 15px;
gap:18px
}
.hero-footnote {
font-size:10px
}
.hero-art {
margin-right:-24px;
margin-left:-18px
}
.art-caption {
font-size:23px
}
.art-caption span {
font-size:11px
}
.star-one {
font-size:57px;
top:8%
}
.star-two {
font-size:45px;
bottom:20%
}
.birthday-badge {
height:87px;
width:87px;
top:6%;
right:3px
}
.birthday-badge strong {
font-size:39px
}
.birthday-badge span {
font-size:7px
}
.hero-bottom {
font-size:8px
}
.countdown-inner {
flex-direction:column;
align-items:flex-start;
gap:30px
}
.countdown-section h2 {
font-size:43px
}
.countdown-wrap {
align-self:flex-end
}
.countdown>div>span:first-child {
min-width:83px;
font-size:62px
}
h2 {
font-size:63px
}
.program-card {
padding:20px 16px
}
.program-card-top {
font-size:9px;
letter-spacing:.5px
}
.program-date {
gap:10px
}
.program-date strong {
font-size:65px
}
.program-date>div {
font-size:22px
}
.program-date>div>span {
font-size:8px
}
.program-card h3 {
font-size:26px
}
.program-card>p {
font-size:15px
}
.program-footer {
font-size:9px
}
.calendar-row {
align-items:flex-start
}
.text-link {
font-size:11px
}
.calendar-row p {
font-size:11px
}
.personal-note h2 {
font-size:60px
}
.tribe-top {
gap:40px
}
.tribe-heading h2 {
font-size:47px
}
.tribe-heading>p:not(.eyebrow) {
font-size:15px
}
.family-item h3 {
font-size:27px
}
.family-item>p {
font-size:9px
}
.guestbook-title {
font-size:27px
}
.guest-count {
font-size:9px
}
.guest-grid {
grid-template-columns:repeat(3,1fr)
}
.closing h2 {
font-size:74px
}
.info-grid {
gap:25px
}
.info-grid h3 {
font-size:25px
}
footer>span {
font-size:8px
}

}

@media(max-width:650px) {
.section-shell {
padding-left:24px;
padding-right:24px
}
.site-header {
padding:19px 24px 15px;
flex-wrap:wrap;
gap:20px 15px
}
.brand {
font-size:33px
}
.brand small {
font-size:9px
}
.nav-ticket {
font-size:10px;
padding:8px 10px;
gap:10px
}
.site-header nav {
order:3;
justify-content:space-between;
width:100%;
gap:12px;
font-size:12px;
border-top:1px solid #16282530;
padding-top:10px
}
.hero-inner {
grid-template-columns:1fr;
padding-top:41px;
padding-bottom:25px;
min-height:0
}
.hero h1 {
font-size:82px;
max-width:100%;
line-height:.96
}
.age-line {
font-size:139px;
margin-bottom:8px;
letter-spacing:2px
}
.hero-kicker {
font-size:10px;
letter-spacing:.5px;
margin-bottom:23px
}
.hero-description {
font-size:16px;
max-width:100%;
margin-top:25px;
line-height:1.7
}
.hero-description br {
display:none
}
.hero-description strong {
display:block;
margin-top:3px
}
.hero-date {
font-size:15px;
margin-top:21px;
margin-bottom:18px;
letter-spacing:.6px
}
.button {
font-size:12px;
gap:20px;
padding:14px 15px
}
.hero-footnote {
font-size:11px
}
.hero-art {
margin:30px -10px 0;
padding-top:10px;
max-width:520px;
justify-self:center;
width:calc(100% + 20px)
}
.art-halo {
top:10%;
width:83%;
left:8%
}
.denver-art {
width:100%
}
.birthday-badge {
right:7px;
top:3%;
width:96px;
height:96px
}
.birthday-badge strong {
font-size:44px
}
.birthday-badge span {
font-size:8px
}
.star-one {
font-size:62px;
top:10%;
left:2%
}
.star-two {
font-size:44px;
right:3%;
bottom:18%
}
.art-caption {
font-size:28px;
margin-top:0
}
.art-caption span {
font-size:12px
}
.hero-bottom {
margin:5px 24px 15px;
padding-top:15px;
font-size:9px;
justify-content:center
}
.hero-bottom>span:last-child {
display:none
}
.ribbon-track {
font-size:23px;
gap:25px;
padding-right:25px
}
.celebration-ribbon {
padding:15px 0
}
.countdown-inner {
padding-top:37px;
padding-bottom:37px;
gap:25px
}
.eyebrow {
font-size:11px;
letter-spacing:.6px
}
.countdown-section h2 {
font-size:35px;
letter-spacing:.8px
}
.countdown-wrap {
align-self:stretch
}
.countdown {
justify-content:space-between;
gap:9px
}
.countdown>div {
flex:1;
min-width:0
}
.countdown>div>span:first-child {
min-width:0;
width:100%;
font-size:50px;
letter-spacing:1px;
padding:10px 5px 8px;
box-shadow:3px 3px 0 var(--ink)
}
.countdown>div>span:last-child {
font-size:9px;
letter-spacing:.6px;
margin-top:11px
}
.countdown-caption {
font-size:11px
}
.weekend-section {
padding:50px 0 43px
}
.section-heading {
flex-direction:column;
align-items:flex-start;
gap:23px;
margin-bottom:25px
}
.section-heading>p {
font-size:16px;
line-height:1.7
}
.section-heading>p br {
display:none
}
.section-heading .eyebrow {
margin-bottom:19px
}
h2 {
font-size:60px
}
.provisional-note {
font-size:12px;
line-height:1.7;
margin-bottom:27px
}
.program-grid {
grid-template-columns:1fr;
gap:30px;
padding-right:5px
}
.program-card {
padding:22px 23px
}
.program-card-top {
font-size:11px;
letter-spacing:.6px
}
.program-date {
gap:22px;
margin:22px 0
}
.program-date strong {
font-size:88px
}
.program-date>div {
font-size:31px
}
.program-date>div>span {
font-size:10px
}
.program-card h3 {
font-size:33px
}
.program-card>p {
font-size:16px
}
.program-footer {
font-size:10px;
margin-top:23px
}
.calendar-row {
flex-direction:column;
gap:13px;
margin-top:31px
}
.calendar-row p {
font-size:12px
}
.text-link {
font-size:11px;
gap:8px
}
.personal-note {
padding:52px 0 49px
}
.personal-note .sticker {
font-size:10px;
letter-spacing:.3px;
margin-bottom:30px;
padding:7px 10px
}
.personal-note h2 {
font-size:42px;
line-height:1.08;
letter-spacing:.6px
}
.personal-note p:not(.sticker) {
font-size:15px;
line-height:1.8
}
.personal-note p:not(.sticker) br {
display:none
}
.signature {
font-size:34px
}
.tribe-section {
padding:54px 0 44px
}
.tribe-top {
grid-template-columns:1fr;
gap:35px
}
.tribe-heading h2 {
font-size:52px
}
.tribe-heading>p:not(.eyebrow) {
font-size:16px
}
.tribe-count {
gap:20px;
margin-top:22px
}
.tribe-count strong {
font-size:77px
}
.tribe-count span {
font-size:12px
}
.family-item {
padding:22px 0
}
.family-item>p {
font-size:10px;
margin-bottom:11px
}
.family-item h3 {
font-size:30px
}
.family-item h3>span:not(.family-heart) {
font-size:22px
}
.guestbook {
margin-top:32px;
box-shadow:4px 4px 0 #597267
}
.guestbook summary {
padding:21px 19px;
gap:12px
}
.guestbook-title {
display:block;
font-size:26px;
line-height:1.2;
letter-spacing:.4px
}
.guest-count {
display:table;
font-size:9px;
margin-top:12px;
padding:7px 9px
}
.guestbook-content {
padding:0 19px 20px
}
.guestbook-content>p {
font-size:13px
}
.guest-grid {
grid-template-columns:repeat(2,1fr);
gap:0 16px
}
.guest-grid>li {
font-size:13px
}
.info-section {
padding:52px 0 52px
}
.info-grid {
grid-template-columns:1fr;
gap:30px;
margin-top:35px
}
.info-grid h3 {
font-size:31px;
margin-top:14px
}
.info-grid p {
font-size:16px
}
.info-number {
font-size:11px
}
.closing {
padding:52px 0 43px
}
.closing .sticker {
font-size:11px;
padding:8px 10px;
margin-bottom:29px
}
.closing h2 {
font-size:52px;
line-height:1.08;
letter-spacing:.7px
}
.closing h2 em {
white-space:nowrap
}
.closing p:not(.sticker) {
font-size:15px;
line-height:1.7;
margin-top:26px
}
.closing-signature {
font-size:10px;
line-height:1.8;
display:block
}
.back-top {
font-size:11px;
margin-top:27px
}
.closing-star {
font-size:280px;
left:-67px;
bottom:-54px
}
footer {
padding:27px 23px;
flex-direction:column;
gap:14px
}
footer>span {
font-size:10px
}
.footer-brand {
font-size:28px
}

}

@media(max-width:370px) {
.section-shell {
padding-left:21px;
padding-right:21px
}
.site-header {
padding-left:21px;
padding-right:21px
}
.hero h1 {
font-size:71px
}
.age-line {
font-size:120px
}
.hero-kicker {
font-size:9px;
padding:7px 9px
}
.hero-description {
font-size:15px
}
.hero-date {
font-size:13px
}
.button {
font-size:10px;
padding:13px 12px;
gap:15px
}
.hero-footnote {
font-size:10px
}
.birthday-badge {
width:86px;
height:86px
}
.birthday-badge strong {
font-size:38px
}
.birthday-badge span {
font-size:7px
}
.countdown-section h2 {
font-size:31px
}
.countdown>div>span:first-child {
font-size:44px
}
.countdown>div>span:last-child {
font-size:8px
}
h2 {
font-size:53px
}
.personal-note h2 {
font-size:36px
}
.tribe-heading h2 {
font-size:46px
}
.family-item h3 {
font-size:27px
}
.family-item h3>span:not(.family-heart) {
font-size:20px
}
.text-link {
font-size:9px
}
.closing h2 {
font-size:45px
}
.guest-grid>li {
font-size:12px
}

}

@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto
}
*,*:before,*:after {
animation:none!important;
transition:none!important
}
.js-motion .reveal {
opacity:1;
translate:none
}

}

/* Final display details shared across layouts. */
.hero-description, .program-card>p { font-size: 1rem; }
#weekend-title, #info-title {
  white-space: nowrap;
  font-size: clamp(2rem, 7.5vw, 4.375rem);
  letter-spacing: .02em;
}
.hero-art { container-type: inline-size; }
.hero-illustration { position: relative; animation: hero-bob 5s ease-in-out infinite; }
.denver-art { animation: none; }
.art-caption {
  position: absolute;
  top: 83.5%;
  left: 0;
  right: 0;
  z-index: 4;
  margin: 0;
  font-size: clamp(34px, 10.3cqw, 64px);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--pink);
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-6deg);
}
.art-caption span {
  margin-top: 9px;
  font-size: 14px;
  color: var(--ink);
  -webkit-text-stroke: 0;
  text-shadow: none;
}

/* A compact, centered concert poster on phones. */
@media(max-width:650px) {
  .site-header { padding: 15px 22px 12px; gap: 12px 15px; }
  .site-header nav { padding-top: 7px; }
  .brand { font-size: 30px; }
  .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 25px 24px 28px;
  }
  .hero-copy { display: contents; }
  .hero-kicker {
    order: 0;
    align-self: center;
    margin: 0 0 17px;
    padding: 7px 10px;
    font-size: 10px;
    letter-spacing: .45px;
    transform: rotate(-2deg);
  }
  .hero-art {
    order: 1;
    width: 100%;
    max-width: 320px;
    padding-top: 0;
    margin: 0 auto 28px;
  }
  .art-halo { width: 84%; left: 8%; top: 10%; }
  .art-caption { font-size: 10.3cqw; margin: 0; }
  .art-caption span {
    position: absolute;
    left: 50%;
    top: 18cqw;
    width: max-content;
    margin: 0;
    font-size: 14px;
    transform: translateX(-50%) rotate(6deg);
  }
  .birthday-badge { width: 77px; height: 77px; top: 4%; right: 0; box-shadow: 3px 3px 0 var(--ink); }
  .birthday-badge strong { font-size: 35px; }
  .birthday-badge span { font-size: 7px; }
  .star-one { font-size: 47px; top: 12%; left: 1%; }
  .star-two { font-size: 34px; right: 0; bottom: 18%; }
  .hero h1 {
    order: 2;
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 9px;
    width: 100%;
    margin: 6px 0 0;
    font-size: clamp(27px, 8.5vw, 38px);
    line-height: 1;
    letter-spacing: .6px;
    text-align: center;
    transform: none;
  }
  .age-line {
    flex-basis: 100%;
    margin-bottom: 9px;
    font-size: clamp(68px, 20vw, 92px);
    line-height: .96;
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow: 4px 4px 0 var(--ink);
  }
  .title-line { display: inline; white-space: nowrap; }
  .pink-line { -webkit-text-stroke: 1.4px var(--ink); text-shadow: 2px 2px 0 var(--ink); }
  .hero-date {
    order: 3;
    margin: 21px 0 15px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .55px;
    text-align: center;
  }
  .hero-copy>.button {
    order: 4;
    align-self: center;
    width: min(100%, 342px);
    padding: 13px 16px;
    font-size: 12px;
    gap: 10px;
    text-align: left;
  }
  .hero-description {
    order: 5;
    max-width: 34ch;
    margin: 24px auto 0;
    font-size: 15px;
    line-height: 1.65;
    text-align: center;
  }
  .hero-description strong { margin-top: 5px; }
  .hero-footnote { display: none; }
  .hero-bottom { margin: 0 24px 14px; padding-top: 12px; font-size: 9px; letter-spacing: .3px; }
}
@media(max-width:370px) {
  .hero-inner { padding-left: 20px; padding-right: 20px; }
  .hero-kicker { font-size: 9px; }
  .hero-art { max-width: 285px; }
  .hero-date { font-size: 12px; }
  .hero-copy>.button { font-size: 10px; }
  .hero-description { font-size: 14px; }
}

/* Place the birthday badge across the yellow halo and blue background. */
.birthday-badge {
  top: -5%;
  right: -4%;
  transform: rotate(12deg) scale(1.5);
  transform-origin: top right;
}