:root {
  --bg: #f7f3ed;
  --surface: #fffdf9;
  --surface-soft: #f1ebe2;
  --text: #282d27;
  --muted: #89877e;
  --green: #477563;
  --green-dark: #315c4c;
  --green-light: #e4eee7;
  --orange: #d97952;
  --orange-light: #f9e7dc;
  --border: #eae3d9;
  --shadow: 0 8px 28px rgba(67, 52, 36, .045);
  --radius: 21px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #8bb7a1;
  outline-offset: 2px;
}
button:disabled { opacity: .45; cursor: not-allowed; }

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 265px;
  padding: 34px 21px 20px;
  background-color: #efe7dc;
  background-image: linear-gradient(180deg, rgba(239,231,220,.99) 0%, rgba(239,231,220,.97) 38%, rgba(239,231,220,.78) 52%, rgba(239,231,220,.20) 73%, rgba(239,231,220,.08) 100%), url("https://images.unsplash.com/photo-1445116572660-236099ec97a0?auto=format&fit=crop&w=900&q=85");
  background-position: center, center bottom;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  display: flex;
  flex-direction: column;
  z-index: 5;
  border-right: 1px solid rgba(103, 85, 62, .07);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 5px;
  color: inherit;
  text-decoration: none;
  margin-bottom: 43px;
}

.brand-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-size: 28px;
  font-weight: 500;
}

.brand strong {
  display: block;
  font: 700 25px "Playfair Display", Georgia, serif;
  letter-spacing: -.6px;
}

.brand small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
}

.navigation { display: grid; gap: 8px; }

.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 12px;
  border: 0;
  border-radius: 13px;
  text-align: left;
  color: #514e45;
  background: transparent;
  transition: background .2s, color .2s;
}

.nav-item:hover { background: rgba(255,255,255,.55); }
.nav-item.active {
  background: var(--green);
  color: white;
  box-shadow: 0 5px 14px rgba(49, 92, 76, .12);
}

.nav-icon {
  width: 25px;
  text-align: center;
  font-size: 23px;
}

.nav-count {
  margin-left: auto;
  opacity: .8;
  font-size: 12px;
}

.sidebar-bottom {
  margin-top: auto;
  padding: 20px 12px 22px;
  border-top: 1px solid #ded4c6;
}

.quote-mark {
  font: 700 42px Georgia, serif;
  line-height: 1;
  color: var(--green);
}

.sidebar-bottom p {
  margin: 9px 0 15px;
  max-width: 190px;
  color: #625c50;
  font: italic 17px/1.7 "Playfair Display", Georgia, serif;
}

.quote-author {
  font-size: 9px;
  letter-spacing: 1.6px;
  color: #958b7c;
}

.sidebar-footer {
  margin-top: auto;
  padding: 12px 5px 0;
  color: #999083;
  font-size: 9px;
  letter-spacing: 1.2px;
}
.sidebar-footer span, .page-footer span { color: var(--green); }

.main-content {
  margin-left: 265px;
  padding: 36px clamp(22px, 3vw, 48px) 20px;
  max-width: 1900px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin-bottom: 29px;
}

.eyebrow {
  color: var(--green);
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 700;
}

h1 {
  margin: 5px 0 6px;
  font: 700 clamp(30px, 3vw, 43px)/1.2 "Playfair Display", Georgia, serif;
  letter-spacing: -.8px;
}

.subtitle { margin: 0; color: var(--muted); font-size: 13px; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-box {
  width: clamp(190px, 25vw, 335px);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 13px;
  height: 47px;
  color: var(--muted);
}
.search-box > span { font-size: 27px; }
.search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}
.search-box input:focus-visible { outline: none; }
.search-box kbd {
  font-size: 11px;
  color: #b0a99d;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}

.icon-button {
  width: 43px;
  height: 43px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 24px;
  box-shadow: var(--shadow);
}
.icon-button:hover { color: var(--green); transform: translateY(-1px); }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 256px;
  align-items: start;
  gap: 23px;
}

.task-column { min-width: 0; }

.add-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 19px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.add-symbol {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-size: 27px;
  line-height: 1;
}

