/* css/subpage.css */


main { width: 100%; display: flex; flex-direction: column; align-items: center; }

/* ---- fonts (the HTML needs no font classes) ---- */
.name-text-en, .title-text, .menu-overlay { font-family: var(--font-en); font-weight: 400; }
.name-text-ch { font-family: var(--font-ch); font-weight: 658; }


/* ---- top-left name ---- */
.site-name {
    align-self: flex-start;
    position: relative;
    width: 36vw;
    margin: 2rem 0 12rem var(--gutter);
    line-height: 0.8;
}
.name-link { color: var(--ink); text-decoration: none; opacity: var(--op-faded); transition: opacity .5s ease-in-out; }
@media (hover: hover) { .name-link:hover { opacity: .4; transition-duration: .6s; } }
.name-text-en { font-size: var(--name-en-size); letter-spacing: .2rem; transform: var(--stretch) translateX(5%); font-weight: bold; filter: blur(1px); margin: 0 10px; padding-bottom: .3rem; }
.name-text-ch { font-size: var(--name-ch-size); letter-spacing: .3rem; transform: var(--stretch) translateX(5%); font-weight: bold; filter: blur(.6px); margin: 0 10px; }




/* ---- 右上頁面標題 ---- */
#title-container {
    position: fixed;
    top: 0;
    right: max(18vw, calc(var(--burger-right) + var(--b) + 1rem));
    width: max-content;
    text-align: right;
    margin: 2.6rem 0 0;
}
.title-text { display: inline-block; font-size: var(--title-size); letter-spacing: .1rem; transform-origin: right; transform: var(--stretch); font-weight: bold; }

/* ---- 內容區容器（取代各頁的 #menu-container） ---- */
.page-content { align-self: flex-start; margin: 3rem 0 2rem 10rem; }


/* .burger / .burger span / .menu-overlay / .overlay-link ... */
.burger {
    position: fixed;
    top: calc(var(--nav-center) - var(--b) / 2);
    right: var(--burger-right);
    z-index: 20;
    width: var(--b);
    height: var(--b);
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}
.burger span {
    position: absolute;
    left: calc(var(--b) * 0.16);
    right: calc(var(--b) * 0.16);
    height: 1.2px;
    background: var(--ink);
    transition: transform 0.4s ease, top 0.4s ease;
}
.burger span:nth-child(1) { top: calc(var(--b) * 0.28); }
.burger span:nth-child(2) { top: calc(var(--b) * 0.48); }

.menu-open .burger span:nth-child(1) { top: calc(var(--b) * 0.38); transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { top: calc(var(--b) * 0.38); transform: rotate(-45deg); }


.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: clamp(2rem, 3vw, 10rem);
    background: var(--bg);
    opacity: 0;
    visibility: hidden; 
    transition: opacity 0.4s ease, visibility 0.4s;
}
.menu-open .menu-overlay { opacity: 0.9; visibility: visible; }
.menu-open { overflow: hidden; } 

.overlay-link {
    color: black;
    text-decoration: none;
    font-size: clamp(2.4rem, min(10vw, 9vh), 8rem);
    font-weight: 700;
    letter-spacing: 0.1rem;
    line-height: 1.1;
    transform: var(--stretch);
    transform-origin: left;
    transition: color 0.3s ease, filter 0.3s ease;
}
.overlay-home, .overlay-schedule {
    margin-top: 0.6em;
}
.overlay-link:hover { color: var(--pink-hover); filter: blur(0.1rem); }
.overlay-link:active { color: var(--pink-active); }




@media (max-width: 900px) {
    .site-name { width: 50vw; }
    .page-content { margin-left: 6rem; }
}
@media (max-width: 600px) {
    .site-name { width: auto; margin: 2rem 0 6rem var(--gutter); }
    #title-container { margin-top: 2.4rem; }
    .page-content { margin: 3rem 0 2rem 2rem; }
    .overlay-link {line-height: 1.3;}
}
@media (max-width: 440px) {
    .name-text-en { filter: none; }
    .name-text-ch { filter: none; }
}
@media (max-width: 380px) {
    #title-container { margin-top: 2.2rem; }
    .name-text-ch { letter-spacing: .2rem; }
}
@media (min-width: 1600px) {
    .site-name { margin-left: 4rem; }
}


:root { --content-w: 80vw; }
@media (max-width: 900px) { :root { --content-w: 88vw; } }
@media (max-width: 600px) { :root { --content-w: 92vw; } }

.content-block { width: var(--content-w); }