/* ============================================================
   2026 台灣慢城年會暨論壇 · 線上手冊
   紙感書房：奶油紙 × 陶土橘 × 深可可
   ============================================================ */

:root{
  --paper:      #f4e9d8;
  --paper-2:    #efe0c9;
  --paper-3:    #e6d3b6;
  --cocoa:      #3a2c23;
  --cocoa-soft: #6b5748;
  --clay:       #c4703f;
  --clay-deep:  #a8552b;
  --sage:       #9dbe8e;
  --gold:       #e0b062;
  --ink:        #2a201a;

  --shell:      #2c231d;
  --shell-2:    #221a15;

  --serif: "Noto Serif TC", "Songti TC", serif;
  --disp:  "Cormorant Garamond", "Noto Serif TC", serif;

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 26px;

  --ease: cubic-bezier(.22,.7,.24,1);
  --bar-h: 54px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
  font-family:var(--serif);
  color:var(--ink);
  background:var(--paper);
  overscroll-behavior:none;
}

svg{ width:20px; height:20px; fill:none; stroke:currentColor;
     stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
[hidden]{ display:none !important; }

/* ── 紙紋 ─────────────────────────────────────────────── */
.cover__grain{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* ============================================================
   封面
   ============================================================ */
.cover{
  position:relative;
  min-height:100svh;
  padding:clamp(24px,5vw,64px) clamp(20px,5vw,72px) 0;
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 80% at 8% -10%, #fbf3e5 0%, rgba(251,243,229,0) 60%),
    radial-gradient(90% 70% at 100% 105%, rgba(196,112,63,.18) 0%, rgba(196,112,63,0) 62%),
    var(--paper);
  overflow:hidden;
}

/* 蝸牛殼線 */
.cover::before{
  content:""; position:absolute;
  right:-14vw; top:14vh; width:58vw; height:58vw;
  border:1px solid rgba(58,44,35,.14); border-radius:50%;
  box-shadow:inset 0 0 0 22vw rgba(157,190,142,.07);
  pointer-events:none;
}
.cover::after{
  content:""; position:absolute;
  left:-18vw; bottom:-24vw; width:46vw; height:46vw;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(224,176,98,.28), rgba(224,176,98,0) 65%);
  pointer-events:none;
}

.cover__inner{
  position:relative; z-index:3;
  flex:1;
  width:min(1180px,100%); margin-inline:auto;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,6vw,84px); align-items:center;
  padding-block:clamp(16px,4vh,56px);
}

.eyebrow{
  font-family:var(--disp); font-style:italic;
  font-size:clamp(.85rem,1.5vw,1.05rem);
  letter-spacing:.06em; color:var(--clay-deep);
  padding-bottom:14px; margin-bottom:20px;
  border-bottom:1px solid rgba(58,44,35,.18);
  max-width:26em;
}
.eyebrow sup{ font-size:.62em; }

.title{ font-weight:700; line-height:1.06; letter-spacing:.02em; }
.title__line{ display:block; font-size:clamp(2.4rem,6.4vw,4.5rem); color:var(--cocoa); }
.title__line--sm{
  font-size:clamp(1rem,2.2vw,1.45rem); font-weight:400;
  letter-spacing:.5em; color:var(--cocoa-soft); margin-bottom:.5em;
}
.title__accent{
  color:var(--clay-deep);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}

.script{
  font-family:var(--disp); font-style:italic; font-weight:600;
  font-size:clamp(1.3rem,3vw,2rem);
  color:var(--sage); filter:saturate(.85) brightness(.82);
  margin-top:.55em; letter-spacing:.04em;
}

.facts{
  display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,44px);
  margin:clamp(24px,4vh,40px) 0 clamp(26px,4vh,38px);
}
.facts dt{
  font-size:.72rem; letter-spacing:.34em; color:var(--cocoa-soft);
  margin-bottom:.5em;
}
.facts dd{ font-size:clamp(1rem,1.9vw,1.25rem); font-weight:600; color:var(--cocoa); }
.facts .dash{ color:var(--clay); padding-inline:.15em; }

.cover__actions{ display:flex; flex-wrap:wrap; gap:12px; }

.btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.85em 1.5em; border-radius:100px;
  font-size:1rem; font-weight:600; letter-spacing:.05em;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.btn svg{ width:19px; height:19px; }
.btn--primary{
  background:var(--clay-deep); color:#fdf6ea;
  box-shadow:0 10px 24px -10px rgba(168,85,43,.75);
}
.btn--primary:hover{ transform:translateY(-2px); background:#96481f;
  box-shadow:0 16px 30px -12px rgba(168,85,43,.8); }
.btn--ghost{ border:1px solid rgba(58,44,35,.28); color:var(--cocoa); }
.btn--ghost:hover{ background:rgba(58,44,35,.06); transform:translateY(-2px); }

.cover__hint{
  margin-top:20px; font-size:.85rem; letter-spacing:.12em; color:var(--cocoa-soft);
}

/* 書 */
.cover__book{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.book{
  position:relative; width:min(360px,78%);
  transform:rotate(-2.2deg);
  transition:transform .6s var(--ease);
}
.book:hover{ transform:rotate(0deg) translateY(-6px); }
.book img{
  display:block; width:100%; height:auto; border-radius:3px 8px 8px 3px;
  box-shadow:
    0 2px 4px rgba(58,44,35,.18),
    0 30px 60px -24px rgba(58,44,35,.55),
    0 60px 90px -50px rgba(58,44,35,.5);
}
.book__edge{
  position:absolute; inset:0 auto 0 0; width:9px;
  border-radius:3px 0 0 3px;
  background:repeating-linear-gradient(to right,#e7d8bf 0 1px,#cbb593 1px 3px);
  box-shadow:inset -2px 0 4px rgba(58,44,35,.25);
}

.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.chips button{
  padding:.5em 1.05em; border-radius:100px;
  border:1px solid rgba(58,44,35,.2);
  font-size:.86rem; letter-spacing:.08em; color:var(--cocoa-soft);
  background:rgba(255,255,255,.35);
  transition:.25s var(--ease);
}
.chips button:hover{ background:var(--cocoa); color:var(--paper); border-color:var(--cocoa); }

.cover__foot{
  position:relative; z-index:3;
  padding:18px 0 22px; text-align:center;
  font-family:var(--disp); font-style:italic; font-size:.9rem;
  letter-spacing:.14em; color:rgba(58,44,35,.45);
}

/* 進場 */
.cover__text > *{ animation:rise .9s var(--ease) both; }
.cover__text > *:nth-child(2){ animation-delay:.06s; }
.cover__text > *:nth-child(3){ animation-delay:.12s; }
.cover__text > *:nth-child(4){ animation-delay:.18s; }
.cover__text > *:nth-child(5){ animation-delay:.24s; }
.cover__text > *:nth-child(6){ animation-delay:.3s; }
.cover__book{ animation:rise 1.1s .1s var(--ease) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

@media (max-width:860px){
  .cover__inner{ grid-template-columns:1fr; gap:34px; padding-top:8px; }
  .cover__book{ order:-1; }
  .book{ width:min(230px,55%); }
  .facts{ gap:22px; margin:20px 0 24px; }
}

/* ============================================================
   閱讀器
   ============================================================ */
.reader{
  position:fixed; inset:0; z-index:20;
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 90% at 50% 0%, #3b2f27 0%, var(--shell) 45%, var(--shell-2) 100%);
  color:var(--paper);
}

.bar{
  flex:none;
  background:rgba(34,26,21,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
.bar--top{
  display:flex; align-items:center; gap:6px;
  height:var(--bar-h); padding:0 10px;
  padding-top:env(safe-area-inset-top);
  height:calc(var(--bar-h) + env(safe-area-inset-top));
  border-bottom:1px solid rgba(244,233,216,.12);
}
.bar__title{
  flex:1; text-align:center; line-height:1.15; overflow:hidden;
}
.bar__title strong{ display:block; font-size:.92rem; font-weight:600; letter-spacing:.05em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar__title span{ font-family:var(--disp); font-style:italic; font-size:.76rem;
  letter-spacing:.1em; color:rgba(244,233,216,.55); }

.icon{
  flex:none; display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  width:40px; height:40px; border-radius:12px;
  color:rgba(244,233,216,.85);
  transition:.22s var(--ease);
}
.icon:hover{ background:rgba(244,233,216,.12); color:#fff; }
.icon--label{ width:auto; padding:0 12px; font-size:.82rem; letter-spacing:.1em; }
.icon--label svg{ width:17px; height:17px; }

/* 舞台 */
.stage{
  position:relative; flex:1; min-height:0;
  display:flex; align-items:center;
}
.track{
  height:100%; width:100%;
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.track::-webkit-scrollbar{ display:none; }

.slide{
  flex:0 0 100%; height:100%;
  scroll-snap-align:center;
  display:flex; align-items:center; justify-content:center;
  gap:0; padding:clamp(10px,2.2vh,26px) clamp(12px,4vw,64px);
}
.slide__page{
  position:relative;
  height:100%; max-height:100%;
  display:flex; align-items:center;
}
.slide__page img{
  display:block;
  max-height:100%; max-width:100%; width:auto; height:auto;
  background:var(--paper-2);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.4);
  cursor:zoom-in;
  opacity:0; transition:opacity .5s var(--ease);
}
.slide__page img.is-loaded{ opacity:1; }
.slide--spread .slide__page:first-child img{ border-radius:4px 0 0 4px; }
.slide--spread .slide__page:last-child img{ border-radius:0 4px 4px 0; }
.slide--single .slide__page img{ border-radius:4px; }

/* 書溝 */
.slide--spread .slide__page:first-child::after{
  content:""; position:absolute; inset:0 0 0 auto; width:26px;
  background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.28));
  pointer-events:none;
}
.slide--spread .slide__page:last-child::after{
  content:""; position:absolute; inset:0 auto 0 0; width:26px;
  background:linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,.28));
  pointer-events:none;
}

.nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:46px; height:74px; border-radius:14px;
  display:grid; place-items:center;
  color:rgba(244,233,216,.6);
  background:rgba(244,233,216,.06);
  border:1px solid rgba(244,233,216,.1);
  transition:.25s var(--ease);
}
.nav svg{ width:24px; height:24px; }
.nav:hover{ background:rgba(244,233,216,.16); color:#fff; }
.nav:disabled{ opacity:0; pointer-events:none; }
.nav--prev{ left:10px; }
.nav--next{ right:10px; }
@media (max-width:820px){ .nav{ display:none; } }

/* 底部 */
.bar--bottom{
  padding-bottom:env(safe-area-inset-bottom);
  border-top:1px solid rgba(244,233,216,.12);
}
.progress{ height:2px; background:rgba(244,233,216,.14); }
.progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--clay),var(--gold));
  transition:width .35s var(--ease);
}
.bar__row{
  height:var(--bar-h);
  display:flex; align-items:center; justify-content:space-between; padding:0 8px;
}
.counter{
  font-family:var(--disp); font-size:1.05rem; letter-spacing:.1em;
  color:rgba(244,233,216,.75);
  display:flex; align-items:baseline; gap:.45em;
}
.counter output{ font-size:1.35rem; font-weight:600; color:var(--gold); }