.task-form { min-width: 0; flex: 1; }
.task-form > input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 39px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 15px;
}
.task-form > input:focus-visible { outline: none; }
.task-form > input::placeholder { color: #a19a90; }

.form-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.date-field {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}
.date-field input {
  max-width: 130px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
}
.form-options select, .sort-control select {
  border: 0;
  outline: 0;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
}

.primary-button {
  border: 0;
  border-radius: 11px;
  background: var(--green);
  color: white;
  padding: 11px 17px;
  font-weight: 600;
  transition: background .2s, transform .2s;
}
.primary-button:hover { background: var(--green-dark); transform: translateY(-1px); }
.form-options .primary-button { margin-left: auto; }

.secondary-button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 10px;
}

.task-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 21px 0 20px;
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 8px 12px;
  background: #f0e9df;
  color: #645d52;
  white-space: nowrap;
  font-size: 11px;
}
.filter-pill span { opacity: .75; }
.filter-pill:hover { border-color: #d9cec0; }
.filter-pill.active { background: var(--green); color: white; }

.sort-control {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: var(--muted);
}
.sort-control select { max-width: 105px; cursor: pointer; }

.list-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 10px;
  color: #9a9387;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.1px;
}
.list-heading #visibleCount {
  letter-spacing: 0;
  font-weight: 500;
}

.task-list { display: grid; gap: 10px; }

