/* ============================================================
   02号版 — 有呼吸感的精致生活记录册
   Taste Skill: V7 M3 D2
   Frontend Design + UI-UX-Pro-Max 融合
   手机端优先 (≤480px) → 桌面端适配
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500&family=Noto+Serif+SC:wght@400;600;700&family=Caveat:wght@400;500&display=swap");

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

/* ===== Design Tokens ===== */
:root{
  --bg:        #F8F6F2;   /* 燕麦奶白底 */
  --surface:   #FFFDF9;   /* 卡片白 */
  --surface2:  rgba(255,253,249,.75); /* 半透卡片 */
  --line:      #EAE5DD;   /* 分割线 */
  --line-strong: #D9CFC2;
  --accent:    #D9B89C;   /* 温暖陶土点缀 */
  --accent-soft: #E8D5C5;
  --accent-deep: #B89270;
  --ink:       #3D3835;   /* 正文墨色 */
  --ink-soft:  #6B6460;   /* 次级文字 */
  --ink-muted: #9A9490;   /* 灰调文字 */
  --pencil:    #B8AFA0;   /* 手写铅笔色 */
  --sage:      #9CAD95;   /* 灰豆绿辅色 */
  --shadow:    0 2px 12px rgba(180,160,140,.06);
  --shadow-hover: 0 4px 20px rgba(180,160,140,.10);
  --max:       600px;
  --side:      16px;
  --radius:    16px;
}

html{background:var(--bg)}

/* ===== Paper Texture Body ===== */
body{
  background:
    repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(180,170,155,.04) 30px,rgba(180,170,155,.04) 31px),
    radial-gradient(ellipse 70% 50% at 50% 0%,rgba(210,185,160,.05) 0%,transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;
  font-size:clamp(15px,3.5vw,17px);
  font-weight:350;
  line-height:2.1;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  /* Fade-in animation */
  animation: fadeIn .6s ease-out;
}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

a{color:inherit;text-decoration:none;transition:all .35s}
a:hover{opacity:.55}

/* ===== Gold Line ===== */
.gold-line{position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent-soft) 70%,transparent);z-index:200}

/* ===== Fixed Header ===== */
.fixed-header{
  position:fixed;top:2px;left:0;right:0;z-index:100;
  background:rgba(248,246,242,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  padding:clamp(10px,2.5vw,14px) var(--side);
  display:flex;align-items:center;justify-content:space-between;
  transition:box-shadow .4s;
}
.fixed-header.scrolled{box-shadow:0 1px 16px rgba(0,0,0,.03)}
.fixed-header .fh-title{
  font-family:"Noto Serif SC","Playfair Display",serif;
  font-size:clamp(13px,3vw,15px);font-weight:600;
  letter-spacing:.04em;color:var(--ink);
}
.fixed-header .fh-author{
  font-size:clamp(9px,2vw,11px);font-weight:400;
  color:var(--accent);letter-spacing:.1em;
}
.fixed-header .fh-back{
  font-size:clamp(10px,2.2vw,12px);letter-spacing:.12em;
  text-transform:uppercase;color:var(--pencil);
}
.fixed-header .fh-back:hover{color:var(--accent-deep);opacity:1}

/* ===== Hero (Homepage) ===== */
.hero{
  text-align:center;
  padding:clamp(72px,16vw,130px) var(--side) clamp(48px,10vw,72px);
  max-width:var(--max);margin:0 auto;
}
.hero .motto{
  font-family:"Caveat",cursive;
  font-size:clamp(16px,4vw,20px);color:var(--accent);
  letter-spacing:.03em;line-height:2.2;
  margin-bottom:clamp(40px,8vw,56px);
}
}

@media(max-width:480px){.hero h1 br.br-mobile+*{display:block}}
.hero h1{
  font-family:"Noto Serif SC","Playfair Display",serif;
  font-size:clamp(26px,6vw,38px);font-weight:700;
  letter-spacing:.05em;line-height:1.55;
}
.hero .byline{
  font-size:clamp(11px,2.5vw,13px);color:var(--accent);
  letter-spacing:.18em;text-transform:uppercase;
  margin-top:clamp(16px,3vw,24px);font-weight:400;
}

/* ===== Section Cards ===== */
.cards-wrap{
  display:grid;grid-template-columns:1fr;
  gap:clamp(28px,5vw,40px);
  max-width:calc(var(--max) + 32px);
  margin:0 auto clamp(72px,10vw,100px);
  padding:0 var(--side);
}
@media(min-width:680px){.cards-wrap{grid-template-columns:repeat(3,1fr);gap:24px}}

