:root{--parch: #f2ece0;--parch-deep: #e8dfd0;--ink: #1c1812;--ink-mid: #4a4035;--ink-light: rgba(28, 24, 18, .38);--seal: #a83228;--seal-dim: rgba(168, 50, 40, .1);--rule: rgba(28, 24, 18, .12);--art-ease: cubic-bezier(.22, .61, .36, 1)}.articles-page{min-height:100vh;background:var(--parch);color:var(--ink);font-family:"Source Sans 3",Noto Sans TC,system-ui,sans-serif;position:relative}.articles-page:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");pointer-events:none;z-index:0}.articles-page>*{position:relative;z-index:1}.articles-hero{max-width:1100px;margin:0 auto;padding:72px 40px 56px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:32px;border-bottom:1px solid var(--rule)}.articles-hero:before{content:"Hsianghsing Tea · 茶葉專欄";display:block;grid-column:1 / -1;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-light);font-family:"Source Sans 3",sans-serif;margin-bottom:-12px;animation:artHeroIn .7s var(--art-ease) both}.articles-hero-title{font-family:"Noto Serif TC",serif;font-size:clamp(44px,7vw,80px);font-weight:300;color:var(--ink);margin:0 0 18px;line-height:1.1;letter-spacing:-.01em;animation:artHeroIn .7s .08s var(--art-ease) both}.articles-hero-sub{font-size:14px;color:var(--ink-mid);margin:0;line-height:1.8;font-weight:300;animation:artHeroIn .7s .16s var(--art-ease) both}.articles-hero-seal{width:88px;height:88px;flex-shrink:0;border:2px solid var(--seal);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;opacity:.55;animation:sealIn 1.1s .3s var(--art-ease) both;align-self:center}@keyframes sealIn{0%{opacity:0;transform:scale(.82) rotate(-10deg)}to{opacity:.55;transform:scale(1) rotate(0)}}.articles-hero-seal-text{font-family:"Noto Serif TC",serif;font-size:12px;font-weight:700;color:var(--seal);letter-spacing:.05em;writing-mode:vertical-rl;text-orientation:mixed;line-height:1}.articles-hero-seal-year{font-family:Playfair Display,serif;font-size:10px;color:var(--seal);letter-spacing:.08em}@keyframes artHeroIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.articles-filter{max-width:1100px;margin:0 auto;padding:28px 40px 0;display:flex;gap:0;overflow-x:auto;scrollbar-width:none}.articles-filter::-webkit-scrollbar{display:none}.filter-tab{padding:8px 20px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--ink-light);font-size:12px;font-family:"Source Sans 3",sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .2s var(--art-ease);white-space:nowrap;flex-shrink:0}.filter-tab:hover{color:var(--ink);border-bottom-color:var(--rule)}.filter-tab.active{color:var(--seal);border-bottom-color:var(--seal);font-weight:600}.articles-grid{max-width:1100px;margin:0 auto;padding:40px 40px 80px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:art-num}.articles-grid .article-card:first-child{grid-column:1 / 3;grid-row:1 / 3;border-right:1px solid var(--rule)}.articles-grid .article-card:first-child .article-card-cover,.articles-grid .article-card:first-child .article-card-cover-placeholder{aspect-ratio:4/3}.articles-grid .article-card:first-child .article-card-title{font-size:clamp(20px,2.8vw,28px);-webkit-line-clamp:3}.articles-grid .article-card:first-child .article-card-body{padding:28px 32px}.article-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-bottom:1px solid var(--rule);overflow:hidden;counter-increment:art-num;transition:background .3s var(--art-ease);animation:cardRise .6s var(--art-ease) both}@keyframes cardRise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.article-card:nth-child(1){animation-delay:.06s}.article-card:nth-child(2){animation-delay:.12s}.article-card:nth-child(3){animation-delay:.18s}.article-card:nth-child(4){animation-delay:.24s}.article-card:nth-child(5){animation-delay:.3s}.article-card:nth-child(n+6){animation-delay:.36s}.article-card:hover{background:var(--parch-deep)}.article-card-cover{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .5s var(--art-ease),filter .4s;filter:sepia(.18) brightness(.97)}.article-card:hover .article-card-cover{transform:scale(1.04);filter:sepia(0) brightness(1)}.article-card-cover-placeholder{width:100%;aspect-ratio:3/2;background:linear-gradient(135deg,var(--parch-deep) 0%,#ddd5c2 100%);display:flex;align-items:center;justify-content:center;font-size:40px;opacity:.45}.article-card-body{padding:20px 24px;flex:1;display:flex;flex-direction:column;gap:10px}.article-card-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.article-card-meta:before{content:counter(art-num,decimal-leading-zero);font-family:Playfair Display,serif;font-size:13px;font-style:italic;color:var(--seal);opacity:.65;flex-shrink:0}.article-category-badge{font-size:10px;padding:2px 8px;border:1px solid var(--seal);border-radius:0;color:var(--seal);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-family:"Source Sans 3",sans-serif;background:var(--seal-dim)}.article-date,.article-read-time{font-size:11px;color:var(--ink-light);font-family:"Source Sans 3",sans-serif;letter-spacing:.02em}.article-card-title{font-family:"Noto Serif TC",serif;font-size:17px;font-weight:400;color:var(--ink);line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:.02em}.article-card-summary{font-size:13px;color:var(--ink-mid);line-height:1.8;margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-weight:300}.article-card-footer{padding:0 24px 16px;display:flex;align-items:center;gap:10px;font-size:11px;font-family:"Source Sans 3",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--seal);transition:gap .2s var(--art-ease)}.article-card:hover .article-card-footer{gap:14px}.article-card-footer:after{content:"";flex:1;height:1px;background:var(--seal);opacity:.28;transition:opacity .2s}.article-card:hover .article-card-footer:after{opacity:.65}.articles-loading,.articles-empty{text-align:center;padding:80px 20px;color:var(--ink-light);font-size:14px;font-family:"Source Sans 3",sans-serif}.article-detail{max-width:720px;margin:0 auto;padding:0 40px 100px}.article-back-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 0;color:var(--seal);font-size:11px;font-family:"Source Sans 3",sans-serif;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;background:none;border:none;margin:32px 0 0;transition:gap .2s var(--art-ease)}.article-back-btn:hover{gap:12px}.article-hero{margin:28px 0 40px}.article-hero-cover{width:100%;border-radius:2px;aspect-ratio:16/9;object-fit:cover;display:block;filter:sepia(.12) brightness(.97)}.article-meta-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.article-title{font-family:"Noto Serif TC",serif;font-size:clamp(26px,4.5vw,38px);font-weight:400;color:var(--ink);line-height:1.4;margin:0 0 20px;letter-spacing:.01em}.article-author-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-light);padding-bottom:24px;border-bottom:1px solid var(--rule);margin-bottom:36px;font-family:"Source Sans 3",sans-serif;letter-spacing:.03em}.article-content{font-size:16px;line-height:2;color:var(--ink-mid)}.article-content h1,.article-content h2,.article-content h3{font-family:"Noto Serif TC",serif;color:var(--ink);margin:2.5em 0 .7em;line-height:1.4}.article-content h1{font-size:1.7em;font-weight:400}.article-content h2{font-size:1.25em;font-weight:400;padding-bottom:.4em;border-bottom:1px solid var(--rule)}.article-content h3{font-size:1.05em;font-weight:700;color:var(--seal)}.article-content p{margin:0 0 1.4em}.article-content img{width:100%;border-radius:2px;margin:2em 0;display:block;filter:sepia(.1) brightness(.97)}.article-content a{color:var(--seal);text-decoration:underline;text-decoration-color:#a8322859;text-underline-offset:4px;transition:text-decoration-color .2s}.article-content a:hover{text-decoration-color:var(--seal)}.article-content blockquote{margin:2em 0;padding:18px 24px;border-left:3px solid var(--seal);background:var(--seal-dim);border-radius:0 2px 2px 0;color:var(--ink-mid);font-style:italic;font-family:"Noto Serif TC",serif;font-size:1.02em;line-height:1.85}.article-content code{font-family:monospace;background:var(--parch-deep);padding:2px 6px;border-radius:2px;font-size:.88em;color:var(--seal);border:1px solid var(--rule)}.article-content pre{background:var(--parch-deep);border:1px solid var(--rule);border-radius:2px;padding:20px;overflow-x:auto;margin:1.5em 0}.article-content pre code{background:none;padding:0;color:var(--ink);border:none;font-size:.85em}.article-content table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:14px}.article-content th{background:var(--parch-deep);color:var(--ink);font-weight:700;padding:10px 16px;text-align:left;border-bottom:2px solid var(--rule);font-family:"Source Sans 3",sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.article-content td{padding:10px 16px;border-bottom:1px solid var(--rule);color:var(--ink-mid)}.article-content ul,.article-content ol{padding-left:1.5em;margin:0 0 1.4em}.article-content li{margin-bottom:.5em}.article-content ul li>a:only-child{display:flex;align-items:center;gap:12px;padding:12px 18px;margin:4px 0;background:var(--seal-dim);border:1px solid rgba(168,50,40,.2);border-left:3px solid var(--seal);border-radius:0 2px 2px 0;text-decoration:none;color:var(--ink);font-weight:600;font-size:.92em;transition:background .18s,transform .15s}.article-content ul li>a:only-child:before{content:"→";color:var(--seal);font-size:13px;flex-shrink:0}.article-content ul li>a:only-child:hover{background:#a8322824;transform:translate(4px)}.article-content ul:has(li>a:only-child){list-style:none;padding-left:0}.article-content hr{border:none;border-top:1px solid var(--rule);margin:2.5em 0}.related-products-section{margin-top:60px;padding:28px 32px;background:var(--parch-deep);border:1px solid var(--rule);border-radius:2px}.related-products-title{font-family:"Noto Serif TC",serif;font-size:18px;font-weight:400;color:var(--ink);margin:0 0 20px;letter-spacing:.04em}.related-products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.related-product-card{background:var(--parch);border-radius:2px;text-decoration:none;color:var(--ink);border:1px solid var(--rule);transition:border-color .2s var(--art-ease),transform .2s;display:flex;flex-direction:column;overflow:hidden}.related-product-card:hover{border-color:var(--seal);transform:translateY(-2px)}.related-product-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:sepia(.1) brightness(.97)}.related-product-img-placeholder{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:28px;background:var(--parch-deep)}.related-product-info{padding:10px 13px 14px}.related-product-name{font-family:"Noto Serif TC",serif;font-size:13px;font-weight:400;color:var(--ink);margin-bottom:6px;line-height:1.5}.related-product-cta{font-size:11px;color:var(--seal);font-weight:600;letter-spacing:.06em;font-family:"Source Sans 3",sans-serif}.latest-articles-section{padding:32px 0 8px}.latest-articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:16px}.latest-article-link{text-decoration:none;color:inherit;display:block}@media (max-width: 768px){.articles-hero{padding:48px 20px 36px;grid-template-columns:1fr}.articles-hero-seal{display:none}.articles-filter{padding:20px 20px 0}.articles-grid{grid-template-columns:1fr;padding:24px 20px 60px}.articles-grid .article-card:first-child{grid-column:unset;grid-row:unset;border-right:none}.articles-grid .article-card:first-child .article-card-cover,.articles-grid .article-card:first-child .article-card-cover-placeholder{aspect-ratio:3/2}.articles-grid .article-card:first-child .article-card-body{padding:20px}.article-detail{padding:0 20px 80px}.related-products-grid{grid-template-columns:1fr 1fr}}