/* 縮圖 */
.thumbs{
  position:absolute; left:0; right:0; bottom:0; z-index:6;
  background:rgba(24,18,14,.96);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(244,233,216,.14);
  padding-bottom:env(safe-area-inset-bottom);
  animation:slideUp .35s var(--ease) both;
}
@keyframes slideUp{ from{ transform:translateY(100%); } to{ transform:none; } }
.thumbs__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 8px 8px 16px;
  font-size:.8rem; letter-spacing:.2em; color:rgba(244,233,216,.6);
}
.thumbs__scroll{
  display:flex; gap:10px; overflow-x:auto; padding:0 16px 16px;
  scrollbar-width:thin;
}
.thumbs__scroll button{
  flex:none; width:62px; position:relative;
  border-radius:3px; overflow:hidden; line-height:0;
  outline:2px solid transparent; outline-offset:2px;
  transition:.2s var(--ease);
}
.thumbs__scroll img{ width:100%; height:auto; display:block; background:var(--paper-3); }
.thumbs__scroll button b{
  position:absolute; inset:auto 0 0 0; line-height:1.6;
  font-size:.62rem; font-weight:400; letter-spacing:.08em;
  background:rgba(0,0,0,.6); color:#fff;
}
.thumbs__scroll button:hover{ outline-color:rgba(244,233,216,.4); }
.thumbs__scroll button[aria-current="true"]{ outline-color:var(--gold); }

