:root{
  --bg:#f5f1ea;
  --card:#fffaf3;
  --ink:#251f1a;
  --muted:#80766d;
  --accent:#b35f2f;
  --line:#ded4c9;
  --soft:#eadbc9;
  --cat-life:#b35f2f;
  --cat-life-bg:#faf3ec;
  --cat-work:#5c6b52;
  --cat-work-bg:#f2f4ef;
  --cat-relation:#8b5e6b;
  --cat-relation-bg:#f8f0f2;
  --font-sans:"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif:"Lora", Georgia, serif;
  --font-lora:"Lora", Georgia, serif;
  --font-baskerville:"Libre Baskerville", Georgia, serif;
  --font-fraunces:"Fraunces", Georgia, serif;
  --font-cormorant:"Cormorant Garamond", Georgia, serif;
  --font-source:"Source Serif 4", Georgia, serif;
  --font-plex:"IBM Plex Serif", Georgia, serif;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{
  max-width:1500px;
  margin:auto;
  padding:28px;
}
.header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:24px;
}
.brand small{
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:800;
}
h1{
  margin:6px 0 0;
  font-size:clamp(30px,4vw,54px);
  line-height:1;
  font-family:var(--font-serif);
  font-weight:600;
}
.subtitle{
  color:var(--muted);
  margin-top:10px;
  max-width:720px;
}
.month{
  font-weight:800;
  font-size:18px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  white-space:nowrap;
}
.header-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.header-links{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}
.header-book-link{
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--accent);
  text-transform:uppercase;
}
.header-book-link:hover{
  opacity:.75;
}
.month-nav{
  display:flex;
  align-items:center;
  gap:8px;
}
.month-nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-weight:800;
  color:var(--accent);
  transition:background .15s ease;
}
.month-nav-btn:hover{
  background:var(--soft);
}
.month-badge{
  font-weight:700;
  font-size:13px;
  color:var(--muted);
}
.weekdays,.calendar{
  display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr));
  gap:14px;
}
.weekdays{
  margin-bottom:12px;
}
.weekdays div{
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:700;
  padding:0 6px;
}
.day{
  min-height:188px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  position:relative;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  border-top:3px solid var(--line);
}
.day.has-post{
  cursor:pointer;
  border-top-color:var(--cat-life);
  background:var(--cat-life-bg);
}
.day.cat-work.has-post{
  border-top-color:var(--cat-work);
  background:var(--cat-work-bg);
}
.day.cat-relation.has-post{
  border-top-color:var(--cat-relation);
  background:var(--cat-relation-bg);
}
.day.has-post:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(37,31,26,.06);
}
.day-link{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  flex:1;
  min-height:0;
  color:inherit;
  text-decoration:none;
}
.day.has-post{
  cursor:default;
}
.day.has-post .day-link{
  cursor:pointer;
}
.day-rating{
  display:flex;
  align-items:center;
  gap:2px;
  position:relative;
  z-index:3;
  margin-top:2px;
  padding-top:4px;
  border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.day.has-cover-image .day-rating{
  border-top-color:rgba(255,255,255,.18);
}
.star-btn{
  appearance:none;
  border:none;
  background:transparent;
  padding:0 1px;
  line-height:1;
  font-size:14px;
  color:color-mix(in srgb, var(--muted) 55%, transparent);
  cursor:pointer;
  transition:color .12s ease, transform .12s ease;
}
.star-btn:hover,
.star-btn.is-active{
  color:#d4a017;
}
.star-btn.is-active{
  text-shadow:0 0 0 currentColor;
}
.day.has-cover-image .star-btn{
  color:rgba(255,255,255,.35);
}
.day.has-cover-image .star-btn:hover,
.day.has-cover-image .star-btn.is-active{
  color:#ffd86b;
}
.day-rating.is-saving{
  opacity:.65;
  pointer-events:none;
}
.day-rating.is-saved .star-btn.is-active{
  color:#c99212;
}
.day.has-cover-image .day-rating.is-saved .star-btn.is-active{
  color:#ffe08a;
}
.day-rating.is-error .star-btn.is-active{
  color:#b35f2f;
}
.day.no-post{
  min-height:52px;
  justify-content:center;
  align-items:flex-start;
  background:transparent;
  border:1px solid transparent;
  border-top:1px solid var(--line);
  opacity:.55;
  padding:10px 12px;
}
.day.no-post .date-only{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}
.day.empty{
  min-height:0;
  padding:0;
  border:none;
  opacity:0;
  pointer-events:none;
}
.day.has-cover-image{
  color:#fff;
  background:var(--ink);
}
.day.has-cover-image.cat-life,
.day.has-cover-image.cat-work,
.day.has-cover-image.cat-relation{
  background:var(--ink);
}
.day.has-cover-image .date,
.day.has-cover-image .tag,
.day.has-cover-image .number{
  color:#fff;
  position:relative;
  z-index:2;
}
.day.has-cover-image .tag{
  border-color:rgba(255,255,255,.45);
  background:rgba(0,0,0,.2);
}
.day.has-cover-image .cover{
  position:relative;
  z-index:2;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.day-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  z-index:0;
}
.day-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
}
.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  position:relative;
  z-index:2;
}
.date{
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--muted);
}
.tag{
  font-size:9px;
  color:var(--cat-life);
  border:1px solid color-mix(in srgb, var(--cat-life) 35%, transparent);
  background:color-mix(in srgb, var(--cat-life) 8%, #fff);
  padding:3px 6px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
  font-family:inherit;
}
.cat-work.has-post .tag{
  color:var(--cat-work);
  border-color:color-mix(in srgb, var(--cat-work) 35%, transparent);
  background:color-mix(in srgb, var(--cat-work) 10%, #fff);
}
.cat-relation.has-post .tag{
  color:var(--cat-relation);
  border-color:color-mix(in srgb, var(--cat-relation) 35%, transparent);
  background:color-mix(in srgb, var(--cat-relation) 10%, #fff);
}
.tag-font{
  text-transform:none;
  letter-spacing:0;
  font-size:10px;
  font-weight:600;
  opacity:.85;
}
.story-meta .tag-font{
  font-family:var(--font-sans);
}
body.cat-work .story-meta .tag:not(.tag-font){
  color:var(--cat-work);
  border-color:color-mix(in srgb, var(--cat-work) 35%, transparent);
  background:color-mix(in srgb, var(--cat-work) 10%, #fff);
}
body.cat-relation .story-meta .tag:not(.tag-font){
  color:var(--cat-relation);
  border-color:color-mix(in srgb, var(--cat-relation) 35%, transparent);
  background:color-mix(in srgb, var(--cat-relation) 10%, #fff);
}
.cover{
  font-family:var(--font-serif);
  font-size:clamp(13px, 1.05vw, 16px);
  line-height:1.55;
  font-weight:500;
  position:relative;
  z-index:2;
  flex:1;
  display:block;
}
.cover strong{
  font-weight:700;
  color:var(--accent);
}
.cover em{
  font-style:italic;
  font-weight:500;
  color:color-mix(in srgb, var(--ink) 82%, var(--accent));
}
.cover .emph-accent{
  color:var(--accent);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset:2px;
}
.cover .emph-muted{
  color:var(--muted);
  font-weight:500;
  font-style:italic;
}
.cover .emph-highlight{
  background:color-mix(in srgb, var(--accent) 22%, transparent);
  padding:.05em .2em;
  border-radius:4px;
  font-weight:700;
  color:var(--ink);
}
.cat-work.has-post .cover strong,
.cat-work.has-post .cover .emph-accent{
  color:var(--cat-work);
}
.cat-work.has-post .cover .emph-highlight{
  background:color-mix(in srgb, var(--cat-work) 18%, transparent);
}
.cat-relation.has-post .cover strong,
.cat-relation.has-post .cover .emph-accent{
  color:var(--cat-relation);
}
.cat-relation.has-post .cover .emph-highlight{
  background:color-mix(in srgb, var(--cat-relation) 16%, transparent);
}
.day.has-cover-image .cover strong,
.day.has-cover-image .cover .emph-accent,
.day.has-cover-image .cover .emph-highlight{
  color:#fff;
}
.day.has-cover-image .cover .emph-highlight{
  background:rgba(255,255,255,.18);
}
.day.has-cover-image .cover .emph-muted{
  color:rgba(255,255,255,.75);
}
.day.has-cover-image .cover em{
  color:rgba(255,255,255,.92);
}
.font-lora .cover,
.font-lora .story-title,
.font-lora .slide-body,
.font-lora .caption-content{ font-family:var(--font-lora); }
.font-baskerville .cover,
.font-baskerville .story-title,
.font-baskerville .slide-body,
.font-baskerville .caption-content{ font-family:var(--font-baskerville); font-weight:400; }
.font-fraunces .cover,
.font-fraunces .story-title,
.font-fraunces .slide-body,
.font-fraunces .caption-content{ font-family:var(--font-fraunces); }
.font-cormorant .cover,
.font-cormorant .story-title,
.font-cormorant .slide-body,
.font-cormorant .caption-content{ font-family:var(--font-cormorant); }
.font-relasi .cover,
.font-relasi .story-title,
.font-relasi .slide-body,
.font-relasi .caption-content{
  font-family:var(--font-cormorant);
}
.font-relasi .cover{
  font-size:clamp(15px, 1.28vw, 20px);
  line-height:1.42;
  font-weight:600;
}
.font-relasi .story-title{
  font-size:clamp(32px, 4.6vw, 48px);
  line-height:1.18;
}
.font-relasi .slide-body{
  font-size:clamp(17px, 1.55vw, 21px);
  line-height:1.48;
}
.font-relasi .caption-content{
  font-size:19px;
  line-height:1.88;
}
.font-source .cover,
.font-source .story-title,
.font-source .slide-body,
.font-source .caption-content{ font-family:var(--font-source); }
.font-plex .cover,
.font-plex .story-title,
.font-plex .slide-body,
.font-plex .caption-content{ font-family:var(--font-plex); }
.number{
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  opacity:.7;
  position:relative;
  z-index:2;
}
.day::after{
  display:none;
}
.legend{
  margin-top:28px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
  align-items:center;
}
.legend span{
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 12px;
}
.legend-key{
  position:relative;
  padding-left:22px;
}
.legend-key::before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cat-life);
}
.legend-key.cat-work::before{background:var(--cat-work)}
.legend-key.cat-relation::before{background:var(--cat-relation)}

.category-filter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:20px;
}
.filter-pill{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.filter-pill:hover{
  border-color:color-mix(in srgb, var(--accent) 40%, var(--line));
}
.filter-pill.is-active{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}
.filter-pill.filter-cat-life.is-active{
  background:var(--cat-life);
  border-color:var(--cat-life);
}
.filter-pill.filter-cat-work.is-active{
  background:var(--cat-work);
  border-color:var(--cat-work);
}
.filter-pill.filter-cat-relation.is-active{
  background:var(--cat-relation);
  border-color:var(--cat-relation);
}
.day.is-filtered-out{
  opacity:.35;
  pointer-events:none;
}
.filter-status{
  margin-top:20px;
  font-size:13px;
  color:var(--muted);
}
.filter-status strong{
  color:var(--ink);
}
.filter-status a{
  color:var(--accent);
  font-weight:700;
}

/* Story detail */
.story-wrap{
  max-width:860px;
}
.story-top-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.story-top-nav-start{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}
.story-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--accent);
  font-weight:700;
  font-size:14px;
  margin-bottom:0;
}
.story-book-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
  margin-left:16px;
  margin-bottom:0;
}
.story-book-link:hover{
  color:var(--accent);
}
.story-top-nav-arrows{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.story-arrow-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font-weight:700;
  font-size:16px;
  line-height:1;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.story-arrow-btn:hover{
  border-color:color-mix(in srgb, var(--accent) 35%, var(--line));
  color:var(--accent);
  background:var(--card);
}
.story-arrow-btn:active{
  transform:scale(.96);
}
.story-arrow-btn.is-disabled{
  opacity:.35;
  pointer-events:none;
}
.story-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:16px;
}
.story-meta .tag{
  font-size:11px;
}
.story-title{
  font-family:var(--font-serif);
  font-size:clamp(28px,4vw,42px);
  line-height:1.2;
  font-weight:600;
  margin:0 0 24px;
}
.story-gallery{
  display:grid;
  gap:12px;
  margin-bottom:28px;
}
.story-gallery img{
  width:100%;
  border-radius:18px;
  border:1px solid var(--line);
  display:block;
}
.story-content{
  font-size:18px;
  line-height:1.85;
  color:var(--ink);
}
.story-content p{
  margin:0 0 1.15em;
}
.story-content p:last-child{
  margin-bottom:0;
}
.story-number{
  margin-top:32px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.slide-card.has-image{
  padding:0;
  overflow:hidden;
}
.slide-image{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  border-bottom:1px solid var(--line);
}
.slide-card.has-image .slide-label,
.slide-card.has-image .slide-body{
  padding:0 16px;
}
.slide-card.has-image .slide-label{
  padding-top:14px;
}
.slide-card.has-image .slide-body{
  padding-bottom:16px;
}
.slides-section,
.caption-section{
  margin-bottom:32px;
}
.slides-heading,
.caption-heading{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
  font-weight:800;
  margin:0;
}
.slides-header,
.caption-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.slides-header .slides-heading,
.caption-header .caption-heading{
  flex:1;
  min-width:0;
}
.copy-btn{
  flex-shrink:0;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:24px;
  height:24px;
  padding:0;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--muted);
  border-radius:7px;
  cursor:pointer;
  line-height:0;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.copy-icon{
  display:block;
  flex-shrink:0;
  width:12px;
  height:12px;
  pointer-events:none;
}
.copy-icon-done{
  display:none;
}
.copy-btn.is-copied .copy-icon-default{
  display:none;
}
.copy-btn.is-copied .copy-icon-done{
  display:block;
}
.copy-btn:hover{
  border-color:color-mix(in srgb, var(--accent) 35%, var(--line));
  color:var(--accent);
  background:#fff;
}
.copy-btn:active{
  transform:scale(.96);
}
.copy-btn.is-copied{
  border-color:var(--cat-work);
  color:var(--cat-work);
  background:var(--cat-work-bg);
}
.slides-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.slide-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  min-height:160px;
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
}
.slide-copy-btn{
  position:absolute;
  top:8px;
  right:8px;
  z-index:3;
}
.slide-card.has-image .slide-copy-btn{
  background:rgba(255,250,243,.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.slide-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}
.slide-body{
  font-family:var(--font-serif);
  font-size:clamp(15px, 1.4vw, 18px);
  line-height:1.5;
  flex:1;
  font-weight:500;
}
.slide-body strong{
  color:var(--accent);
  font-weight:700;
}
.slide-body em{
  font-style:italic;
}
.slide-body .emph-accent{
  color:var(--accent);
  font-weight:700;
}
.slide-body .emph-muted{
  color:var(--muted);
}
.slide-body .emph-highlight{
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  padding:0 .12em;
  border-radius:3px;
}
.caption-content{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px 32px;
  font-family:var(--font-lora);
  font-size:18px;
  line-height:1.85;
  font-weight:400;
}
.caption-content p{
  text-align:left;
}
.caption-signoff{
  margin-top:1.5em !important;
  margin-bottom:0 !important;
  color:var(--ink);
  font-family:var(--font-sans) !important;
  font-size:13px !important;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.4 !important;
}
.story-pemantik-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:20px;
  padding-top:4px;
}
.story-pemantik-link{
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  transition:opacity .15s ease;
}
.story-pemantik-link:hover{
  opacity:.75;
}
.story-pemantik-next{
  margin-left:auto;
  text-align:right;
}