.card{
  position:relative;background:var(--surface);
  border-radius:var(--radius);
  padding:clamp(40px,7vw,52px) clamp(24px,5vw,32px) clamp(32px,6vw,42px);
  box-shadow:var(--shadow);text-align:center;
  transition:all .4s cubic-bezier(.25,.8,.25,1);
  overflow:hidden;
}
.card:active{transform:scale(.98)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}

/* Paper clip (from v01) */
.card::before{content:"";position:absolute;top:clamp(6px,1.5vw,10px);right:clamp(14px,3vw,20px);width:clamp(14px,3vw,18px);height:clamp(20px,4vw,26px);border:1.5px solid var(--pencil);border-radius:50% 50% 2px 2px / 60% 60% 2px 2px;opacity:.22;}
.card::after{content:"";position:absolute;top:clamp(4px,1vw,7px);right:clamp(12px,2.5vw,17px);width:clamp(16px,3vw,20px);height:clamp(10px,2vw,14px);border-left:1.5px solid var(--pencil);border-right:1.5px solid var(--pencil);border-bottom:1.5px solid var(--pencil);border-radius:0 0 40% 40%;opacity:.24;}
.card .card-num{
  font-family:"Caveat",cursive;
  font-size:clamp(42px,8vw,56px);color:var(--accent-soft);
  line-height:1;margin-bottom:clamp(10px,2vw,14px);
}
.card .card-name{
  font-family:"Noto Serif SC","Playfair Display",serif;
  font-size:clamp(18px,4vw,22px);font-weight:700;
  letter-spacing:.05em;line-height:1.45;
  margin-bottom:clamp(18px,3.5vw,24px);
}
.card .card-name .dot{
  display:block;font-size:clamp(10px,2vw,12px);
  font-weight:400;color:var(--sage);
  margin:10px 0 6px;
}
.card .card-d1{
  font-family:"Caveat",cursive;
  font-size:clamp(16px,3.2vw,19px);color:var(--accent);
  line-height:1.9;margin-bottom:8px;letter-spacing:.02em;
}
.card .card-d2{
  font-size:clamp(11px,2.3vw,13px);color:var(--ink-muted);
  line-height:1.9;letter-spacing:.03em;
}
.card .card-yr{
  font-family:"Caveat",cursive;
  font-size:clamp(13px,2.5vw,15px);color:var(--pencil);
  position:absolute;bottom:12px;right:16px;opacity:.65;
}

/* ===== Timeline Nav ===== */
.tl-nav{
  text-align:center;
  padding:0 var(--side) clamp(72px,10vw,100px);
  max-width:var(--max);margin:0 auto;
}
.tl-nav .tl-label{
  font-family:"Caveat",cursive;
  font-size:clamp(18px,3.5vw,22px);color:var(--sage);
  margin-bottom:clamp(18px,3vw,24px);
}
/* Timeline label */
.tl-nav .tl-years{
  display:flex;justify-content:center;
  gap:clamp(16px,3vw,28px);flex-wrap:wrap;
}
.tl-nav .tl-years a{
  font-family:"Playfair Display",serif;
  font-size:clamp(13px,3vw,15px);color:var(--ink-soft);
  letter-spacing:.06em;padding:4px 12px;transition:color .3s;
}
.tl-nav .tl-years a:hover{color:var(--accent-deep);opacity:1}

