.journal-sheet {
  --journal-ink: #342e2a;
  --journal-muted: #81766d;
  --journal-rule: #dcd3c6;
  --journal-accent: #884c46;
  --journal-paper: #fcf9f2;
  box-sizing: border-box;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 27px 36px 31px;
  background: var(--journal-paper);
  color: var(--journal-ink);
  border: 1px solid #e9e2d7;
  box-shadow: 0 8px 36px #3930210d;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  font-size: 15px;
  line-height: 1.85;
  overflow-wrap: anywhere;
  text-align: left;
  color-scheme: light;
}

.journal-sheet--sage {
  --journal-ink: #30382e;
  --journal-muted: #727b6a;
  --journal-rule: #d4dacc;
  --journal-accent: #52694b;
  --journal-paper: #f8f9f1;
  border-color: #e0e5d8;
}

.journal-sheet *, .journal-sheet *::before, .journal-sheet *::after { box-sizing: border-box; }
.journal-sheet p, .journal-sheet h1, .journal-sheet h2, .journal-sheet figure, .journal-sheet dl, .journal-sheet dd, .journal-sheet ul, .journal-sheet ol { margin: 0; }
.journal-sheet img { display: block; width: 100%; max-width: 100%; }

.journal-sheet .journal-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--journal-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 1.2px;
}

.journal-sheet .journal-masthead > :last-child { color: var(--journal-muted); font-size: 8px; text-align: right; }
.journal-sheet .journal-body { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 28px; padding-top: 30px; }
.journal-sheet .journal-date-rail { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.journal-sheet .journal-month { font-family: Georgia, "Times New Roman", serif; font-size: 9px; line-height: 1.4; letter-spacing: .9px; color: var(--journal-accent); white-space: nowrap; }
.journal-sheet .journal-day { display: block; margin: 1px 0 7px -3px; font-family: Georgia, "Times New Roman", serif; font-size: 62px; font-weight: 400; line-height: 1; letter-spacing: -5px; color: var(--journal-accent); font-variant-numeric: lining-nums; }
.journal-sheet .journal-weekday { font-size: 11px; letter-spacing: 1px; }
.journal-sheet .journal-mood { display: flex; flex-direction: column; gap: 6px; margin-top: 27px; padding-top: 12px; border-top: 1px solid var(--journal-rule); font-size: 11px; line-height: 1.8; }
.journal-sheet .journal-rail-label { color: var(--journal-muted); font-size: 9px; letter-spacing: 2px; }
.journal-sheet .journal-botanical { width: 40px; height: 100px; margin: 32px 0 0 3px; color: var(--journal-accent); opacity: .7; }
.journal-sheet .journal-main { min-width: 0; }
.journal-sheet .journal-heading { padding: 1px 0 2px; }
.journal-sheet .journal-eyebrow { margin-bottom: 13px; color: var(--journal-muted); font-family: Georgia, "Times New Roman", serif; font-size: 9px; letter-spacing: 2.3px; line-height: 1.5; }
.journal-sheet .journal-heading h1 { max-width: 100%; font-size: 32px; font-weight: 500; line-height: 1.5; letter-spacing: .6px; text-wrap: pretty; }
.journal-sheet .journal-summary { margin-top: 17px; font-size: 14px; line-height: 2; }

.journal-sheet .journal-collage { display: grid; grid-template-columns: 1.06fr .94fr; gap: 16px; align-items: start; margin: 27px 1px 31px; }
.journal-sheet .journal-collage--one { grid-template-columns: minmax(0, 1fr); margin-right: 8px; }
.journal-sheet .journal-photo { min-width: 0; padding: 6px 6px 8px; background: #fffefa; border: 1px solid #ded8cc; box-shadow: 1px 3px 7px #3027190e; transform: rotate(-1.6deg); }
.journal-sheet .journal-photo:nth-child(even) { margin-top: 21px; transform: rotate(2.1deg); }
.journal-sheet .journal-photo img { aspect-ratio: 1 / 1; object-fit: cover; }
.journal-sheet .journal-collage--one .journal-photo img { aspect-ratio: 8 / 5; }
.journal-sheet .journal-photo figcaption { margin: 6px 3px 0; font-size: 10px; line-height: 1.6; text-align: center; color: var(--journal-muted); }

.journal-sheet .journal-section { margin-top: 23px; padding-top: 13px; border-top: 1px solid var(--journal-rule); }
.journal-sheet .journal-section-title { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; margin-bottom: 13px; font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: .4px; }
.journal-sheet .journal-section-number { color: var(--journal-accent); font-family: Georgia, "Times New Roman", serif; font-size: 10px; letter-spacing: .2px; }
.journal-sheet .journal-section-title small { margin-left: auto; color: var(--journal-muted); font-family: Georgia, "Times New Roman", serif; font-size: 7px; font-weight: 400; letter-spacing: 1px; white-space: nowrap; }
.journal-sheet .journal-timeline { padding: 0; list-style: none; }
.journal-sheet .journal-timeline li { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 13px; padding: 0 0 12px; font-size: 13px; line-height: 1.9; }
.journal-sheet .journal-timeline li:last-child { padding-bottom: 0; }
.journal-sheet .journal-timeline li::before { content: ""; position: absolute; left: 54px; top: 9px; width: 3px; height: 3px; background: var(--journal-accent); border-radius: 50%; }
.journal-sheet .journal-time { padding-right: 6px; color: var(--journal-accent); font-family: Georgia, "Times New Roman", "Songti SC", serif; font-size: 11px; line-height: 2.25; }
.journal-sheet .journal-time--untimed { color: var(--journal-muted); }
.journal-sheet .journal-meal { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; margin-bottom: 13px; }
.journal-sheet .journal-meal:last-child { margin-bottom: 0; }
.journal-sheet .journal-meal dt { padding-top: 1px; color: var(--journal-accent); font-size: 11px; line-height: 2; }
.journal-sheet .journal-meal dd { font-size: 13px; line-height: 1.9; }
.journal-sheet .journal-calories { display: block; margin-top: 1px; color: var(--journal-muted); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; font-size: 10px; line-height: 1.8; }
.journal-sheet .journal-calories > span { margin-right: 4px; }
.journal-sheet .journal-outfit { font-size: 13px; line-height: 1.9; }
.journal-sheet .journal-tasks { display: grid; gap: 8px; padding: 0; list-style: none; font-size: 13px; line-height: 1.9; }
.journal-sheet .journal-tasks li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 9px; }
.journal-sheet .journal-check { color: var(--journal-accent); font-family: Georgia, serif; font-size: 13px; }
.journal-sheet .journal-section--wins { padding-bottom: 2px; }
.journal-sheet .journal-wins { display: grid; gap: 10px; padding: 2px 0 2px 14px; border-left: 2px solid var(--journal-accent); list-style: none; font-size: 14px; line-height: 1.95; }
.journal-sheet .journal-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 31px; padding-top: 11px; border-top: 1px solid var(--journal-ink); color: var(--journal-muted); font-size: 9px; line-height: 1.5; letter-spacing: 1.5px; }
.journal-sheet .journal-footer time { font-family: Georgia, "Times New Roman", serif; letter-spacing: 1px; }
.journal-sheet .journal-empty { margin: 28px 0 40px; color: var(--journal-muted); font-size: 13px; }

