:root {
  --paper:#F7F0D8; --paper-deep:#EDE3BE; --card:#FFFFFF; --soft:#F0E6C4;
  --ink:#3A2E10; --body:#4A3C18; --muted:#7A6A32; --quiet:#8B7945;
  --bean:#E0B83A; --bean-bright:#F0D060; --bean-dark:#B89220;
  --leaf:#6A8A3A; --cream:#FFF8E8; --hair:rgba(224,184,58,.22);
  --stroke:rgba(224,184,58,.5); --shadow:0 12px 28px rgba(58,46,16,.08);
  --width:1120px;
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth; background:var(--paper); max-width:100%; overflow-x:clip}
body {margin:0; background:var(--paper); color:var(--body); font:400 15px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft Yahei","Noto Sans CJK SC",sans-serif; min-width:0; max-width:100%; overflow-x:clip; overflow-wrap:break-word}
a {color:inherit; text-decoration:none}
a:hover {color:var(--bean-dark)}
button,input {font:inherit}
button {cursor:pointer}
button,a,input { -webkit-tap-highlight-color:transparent}
:focus-visible {outline:3px solid var(--leaf); outline-offset:3px}
[hidden] {display:none!important}
img {max-width:100%; height:auto; vertical-align:middle; object-fit:contain; object-position:center}
h1,h2,h3,p,ol,ul {margin-top:0}
h1,h2,h3 {color:var(--ink); line-height:1.3; font-weight:750; letter-spacing:.01em}
h1 {font-size:24px} h2 {font-size:20px} h3 {font-size:16px}
p {margin-bottom:14px}
.wrap {width:100%; max-width:var(--width); margin-inline:auto; padding-inline:16px}
.site-top {position:sticky; top:0; width:100%; z-index:100; background:var(--cream); box-shadow:0 3px 16px rgba(58,46,16,.055)}
.beanline {height:22px; width:100%; background:var(--ink); color:var(--cream)}
.beanline-inner {height:22px; max-width:var(--width); margin:auto; padding:0 16px; display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0}
.beanline-brand {font-size:12px; font-weight:650; letter-spacing:.025em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.beanline-brand small {font-size:10px; letter-spacing:.09em; font-weight:550}
.beanline-search {display:flex; gap:6px; align-items:center; justify-content:center; height:22px; flex:none; padding:0 2px; background:transparent; border:0; color:var(--cream); font-size:12px; line-height:1}
.beanline-search {position:relative; isolation:isolate}
.beanline-search::before {content:""; position:absolute; inset:-11px -9px}
.search-glyph {display:inline-block; width:12px;height:12px; border:1.8px solid currentColor; border-radius:50%; position:relative; margin:0 3px 3px 0; flex:0 0 auto}
.search-glyph::after {content:""; position:absolute; width:6px; height:1.8px; background:currentColor; border-radius:2px; transform:rotate(45deg); right:-5px; bottom:-2px}
.podbar {height:60px; width:100%; border-bottom:1px solid var(--hair); background:#fff}
.podbar-inner {height:100%; max-width:var(--width); margin:auto; padding:0 16px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center}
.site-brand,.footer-brand,.drawer-brand {display:inline-flex; align-items:center; gap:10px; min-width:0; width:max-content; max-width:100%; color:var(--ink)}
.brand-image {max-width:180px; width:auto; height:28px; max-height:28px; object-fit:contain; background:transparent; border:0; box-shadow:none}
.brand-type {font-size:16px; font-weight:800; white-space:nowrap; color:var(--ink); letter-spacing:.03em; border:0; background:transparent}
.drawer-trigger {height:44px; min-width:82px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 13px; color:var(--ink); font-size:14px; font-weight:700; background:var(--cream); border:1px solid var(--stroke); border-radius:11px; transition:background .16s, transform .16s}
.drawer-trigger:hover,.drawer-trigger[aria-expanded="true"] {background:var(--bean-bright)}
.drawer-dots {display:grid; gap:3px; width:15px; flex:none}
.drawer-dots i {display:block; height:2px; width:100%; background:currentColor; border-radius:2px}
.app-shortcut {height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 15px; background:linear-gradient(135deg,#F0D060 0%,#E0B83A 55%,#B89220 100%); border:1px solid #c49a25; border-radius:11px; font-size:14px; font-weight:740; color:var(--ink); white-space:nowrap}
.app-shortcut:hover {color:var(--ink); filter:brightness(1.03)}
.storytabs {height:40px; background:var(--cream); border-bottom:1px solid var(--hair)}
.storytabs-inner {height:100%; display:flex; justify-content:center; align-items:stretch; gap:16px}
.storytabs a {min-width:76px; padding:0 15px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--body); border-radius:0 0 9px 9px}
.storytabs a:hover {background:var(--soft)}
.storytabs a.is-current {background:var(--bean); color:var(--ink)}
.noscript-links {display:flex; flex-wrap:wrap; gap:6px; background:#fff; padding:8px 16px; border-bottom:1px solid var(--stroke)}
.noscript-links a {font-size:13px; padding:5px 8px; background:var(--cream); border-radius:6px}
.site-main {min-height:45vh; padding-top:0; padding-bottom:66px}
.micro-tag {font-size:11px; color:var(--leaf); letter-spacing:.17em; font-weight:800; text-transform:uppercase}
.eyebrow {display:inline-flex; align-items:center; gap:9px; color:var(--leaf); text-transform:uppercase; font-size:11px; font-weight:760; letter-spacing:.12em}
.eyebrow::before {content:""; width:23px; height:2px; background:var(--bean)}
.btn {display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 19px; border:1px solid transparent; border-radius:11px; font-size:14px; font-weight:750; white-space:nowrap; transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover {transform:translateY(-1px)}
.btn-main {background:linear-gradient(135deg,#F0D060 0%,#E0B83A 55%,#B89220 100%); color:var(--ink); box-shadow:0 6px 12px rgba(184,146,32,.16); border-color:rgba(184,146,32,.4)}
.btn-main:hover {color:var(--ink); box-shadow:0 8px 16px rgba(184,146,32,.2)}
.btn-plain {border-color:var(--stroke); color:var(--ink); background:#fff}
.btn-plain:hover {background:var(--cream); color:var(--ink)}
.text-link {font-size:14px; color:var(--ink); font-weight:750; border-bottom:1px solid var(--bean-dark); padding-bottom:2px}
.text-link:hover {color:var(--leaf)}
.section {padding-top:42px}
.section-heading {display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:19px}
.section-heading h2 {margin:6px 0 0; font-size:20px}
.section-heading p {max-width:510px; margin:3px 0 0; color:var(--muted); font-size:14px}
.section-heading .text-link {flex:none}
.section-kicker {color:var(--leaf); font-size:11px; font-weight:800; letter-spacing:.16em}
.media-frame {background:var(--cream); border:1px solid var(--hair); border-radius:13px; overflow:hidden; min-height:120px; position:relative; isolation:isolate}
.media-frame img {width:100%; height:100%; display:block; object-fit:contain; object-position:center; background:var(--cream)}
.media-empty {position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; overflow:hidden; padding:24px 14px; background:radial-gradient(circle at 74% 25%,rgba(240,208,96,.47),transparent 37%),linear-gradient(132deg,#FFFDF4 0%,#FFF6D9 47%,#EDE1AD 100%); text-align:center; color:var(--ink)}
.media-empty::after {content:""; width:190px; height:190px; position:absolute; left:-54px; bottom:-90px; border:1px solid rgba(106,138,58,.2); border-radius:50%; pointer-events:none}
.media-bean {width:29px; height:42px; transform:rotate(-28deg); border-radius:57% 43% 56% 44% / 64% 54% 46% 36%; border:2px solid var(--bean-dark); background:linear-gradient(115deg,#F0D060,#C69D29); box-shadow:12px -7px 0 -10px var(--leaf),0 3px 12px rgba(184,146,32,.16)}
.media-small {font-size:10px; font-weight:780; letter-spacing:.22em; color:var(--leaf); position:relative; z-index:1}
.media-verse {display:block; font-size:14px; font-weight:700; color:var(--ink); position:relative; z-index:1; max-width:84%; line-height:1.5}
.media-hero {height:260px; width:100%}
.media-triptych {height:180px}
.media-editor {height:200px}
.media-feature {height:230px}
.media-app {height:335px; max-height:360px}
.media-article {height:220px}
.home-cover {padding-top:22px}
.home-cover-copy {padding:19px 3px 0; max-width:780px}
.home-cover-copy .mini-subtitle {font-size:12px; letter-spacing:.17em; color:var(--leaf); font-weight:800; margin:0 0 10px}
.home-cover-copy h1 {margin:0 0 11px}
.home-cover-copy p {font-size:15px; line-height:1.75; max-width:780px; margin:0 0 18px}
.button-pair {display:flex; flex-wrap:wrap; gap:11px}
.triptych {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px}
.channel-card {background:#fff; min-width:0; border:1px solid var(--hair); border-radius:13px; box-shadow:var(--shadow); overflow:hidden}
.channel-card .channel-copy {padding:19px 18px 22px}
.channel-card h3 {margin:4px 0 9px}
.channel-card p {font-size:14px; margin:0 0 13px; min-height:100px}
.channel-card .card-number {font-size:11px; font-weight:750; letter-spacing:.1em; color:var(--leaf)}
.editorial-panel {display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:25px; background:#fff; border:1px solid var(--hair); padding:20px; border-radius:13px; box-shadow:var(--shadow)}
.editorial-panel .editorial-copy {padding:4px 4px 3px 0}
.editorial-copy h3 {margin:10px 0 10px; font-size:18px}
.editorial-copy p {margin-bottom:13px}
.index-strip {list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.index-strip li a {display:flex; gap:9px; align-items:center; padding:11px 10px; background:var(--cream); border:1px solid var(--hair); border-radius:8px; font-size:14px; font-weight:700}
.index-strip li span {font-size:12px; color:var(--leaf); font-weight:800}
.index-strip li a:hover {background:var(--soft); color:var(--ink)}
.shelf-panel {background:var(--soft); border:1px solid var(--stroke); padding:19px; border-radius:13px}
.shelf-grid {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin-top:14px}
.shelf-card {min-width:0; display:block; padding:15px 15px 17px; border-radius:11px; border:1px solid var(--hair); background:#fff; border-top:4px solid var(--bean); min-height:150px}
.shelf-card:nth-child(3n+2) {border-top-color:var(--leaf)}
.shelf-card:nth-child(3n+3) {border-top-color:var(--bean-dark)}
.shelf-card:hover {box-shadow:var(--shadow); color:var(--ink)}
.shelf-card .slot {font-size:11px; letter-spacing:.15em; color:var(--leaf); font-weight:800}
.shelf-card strong {display:block; margin:9px 0 5px; color:var(--ink); font-size:16px}
.shelf-card p {font-size:13px; margin:0;color:var(--muted)}
.ranking-layout {display:grid; grid-template-columns:minmax(0,.63fr) minmax(0,1fr); gap:23px; align-items:start}
.rank-list {margin:0; padding:0; list-style:none; background:#fff; border:1px solid var(--hair); border-radius:12px; overflow:hidden}
.rank-list li+li {border-top:1px solid var(--hair)}
.rank-list a {display:flex; align-items:center; gap:13px; padding:13px 15px}
.rank-list .rank-num {font-size:25px; font-family:Georgia,serif; font-weight:700; color:var(--bean-dark); line-height:1; width:47px; flex:none}
.rank-list strong {font-size:15px; color:var(--ink); display:block}
.rank-list span.rank-desc {font-size:13px; color:var(--muted)}
.rank-list a:hover {background:var(--cream)}
.timeline-panel {display:grid; grid-template-columns:1fr minmax(0,.66fr); align-items:start; gap:22px}
.status-timeline {border-left:2px solid var(--stroke); margin-left:11px; padding:0 0 0 22px}
.status-item {position:relative; padding:0 0 17px}
.status-item:last-child {padding-bottom:0}
.status-item::before {content:""; position:absolute; top:7px; left:-30px; width:14px; height:14px; background:var(--bean); border:3px solid var(--cream); border-radius:50%; box-shadow:0 0 0 1px var(--bean-dark)}
.status-item h3 {margin:0 0 4px}
.status-item p {font-size:14px; margin:0}
.status-pill {display:inline-block; padding:2px 9px; border-radius:100px; background:var(--soft); border:1px solid var(--hair); color:var(--ink); font-size:12px; font-weight:700; margin-bottom:7px}
.notes-paper {display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:20px}
.notes-lines {background:repeating-linear-gradient(to bottom,#fff 0,#fff 38px,rgba(224,184,58,.16) 39px,rgba(224,184,58,.16) 40px); border:1px solid var(--hair); border-radius:12px; padding:22px 20px; min-height:235px}
.notes-lines p {font-size:15px; margin-bottom:15px}
.notes-mini {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px}
.notes-mini article {padding:15px; border:1px solid var(--hair); background:#fff; border-radius:10px}
.notes-mini h3 {margin:0 0 7px}
.notes-mini p {font-size:13px; margin:0}
.app-feature {display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:24px; align-items:center; padding:19px; border:1px solid var(--hair); border-radius:13px; background:#fff}
.app-feature .app-copy {padding:5px}
.app-copy p {margin-bottom:13px}
.service-split {display:grid; grid-template-columns:1fr 1fr; gap:14px}
.service-card {background:#fff; border:1px solid var(--hair); padding:19px; border-radius:12px}
.service-card h3 {margin-bottom:9px}
.service-card p {margin-bottom:0}
.faq-list {display:grid; grid-template-columns:1fr 1fr; gap:11px}
.faq-list details {background:#fff; border:1px solid var(--hair); border-radius:11px; padding:0 17px; align-self:start; min-width:0}
.faq-list summary {list-style:none; padding:14px 24px 14px 0; cursor:pointer; font-size:15px; font-weight:760; color:var(--ink); position:relative}
.faq-list summary::-webkit-details-marker {display:none}
.faq-list summary::after {content:"+"; font-size:19px; position:absolute; right:0; top:10px; color:var(--bean-dark)}
.faq-list details[open] summary::after {content:"−"}
.faq-list details p {font-size:14px; padding:0 0 14px; margin:0; color:var(--body)}
.brand-statement {padding:24px; background:linear-gradient(110deg,#FFF9E6,#F0E6C4); border:1px solid var(--hair); border-radius:13px}
.brand-statement p {max-width:950px}
.brand-statement p:last-child {margin:0}
.hero-caption {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px}
.hero-caption .brand-stamp {font-size:11px; color:var(--leaf); letter-spacing:.12em; font-weight:800}
/* Interior pages: different reading treatments share only the base system */
.article-shell {padding-top:24px}
.article-hero {padding:22px 0 21px; border-bottom:1px solid var(--stroke)}
.article-hero .folio-label {color:var(--leaf); font-size:11px; letter-spacing:.18em; font-weight:800}
.article-hero h1 {margin:9px 0 13px; max-width:750px}
.article-lead {max-width:930px; font-size:15px; line-height:1.8; margin:0}
.article-feature {display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:22px; align-items:stretch; padding:24px 0}
.article-feature figure {margin:0; min-width:0}
.feature-note {background:#fff; border:1px solid var(--hair); border-radius:12px; padding:20px 23px; display:flex; flex-direction:column; justify-content:center}
.feature-note h2 {font-size:18px; margin:0 0 10px}
.feature-note p {margin:0}
.feature-note .mini-rule {height:3px; background:var(--bean); width:36px; border-radius:3px; margin:0 0 12px}
.chapter-heading {margin:10px 0 20px; display:flex; align-items:center; gap:13px}
.chapter-heading::after {content:""; height:1px; background:var(--stroke); flex:1}
.chapter-heading h2 {margin:0; font-size:20px}
.chapter-list {display:grid; gap:15px}
.chapter-item {background:#fff; border:1px solid var(--hair); border-radius:12px; padding:22px 22px 20px; min-width:0}
.chapter-item h3 {font-size:16px; margin:0 0 11px}
.chapter-item p {margin:0 0 10px; font-size:15px; line-height:1.75}
.chapter-item p:last-child {margin:0}
.article--folio .chapter-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.article--folio .chapter-item {border-top:3px solid var(--bean)}
.article--directory .chapter-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.article--directory .chapter-item {background:var(--cream)}
.article--directory .chapter-item:nth-child(2n) {background:#fff}
.article--shelf .chapter-list {grid-template-columns:1fr}
.article--shelf .chapter-item {display:grid; grid-template-columns:160px 1fr 1fr; gap:18px; border-left:5px solid var(--bean)}
.article--shelf .chapter-item h3 {margin:0; align-self:center; font-size:17px}
.article--shelf .chapter-item p {margin:0}
.article--notebook .chapter-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.article--notebook .chapter-item {background:repeating-linear-gradient(to bottom,#fff 0px,#fff 38px,rgba(224,184,58,.12) 39px,rgba(224,184,58,.12) 40px)}
.article--numbers .chapter-list {grid-template-columns:1fr 1fr}
.article--numbers .chapter-item {border-top:4px solid var(--bean); background:var(--cream)}
.article--timeline .chapter-list {display:block; margin:0 0 0 18px; padding:0 0 0 24px; border-left:2px solid var(--bean)}
.article--timeline .chapter-item {position:relative; margin-bottom:14px}
.article--timeline .chapter-item::before {content:""; display:block; position:absolute; left:-34px; top:23px; width:17px; height:17px; background:var(--bean); border-radius:50%; border:4px solid var(--cream); box-shadow:0 0 0 1px var(--bean-dark)}
.article--manual .chapter-list {grid-template-columns:1fr; counter-reset:manual}
.article--manual .chapter-item {display:grid; grid-template-columns:160px minmax(0,1fr) minmax(0,1fr); gap:18px; border-left:4px solid var(--leaf)}
.article--manual .chapter-item h3 {align-self:center}
.article--manual .chapter-item p {margin:0}
.article--library .chapter-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.article--library .chapter-item {background:#fff; border-top:6px solid var(--leaf)}
.article--library .chapter-item:nth-child(even) {border-top-color:var(--bean)}
.article--legal .chapter-list {grid-template-columns:1fr 1fr}
.article--legal .chapter-item {border:0; border-left:3px solid var(--stroke); border-radius:0; padding:14px 22px; background:transparent}
.article--brand .chapter-list {grid-template-columns:1fr 1fr}
.article--brand .chapter-item {background:linear-gradient(150deg,#fff,#FFF8E8)}
.article--product .article-feature {grid-template-columns:minmax(0,.55fr) 1fr}
.article--product .media-article {height:285px}
.article--product .chapter-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.article--product .chapter-item {background:var(--cream)}
.article-quick {padding-top:24px}
.article-quick-grid {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.article-quick-grid article {background:var(--soft); border:1px solid var(--hair); border-radius:11px; padding:16px; min-width:0}
.article-quick-grid h3 {margin-bottom:8px}
.article-quick-grid p {font-size:13px; line-height:1.7; margin:0}
.article-ending {margin-top:24px; padding:20px 22px; background:#fff; border-left:4px solid var(--bean); border-radius:0 10px 10px 0}
.article-ending p {margin:0}
.related-reads {margin-top:29px; border-top:1px solid var(--stroke); padding-top:22px}
.related-reads h2 {margin:0 0 13px}
.related-links {display:flex; flex-wrap:wrap; gap:10px}
.related-links a {min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:8px 15px; border:1px solid var(--stroke); border-radius:9px; background:#fff; color:var(--ink); font-weight:700; font-size:14px}
.related-links a:hover {background:var(--cream)}
.full-faq {padding-top:22px}
.faq-intro {padding:20px; background:#fff; border:1px solid var(--hair); border-radius:13px; margin-bottom:20px}
.faq-intro p {margin:0}
.faq-list.full {grid-template-columns:1fr}
.faq-list.full details {padding:0 20px}
.faq-list.full summary {font-size:16px}
.faq-list.full details p {font-size:15px; line-height:1.75}
/* Common footer */
.site-footer {background:var(--ink); color:var(--paper); font-size:13px; line-height:1.8; padding:32px 0 20px}
.footer-head {display:flex; justify-content:space-between; align-items:center; gap:25px; padding-bottom:21px; border-bottom:1px solid rgba(240,208,96,.27)}
.footer-brand {display:inline-flex; gap:10px; flex-wrap:wrap; color:var(--cream)}
.footer-brand .brand-type {font-size:16px; color:var(--cream)}
.footer-brand .brand-image {filter:none; object-fit:contain}
.footer-en {font-size:11px; letter-spacing:.16em; color:var(--bean-bright); font-weight:750}
.footer-head p {max-width:550px; margin:0; color:var(--paper); opacity:.92}
.footer-columns {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; padding-top:22px; padding-bottom:23px}
.footer-columns section {display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.footer-columns h2 {color:var(--bean-bright); font-size:13px; margin:0 0 6px}
.footer-columns a {color:var(--paper); padding:2px 0}
.footer-columns a:hover,.footer-last a:hover {color:var(--bean-bright)}
.footer-disclaimer {padding-block:16px; border-top:1px solid rgba(240,208,96,.25); border-bottom:1px solid rgba(240,208,96,.15); color:var(--paper); opacity:.88}
.footer-last {display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:14px; color:var(--paper); opacity:.92}
.footer-last a {color:var(--cream); white-space:nowrap}
/* Fully hidden overlays must not capture clicks after closure */
.screen-mask {position:fixed; inset:0; z-index:199; background:rgba(31,25,10,.47); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s,visibility .18s}
.screen-mask.is-open {opacity:1; visibility:visible; pointer-events:auto}
.pod-drawer {position:fixed; top:0; bottom:0; left:0; width:min(400px,86vw); z-index:210; background:#fff; border-right:1px solid var(--hair); display:flex; flex-direction:column; transform:translateX(-105%); visibility:hidden; pointer-events:none; transition:transform .2s,visibility .2s}
.pod-drawer.is-open {transform:translateX(0); visibility:visible; pointer-events:auto}
.drawer-head {height:73px; flex:none; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:15px 17px; border-bottom:1px solid var(--hair); background:var(--cream)}
.drawer-brand .brand-image {max-width:160px; height:28px}
.close-round {width:44px; height:44px; border:1px solid var(--stroke); background:#fff; color:var(--ink); font-size:27px; line-height:1; border-radius:10px; flex:none}
.close-round:hover {background:var(--soft)}
.drawer-scroll {overflow-y:auto; overscroll-behavior:contain; padding:18px 18px 36px; min-height:0}
.drawer-group {margin-bottom:20px}
.drawer-group h2 {font-size:13px; color:var(--leaf); border-bottom:1px solid var(--hair); padding-bottom:9px; margin-bottom:3px}
.drawer-link {display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 8px; padding:12px 4px; border-bottom:1px solid rgba(224,184,58,.13)}
.drawer-link strong {font-size:15px; color:var(--ink)}
.drawer-link span {grid-column:1; color:var(--muted); font-size:13px; line-height:1.6}
.drawer-link b {grid-column:2; grid-row:1/3; align-self:center; color:var(--bean-dark); font-size:16px}
.drawer-link:hover {background:var(--cream)}
.search-panel {position:fixed; top:82px; right:max(16px,calc((100vw - 1120px)/2 + 16px)); width:min(620px,calc(100vw - 32px)); max-height:calc(100dvh - 102px); overflow-y:auto; z-index:220; background:#fff; border:1px solid var(--stroke); border-radius:0 0 14px 14px; box-shadow:0 22px 46px rgba(58,46,16,.24); padding:23px; opacity:0; transform:translateY(-8px); visibility:hidden; pointer-events:none; transition:opacity .17s,transform .17s,visibility .17s}
.search-panel.is-open {opacity:1; transform:translateY(0); visibility:visible; pointer-events:auto}
.search-head {display:flex; justify-content:space-between; align-items:start; gap:14px; margin-bottom:18px}
.search-head h2 {margin:3px 0 0}
.search-label {display:block; margin-bottom:8px; font-size:14px; font-weight:700}
.search-input-wrap {display:flex; gap:11px; align-items:center; border:1px solid var(--stroke); border-radius:10px; background:var(--cream); padding:0 13px; height:49px}
.search-input-wrap input {width:100%; height:100%; border:0; background:transparent; outline:0; color:var(--ink); font-size:15px; min-width:0}
.search-input-wrap:focus-within {outline:2px solid var(--leaf)}
.search-help {font-size:13px; margin:10px 0 13px; color:var(--muted)}
.search-results {display:grid; grid-template-columns:1fr 1fr; gap:9px}
.search-results a {border:1px solid var(--hair); border-radius:9px; padding:11px 13px; background:var(--cream)}
.search-results a:hover {background:var(--soft)}
.search-results b {display:block; font-size:14px; color:var(--ink)}
.search-results span {display:block; font-size:12px; color:var(--muted)}
.search-no-results {padding:12px; margin:7px 0; background:var(--cream); border-radius:8px}
html.overlay-open,body.overlay-open {overflow:hidden!important}
.mobile-bottom {display:none}
@media (max-width:850px) {
 .triptych {grid-template-columns:repeat(2,minmax(0,1fr))}
 .triptych .channel-card:last-child {grid-column:1/-1}
 .shelf-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .article--shelf .chapter-item,.article--manual .chapter-item {grid-template-columns:1fr 1fr}
 .article--shelf .chapter-item h3,.article--manual .chapter-item h3 {grid-column:1/-1}
 .article-quick-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px) {
 .site-top {box-shadow:0 2px 9px rgba(58,46,16,.06)}
 .storytabs {display:none}
 .podbar-inner {gap:8px}
 .drawer-trigger {min-width:72px; gap:6px; padding:0 10px}
 .app-shortcut {padding:0 10px}
 .brand-type {font-size:16px}
 .brand-image {max-width:105px; height:28px}
 .site-main {padding-bottom:90px}
 .section {padding-top:30px}
 .section-heading {align-items:start}
 .section-heading h2 {font-size:20px}
 .section-heading .text-link {font-size:13px; margin-top:18px}
 .home-cover {padding-top:16px}
 .home-cover-copy {padding-top:17px}
 .media-hero {height:260px}
 .triptych {grid-template-columns:1fr; gap:13px}
 .triptych .channel-card:last-child {grid-column:auto}
 .channel-card .channel-copy {padding:16px}
 .channel-card p {min-height:0}
 .editorial-panel,.ranking-layout,.timeline-panel,.notes-paper,.app-feature,.article-feature {grid-template-columns:1fr; gap:16px}
 .editorial-panel {padding:15px}
 .editorial-panel .editorial-copy {padding:0}
 .ranking-layout .media-frame {order:-1}
 .timeline-panel .media-frame {order:-1}
 .index-strip {grid-template-columns:1fr 1fr}
 .shelf-grid {grid-template-columns:1fr 1fr; gap:9px}
 .shelf-card {min-height:143px; padding:13px}
 .notes-mini {grid-template-columns:1fr 1fr}
 .app-feature {padding:14px}
 .app-feature .media-app {height:335px; order:-1}
 .app-feature .app-copy {padding:3px}
 .service-split {grid-template-columns:1fr}
 .faq-list {grid-template-columns:1fr}
 .footer-head {align-items:start; flex-direction:column; gap:12px}
 .footer-columns {grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
 .footer-last {align-items:start; flex-direction:column}
 .mobile-bottom {display:grid; position:fixed; left:0; right:0; bottom:0; z-index:80; grid-template-columns:repeat(5,minmax(0,1fr)); min-height:48px; padding-bottom:env(safe-area-inset-bottom,0px); background:#fff; border-top:1px solid var(--stroke); box-shadow:0 -4px 16px rgba(58,46,16,.08)}
 .mobile-bottom a {min-width:0; min-height:48px; padding:5px 2px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:12px; line-height:1.2; font-weight:700; color:var(--body); border-top:3px solid transparent}
 .mobile-bottom a.is-current {background:var(--bean-bright); color:var(--ink); border-top-color:var(--bean-dark)}
 .bottom-glyph {font-size:19px; line-height:1.2; height:22px; font-family:Arial,sans-serif; font-weight:400}
 .search-panel {inset:0; top:0; left:0; right:0; width:100%; max-height:100dvh; height:100dvh; border:0; border-radius:0; background:var(--ink); color:var(--cream); padding:27px 20px calc(32px + env(safe-area-inset-bottom,0px))}
 .search-panel .micro-tag {color:var(--bean-bright)}
 .search-panel h2,.search-panel .search-label {color:var(--cream)}
 .search-panel .close-round {background:var(--cream)}
 .search-panel .search-input-wrap {background:#FFF8E8}
 .search-panel .search-help {color:var(--paper)}
 .search-results {grid-template-columns:1fr}
 .search-results a {background:#FFF8E8; border:1px solid var(--bean-dark)}
 .search-results a span {color:var(--body)}
 .search-no-results {background:var(--soft); color:var(--ink)}
 .article-shell {padding-top:13px}
 .article-hero {padding:18px 0 18px}
 .article-feature {padding:17px 0}
 .article-feature .media-article {height:200px}
 .article--product .article-feature {grid-template-columns:1fr}
 .article--product .media-article {height:300px}
 .article--folio .chapter-list,.article--directory .chapter-list,.article--notebook .chapter-list,.article--numbers .chapter-list,.article--library .chapter-list,.article--legal .chapter-list,.article--brand .chapter-list,.article--product .chapter-list {grid-template-columns:1fr}
 .article--shelf .chapter-item,.article--manual .chapter-item {grid-template-columns:1fr; gap:7px}
 .article--shelf .chapter-item h3,.article--manual .chapter-item h3 {grid-column:auto}
 .chapter-item {padding:17px}
 .chapter-item p {font-size:15px}
 .article-quick-grid {grid-template-columns:1fr 1fr; gap:8px}
 .article-quick-grid article {padding:13px}
 .article-quick-grid p {font-size:13px}
 .related-links a {flex:1; min-width:90px}
}
@media (max-width:360px) {
 .beanline-brand small {font-size:9px; letter-spacing:0}
 .drawer-trigger {min-width:66px; padding:0 8px}
 .drawer-trigger span:last-child {font-size:13px}
 .app-shortcut {padding:0 8px; font-size:13px}
 .podbar-inner {gap:7px}
 .shelf-grid,.notes-mini,.article-quick-grid {grid-template-columns:1fr}
 .shelf-card {min-height:0}
 .index-strip {grid-template-columns:1fr}
 .button-pair .btn {flex:1}
}
@media (prefers-reduced-motion:reduce) {
 html {scroll-behavior:auto}
 *,*::before,*::after {transition:none!important; animation:none!important}
}