:root {
    --taib-paper: #fffbf3;
    --taib-cream: #fdf5e6;
    --taib-line: #efe3ce;
    --taib-ink: #3a2e20;
    --taib-muted: #6b5b47;
    --taib-green: #33532c;
    --taib-leaf: #5e8c42;
    --taib-light-leaf: #8fbf5a;
    --taib-yellow: #f5b335;
    --taib-pale-yellow: #ffd97a;
    --taib-blue: #82c4d6;
    --taib-pink: #f0a0a6;
    --taib-orange: #ee8c4c;
    --taib-shadow: 0 14px 34px rgba(91, 68, 39, 0.14);
    --taib-font-display: "Baloo 2", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    --taib-font-number: "Outfit", "Noto Sans TC", sans-serif;
}

html { scroll-behavior: smooth; }

h1, h2, h3,
.taib-brand strong,
.taib-eyebrow, .taib-pill,
.taib-work-heading strong { font-family: var(--taib-font-display); letter-spacing: .01em; }

body {
    margin: 0;
    background: var(--taib-paper);
    color: var(--taib-ink);
    font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    overflow-x: hidden;
}

a { color: inherit; }
button, input { font: inherit; }
img { max-width: 100%; }
[id] { scroll-margin-top: 112px; }

.taib-container { max-width: 1240px; }

.taib-skip-link {
    position: fixed;
    left: 16px;
    top: -100px;
    z-index: 3000;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--taib-yellow);
    color: var(--taib-ink);
    font-weight: 800;
}
.taib-skip-link:focus { top: 12px; }

/* 日期模擬測試列（僅在 ?date= 生效時出現） */
.taib-simulate-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 18px;
    padding: 8px 16px;
    background: repeating-linear-gradient(135deg, #4a3a12, #4a3a12 12px, #5a4718 12px, #5a4718 24px);
    color: #ffe9b0;
    font-size: .84rem;
    font-weight: 800;
    text-align: center;
}
.taib-simulate-bar strong { color: #fff; }
.taib-simulate-bar a { color: #ffe9b0; text-decoration: underline; }

/* 活動結束後停用的投票按鈕 */
.taib-vote-closed {
    opacity: .5;
    cursor: not-allowed;
    filter: grayscale(1);
}
.taib-vote-closed:hover { transform: none !important; box-shadow: none !important; }

.taib-datebar {
    padding: 6px 16px;
    background: var(--taib-green);
    color: var(--taib-cream);
    font-size: .82rem;
    line-height: 1.6;
    letter-spacing: .04em;
    text-align: center;
}

.taib-navbar {
    min-height: 72px;
    /* 這裡不可使用 backdrop-filter / filter / transform：
       會讓導覽列變成 position:fixed 子層的包含區塊，
       手機版選單面板就會被困在導覽列框內、開啟後被頁面內容蓋住。
       背景已是 96% 不透明，改為實色視覺上幾乎沒有差別。 */
    background: var(--taib-paper);
    border-bottom: 2px solid var(--taib-line);
    box-shadow: 0 6px 18px rgba(91, 68, 39, .08);
}

.taib-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.taib-brand-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--taib-yellow);
    color: var(--taib-green);
    box-shadow: 0 6px 14px rgba(122, 96, 58, .22);
}
.taib-brand small { display: block; color: var(--taib-muted); font-size: .74rem; letter-spacing: .1em; line-height: 1.3; }
.taib-brand strong { display: block; color: var(--taib-green); font-size: 1.18rem; font-weight: 900; line-height: 1.3; }
.taib-brand strong span { font-size: .8em; }
.taib-navbar .navbar-toggler { width: 48px; height: 48px; border: 2px solid var(--taib-line); border-radius: 15px; color: var(--taib-green); }
.taib-navbar .nav-link { margin: 0 2px; padding: 9px 14px !important; border-radius: 999px; color: var(--taib-ink); font-weight: 800; }
.taib-navbar .nav-link:hover, .taib-navbar .nav-link:focus { background: var(--taib-pale-yellow); color: var(--taib-ink); }
.taib-navbar .taib-nav-cta { margin-left: 8px; background: var(--taib-yellow); }
.taib-nav-panel { background: var(--taib-paper); }
.taib-nav-panel .offcanvas-header { border-bottom: 2px solid var(--taib-line); }

