/* Reference-led HOME v2. ES5/CSS3; no framework, grid or custom properties. */
.home-page { background: #f0fbfb; background-image: radial-gradient(ellipse at 50% 48%, #ffffff 0, #f0fbfb 70%); }
.home-page .wrap { width: 94%; max-width: 1280px; }
.home-page p, .home-page a, .home-details, .official-slot { word-wrap: break-word; overflow-wrap: break-word; }
.home-page .panel:after { z-index: 0; }
.home-page .portal-heading, .home-page .profile-copy { z-index: 1; position: relative; }
.home-page .header { padding: 14px 0; border: 0; }
.home-page .brand { font-size: 25px; letter-spacing: .13em; white-space: nowrap; }
.home-page .brand img, .home-page .brand > span { display: inline-block; vertical-align: middle; }
.home-page .brand img { margin-right: 8px; }
.home-page .brand small { font-size: 10px; letter-spacing: .12em; }
.home-page .nav a { font-size: 12px; font-weight: bold; border-radius: 24px; }
.home-page .nav a > span { font-size: 21px; vertical-align: middle; margin-right: 5px; }
.home-page .nav .nav-home { background: #31bec8; color: #123c47; padding: 7px 14px; }
.home-page .nav .nav-contact { border: 1px solid #db6e91; padding: 6px 12px; }
.home-page .nav .nav-home:hover { background: #d9f5f1; }
.home-page .home-hero { margin: 0; border-radius: 0; padding: 0; background: #153148 url('/assets/images/home-night-v5.png') no-repeat center center; background-size: cover; min-height: 430px; color: #ffffff; }
.hero-inner { padding-top: 48px; padding-bottom: 48px; }
.home-page .hero-copy { width: 52%; max-width: 560px; padding: 16px; text-align: center; text-shadow: 0 2px 12px #102438; }
.home-hero h1 { font-size: 60px; margin: 8px 0; }
.hero-roman { font: 20px/1.5 Georgia, serif; letter-spacing: .14em; margin-bottom: 20px; }
.home-page .hero p { margin-left: auto; margin-right: auto; }
.home-hero .eyebrow { color: #ffdf9f; font-size: 13px; }
#home-introduction { font-size: 14px; max-width: 340px; }
.home-page .hero-button { background: #ffffff; border-color: #ffffff; color: #176d70; min-height: 44px; padding: 8px 20px; text-shadow: none; font-size: 13px; }
.home-page .hero-button:hover { background: #d9f5f1; border-color: #d9f5f1; }
.home-page .hero-caption { color: #ffffff; font-size: 12px; }
/* Keep the first row below the banner, at the original social-card top edge. */
.home-content { position: relative; margin-top: 4px; }
.panel { position: relative; background: #ffffff; border: 1px solid #e4f0f0; border-radius: 24px; box-shadow: 0 3px 16px rgba(54,134,143,.08); }
.panel:after { content: '★'; position: absolute; right: 18px; top: 10px; color: #ffdf91; font-size: 30px; pointer-events: none; }
.welcome-row, .portal-row, .about-row, .information-row { font-size: 0; margin: 0 -8px; }
.home-notice, .social-section, .portal, .profile-panel, .shop-panel, .small-panel { display: inline-block; vertical-align: top; font-size: 14px; width: calc(100% - 16px); margin: 8px; }
.home-notice { padding: 16px 24px; min-height: 162px; }
.home-notice h2 { font-size: 18px; letter-spacing: .1em; margin-bottom: 10px; }
.heading-mark { color: #2a9fa6; margin-right: 6px; }
.notice-line { border-top: 1px solid #e4eded; font-size: 12px; margin: 0; padding: 6px 0; }
.notice-line .tag { margin-right: 8px; padding: 1px 8px; color: #176d70; background: #d9f5f1; }
.notice-secondary { color: #546a70; }
.notice-more { display: block; text-align: right; font-size: 12px; font-weight: bold; padding: 10px 0 0; min-height: 44px; text-decoration: none; }
.social-section { padding-top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.social-list { list-style: none; padding: 0; margin: 0 -4px; font-size: 0; }
.social-item { display: inline-block; width: calc(33.333% - 8px); vertical-align: top; margin: 4px; text-align: center; font-size: 12px; border-radius: 18px; background: #ffffff; border: 1px solid #e2f0f0; box-shadow: 0 2px 8px rgba(54,134,143,.07); }
.social-main { display: block; padding: 10px 2px 2px; text-decoration: none; color: #1c2734; }
.social-main:hover { background: #effbfb; border-radius: 18px; }
.social-icon { display: block; height: 40px; line-height: 40px; font-size: 35px; font-family: Arial,sans-serif; }
.social-icon svg { vertical-align: middle; }
.social-item strong { display: block; font-size: 11px; }
.social-x { color: #101820; }
.social-tiktok { color: #1c2734; text-shadow: -2px 0 #48c5c3, 2px 2px #f294b5; }
.social-cast { color: #087bde; }
.social-fanbox { color: #ed819e; }
.official-slot { display: block; min-height: 30px; padding: 4px 2px 6px; color: #546a70; font-size: 10px; }
.official-slot a { display: block; min-height: 44px; padding: 8px 0; font-size: 10px; }
.social-note { font-size: 10px; text-align: right; margin: 2px 4px 0; color: #546a70; }
.portal { padding: 20px; }
.portal-heading { position: relative; padding-left: 62px; min-height: 54px; padding-right: 12px; }
.portal-heading h2 { font-size: 23px; letter-spacing: .07em; line-height: 1.4; margin: 0; }
.portal-heading h2 small { display: block; font-size: 11px; letter-spacing: .25em; color: #546a70; font-weight: normal; }
.round-icon { position: absolute; left: 0; top: 0; width: 50px; height: 50px; border-radius: 50%; background: #dcf9f7; text-align: center; color: #2a9fa6; font-size: 36px; line-height: 50px; }
.portal-pink .round-icon, .shop-panel .round-icon { background: #fce8ef; color: #d96189; }
.portal-art { height: 156px; position: relative; width: 100%; max-width: 320px; margin: 4px auto 0; overflow: hidden; }
.deco-star { position: absolute; color: #ffdc85; font-size: 30px; }
.star-one { left: 4px; top: 24px; transform: rotate(-12deg); }
.star-two { right: 6px; bottom: 14px; color: #a0e9e5; font-size: 26px; }
.portal-art:before { content: ''; position: absolute; width: 88px; height: 48px; border-radius: 50px; background: #f4eaf6; right: 0; top: 32px; transform: rotate(-12deg); }
.portal-art:after { content: '✦'; position: absolute; left: 14px; bottom: 0; color: #ffdc85; font-size: 25px; }
.vinyl { position: absolute; width: 132px; height: 132px; top: 10px; left: 43%; background: #2b2c3c; border-radius: 50%; border: 8px double #494957; }
.vinyl:after { content: ''; position: absolute; width: 32px; height: 32px; top: 42px; left: 42px; border: 10px solid #ebc3da; background: #ffffff; border-radius: 50%; }
.album-art { display: block; position: absolute; width: 128px; height: 128px; left: 18%; top: 13px; background: #1c2734; border: 4px solid #ffffff; box-shadow: 0 3px 7px #c5d6db; transform: rotate(-5deg); }
.album-art img { width: 100%; height: 100%; }
.sound-bars { position: absolute; color: #c8a1c9; right: 3px; bottom: 12px; letter-spacing: 2px; }
.film-frame { position: absolute; left: 18%; top: 20px; width: 164px; height: 118px; background: #d5f1f7; border: 8px solid #5ca2bc; border-top: 13px dashed #5ca2bc; border-bottom: 13px dashed #5ca2bc; transform: rotate(-12deg); text-align: center; color: #5ca2bc; }
.film-frame span { font-size: 45px; line-height: 85px; }
.mini-photo { position: absolute; width: 80px; height: 98px; top: 48px; right: 8%; border: 6px solid #ffffff; border-bottom-width: 15px; background: #d9f5f1; transform: rotate(9deg); box-shadow: 0 2px 6px #c5d6db; }
.microphone { position: absolute; left: 3%; bottom: 0; color: #6db4c6; font-size: 60px; }
.polaroid { position: absolute; top: 30px; width: 104px; height: 114px; background: #ffffff; padding: 6px 6px 20px; box-shadow: 0 3px 6px #d8cbd1; }
.photo-one { left: 8%; transform: rotate(-14deg); }
.photo-two { left: 35%; transform: rotate(5deg); z-index: 1; }
.photo-three { left: 61%; transform: rotate(14deg); }
.picture { display: block; height: 88px; text-align: center; line-height: 88px; font-size: 58px; }
.picture-moon { color: #ffc978; background: #334e64; }
.picture-night { color: #ffdf91; background: #5c6096; }
.picture-cloud { color: #f6dff1; background: #9dcfe9; }
.portal-button { display: block; text-align: center; min-height: 44px; padding: 10px; border-radius: 24px; background: #176d70; color: #ffffff; text-decoration: none; font-size: 13px; font-weight: bold; }
.portal-button:hover { background: #176d70; color: #ffffff; text-decoration: none; }
.home-details { clear: both; border-top: 1px solid #dcebe8; margin-top: 20px; padding-top: 20px; font-size: 13px; text-align: left; }
.home-details h3 { font-size: 17px; }
.home-details.is-collapsed { display: none; }
.art-note { font-size: 11px; color: #546a70; margin-top: 12px; }
.archive-list, .collection-list { list-style: none; padding: 0; margin: 0; }
.archive-list li, .collection-list li { padding: 12px 0; border-bottom: 1px solid #e4eded; }
.archive-list strong, .archive-list span { display: block; }
.archive-list span { font-size: 12px; color: #546a70; }
.archive-list li:target { background: #d9f5f1; padding: 12px; }
.collection-list p { margin: 4px 0 0; color: #546a70; }
.profile-panel { padding: 24px; }
.profile-portrait { width: 154px; height: 154px; margin: 0 auto 20px; border: 5px solid #ffffff; border-radius: 50%; display: block; object-fit: cover; object-position: center; background: #55a2a4; box-shadow: 0 2px 8px #dae8e8; }
.profile-copy h2 { font-size: 24px; letter-spacing: .1em; margin: 0; }
.profile-copy p { font-size: 12px; margin-bottom: 8px; }
.profile-copy .eyebrow { color: #546a70; font-size: 11px; margin-bottom: 12px; }
.profile-button { display: block; border: 1px solid #23868c; border-radius: 24px; text-align: center; text-decoration: none; font-size: 13px; min-height: 44px; padding: 10px; }
.profile-button:hover { background: #d9f5f1; }
.shop-panel { padding: 20px 24px; text-align: center; }
.shop-panel .portal-heading { text-align: left; }
.shop-panel > p { font-size: 12px; color: #546a70; margin: 0 0 8px; }
.shop-art { height: 130px; position: relative; max-width: 430px; margin: 0 auto; }
.shop-awning { position: absolute; right: 0; top: -22px; width: 100px; height: 40px; border-radius: 0 0 12px 12px; background: repeating-linear-gradient(90deg,#edc9e8 0,#edc9e8 20px,#fff0fa 20px,#fff0fa 40px); transform: skew(-9deg); }
.shop-moon { position: absolute; left: 12%; top: 6px; font-size: 100px; color: #ffc978; line-height: 1; }
.gift-box { position: absolute; width: 80px; height: 76px; background: #d9f5f1; border: 2px solid #92d7d6; bottom: 10px; left: 38%; transform: rotate(-8deg); }
.gift-box:before { content: ''; position: absolute; left: -6px; top: -9px; width: 88px; height: 16px; background: #b5e4e4; border: 1px solid #92d7d6; }
.gift-box:after { content: ''; position: absolute; left: 32px; top: -9px; height: 83px; width: 12px; background: #ffffff; }
.gift-box i { position: absolute; z-index: 1; color: #257b81; left: 16px; top: 18px; font-size: 30px; font-style: normal; }
.gift-two { left: 65%; width: 60px; height: 58px; background: #f6e2ef; border-color: #e9bcd9; transform: rotate(8deg); }
.gift-two:before { width: 68px; background: #efd0e3; border-color: #e9bcd9; }
.gift-two:after { left: 23px; height: 65px; }
.gift-two i { color: #b64e76; font-size: 24px; left: 10px; top: 12px; }
.shop-pending { display: inline-block; width: 82%; padding: 7px 16px; border-radius: 24px; background: #fce8ef; color: #99405e; font-size: 12px; }
.home-page .shop-panel .button { background: #ad4068; border-color: #ad4068; color: #ffffff; font-size: 12px; }
.small-panel { padding: 16px 20px; border: 1px solid #dcebe8; border-radius: 16px; background: rgba(255,255,255,.75); }
.small-panel h2 { font-size: 15px; margin-bottom: 4px; }
.small-panel p { font-size: 12px; color: #546a70; margin: 0; }
.contact-email { word-wrap: break-word; }
.home-footer { position: relative; margin-top: 80px; background: #319ca3; color: #102f3a; padding: 12px 0 112px; }
.footer-waves { position: absolute; left: 0; top: -79px; width: 100%; height: 80px; background: url('/assets/images/footer-waves.svg') center bottom / 100% 100% no-repeat; }
.footer-cat { position: absolute; left: 4%; bottom: 20px; color: #319ca3; font-size: 70px; }
.footer-star { position: absolute; left: 15%; bottom: -12px; font-size: 34px; color: #ffdd91; text-shadow: 1px 1px #ffffff; }
.home-footer .brand { color: #102f3a; font-size: 20px; }
.home-footer a { color: #102f3a; }
.footer-links { margin: 16px 0; }
.footer-links a { display: inline-block; margin-right: 12px; padding: 10px 0; min-height: 44px; font-size: 12px; text-decoration: none; }
.footer-disclaimer { font-size: 12px; }
.footer-disclaimer small { font-size: 10px; }
@media (max-width: 639px) {
 .home-page .home-hero { background-size: auto 280px; background-position: 72% top; padding-top: 236px; min-height: 0; background-color: #153148; }
 .hero-inner { padding-top: 0; padding-bottom: 24px; background: linear-gradient(transparent,#153148 40px); }
 .home-page .hero-copy { width: 100%; max-width: none; padding: 16px 12px 0; }
 .home-hero h1 { font-size: 42px; margin: 4px 0; }
 .hero-roman { font-size: 16px; margin-bottom: 12px; }
 .home-page .hero .button { margin-bottom: 10px; }
 .home-page .home-hero .eyebrow { font-size: 11px; }
 .home-content { margin-top: 0; }
 .home-notice { margin-top: 16px; }
 .social-section { padding-top: 0; }
 .portal-art { height: 168px; }
 .portal-heading h2 { font-size: 22px; }
 .home-page .brand { font-size: 22px; }
 .home-page .brand img { width: 34px; margin-right: 4px; }
}
@media (min-width: 640px) {
 .social-item { width: calc(16.666% - 8px); }
 .portal { width: calc(50% - 16px); padding: 20px; }
 .portal-heading { padding-left: 50px; padding-top: 0; }
 .round-icon { width: 40px; height: 40px; font-size: 28px; line-height: 40px; }
 .portal-heading h2 { font-size: 18px; letter-spacing: 0; }
 .portal-art { width: 100%; height: 156px; }
 .portal-button { font-size: 13px; min-height: 44px; }
 .profile-panel { width: calc(45% - 16px); }
 .shop-panel { width: calc(55% - 16px); }
 .small-panel { width: calc(50% - 16px); }
 .shop-panel .portal-heading { padding-left: 54px; padding-top: 0; }
 .shop-art { margin-top: 28px; }
}
@media (min-width: 1000px) {
 .home-notice { width: calc(33.333% - 16px); }
 .social-section { width: calc(66.666% - 16px); }
 .portal { padding: 20px; width: calc(33.333% - 16px); }
 .portal-heading { padding-left: 60px; padding-top: 0; }
 .portal-heading h2 { font-size: 23px; }
 .round-icon { width: 50px; height: 50px; font-size: 36px; line-height: 50px; }
 .portal-art { transform: none; width: 100%; margin-left: auto; }
 .portal-button { min-height: 44px; font-size: 13px; }
 .profile-portrait { float: left; width: 140px; height: 140px; margin: 4px 20px 0 0; }
 .profile-copy { margin-left: 160px; }
 .profile-panel { min-height: 278px; }
 .shop-panel { min-height: 278px; }
 .shop-art { margin-top: 0; }
 .shop-panel .portal-heading { padding-left: 62px; }
 .home-footer { padding-bottom: 24px; }
 .footer-inner { display: table; }
 .home-footer .brand, .footer-links, .footer-disclaimer { display: table-cell; vertical-align: middle; }
 .footer-links { padding: 0 24px; text-align: center; }
 .footer-disclaimer { min-width: 170px; }
}
@media (min-width: 920px) and (max-width: 1279px) {
 .home-page .nav, .js .home-page .nav { float: none; clear: both; padding-top: 8px; text-align: center; }
 .home-page .nav a { margin: 0 6px; }
}
@media (min-width: 1280px) {
 .home-page .nav a { margin: 0 0 0 13px; }
 .home-page .home-hero { min-height: 450px; }
 .home-page .hero-copy { padding-top: 28px; }
 .home-hero h1 { font-size: 76px; }
}
@media (min-width: 640px) and (max-width: 999px) {
 .home-page .home-hero { background-position: 60% center; }
 .home-page .hero-copy { background: rgba(16,36,56,.68); border-radius: 20px; }
 .home-page .home-hero h1 { font-size: 44px; }
 .shop-panel .portal-heading { padding-left: 0; padding-top: 48px; }
 .shop-art { margin-top: 8px; overflow: hidden; }
}
@media (max-width: 919px) {
 .home-page .nav a { display: block; margin: 4px 0; min-height: 44px; padding: 10px 14px; }
 .home-page .nav .nav-home, .home-page .nav .nav-contact { padding: 10px 14px; }
 .home-page .bottom-nav a { min-height: 56px; padding: 16px 2px; }
}
@media (max-width: 359px) {
 .home-page .brand { font-size: 19px; letter-spacing: .07em; }
 .home-page .brand img { width: 28px; }
 .home-page .menu-toggle { padding: 8px; }
 .portal, .profile-panel, .shop-panel { padding: 16px; }
 .portal-heading { padding-left: 52px; }
 .portal-heading h2 { font-size: 20px; }
 .round-icon { width: 42px; height: 42px; line-height: 42px; }
}
@media print { .home-page .home-hero { background: #153148; } .home-details.is-collapsed { display: block; } .footer-waves { display: none; } }
.social-list .social-item { min-height: 128px; }
.social-litlink { color: #176d70; }
.social-linkhub .social-main { min-height: 126px; }
.social-linkhub-label { display: block; margin-top: 16px; color: #176d70; font-size: 10px; }
@media (min-width: 640px) { .social-list .social-item { width: calc(14.2857% - 8px); } }
@media (max-width: 639px) {
 .social-list .social-linkhub { width: calc(100% - 8px); min-height: 64px; }
 .social-linkhub .social-main { min-height: 64px; padding: 12px; }
 .social-linkhub .social-icon, .social-linkhub strong, .social-linkhub-label { display: inline-block; vertical-align: middle; margin: 0 8px; }
}
.portal-row .portal { padding-bottom: 20px; }
.portal-row .portal-button { margin-bottom: 0; }
/* Match the visible card edges within each horizontal row. */
@media (min-width: 640px) {
 .about-row { display: flex; align-items: stretch; }
 .about-row > .panel { min-width: 0; }
}
@media (min-width: 1000px) {
 .welcome-row { display: flex; align-items: stretch; }
 .welcome-row > .home-notice { min-height: 128px; }
 .welcome-row > .social-section { display: flex; padding-top: 0; min-width: 0; }
 .welcome-row .social-list { display: flex; flex: 1; min-width: 0; align-items: stretch; }
 .welcome-row .social-item { margin-top: 0; margin-bottom: 0; }
}
@media (max-width: 639px) {
 .portal-row .portal { padding: 20px; }
 .portal-row .portal-heading { min-height: 56px; }
 .portal-row .portal-art { height: 156px; }
 .portal-row .portal-button { min-height: 48px; padding: 12px 8px; }
}