/* Alfon's Farm Journal: the circular portrait + scrolling notepad widget.
   Tokens only, from theme.css. No literal colours/sizes here. */

#journal .wrap { width: min(100% - 2 * var(--gutter), calc(var(--w-wide) * 1.1)); }

.journal-wrap { display: grid; gap: var(--sp-4); }
@media (min-width: 64rem) {
  .journal-wrap { grid-template-columns: minmax(14rem, 18rem) 1fr; align-items: start; gap: var(--sp-5); }
}

.journal-avatar { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center; position: sticky; top: calc(var(--header-h) + var(--sp-3)); }
.journal-avatar .eyebrow { justify-content: center; }
.journal-avatar h1 { font-size: var(--fs-h3); margin: 0 0 var(--sp-2); }
.journal-avatar-halo { padding: var(--sp-1); border: 1px dashed var(--c-maroon-light); border-radius: var(--r-pill); margin-top: var(--sp-2); }
.journal-avatar-lead { font-size: var(--fs-sm); color: var(--c-ink-soft); margin: var(--sp-2) 0 0; }
.journal-avatar-ring { display: block; width: min(62.4vw, 15.6rem); aspect-ratio: 1; border-radius: var(--r-pill); overflow: hidden; border: 6px solid var(--c-cream); box-shadow: var(--shadow-lift); }
.journal-avatar-ring img { width: 100%; height: 100%; object-fit: cover; display: block; }
.journal-avatar-name { font-family: var(--font-display); font-style: italic; font-size: var(--fs-h3); color: var(--c-maroon-deep); margin: var(--sp-1) 0 0; }
.journal-avatar-role { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: var(--tracking-mid); text-transform: uppercase; color: var(--c-ink-soft); margin: 0; }

.journal-notepad { position: relative; background: var(--c-cream); border: var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); padding: var(--sp-3) var(--sp-3) var(--sp-2) calc(var(--sp-3) + 1.5rem); transform: rotate(-0.4deg); }

.journal-spiral { position: absolute; left: var(--sp-1); top: var(--sp-3); bottom: var(--sp-3); width: 1.1rem; pointer-events: none; background-image: radial-gradient(circle, var(--c-cream-deep) 0.3rem, transparent 0.32rem); background-size: 100% 1.7rem; background-repeat: repeat-y; background-position: center top; }

.journal-viewport {
  position: relative;
  overflow: hidden;
  height: clamp(26.4rem, 68.2vh, 37.4rem);
  border-radius: var(--r-md);
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 2.1rem, var(--c-cream-line) 2.1rem, var(--c-cream-line) calc(2.1rem + 1px));
  cursor: grab;
  touch-action: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
}
.journal-viewport.is-dragging { cursor: grabbing; }

.journal-track { will-change: transform; }

.journal-entry { display: flow-root; padding: var(--sp-3) var(--sp-2); border-bottom: 1px dashed var(--c-cream-line); transform: rotate(var(--tilt, 0deg)); }

.journal-date {
  float: left;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 var(--sp-2) var(--sp-1) 0;
  border-radius: var(--r-pill);
  background: var(--c-maroon);
  color: var(--c-cream);
  font-family: var(--font-script);
  font-weight: 600;
  transform: rotate(-6deg);
  box-shadow: var(--shadow-soft);
}
.journal-date-day { font-size: 0.92rem; line-height: 1.1; }
.journal-date-year { font-size: 0.62rem; line-height: 1; color: var(--c-cream); opacity: 0.68; margin-top: -0.05rem; }

.journal-entry-body p {
  font-family: var(--font-script);
  font-size: clamp(1.15rem, 1.05rem + 0.3vw, 1.35rem);
  line-height: 1.45;
  color: var(--c-ink);
  margin: 0 0 var(--sp-1);
}

.journal-photos { float: right; display: flex; flex-direction: column; gap: var(--sp-2); margin: 0 0 var(--sp-2) var(--sp-3); }
.journal-photo { display: block; background: #fffdf9; padding: 0.75rem 0.75rem 2.1rem; box-shadow: var(--shadow-soft); border-radius: var(--r-sm); width: 14.25rem; transform: rotate(-2deg); }
.journal-photo:nth-child(even) { transform: rotate(2deg); }
.journal-photo img { width: 100%; height: auto; border-radius: 2px; display: block; }

@media (max-width: 34rem) {
  .journal-photos { float: none; margin: var(--sp-2) 0; }
  .journal-photo { width: 100%; max-width: 16rem; }
}

.journal-hint { text-align: center; margin-top: var(--sp-2); font-size: var(--fs-xs); font-style: italic; color: var(--c-ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .journal-notepad { transform: none; }
}