/* =====================================================================
   風格 A｜紙本雜誌
   像一本周年特刊：黑字、大號宋體標題，每個單元用代表色的正方形
   標出章節（呼應首頁的彩色方塊與大塊文化的方形 Logo），大塊綠作為全站品牌色。
   底色三選一：body.bg-white（白）／bg-gray（淡灰）／bg-green（淺綠灰）
   ===================================================================== */
:root{--paper:#ffffff;--card:#f5f5f3;--ink:#1c1c1a;--muted:#5b5b56;--rule:#1c1c1a;--line:#e2e2de}
body.bg-white{--paper:#ffffff;--card:#f5f5f3;--line:#e2e2de}
body.bg-gray{--paper:#f0f0ee;--card:#ffffff;--line:#d9d9d4}
body.bg-green{--paper:#edf2ef;--card:#ffffff;--line:#d3ddd7}

/* ---- 刊頭：上方一道大塊綠，黑體站名 ---- */
.top{background:var(--paper);color:var(--ink);border-top:6px solid var(--brand);border-bottom:2px solid var(--rule)}
.brand{color:var(--ink)}
.brand-sub{color:var(--brand);opacity:1}
.brand-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.brand-issue{font:700 11px/1 var(--mono);letter-spacing:.14em;color:var(--ink);opacity:.8}
#home .mag-issue{display:none}
#home .mag-hero{padding-top:8px}
.nav a{color:var(--ink)}
.nav a.active:after{height:4px;bottom:-2px}
.toggle{border-color:var(--ink);color:var(--ink)}

/* ---- 首頁彩色入口：正方形（一排 4 個或 3 個）---- */
.mag-covers.sq-grid{container-type:inline-size;--u:.25cqw;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;border-bottom:0;background:transparent}
.mag-covers.sq-cols-3{--u:.333cqw;grid-template-columns:repeat(3,minmax(0,1fr))}
.mag-cover.sq{aspect-ratio:1/1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;padding:calc(9*var(--u)) calc(9*var(--u)) calc(8*var(--u));border:0;overflow:hidden}
.mag-cover.sq>.sq-top{display:flex;align-items:flex-start;gap:calc(6*var(--u));height:auto;margin:0;font:inherit;letter-spacing:0}
.sq-no{font:900 calc(21*var(--u))/.74 var(--serif);font-style:normal;letter-spacing:-.02em}
.sq-label{border-left:1.5px solid currentColor;padding:0 0 0 calc(4*var(--u));font:700 max(12px,calc(5.2*var(--u)))/1.25 var(--sans);letter-spacing:.08em;text-transform:uppercase;align-self:flex-start;margin-top:calc(-1.1*var(--u))}
.mag-cover.sq .sq-title{display:block;margin:calc(9*var(--u)) 0 0;font:900 max(20px,calc(12.5*var(--u)))/1.18 var(--serif);letter-spacing:.01em}
.mag-cover.sq .sq-sum{display:block;margin-top:auto;font:500 max(13px,calc(6.2*var(--u)))/1.55 var(--sans)}
.mag-cover.sq:hover,.mag-cover.sq:focus-visible{transform:none;filter:brightness(1.04);outline:3px solid var(--ink);outline-offset:-3px}
.sq-extra{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.sq-extra .sq-label{border-left:0;padding-left:0;color:var(--brand)}
@media(max-width:760px){.mag-covers.sq-grid,.mag-covers.sq-cols-3{--u:.5cqw;grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- 內頁刊頭：左方彩色正方形（章節編號）、右側文字上下對齊方塊、最右放圖 ---- */
.inner{position:relative;background:var(--paper);border-bottom:2px solid var(--rule);display:grid;grid-template-columns:minmax(0,1fr);column-gap:28px;align-items:stretch;padding-top:32px;padding-bottom:32px;--sq:132px}
.has-square .inner{grid-template-columns:var(--sq) minmax(0,1fr) auto;grid-template-rows:auto 1fr auto}
.has-square .inner::before{content:var(--chapter);grid-column:1;grid-row:1/span 3;width:var(--sq);height:var(--sq);box-sizing:border-box;padding:14px 16px;background:var(--mod);color:var(--mod-ink);font:900 50px/.8 var(--serif);letter-spacing:-.02em}
.inner>small,.inner>h1,.inner>p{grid-column:2;margin:0}
.page:not(.has-square) .inner>small,.page:not(.has-square) .inner>h1,.page:not(.has-square) .inner>p{grid-column:1}
.inner>small{grid-row:1;align-self:start;color:var(--ink);font:700 14px/1 var(--sans);letter-spacing:.14em;display:block}
.inner>small::before{content:none}
.inner>h1{grid-row:2;align-self:center;font-size:clamp(30px,3.4vw,44px);line-height:1.15;padding:6px 0}
.inner>p{grid-row:3;align-self:end;color:var(--muted);font-size:17px;line-height:1.2}
.has-square .inner{min-height:0}
.hdr-media{display:block;grid-column:3;grid-row:1/span 3;align-self:center;justify-self:end;max-width:100%}
.hdr-photo{display:block;width:440px;max-width:100%;height:var(--sq);object-fit:cover}
.hdr-covers{display:flex;gap:6px;justify-content:flex-end;align-items:center;height:var(--sq)}
.hdr-covers img{height:var(--sq);width:auto;min-width:0;flex:0 1 auto;object-fit:contain;mix-blend-mode:multiply}
@media(max-width:1100px){.hdr-photo{width:300px}.hdr-covers img:nth-child(n+4){display:none}}
@media(max-width:760px){
  .inner{--sq:80px;padding-top:24px;padding-bottom:24px;column-gap:16px}
  .has-square .inner{grid-template-columns:var(--sq) minmax(0,1fr);grid-template-rows:auto 1fr auto}
  .has-square .inner::before{grid-row:1/span 2;padding:9px 10px;font-size:30px}
  .hdr-media{display:none}
  .inner>h1{font-size:28px;align-self:end;padding:0}
  .inner>p{grid-column:1/-1;grid-row:3;margin-top:14px;font-size:15px;line-height:1.5}
}

/* ---- 單元內容 ---- */
.content{background:var(--paper)}
.light-row-0915,.timeline-card,.activity-note,.diary-entry,.notice,.rex-live,.empty-note{background:var(--card);border:0;border-top:3px solid var(--mod)}
.light-row-0915{padding:30px 32px}
.light-copy-0915 small{color:var(--muted);letter-spacing:.14em}
.light-copy-0915 h2{font-weight:900}
.real-card,.book-detail-copy,.gift-card,.gift-detail,.store-section,.letter-full,.rex-map-card,.meta,.form,.vote-selected{background:var(--card);border-top:3px solid var(--mod)}
.gallery figure{background:var(--card)}
.activity-note>small,.store-section>small,.rex-map-heading small,.gift-card small,.gift-detail>div>small{color:var(--ink)}
.activity-note>small::before,.store-section>small::before{content:"";display:inline-block;width:18px;height:3px;background:var(--mod);vertical-align:middle;margin-right:8px}
.lights-subnav a,.flow a{border:1.5px solid var(--ink);background:transparent;color:var(--ink)}
.lights-subnav a.current,.flow a.current{background:var(--ink);color:var(--paper)}
.site-btn,a.action{background:var(--brand)}
.back{color:var(--brand)}
.selection-copy em{color:var(--ink);font-weight:700}
.selection-copy small{color:var(--muted)}
.form input,.form textarea{background:var(--paper)}

/* ---- 首頁 ---- */
.mag-issue{border-bottom-width:2px}
.mag-hero{border-bottom-width:2px}
.mag-hero-copy>small,.mag-heading small,.mag-index b{color:var(--brand)}
.mag-covers{border-bottom-color:var(--brand)}
.mag-index{border-top-width:2px}

/* ---- 頁尾：大塊綠 ---- */
.site-footer{background:var(--brand);color:#fff}
.site-footer a{color:#fff}
.ft-copy{border-top:1px solid rgba(255,255,255,.3)}
.ft-logo{box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.mag-cover.sq:last-child{grid-column:auto;min-height:0}
@media(max-width:760px){.brand-issue{display:none}}

/* ---- 30道光：書封放大、等高，超出時左右滑動 ---- */
.light-row-0915{grid-template-columns:minmax(220px,.62fr) minmax(0,1.9fr);align-items:center}
.light-covers-0915{position:relative;gap:22px;align-items:flex-end;padding:14px 4px 18px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.light-covers-0915 .cover-button{flex:0 0 auto;scroll-snap-align:start}
.light-covers-0915 .book-cover.thumb{height:250px;width:auto;max-width:none}
.light-covers-0915 .book-cover-missing.thumb{height:250px;width:176px}
.light-covers-0915.is-scroll:not(.at-end){-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.light-row-0915{position:relative}
.light-covers-0915.is-scroll+.scroll-hint{display:block}
@media(max-width:760px){.light-covers-0915 .book-cover.thumb{height:190px}.light-covers-0915 .book-cover-missing.thumb{height:190px;width:134px}}
.scroll-hint{display:none;grid-column:2;margin:-6px 0 0;text-align:right;font:700 13px/1 var(--sans);letter-spacing:.06em;color:var(--muted)}
@media(max-width:760px){.scroll-hint{grid-column:1}}
@media(max-width:760px){.light-row-0915{grid-template-columns:minmax(0,1fr)}.scroll-hint{grid-column:1;text-align:left;margin-top:-4px}}

/* ---- 1.5.0：頁首右側圖片完整顯示、不裁切（依高度縮放、靠右） ---- */
.hdr-photo{width:auto;max-width:min(600px,100%);height:var(--sq);object-fit:contain;object-position:right center}
@media(max-width:1100px){.hdr-photo{width:auto;max-width:min(420px,100%)}}

/* ---- 1.5.0：首頁七個色塊改為有厚度的光板（顏色不變，內部有微光） ---- */
.mag-covers.sq-grid{gap:14px;padding-bottom:10px}
.mag-cover.sq:not(.sq-extra){border-radius:3px;isolation:isolate;
  background:
    radial-gradient(ellipse 90% 75% at 32% 26%,rgba(255,255,255,.16),rgba(255,255,255,0) 62%),
    linear-gradient(158deg,color-mix(in srgb,var(--cover) 93%,#fff) 0%,var(--cover) 45%,color-mix(in srgb,var(--cover) 88%,#000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 1px 0 0 rgba(255,255,255,.28),
    inset -1px 0 0 rgba(0,0,0,.10),
    inset 0 -2px 0 rgba(0,0,0,.14),
    0 6px 0 color-mix(in srgb,var(--cover) 60%,#000),
    0 7px 0 rgba(0,0,0,.16),
    0 16px 30px -8px color-mix(in srgb,var(--cover) 60%,transparent),
    0 22px 34px -16px rgba(0,0,0,.32);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
/* 板子裡透出的微光：緩慢明暗 */
.mag-cover.sq:not(.sq-extra)::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 58%,rgba(255,255,255,.26),rgba(255,255,255,0) 70%);
  animation:locus-panel 6s ease-in-out infinite}
.mag-cover.sq:not(.sq-extra)::after{content:"";position:absolute;inset:0 0 auto;height:30%;z-index:-1;border-radius:3px 3px 0 0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0))}
.mag-covers.sq-grid .mag-cover.sq:nth-child(2)::before{animation-delay:-.9s}
.mag-covers.sq-grid .mag-cover.sq:nth-child(3)::before{animation-delay:-1.8s}
.mag-covers.sq-grid .mag-cover.sq:nth-child(4)::before{animation-delay:-2.7s}
.mag-covers.sq-grid .mag-cover.sq:nth-child(5)::before{animation-delay:-3.6s}
.mag-covers.sq-grid .mag-cover.sq:nth-child(6)::before{animation-delay:-4.5s}
.mag-covers.sq-grid .mag-cover.sq:nth-child(7)::before{animation-delay:-5.4s}
@keyframes locus-panel{0%,100%{opacity:.45}50%{opacity:1}}
.mag-cover.sq:not(.sq-extra):hover{transform:translateY(-3px);filter:brightness(1.05);outline:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 1px 0 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.14),
    0 9px 0 color-mix(in srgb,var(--cover) 60%,#000),0 10px 0 rgba(0,0,0,.16),
    0 22px 40px -8px color-mix(in srgb,var(--cover) 75%,transparent),0 28px 40px -18px rgba(0,0,0,.34)}
.mag-cover.sq:not(.sq-extra):focus-visible{outline:3px solid var(--ink);outline-offset:4px}
@media(max-width:760px){.mag-covers.sq-grid{gap:12px}}
@media(prefers-reduced-motion:reduce){.mag-cover.sq::before{animation:none;opacity:.8}.mag-cover.sq:hover{transform:none}}

/* ---- 1.5.0：手機版首頁燈塔人放大 ---- */
@media(max-width:760px){
  .mag-mark{padding:6px 0}
  .mag-mark img,.mag-mark .logo-anim{width:110%;max-width:none;transform:translateX(-2%)}
  .mag-mark .logo-anim .logo-layer{width:100%;transform:none}
}

/* ---- 1.5.0：內頁刊頭的章節方塊也做成光板（和首頁色塊一致） ---- */
.hdr-panel .has-square .inner::before{border-radius:3px;
  background:
    radial-gradient(ellipse 90% 75% at 32% 26%,rgba(255,255,255,.16),rgba(255,255,255,0) 62%),
    linear-gradient(158deg,color-mix(in srgb,var(--mod) 93%,#fff) 0%,var(--mod) 45%,color-mix(in srgb,var(--mod) 88%,#000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 1px 0 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.14),
    0 6px 0 color-mix(in srgb,var(--mod) 60%,#000),0 7px 0 rgba(0,0,0,.16),
    0 16px 30px -8px color-mix(in srgb,var(--mod) 60%,transparent),0 22px 34px -16px rgba(0,0,0,.32);
  animation:locus-hdr 6s ease-in-out infinite}
@keyframes locus-hdr{0%,100%{filter:brightness(1)}50%{filter:brightness(1.08)}}
@media(max-width:760px){.hdr-panel .has-square .inner::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(0,0,0,.14),0 4px 0 color-mix(in srgb,var(--mod) 60%,#000),0 12px 22px -8px color-mix(in srgb,var(--mod) 60%,transparent)}}
/* 整個刊頭帶一層淡淡的單元色光（從方塊向右漸淡） */
.hdr-glow .has-square .inner{background:
  radial-gradient(ellipse 60% 120% at 6% 50%,color-mix(in srgb,var(--mod) 22%,transparent),transparent 70%),
  linear-gradient(90deg,color-mix(in srgb,var(--mod) 7%,var(--paper)),var(--paper) 75%)}
@media(prefers-reduced-motion:reduce){.hdr-panel .has-square .inner::before{animation:none}}