/* Book mode */
body.book-mode{
  background:#faf7f2;
}
.book-progress{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--line);
  z-index:100;
}
.book-progress-fill{
  height:100%;
  background:var(--accent);
  transition:width .25s ease;
}
.book-header{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb, #faf7f2 92%, transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.book-header-inner{
  max-width:720px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.book-header-link{
  font-size:13px;
  font-weight:700;
  color:var(--accent);
  letter-spacing:.04em;
}
.book-header-link:hover{
  opacity:.75;
}
.book-header-meta{
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.book-header-cal{
  text-align:right;
}
.book-chapter{
  padding:48px 24px 120px;
}
.book-chapter-inner{
  max-width:680px;
  margin:0 auto;
}
.book-chapter-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:20px;
}
.book-chapter-meta .tag{
  font-size:10px;
}
.book-date{
  font-size:13px;
  color:var(--muted);
  font-weight:600;
}
.book-chapter-title{
  font-family:var(--font-serif);
  font-size:clamp(28px, 5vw, 40px);
  line-height:1.25;
  font-weight:600;
  margin:0 0 28px;
  text-wrap:balance;
}
.book-epigraph{
  font-family:var(--font-serif);
  font-size:clamp(17px, 2.5vw, 21px);
  line-height:1.65;
  color:var(--muted);
  font-style:italic;
  margin:0 0 36px;
  padding-left:20px;
  border-left:3px solid var(--soft);
}
.book-epigraph strong,
.book-epigraph .emph-accent{
  color:var(--accent);
  font-style:normal;
}
.book-passages{
  display:flex;
  flex-direction:column;
  gap:32px;
  margin-bottom:40px;
}
.book-passage-text{
  font-family:var(--font-serif);
  font-size:clamp(18px, 2.8vw, 22px);
  line-height:1.65;
  font-weight:500;
}
.book-passage-text strong,
.book-passage-text .emph-accent{
  color:var(--accent);
}
.book-figure{
  margin:0 0 20px;
}
.book-figure img{
  width:100%;
  max-height:420px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--line);
  display:block;
}
.book-body{
  font-family:var(--font-lora);
  font-size:clamp(17px, 2.4vw, 19px);
  line-height:1.9;
  color:var(--ink);
}
.book-body p{
  margin:0 0 1.25em;
}
.book-body p:last-child{
  margin-bottom:0;
}
.book-chapter-footer{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.book-signoff{
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.book-nav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:16px 24px calc(16px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, #faf7f2 94%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  z-index:50;
}
.book-nav-link{
  display:flex;
  flex-direction:column;
  gap:4px;
  max-width:45%;
  color:var(--accent);
  transition:opacity .15s ease;
}
.book-nav-link:hover{
  opacity:.75;
}
.book-nav-next{
  margin-left:auto;
  text-align:right;
  align-items:flex-end;
}
.book-nav-dir{
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.book-nav-label{
  font-family:var(--font-serif);
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}
.book-nav-spacer{
  flex:1;
}

/* Book TOC */
.book-wrap{
  max-width:820px;
}
.book-toc-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:28px;
}
.book-toc-brand small{
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:800;
}
.book-toc-brand h1{
  margin:6px 0 0;
}
.book-toc-sub{
  color:var(--muted);
  margin:10px 0 0;
  font-size:15px;
}
.book-toc-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.book-toc-cal-link{
  font-size:13px;
  font-weight:700;
  color:var(--muted);
}
.book-toc-cal-link:hover{
  color:var(--accent);
}
.book-toc-start{
  display:inline-flex;
  align-items:center;
  padding:10px 18px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:14px;
  font-weight:800;
  letter-spacing:.04em;
  transition:opacity .15s ease;
}
.book-toc-start:hover{
  opacity:.88;
}
.book-toc-list{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.book-toc-item{
  margin:0;
}
.book-toc-link{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
.book-toc-link:hover{
  background:#fff;
  border-color:color-mix(in srgb, var(--accent) 25%, var(--line));
  transform:translateY(-1px);
}
.book-toc-num{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--accent);
  min-width:36px;
}
.book-toc-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.book-toc-title{
  font-family:var(--font-serif);
  font-size:16px;
  line-height:1.4;
  font-weight:500;
  display:block;
}
.book-toc-tag{
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.book-toc-arrow{
  color:var(--muted);
  font-size:18px;
  flex-shrink:0;
}
.book-toc-empty{
  color:var(--muted);
  text-align:center;
  padding:40px 0;
}
.book-toc-item.cat-work .book-toc-num{color:var(--cat-work)}
.book-toc-item.cat-relation .book-toc-num{color:var(--cat-relation)}

@media(max-width:720px){
  .book-toc-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .book-toc-actions{
    align-items:flex-start;
    flex-direction:row;
    flex-wrap:wrap;
  }
  .book-chapter{
    padding-top:32px;
  }
  .book-header-meta{
    font-size:10px;
  }
}

@media(max-width:900px){
  .slides-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media(max-width:600px){
  .slides-grid{grid-template-columns:1fr}
  .header-actions{align-items:flex-start}
}

@media(max-width:1050px){
  .calendar,.weekdays{grid-template-columns:repeat(4, minmax(0,1fr))}
  .weekdays{display:none}
}
@media(max-width:720px){
  .wrap{padding:16px}
  .header{align-items:flex-start;flex-direction:column}
  .calendar{grid-template-columns:1fr}
  .day.has-post{min-height:140px}
  .day.no-post,.day.empty{display:none}
  .cover{font-size:15px}
}