.ph-home .ph-sidebar,
.ph-home .ph-sidebar * { box-sizing: border-box; }
.ph-home .ph-sidebar {
    width: 305px;
    padding: 20px 22px 20px 20px;
    background: var(--ph-surface);
}
.ph-home .ph-sidebar__logo,
.ph-home .ph-sidebar__logo img,
.ph-home .ph-sidebar__arm { display: block; }
.ph-home .ph-sidebar__logo { width: 263px; }
.ph-home .ph-sidebar__logo img { width: 263px; height: 132px; max-width: none; }
.ph-home .ph-sidebar__arm { width: 263px; height: 222px; object-fit: contain; }
.ph-home .ph-sidebar__menu { margin-top: 20px; }
.ph-home .ph-sidebar__toggle { display: none; }
.ph-home .ph-sidebar__nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.ph-home .ph-sidebar__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 10px 10px 10px 20px;
    border: 2px solid var(--ph-border);
    border-radius: 30px;
    color: var(--ph-surface);
    background: linear-gradient(90deg,#1e2332,#555f73 49.519%,#374155);
    box-shadow: 0 6px 5px rgb(0 0 0 / 25%),inset -1px 8px 6px rgb(255 255 255 / 20%),inset 0 -3px 6px rgb(92 92 92 / 40%);
    font-size: 16px;
    font-weight: 800;
    line-height: 16px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
}
.ph-home .ph-sidebar summary::-webkit-details-marker { display: none; }
.ph-home .ph-sidebar__button--original,
.ph-home .ph-sidebar__button--entertainment { grid-column: 1 / -1; }
.ph-home .ph-sidebar__button--original { color: #1e2332; background: linear-gradient(90deg,#fff,#f0f2f7 49.519%,#f8f9fc); }
.ph-home .ph-sidebar__button--entertainment { background: linear-gradient(90deg,#ff1493,#ff78be 20%,#ff78be 49%,#dc0a7d 75%,#8c004e); }
.ph-home .ph-sidebar__icon { position: relative; flex: 0 0 24px; width: 24px; height: 24px; border: .5px solid var(--ph-border); border-radius: 50%; background: radial-gradient(circle at 30% 25%,#ffffff59,transparent 75%),var(--ph-pink-bright); box-shadow: 0 2px 2px #00000059,inset 0 -3px 4px #80004080,inset 0 3px 3px #ffffff99; }
.ph-home .ph-sidebar__icon .ph-icon { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; transform: translate(-50%,-50%); color: white; }
.ph-home .ph-sidebar__button[aria-expanded="true"] .ph-sidebar__icon--plus .ph-icon { transform: translate(-50%,-50%) rotate(45deg); }
.ph-home .ph-sidebar__menu-symbol { display: block; width: 16px; height: 16px; flex: none; }
.ph-home .ph-sidebar__menu-symbol .ph-icon { display: block; width: 16px; height: 16px; }
.ph-home .ph-sidebar__submenu { margin: 12px 0 0; padding: 0; list-style: none; }
.ph-home .ph-sidebar__submenu a { display: block; padding: 10px 5px; color: var(--ph-text-primary); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.ph-home .ph-sidebar__social { display: flex; justify-content: center; margin-top: 20px; }
.ph-home .ph-sidebar__social-item,
.ph-home .ph-sidebar__social img { display: block; width: 40px; height: 40px; }
.ph-home .ph-sidebar :is(a,button,summary):focus-visible { outline: 3px solid var(--ph-focus); outline-offset: 3px; }
.ph-home .ph-sidebar a:hover { text-decoration: underline; }

.ph-home .ph-sidebar__group > .ph-sidebar__button { width: 100%; }
@supports selector(:popover-open) {
    .ph-home .ph-sidebar__submenu[popover] { position: fixed; inset: auto; width: 220px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: 0; padding: 8px; overflow: auto; border: 2px solid var(--ph-border); border-radius: 16px; background: var(--ph-surface); color: var(--ph-text-primary); box-shadow: 0 8px 24px #1e233233; }
    .ph-home .ph-sidebar__submenu[popover] a { padding: 12px; border-radius: 8px; font-size: 14px; line-height: 1.5; }
    .ph-home .ph-sidebar__submenu[popover] a:hover { background: var(--ph-pink-soft); }
}

/* Keep desktop navigation in view; long menus scroll independently. */
@media (min-width: 768px) {
    .ph-home .ph-sidebar { position: sticky; top: 0; height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; }
}

/* Mobile navigation uses a native modal dialog; desktop keeps the sidebar. */
.ph-mobile-actions, .ph-mobile-toggle { display: none; }
.ph-home .ph-mobile-menu { inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: var(--ph-text-primary); background: var(--ph-surface); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity .18s ease, transform .18s ease, display .18s allow-discrete, overlay .18s allow-discrete; }
.ph-home .ph-mobile-menu[open] { opacity: 1; transform: none; pointer-events: auto; }
.ph-mobile-menu::backdrop { background: #1e233280; }
html:has(.ph-mobile-menu[open]), body:has(.ph-mobile-menu[open]) { overflow: hidden; }
@starting-style { .ph-home .ph-mobile-menu[open] { opacity: 0; transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .ph-home .ph-mobile-menu { transition: none; transform: none; } }
@media (max-width: 767px) {
    .ph-home .ph-sidebar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(0,1fr) 104px minmax(0,1fr); align-items: center; width: 100%; padding: 4px 12px; padding-top: max(4px,env(safe-area-inset-top)); box-shadow: 0 2px 10px #1e23321a; }
    .ph-home .ph-sidebar__logo { width: 104px; margin: 0; }
    .ph-home .ph-sidebar__logo img { width: 104px; height: auto; }
    .ph-home .ph-sidebar__arm { display: none; }
    .ph-home .ph-sidebar__menu { grid-column: 1 / -1; width: 100%; margin-top: 20px; }
    .ph-home .ph-sidebar__body { max-width: 440px; margin: 0 auto; }
    .ph-home .ph-sidebar__social { justify-content: center; gap: 15px; padding-bottom: 8px; }
    .ph-mobile-toggle:not([hidden]), .ph-mobile-search:not([hidden]), .ph-mobile-guide, .ph-mobile-close { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: none; width: 44px; min-height: 44px; padding: 3px 0; border: 0; border-radius: 12px; color: var(--ph-text-primary); background: var(--ph-pink-soft); cursor: pointer; }
    .ph-home :is(.ph-mobile-toggle,.ph-mobile-search,.ph-mobile-guide,.ph-mobile-close) { font-size: 10px; line-height: 1.2; font-weight: 700; text-decoration: none; }
    .ph-mobile-actions { display: flex; align-items: center; justify-self: end; gap: 8px; }
    .ph-home .ph-mobile-search { background: var(--ph-blue-soft); }
    .ph-home .ph-mobile-guide { background: var(--ph-green-soft); }
    .ph-hamburger { display: block; width: 24px; height: 18px; border-block: 2px solid currentColor; position: relative; }
    .ph-hamburger::before { content: ''; position: absolute; top: 6px; left: 0; width: 100%; border-top: 2px solid currentColor; }
    .ph-mobile-close > span:first-child { font: 32px/24px sans-serif; }
    .ph-mobile-menu__header { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) 104px minmax(0,1fr); align-items: center; padding: 4px 12px; padding-top: max(4px,env(safe-area-inset-top)); background: var(--ph-surface); border-bottom: 1px solid var(--ph-border-light); }
    .ph-mobile-menu__content { max-width: 472px; margin: auto; padding: 24px 16px max(24px,env(safe-area-inset-bottom)); }
    .ph-home .ph-mobile-menu .ph-utilities { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 0; }
    .ph-home .ph-mobile-menu .ph-search { flex: none; width: 100%; max-width: none; }
    .ph-home .ph-mobile-menu .ph-search input { font-size: 16px; }
    .ph-home .ph-mobile-menu .ph-guide { justify-content: center; }
    .ph-home :is(#ph-main,#ph-introduction) { scroll-margin-top: 76px; }
    .ph-home .ph-skip { z-index: 21; }
}

/* Join the header bar to an expanded mask of the original transparent logo. */
@media (max-width: 767px) {
    .ph-home .ph-sidebar,
    .ph-home .ph-mobile-menu__header { --ph-mobile-logo-width: min(160px,calc(100vw - 200px)); --ph-mobile-logo-top: max(6px,env(safe-area-inset-top)); min-height: 60px; padding-inline: 8px; border: 0; box-shadow: none; }
    .ph-home .ph-sidebar__logo { position: absolute; top: var(--ph-mobile-logo-top); left: 50%; transform: translateX(-50%); z-index: 1; width: var(--ph-mobile-logo-width); }
    .ph-home .ph-sidebar__logo :is(picture,img) { display: block; width: 100%; height: auto; }
    .ph-home .ph-sidebar::before,
    .ph-home .ph-sidebar::after,
    .ph-home .ph-mobile-menu__header::before,
    .ph-home .ph-mobile-menu__header::after { content: ''; position: absolute; inset: 0 0 -64px; pointer-events: none; mask-repeat: no-repeat; mask-position: center top, center calc(var(--ph-mobile-logo-top) - var(--ph-mobile-logo-width) * 14 / 255); mask-size: 100% 60px, calc(var(--ph-mobile-logo-width) * 283 / 255) auto; }
    .ph-home .ph-sidebar::before,
    .ph-home .ph-mobile-menu__header::before { background: linear-gradient(#c8e6ff,#ffaad2 50%,#ff78be); mask-image: linear-gradient(#000,#000),url('images/brand/logo-contour-outer.svg'); }
    .ph-home .ph-sidebar::after,
    .ph-home .ph-mobile-menu__header::after { background: var(--ph-surface); mask-size: 100% 58px, calc(var(--ph-mobile-logo-width) * 283 / 255) auto; mask-image: linear-gradient(#000,#000),url('images/brand/logo-contour-inner.svg'); }
    .ph-mobile-toggle, .ph-mobile-close { position: relative; z-index: 1; grid-column: 1; }
    .ph-mobile-actions { position: relative; z-index: 1; grid-column: 3; gap: 4px; }
    .ph-home .ph-hero { padding-top: 50px; }
    .ph-home .ph-mobile-menu { scroll-padding-top: 120px; }
    .ph-home .ph-mobile-menu__content { padding-top: 56px; }
    .ph-home :is(#ph-main,#ph-introduction) { scroll-margin-top: 120px; }
}