.core-growth-record {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  padding: 22px 28px 20px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  background: linear-gradient(145deg, #d7b88f, #c89c77);
}

.core-growth-record > header { display: flex; align-items: center; gap: 14px; }
.core-growth-record > header button { width: 42px; height: 42px; border: 0; border-radius: 13px; background: #5d4946; color: #fff; font-size: 26px; }
.core-growth-record > header div { display: grid; gap: 2px; }
.core-growth-record > header span { color: #ad625c; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.core-growth-record > header h1 { margin: 0; font-family: var(--font-display); font-size: 27px; }
.core-growth-record > header p { margin: 0; color: #806960; font-size: 12px; }

.core-growth-record__body { position: relative; display: grid; min-height: 0; grid-template-columns: 304px minmax(0, 1fr); gap: 0; filter: drop-shadow(0 16px 24px rgb(76 51 43 / 18%)); }
.core-growth-record__body::after { position: absolute; z-index: 3; top: 10px; bottom: 10px; left: 304px; width: 12px; background: linear-gradient(90deg, rgb(81 63 58 / 14%), rgb(255 255 255 / 52%), rgb(81 63 58 / 12%)); content: ""; pointer-events: none; transform: translateX(-50%); }

/* The completed journey is presented as one open keepsake book, not a second archive dashboard. */
.core-growth-certificate {
  position: relative;
  display: grid;
  overflow: hidden;
  padding: 18px 22px;
  justify-items: center;
  align-content: start;
  gap: 8px;
  border: 1px solid rgb(94 80 70 / 18%);
  border-radius: 8px 0 0 8px;
  background: #f2e8d6;
  box-shadow: inset -14px 0 22px rgb(94 71 59 / 8%);
}

.core-growth-certificate::before { position: absolute; inset: 10px; border: 1px dashed rgb(187 112 102 / 34%); border-radius: 4px; content: ""; pointer-events: none; }
.core-growth-certificate > span { z-index: 1; color: #bd6a67; font-size: 11px; font-weight: 950; letter-spacing: .12em; }
.core-growth-certificate figure { z-index: 1; display: grid; position: relative; width: 164px; height: 164px; margin: 5px 0 0; place-items: end center; overflow: hidden; border: 8px solid #fffaf0; border-radius: 3px; background: #dce3d1; box-shadow: 0 8px 18px rgb(122 76 59 / 16%); transform: rotate(-1deg); }
.core-growth-certificate figure::before { position: absolute; z-index: 2; top: -7px; left: 50%; width: 58px; height: 16px; background: rgb(127 139 105 / 72%); content: ""; transform: translateX(-50%) rotate(1deg); }
.core-growth-certificate figure img { width: 150%; height: 150%; object-fit: contain; object-position: 50% 100%; }
.core-growth-certificate h2 { z-index: 1; margin: 0; color: #b85858; font-family: var(--font-display); font-size: 29px; }
.core-growth-certificate dl { z-index: 1; display: grid; width: 100%; margin: 0; gap: 5px; }
.core-growth-certificate dl div { display: grid; padding: 5px 8px; grid-template-columns: 48px 1fr; border-bottom: 1px dashed rgb(166 103 89 / 28%); }
.core-growth-certificate dt { color: #a67467; font-size: 10px; font-weight: 900; }
.core-growth-certificate dd { margin: 0; color: #684c45; font-size: 11px; font-weight: 850; }
.core-growth-certificate__seal { z-index: 1; display: grid; position: absolute; right: 18px; bottom: 18px; width: 68px; height: 68px; place-items: center; align-content: center; border: 3px double #c88356; border-radius: 50%; color: #a86145; transform: rotate(-8deg); }
.core-growth-certificate__seal i { font-style: normal; font-size: 12px; font-weight: 900; line-height: 1; }
.core-growth-certificate__seal b { font-size: 8px; }

.core-growth-journal { display: grid; min-height: 0; padding: 16px 16px 16px 22px; grid-template-rows: auto minmax(0, 1fr); gap: 10px; border: 1px solid rgb(94 80 70 / 18%); border-left: 0; border-radius: 0 8px 8px 0; background: #fffaf0; box-shadow: inset 14px 0 22px rgb(94 71 59 / 6%); }
.core-growth-journal > header { display: flex; min-height: 36px; padding-bottom: 8px; justify-content: space-between; align-items: end; border-bottom: 1px solid rgb(112 91 74 / 14%); }
.core-growth-journal > header div { display: grid; gap: 2px; }
.core-growth-journal > header span { color: #b66460; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.core-growth-journal > header b { color: #71544c; font-family: var(--font-display); font-size: 18px; }
.core-growth-journal > header em { color: #74806b; font-size: 10px; font-style: normal; font-weight: 900; }
.core-growth-journal ol { display: grid; min-height: 0; overflow: auto; margin: 0; padding: 2px 4px 2px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; list-style: none; scrollbar-color: #c38b78 transparent; scrollbar-width: thin; }

.core-growth-memory { --memory-accent: #b96862; position: relative; display: grid; min-height: 116px; padding: 7px 8px 7px 7px; grid-template-columns: 108px minmax(0, 1fr); gap: 10px; border: 1px solid rgb(112 91 74 / 13%); border-left: 4px solid var(--memory-accent); border-radius: 4px; background: #f7f1e6; box-shadow: 0 4px 9px rgb(94 68 56 / 7%); }
.core-growth-memory:nth-child(2),
.core-growth-memory:nth-child(5) { --memory-accent: #7e8d70; }
.core-growth-memory:nth-child(3),
.core-growth-memory:nth-child(6) { --memory-accent: #71838e; }
.core-growth-memory > i { position: absolute; z-index: 2; top: 10px; left: 10px; display: grid; width: 26px; height: 20px; place-items: center; background: var(--memory-accent); color: #fffaf0; font-size: 8px; font-style: normal; font-weight: 950; }
.core-growth-memory figure { display: grid; overflow: hidden; margin: 0; padding: 5px 3px 0; place-items: end center; border: 5px solid #fffdf7; border-radius: 2px; background: #e8d3b9; box-shadow: 0 3px 8px rgb(94 68 56 / 12%); }
.core-growth-memory figure img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.core-growth-memory > div { align-self: center; }
.core-growth-memory span { color: #b46862; font-size: 9px; font-weight: 900; }
.core-growth-memory h2 { margin: 4px 0 3px; color: #654a43; font-family: var(--font-display); font-size: 15px; line-height: 1.2; }
.core-growth-memory p { margin: 0; color: #846f66; font-size: 10px; line-height: 1.55; }

.core-growth-record__actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.core-growth-record__actions button { min-width: 132px; min-height: 38px; border: 1px solid rgb(111 78 70 / 22%); border-radius: 8px; background: rgb(255 255 255 / 72%); color: #674d46; font: inherit; font-size: 12px; font-weight: 850; }
.core-growth-record__actions .primary-button { border-color: #a95658; background: #a95658; color: #fff; }