.task-card {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: 0 4px 15px rgba(67, 52, 36, .025);
  transition: transform .2s, box-shadow .2s;
}
.task-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.task-card.is-completed { background: #fbfaf6; }
.task-card.is-completed .task-title {
  color: #9d9a91;
  text-decoration: line-through;
}

.task-check {
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid #c9c0b4;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.task-check:checked {
  background: var(--green);
  border-color: var(--green);
}
.task-check:checked::after {
  content: "✓";
  color: white;
  font-size: 15px;
  font-weight: 700;
}

.task-info { min-width: 0; }
.task-title {
  display: block;
  overflow-wrap: anywhere;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.5;
}
.task-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
}
.category-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  color: #436e8a;
  background: #e8f0f7;
}
.category-tag.personal { color: #47744f; background: #e6efe3; }
.category-tag.work { color: #b85d36; background: #f9e6da; }

.task-date { display: inline-flex; align-items: center; gap: 4px; }
.task-date.overdue { color: #c95e43; font-weight: 700; }

.task-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.task-action {
  display: grid;
  place-items: center;
  width: 29px;
  height: 31px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #898579;
  font-size: 17px;
}
.task-action:hover { background: var(--surface-soft); color: var(--green-dark); }
.task-action.important { color: #d49a30; }
.task-action.delete:hover { color: #c75c48; }

.empty-state {
  padding: 45px 20px;
  text-align: center;
  border: 1px dashed #d9cec0;
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(255,255,255,.32);
}
.empty-state strong {
  display: block;
  color: var(--text);
  margin-bottom: 5px;
  font: 600 19px "Playfair Display", Georgia, serif;
}
.empty-icon { font-size: 30px; margin-bottom: 9px; }

.list-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  color: var(--muted);
  font-size: 11px;
}
.text-button {
  border: 0;
  background: transparent;
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
}
.text-button:hover { text-decoration: underline; }

.right-column { display: grid; gap: 17px; min-width: 0; }
.panel {
  padding: 19px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.panel-heading { display: flex; align-items: center; gap: 10px; }
.panel-heading h2 { margin: 0; font-size: 14px; font-weight: 700; }
.panel-icon { color: var(--green); font-size: 20px; }
.stats-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 17px;
}

.progress-ring {
  --progress: 0%;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(var(--green) var(--progress), #eae5dc 0);
  position: relative;
}
.progress-ring::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--surface);
}
.ring-center { position: relative; text-align: center; }
.ring-center strong { display: block; font-size: 26px; line-height: 1.1; }
.ring-center span { display: block; margin-top: 5px; font-size: 9px; color: var(--muted); }

.legend { display: grid; gap: 13px; flex: 1; }
.legend > div { display: grid; grid-template-columns: 9px minmax(0,1fr) auto; align-items: center; gap: 7px; font-size: 11px; }
.legend strong { font-size: 12px; }
.dot { width: 9px; height: 9px; display: inline-block; border-radius: 50%; }
.dot-pending { background: #eab77e; }
.dot-completed { background: #70a68a; }
.dot-important { background: var(--orange); }
.stats-caption { color: var(--muted); font-size: 11px; }

.calendar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 19px 0 14px;
}
.calendar-top strong { font-size: 13px; }
.calendar-arrow {
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 23px;
}
.calendar-arrow:hover { background: var(--surface-soft); }

.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.calendar-weekdays { margin-bottom: 6px; }
.calendar-weekdays span {
  text-align: center;
  color: var(--muted);
  font-size: 10px;
  padding: 4px 0;
}
.calendar-day {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 11px;
}
.calendar-day:hover { background: var(--surface-soft); }
.calendar-day.outside { color: #bcb5a9; }
.calendar-day.today { background: var(--green); color: white; font-weight: 700; }
.calendar-day.has-task:not(.today)::after {
  content: "";
  position: absolute;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--orange);
}
.calendar-note { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--muted); font-size: 9px; }

.motivation-card {
  padding: 22px 17px;
  border-radius: var(--radius);
  text-align: center;
  background: linear-gradient(145deg, #f0dfc9, #e7e8da);
  color: #4f5f50;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 0;
  overflow: hidden;
  text-align: left;
}
.motivation-image {
  width: 38%;
  min-width: 0;
  object-fit: cover;
  align-self: stretch;
}
.motivation-copy {
  flex: 1;
  min-width: 0;
  padding: 14px 12px 12px 0;
  text-align: center;
}
.motivation-label { font-size: 8px; letter-spacing: 1.7px; opacity: .7; }
.motivation-card p {
  margin: 8px 0 7px;
  font: italic 14px/1.4 "Playfair Display", Georgia, serif;
}
.motivation-line { display: block; width: 24px; height: 1px; margin: 0 auto 7px; background: var(--green); }
.motivation-card small { font-size: 6px; letter-spacing: .6px; opacity: .7; }

.tips-panel p { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.page-footer {
  margin-top: 29px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
  color: #a29a8d;
  font-size: 10px;
  letter-spacing: .2px;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  max-width: min(360px, calc(100vw - 32px));
  padding: 13px 18px;
  border-radius: 12px;
  background: #315c4c;
  color: white;
  box-shadow: 0 10px 30px #0002;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: .25s;
}
.toast.show { opacity: 1; transform: translateY(0); }

.edit-dialog {
  width: min(440px, calc(100vw - 30px));
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 26px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 20px 80px #0003;
}
.edit-dialog::backdrop { background: rgba(36, 39, 33, .38); backdrop-filter: blur(3px); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.dialog-heading h2 { margin: 5px 0 0; font: 700 25px "Playfair Display", Georgia, serif; }
.dialog-label { display: grid; gap: 7px; margin-bottom: 16px; font-size: 12px; font-weight: 600; }
.dialog-label input, .dialog-label select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

body.dark {
  --bg: #1d2521;
  --surface: #27312b;
  --surface-soft: #354139;
  --text: #f0eee5;
  --muted: #a7afa5;
  --green: #77a990;
  --green-dark: #63967c;
  --green-light: #34493d;
  --orange: #e99a75;
  --orange-light: #4c382f;
  --border: #3b463e;
  --shadow: 0 8px 28px rgba(0, 0, 0, .12);
}
body.dark .sidebar { background: #242e28; border-color: var(--border); }
body.dark .nav-item { color: #d9ddd4; }
body.dark .nav-item.active { color: #17241c; }
body.dark .nav-item:hover { background: #344139; }
body.dark .sidebar-bottom { border-color: var(--border); }
body.dark .sidebar-bottom p { color: #c3c8bd; }
body.dark .filter-pill { background: #354139; color: #d9ddd4; }
body.dark .filter-pill.active { background: var(--green); color: #17241c; }
body.dark .task-card.is-completed { background: #252e29; }
body.dark .category-tag { background: #354c5a; color: #c2dcec; }
body.dark .category-tag.personal { background: #33483a; color: #c5e2c9; }
body.dark .category-tag.work { background: #503b32; color: #f2c3aa; }
body.dark .motivation-card { background: linear-gradient(145deg, #3f493e, #3b443e); color: #e2e6d8; }
body.dark .calendar-day.today { color: #17241c; }
body.dark .progress-ring::before { background: var(--surface); }
body.dark .empty-state { background: #242e28; }
body.dark .date-field input, body.dark .form-options select, body.dark .sort-control select { color: var(--muted); }

@media (min-width: 1600px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 288px; gap: 28px; }
  .sidebar { width: 285px; padding-left: 25px; padding-right: 25px; }
  .main-content { margin-left: 285px; }
  .task-card { padding: 19px; }
}

@media (max-width: 1150px) {
  .sidebar { width: 220px; padding-left: 15px; padding-right: 15px; }
  .main-content { margin-left: 220px; padding: 27px 22px; }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .right-column { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .motivation-card, .tips-panel { min-height: 150px; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .header-actions { width: 100%; }
  .search-box { flex: 1; width: auto; }
}

@media (max-width: 720px) {
  .sidebar {
    position: static;
    width: 100%;
    padding: 15px 16px 10px;
  }
  .brand { margin-bottom: 14px; }
  .brand-icon { width: 39px; height: 39px; font-size: 23px; }
  .brand strong { font-size: 22px; }
  .sidebar-bottom, .sidebar-footer { display: none; }
  .navigation { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .nav-item { width: auto; min-width: max-content; padding: 9px 11px; gap: 6px; font-size: 11px; }
  .nav-icon { width: auto; font-size: 17px; }
  .nav-count { display: none; }
  .main-content { margin-left: 0; padding: 23px 15px; }
  .page-header { gap: 15px; margin-bottom: 20px; }
  h1 { font-size: 32px; }
  .subtitle { font-size: 12px; }
  .header-actions { gap: 8px; }
  .search-box { height: 43px; }
  .workspace { gap: 20px; }
  .add-card { padding: 14px; gap: 10px; }
  .add-symbol { width: 33px; height: 33px; }
  .form-options { gap: 9px; }
  .form-options .primary-button { width: 100%; margin-left: 0; }
  .task-toolbar { align-items: flex-start; flex-direction: column; }
  .filter-pills { gap: 5px; }
  .filter-pill { padding: 7px 10px; }
  .sort-control { align-self: flex-end; }
  .task-card { grid-template-columns: 21px minmax(0, 1fr); gap: 10px; padding: 13px; }
  .task-actions { grid-column: 2; justify-content: flex-end; }
  .task-info { grid-column: 2; grid-row: 1; }
  .task-check { grid-column: 1; grid-row: 1; margin-top: 2px; }
  .task-actions { grid-row: 2; }
  .right-column { grid-template-columns: minmax(0, 1fr); }
  .stats-content { justify-content: flex-start; gap: 28px; }
  .progress-ring { width: 120px; height: 120px; }
  .list-footer { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}


@media (min-width: 721px) {
  .right-column {
    gap: 15px;
  }

  .right-column .panel {
    padding: 17px;
  }

  .right-column .stats-content {
    gap: 10px;
    margin: 20px 0 15px;
  }

  .right-column .progress-ring {
    width: 104px;
    height: 104px;
  }

  .right-column .progress-ring::before {
    inset: 8px;
  }

  .right-column .calendar-top {
    margin: 12px 0 8px;
  }

  .right-column .calendar-grid {
    gap: 2px;
  }

  .right-column .calendar-weekdays {
    margin-bottom: 4px;
  }

  .right-column .calendar-weekdays span {
    padding: 3px 0;
  }

  .right-column .calendar-day {
    font-size: 10px;
  }

  .right-column .calendar-note {
    margin-top: 8px;
  }

  .right-column .motivation-card {
    padding: 20px 16px;
  }

  .right-column .motivation-card p {
    margin: 14px 0 12px;
    line-height: 1.48;
  }

  .right-column .motivation-line {
    margin-bottom: 10px;
  }
}


@media (min-width: 721px) {
  .main-content {
    zoom: 0.9;
  }

  .sidebar {
    zoom: 0.9;
  }
}

@media (max-width: 720px) {
  .main-content {
    zoom: 0.95;
  }
}


@media (min-width: 721px) {
  .right-column .motivation-card {
    zoom: 0.9215;
  }
}

@media (min-width: 721px) {
  .sidebar { background-size: cover, cover; background-position: center top, center bottom; }
}
@media (max-width: 720px) {
  .motivation-image { width: 36%; }
  .motivation-copy { padding: 10px 8px 9px 0; }
  .motivation-card p { font-size: 12px; }
  .motivation-card small { font-size: 5px; }
}


.sidebar-bottom {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 20px 12px 18px;
  border-top: 1px solid rgba(110, 96, 76, .18);
  background: linear-gradient(180deg, rgba(239,231,220,.32), rgba(239,231,220,.76));
  border-radius: 12px 12px 0 0;
}
.sidebar-bottom p { max-width: 190px; }
.sidebar-footer { position: relative; z-index: 1; text-shadow: 0 1px 4px rgba(255,255,255,.6); }
.brand, .navigation { position: relative; z-index: 1; }


.sidebar-bottom {
  margin-top: 22px;
  padding: 12px 12px 0;
  border-top: 0;
  background: transparent;
  position: relative;
  z-index: 1;
}

.sidebar-bottom p {
  margin: 8px 0 14px;
  max-width: 190px;
  color: #625c50;
  font: italic 17px/1.7 "Playfair Display", Georgia, serif;
  text-shadow: 0 1px 8px rgba(255, 250, 242, .8);
}

.sidebar-footer {
  margin-top: auto;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 8px rgba(255, 250, 242, .8);
}

@media (max-height: 760px) {
  .sidebar-bottom { margin-top: 12px; padding-top: 8px; }
  .sidebar-bottom p { font-size: 15px; line-height: 1.55; }
}


/* Sidebar quote layout */
@media (min-width: 721px) {
  .sidebar { background-size: cover, 100% 62%; background-position: center, center bottom; }
  .sidebar-bottom {
    margin-top: 24px;
    padding: 12px 8px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    align-self: flex-end;
    width: 100%;
    max-width: 205px;
    text-align: left;
  }
  .sidebar-bottom .quote-mark { font-size: 38px; }
  .sidebar-bottom p {
    max-width: 190px;
    margin: 7px 0 12px;
    font-size: 16px;
    line-height: 1.55;
    color: #625c50;
    text-shadow: 0 1px 8px rgba(255,250,242,.92);
  }
  .sidebar-footer { margin-top: auto; }
}
@media (max-width: 720px) {
  .sidebar { background-size: cover, 100% 62%; background-position: center, center bottom; }
  .sidebar-bottom { margin-top: 24px; padding: 12px 8px 0; background: transparent; border: 0; border-radius: 0; }
  .sidebar-bottom p { margin-top: 7px; }
}


/* Sidebar background and quote final layout */
.sidebar {
  background-color: #efe7dc;
  background-image: linear-gradient(180deg, #efe7dc 0%, rgba(239,231,220,.98) 34%, rgba(239,231,220,.82) 42%, rgba(239,231,220,0) 58%), url("assets/sidebar-bg.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center bottom;
  background-size: 100% 100%, 100% 68%;
}
.sidebar-bottom {
  margin-top: 22px !important;
  margin-bottom: auto !important;
  padding: 10px 8px 0 !important;
  width: 100%;
  max-width: 205px;
  align-self: flex-end;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: left;
  position: relative;
  z-index: 2;
}
.sidebar-bottom .quote-mark { font-size: 38px; line-height: 1; }
.sidebar-bottom p {
  max-width: 190px;
  margin: 7px 0 12px !important;
  font-size: 16px;
  line-height: 1.55;
  color: #625c50;
  text-shadow: 0 1px 8px rgba(255,250,242,.72);
}
.sidebar-footer { margin-top: auto; position: relative; z-index: 2; }
@media (max-width: 720px) {
  .sidebar { background-size: 100% 100%, 100% 68%; }
  .sidebar-bottom { margin-top: 22px !important; margin-bottom: auto !important; }
}