/* Rebuilt with live text, CSS shapes and SVG paths from the owner's reference. */
body:is([data-view="about"],[data-view="photos"],[data-view="videos"]) #content-view { background:#fffffc; padding:20px 18px; border-radius:34px; }
.about-board { --about-green:#086624; --about-pink:#ff0861; --about-lime:#80bd19; color:#343434; }
.about-board * { box-sizing:border-box; }
.about-board :is(p, .about-stat span, .about-section-heading a, .about-birthday a) {
  font-family:"Nunito", "Trebuchet MS", sans-serif;
  font-weight:600;
  font-synthesis:none;
}
.about-board p.about-kicker {
  font-family:var(--font-heading);
  font-weight:900;
}
.about-board .about-icon { width:28px; height:28px; flex-shrink:0; }
.about-hero { display:grid; grid-template-columns:34% 46% 20%; align-items:stretch; gap:0; }
.about-lead { position:relative; padding:3px 12px 18px 8px; z-index:2; }
.about-kicker { margin:0 0 12px; color:#477515; font:900 14px var(--font-heading); text-transform:uppercase; }
.about-board .about-lead h1 { color:var(--about-green); font-size:clamp(32px,3.25vw,56px); line-height:1.02; letter-spacing:.2px; margin:0 0 22px; overflow:visible; }
.about-lead h1 span { display:block; width:max-content; max-width:132%; position:relative; text-shadow:3px 0 white,-3px 0 white,0 3px white,0 -3px white; }
.about-introduction { font-family:inherit; font-size:clamp(13px,1vw,16px); line-height:1.6; margin:0; }
.about-burst { width:48px; height:48px; color:#ffbf06; }
.about-title-burst { position:absolute; right:12px; top:30px; transform:rotate(-12deg); }
.about-visual { position:relative; min-height:290px; margin-right:8px; overflow:hidden; border-radius:34px 40px 54px 30px; }
.about-visual>img { display:block; width:100%; max-width:none; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center; }
.about-photo-note { position:absolute; left:22px; top:25px; width:160px; color:white; font:900 27px/1.08 var(--font-heading); text-align:center; text-transform:uppercase; transform:rotate(-17deg); text-shadow:0 2px 8px #48224f; }
.about-photo-burst { position:absolute; left:-32px; bottom:-6px; color:#88bf32; transform:rotate(160deg); }
.about-audiences { display:flex; flex-direction:column; justify-content:space-between; gap:8px; padding:0 0 0 7px; }
.about-audience { position:relative; color:white; padding:17px 12px 12px 20px; border-radius:27px 31px 30px 32px; transform:rotate(-6deg); border:5px solid white; min-height:100px; }
.about-audience h2 { font-size:clamp(17px,1.5vw,24px); line-height:1; margin:0 35px 7px 0; color:white; max-width:140px; }
.about-audience p { margin:0; font-size:clamp(11px,.92vw,15px); line-height:1.25; max-width:170px; }
.about-audience .about-icon { position:absolute; right:12px; top:13px; width:43px; height:43px; }
.audience-0 { background:linear-gradient(125deg,#ff1168,#ff487d); }
.audience-1 { background:linear-gradient(125deg,#0064ef,#129dff); }
.audience-2 { background:linear-gradient(125deg,#ffbf00,#ffa600); }
.about-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:22px 0 19px; }
.about-stat { display:flex; align-items:center; justify-content:center; gap:20px; background:linear-gradient(120deg,#f5f9eb,#f0f7df); border-radius:26px; padding:15px 8px; min-width:0; }
.about-stat .about-icon { width:52px; height:52px; color:var(--about-pink); fill:currentColor; stroke-width:0; }
.stat-1 .about-icon { color:#80be18; fill:none; stroke-width:2.8; }
.stat-2 .about-icon { color:#ffbe00; }
.about-stat strong { display:block; color:var(--about-green); font:900 clamp(23px,2.3vw,37px)/1 var(--font-heading); text-transform:uppercase; }
.about-stat span { display:block; color:var(--about-green); font-size:clamp(11px,1vw,16px); margin-top:5px; }
.about-section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0 5px 12px; }
.about-section-heading h2 { margin:0; color:var(--about-green); font-size:clamp(22px,1.85vw,31px); line-height:1.15; display:flex; align-items:center; gap:8px; }
.about-section-heading a { display:flex; align-items:center; gap:8px; color:var(--about-green); font-size:14px; font-weight:800; min-height:44px; }
.about-section-heading .about-burst { width:38px; height:38px; }
.about-cards { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; padding:0 5px; }
.about-card { display:block; border:0; padding:0; background:white; border-radius:19px; overflow:hidden; box-shadow:0 4px 12px #94732616; color:#333; text-align:left; cursor:pointer; min-width:0; }
.about-card>img { display:block; width:100%; max-width:none; height:140px; object-fit:cover; object-position:center; }
.about-card-copy { position:relative; margin-top:-12px; min-height:87px; border-radius:45% 30% 0 0 / 15px 10px 0 0; padding:15px 34px 12px 13px; background:#fffefb; }
.about-card h3 { font-size:19px; color:var(--about-green); margin:0 0 5px; line-height:1; }
.about-card p { font-size:12px; margin:0; line-height:1.25; }
.about-card-arrow { display:flex; align-items:center; justify-content:center; position:absolute; right:7px; top:30px; width:30px; height:30px; border-radius:50%; background:var(--card-color,#80bd19); color:white; }
.about-card-arrow .about-icon { width:21px; height:21px; }
.card-gold { --card-color:#ffba00; }.card-pink { --card-color:#ff0961; }.card-violet { --card-color:#8428e9; }.card-blue { --card-color:#2698fa; }
.card-violet h3 { color:#520ab0; }.card-blue h3 { color:#0061ba; }
.about-card { transition:transform .25s ease,box-shadow .25s ease; }
.about-card > img { transition:transform .35s ease; }
.about-card-arrow > svg { transition:transform .25s ease; }
.about-card:focus-visible { outline:3px solid var(--about-green); outline-offset:4px; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .about-card:hover:not(:active) { transform:translateY(-4px); box-shadow:0 9px 20px #49752235; }
  .about-card:hover:not(:active) > img { transform:scale(1.045); }
  .about-card:hover:not(:active) .about-card-arrow > svg { transform:translateX(3px); }
}
@media (prefers-reduced-motion:reduce) {
  .about-card,.about-card > img,.about-card-arrow > svg { transition:none; }
}
.about-birthday { display:grid; grid-template-columns:75px 245px 1fr auto 80px; gap:12px; align-items:center; margin-top:14px; padding:10px 18px; min-height:82px; border-radius:23px; background:linear-gradient(100deg,#fff2a9,#fff0cb 55%,#ffe6eb); position:relative; overflow:hidden; }
.about-birthday .about-birthday-gift { width:64px; height:64px; color:#ff0961; fill:#ff76a0; stroke-width:1.4; transform:rotate(-12deg); filter:drop-shadow(3px 3px 0 white) drop-shadow(-3px -3px 0 white); }
.about-birthday h2 { font-size:23px; line-height:1.05; color:var(--about-green); margin:0; z-index:1; }
.about-birthday p { font-size:14px; line-height:1.5; margin:0; z-index:1; min-width:0; white-space:normal; }
.about-birthday a { display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 22px; min-height:48px; border:1px solid #f30d63; border-radius:30px; background:linear-gradient(115deg,#ec0058,#ff418e); color:white; font-size:13px; font-weight:900; text-transform:uppercase; z-index:1; box-shadow:inset 0 2px 2px #ffffff40,0 3px 6px #ec005838; transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; }
.about-birthday a > svg { transition:transform .2s ease; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .about-birthday a:hover:not(:active) { transform:translateY(-3px); filter:brightness(1.06); box-shadow:inset 0 2px 3px #ffffff60,0 7px 14px #ec005847; }
  .about-birthday a:hover:not(:active) > svg { transform:translateX(3px); }
}
.about-birthday a:active { transform:translateY(1px); box-shadow:inset 0 1px 2px #00000015,0 1px 3px #ec00582e; }
.about-birthday a:focus-visible { outline:3px solid #ec0058; outline-offset:4px; }
@media (prefers-reduced-motion:reduce) { .about-birthday a,.about-birthday a > svg { transition:none; } }
.about-confetti { position:absolute; right:100px; bottom:0; width:200px; height:90px; pointer-events:none; }
.about-birthday-mascot { position:absolute; right:-7px; bottom:-20px; width:108px; height:108px; object-fit:contain; }
.about-bottom-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.about-bottom-row .about-birthday { margin-top:0; grid-template-columns:48px minmax(0,1fr) 60px; gap:8px 12px; padding:14px 16px; }
.about-bottom-row .about-birthday-gift { width:46px; height:46px; }
.about-bottom-row .about-birthday h2 { font-size:22px; grid-column:2/4; padding-right:130px; }
.about-bottom-row .about-birthday p { grid-column:1/4; font-size:13px; padding-right:150px; }
.about-bottom-row .about-birthday a { grid-column:1/3; grid-row:auto; justify-self:start; padding:10px 18px; min-height:44px; }
.about-bottom-row .about-birthday-mascot { display:block; width:175px; height:175px; bottom:-12px; right:-6px; filter:drop-shadow(0 6px 5px #b5324030); }
.about-media-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:12px; background:linear-gradient(130deg,#eff6e5,#f5f7ee); border-radius:23px; }
.about-media-button { display:grid; grid-template-columns:1fr 42px; grid-template-rows:1fr auto; align-items:center; gap:15px 8px; padding:22px; border-radius:20px; color:white; min-height:164px; background:linear-gradient(135deg,#19a9ff,#0876ef 55%,#0056c5); position:relative; overflow:hidden; isolation:isolate; box-shadow:inset 0 1px 0 #ffffff65,inset 0 -3px 0 #003c7e28,0 5px 10px #0875d41a; transition:box-shadow .2s,filter .2s; }
.about-media-videos { background:linear-gradient(135deg,#b15cff,#9231f4 55%,#6a0ecb); }
.about-media-button::before { content:""; position:absolute; width:150px; height:150px; top:-65px; right:-48px; border:22px solid #ffffff0e; border-radius:50%; z-index:-1; }
.about-media-button::after { content:""; position:absolute; width:110px; height:110px; right:-42px; bottom:-66px; border:1px solid #ffffff30; border-radius:28px; transform:rotate(25deg); z-index:-1; }
.about-media-button>.about-icon:first-child { width:58px; height:58px; padding:12px; border-radius:17px; background:#ffffff20; border:1px solid #ffffff45; box-shadow:0 4px 10px #001b5520; grid-column:1/-1; }
.about-media-button span { font:900 30px/1.1 var(--font-heading); text-transform:uppercase; text-align:left; }
.about-media-button>.about-icon:last-child { width:40px; height:40px; padding:9px; background:#ffffff24; border:1px solid #ffffff45; border-radius:50%; justify-self:end; transition:background .2s; }
.about-media-button:hover { filter:brightness(1.06); box-shadow:inset 0 1px 0 #ffffff65,0 7px 16px #33476730; }
.about-media-button:hover>.about-icon:last-child { background:#ffffff40; }
@media (prefers-reduced-motion:reduce) { .about-media-button,.about-media-button>.about-icon:last-child { transition:none; } }
@media (max-width:700px) {
  .about-bottom-row { grid-template-columns:1fr; }
  .about-media-button { min-height:145px; padding:18px; }
  .about-bottom-row .about-birthday h2 { padding-right:70px; }
  .about-bottom-row .about-birthday p { padding-right:90px; }
  .about-bottom-row .about-birthday-mascot { width:125px; height:125px; }
}
@media (min-width:1101px), (min-width:1025px) and (min-height:551px) {
  body:is([data-view="about"],[data-view="photos"],[data-view="videos"]):not([data-view="home"]) { --panel-top:14.2vh; }
  body:is([data-view="about"],[data-view="photos"],[data-view="videos"]):not([data-view="home"]) #content-view { left:calc(var(--gutter) + var(--sidebar-width) + 32px); right:2vw; max-width:none; height:calc(100dvh - var(--panel-top) - 20px); max-height:calc(100dvh - var(--panel-top) - 20px); }
  body[data-view="about"] .about-hero { min-height:320px; }
  .about-audiences { display:grid; grid-template-rows:repeat(3,100px); gap:7px; }
  .about-lead { padding-bottom:0; }
  .about-kicker { margin-bottom:8px; }
  .about-audience h2 { font-size:22px; margin-right:28px; margin-bottom:5px; max-width:140px; }
  .about-audience p { font-size:13px; line-height:1.13; }
  .about-audience .about-icon { width:38px; height:38px; right:9px; }
  .about-audience { padding-top:8px; padding-bottom:4px; min-height:0; }
  .about-audience p { font-family:inherit; }
  .about-board .about-lead h1 { font-size:clamp(32px,3.1vw,50px); margin-bottom:16px; }
  .about-stat { padding-block:8px; min-height:80px; }
  .about-card>img { height:120px; }
  .about-card-copy { min-height:76px; }
  .about-birthday { grid-template-columns:70px 245px 1fr auto 65px; }
  .about-birthday h2 { font-size:22px; }
}
@media (max-width:1250px) { .about-birthday { grid-template-columns:50px 180px 1fr auto; padding-right:15px; }.about-birthday-mascot { display:none; }.about-birthday h2 { font-size:20px; }.about-birthday .about-birthday-gift { width:48px; }.about-stat { gap:10px; }.about-audience { padding-left:12px; }.about-audience .about-icon { width:30px; height:30px; } }
@media (max-width:1024px), (max-width:1100px) and (max-height:550px) {
  body:is([data-view="about"],[data-view="photos"],[data-view="videos"]) #content-view { padding:16px var(--mobile-page-inset) calc(var(--bottom-nav-clearance) + 24px); border-radius:0; }
  .about-hero { grid-template-columns:1fr 1fr; gap:18px; }
  .about-lead { padding:0; }.about-lead h1 span { max-width:100%; width:auto; }.about-board .about-lead h1 { font-size:40px; }
  .about-visual { min-height:300px; margin:0; }
  .about-audiences { grid-column:1/-1; flex-direction:row; padding:0; gap:10px; }.about-audience { flex:1; transform:rotate(-3deg); }
  .about-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }.about-card>img { height:160px; }
  .about-birthday { grid-template-columns:50px 1fr auto; }.about-birthday p { grid-column:2/4; }.about-birthday a { grid-column:3; grid-row:1; }
}
@media (max-width:600px) {
  .about-audience h2 { max-width:none; margin-right:0; white-space:nowrap; }
  .about-audience-prefix { display:block; }
  .about-hero { grid-template-columns:1fr; gap:16px; }.about-board .about-lead h1 { font-size:43px; }.about-title-burst { right:5px; }
  .about-introduction { font-size:15px; }.about-visual { min-height:250px; }.about-photo-note { font-size:25px; }
  .about-audiences { grid-column:auto; flex-direction:column; gap:5px; }.about-audience { transform:rotate(-2deg); min-height:85px; padding:14px 70px 14px 20px; }.about-audience h2 { font-size:24px; }.about-audience p { max-width:none; font-size:14px; }.about-audience .about-icon { width:45px; height:45px; }
  .about-stats { grid-template-columns:1fr 1fr; gap:8px; }.about-stat { justify-content:flex-start; padding:14px 10px; }.about-stat .about-icon { width:38px; height:38px; }.about-stat strong { font-size:25px; }.about-stat span { font-size:12px; }
  .about-section-heading { align-items:flex-start; flex-direction:column; gap:0; }.about-section-heading h2 { font-size:27px; }.about-section-heading h2 .about-burst { display:none; }
  .about-cards { grid-template-columns:1fr 1fr; padding:0; gap:12px; }.about-card>img { height:135px; }.about-card-copy { min-height:100px; }.about-card h3 { font-size:20px; }.about-card p { font-size:13px; }
  .about-birthday { grid-template-columns:45px 1fr; gap:10px; padding:16px; }.about-birthday p { grid-column:1/-1; }.about-birthday a { grid-row:auto; grid-column:1/-1; }.about-birthday h2 { font-size:25px; }
}
