/* Mobile is the default layout. Wider screens expand the same reading hierarchy. */
.shell { width: calc(100% - 40px); }
a, button { touch-action: manipulation; }
.site-header:has(.main-nav) { padding-bottom: 0; }
.site-header .header-inner {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "nav nav";
    height: auto; gap: 0; padding-top: 14px;
}
.site-header .brand { grid-area: brand; min-height: 44px; gap: 10px; }
.site-header .brand-icon { width: 31px; height: 31px; }
.site-header .brand > span { font-size: 25px; letter-spacing: 3px; }
.site-header .brand small { display: none; }
.site-header .header-actions { grid-area: actions; gap: 4px; }
.site-header .search-link, .site-header .saved-link { min-width: 44px; min-height: 44px; justify-content: center; }
.site-header .saved-link > span { display: none; }
.site-header .main-nav {
    grid-area: nav; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: static; width: 100%; height: auto; gap: 0; padding: 8px 0 0;
    background: transparent; border: 0; box-shadow: none;
}
.site-header .main-nav a { min-height: 48px; justify-content: center; font-size: 15px; padding: 0 5px; }
.site-header .main-nav a[aria-current] { font-weight: 600; }
.site-header .main-nav a[aria-current]:after { bottom: -1px; left: 20%; right: 20%; }

/* Short, legible first view; the daily quotation shares one frame with local photography. */
.hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 30px 0 32px; }
.hero-copy > .eyebrow { display: none; }
.hero h1 { font-size: clamp(28px, 8.2vw, 34px); line-height: 1.5; letter-spacing: -.6px; margin: 0 0 15px; white-space: normal; }
.hero-description { font-size: 15px; line-height: 1.85; letter-spacing: 0; margin-bottom: 22px; }
.search-form { height: 54px; }
.search-form > .icon { margin: 0 12px; width: 19px; }
.search-form input { font-size: 16px; }
.search-form button { width: 48px; }
.quick-topics { gap: 6px 10px; font-size: 13px; margin-top: 12px; }
.quick-topics > span { display: none; }
.quick-topics a { min-height: 44px; display: inline-flex; align-items: center; padding: 4px 15px; border-radius: 3px; background: transparent; text-decoration: underline; text-underline-offset: 7px; text-decoration-color: #aebbac; }
.hero-visual { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); margin: 0; padding: 0; background: var(--sage); border-radius: 4px; overflow: hidden; min-height: 218px; }
.hero-image { grid-area: 1 / 2; height: 100%; min-height: 218px; width: 100%; border-radius: 0; object-position: center 64%; filter: none; }
.daily-note { grid-area: 1 / 1; position: static; width: auto; min-width: 0; padding: 20px 16px; background: transparent; box-shadow: none; }
.note-label { font-size: 12px; letter-spacing: 0; gap: 7px; }
.daily-note > p { font-size: 21px; line-height: 1.42; margin: 15px 0 10px; overflow-wrap: anywhere; }
.daily-chinese { font-size: 14px; line-height: 1.8; }
.daily-author { font-size: 12px; line-height: 1.6; margin-top: 15px; overflow-wrap: anywhere; }
.section-heading .eyebrow { display: none; }
.section-heading { gap: 12px; align-items: center; }
.section-heading h2 { font-size: clamp(21px, 5.8vw, 26px); }
.text-link { font-size: 12px; min-height: 44px; gap: 6px; }
.byline { font-size: 13px; }
.byline .byline-name { font: 14px/1.6 Georgia, var(--serif); color: var(--ink); margin: 0; }
.byline span { font-size: 12px; }
.quote-translation { font-size: 16px; }
.quote-list .quote-text { font-size: 25px; }
.page-heading { padding: 30px 0 26px; }
.page-heading h1 { font-size: clamp(27px, 8vw, 34px); }
.page-heading > p:last-child { font-size: 15px; }
.breadcrumb { gap: 9px; font-size: 12px; padding: 16px 0; align-items: center; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.reading-columns { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.reading-sidebar { display: none; }

/* The quote itself is the page; controls remain large without nested cards. */
.reader-paper { border: 0; background: transparent; padding: 10px 0 0; }
.reader-label { font-size: 12px; letter-spacing: .4px; margin-bottom: 24px; }
.reader-english { font-size: clamp(28px, 8vw, 34px); line-height: 1.43; letter-spacing: -.3px; }
.reader-chinese { font-size: 21px; line-height: 1.9; margin-top: 24px; }
.reader-author { font-size: 13px; line-height: 1.9; margin-top: 24px; overflow-wrap: anywhere; }
.reader-author-name { font: 16px/1.7 Georgia, var(--serif); margin-right: 8px; }
.reader-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--line); margin-top: 28px; padding: 7px 0; }
.reader-toolbar button { justify-content: center; min-height: 48px; min-width: 0; font-size: 14px; gap: 6px; padding: 6px 2px; border-radius: 0; line-height: 1.4; }
.reader-toolbar button + button { border-left: 1px solid var(--line); }
.reader-toolbar .icon { width: 18px; height: 18px; }
.reader-topics { font-size: 13px; gap: 8px; margin-top: 20px; }
.reader-topics > span { width: 100%; margin: 0; }
.reader-topics a { min-height: 44px; display: inline-flex; align-items: center; padding: 7px 16px; }
.related-section { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 26px; }
.compact .quote-translation { font-size: 16px; }
.filter-tabs { gap: 24px; overflow-x: auto; }
.filter-tabs a { min-height: 48px; display: inline-flex; align-items: center; flex-shrink: 0; font-size: 14px; }
.article-card .text-link { min-height: 44px; }
.article-card-body > p { font-size: 14px; }
.directory-item small, .directory-tools > span { font-size: 12px; }
.pagination { gap: 10px; font-size: 13px; }
.pagination > span { font-size: 12px; text-align: center; }
.pagination a { padding: 0 12px; }
.footer-top > a:last-child { font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; }
.footer-top > p { font-size: 13px; }
.footer-bottom { font-size: 12px; }
.footer-bottom nav { gap: 2px 18px; }
.footer-bottom a { min-height: 44px; display: inline-flex; align-items: center; }

