/* Journal page: Annick's private notes. Her writing in the GT Super Text serif, labels and dates in Aeonik.
   One image (discs) in the intro sheet, as on the home page. Plum only on the save button. */
.jr-main { max-width: calc(880px + 2 * var(--gutter)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.jr-intro { display: grid; justify-items: start; padding: clamp(40px, 5vw, 64px); border-radius: var(--radius);
  background: linear-gradient(100deg, rgb(246 242 242 / 0.94) 0%, rgb(246 242 242 / 0.82) 45%, rgb(246 242 242 / 0.35) 100%), url(/assets/web/discs.jpg) 75% 40% / cover no-repeat; }
.jr-intro .weeks-lead { margin-top: 16px; max-width: 32em; font-family: var(--serif); font-size: var(--text-letter); line-height: 1.6; }
.jr-h2 { font-family: var(--display); font-weight: 300; font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.01em; }

/* Writing */
.jr-write { display: grid; gap: 12px; margin-top: 64px; padding: clamp(28px, 4vw, 40px); border-radius: var(--radius); background: color-mix(in oklab, var(--ground) 75%, var(--field)); }
.jr-today { font-size: var(--text-label); color: var(--ink-2); }
.jr-write textarea { width: 100%; min-height: 200px; resize: vertical; margin-top: 8px; padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: #FBF9F9; color: var(--ink);
  font: 400 var(--text-letter)/1.6 var(--serif); }
.jr-write textarea::placeholder { color: var(--ink-2); }
.jr-write textarea:focus-visible { outline: var(--ring); outline-offset: 2px; border-color: var(--ink); }
.jr-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 8px; }
.jr-check { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: var(--text-body); cursor: pointer; }
.jr-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.jr-status { font-size: var(--text-small); color: var(--ink-2); min-height: 1.4em; }

/* Notes */
.jr-notes { margin-top: 80px; }
.jr-notes .sample-note { margin-top: 8px; }
.notes { list-style: none; margin: 32px 0 0; padding: 0; }
.note { padding: 28px 0; border-top: 1px solid rgb(168 156 159 / 0.45); }
.note:last-child { border-bottom: 1px solid rgb(168 156 159 / 0.45); }
.note-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: var(--text-label); color: var(--ink-2); }
.note-flag { color: var(--ink); font-weight: 500; }
.note-text { margin-top: 10px; max-width: 36em; font-family: var(--serif); font-size: var(--text-letter); line-height: 1.6; text-wrap: pretty; }
.jr-empty { margin-top: 32px; color: var(--ink-2); }

/* Phones: everything centred. */
@media (max-width: 640px) {
  .jr-intro { justify-items: center; text-align: center; padding: 40px 16px;
    background: linear-gradient(180deg, rgb(246 242 242 / 0.92) 0%, rgb(246 242 242 / 0.7) 60%, rgb(246 242 242 / 0.4) 100%), url(/assets/web/discs.jpg) 50% 40% / cover no-repeat; }
  .jr-intro .weeks-lead { text-align: justify; text-align-last: center; hyphens: auto; -webkit-hyphens: auto; }
  .jr-write { margin-top: 48px; padding: 28px 16px; text-align: center; justify-items: center; }
  .jr-write textarea { text-align: center; }
  .jr-actions { flex-direction: column; justify-content: center; }
  .jr-notes { margin-top: 64px; text-align: center; }
  .note-date { justify-content: center; }
  .note-text { margin-left: auto; margin-right: auto; text-align: justify; text-align-last: center; hyphens: auto; -webkit-hyphens: auto; }
}
.jr-main { margin-inline: auto; }
.jr-status:empty { display: none; }
@media (max-width: 640px) { .jr-intro .weeks-lead, .note-text { font-size: var(--text-body); } }

/* Brightness (2026-10-19): the writing card is light paper with a fine edge, the discs come through more in the intro. */
.journal-page-body .jr-write { background: #FCFAFA; border: 1px solid rgb(168 156 159 / 0.35); box-shadow: 0 24px 48px -36px rgb(58 53 56 / 0.25); }
.journal-page-body .jr-write textarea { background: #FFFFFF; }
.journal-page-body .jr-intro { padding: clamp(48px, 6vw, 80px);
  background: linear-gradient(100deg, rgb(252 250 250 / 0.92) 0%, rgb(252 250 250 / 0.6) 45%, rgb(252 250 250 / 0) 100%), url(/assets/web/discs.jpg) 75% 40% / cover no-repeat; }
.journal-page-body .note { border-color: rgb(168 156 159 / 0.35); }
@media (max-width: 640px) { .journal-page-body .jr-intro { padding: 48px 16px;
  background: linear-gradient(180deg, rgb(252 250 250 / 0.9) 0%, rgb(252 250 250 / 0.55) 60%, rgb(252 250 250 / 0.15) 100%), url(/assets/web/discs.jpg) 50% 40% / cover no-repeat; } }
/* One left edge on desktop: intro, writing card and notes all start 48px in. Typing in the field runs from the left; only the placeholder is centred on phones. */
@media (min-width: 641px) {
  .journal-page-body .jr-intro, .journal-page-body .jr-write { padding-left: 48px; padding-right: 48px; }
  .journal-page-body .jr-notes { padding: 0 48px; }
}
@media (max-width: 640px) { .journal-page-body .jr-write textarea { text-align: start; } .journal-page-body .jr-write textarea::placeholder { text-align: center; } }

/* One border style everywhere: 2px #F2EEEE (overrides the earlier edge colour on this page). */
body.hero-c .wk, body.hero-c .jr-write { border: 1.5px solid #F2EEEE; }
body.hero-c .wk-head { border-bottom: 1.5px solid #F2EEEE; }
body.hero-c .wk .r { border-top: 1.5px solid #F2EEEE; }
body.hero-c .wk .r-video, body.hero-c .wk .r-video + .r { border-top: 0; }
body.hero-c .note { border-top: 1.5px solid #F2EEEE; }
body.hero-c .note:last-child { border-bottom: 1.5px solid #F2EEEE; }