/* ===== Footer ===== */
footer{
  text-align:center;
  padding:clamp(48px,8vw,72px) var(--side) clamp(40px,6vw,56px);
  border-top:1px solid var(--line);
  max-width:var(--max);margin:0 auto;
  color:var(--pencil);
  font-size:clamp(11px,2.5vw,13px);line-height:2.5;
  letter-spacing:.06em;
  /* Warm gradient fade at bottom */
  background:linear-gradient(180deg,transparent 0%,rgba(248,246,242,.95) 100%);
}
footer .ft-title{
  font-family:"Noto Serif SC","Playfair Display",serif;
  font-size:clamp(14px,3vw,16px);color:var(--ink);
  letter-spacing:.06em;margin-bottom:6px;
}
/* Hand-drawn wave before footer link */
footer .ft-link{
  display:inline-block;
  margin-top:clamp(16px,3vw,24px);
  padding:clamp(8px,1.5vw,10px) clamp(22px,5vw,32px);
  border:1.5px solid var(--accent-soft);
  border-radius:24px;color:var(--accent-deep);
  font-size:12px;letter-spacing:.08em;
  transition:all .4s;
}
footer .ft-link:hover{background:var(--accent);color:#fff;opacity:1}
.copyright{text-align:center;padding:16px var(--side) 32px;max-width:var(--max);margin:0 auto;font-size:clamp(10px,2.2vw,12px);color:var(--pencil);letter-spacing:.06em}

/* ===== Section Page ===== */
.sec-hero{
  text-align:center;
  padding:clamp(64px,12vw,100px) var(--side) clamp(32px,5vw,48px);
  max-width:var(--max);margin:0 auto;
}
.sec-hero h1{
  font-family:"Noto Serif SC","Playfair Display",serif;
  font-size:clamp(24px,5.5vw,34px);font-weight:700;
  letter-spacing:.05em;line-height:1.45;
}
.sec-hero .sec-d1{
  font-family:"Caveat",cursive;
  font-size:clamp(15px,3vw,18px);color:var(--accent);
  margin-top:clamp(20px,4vw,28px);line-height:1.9;
}
.sec-hero .sec-d2{
  font-size:clamp(12px,2.5vw,14px);color:var(--ink-muted);
  margin-top:8px;line-height:2;
}

/* ===== Waterfall Layout ===== */
.waterfall{
  column-count:1;column-gap:clamp(20px,3.5vw,32px);
  max-width:calc(var(--max) + 32px);
  margin:0 auto clamp(64px,8vw,88px);
  padding:0 var(--side);
}
@media(min-width:680px){.waterfall{column-count:2}}
@media(min-width:960px){.waterfall{column-count:2;max-width:940px}}

/* ===== Year Heading ===== */
.year-head{
  font-family:"Playfair Display","Noto Serif SC",serif;
  font-size:clamp(48px,9vw,68px);font-weight:800;
  color:var(--line);letter-spacing:.03em;
  text-align:center;
  padding:clamp(40px,7vw,56px) 0 clamp(16px,3vw,24px);
  column-span:all;
}

/* ===== Entry Card ===== */
.piece{
  break-inside:avoid;
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(22px,5vw,30px) clamp(20px,4vw,28px) clamp(20px,4vw,28px);
  margin-bottom:clamp(20px,3.5vw,28px);
  position:relative;overflow:hidden;
  transition:all .4s cubic-bezier(.25,.8,.25,1);
  word-break:break-word;overflow-wrap:break-word;
}
.piece:active{transform:scale(.99)}
.piece:hover{box-shadow:var(--shadow-hover)}

/* Card separator line — hand-drawn style */
.piece::after{
  content:"";position:absolute;bottom:0;left:20px;right:20px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 20%,var(--line-strong) 80%,transparent);
}

.piece .piece-date{
  font-family:"Caveat",cursive;
  font-size:clamp(15px,3vw,18px);color:var(--accent-deep);
  position:absolute;bottom:10px;right:18px;opacity:.85;
}
.piece .piece-body{
  font-size:clamp(14px,3vw,15.5px);
  line-height:2.15;letter-spacing:.015em;
  padding-bottom:clamp(20px,3.5vw,28px);
}
.piece .piece-body p{margin-bottom:8px;text-indent:2em}
.piece .piece-body p:first-child,
.piece .piece-body p.spacer{text-indent:0}

/* ===== First Entry Span ===== */
.piece-span{
  column-span:all;
  margin:clamp(12px,2vw,20px) 0 clamp(24px,4vw,36px);
  padding:clamp(30px,5vw,40px) clamp(24px,5vw,36px) clamp(24px,5vw,36px);
  border-left:4px solid var(--accent);
  background:linear-gradient(135deg,rgba(217,184,156,.06),rgba(255,253,249,.9));
  overflow:hidden;
}
.piece-span .piece-date{color:var(--accent)}
.piece-span .piece-body{font-size:clamp(14.5px,3vw,16px)}

/* ===== Forum (番外) Entry ===== */
.piece-fw{
  background:linear-gradient(135deg,rgba(217,184,156,.08),rgba(255,253,249,.92));
  border-left:3px solid var(--accent-soft);
}
.piece-fw .fw-tag{
  display:inline-block;font-family:"Caveat",cursive;
  font-size:clamp(16px,3vw,20px);color:var(--accent);
  margin-bottom:8px;letter-spacing:.04em;
}

/* ===== Geo Separator ===== */
.geo-line{
  width:100%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent);
  column-span:all;margin:clamp(24px,4vw,40px) 0;
}

