/* Scoped replacement for the illustrative treatment index. */
.personal-note { background: var(--paper); color: var(--espresso); padding-block: 48px; scroll-margin-top: 24px; }
.personal-note .note-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; isolation: isolate; max-width: calc(860px + 2 * var(--gutter)); }
.note-composition { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 18px 40px; align-items: start; width: 100%; }
.note-visual { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; align-content: start; }
.note-statement { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 1; max-width: 900px; font: 400 clamp(68px, 6.5vw, 96px)/.95 var(--serif); letter-spacing: -.04em; }
.note-statement > span { display: inline-block; }
.personal-note .note-photo { grid-column: 1; grid-row: 1; width: 100%; max-width: 280px; min-width: 0; margin: 0; justify-self: start; }
.note-photo-surface { --note-origin: 54% 42%; position: relative; aspect-ratio: 4 / 5; overflow: clip; isolation: isolate; background: var(--sand); }
.note-photo-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 35%; }
.note-photo-surface > .note-photo-image { position: absolute; inset: 0; }
.note-shadow { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: rgb(45 35 29 / .2) url("assets/note/light-shadow-desktop.svg") center / 100% 100% no-repeat; }
.note-mask-layer { display: none; position: absolute; inset: 0; pointer-events: none; }
.note-letter-light { -webkit-mask-image: url("assets/note/type-you-desktop.svg"); mask-image: url("assets/note/type-you-desktop.svg"); }
.note-aperture { -webkit-mask-image: url("assets/note/organic-desktop.svg"); mask-image: url("assets/note/organic-desktop.svg"); transform-origin: var(--note-origin); }
.note-letter-light, .note-aperture { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; mask-mode: alpha; }
.note-light-register { width: 100%; height: 100%; transform-origin: var(--note-origin); }
.note-message { grid-column: 2; grid-row: 1; width: min(100%, 43ch); padding-top: 0; }
.note-label { font: 500 14px/1.5 var(--sans); }
.note-copy { margin-top: 20px; }
.note-copy p { font: 400 17px/1.6 var(--sans); }
.note-copy > p:first-child { font: 400 24px/1.25 var(--serif); letter-spacing: -.01em; }
.note-copy p + p { margin-top: 14px; }
.note-full-message { margin-top:14px; }
.note-read-toggle { min-height:44px; padding:8px 0; border:0; border-radius:0; background:transparent; color:var(--espresso); font:500 14px/1.5 var(--sans); text-decoration:underline; text-underline-offset:6px; cursor:pointer; }
.note-message .note-signature { margin-top: 20px; font: 400 30px/1.15 var(--serif); letter-spacing: -.02em; }
.note-signature > span { display: block; }
.personal-note .note-closing { grid-column: 1; grid-row: 2; width: 100%; margin-top: 0; font: 400 clamp(38px, 3.3vw, 46px)/.97 var(--serif); letter-spacing: -.02em; }
.note-closing-line { display: block; overflow: clip; padding-block: .12em; margin-block: -.12em; }
.note-closing-ink { display: block; }
.personal-note[data-note-motion] .note-mask-layer { display: block; }
@media (max-width: 999px) {
  .personal-note { padding-block: 40px; }
  .personal-note .note-layout { gap: 24px; }
  .note-composition { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 18px 24px; }
  .note-statement { grid-column: 1 / -1; grid-row: 1; font-size: clamp(60px, 10vw, 88px); }
  .personal-note .note-photo { max-width: 220px; }
  .note-photo-surface { --note-origin: 52% 40%; aspect-ratio: 5 / 6; }
  .note-photo-image { object-position: 55% 30%; }
  .note-shadow { background-image: url("assets/note/light-shadow-mobile.svg"); }
  .note-letter-light { -webkit-mask-image: url("assets/note/type-you-mobile.svg"); mask-image: url("assets/note/type-you-mobile.svg"); }
  .note-aperture { -webkit-mask-image: url("assets/note/organic-mobile.svg"); mask-image: url("assets/note/organic-mobile.svg"); }
  .personal-note .note-closing { font-size: clamp(30px, 4.8vw, 36px); }
}
@media (max-width: 599px) {
  .personal-note { padding-block: 32px; }
  .personal-note .note-layout { --gutter: 22px; gap: 22px; }
  .note-composition { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .note-visual { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; }
  .note-statement { font-size: clamp(46px, 12vw, 62px); }
  .note-statement > span { display: block; }
  .note-statement > span + span { margin-left: .35em; }
  .personal-note .note-photo { grid-column: 3 / -1; grid-row: 1; max-width: 280px; justify-self:end; }
  .note-photo-surface { aspect-ratio:4 / 5; }
  .note-message { grid-column: 1 / -1; grid-row: 2; }
  .note-copy p { font-size: 16px; line-height: 1.6; }
  .note-copy > p:first-child { max-width:22ch; font-size:28px; line-height:1.13; }
  .note-read-toggle { margin-top:10px; }
  .personal-note .note-closing { position:relative; z-index:2; grid-column: 1 / 10; grid-row: 1; align-self:end; padding:0 0 16px; font-size:clamp(28px,7.6vw,34px); }
  .personal-note .note-closing-line { width:max-content; max-width:100%; margin:0; padding:3px 8px 4px 0; background:var(--paper); }
  .note-mobile-word { display:inline; }
}
@media (prefers-reduced-motion: reduce) {
  .personal-note[data-note-motion] .note-mask-layer { display: none; }
  .personal-note .note-shadow { opacity: 0 !important; }
  .personal-note .note-closing-ink { transform: none !important; opacity: 1 !important; }
}