/* Visual refresh: warm ivory, scholar green, restrained gold. Presentation only. */
:root{
  --cj-font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  --cj-paper:#f7f4eb;
  --cj-paper-light:#fcfaf5;
  --cj-paper-deep:#eee8d9;
  --cj-ink:#26372e;
  --cj-muted:#68736a;
  --cj-green:#4d6854;
  --cj-green-deep:#354f3d;
  --cj-green-soft:#e8ede4;
  --cj-gold:#a7833e;
  --cj-gold-soft:#e6d7b2;
  --cj-line:#ded9ca;
  --cj-shadow:0 10px 28px rgba(43,55,45,.08);
  color-scheme:light;
}
html{background:var(--cj-paper)}
body{
  color:var(--cj-ink)!important;
  background:var(--cj-paper)!important;
  font-family:var(--cj-font-family)!important;
  text-rendering:optimizeLegibility;
}
::selection{color:var(--cj-ink);background:var(--cj-gold-soft)}
a{ text-decoration-color:var(--cj-gold); text-underline-offset:.18em }
:focus-visible{outline:3px solid rgba(167,131,62,.58)!important;outline-offset:3px}
button,input,select,textarea{font-family:inherit}
button,a,[role="button"]{ -webkit-tap-highlight-color:rgba(77,104,84,.16) }