/* ===== Month Navigation ===== */
.month-nav{
  column-span:all;display:flex;justify-content:center;
  align-items:center;gap:clamp(12px,3vw,24px);
  padding:clamp(20px,4vw,36px) 0;flex-wrap:wrap;
}
.month-nav a,.month-nav span{
  font-family:"Playfair Display",serif;
  font-size:clamp(13px,2.8vw,16px);color:var(--ink-soft);
  text-decoration:none;letter-spacing:.04em;padding:4px 14px;
  transition:all .3s;
}
.month-nav a:hover{color:var(--accent-deep);opacity:1}
.month-nav .nav-arrow{font-size:clamp(16px,3.5vw,20px);color:var(--sage);padding:4px 10px}
.month-nav .nav-current{
  font-weight:700;color:var(--ink);
  background:var(--line);padding:7px 22px;
  border-radius:22px;font-size:clamp(14px,3vw,17px);
}

/* ===== Month Grid ===== */
.month-grid{
  column-span:all;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:clamp(10px,2vw,16px);padding:0 0 clamp(40px,6vw,60px);
}
.month-grid a{
  display:block;text-align:center;
  padding:clamp(14px,3vw,20px) clamp(8px,2vw,14px);
  background:var(--surface);border-radius:12px;
  box-shadow:var(--shadow);
  font-family:"Playfair Display",serif;
  font-size:clamp(12px,2.5vw,14px);color:var(--ink-soft);
  letter-spacing:.05em;transition:all .3s;
  border:1px solid transparent;
}
.month-grid a:hover{
  border-color:var(--accent);color:var(--accent-deep);
  box-shadow:var(--shadow-hover);
}

/* ===== Search & Bookmark ===== */
.search-row{
  column-span:all;display:flex;justify-content:center;
  align-items:center;gap:10px;
  padding:0 0 clamp(20px,3.5vw,28px);flex-wrap:wrap;
}
.search-row input{
  font-family:inherit;font-size:clamp(12px,2.5vw,14px);
  padding:8px 18px;border:1px solid var(--line);
  border-radius:20px;background:var(--surface);
  color:var(--ink);outline:none;
  width:clamp(140px,38vw,200px);text-align:center;
  letter-spacing:.04em;
}
.search-row input:focus{border-color:var(--accent)}
.search-row button{
  font-family:inherit;font-size:clamp(11px,2.3vw,13px);
  padding:8px 20px;border:1px solid var(--accent);
  border-radius:20px;background:transparent;
  color:var(--accent-deep);cursor:pointer;
  letter-spacing:.06em;transition:all .35s;
}
.search-row button:hover{background:var(--accent);color:#fff}

.bookmark-bar{column-span:all;text-align:center;padding:0 0 clamp(16px,3vw,24px)}
.bookmark-bar a{
  display:inline-block;padding:clamp(8px,1.5vw,10px) clamp(20px,4.5vw,28px);
  border-radius:20px;background:var(--line);
  font-size:clamp(11px,2.5vw,13px);color:var(--ink);
  text-decoration:none;letter-spacing:.06em;transition:all .35s;
}
.bookmark-bar a:hover{background:var(--accent);color:#fff}

.idx-btn{
  display:inline-block;margin:clamp(12px,3vw,20px) auto 0;
  padding:clamp(8px,1.5vw,10px) clamp(20px,4vw,28px);
  border-radius:20px;border:1px solid var(--line);
  font-size:clamp(11px,2.5vw,13px);color:var(--ink-muted);
  text-decoration:none;letter-spacing:.06em;text-align:center;
  transition:all .35s;
}
.idx-btn:hover{background:var(--line);color:var(--ink);opacity:1}

.top-year{
  column-span:all;text-align:center;
  padding:clamp(10px,2vw,18px) 0 clamp(20px,3.5vw,30px);
  font-family:"Playfair Display",serif;
  font-size:clamp(13px,2.5vw,15px);color:var(--sage);
  letter-spacing:.1em;
}

/* ===== Floating Bookmark Buttons ===== */
.bk-float{
  position:fixed;bottom:clamp(20px,5vw,32px);
  right:clamp(16px,3.5vw,24px);z-index:20;
  display:flex;flex-direction:column;gap:10px;
}
.bk-float button{
  width:clamp(40px,8vw,48px);height:clamp(40px,8vw,48px);
  border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-muted);
  font-size:clamp(16px,3.5vw,20px);cursor:pointer;
  box-shadow:var(--shadow);transition:all .35s;
  display:flex;align-items:center;justify-content:center;
}
.bk-float button:hover{
  background:var(--accent);color:#fff;
  border-color:var(--accent);box-shadow:var(--shadow-hover);
}

/* ===== Mobile break helpers ===== */
.br-mobile{display:none}
@media(max-width:480px){
  .br-mobile{display:block}
  .card::before{font-size:10px;top:8px;right:10px}
}