:root {
    --ink:#122b46;
    --body:#4d5c6d;
    --gold:#caa277;
    --brown:#90573d;
    --sand:#e3d7c6;
    --line:#e5e5e5;
    --header-height:76px
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:108px
}
body {
    margin:0;
    background:#f8f9fc;
    color:var(--body);
    font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
    font-size:16px;
    line-height:1.7
}
img {
    max-width:100%;
    height:auto;
    vertical-align:middle
}
a {
    color:var(--brown);
    text-decoration:none
}
a:hover {
    text-decoration:underline
}
button,input,select,textarea {
    font:inherit
}
button,a,input {
    touch-action:manipulation
}
button {
    cursor:pointer
}
h1,h2,h3 {
    color:var(--ink);
    line-height:1.4
}
h1 {
    font-size:clamp(28px,4vw,40px)
}
h2 {
    font-size:30px
}
p {
    margin:0 0 1.2em
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
    outline:3px solid var(--brown);
    outline-offset:4px
}
[hidden] {
    display:none!important
}
.screen-reader-text,.skip-link:not(:focus) {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0
}
.skip-link:focus {
    position:fixed;
    top:8px;
    left:8px;
    z-index:999999;
    padding:12px;
    background:white;
    color:var(--ink)
}
.site-header {
    position:sticky;
    top:0;
    z-index:100;
    background:white;
    border-bottom:1px solid #f2f2f2;
    box-shadow:0 2px 5px #00000004
}
.admin-bar .site-header {
    top:32px
}
.header-inner {
    min-height:var(--header-height);
    max-width:1440px;
    padding:8px 40px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:38px
}
.brand {
    display:block;
    flex:0 0 200px
}
.brand-logo {
    width:200px;
    max-height:60px;
    object-fit:contain
}
.primary-nav {
    margin-right:auto
}
.primary-nav .menu {
    display:flex;
    gap:24px;
    align-items:center;
    list-style:none;
    margin:0;
    padding:0
}
.primary-nav a {
    display:block;
    padding:12px 0;
    color:#262626;
    font-size:14px;
    white-space:nowrap
}
.primary-nav .current-menu-item>a {
    box-shadow:0 2px var(--gold)
}
.header-actions {
    display:flex;
    align-items:center;
    gap:22px
}
.icon-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:0;
    padding:8px;
    color:#272727;
    min-width:40px;
    min-height:40px
}
.account-link {
    display:flex;
    gap:8px;
    align-items:center;
    font-size:14px;
    color:#272727;
    white-space:nowrap
}
.menu-toggle {
    display:none
}
.site-search {
    padding:20px 40px;
    background:#faf8f5;
    border-top:1px solid var(--line)
}
.search-form {
    display:flex;
    gap:12px;
    max-width:800px;
    margin:auto
}
.search-form label {
    flex:1
}
.search-field {
    width:100%;
    padding:12px;
    border:1px solid #ccc;
    background:white
}
.search-submit {
    padding:10px 20px;
    border:0;
    background:var(--brown);
    color:white
}
.site-footer {
    text-align:center;
    background:white;
    padding:32px 20px;
    color:#5a5a5a;
    font-size:14px
}
.site-footer p {
    margin:0
}
.home-hero {
    background-image:var(--hero-image);
    background-position:center;
    background-size:cover;
    min-height:100svh
}
.hero-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:100svh
}
.hero-links {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:20px
}
.hero-links a {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:#fff;
    color:var(--link-color);
    border-radius:15px;
    padding:18px 40px;
    min-height:80px;
    font-size:30px;
    font-weight:500;
    line-height:1.45;
    transition:transform .15s
}
.hero-links a:hover {
    transform:translateY(-2px);
    text-decoration:none
}
.hero-links a span {
    font-size:27px
}
.hero-links a:nth-child(3) { color:#94796b; }
.feature-inner {
    max-width:1140px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center
}
.feature-card {
    margin:50px;
    padding:30px;
    background:white;
    border-radius:20px;
    box-shadow:0 0 30px #0002
}
.feature-card h2 {
    margin:0 0 18px;
    text-align:center;
    color:#000000;
    font-size:30px
}
.feature-card ul {
    list-style:none;
    margin:0;
    padding:0;
    color:#7f858d;
    font-size:18px;
    line-height:1.8
}
.feature-card li {
    display:flex;
    gap:12px;
    margin:4px 0
}
.feature-card li:before {
    content:'✔';
    color:#fbafaf;
    font-size:23px;
    font-weight:700
}
.feature-image img {
    display:block;
    width:100%
}
.teacher-section picture,.teacher-section img {
    display:block;
    width:100%
}
.reviews-section {
    padding:100px 20px;
    background-image:var(--reviews-image);
    background-size:cover;
    background-position:center
}
.reviews-grid {
    max-width:1140px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    align-items:start
}
.review-column {
    display:grid;
    gap:30px
}
.review-column:nth-child(2) {
    padding-top:50px
}
.review-column:nth-child(3) {
    padding-top:120px
}
.review-card {
    margin:10px;
    padding:20px;
    background:#fdfdfc;
    border-radius:5px;
    box-shadow:0 16px 20px #00000036;
    text-align:center
}
.review-avatar {
    display:block;
    width:100px;
    height:100px;
    object-fit:cover;
    border-radius:50%;
    margin:0 auto 20px
}
.review-card blockquote {
    margin:0;
    color:#7f858d;
    font-size:16px;
    line-height:1.65
}
.review-card p:last-child {
    margin-bottom:0
}
.course-feature {
    padding:100px 20px;
    background:#f8f9fc
}
.course-feature-inner {
    max-width:1140px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    align-items:center
}
.course-description {
    padding:0 50px
}
.course-description h2 {
    font-size:40px;
    font-weight:600;
    color:#000000;
    margin:0 0 20px
}
.course-copy {
    font-size:18px;
    font-weight:300;
    line-height:2
}
.course-button {
    display:inline-flex;
    gap:14px;
    align-items:center;
    padding:17px 30px;
    background:var(--gold);
    color:white;
    border-radius:3px;
    font-size:18px;
    letter-spacing:1.5px
}
.course-button:hover {
    background:#ae855e;
    color:white;
    text-decoration:none
}
.course-button span {
    font-size:24px
}
.course-feature-image img {
    display:block;
    width:100%
}
.course-brows {
    padding:80px 20px;
    background:var(--sand)
}
.course-brows .course-feature-image {
    grid-row:1;
    grid-column:1
}
.course-brows .course-description {
    grid-column:2;
    background:#fff;
    padding:20px 50px;
    margin:80px 0 80px 30px
}
.course-brows h2 {
    font-size:30px;
    font-weight:400
}
.course-nails .course-description {
    text-align:right;
    padding:0 50px 50px
}
.course-nails h2 {
    font-size:60px;
    font-weight:300
}
.content-shell {
    width:min(1140px,calc(100% - 40px));
    margin:0 auto;
    padding:55px 0 80px;
    min-height:65vh
}
.page-header {
    margin-bottom:32px
}
.page-header h1 {
    margin:0
}
.entry-content {
    overflow-wrap:anywhere
}
.archive-item {
    padding:24px 0;
    border-bottom:1px solid var(--line)
}
.course-cover {
    max-width:900px;
    margin-bottom:30px
}
.course-cover img {
    width:100%;
    max-height:500px;
    object-fit:cover
}
.linlin-empty {
    padding:36px;
    background:white;
    border:1px solid var(--line);
    border-radius:12px
}
.linlin-empty h2 {
    margin-top:0
}
.linlin-course-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px
}
.linlin-course-card {
    padding:24px;
    background:white;
    border:1px solid var(--line);
    border-radius:12px
}
.linlin-course-card img {
    width:100%;
    height:190px;
    object-fit:cover
}
.linlin-course-card h2 {
    font-size:24px
}
.linlin-text-link {
    font-weight:600
}
.button {
    display:inline-block;
    padding:10px 20px;
    background:var(--brown);
    color:white;
    border:0;
    border-radius:4px
}
@media(max-width:1100px) {
    .header-inner {
        padding:8px 20px;
        gap:20px
    }
    .header-actions {
        gap:8px
    }
    .primary-nav .menu {
        gap:18px
    }
    .brand {
        flex-basis:180px
    }
    .brand-logo {
        width:180px
    }
    .feature-card {
        margin:30px;
        padding:24px
    }
}
@media(max-width:1024px) {
    .hero-links { display:none; }
}
@media(max-width:900px) {
    .header-inner {
        flex-wrap:wrap
    }
    .brand {
        margin-right:auto
    }
    .menu-toggle {
        display:block;
        border:1px solid #ded7cf;
        background:white;
        border-radius:4px;
        padding:8px 12px;
        color:#333
    }
    .primary-nav {
        display:none;
        order:4;
        flex-basis:100%;
        margin:0
    }
    .primary-nav.is-open {
        display:block
    }
    .primary-nav .menu {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:10px 0
    }
    .primary-nav a {
        padding:12px
    }
    .header-actions .account-link span {
        display:none
    }
    .feature-inner {
        grid-template-columns:1fr
    }
    .feature-image {
        grid-row:1;
        padding:20px
    }
    .feature-image img {
        max-width:600px;
        margin:auto
    }
    .feature-card {
        margin:20px auto 50px;
        width:min(560px,calc(100% - 40px))
    }
    .hero-links a {
        font-size:25px;
        padding:16px 25px
    }
    .course-description {
        padding:0 20px
    }
    .course-brows .course-description {
        padding:24px;
        margin:20px 0
    }
    .reviews-grid {
        gap:10px
    }
    .review-card {
        margin:0;
        padding:16px
    }
    .review-card blockquote {
        font-size:14px
    }
}
@media(max-width:767px) {
    .admin-bar .site-header {
        top:46px
    }
    .header-inner {
        gap:8px
    }
    .brand {
        flex-basis:150px
    }
    .brand-logo {
        width:150px;
        max-height:50px
    }
    .header-actions {
        gap:0
    }
    .header-actions .icon-button {
        min-width:34px;
        padding:5px
    }
    .account-link {
        padding:5px
    }
    .menu-toggle {
        font-size:13px;
        padding:7px 9px
    }
    .site-search {
        padding:16px
    }
    .home-hero {
        background-position:center left;
        min-height:70svh
    }
    .hero-grid {
        min-height:70svh;
        display:block
    }
    .hero-links {
        display:none
    }
    .feature-card h2 {
        font-size:25px
    }
    .feature-card ul {
        font-size:15px
    }
    .feature-card li:before {
        font-size:19px
    }
    .reviews-section {
        padding:45px 20px
    }
    .reviews-grid {
        grid-template-columns:1fr;
        gap:24px
    }
    .review-column {
        gap:24px
    }
    .review-column:nth-child(n) {
        padding-top:0
    }
    .review-card {
        padding:24px
    }
    .review-card blockquote {
        font-size:16px
    }
    .course-feature {
        padding:50px 20px
    }
    .course-feature-inner {
        grid-template-columns:1fr;
        gap:30px
    }
    .course-description {
        padding:0 10px
    }
    .course-description h2 {
        font-size:34px
    }
    .course-copy {
        font-size:16px;
        line-height:1.7
    }
    .course-brows .course-description,.course-brows .course-feature-image {
        grid-column:auto;
        grid-row:auto
    }
    .course-brows .course-feature-image {
        grid-row:1
    }
    .course-brows .course-description {
        margin:0;
        padding:24px
    }
    .course-nails .course-description {
        text-align:center;
        padding:0 10px
    }
    .course-nails h2 {
        font-size:40px
    }
    .course-button {
        font-size:16px;
        padding:14px 24px
    }
    .content-shell {
        padding-top:32px
    }
    .linlin-course-grid {
        grid-template-columns:1fr
    }
    .search-form {
        gap:8px
    }
}
@media(max-width:420px) {
    .header-inner {
        padding:8px 12px
    }
    .brand {
        flex-basis:130px
    }
    .brand-logo {
        width:130px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        transition:none!important
    }
}