@media (max-width: 520px) {
  .journal-sheet { padding: 22px 21px 25px; }
  .journal-sheet .journal-body { grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding-top: 25px; }
  .journal-sheet .journal-month { font-size: 7px; letter-spacing: .2px; }
  .journal-sheet .journal-day { margin-top: 3px; margin-left: -2px; font-size: 47px; letter-spacing: -3.5px; }
  .journal-sheet .journal-weekday { font-size: 10px; letter-spacing: 0; }
  .journal-sheet .journal-mood { margin-top: 24px; font-size: 10px; }
  .journal-sheet .journal-botanical { width: 32px; height: 86px; margin-left: 1px; }
  .journal-sheet .journal-eyebrow { font-size: 7px; letter-spacing: 1.7px; margin-bottom: 11px; }
  .journal-sheet .journal-heading h1 { font-size: 26px; line-height: 1.55; letter-spacing: .1px; }
  .journal-sheet .journal-summary { font-size: 13px; margin-top: 13px; }
  .journal-sheet .journal-collage { gap: 10px; margin-top: 23px; margin-bottom: 27px; }
  .journal-sheet .journal-photo { padding: 4px 4px 6px; }
  .journal-sheet .journal-photo:nth-child(even) { margin-top: 16px; }
  .journal-sheet .journal-photo figcaption { font-size: 9px; margin: 5px 1px 0; }
  .journal-sheet .journal-section-title { column-gap: 6px; font-size: 14px; }
  .journal-sheet .journal-section-title small { font-size: 6px; letter-spacing: .5px; }
  .journal-sheet .journal-timeline li { grid-template-columns: 41px minmax(0, 1fr); gap: 12px; }
  .journal-sheet .journal-timeline li::before { left: 42px; }
  .journal-sheet .journal-time { font-size: 10px; }
}

@media (max-width: 359px) {
  .journal-sheet { padding: 20px 15px 22px; }
  .journal-sheet .journal-body { grid-template-columns: 39px minmax(0, 1fr); gap: 13px; }
  .journal-sheet .journal-month { font-size: 6px; }
  .journal-sheet .journal-day { font-size: 40px; }
  .journal-sheet .journal-heading h1 { font-size: 23px; }
  .journal-sheet .journal-section-title small { display: none; }
  .journal-sheet .journal-collage--many { grid-template-columns: minmax(0, 1fr); gap: 17px; margin-left: 4px; margin-right: 5px; }
  .journal-sheet .journal-photo:nth-child(even) { margin-top: 0; }
  .journal-sheet .journal-collage--many .journal-photo img { aspect-ratio: 8 / 5; }
}

@media print {
  .journal-sheet { max-width: none; width: 100%; margin: 0; padding: 8mm 4mm; border: 0; box-shadow: none; font-size: 11pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .journal-sheet .journal-body { grid-template-columns: 17mm minmax(0, 1fr); gap: 8mm; }
  .journal-sheet .journal-heading h1 { font-size: 25pt; }
  .journal-sheet .journal-section, .journal-sheet .journal-photo, .journal-sheet .journal-heading, .journal-sheet .journal-timeline li, .journal-sheet .journal-meal { break-inside: avoid; }
  .journal-sheet .journal-section-title { break-after: avoid; }
  .journal-sheet .journal-photo { box-shadow: none; }
  .journal-sheet .journal-footer { break-inside: avoid; }
}