/* Footer component is styled later in its include, so these visual overrides are explicit. */
.site-footer{
  min-height:0!important;margin-top:48px!important;padding:20px 0 22px!important;
  border-top:1px solid var(--cj-gold-soft)!important;
  background:var(--cj-green-deep)!important;color:var(--cj-paper-light)!important
}
.footer-inner{
  max-width:1240px!important;min-height:0!important;padding:10px 24px!important;
  gap:clamp(18px,3vw,38px)!important
}
.footer-logo{width:68px!important;height:68px!important}
.footer-nav{gap:clamp(12px,2vw,24px)!important}
.footer-nav a{color:var(--cj-paper-light)!important;font-size:16px!important;transition:color .18s ease}
.footer-nav a:hover{color:var(--cj-gold-soft)!important}
.footer-social a{color:var(--cj-gold-soft)!important;transition:transform .18s ease,color .18s ease}
.footer-social a:hover{color:#fff!important;transform:translateY(-2px)}
.back-to-top{
  width:52px!important;height:52px!important;right:18px!important;bottom:18px!important;
  border:1px solid var(--cj-gold)!important;background:var(--cj-green-deep)!important;
  color:var(--cj-gold-soft)!important;box-shadow:0 5px 18px rgba(25,38,29,.22);
  transition:transform .2s ease,background-color .2s ease,color .2s ease
}
.back-to-top:hover{transform:translateY(-2px);background:var(--cj-green)!important;color:#fff!important}
@media(max-width:760px){
  .site-footer{margin-top:36px!important;padding:12px 0 20px!important}
  .footer-inner{padding:12px 18px!important;gap:14px!important}
  .footer-logo{width:56px!important;height:56px!important}
  .footer-nav{flex:1 1 100%!important;justify-content:center!important;flex-wrap:wrap!important;gap:8px 16px!important}
  .footer-nav a{font-size:15px!important}
  .footer-social{gap:12px!important;margin-left:auto!important}
  .back-to-top{width:46px!important;height:46px!important;right:12px!important;bottom:12px!important}
}
@media(max-width:460px){
  .footer-inner{justify-content:flex-start!important}
  .footer-nav{justify-content:flex-start!important;gap:8px 14px!important}
}
/* Shared header and footer */
.site-header,.cj-top{
  background:rgba(252,250,245,.97)!important;
  border-color:var(--cj-line)!important;
  box-shadow:0 3px 16px rgba(43,55,45,.035);
}
.header-inner{max-width:1440px;min-height:104px;padding:12px 28px;gap:34px}
.header-logo{width:78px;height:78px}
.main-nav{gap:clamp(18px,2.4vw,34px)}
.main-nav>a{color:var(--cj-ink)}
.main-nav>a:hover,.main-nav>a:focus-visible{color:var(--cj-green)!important}
.site-search-results{background:var(--cj-paper-light);border-color:var(--cj-line)}
.site-search-form{border-color:var(--cj-line);background:var(--cj-paper)}
.site-search-form:focus-within{border-color:var(--cj-green);box-shadow:0 0 0 3px rgba(77,104,84,.15)}
.site-search-input{color:var(--cj-ink)}
.site-search-submit:hover{background:var(--cj-green-soft);color:var(--cj-green-deep)}
.cj-brand,.cj-nav a{color:var(--cj-ink)}
.cj-nav a:hover,.cj-nav a.on{background:var(--cj-green-soft);color:var(--cj-green-deep)}
.cj-subnav{border-color:var(--cj-line)}
.cj-subnav a{color:var(--cj-muted)}
.cj-subnav a:hover,.cj-subnav a.on{color:var(--cj-green-deep)}
.cj-footer,footer{color:var(--cj-muted)}
.cj-footer{border-color:var(--cj-line);background:var(--cj-paper-light)}

/* Home: retain every section and its existing order */
.home-main{background:var(--cj-paper)}
.home-wrap{width:min(1240px,calc(100% - 56px))}
.home-section{padding-block:clamp(48px,6vw,76px)}
.home-copy{color:#4e5c52}
.home-copy a{color:var(--cj-green-deep)}
.hero{
  background:
    radial-gradient(ellipse at 70% 18%,rgba(230,215,178,.30),transparent 34%),
    linear-gradient(115deg,#eee8d9 0%,#e8ede4 54%,#f3ead8 100%);
}
.hero:before{opacity:.42}
.hero-copy{background:rgba(252,250,245,.9);backdrop-filter:blur(7px)}
.hero h1,.about-text h2,.feature-copy h2,.latest-head h2,.type-section h2,.social-about h2{
  color:var(--cj-green-deep);
  font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  letter-spacing:.025em;
}
.ig-button.follow{background:var(--cj-green);color:var(--cj-paper-light)}
.home-btn,.ig-button{
  border:1px solid var(--cj-green);
  border-radius:3px;
  background:var(--cj-green);
  color:var(--cj-paper-light);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.home-btn.green{background:var(--cj-paper-light);color:var(--cj-green-deep);border-color:var(--cj-gold)}
.home-btn:hover,.ig-button:hover{
  background:var(--cj-green-deep);color:#fff;transform:translateY(-2px);
  box-shadow:0 5px 14px rgba(43,55,45,.13)
}
.home-btn.green:hover{background:var(--cj-green-soft);color:var(--cj-green-deep)}
.home-note{color:var(--cj-muted)}
.about-text hr{border-color:var(--cj-gold-soft)}
.features,.latest{background:var(--cj-paper-light)}
.type-section{background:var(--cj-paper-deep)}
.article-card{background:var(--cj-paper-light);border:1px solid var(--cj-line);box-shadow:var(--cj-shadow)}
.article-category,.article-date{color:var(--cj-muted)}
.article-title{color:var(--cj-green-deep)}

.ig-empty{background:var(--cj-paper-deep);border-color:var(--cj-gold-soft);color:var(--cj-muted)}

/* Theory index */
.theory-main{width:min(1320px,calc(100% - 56px));padding-block:clamp(36px,5vw,64px)}
.theory-main h1,.theory-main .section-heading{color:var(--cj-green-deep);font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif}
.category-card{min-height:0;background:var(--cj-paper-light);border:1px solid var(--cj-line);box-shadow:0 5px 18px rgba(43,55,45,.055)}
.category-cover{background:var(--cj-paper-deep)}
.category-content{padding:clamp(16px,1.7vw,24px)}
.category-name{color:var(--cj-green-deep)}
.category-description{color:var(--cj-muted)}
.category-link{min-height:48px;min-width:96px;border:1px solid var(--cj-green);background:var(--cj-green);color:#fff;text-decoration:none}
.category-link:hover{background:var(--cj-green-deep)}
.latest-card{background:var(--cj-paper-light);border:1px solid var(--cj-line);box-shadow:var(--cj-shadow)}
.latest-category,.latest-date{color:var(--cj-muted)}
.latest-meta h3{color:var(--cj-green-deep)}


/* Six matching theory category pages */
body:has(main .grid) main{
  width:min(1120px,calc(100% - 48px));
  max-width:none;
  padding:clamp(32px,5vw,58px) 0 clamp(48px,6vw,76px);
}
body:has(main .grid) h1{color:var(--cj-green-deep);font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;font-size:clamp(30px,3.5vw,42px);line-height:1.3;margin-bottom:12px}
body:has(main .grid) .count{color:var(--cj-muted);margin-bottom:24px}
body:has(main .grid) .grid{gap:clamp(12px,1.6vw,20px)}
body:has(main .grid) .card{
  border:1px solid var(--cj-line);border-radius:5px;background:var(--cj-paper-deep);
  box-shadow:0 5px 18px rgba(43,55,45,.075);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease
}
body:has(main .grid) .card:hover,body:has(main .grid) .card:focus-visible{
  transform:translateY(-3px);border-color:var(--cj-gold);box-shadow:0 10px 24px rgba(43,55,45,.12)
}
body:has(main .grid) .title-panel{background:rgba(38,55,46,.78);border-top:1px solid rgba(230,215,178,.65)}
body:has(main .grid) .card:hover .title-panel,body:has(main .grid) .card:focus-visible .title-panel{background:rgba(38,55,46,.9)}

/* Long-form articles, search, tags and informational pages */
.page-wrap{padding:clamp(14px,2vw,24px) 0 76px}
.article{max-width:780px}
.article h1,.search-heading,.quiz-intro h1,.quiz-result-page h2{color:var(--cj-green-deep);font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif}
.article-body{color:#34463a;line-height:1.9}
.article-body h2,.article-body h3{color:var(--cj-green-deep)}
.article-body blockquote{border-color:var(--cj-gold);background:var(--cj-paper-deep)}
.article-body th{background:var(--cj-green-soft);color:var(--cj-green-deep)}
.article-body td,.article-body th{border-color:var(--cj-line)}
.article-tags,.share-rule{border-color:var(--cj-line)}
.article-tag-link,.category,.tag-chip{background:var(--cj-green-soft);border-color:var(--cj-line);color:var(--cj-green-deep)}
.article-tag-link:hover{border-color:var(--cj-gold);color:var(--cj-green-deep)}
.meta,.taxonomy,.card-meta,.share-status,.tag-empty{color:var(--cj-muted)}
.share-button{border-color:var(--cj-line);background:var(--cj-paper-light);color:var(--cj-green-deep)}
.share-button:hover{border-color:var(--cj-gold);background:var(--cj-green-soft)}
.share-button:focus-visible{outline-color:rgba(167,131,62,.55)}
.recommendations .card{border-color:var(--cj-line);background:var(--cj-paper-light);color:var(--cj-ink)}
.recommendations .card:hover{border-color:var(--cj-gold);background:#f2eedf}
.search-main{padding-top:clamp(38px,6vw,72px)}
.search-heading{font-weight:500}
.search-field,.contact-field input,.contact-field select,.contact-field textarea{
  border-color:var(--cj-line);border-radius:4px;background:var(--cj-paper-light);color:var(--cj-ink)
}
.search-field:focus,.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus{
  border-color:var(--cj-green);box-shadow:0 0 0 3px rgba(77,104,84,.15)
}
.search-button,.contact-submit{border:1px solid var(--cj-green);border-radius:3px;background:var(--cj-green);color:#fff}
.search-button:hover,.contact-submit:hover{background:var(--cj-green-deep)}
.search-result{border-color:var(--cj-line);border-radius:5px;background:var(--cj-paper-light)}
.search-result:hover,.search-result:focus-visible{border-color:var(--cj-gold);box-shadow:var(--cj-shadow)}
.search-result-title{color:var(--cj-green-deep)}
.search-result-type{background:var(--cj-green-soft);color:var(--cj-green-deep)}
.search-empty{border-color:var(--cj-gold-soft);background:var(--cj-paper-deep)}
.tags-page,.tag-main{color:var(--cj-ink)}
.about-shop-grid h2,.contact-section h2,.announcement-heading{color:var(--cj-green-deep)}
.contact-section{background:var(--cj-paper-deep)}
.contact-field input,.contact-field select,.contact-field textarea{font-size:16px;min-height:48px}
.contact-field textarea{min-height:160px}
.btn,.page-button,.quiz-btn,.quiz-result-page .btn{
  border:1px solid var(--cj-green);border-radius:3px;background:var(--cj-green);color:#fff;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease
}
.btn:hover,.page-button:hover,.quiz-btn:hover,.quiz-result-page .btn:hover{
  background:var(--cj-green-deep);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(43,55,45,.12)
}

/* Quiz surfaces */
.quiz-page{max-width:920px;padding-block:clamp(32px,5vw,54px) 68px;color:var(--cj-ink)}
.quiz-kicker{color:var(--cj-gold)}
.quiz-progress{color:var(--cj-muted)}
.progress-track{background:var(--cj-paper-deep)}
.progress-fill{background:var(--cj-green)}
.quiz-card{border-color:var(--cj-line);border-radius:5px;background:var(--cj-paper-light);box-shadow:0 3px 12px rgba(43,55,45,.045)}
.quiz-value{border-color:var(--cj-line);background:var(--cj-green-soft);color:var(--cj-green-deep)}
.quiz-side{color:#425348}
.quiz-range-wrap:before{background:var(--cj-gold-soft)}
.quiz-range::-webkit-slider-runnable-track,.quiz-range::-moz-range-track{background:var(--cj-paper-deep)}
.quiz-range::-webkit-slider-thumb,.quiz-range::-moz-range-thumb{background:var(--cj-green)}
.quiz-message{border-color:var(--cj-gold);background:var(--cj-paper-deep);color:var(--cj-green-deep)}
.quiz-tie-panel{border-color:var(--cj-gold);background:#f5eedc}
.quiz-result-page .content{border-color:var(--cj-line);border-radius:5px;background:var(--cj-paper-light)}
@media(max-width:1050px){
  .header-inner{min-height:92px;padding:10px 22px;gap:22px}
  .header-logo{width:68px;height:68px}
}
@media(max-width:760px){
  .header-inner{min-height:72px;padding:8px 15px;gap:10px}
  .header-logo{width:54px;height:54px}
  .main-nav{top:72px;background:var(--cj-paper-light);padding:8px 15px 14px}
  .main-nav>a{padding:11px 8px;font-size:16px}
  .home-wrap{width:calc(100% - 32px)}
  .home-section{padding-block:42px}
  .hero-copy{padding:clamp(18px,5vw,24px)}
  .hero h1{font-size:clamp(34px,9vw,43px);line-height:1.25}
  .home-btn{min-height:48px;padding:10px 19px;font-size:16px}
  .theory-main{width:calc(100% - 32px);padding-block:36px 50px}
  .category-card{min-height:0}
  .category-content{padding:17px}
  .category-description{font-size:15px}
  body:has(main .grid) main{width:calc(100% - 32px);padding-block:30px 50px}
  body:has(main .grid) .grid{gap:10px}
  body:has(main .grid) .card{border-radius:4px}
  .page-wrap{padding:14px 0 52px}
  .article{width:90%}
  .article-body{font-size:16px;line-height:1.85}
  .quiz-page{width:calc(100% - 28px);padding-block:30px 48px}
  .quiz-card{padding:15px 13px 13px}
  .quiz-result-page{padding:28px 14px 48px}
  .quiz-result-page .content{padding:20px 16px}
  .search-main{padding:34px 16px 56px}
  .contact-section{padding:34px 16px 44px}
  .social-links{gap:18px}
  .social-icon{width:62px;height:62px}
  .announcement-window,.announcement-card{border-radius:5px}
  .announcement-body{padding:18px 16px 22px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}


/* Shared editorial scale for the main landing and index pages */
:root{
  --cj-title-lg:clamp(2rem,3.4vw,2.75rem);
  --cj-title-md:clamp(1.55rem,2.5vw,2rem);
  --cj-body-size:1.0625rem;
  --cj-body-leading:1.85;
  --cj-reading-width:68ch;
  --cj-button-height:48px;
}
.home-copy,.about-panel,.shop-panel,.contact-intro,.quiz-landing-copy{
  font-size:var(--cj-body-size);line-height:var(--cj-body-leading)
}
.hero h1,.home-main h2,.theory-main>h1,.theory-main .section-heading,
body:has(main .grid)>main>h1,body:has(main .checklist)>main>h1,
body:has(.about-shop-grid) .content h2{
  font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  color:var(--cj-green-deep);font-weight:500;letter-spacing:.025em
}
.hero h1{font-size:clamp(2.25rem,4.6vw,3.6rem);line-height:1.28;margin-bottom:22px}
.home-main h2,.theory-main .section-heading{font-size:var(--cj-title-md);line-height:1.35}
.theory-main>h1,body:has(main .grid)>main>h1,body:has(main .checklist)>main>h1{
  font-size:var(--cj-title-lg);line-height:1.3;margin-bottom:14px
}
.hero-copy .home-copy,.about-text,.feature-copy,.site-about{max-width:var(--cj-reading-width)}
.home-copy p{margin-bottom:1.05em}
.feature-copy h2,.about-text h2,.social-about h2,.type-section h2{
  font-size:var(--cj-title-md);line-height:1.35;margin-bottom:20px
}
.latest-head h2{font-size:var(--cj-title-md)}
.type-section h2{margin-bottom:32px}
.home-note{max-width:var(--cj-reading-width);line-height:1.7}
.home-btn,.category-link,.btn,.page-button,.quiz-btn,.quiz-result-page .btn{
  min-height:var(--cj-button-height);padding:10px 22px;font-size:16px;line-height:1.35;
  font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  font-weight:600;letter-spacing:.02em
}
.home-btn.green{background:var(--cj-paper-light);color:var(--cj-green-deep)}
.article-card .article-title{font-size:clamp(1.05rem,1.3vw,1.3rem)}
.article-card .article-excerpt{font-size:14px;line-height:1.7}

/* Theory overview: consistent title, card copy and reading width */
.theory-main{max-width:1320px}
.theory-main>h1{margin-bottom:28px}
.theory-main .section-heading{margin-bottom:20px}
.category-card{min-height:0}
.category-name{font-size:18px;font-weight:600;line-height:1.45}
.category-description{font-size:16px;line-height:1.75}
.category-link{min-width:100px}
.latest-heading{margin-bottom:20px}
.latest-meta h3{font-size:18px;line-height:1.5}
.latest-excerpt{font-size:14px;line-height:1.7}

/* Six theory category pages */
body:has(main .grid)>main>h1{margin-bottom:12px}
body:has(main .grid) .title-panel{padding:14px 16px}
body:has(main .grid) .title-panel h2{font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;font-size:clamp(15px,1.35vw,18px);line-height:1.5;font-weight:600}

/* Quiz landing and questionnaire */
body:has(main .checklist) main{
  width:min(820px,calc(100% - 48px));max-width:none;
  padding:clamp(34px,5vw,56px) 0 68px;font-size:var(--cj-body-size);line-height:var(--cj-body-leading)
}
body:has(main .checklist)>main>h1{margin-bottom:10px}
body:has(main .checklist)>main>h2{
  max-width:var(--cj-reading-width);margin:0 0 20px;
  color:var(--cj-green);font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  font-size:var(--cj-title-md);line-height:1.5;font-weight:500
}
body:has(main .checklist) .lead{font-size:18px;line-height:1.65;color:var(--cj-green-deep)}
body:has(main .checklist) main>p,body:has(main .checklist) .checklist{max-width:var(--cj-reading-width)}
body:has(main .checklist) .checklist{padding-left:1.5em}
body:has(main .checklist) hr{max-width:var(--cj-reading-width);margin:30px 0;border:0;border-top:1px solid var(--cj-gold-soft)}
body:has(main .checklist) .notice{border-color:var(--cj-gold);background:var(--cj-paper-deep);color:var(--cj-green-deep)}
.quiz-intro h1{font-size:var(--cj-title-lg);line-height:1.3}
.quiz-intro>p:last-child{max-width:66ch;font-size:16px;line-height:1.8}
.quiz-group-title{font-size:20px;color:var(--cj-green-deep)}
.quiz-question{font-size:16px;line-height:1.55}
.quiz-btn{min-width:116px}
.quiz-actions{gap:14px}

/* About page: constrain text measure and align section headings */
body:has(.about-shop-grid) main{padding:clamp(30px,4.5vw,54px) 24px 64px}
body:has(.about-shop-grid) .content{width:min(1160px,100%);max-width:none}
body:has(.about-shop-grid) .announcement-carousel{
  width:min(1160px,calc(100vw - 48px));margin:0 auto 48px;left:auto;transform:none
}
body:has(.about-shop-grid) .announcement-heading{
  font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  font-size:var(--cj-title-lg);line-height:1.3;color:var(--cj-green-deep);margin-bottom:20px
}
body:has(.about-shop-grid) .announcement-window{border:1px solid var(--cj-line);background:var(--cj-paper-deep)}
body:has(.about-shop-grid) .announcement-body{background:var(--cj-paper-light);color:var(--cj-ink)}
body:has(.about-shop-grid) .announcement-label{color:var(--cj-gold);font-size:14px}
body:has(.about-shop-grid) .announcement-title{font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;color:var(--cj-green-deep);font-size:clamp(19px,2vw,24px)}
body:has(.about-shop-grid) .announcement-read{
  min-height:var(--cj-button-height);padding:12px 22px;border:1px solid var(--cj-green);
  background:var(--cj-green);color:#fff;font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  transition:background-color .2s ease,transform .2s ease
}
body:has(.about-shop-grid) .announcement-read:hover{background:var(--cj-green-deep);transform:translateY(-1px)}

body:has(.about-shop-grid) .about-shop-grid{gap:clamp(28px,4vw,64px)}
body:has(.about-shop-grid) .about-shop-grid h2{
  font-size:var(--cj-title-md);line-height:1.4;margin-bottom:18px
}
body:has(.about-shop-grid) .about-shop-grid p{max-width:68ch;line-height:1.85}
body:has(.about-shop-grid) .contact-section{
  margin-top:48px;margin-bottom:0;padding:clamp(32px,4vw,52px) max(24px,calc((100vw - 1160px)/2)) 52px;
  background:var(--cj-paper-deep)
}
body:has(.about-shop-grid) .contact-section h2{
  font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  font-size:var(--cj-title-md);line-height:1.35;margin-bottom:16px
}
body:has(.about-shop-grid) .contact-intro{max-width:68ch}
body:has(.about-shop-grid) .contact-form{max-width:760px;margin-top:42px;gap:18px}
body:has(.about-shop-grid) .contact-field{gap:8px}
body:has(.about-shop-grid) .contact-field label{color:var(--cj-green-deep);font-weight:600}
body:has(.about-shop-grid) .contact-submit{min-height:var(--cj-button-height);padding:10px 24px}
@media(max-width:760px){
  .hero h1{font-size:clamp(2rem,9vw,2.7rem)}
  .home-copy,.about-panel,.shop-panel,.contact-intro{font-size:16px;line-height:1.8}
  .home-section{padding-block:38px}
  .theory-main>h1,.theory-main .section-heading{font-size:clamp(1.8rem,7vw,2.2rem)}
  .category-description{font-size:15px;line-height:1.7}
  .home-btn,.category-link,.btn,.page-button,.quiz-btn,.quiz-result-page .btn{min-height:46px;padding:9px 17px;font-size:15px}
  body:has(main .checklist) main{width:calc(100% - 36px);padding-block:30px 48px}
  body:has(main .checklist)>main>h1{font-size:clamp(1.8rem,8vw,2.25rem)}
  body:has(main .checklist)>main>h2{font-size:clamp(1.35rem,6vw,1.7rem)}
  .quiz-intro h1{font-size:clamp(1.8rem,8vw,2.25rem)}
  .quiz-intro>p:last-child{font-size:15px}
  body:has(.about-shop-grid) main{padding:28px 18px 50px}
  body:has(.about-shop-grid) .announcement-carousel{width:calc(100vw - 36px);margin-bottom:36px}
  body:has(.about-shop-grid) .announcement-heading{font-size:clamp(1.8rem,8vw,2.25rem);margin-bottom:16px}

  body:has(.about-shop-grid) .announcement-body{min-height:0;padding:16px 16px 20px}

  body:has(.about-shop-grid) .about-shop-grid{grid-template-columns:1fr;gap:26px}
  body:has(.about-shop-grid) .about-shop-grid h2{font-size:clamp(1.45rem,6.5vw,1.8rem);margin-bottom:14px}
  body:has(.about-shop-grid) .contact-section{margin-top:34px;padding:30px 18px 38px}
  body:has(.about-shop-grid) .contact-form{margin-top:30px;gap:16px}
}
@media(max-width:460px){
  body:has(.about-shop-grid) main{padding-inline:14px}
  body:has(.about-shop-grid) .announcement-carousel{width:calc(100vw - 28px)}
  body:has(.about-shop-grid) .about-shop-grid{grid-template-columns:1fr}
  body:has(.about-shop-grid) .contact-section{padding-inline:14px}
}



/* Align the principal page containers to one desktop and mobile grid */
:root{--cj-container-width:1320px}
.home-wrap,.theory-main,
body:has(main .grid)>main,
body:has(main .checklist)>main,
.quiz-page,
body:has(.about-shop-grid) .content,
body:has(.about-shop-grid) .announcement-carousel{
  width:min(var(--cj-container-width),calc(100% - 64px));
  max-width:none;
  margin-left:auto;
  margin-right:auto
}
.theory-main{padding-left:0;padding-right:0}
body:has(main .grid)>main{padding-left:0;padding-right:0}
body:has(main .checklist)>main{padding-left:0;padding-right:0}
.quiz-page{padding-left:0;padding-right:0}
body:has(.about-shop-grid) .content{width:min(var(--cj-container-width),calc(100% - 64px))}
body:has(.about-shop-grid) .announcement-carousel{
  left:auto;transform:none;
  margin-top:0;margin-bottom:clamp(36px,4vw,52px)
}
body:has(.about-shop-grid) main{padding-left:0;padding-right:0}
.home-wrap{width:min(var(--cj-container-width),calc(100% - 64px))}
.hero-grid{gap:clamp(24px,3vw,44px)}
.quiz-page{padding-top:clamp(38px,5vw,58px);padding-bottom:clamp(52px,6vw,76px)}
.quiz-intro{margin-bottom:clamp(24px,3vw,34px)}
.quiz-card{padding:clamp(18px,2vw,24px)}
body:has(main .checklist)>main{padding-top:clamp(38px,5vw,58px);padding-bottom:clamp(52px,6vw,76px)}
body:has(.about-shop-grid) .about-shop-grid{gap:clamp(32px,4vw,64px)}
body:has(.about-shop-grid) .content{padding-bottom:12px}
@media(max-width:760px){
  .home-wrap,.theory-main,
  body:has(main .grid)>main,
  body:has(main .checklist)>main,
  .quiz-page,
  body:has(.about-shop-grid) .content,
  body:has(.about-shop-grid) .announcement-carousel{
    width:calc(100% - 36px);
    max-width:none
  }
  .theory-main,body:has(main .grid)>main{padding-left:0;padding-right:0}
  body:has(main .checklist)>main,.quiz-page{padding-left:0;padding-right:0}
  .home-wrap{width:calc(100% - 36px)}
  .hero-grid{gap:20px}
  .quiz-page{padding-top:30px;padding-bottom:48px}
  .quiz-card{padding:16px}
  body:has(main .checklist)>main{padding-top:30px;padding-bottom:48px}
  body:has(.about-shop-grid) main{padding-left:0;padding-right:0}
  body:has(.about-shop-grid) .content{width:calc(100% - 36px)}
  body:has(.about-shop-grid) .announcement-carousel{width:calc(100% - 36px);margin-bottom:34px}
  body:has(.about-shop-grid) .about-shop-grid{gap:26px}
}
@media(max-width:460px){
  .home-wrap,.theory-main,
  body:has(main .grid)>main,
  body:has(main .checklist)>main,
  .quiz-page,
  body:has(.about-shop-grid) .content,
  body:has(.about-shop-grid) .announcement-carousel{width:calc(100% - 32px)}
  body:has(.about-shop-grid) .content{width:calc(100% - 32px)}
  body:has(.about-shop-grid) .announcement-carousel{width:calc(100% - 32px)}
}

/* Consistent visual finish for article, search, tag, and announcement pages */
.article{
  width:min(780px,calc(100% - 48px));
  max-width:780px;
}
.article-head{margin-bottom:clamp(14px,1.7vw,20px)}
.article h1{
  margin:0 0 16px;
  font-size:clamp(2rem,3.6vw,2.75rem);
  line-height:1.28;
  font-weight:500;
  letter-spacing:.02em;
}
.article .cover{margin:4px 0 12px}
.cover + .article-body > :first-child{margin-top:.5em}
.article-body{
  color:var(--cj-ink);
  font-size:var(--cj-body-size);
  line-height:1.9;
  overflow-wrap:anywhere;
}
.article-body p,.article-body li{line-height:1.9}
.article-body h2,.article-body h3{
  color:var(--cj-green-deep);
  font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  font-weight:500;
  letter-spacing:.015em;
}
.article-body h2{font-size:clamp(1.45rem,2.5vw,1.9rem);margin-top:2em}
.article-body h3{font-size:clamp(1.2rem,2vw,1.5rem);margin-top:1.7em}
.article-body a{color:var(--cj-green-deep);text-decoration-color:var(--cj-gold);text-underline-offset:.18em}
.article-body blockquote{border-left-width:3px;border-radius:0 3px 3px 0}
.article-tags{max-width:780px}
.share-block{max-width:780px}

.search-main{width:100%;min-height:55vh;padding:clamp(40px,6vw,68px) 24px 76px}
.search-wrap{width:min(900px,100%)}
.search-heading{
  font-size:clamp(2rem,3.6vw,2.75rem);
  line-height:1.3;
  font-weight:500;
  letter-spacing:.02em;
}
.search-intro{max-width:68ch;color:var(--cj-muted);line-height:1.8}
.search-form{gap:12px;margin-bottom:30px}
.search-field,.search-button{min-height:48px;border-radius:3px}
.search-button{padding-inline:22px;font-size:16px;font-weight:600}
.search-result{padding:18px 20px;border-radius:4px;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.search-result-title{font-size:18px;font-weight:600;line-height:1.5}
.search-result-excerpt{color:var(--cj-muted);font-size:15px;line-height:1.75}
.search-empty{border-radius:4px;text-align:left}

.tag-main,.tags-page{width:min(900px,calc(100% - 48px));margin-inline:auto;padding-block:clamp(38px,5vw,64px)}
.tag-main h1,.tags-page h1,.tag-main h2,.tags-page h2{
  color:var(--cj-green-deep);
  font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  font-weight:500;
  line-height:1.35;
}
.tag-main a,.tags-page a{color:var(--cj-green-deep);text-decoration-color:var(--cj-gold);text-underline-offset:.18em}
.tag-list li{border-color:var(--cj-line)}

.announcement-window{border:1px solid var(--cj-line);border-radius:5px;background:var(--cj-paper-deep)}
.announcement-card{border-radius:5px;color:var(--cj-ink)}
.announcement-body{background:var(--cj-paper-light);color:var(--cj-ink)}
.announcement-label{color:var(--cj-gold);text-decoration:none;letter-spacing:.04em}
.announcement-title{color:var(--cj-green-deep);font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;font-weight:500}
.announcement-read{border:1px solid var(--cj-green);border-radius:3px;background:var(--cj-green);color:#fff;transition:background-color .2s ease,transform .2s ease}
.announcement-read:hover{background:var(--cj-green-deep);transform:translateY(-1px)}

.announcement-empty{border:1px solid var(--cj-line);border-radius:4px;background:var(--cj-paper-light);color:var(--cj-muted)}

@media(max-width:760px){
  .article{width:90%;margin-left:auto;margin-right:auto}
  .article-tags,.share-block,.recommendations{width:90%;margin-left:auto;margin-right:auto}
  .article-head{margin-bottom:12px}
  .article .cover{margin:2px 0 10px}
  .article h1{font-size:clamp(1.8rem,7vw,2.25rem)}
  .article-body{font-size:16px;line-height:1.85}
  .article-body p,.article-body li{line-height:1.85}
  .search-main{padding:34px 18px 52px}
  .search-form{gap:8px}
  .search-button{padding-inline:16px}
  .tag-main,.tags-page{width:calc(100% - 36px);padding-block:32px 48px}
  .announcement-window,.announcement-card{border-radius:5px}
  .announcement-body{min-height:0}
}
@media(max-width:460px){
  .article{width:90%}
  .search-main{padding-inline:16px}
  .tag-main,.tags-page{width:calc(100% - 32px)}
}

/* Tag index and generated tag pages use their original, class-free main wrapper. */
body:has(.tag-list) main,body:has(.post-list) main{
  width:min(900px,calc(100% - 48px));
  max-width:none;
  margin:0 auto;
  padding:clamp(38px,5vw,64px) 0
}
body:has(.tag-list) main>h1,body:has(.post-list) main>h1{
  color:var(--cj-green-deep);
  font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  font-size:clamp(2rem,3.6vw,2.75rem);
  font-weight:500;
  line-height:1.3;
  letter-spacing:.02em
}
body:has(.tag-list) .intro,body:has(.post-list) .intro{max-width:68ch;color:var(--cj-muted);line-height:1.8}
.tag-list li,.post-list li{border-color:var(--cj-line)}
.tag-list a,.post-list a{color:var(--cj-green-deep);text-decoration-color:var(--cj-gold);text-underline-offset:.18em}
.tag-list a:hover,.post-list a:hover{color:var(--cj-green)}
body:has(.post-list) .empty{border:1px solid var(--cj-line);border-radius:4px;background:var(--cj-paper-light);color:var(--cj-muted)}
@media(max-width:760px){
  body:has(.tag-list) main,body:has(.post-list) main{width:calc(100% - 36px);padding-block:32px 48px}
}
@media(max-width:460px){
  body:has(.tag-list) main,body:has(.post-list) main{width:calc(100% - 32px)}
}

/* Compact, book-like carousel styling shared by home, theory and announcements. */
:root{--cj-carousel-cover-height:clamp(190px,18vw,270px);--cj-announcement-cover-height:clamp(190px,18vw,270px)}
.article-card,.latest-card{
  min-height:0;
  border-radius:5px;
  background:var(--cj-paper-light);
  border:1px solid var(--cj-line);
  box-shadow:0 5px 18px rgba(43,55,45,.07);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease
}
.article-card:hover,.latest-card:hover,.article-card:focus-visible,.latest-card:focus-visible{
  transform:translateY(-3px);
  border-color:var(--cj-gold-soft);
  box-shadow:0 10px 24px rgba(43,55,45,.11)
}
.article-cover,.latest-cover{
  height:var(--cj-carousel-cover-height);
  flex:none;
  background:var(--cj-paper-deep)
}
.article-cover img,.latest-cover img{width:100%;height:100%;object-fit:cover}
.article-cover:after,.latest-cover:after{
  height:30%;
  background:linear-gradient(transparent,rgba(31,48,38,.78))
}
.article-card:hover .article-cover:after,.latest-card:hover .latest-cover:after{height:42%}
.article-cover-title,.latest-cover-title{
  padding:12px 16px;
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.45;
  text-shadow:0 1px 5px rgba(0,0,0,.3)
}
.article-meta,.latest-meta{padding:15px 18px 18px}
.article-category,.latest-category{color:var(--cj-muted);font-size:13px}
.article-title,.latest-meta h3{
  color:var(--cj-green-deep);
  font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  font-size:clamp(17px,1.35vw,21px);
  font-weight:500;
  line-height:1.45
}
.article-excerpt,.latest-excerpt{color:var(--cj-muted);font-size:14px;line-height:1.65}
.article-date,.latest-date{color:var(--cj-muted);font-size:13px}

.carousel-control,.latest-carousel .carousel-control{
  top:calc(var(--cj-carousel-cover-height)/2 + 6px);
  width:44px;height:44px;
  display:grid;place-items:center;
  padding:0;
  border:1px solid rgba(222,217,202,.95);
  border-radius:50%;
  background:rgba(252,250,245,.96);
  color:var(--cj-green-deep);
  font-family:Georgia,"Noto Serif TC",serif;
  font-size:25px;font-weight:400;line-height:1;
  box-shadow:0 4px 14px rgba(38,55,46,.12);
  backdrop-filter:blur(5px);
  transform:translateY(-50%);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease
}
.carousel-control.prev,.latest-carousel .carousel-control.prev{left:12px}
.carousel-control.next,.latest-carousel .carousel-control.next{right:12px}
.carousel-control:hover,.latest-carousel .carousel-control:hover{
  border-color:var(--cj-gold);
  background:var(--cj-green);
  color:#fff;
  box-shadow:0 6px 17px rgba(38,55,46,.18);
  transform:translateY(calc(-50% - 2px))
}
.carousel-control:focus-visible,.carousel-dots button:focus-visible{
  outline:3px solid var(--cj-gold-soft);outline-offset:3px
}
.carousel-dots,.latest-carousel .carousel-dots{gap:9px;padding:9px 10px 0}
.carousel-dots button,.latest-carousel .carousel-dots button{
  width:9px;height:9px;border:0;border-radius:50%;
  background:var(--cj-gold-soft);transition:transform .2s ease,background-color .2s ease
}
.carousel-dots button[aria-current=true],.latest-carousel .carousel-dots button[aria-current=true]{background:var(--cj-green)}
.carousel-dots button:hover,.latest-carousel .carousel-dots button:hover{transform:scale(1.2)}

.announcement-cover{height:var(--cj-announcement-cover-height)}
.announcement-cover img{object-fit:cover}
.announcement-body{min-height:0;padding:17px 22px 20px}
.announcement-title{margin-bottom:13px;font-size:clamp(19px,1.8vw,24px)}
.announcement-read{min-height:44px;padding:10px 22px}
.announcement-control{
  top:calc(var(--cj-announcement-cover-height)/2 + 58px);
  width:44px;height:44px;
  display:grid;place-items:center;
  padding:0;
  border:1px solid rgba(222,217,202,.95);
  border-radius:50%;
  background:rgba(252,250,245,.96);
  color:var(--cj-green-deep);
  font-family:Georgia,"Noto Serif TC",serif;
  font-size:24px;line-height:1;
  box-shadow:0 4px 14px rgba(38,55,46,.12);
  backdrop-filter:blur(5px);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease
}
.announcement-control:hover{border-color:var(--cj-gold);background:var(--cj-green);color:#fff;transform:translateY(-2px)}
.announcement-control.prev{left:14px}.announcement-control.next{right:14px}
.announcement-dots{gap:9px;padding-top:14px}
.announcement-dots button{width:9px;height:9px;transition:transform .2s ease,background-color .2s ease}
.announcement-dots button:hover{transform:scale(1.2)}

@media(max-width:760px){
  :root{--cj-carousel-cover-height:clamp(180px,50vw,220px);--cj-announcement-cover-height:clamp(180px,52vw,230px)}
  .article-card,.latest-card{border-radius:5px}
  .article-meta,.latest-meta{padding:13px 15px 17px}
  .carousel-control,.latest-carousel .carousel-control{width:40px;height:40px;font-size:23px}
  .carousel-control.prev,.latest-carousel .carousel-control.prev{left:8px}
  .carousel-control.next,.latest-carousel .carousel-control.next{right:8px}
  .announcement-cover{height:var(--cj-announcement-cover-height)}
  .announcement-body{padding:15px 16px 18px}
  .announcement-control{top:calc(var(--cj-announcement-cover-height)/2 + 43px);width:40px;height:40px;font-size:22px}
  .announcement-control.prev{left:9px}.announcement-control.next{right:9px}
  .announcement-title{margin-bottom:12px}
}

/* Unified article previews across the six theory category pages. */
body:has(main .grid){--cj-category-cover-ratio:1.5}
body:has(main .grid) .card{
  aspect-ratio:4/3;
  overflow:hidden;
  border:1px solid var(--cj-line);
  border-radius:5px;
  background:var(--cj-paper-light);
  box-shadow:0 4px 14px rgba(43,55,45,.06);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease
}
body:has(main .grid) .card:hover,body:has(main .grid) .card:focus-visible{
  transform:translateY(-3px);
  border-color:var(--cj-gold-soft);
  box-shadow:0 9px 20px rgba(43,55,45,.11)
}
body:has(main .grid) .visual{
  display:grid;
  place-items:center;
  background:var(--cj-paper-deep)
}
body:has(main .grid) .visual img{
  width:100%;height:100%;
  object-fit:contain;
  object-position:center;
  background:var(--cj-paper-deep);
  transition:transform .3s ease
}
body:has(main .grid) .card:hover .visual img,body:has(main .grid) .card:focus-visible .visual img{transform:scale(1.015)}
body:has(main .grid) .title-panel{
  height:auto;
  min-height:76px;
  padding:14px 18px;
  justify-content:flex-start;
  text-align:left;
  border-top:1px solid rgba(230,215,178,.75);
  background:rgba(53,79,61,.94);
  color:var(--cj-paper-light);
  backdrop-filter:blur(2px);
  transition:background-color .2s ease
}
body:has(main .grid) .card:hover .title-panel,body:has(main .grid) .card:focus-visible .title-panel{height:auto;background:var(--cj-green-deep)}
body:has(main .grid) .title-panel h2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0;
  color:var(--cj-paper-light);
  font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  font-size:clamp(15px,1.25vw,18px);
  font-weight:500;
  line-height:1.5;
  letter-spacing:.015em
}
@media(max-width:900px){
  body:has(main .grid) .card{aspect-ratio:1.2}
  body:has(main .grid) .title-panel{min-height:70px;padding:12px 14px}
}
@media(max-width:600px){
  body:has(main .grid) .card{
    aspect-ratio:auto;
    min-height:0;
    border-radius:4px;
    background:var(--cj-paper-light);
    box-shadow:0 2px 8px rgba(43,55,45,.045)
  }
  body:has(main .grid) .visual{display:none}
  body:has(main .grid) .title-panel{
    position:static;
    min-height:0;
    padding:14px 16px;
    border-top:0;
    background:var(--cj-paper-light);
    color:var(--cj-green-deep);
    backdrop-filter:none
  }
  body:has(main .grid) .title-panel h2{
    display:block;
    overflow:visible;
    color:var(--cj-green-deep);
    font-size:16px;
    line-height:1.55
  }
}

/* Unified old-paper stamp style for social links outside the shared header and footer. */
.home-social-icon,.social-icon{
  --cj-social-stamp:#777f6e;
  width:64px;height:64px;
  display:inline-grid;place-items:center;flex:none;
  border:1px solid rgba(167,131,62,.72);border-radius:50%;
  background:var(--cj-social-stamp);color:#fff;
  box-shadow:0 0 0 4px var(--cj-paper-light),0 0 0 5px var(--cj-gold-soft),0 5px 13px rgba(43,55,45,.13);
  text-decoration:none;
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease
}
.home-social-icon.instagram,.home-social-icon.threads,.home-social-icon.discord,
.social-icon.instagram,.social-icon.threads,.social-icon.discord,.social-icon.shop-instagram{
  background:var(--cj-social-stamp);color:#fff
}
.home-social-icon:hover,.social-icon:hover{
  transform:translateY(-3px);border-color:var(--cj-gold);
  background:#697460;box-shadow:0 0 0 4px var(--cj-paper-light),0 0 0 5px var(--cj-gold),0 8px 17px rgba(43,55,45,.18)
}
.home-social-icon:focus-visible,.social-icon:focus-visible{
  outline:3px solid var(--cj-gold);outline-offset:3px
}
.home-social-icon svg,.social-icon svg{width:30px;height:30px;display:block;color:currentColor}
.home-social-icon.instagram svg,.social-icon.instagram svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.home-social-icon.threads svg,.home-social-icon.discord svg,
.social-icon.threads svg,.social-icon.discord svg{fill:currentColor;stroke:none}
.social-icon.shop-instagram{margin:0 0 18px}
@media(max-width:760px){
  .home-social-icon,.social-icon{width:54px;height:54px}
  .home-social-icon svg,.social-icon svg{width:27px;height:27px}
}
/* About page proportions: compact partner panel and contact form. */
body:has(.about-shop-grid) .shop-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(132px,168px);
  column-gap:clamp(16px,2.2vw,28px);
  align-content:start
}
body:has(.about-shop-grid) .shop-panel>h2{grid-column:1/-1;margin-bottom:16px}
body:has(.about-shop-grid) .shop-panel>p:nth-of-type(1){grid-column:1/-1;margin-bottom:10px}
body:has(.about-shop-grid) .shop-panel>p:has(.shop-image){grid-column:2;grid-row:3/span 3;justify-self:end;align-self:start;margin:0}
body:has(.about-shop-grid) .shop-panel>p:nth-of-type(3){grid-column:1;grid-row:3;margin-bottom:10px}
body:has(.about-shop-grid) .shop-panel>p:nth-of-type(4){grid-column:1;grid-row:4;margin-bottom:6px}
body:has(.about-shop-grid) .shop-panel>p:nth-of-type(5){grid-column:1;grid-row:5;margin-bottom:8px}
body:has(.about-shop-grid) .shop-panel .shop-image{width:clamp(124px,13vw,156px);height:clamp(124px,13vw,156px);margin:0;border:1px solid var(--cj-line);border-radius:4px;object-fit:cover}
body:has(.about-shop-grid) .shop-panel .shop-instagram{grid-column:1;grid-row:6;justify-self:start;margin:4px 0 0}
body:has(.about-shop-grid) .contact-section{margin-top:clamp(32px,4vw,44px);padding-top:clamp(28px,3.5vw,40px);padding-bottom:clamp(34px,4vw,48px)}
body:has(.about-shop-grid) .contact-section h2{margin-bottom:16px}
body:has(.about-shop-grid) .contact-intro{max-width:none;margin-bottom:18px;line-height:1.7}
body:has(.about-shop-grid) .contact-form{max-width:700px;margin-top:22px;gap:12px}
body:has(.about-shop-grid) .contact-field{gap:5px}
body:has(.about-shop-grid) .contact-field label{font-size:15px}
body:has(.about-shop-grid) .contact-field input,
body:has(.about-shop-grid) .contact-field select{
  min-height:44px;padding:9px 12px;font-size:15px
}
body:has(.about-shop-grid) .contact-field textarea{min-height:132px;padding:10px 12px;font-size:15px}
@media(max-width:600px){
  body:has(.about-shop-grid) .shop-panel{display:block}
  body:has(.about-shop-grid) .shop-panel>h2{margin-bottom:14px}
  body:has(.about-shop-grid) .shop-panel>p{margin-bottom:12px}
  body:has(.about-shop-grid) .shop-panel>p:has(.shop-image){margin:12px 0}
  body:has(.about-shop-grid) .shop-panel .shop-image{width:124px;height:124px}
  body:has(.about-shop-grid) .shop-panel .shop-instagram{margin:4px 0 0}
  body:has(.about-shop-grid) .contact-section{padding:26px 16px 32px}
  body:has(.about-shop-grid) .contact-section h2{margin-bottom:12px}
  body:has(.about-shop-grid) .contact-intro{margin-bottom:14px;line-height:1.65}
  body:has(.about-shop-grid) .contact-form{margin-top:16px;gap:10px}
  body:has(.about-shop-grid) .contact-field input,
  body:has(.about-shop-grid) .contact-field select{min-height:42px}
  body:has(.about-shop-grid) .contact-field textarea{min-height:118px}
}
/* Quiz landing: finely ornamented gilded book, compact open spread. */
body:has(.quiz-landing) main.quiz-landing{width:min(1240px,calc(100% - 56px));max-width:none;padding:clamp(22px,3vw,34px) 0 clamp(26px,3vw,38px)}
.quiz-landing-hero{position:relative;isolation:isolate;overflow:hidden;margin:0 0 16px;padding:24px clamp(24px,4vw,46px) 22px;border:1px solid var(--cj-gold);border-radius:3px;background:linear-gradient(90deg,rgba(167,131,62,.12) 1px,transparent 1px) 14px 0/1px 100% no-repeat,linear-gradient(90deg,transparent,rgba(230,215,178,.34) 48%,transparent),linear-gradient(135deg,#fffdf8 0%,var(--cj-paper-light) 55%,#eee7d5 100%);box-shadow:0 5px 17px rgba(43,55,45,.075),inset 0 0 0 4px rgba(255,255,255,.62),inset 0 0 0 5px rgba(167,131,62,.12)}
.quiz-landing-hero:before{position:absolute;z-index:0;inset:8px;content:"";border:1px solid rgba(167,131,62,.22);pointer-events:none}
.quiz-landing-hero:after{position:absolute;z-index:1;top:8px;right:8px;width:34px;height:34px;content:"";border-top:1px solid var(--cj-gold);border-right:1px solid var(--cj-gold);pointer-events:none}
.quiz-landing-hero-copy{position:relative;z-index:2;max-width:76ch;padding-right:clamp(170px,24vw,285px)}
body:has(.quiz-landing) .quiz-landing-hero h1{margin:0 0 5px;color:var(--cj-green-deep);font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;font-size:clamp(38px,4.3vw,52px);font-weight:500;line-height:1.15;letter-spacing:.1em}
body:has(.quiz-landing) .quiz-landing-hero h2{max-width:none;margin:0 0 10px;color:var(--cj-green);font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;font-size:clamp(19px,2vw,25px);font-weight:500;line-height:1.4}
body:has(.quiz-landing) .quiz-landing-hero .lead{display:inline-block;margin:0;padding:4px 12px;border:1px solid rgba(167,131,62,.48);border-radius:2px;background:rgba(238,232,217,.74);color:var(--cj-green-deep);font-size:14px;font-weight:600;line-height:1.4;letter-spacing:.08em}
.quiz-landing-engraving{position:absolute;z-index:2;top:50%;right:clamp(22px,5vw,62px);width:clamp(190px,22vw,250px);height:auto;transform:translateY(-50%);color:var(--cj-gold);opacity:.88;filter:drop-shadow(0 2px 1px rgba(167,131,62,.14));pointer-events:none}
.quiz-landing-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:0;overflow:hidden;padding:6px;border:1px solid var(--cj-gold);border-radius:3px;background:linear-gradient(90deg,#e4d4ac,#f8f5ec 12%,#e6d9b8 49%,#b69a5a 50%,#eadfca 51%,#fcfaf5 88%,#e5d8b9);box-shadow:0 8px 20px rgba(43,55,45,.11),inset 0 0 0 2px rgba(255,255,255,.56)}
.quiz-landing-grid:before{position:absolute;z-index:3;top:8px;bottom:8px;left:50%;width:18px;content:"";transform:translateX(-50%);background:linear-gradient(90deg,rgba(74,58,29,.05),rgba(167,131,62,.3) 42%,rgba(255,253,248,.85) 50%,rgba(167,131,62,.25) 58%,rgba(74,58,29,.06));pointer-events:none}
.quiz-landing-why,.quiz-landing-how{position:relative;min-width:0;padding:clamp(18px,2.1vw,26px) clamp(18px,2.5vw,31px);border:0;border-radius:0;background:var(--cj-paper-light);box-shadow:none}
.quiz-landing-why{grid-column:1;background:linear-gradient(115deg,#fcfaf4,var(--cj-paper-light) 70%,#f4efdf)}
.quiz-landing-how{grid-column:3;background:linear-gradient(245deg,#f3efdf,var(--cj-paper-light) 35%,#fcfaf4)}
.quiz-landing-why:before,.quiz-landing-how:before{position:absolute;top:0;left:clamp(18px,2.5vw,31px);width:62px;height:3px;content:"";background:linear-gradient(90deg,var(--cj-gold),var(--cj-gold-soft),transparent)}
.quiz-landing-why p,.quiz-landing-how p{margin:0 0 9px;font-size:15.5px;line-height:1.62}
.quiz-landing-why>p:first-child{margin-bottom:7px;color:var(--cj-gold);font-size:13px;font-weight:700;letter-spacing:.1em}
.quiz-landing-why .checklist{margin:0 0 10px;padding-left:1.35em}
.quiz-landing-why .checklist li{margin:3px 0;padding-left:2px;line-height:1.55}
.quiz-landing-why .checklist li::marker{color:var(--cj-gold)}
.quiz-landing-why hr{width:48px;margin:3px 0 0;border:0;border-top:1px solid var(--cj-gold-soft)}
.quiz-landing-how p{color:var(--cj-ink)}
.quiz-landing-start{margin:3px 0 0!important;padding:10px 22px!important;border:1px solid var(--cj-gold)!important;border-radius:2px!important;background:linear-gradient(145deg,#3e5c46,var(--cj-green-deep))!important;color:var(--cj-paper-light)!important;box-shadow:inset 0 0 0 2px rgba(230,215,178,.18),0 3px 8px rgba(43,55,45,.16);font-weight:600!important;letter-spacing:.1em}
.quiz-landing-start:hover{transform:translateY(-2px);border-color:#c5a45a!important;background:linear-gradient(145deg,#536e58,var(--cj-green))!important;box-shadow:inset 0 0 0 2px rgba(230,215,178,.28),0 6px 12px rgba(43,55,45,.2)}
.quiz-landing-disclaimer{position:relative;margin-top:14px;padding:12px 20px 13px 24px;border:1px solid rgba(167,131,62,.38);border-left:3px double var(--cj-gold);border-radius:2px;background:linear-gradient(105deg,#eee7d6,#f7f4eb 55%,#f1ecdf);box-shadow:inset 0 0 0 3px rgba(255,255,255,.42)}
.quiz-landing-disclaimer hr{display:none}
.quiz-landing-disclaimer p{max-width:none;margin:0 0 5px;color:var(--cj-muted);font-size:13px;line-height:1.58}
.quiz-landing-disclaimer p:last-child{margin-bottom:0}
.quiz-landing-disclaimer p:first-of-type{color:var(--cj-green-deep);font-size:14px;letter-spacing:.08em}
@media(max-width:760px){
  body:has(.quiz-landing) main.quiz-landing{width:calc(100% - 36px);padding:22px 0 32px}
  .quiz-landing-hero{margin-bottom:12px;padding:23px 20px 19px}
  .quiz-landing-hero-copy{max-width:58ch;padding-right:128px}
  .quiz-landing-engraving{right:17px;width:145px;opacity:.72}
  .quiz-landing-grid{grid-template-columns:minmax(0,1fr);padding:5px;background:linear-gradient(135deg,#e4d4ac,#fcfaf5 10%,#eadfca 99%)}
  .quiz-landing-grid:before{top:50%;right:12px;bottom:auto;left:12px;width:auto;height:14px;transform:translateY(-50%);background:linear-gradient(180deg,rgba(74,58,29,.05),rgba(167,131,62,.26) 40%,rgba(255,253,248,.9) 50%,rgba(167,131,62,.2) 60%,rgba(74,58,29,.04))}
  .quiz-landing-why,.quiz-landing-how{grid-column:1;padding:18px 20px}
  .quiz-landing-why p,.quiz-landing-how p{font-size:15px;line-height:1.58}
  .quiz-landing-why:before,.quiz-landing-how:before{left:20px;width:48px}
  .quiz-landing-disclaimer{margin-top:11px;padding:11px 14px 12px 17px}
}
@media(max-width:460px){
  body:has(.quiz-landing) main.quiz-landing{width:calc(100% - 28px);padding-top:18px}
  .quiz-landing-hero{padding:21px 15px 17px}
  .quiz-landing-hero:before{inset:6px}
  .quiz-landing-hero-copy{padding-right:84px}
  .quiz-landing-engraving{right:7px;width:100px;opacity:.62}
  body:has(.quiz-landing) .quiz-landing-hero h1{font-size:clamp(34px,9vw,40px)}
  body:has(.quiz-landing) .quiz-landing-hero h2{font-size:18px}
  .quiz-landing-why,.quiz-landing-how{padding:17px 15px}
  .quiz-landing-start{width:100%;text-align:center}
}
/* Desktop proportions for the about page: align the shop visual to its name and compact the contact form. */
@media(min-width:761px){
  body:has(.about-shop-grid) .shop-panel{
    grid-template-columns:minmax(0,1fr) 156px;
    grid-template-rows:auto auto auto auto auto auto;
    column-gap:clamp(18px,2.2vw,30px);
    row-gap:0
  }
  body:has(.about-shop-grid) .shop-panel>h2{grid-column:1/-1;grid-row:1;margin-bottom:18px}
  body:has(.about-shop-grid) .shop-panel>p:nth-of-type(1){grid-column:1;grid-row:2;margin:0 0 7px}
  body:has(.about-shop-grid) .shop-panel>p:has(.shop-image){grid-column:2;grid-row:2/span 2;align-self:start;justify-self:end;margin:0}
  body:has(.about-shop-grid) .shop-panel>p:nth-of-type(3){grid-column:1;grid-row:3;margin:0 0 12px;line-height:1.65}
  body:has(.about-shop-grid) .shop-panel>p:nth-of-type(4){grid-column:1;grid-row:4;margin:0 0 5px}
  body:has(.about-shop-grid) .shop-panel>p:nth-of-type(5){grid-column:1;grid-row:5;margin:0;line-height:1.6}
  body:has(.about-shop-grid) .shop-panel .shop-image{width:150px;height:150px}
  body:has(.about-shop-grid) .shop-panel .shop-instagram{grid-column:1;grid-row:6;align-self:start;justify-self:start;margin:4px 0 0}
  body:has(.about-shop-grid) .contact-section{margin-top:28px!important;padding-top:22px!important;padding-bottom:26px!important}
  body:has(.about-shop-grid) .contact-section h2{margin-bottom:9px}
  body:has(.about-shop-grid) .contact-intro{margin-bottom:9px;font-size:14px;line-height:1.5}
  body:has(.about-shop-grid) .contact-form{margin-top:10px;gap:7px}
  body:has(.about-shop-grid) .contact-field{gap:3px}
  body:has(.about-shop-grid) .contact-field label{font-size:14px;line-height:1.35}
  body:has(.about-shop-grid) .contact-field input,
  body:has(.about-shop-grid) .contact-field select{min-height:36px;padding:6px 10px;font-size:14px}
  body:has(.about-shop-grid) .contact-field textarea{min-height:76px;padding:7px 10px;font-size:14px}
  body:has(.about-shop-grid) .contact-submit{min-height:38px;padding:7px 22px;font-size:15px}
}

/* Desktop homepage: five full-screen scroll-snap sections. Mobile/tablet keeps natural scrolling. */
@media (min-width: 901px) {
  body:has(.home-main) .home-main { overflow: clip; }
  html:has(.home-main).home-scroll-free { scroll-snap-type: none !important; scroll-behavior: auto !important; }
  html:has(.home-main) {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 104px;
    scroll-behavior: smooth;
  }

  body:has(.home-main) .home-main > section {
    min-height: calc(100svh - 104px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding-block: clamp(24px, 4vh, 48px);
  }

  body:has(.home-main) .home-main > .hero,
  body:has(.home-main) .home-main > .home-section,
  body:has(.home-main) .home-main > .type-section {
    display: grid;
    align-content: center;
  }

  body:has(.home-main) .home-main > .social-about {
    align-content: center;
  }

  body:has(.home-main) .hero-book {
    max-height: min(68svh, 720px);
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  body:has(.home-main) .carousel-track {
    grid-auto-columns: calc((100% - 18px) / 2);
  }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  html:has(.home-main) {
    scroll-snap-type: y proximity;
    scroll-behavior: auto;
  }
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  body:has(.home-main) .home-main > section > *,
  body:has(.home-main) .home-main > .social-about > * {
    opacity: .72;
    translate: 0 12px;
    transition: opacity 480ms cubic-bezier(.22,.61,.36,1), translate 480ms cubic-bezier(.22,.61,.36,1);
  }

  body:has(.home-main) .home-main > section.is-screen-active > *,
  body:has(.home-main) .home-main > .social-about.is-screen-active > * {
    opacity: 1;
    translate: 0 0;
  }
}

/* About page: gentle reveal as major content sections enter the viewport. */
@media (prefers-reduced-motion: no-preference) {
  body.about-reveal-ready .about-reveal {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 560ms cubic-bezier(.22,.61,.36,1), translate 560ms cubic-bezier(.22,.61,.36,1);
  }
  body.about-reveal-ready .about-reveal.is-visible {
    opacity: 1;
    translate: 0 0;
  }
  body.about-reveal-ready .about-shop-grid > .shop-panel {
    transition-delay: 90ms;
  }
}

/* Desktop internal-link preview: a small gilded-paper annotation card. */
.article-link-preview {
  position: fixed;
  z-index: 1000;
  display: block;
  visibility: hidden;
  width: min(320px, calc(100vw - 24px));
  padding: 18px 18px 16px;
  border: 1px solid rgba(178, 145, 77, .42);
  border-top: 3px solid #b99a58;
  border-radius: 5px;
  background: #fbf8ef;
  color: #34463a;
  box-shadow: 0 12px 30px rgba(39, 49, 39, .17), 0 2px 5px rgba(39, 49, 39, .08);
  pointer-events: none;
  opacity: 0;
  translate: 0 5px;
  transition: opacity 180ms ease, translate 180ms ease, visibility 0s linear 180ms;
}
.article-link-preview.is-visible { visibility: visible; pointer-events: auto; opacity: 1; translate: 0 0; transition-delay: 0s; }
.article-link-preview__ornament { display: block; margin-bottom: 7px; color: #b99a58; font-size: 12px; line-height: 1; }
.article-link-preview__title { display: block; color: #354d3d; font-family: "Noto Serif TC", "Source Han Serif TC", "Songti TC", serif; font-size: 16px; font-weight: 700; line-height: 1.5; }
.article-link-preview__excerpt { margin: 7px 0 0; color: #62685e; font-size: 13px; line-height: 1.65; }
.article-link-preview__excerpt[hidden] { display: none; }
@media (max-width: 900px) {
  .article-link-preview { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .article-link-preview { transition: none; translate: 0 0; }
}

/* Desktop homepage: keep the Jung portrait and companion copy within one snap screen. */
@media (min-width: 901px) {
  body:has(.home-main) .home-main > .home-section:has(.about-jung) {
    padding-block: clamp(18px, 2.6vh, 30px);
  }

  body:has(.home-main) .about-jung {
    grid-template-columns: minmax(0, .84fr) minmax(0, 1fr);
    gap: clamp(28px, 3.6vw, 56px);
  }

  body:has(.home-main) .jung-photo {
    height: min(64svh, 620px);
    min-height: 0;
    max-height: min(64svh, 620px);
    object-position: center 30%;
  }

  body:has(.home-main) .about-text h2 {
    font-size: clamp(30px, 2.7vw, 44px);
    margin-bottom: 16px;
  }

  body:has(.home-main) .about-text p {
    font-size: clamp(15px, .98vw, 18px);
    line-height: 1.7;
    margin-bottom: 14px;
  }

  body:has(.home-main) .about-text hr {
    margin: 22px 0 18px;
  }
}

/* Keep the homepage book cover complete while bounding its desktop footprint. */
@media (min-width: 901px) {
  body:has(.home-main) .hero-book {
    width: 100%;
    height: min(68svh, 720px);
    max-width: 100%;
    max-height: min(68svh, 720px);
    object-fit: contain;
    object-position: center;
  }
}

/* Desktop homepage refinements: keep the artwork uncropped and the final footer reachable. */
@media (min-width: 901px) {
  body:has(.home-main) .hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr);
  }

  body:has(.home-main) .hero-book {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: min(80svh, 780px);
    object-fit: contain;
    object-position: center;
    background: transparent;
  }

  body:has(.home-main) .jung-photo {
    width: 100%;
    height: auto;
    max-height: min(70svh, 680px);
    object-fit: contain;
    object-position: center;
  }

  body:has(.home-main) .home-main > section > *,
  body:has(.home-main) .home-main > .social-about > * {
    opacity: .68;
    translate: 0 14px;
    transition: opacity 580ms cubic-bezier(.22,.61,.36,1), translate 580ms cubic-bezier(.22,.61,.36,1);
  }

  body:has(.home-main) > .site-footer {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    scroll-margin-top: 104px;
  }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  body:has(.home-main) .home-main > section > *,
  body:has(.home-main) .home-main > .social-about > * {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}


/* Compact shared chrome on desktop: retain the site's proportions while giving content more vertical room. */
@media (min-width: 761px) {
  :root { --cj-header-height: 86px; }
  .header-inner { min-height: 69px; padding: 8px 28px; }
  .header-logo { width: 52px; height: 52px; }
  .site-footer { margin-top: 32px !important; padding: 13px 0 15px !important; }
  .footer-inner { min-height: 0 !important; padding: 7px 24px !important; gap: clamp(14px, 2.5vw, 26px) !important; }
  .footer-logo { width: 45px !important; height: 45px !important; }
  .footer-social { gap: 18px !important; margin-left: 8px !important; }
  .footer-social a { width: 32px !important; height: 32px !important; }
  .footer-social svg,
  .footer-social .social-threads svg,
  .footer-social .social-discord svg { width: 22px !important; height: 22px !important; }
}

@media (min-width: 761px) and (max-width: 1050px) {
  :root { --cj-header-height: 78px; }
  .header-inner { min-height: 61px; padding: 8px 22px; }
  .header-logo { width: 45px; height: 45px; }
}

@media (min-width: 901px) {
  html:has(.home-main) { scroll-padding-top: var(--cj-header-height, 86px); }
  body:has(.home-main) .home-main > section { min-height: calc(100svh - var(--cj-header-height, 86px)); }
  body:has(.home-main) > .site-footer { scroll-margin-top: var(--cj-header-height, 86px); }
}/* Slightly shorter shared header to keep more page content in view. */
@media (min-width: 1051px) {
  .header-inner { min-height: 60px; padding: 6px 28px; }
  .header-logo { width: 48px; height: 48px; }
}
@media (min-width: 761px) and (max-width: 1050px) {
  .header-inner { min-height: 54px; padding: 6px 22px; }
  .header-logo { width: 40px; height: 40px; }
}
@media (max-width: 760px) {
  .header-inner { min-height: 62px; padding: 7px 15px; }
  .header-logo { width: 46px; height: 46px; }
  .main-nav { top: 62px; }
}

.special-thanks-link{color:var(--cj-green);text-decoration-color:var(--cj-gold);text-underline-offset:.18em}
html[data-theme="night"] .special-thanks-link{color:#8bb7f0!important}

/* Article reading layout v2 */
.article{
  width:min(1120px,calc(100% - 64px));
  max-width:1120px;
  margin-inline:auto;
}
.article-head,.article-body,.article-tags,.share-block{
  width:min(820px,100%);
  margin-left:auto;
  margin-right:auto;
}
.article-head{margin-bottom:clamp(20px,2.6vw,30px)}
.article .cover{
  display:block;
  width:100%;
  max-width:960px;
  max-height:min(56svh,500px);
  height:auto;
  object-fit:contain;
  margin:4px auto clamp(24px,3.5vw,40px);
  border-radius:4px;
}
.article-body{font-size:var(--cj-body-size,18px);line-height:1.9}
.article-body p,.article-body li{line-height:1.9}
.article-body img{
  display:block;
  width:auto;
  max-width:min(100%,820px);
  max-height:72svh;
  height:auto;
  object-fit:contain;
  margin:clamp(22px,3vw,34px) auto;
  border-radius:3px;
  cursor:zoom-in;
}
.article-body img:focus-visible{outline:3px solid rgba(167,131,62,.65);outline-offset:4px}
.article-image-viewer{
  position:relative;
  max-width:min(96vw,1440px);
  max-height:94svh;
  padding:52px 18px 34px;
  overflow:hidden;
  border:1px solid var(--cj-gold-soft);
  border-radius:5px;
  background:var(--cj-paper-light);
  color:var(--cj-ink);
  box-shadow:0 18px 60px rgba(0,0,0,.28);
}
.article-image-viewer::backdrop{background:rgba(20,26,22,.78);backdrop-filter:blur(3px)}
.article-image-viewer img{
  display:block;
  max-width:calc(96vw - 40px);
  max-height:calc(94svh - 104px);
  width:auto;
  height:auto;
  object-fit:contain;
  margin:auto;
  cursor:zoom-out;
}
.article-image-viewer button{
  position:absolute;
  top:8px;
  right:10px;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid var(--cj-line);
  border-radius:50%;
  background:var(--cj-paper);
  color:var(--cj-green-deep);
  font:300 26px/1 system-ui,sans-serif;
  cursor:pointer;
}
.article-image-viewer p{margin:10px 0 0;color:var(--cj-muted);font-size:13px;text-align:center}
.article-tags,.share-block{max-width:820px}
@media(max-width:760px){
  .article{width:calc(100% - 36px);max-width:none}
  .article-head,.article-body,.article-tags,.share-block{width:100%}
  .article .cover{max-height:44svh;margin-bottom:22px}
  .article-body img{max-width:100%;max-height:68svh;margin:22px auto}
  .article-image-viewer{max-width:calc(100vw - 20px);padding:48px 10px 26px}
  .article-image-viewer img{max-width:calc(100vw - 40px);max-height:calc(92svh - 100px)}
}

/* Article page layout: compact editorial cards based on the approved static mockup. */
.article{width:min(1120px,calc(100% - 64px));max-width:1120px;margin-inline:auto}
.article-head,.article-body,.article-tags,.share-block{width:min(850px,100%);max-width:850px;margin-left:auto;margin-right:auto}
.article-head{margin-bottom:14px;padding:18px 30px 16px;border:1px solid var(--cj-gold-soft);background:linear-gradient(115deg,var(--cj-paper-light) 0%,var(--cj-paper) 58%,var(--cj-paper-deep) 100%);box-shadow:inset 0 0 0 5px rgba(255,255,255,.48),inset 0 0 0 6px rgba(167,131,62,.1)}
.article h1{margin:0;color:var(--cj-green-deep);font-size:clamp(28px,2.7vw,36px);font-weight:500;line-height:1.24;letter-spacing:.02em}
.article-head .meta{margin-top:9px;font-size:14px;line-height:1.6}
.article-head .categories{gap:6px;margin-left:8px}
.article-head .category{padding:4px 11px;border:1px solid rgba(167,131,62,.2);border-radius:3px;background:var(--cj-green-soft);color:var(--cj-green-deep)}
.article-head .taxonomy{margin-top:8px;font-size:13px}
.article .cover{display:block;width:100%;max-width:960px;max-height:220px;height:auto;object-fit:contain;margin:10px auto 12px;border:1px solid var(--cj-gold-soft);border-radius:3px;background:var(--cj-paper-light)}
.article-body{padding:20px 34px;border:1px solid var(--cj-line);background:rgba(252,250,245,.72);box-shadow:0 5px 18px rgba(43,55,45,.035);font-size:16px;line-height:1.65}
.article-body p,.article-body li{line-height:1.65}
.article-body h2{font-size:clamp(21px,2.2vw,27px);line-height:1.4;margin:1.25em 0 .4em;padding-left:12px;border-left:3px solid var(--cj-gold)}
.article-body h3{font-size:19px;line-height:1.4;margin:1.05em 0 .35em}
.article-body img{max-width:min(100%,760px);max-height:440px;margin:16px auto 19px}
.article-body blockquote{margin:15px 0;padding:9px 14px;border-left:3px double var(--cj-gold)}
.article-tags,.share-block{margin-top:14px}
@media(max-width:760px){
  .article{width:calc(100% - 24px);max-width:none}
  .article-head,.article-body,.article-tags,.share-block{width:100%}
  .article-head{margin-bottom:10px;padding:15px 15px 13px}
  .article h1{font-size:clamp(24px,6.5vw,30px);line-height:1.3}
  .article-head .meta{font-size:12px;gap:5px}
  .article-head .category{padding:3px 8px;font-size:12px}
  .article .cover{max-height:156px;margin:8px auto 9px}
  .article-body{padding:16px 15px;font-size:16px;line-height:1.62}
  .article-body p,.article-body li{line-height:1.62}
  .article-body h2{font-size:20px;line-height:1.38;margin:1.15em 0 .35em;padding-left:9px}
  .article-body h3{font-size:18px}
  .article-body img{max-height:300px;margin:15px auto}
  .article-tags,.share-block{margin-top:12px}
}

/* Give each social link its own recognizable brand color while keeping the site's paper-and-gold frame. */
.home-social-icon.instagram,.social-icon.instagram{background:linear-gradient(145deg,#a83f73 0%,#c34e69 52%,#d87948 100%);color:#fff}
.home-social-icon.threads,.social-icon.threads{background:#252a27;color:#fff}
.home-social-icon.discord,.social-icon.discord{background:#5865d9;color:#fff}
.home-social-icon.instagram:hover,.social-icon.instagram:hover{background:linear-gradient(145deg,#92345f 0%,#ad405d 52%,#c4663c 100%)}
.home-social-icon.threads:hover,.social-icon.threads:hover{background:#111614}
.home-social-icon.discord:hover,.social-icon.discord:hover{background:#4853c4}
.home-social-icon:focus-visible,.social-icon:focus-visible{outline:3px solid var(--cj-gold,#a7833e);outline-offset:4px}

/* Homepage refresh: carry the quiz landing page's framed paper and brass details into the welcome section. */
body:has(.home-main) .home-main>.hero{
  width:min(1480px,calc(100% - clamp(28px,6vw,96px)));margin:clamp(16px,2.2vw,30px) auto 0;padding:clamp(12px,1.6vw,22px);
  border:1px solid var(--cj-gold,#a7833e);border-radius:4px;
  background:linear-gradient(135deg,rgba(255,253,248,.98),rgba(241,235,220,.96));
  box-shadow:0 5px 17px rgba(43,55,45,.075),inset 0 0 0 4px rgba(255,255,255,.6),inset 0 0 0 5px rgba(167,131,62,.14)
}
body:has(.home-main) .hero-grid{width:100%;grid-template-columns:minmax(0,1.35fr) minmax(260px,.9fr);gap:clamp(20px,3vw,42px)}
body:has(.home-main) .hero-copy{padding:clamp(24px,3vw,48px);background:transparent;backdrop-filter:none}
body:has(.home-main) .hero h1{margin-bottom:clamp(16px,2vw,26px);font-size:clamp(40px,5vw,72px);line-height:1.22;letter-spacing:.045em}
body:has(.home-main) .hero-copy .home-copy{font-size:clamp(16px,1.15vw,19px);line-height:1.85}
body:has(.home-main) .hero-book{max-height:680px;border:1px solid rgba(167,131,62,.38);box-shadow:0 9px 26px rgba(43,55,45,.13)}
body:has(.home-main) .home-buttons,body:has(.home-main) .feature-actions{gap:14px}
body:has(.home-main) .home-buttons .home-btn,body:has(.home-main) .feature-actions .home-btn{
  position:relative;min-height:54px;padding:12px 24px;border:1px solid var(--cj-gold,#a7833e);border-radius:2px;
  font-size:17px;letter-spacing:.08em;box-shadow:inset 0 0 0 2px rgba(230,215,178,.18),0 3px 8px rgba(43,55,45,.12)
}
body:has(.home-main) .home-buttons .home-btn:first-child,body:has(.home-main) .feature-actions .home-btn:first-child{
  padding-right:48px;background:linear-gradient(145deg,#3e5c46,var(--cj-green-deep,#304637));color:var(--cj-paper-light,#fbf9f3)
}
body:has(.home-main) .home-buttons .home-btn:first-child:after,body:has(.home-main) .feature-actions .home-btn:first-child:after{
  position:absolute;right:17px;content:'›';font:32px/1 Georgia,serif;color:#eadcb8;transition:transform .2s ease
}
body:has(.home-main) .home-buttons .home-btn:not(:first-child),body:has(.home-main) .feature-actions .home-btn:not(:first-child){background:rgba(255,253,248,.82);color:var(--cj-green-deep,#304637)}
body:has(.home-main) .home-buttons .home-btn:hover,body:has(.home-main) .feature-actions .home-btn:hover{transform:translateY(-2px);border-color:#c5a45a;box-shadow:inset 0 0 0 2px rgba(230,215,178,.28),0 6px 12px rgba(43,55,45,.2)}
body:has(.home-main) .home-buttons .home-btn:first-child:hover,body:has(.home-main) .feature-actions .home-btn:first-child:hover{background:linear-gradient(145deg,#536e58,var(--cj-green,#405b49));color:#fff}
body:has(.home-main) .home-buttons .home-btn:first-child:hover:after,body:has(.home-main) .feature-actions .home-btn:first-child:hover:after{transform:translateX(3px)}
body:has(.home-main) .home-buttons .home-btn:focus-visible,body:has(.home-main) .feature-actions .home-btn:focus-visible{outline:3px solid var(--cj-gold,#a7833e);outline-offset:4px}
@media(max-width:760px){body:has(.home-main) .home-main>.hero{width:calc(100% - 28px);padding:8px;margin-top:14px}body:has(.home-main) .hero-grid{grid-template-columns:1fr}body:has(.home-main) .hero-copy{padding:23px 19px}body:has(.home-main) .hero-book{max-height:420px;width:min(100%,360px);margin:0 auto 14px;object-fit:contain}body:has(.home-main) .home-buttons .home-btn,body:has(.home-main) .feature-actions .home-btn{min-height:50px;padding:10px 18px;font-size:16px}body:has(.home-main) .home-buttons .home-btn:first-child,body:has(.home-main) .feature-actions .home-btn:first-child{padding-right:42px}}
@media(prefers-reduced-motion:reduce){body:has(.home-main) .home-buttons .home-btn,body:has(.home-main) .feature-actions .home-btn{transition:none}}