/* ============================================================
   目錄
   ============================================================ */
.toc{ position:fixed; inset:0; z-index:40; }
.toc__scrim{ position:absolute; inset:0; background:rgba(24,18,14,.55);
  animation:fade .3s var(--ease) both; }
@keyframes fade{ from{opacity:0} to{opacity:1} }

.toc__panel{
  position:absolute; inset:0 auto 0 0; z-index:2;
  width:min(420px,86vw);
  background:linear-gradient(160deg,#f7eee0,var(--paper-2));
  color:var(--ink);
  display:flex; flex-direction:column;
  box-shadow:24px 0 60px -20px rgba(0,0,0,.6);
  animation:slideIn .4s var(--ease) both;
}
@keyframes slideIn{ from{ transform:translateX(-100%); } to{ transform:none; } }

.toc__head{
  flex:none; display:flex; align-items:flex-start; justify-content:space-between;
  padding:calc(20px + env(safe-area-inset-top)) 16px 16px 26px;
  border-bottom:1px solid rgba(58,44,35,.16);
}
.toc__head .icon{ color:var(--cocoa-soft); }
.toc__head .icon:hover{ background:rgba(58,44,35,.08); color:var(--cocoa); }
.toc__zh{ font-size:1.7rem; font-weight:700; letter-spacing:.3em; color:var(--cocoa); }
.toc__en{ font-family:var(--disp); font-style:italic; font-size:.95rem;
  letter-spacing:.12em; color:var(--clay-deep); }

.toc__list{ flex:1; overflow-y:auto; padding:14px 0 calc(24px + env(safe-area-inset-bottom)); }

.toc__group{
  font-family:var(--disp); font-style:italic; font-weight:600;
  font-size:1.02rem; letter-spacing:.06em; color:var(--clay-deep);
  padding:22px 26px 8px;
}
.toc__group small{
  display:block; font-family:var(--serif); font-style:normal; font-weight:400;
  font-size:.74rem; letter-spacing:.22em; color:var(--cocoa-soft); margin-top:.2em;
}
.toc__item{
  display:flex; align-items:baseline; gap:16px; width:100%;
  padding:11px 26px; text-align:left;
  transition:.2s var(--ease);
}
.toc__item:hover{ background:rgba(196,112,63,.12); }
.toc__item[aria-current="true"]{ background:rgba(196,112,63,.16); }
.toc__item em{
  flex:none; width:2.2em; font-family:var(--disp); font-style:normal;
  font-size:1rem; font-weight:600; color:var(--clay);
  font-variant-numeric:tabular-nums;
}
.toc__item span{ display:block; font-size:.98rem; color:var(--cocoa); }
.toc__item small{ display:block; font-size:.76rem; letter-spacing:.03em;
  color:var(--cocoa-soft); margin-top:.15em; }

/* ============================================================
   放大檢視
   ============================================================ */
.lens{
  position:fixed; inset:0; z-index:60;
  background:#171210;
  display:flex; flex-direction:column;
  animation:fade .25s var(--ease) both;
}
.lens__bar{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  height:calc(var(--bar-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 10px 0 20px;
  color:rgba(244,233,216,.8);
  font-family:var(--disp); font-size:1.05rem; letter-spacing:.12em;
  border-bottom:1px solid rgba(244,233,216,.12);
}
.lens__tools{ display:flex; gap:2px; }
.lens__scroll{
  flex:1; overflow:auto; padding:14px;
  display:flex; align-items:flex-start; justify-content:center;
  -webkit-overflow-scrolling:touch;
}
.lens__scroll img{
  display:block; height:auto; flex:none;
  background:var(--paper-2);
  box-shadow:0 10px 40px rgba(0,0,0,.6);
  transition:width .28s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}