.taib-hero { padding: clamp(34px, 6vw, 74px) 0 48px; background: var(--taib-cream); }
.taib-pill, .taib-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--taib-green);
    font-size: .88rem;
    font-weight: 900;
    letter-spacing: .04em;
}
.taib-pill { padding: 7px 15px; border: 2px solid var(--taib-line); border-radius: 999px; background: #fff; }
.taib-eyebrow { padding: 5px 14px; border-radius: 7px; background: var(--taib-pale-yellow); }
.taib-hero h1 { margin: 0 0 16px; font-weight: 900; line-height: 1.18; }
.taib-hero h1 small { display: block; margin-bottom: 10px; color: var(--taib-green); font-size: clamp(1.2rem, 2.2vw, 1.7rem); }
.taib-hero h1 span { display: inline; color: var(--taib-ink); font-size: clamp(2.6rem, 5.5vw, 4.7rem); }
.taib-hero h1 em { display: inline-block; margin-left: 10px; color: var(--taib-leaf); font-size: clamp(1.05rem, 2vw, 1.5rem); font-style: normal; vertical-align: middle; }
.taib-hero-lead { max-width: 38rem; margin: 0 0 24px; color: var(--taib-muted); font-size: 1.06rem; }

.taib-actions, .taib-facts, .taib-artwork-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.taib-actions { margin: 0 0 20px; }
.taib-primary-button, .taib-secondary-button, .taib-light-button, .taib-outline-light-button, .taib-outline-button, .taib-detail-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-weight: 900;
    line-height: 1.35;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.taib-primary-button { background: var(--taib-yellow); color: var(--taib-ink); box-shadow: 0 9px 20px rgba(217, 144, 26, .25); }
.taib-secondary-button { background: #fff; border-color: var(--taib-leaf); color: var(--taib-green); }
.taib-light-button { background: var(--taib-cream); color: var(--taib-green); }
.taib-outline-light-button { background: transparent; border-color: var(--taib-cream); color: var(--taib-cream); }
.taib-outline-button { background: #fff; border-color: var(--taib-line); color: var(--taib-green); }
.taib-detail-button { padding: 9px 15px; background: var(--taib-green); color: #fff; font-size: .9rem; }
.taib-primary-button:hover, .taib-secondary-button:hover, .taib-light-button:hover, .taib-outline-light-button:hover, .taib-outline-button:hover, .taib-detail-button:hover { transform: translateY(-2px); box-shadow: var(--taib-shadow); }
.taib-text-button { min-height: 46px; padding: 8px 12px; border: 0; background: transparent; color: var(--taib-leaf); font-weight: 900; }
.taib-facts span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 2px solid var(--taib-line); border-radius: 999px; background: #fff; font-size: .9rem; font-weight: 800; }
.taib-facts i { color: var(--taib-orange); }

.taib-poster { position: relative; display: block; padding: 13px; border: 2px solid var(--taib-line); border-radius: 26px; background: #fff; box-shadow: var(--taib-shadow); }
.taib-poster img { display: block; width: 100%; border-radius: 17px; }
.taib-poster > span { position: absolute; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 2px solid var(--taib-line); border-radius: 999px; background: rgba(255, 251, 243, .94); color: var(--taib-ink); font-size: .84rem; font-weight: 900; }

.taib-stats { padding: 18px 0 42px; background: var(--taib-cream); }
.taib-stat-card { height: 100%; min-height: 120px; padding: 18px 20px; border: 2px solid var(--taib-line); border-radius: 21px; background: #fff; box-shadow: 0 6px 18px rgba(122, 96, 58, .1); }
.taib-stat-card i { margin-right: 6px; color: var(--taib-blue); }
.taib-stat-card span { color: var(--taib-muted); font-size: .9rem; font-weight: 800; }
.taib-stat-card strong { display: block; margin-top: 4px; font-family: var(--taib-font-number); font-size: 2rem; line-height: 1.2; }
.taib-stat-dark { border-color: var(--taib-green); background: var(--taib-green); color: var(--taib-cream); }
.taib-stat-dark i, .taib-stat-dark span { color: var(--taib-pale-yellow); }


.taib-section { padding: clamp(54px, 7vw, 88px) 0; }
.taib-section-cream { background: var(--taib-cream); }
.taib-section h2, .taib-school-content h2, .taib-school-next h2 { margin: 0 0 12px; color: var(--taib-green); font-size: clamp(1.75rem, 3.5vw, 2.65rem); font-weight: 900; line-height: 1.3; }
.taib-section-heading { max-width: 780px; margin: 0 auto 34px; text-align: center; }
.taib-section-heading p:last-child { color: var(--taib-muted); }
.taib-works-header { margin-bottom: 34px; }
.taib-works-header h2 { white-space: nowrap; font-size: clamp(1.5rem, 6vw, 2.65rem); }
.taib-works-header p:last-child { margin: 0; color: var(--taib-muted); }
.taib-info-panel, .taib-purpose-panel, .taib-visit-card { padding: clamp(24px, 3vw, 34px); border: 2px solid var(--taib-line); border-radius: 24px; background: #fff; box-shadow: 0 8px 24px rgba(122, 96, 58, .1); }
.taib-info-panel > p { color: var(--taib-muted); }
.taib-event-details, .taib-modal-meta { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 24px 0 0; }
.taib-event-details dt, .taib-modal-meta dt { color: var(--taib-muted); font-weight: 800; }
.taib-event-details dd, .taib-modal-meta dd { margin: 0; }
.taib-info-facts { margin-top: 24px; }
.taib-info-highlight { display: flex; gap: 14px; align-items: flex-start; margin-top: 20px; padding: 18px 20px; border: 1.5px solid #f4c5ca; border-radius: 18px 22px 18px 22px; background: #fff7f8; }
.taib-info-highlight i { flex: 0 0 auto; margin-top: 2px; color: #d9636f; font-size: 1.3rem; }
.taib-info-highlight h3 { margin: 0 0 6px; color: #a93848; font-size: 1rem; font-weight: 900; }
.taib-info-highlight p { margin: 0; color: #8a4a52; font-size: .92rem; line-height: 1.7; }
.taib-purpose-panel { background: var(--taib-green); color: var(--taib-cream); }
.taib-purpose-panel h3 { color: var(--taib-pale-yellow); font-weight: 900; }
.taib-purpose-panel ol { padding-left: 1.3rem; }
.taib-purpose-panel li { margin-bottom: 12px; }
.taib-award-panel { padding: clamp(24px, 3vw, 34px); border: 2px solid var(--taib-line); border-radius: 24px; background: #fff; box-shadow: 0 8px 24px rgba(122, 96, 58, .1); }
.taib-award-panel h3 { margin: 0 0 16px; color: var(--taib-green); font-weight: 900; font-size: 1.1rem; }
.taib-award-panel h3 i { margin-right: 8px; color: var(--taib-yellow); }
.taib-award-list { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.taib-award-list dt { margin: 0 0 4px; color: var(--taib-leaf); font-weight: 900; font-size: .92rem; }
.taib-award-list dd { margin: 0; color: var(--taib-muted); font-size: .94rem; line-height: 1.7; }

.taib-theme-card { display: flex; height: 100%; gap: 20px; padding: 28px; border: 2px solid var(--taib-line); border-radius: 24px; background: #fff; box-shadow: 0 8px 24px rgba(122, 96, 58, .1); }
.taib-theme-card > i { display: inline-flex; width: 62px; height: 62px; flex: 0 0 62px; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.6rem; }
.taib-theme-card span { color: var(--taib-muted); font-size: .86rem; font-weight: 900; letter-spacing: .08em; }
.taib-theme-card h3 { margin: 3px 0 8px; color: var(--taib-green); font-weight: 900; }
.taib-theme-card p { margin: 0; color: var(--taib-muted); }
.taib-theme-green > i { background: #e5f0d7; color: var(--taib-leaf); }
.taib-theme-blue > i { background: #def2f6; color: #367d91; }

.taib-filter, .taib-school-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.taib-filter button, .taib-school-filters button { min-height: 42px; padding: 8px 15px; border: 2px solid var(--taib-line); border-radius: 999px; background: #fff; color: var(--taib-muted); font-weight: 800; white-space: nowrap; }
.taib-filter button.active, .taib-school-filters button.active { border-color: var(--taib-green); background: var(--taib-green); color: #fff; }

.taib-artwork-card { height: 100%; overflow: hidden; border: 2px solid #ddc79a; border-radius: 23px; background: #fff; box-shadow: 0 8px 24px rgba(122, 96, 58, .1); transition: transform .2s ease, box-shadow .2s ease; }
.taib-artwork-card:hover { transform: translateY(-4px); box-shadow: var(--taib-shadow); }
.taib-artwork-image { position: relative; display: block; padding: 10px; background: #f5f2ec; }
.taib-artwork-image img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 15px; background: #fff; object-fit: contain; }
.taib-artwork-image > span { position: absolute; right: 20px; bottom: 20px; display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 251, 243, .95); color: var(--taib-green); box-shadow: 0 5px 16px rgba(58, 46, 32, .18); }
.taib-artwork-content { padding: 20px; }
.taib-artwork-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.taib-artwork-badges span { padding: 4px 10px; border-radius: 999px; background: #edf5e4; color: var(--taib-green); font-size: .78rem; font-weight: 900; }
.taib-artwork-badges span:first-child { background: #ffe3cc; color: #a1481a; }
.taib-artwork-card h3 { min-height: 3.2em; margin: 0 0 8px; font-size: 1.12rem; font-weight: 900; line-height: 1.45; }

/* 標題本身就是開啟作品介紹的按鈕 */
.taib-title-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--taib-ink);
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
    transition: color .2s ease;
}
.taib-title-button:hover, .taib-title-button:focus-visible { color: var(--taib-leaf); text-decoration: underline; text-underline-offset: 4px; }

/* ── 獎項層級區隔：潛能卓越獎為本次重點，優選為次層 ───────────────── */
.taib-card-excellence { border-color: #e3a81f; border-width: 3px; box-shadow: 0 10px 28px rgba(197, 143, 20, .24); }
.taib-card-excellence .taib-artwork-image { background: #fffaf0; }
.taib-card-excellence:hover { border-color: #d9901a; box-shadow: 0 28px 52px rgba(197, 143, 20, .32); }
.taib-card-ribbon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 9px 14px;
    background: linear-gradient(135deg, #ffd97a 0%, #f5b335 55%, #e3a81f 100%);
    color: #6d4200;
    font-family: var(--taib-font-display);
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .06em;
}
.taib-card-merit { border-color: var(--taib-line); }
/* 潛能卓越獎卡片的獎項由上方彩帶呈現，徽章只剩類別，
   因此要蓋掉「第一個徽章＝獎項」的橘色樣式，改回類別的綠色。 */
.taib-card-excellence .taib-artwork-badges span:first-child { background: #edf5e4; color: var(--taib-green); }

/* 作品牆說明文字中的獎項圖例 */
.taib-legend-crown { color: #a1740a; font-weight: 900; white-space: nowrap; }
.taib-legend-crown i { color: var(--taib-yellow); }
.taib-legend-merit { color: var(--taib-green); font-weight: 900; white-space: nowrap; }
.taib-filter button i { margin-right: 5px; color: var(--taib-yellow); }
.taib-filter button.active i { color: var(--taib-pale-yellow); }
.taib-artist { margin: 0 0 16px; color: var(--taib-green); font-weight: 800; }
.taib-artist span { color: var(--taib-muted); font-size: .88rem; font-weight: 600; }
.taib-artwork-actions { justify-content: space-between; }
.taib-like-button { min-height: 42px; padding: 8px 13px; border: 2px solid #f4c5ca; border-radius: 999px; background: #fff7f8; color: #a93848; font-weight: 900; }
.taib-like-button.liked { background: var(--taib-pink); color: var(--taib-ink); }
.taib-qr-badge { display: inline-flex; align-items: center; justify-content: center; width: 42px; min-height: 42px; padding: 0; border: 2px solid var(--taib-line); border-radius: 999px; background: #fff; color: var(--taib-green); font-size: 1.05rem; flex: 0 0 auto; }
.taib-pdf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-height: 42px;
    padding: 0;
    border: 2px solid #f7cbb1;
    border-radius: 999px;
    background: #fff8f3;
    color: #a1481a;
    font-size: 1.05rem;
    flex: 0 0 auto;
    text-decoration: none;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.taib-pdf-badge:hover {
    transform: scale(1.1) rotate(-5deg);
    background: #ffe3cc;
    border-color: var(--taib-orange);
    color: #7a320d;
}
.taib-pdf-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 17px;
    border: 2px solid #efbd96;
    border-radius: 999px;
    background: #fff8f3;
    color: #984b20;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.taib-pdf-button i {
    font-size: 1rem;
    color: var(--taib-orange);
    flex: 0 0 auto;
}
.taib-pdf-button:hover {
    transform: translateY(-2px);
    background: #ffe3cc;
    border-color: var(--taib-orange);
    box-shadow: 0 8px 18px rgba(238, 140, 76, .2);
    color: #7a320d;
}
/* Modal PDF 按鈕（Index 頁面彈窗） */
#taibModalPdf {
    border-color: var(--taib-leaf);
    color: var(--taib-green);
    background: #fff;
}
#taibModalPdf:hover {
    background: var(--taib-pale-yellow);
    border-color: var(--taib-yellow);
    color: var(--taib-ink);
}
.taib-work-detail-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 14px; }
/* 兩顆按鈕（看完整介紹／此作品 QR Code）統一大小，避免一顆比另一顆高或字級不同 */
.taib-work-detail-actions .taib-outline-button { padding: 10px 18px; font-size: .92rem; }
.taib-empty-filter, .taib-no-results { padding: 34px; border: 2px dashed var(--taib-line); border-radius: 22px; color: var(--taib-muted); text-align: center; }

.taib-school-card { padding: 24px; border: 2px solid var(--taib-line); border-radius: 23px; background: #fff; text-align: center; box-shadow: 0 8px 24px rgba(122, 96, 58, .1); }
.taib-school-card > img { width: 100%; height: 76px; margin-bottom: 12px; object-fit: contain; }
.taib-school-card > p { margin: 0; color: var(--taib-orange); font-size: .82rem; font-weight: 900; letter-spacing: .08em; }
.taib-school-card h3 { margin: 3px 0; color: var(--taib-green); font-size: 1.24rem; font-weight: 900; }
.taib-school-card > span { display: block; color: var(--taib-muted); font-size: .88rem; }
.taib-qr { display: flex; width: 152px; min-height: 152px; align-items: center; justify-content: center; margin: 18px auto; padding: 8px; border: 2px solid var(--taib-line); border-radius: 16px; background: #fff; }
/* 點 QR Code 圖案本身即可直接開啟該連結，方便測試/確認 */
.taib-qr[data-qr-url] { cursor: pointer; transition: transform .2s ease, border-color .2s ease; }
.taib-qr[data-qr-url]:hover { transform: scale(1.03); border-color: var(--taib-light-leaf); }
.taib-qr img, .taib-qr canvas { display: block; width: 132px !important; height: 132px !important; }
.taib-school-card > a { color: var(--taib-green); font-weight: 900; text-decoration: none; }

.taib-visit { background: var(--taib-green); color: var(--taib-cream); }
.taib-visit h2 { color: #fff; }
.taib-school-view-count { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; color: var(--taib-leaf); font-size: .8rem; font-style: normal; font-weight: 900; white-space: nowrap; }
.taib-school-view-count i { color: #d86b72; }

/* 右下角回到頁首 --------------------------------------------------------- */
.taib-top-button { position: fixed; right: clamp(14px, 3vw, 30px); bottom: 22px; z-index: 1035; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 54px; height: 54px; border: 2px solid var(--taib-green); border-radius: 18px 22px 18px 22px; background: var(--taib-yellow); color: var(--taib-green); box-shadow: 0 8px 22px rgba(55, 75, 25, .2); font-family: var(--taib-font-number); font-size: .72rem; font-weight: 900; line-height: 1; text-decoration: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px); transition: opacity .2s ease, visibility .2s ease, transform .2s ease, background .2s ease; }
.taib-top-button.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.taib-top-button i { font-size: 1.05rem; }
.taib-top-button:hover { background: var(--taib-pale-yellow); color: var(--taib-green); transform: translateY(-3px) rotate(-3deg); }
.taib-top-button:focus-visible { outline: 3px solid var(--taib-orange); outline-offset: 3px; }
@media (min-width: 992px) {
    h2.taib-nowrap-heading { white-space: nowrap; font-size: clamp(1.5rem, 2.5vw, 2.15rem); }
}
.taib-visit .taib-eyebrow { background: var(--taib-pale-yellow); color: var(--taib-green); }
.taib-visit-card { color: var(--taib-ink); }
.taib-visit-card img { display: block; width: 100%; height: 90px; margin-bottom: 18px; object-fit: contain; }
.taib-visit-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 7px 14px; margin: 0; }
.taib-visit-card dt { color: var(--taib-muted); }
.taib-visit-card dd { margin: 0; }

.taib-modal-content { overflow: hidden; border: 2px solid var(--taib-line); border-radius: 24px; background: var(--taib-paper); }
.taib-modal-content .modal-header, .taib-modal-content .modal-footer { border-color: var(--taib-line); }
.taib-modal-content .modal-body { padding: 26px; }
#taibModalImage { display: block; width: 100%; max-height: 64vh; border: 2px solid var(--taib-line); border-radius: 18px; background: #fff; object-fit: contain; }
.taib-modal-meta { margin-top: 0; }
.taib-modal-content h3 { margin-top: 24px; color: var(--taib-green); font-size: 1.1rem; font-weight: 900; }
.taib-description { margin: 0; white-space: pre-line; }

.taib-mini-qr-content { overflow: hidden; border: 2px solid var(--taib-line); border-radius: 22px 26px 22px 26px; background: #fff; }
.taib-mini-qr-content .modal-header, .taib-mini-qr-content .modal-footer { border-color: var(--taib-line); }
.taib-mini-qr-content .modal-title { font-size: 1.05rem; font-weight: 900; color: var(--taib-green); }
.taib-mini-qr-subtitle { color: var(--taib-muted); font-size: .9rem; }
.taib-mini-qr-box { width: 220px; min-height: 220px; margin: 0 auto; padding: 10px; border: 2px solid var(--taib-line); border-radius: 16px 20px 16px 20px; background: #fff; }
.taib-mini-qr-box img, .taib-mini-qr-box canvas { width: 200px !important; height: 200px !important; }
.taib-mini-qr-hint { color: var(--taib-muted); font-size: .84rem; }

.taib-school-hero { padding: clamp(38px, 6vw, 70px) 0; background: var(--taib-cream); }
.taib-back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; color: var(--taib-green); font-weight: 900; text-decoration: none; }
.taib-school-identity { display: flex; align-items: center; gap: 24px; }
.taib-school-identity > img { width: 148px; height: 118px; flex: 0 0 148px; padding: 12px; border: 2px solid var(--taib-line); border-radius: 20px; background: #fff; object-fit: contain; }
.taib-school-identity h1 { margin: 0 0 10px; color: var(--taib-green); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 900; line-height: 1.25; }
.taib-school-identity p:last-child { max-width: 680px; margin: 0; color: var(--taib-muted); }
.taib-school-qr-panel { padding: 24px; border: 2px solid var(--taib-line); border-radius: 24px; background: #fff; text-align: center; box-shadow: var(--taib-shadow); }
.taib-school-qr-panel .taib-qr { margin-top: 0; }
.taib-school-qr-panel h2 { color: var(--taib-green); font-size: 1.25rem; font-weight: 900; }
.taib-school-qr-panel p { color: var(--taib-muted); font-size: .9rem; }
.taib-school-content h2 { margin-bottom: 6px; }
.taib-search-label { display: block; margin-bottom: 6px; color: var(--taib-green); font-size: .88rem; font-weight: 900; }
.taib-search-box { display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 2px solid var(--taib-line); border-radius: 999px; background: #fff; }
.taib-search-box i { color: var(--taib-leaf); }
.taib-search-box input { width: 100%; min-height: 48px; border: 0; outline: 0; background: transparent; }
.taib-school-work-list { display: grid; gap: 12px; }
.taib-school-work { overflow: hidden; border: 2px solid var(--taib-line); border-radius: 20px; background: #fff; box-shadow: 0 5px 16px rgba(122, 96, 58, .07); }
.taib-school-work-summary { display: grid; width: 100%; grid-template-columns: 50px 1fr 24px; gap: 15px; align-items: center; padding: 16px 20px; border: 0; background: transparent; color: var(--taib-ink); text-align: left; }
.taib-work-number { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 50%; background: var(--taib-yellow); color: var(--taib-ink); font-family: var(--taib-font-number); font-weight: 900; }
.taib-work-heading { min-width: 0; }
.taib-work-heading small, .taib-work-heading strong, .taib-work-heading em { display: block; }
.taib-work-heading small { color: var(--taib-leaf); font-size: .76rem; font-weight: 900; }
.taib-work-heading strong { overflow-wrap: anywhere; font-size: 1.05rem; font-weight: 900; }
.taib-work-heading em { color: var(--taib-muted); font-size: .86rem; font-style: normal; }
.taib-school-work-summary > i { color: var(--taib-leaf); transition: transform .2s ease; }
.taib-school-work-summary:not(.collapsed) > i { transform: rotate(180deg); }
.taib-school-work-detail { display: grid; grid-template-columns: minmax(220px, .7fr) 1.5fr; gap: 28px; padding: 22px 24px 28px 85px; border-top: 2px solid var(--taib-line); background: #fffdf8; }
.taib-school-work-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 7px 14px; margin: 0; }
.taib-school-work-detail dt { color: var(--taib-muted); font-size: .88rem; }
.taib-school-work-detail dd { margin: 0; }
.taib-school-work-detail h3 { color: var(--taib-green); font-size: 1rem; font-weight: 900; }
.taib-no-results i { color: var(--taib-leaf); font-size: 2rem; }
.taib-no-results h3 { margin-top: 8px; color: var(--taib-green); font-weight: 900; }
.taib-school-next { padding: 64px 0; }

.taib-footer { padding: 48px 0 20px; border-top: 2px solid var(--taib-line); background: var(--taib-cream); }
.taib-footer h2 { color: var(--taib-green); font-size: 1.7rem; font-weight: 900; }
.taib-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; margin-top: 32px; padding-top: 16px; border-top: 2px solid var(--taib-line); color: var(--taib-muted); font-size: .84rem; }
.taib-footer-view-count { display: inline-flex; align-items: center; gap: 6px; color: var(--taib-green); font-weight: 800; white-space: nowrap; }
/* ==========================================================================
   可愛裝飾層 —— 依「藝植綻放 網站版.dc.html」主視覺還原
   點點紙背景 / 紙膠帶貼紙 / 手繪圓角 / 漂浮葉子 / 螢光筆底線
   ========================================================================== */

@keyframes taib-sway { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-8px); } }
@keyframes taib-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes taib-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }

/* 1. 點點紙背景 ---------------------------------------------------------- */
body {
    background-color: var(--taib-paper);
    background-image: radial-gradient(circle, rgba(143, 191, 90, .13) 1.7px, transparent 1.8px);
    background-size: 26px 26px;
}
.taib-hero, .taib-section-cream, .taib-school-hero, .taib-stats, .taib-footer {
    background-image: radial-gradient(circle, rgba(217, 144, 26, .13) 1.7px, transparent 1.8px);
    background-size: 24px 24px;
}
.taib-visit {
    background-image:
        radial-gradient(circle at 10% 18%, rgba(245, 179, 53, .18), transparent 22%),
        radial-gradient(circle at 88% 16%, rgba(130, 196, 214, .16), transparent 20%),
        radial-gradient(circle, rgba(253, 245, 230, .12) 1.7px, transparent 1.8px);
    background-size: auto, auto, 26px 26px;
}

/* 2. 手繪感不對稱圓角 ---------------------------------------------------- */
.taib-info-panel, .taib-purpose-panel, .taib-visit-card,
.taib-theme-card, .taib-artwork-card, .taib-school-card,
.taib-modal-content, .taib-school-qr-panel, .taib-empty-filter,
.taib-no-results, .taib-school-work { border-radius: 22px 26px 22px 26px; }
.taib-poster { border-radius: 24px 28px 24px 28px; }
.taib-stat-card { border-radius: 20px 24px 20px 24px; }
.taib-qr { border-radius: 16px 20px 16px 20px; }
.taib-navbar .navbar-toggler { border-radius: 16px 14px 16px 14px; }

/* 3. 紙膠帶貼紙（主視覺海報上緣） ---------------------------------------- */
.taib-poster::before, .taib-poster::after {
    content: "";
    position: absolute;
    top: -13px;
    width: 96px;
    height: 30px;
    border-radius: 4px;
    pointer-events: none;
}
.taib-poster::before { left: 34px; background: rgba(245, 179, 53, .55); transform: rotate(-4deg); }
.taib-poster::after { right: 34px; background: rgba(143, 191, 90, .5); transform: rotate(3deg); }
.taib-poster { transition: transform .3s ease, box-shadow .3s ease; }
.taib-poster:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 22px 44px rgba(122, 96, 58, .26); }

/* 4. 貼紙式標籤（歪一點更可愛） ------------------------------------------ */
.taib-eyebrow { transform: rotate(-1.5deg); box-shadow: 0 4px 10px rgba(217, 144, 26, .18); }
.taib-pill { transform: rotate(-1.5deg); }
.taib-section-heading .taib-eyebrow { transform: rotate(-1.2deg); }

/* 5. 螢光筆底線（主標題「藝植綻放」） ------------------------------------ */
.taib-hero h1 span { position: relative; z-index: 0; }
.taib-hero h1 span::before {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    bottom: .12em;
    height: .28em;
    z-index: -1;
    border-radius: 999px;
    background: rgba(255, 217, 122, .8);
    transform: rotate(-1deg);
}

/* 6. 漂浮裝飾（大色塊圓形 + 搖擺小圖示） --------------------------------- */
.taib-hero, .taib-section, .taib-school-hero { position: relative; overflow: hidden; }
.taib-hero > .container, .taib-section > .container, .taib-school-hero > .container { position: relative; z-index: 1; }
.taib-blob {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}
.taib-blob-leaf { background: rgba(143, 191, 90, .16); }
.taib-blob-sun { background: rgba(245, 179, 53, .16); }
.taib-blob-pink { background: rgba(240, 160, 166, .16); }
.taib-blob-sky { background: rgba(130, 196, 214, .16); }
.taib-blob-tl { left: -60px; top: 40px; width: 220px; height: 220px; }
.taib-blob-tr { right: -70px; top: 30px; width: 240px; height: 240px; }
.taib-blob-br { right: -70px; bottom: -40px; width: 260px; height: 260px; }
.taib-blob-bl { left: -50px; bottom: 70px; width: 180px; height: 180px; }
.taib-float {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    font-size: 1.8rem;
}
.taib-float-leaf { color: var(--taib-light-leaf); animation: taib-sway 8s ease-in-out infinite; }
.taib-float-pink { color: var(--taib-pink); animation: taib-floaty 7s ease-in-out infinite; }
.taib-float-sun { color: var(--taib-yellow); animation: taib-sway 10s ease-in-out infinite; }
.taib-float-a { left: 6%; bottom: 12%; }
.taib-float-b { right: 9%; top: 15%; }
.taib-float-c { right: 7%; bottom: 8%; }

/* 7. 五色點點分隔線 ------------------------------------------------------ */
.taib-dots { display: flex; justify-content: center; gap: 14px; margin: 0 0 clamp(20px, 3vw, 36px); }
.taib-dots span { width: 12px; height: 12px; border-radius: 50%; animation: taib-floaty 4s ease-in-out infinite; }
.taib-dots span:nth-child(1) { background: var(--taib-yellow); animation-delay: 0s; }
.taib-dots span:nth-child(2) { background: var(--taib-light-leaf); animation-delay: .25s; }
.taib-dots span:nth-child(3) { background: var(--taib-pink); animation-delay: .5s; }
.taib-dots span:nth-child(4) { background: var(--taib-blue); animation-delay: .75s; }
.taib-dots span:nth-child(5) { background: var(--taib-orange); animation-delay: 1s; }

/* 8. 頑皮的互動：轉一下、彈一下 ------------------------------------------ */
.taib-brand-icon { transition: transform .3s ease; }
.taib-brand:hover .taib-brand-icon { transform: rotate(18deg) scale(1.08); }
.taib-navbar .nav-link { transition: background-color .22s ease, transform .22s ease; }
.taib-navbar .nav-link:hover { transform: translateY(-2px); }
.taib-navbar .taib-nav-cta:hover { transform: translateY(-2px) rotate(-1.5deg); }
.taib-primary-button:hover, .taib-light-button:hover { transform: translateY(-3px) rotate(-1deg) scale(1.02); }
.taib-theme-card { transition: transform .25s ease, box-shadow .25s ease; }
.taib-theme-card:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: 0 16px 30px rgba(122, 96, 58, .2); }
.taib-theme-card > i { transition: transform .25s ease; }
.taib-theme-card:hover > i { transform: rotate(-10deg) scale(1.1); }
.taib-school-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.taib-school-card:hover { transform: translateY(-6px) rotate(.6deg); border-color: var(--taib-light-leaf); box-shadow: 0 18px 34px rgba(122, 96, 58, .22); }
.taib-school-card .taib-qr { transition: transform .25s ease; }
.taib-school-card:hover .taib-qr { transform: scale(1.04) rotate(-1.5deg); }
.taib-stat-card { transition: transform .25s ease, box-shadow .25s ease; }
.taib-stat-card:hover { transform: translateY(-4px) rotate(-.8deg); box-shadow: 0 14px 28px rgba(122, 96, 58, .22); }
.taib-filter button, .taib-school-filters button { transition: transform .2s ease, border-color .2s ease, color .2s ease; }
.taib-filter button:hover, .taib-school-filters button:hover { transform: translateY(-2px) rotate(-2deg); border-color: var(--taib-orange); color: var(--taib-orange); }
.taib-like-button { transition: transform .2s ease, background-color .2s ease; }
.taib-like-button:hover { transform: scale(1.08) rotate(-6deg); }
.taib-like-button.liked i { animation: taib-pop .45s ease; }
.taib-qr-badge { transition: transform .2s ease, border-color .2s ease, color .2s ease; }
.taib-qr-badge:hover { transform: scale(1.1) rotate(6deg); border-color: var(--taib-light-leaf); color: var(--taib-leaf); }
.taib-footer .taib-outline-button:hover { background: var(--taib-yellow); border-color: var(--taib-yellow); transform: translateY(-3px) rotate(-1deg); }

/* 9. 作品卡：抬起時下方浮出柔和影子 -------------------------------------- */
.taib-artwork-card { position: relative; isolation: isolate; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.taib-artwork-card::after {
    content: "";
    position: absolute;
    inset: auto 20px 10px;
    z-index: -1;
    height: 28px;
    border-radius: 999px;
    background: rgba(51, 83, 44, .12);
    filter: blur(18px);
    opacity: 0;
    transform: translateY(8px) scale(.88);
    transition: opacity .35s ease, transform .35s ease;
}
.taib-artwork-card:hover { transform: translateY(-10px) scale(1.012); border-color: var(--taib-light-leaf); box-shadow: 0 28px 52px rgba(122, 96, 58, .26); }
.taib-artwork-card:hover::after { opacity: 1; transform: translateY(0) scale(1); }
.taib-artwork-image img { transition: transform .45s ease, filter .45s ease; }
.taib-artwork-card:hover .taib-artwork-image img { transform: scale(1.045); filter: saturate(1.06) contrast(1.02); }
.taib-artwork-badges span { transition: transform .25s ease; }
.taib-artwork-card:hover .taib-artwork-badges span:first-child { transform: translateY(-2px) rotate(-3deg); }

/* 10. 各校列表：小卡也要有表情 ------------------------------------------- */
.taib-school-work { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.taib-school-work:hover { transform: translateX(4px); border-color: var(--taib-light-leaf); box-shadow: 0 12px 24px rgba(122, 96, 58, .16); }
.taib-work-number { transition: transform .22s ease; }
.taib-school-work:hover .taib-work-number { transform: rotate(-10deg) scale(1.06); }
.taib-school-identity > img { transform: rotate(-2deg); transition: transform .3s ease; }
.taib-school-identity > img:hover { transform: rotate(2deg) scale(1.04); }

/* 11. 交通與參觀資訊 ----------------------------------------------------- */
.taib-visit-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.taib-visit-tags span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1.5px solid rgba(253, 245, 230, .35);
    border-radius: 999px;
    background: rgba(253, 245, 230, .14);
    font-size: .88rem;
    font-weight: 800;
}
.taib-visit-tags i { color: var(--taib-pale-yellow); }
.taib-visit-info > div > div {
    height: 100%;
    padding: 18px 20px;
    border: 1.5px solid rgba(253, 245, 230, .2);
    border-radius: 18px 22px 18px 22px;
    background: rgba(253, 245, 230, .12);
    transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}
.taib-visit-info > div > div:hover { transform: translateY(-4px) rotate(-.8deg); border-color: rgba(255, 217, 122, .4); background: rgba(253, 245, 230, .2); }
.taib-visit-info h3 { margin: 0 0 8px; color: var(--taib-pale-yellow); font-size: 1rem; font-weight: 900; }
.taib-visit-info p { margin: 0; color: rgba(253, 245, 230, .88); font-size: .92rem; }
.taib-visit-map {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(255, 217, 122, .4);
    border-radius: 22px 26px 22px 26px;
    background: linear-gradient(180deg, rgba(255, 251, 243, .98) 0%, #fff8ec 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}
.taib-visit-map iframe { flex: 1 1 260px; min-width: 260px; height: clamp(260px, 38vw, 400px); border: 0; border-radius: 16px; }
.taib-visit-map-side { flex: 0 0 168px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--taib-ink); text-align: center; }
.taib-visit-map-side p { margin: 0; color: var(--taib-muted); font-size: .82rem; font-weight: 800; line-height: 1.6; }
.taib-visit-map-side .taib-qr { width: 148px; min-height: 148px; margin: 4px auto; }

/* 12. 主辦、承辦與協辦單位 ----------------------------------------------- */
/* 主辦／承辦／協辦：每個單位獨立一張圖文卡，一眼看出圖對應哪個名稱 */
.taib-partner-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 14px;
    border: 2px solid var(--taib-line);
    border-radius: 20px 24px 20px 24px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(122, 96, 58, .1);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.taib-partner-card:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 16px 30px rgba(122, 96, 58, .18); }
.taib-partner-role { padding: 3px 12px; border-radius: 999px; background: var(--taib-pale-yellow); color: #6d4200; font-size: .72rem; font-weight: 900; letter-spacing: .04em; }
.taib-partner-card-host .taib-partner-role, .taib-partner-card-organizer .taib-partner-role { background: var(--taib-green); color: var(--taib-cream); }
.taib-partner-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; }
.taib-partner-logo img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .25s ease; }
.taib-partner-card:hover .taib-partner-logo img { transform: scale(1.08); }
.taib-partner-logo-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--taib-cream); color: var(--taib-green); font-size: 1.6rem; }
.taib-partner-name { margin: 0; color: var(--taib-ink); font-size: .92rem; font-weight: 800; line-height: 1.4; }

/* 13. 頁尾友善連結 -------------------------------------------------------- */
.taib-footer-contact { color: var(--taib-muted); font-size: .92rem; }
.taib-footer-contact a { color: var(--taib-leaf); font-weight: 800; }
.taib-footer-links-title { margin: 0 0 10px; color: #8b7b66; font-size: .86rem; font-weight: 900; letter-spacing: .06em; }
.taib-footer-links { display: flex; flex-wrap: wrap; gap: 10px; }
.taib-footer-links .taib-outline-button { min-height: 44px; padding: 10px 18px; font-size: .92rem; }
.taib-footer-links .taib-outline-button:nth-child(2n):hover { background: var(--taib-light-leaf); border-color: var(--taib-light-leaf); transform: translateY(-3px) rotate(1deg); }

/* ==========================================================================
   獲選作品標示（皇冠）與單一作品頁
   ========================================================================== */
.taib-crown-inline { color: var(--taib-yellow); }
.taib-school-awarded { display: block; margin-top: 4px; color: #a1481a; font-size: .84rem; font-style: normal; font-weight: 800; }
.taib-school-awarded i { color: var(--taib-yellow); margin-right: 4px; }

.taib-work-awarded { border-color: #e7c96b; background: linear-gradient(180deg, #fffaf0 0%, #fff 42%); }
.taib-work-awarded .taib-work-number { background: linear-gradient(140deg, #ffd97a, #f5b335); color: #7a4b00; }
.taib-award-tag { margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: #ffe3cc; color: #a1481a; font-size: .72rem; font-weight: 900; }
.taib-school-filters button i { margin-right: 5px; color: var(--taib-yellow); }
.taib-school-filters button.active i { color: var(--taib-pale-yellow); }

.taib-work-hero { padding-bottom: clamp(34px, 5vw, 60px); }
.taib-work-photo { position: relative; display: block; padding: 14px; border: 2px solid var(--taib-line); border-radius: 24px 28px 24px 28px; background: #fff; box-shadow: var(--taib-shadow); }
.taib-work-photo img { display: block; width: 100%; max-height: 68vh; border-radius: 16px; background: #f5f2ec; object-fit: contain; }
.taib-work-photo > span { position: absolute; right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 2px solid var(--taib-line); border-radius: 999px; background: rgba(255, 251, 243, .95); color: var(--taib-ink); font-size: .84rem; font-weight: 900; }
.taib-work-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.taib-work-thumbs img { width: 96px; height: 96px; border: 2px solid var(--taib-line); border-radius: 14px; background: #fff; object-fit: cover; transition: transform .25s ease, border-color .25s ease; }
.taib-work-thumbs img:hover { transform: translateY(-3px) rotate(-1.5deg); border-color: var(--taib-light-leaf); }

.taib-work-panel { padding: clamp(24px, 3vw, 32px); border: 2px solid var(--taib-line); border-radius: 22px 26px 22px 26px; background: #fff; box-shadow: 0 8px 24px rgba(122, 96, 58, .1); }
.taib-work-panel h1 { margin: 10px 0 6px; color: var(--taib-green); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; line-height: 1.35; }
.taib-work-panel .taib-artwork-badges span:first-child i { margin-right: 4px; color: #d9901a; }
.taib-work-artist { margin: 0; color: var(--taib-leaf); font-size: 1.05rem; font-weight: 800; }
.taib-work-artist i { margin-right: 6px; }
.taib-work-subtitle { margin: 24px 0 8px; color: var(--taib-green); font-size: 1.05rem; font-weight: 900; }
.taib-work-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.taib-work-like { min-height: 46px; padding: 10px 20px; font-size: 1rem; }

@media (min-width: 992px) {
    .taib-works-header { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: end; gap: 32px; }
    .taib-works-header > div:first-child { min-width: 0; }
    .taib-works-header .taib-filter { flex-wrap: nowrap; justify-content: flex-end; align-self: end; margin-bottom: 0; }
    .taib-school-filters { flex-wrap: nowrap; }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .taib-filter { display: grid; grid-template-columns: repeat(3, max-content); gap: 10px; }
    .taib-school-filters { display: grid; grid-template-columns: repeat(3, max-content); gap: 10px; }
}

@media (max-width: 991.98px) {
    .taib-navbar .navbar-nav { gap: 6px; align-items: stretch !important; }
    .taib-navbar .nav-link { padding: 12px 15px !important; border: 2px solid var(--taib-line); background: #fff; }
    .taib-navbar .taib-nav-cta { margin-left: 0; background: var(--taib-yellow); text-align: center; }
    .taib-filter { margin-top: 20px; }
    .taib-school-work-detail { grid-template-columns: 1fr; padding-left: 24px; }
    .taib-visit-map-side { flex: 1 1 100%; flex-direction: row; justify-content: center; gap: 16px; }
}

@media (max-width: 575.98px) {
    body { font-size: .96rem; background-size: 20px 20px; }
    .taib-blob, .taib-float { display: none; }
    .taib-dots { gap: 10px; }
    .taib-dots span { width: 10px; height: 10px; }
    .taib-poster::before, .taib-poster::after { width: 68px; height: 22px; top: -10px; }
    .taib-datebar { font-size: .74rem; }
    .taib-brand-icon { width: 40px; height: 40px; flex-basis: 40px; }
    .taib-brand small { font-size: .66rem; }
    .taib-brand strong { font-size: 1rem; }
    .taib-hero { padding-top: 30px; }
    .taib-hero h1 em { display: block; margin: 6px 0 0; }
    .taib-actions > a, .taib-actions > button { width: 100%; }
    .taib-poster { padding: 8px; border-radius: 20px; }
    .taib-poster img { border-radius: 14px; }
    .taib-poster > span { right: 14px; bottom: 14px; }
    .taib-stat-card { min-height: 108px; padding: 14px; }
    .taib-stat-card strong { font-size: 1.7rem; }
    .taib-theme-card { display: block; }
    .taib-theme-card > i { margin-bottom: 14px; }
    .taib-event-details, .taib-modal-meta { grid-template-columns: 1fr; gap: 2px; }
    .taib-event-details dd, .taib-modal-meta dd { margin-bottom: 9px; }
    .taib-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
    .taib-filter button { flex: 0 0 auto; }
    .taib-school-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
    .taib-school-filters button { width: 100%; }
    .taib-school-filters button:first-child { grid-column: 1 / -1; }
    .taib-school-identity { display: block; }
    .taib-school-identity > img { margin-bottom: 18px; }
    .taib-school-work-summary { grid-template-columns: 42px 1fr 18px; gap: 10px; padding: 14px; }
    .taib-work-number { width: 40px; height: 40px; }
    .taib-school-work-detail { padding: 20px; }
    .taib-visit-map { padding: 10px; }
    .taib-visit-map-side { flex-direction: column; }
    .taib-footer-links .taib-outline-button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .taib-float, .taib-dots span, .taib-like-button.liked i { animation: none !important; }
}