/* Dictionary controls follow the same touch and text sizes. */
.word-search input, .word-detail-top .word-search input { font-size: 16px; }
.word-search button, .word-detail-top .word-search button { font-size: 15px; min-width: 54px; }
.word-search { min-height: 54px; }
.word-sections { gap: 4px 20px; padding-bottom: 6px; }
.word-sections a, .word-alphabet a, .word-more summary, .word-back { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.word-alphabet a { min-width: 40px; font-size: 14px; }
.word-more summary { cursor: pointer; font-size: 14px; justify-content: flex-start; }
.word-more summary::before { content: "+"; margin-right: 8px; }
.word-more[open] summary::before { content: "−"; }
.word-sections { font-size: 14px; }
.word-group-heading p { font-size: 14px; }
.word-group-heading > span { font-size: 12px; }
.word-categories a { font-size: 14px; }
.word-stats { font-size: 13px; letter-spacing: 0; }

@media (min-width: 621px) {
    .shell { width: calc(100% - 48px); }
    .hero { gap: 32px; }
    .hero-visual { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
    .daily-note { padding: 30px; }
    .daily-note > p { font-size: 27px; }
    .reader-paper { padding: 24px 0; }
    .reader-english { font-size: 38px; }
    .reader-toolbar { max-width: 520px; }
    .reader-topics > span { width: auto; margin-right: 8px; }
}
@media (min-width: 900px) {
    .shell { width: calc(100% - 64px); }
    .site-header .header-inner { display: flex; height: 88px; padding-top: 0; gap: 24px; }
    .site-header .main-nav { display: flex; width: auto; height: 100%; padding: 0; gap: 25px; }
    .site-header .main-nav a[aria-current]:after { bottom: 18px; left: 0; right: 0; }
    .site-header .brand { gap: 12px; }
    .site-header .brand small { display: block; }
    .site-header .saved-link > span { display: inline; }
    .site-header .header-actions { gap: 16px; }
    .hero { grid-template-columns: 1.18fr 1fr; gap: 56px; padding: 48px 0 62px; }
    .hero-copy > .eyebrow { display: flex; }
    .hero h1 { font-size: clamp(37px, 3.65vw, 52px); margin: 20px 0; letter-spacing: -1.5px; }
    .hero-description { margin-bottom: 28px; }
    .hero-visual { display: block; background: transparent; border-radius: 0; padding: 0 14px 23px 0; overflow: visible; }
    .hero-image { height: 457px; border-radius: 230px 230px 3px 3px; }
    .daily-note { position: absolute; bottom: 0; right: -16px; width: 292px; padding: 22px 24px; background: var(--white); box-shadow: 0 5px 18px #203b3110; }
    .daily-note > p { font-size: 23px; }
    .section-heading .eyebrow { display: block; }
    .section-heading h2 { font-size: 29px; }
    .reading-columns { grid-template-columns: minmax(0, 1fr) 240px; gap: 44px; }
    .reading-sidebar { display: block; }
    .reader-paper { padding: 28px 12px 24px 0; }
    .reader-english { font-size: clamp(34px, 3.1vw, 42px); }
    .page-heading h1 { font-size: 40px; }
}

/* Reserve a responsive cover box instead of using the intrinsic HTML height. */
.article-cover { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }