/* Shared inset frame for images and longer journal writing. */
html { scrollbar-gutter: stable; }
html.reader-open { overflow: hidden; }
.portfolio-reader { width: min(880px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-frame); background: var(--surface-0); color: var(--text-0); box-shadow: 0 24px 80px rgba(0,0,0,.4); overflow: hidden; }
.portfolio-reader:not([open]) { display: none; }
.portfolio-reader::backdrop { background: rgba(0,0,0,.78); }
.reader-panel { display: flex; flex-direction: column; max-height: calc(100dvh - 54px); min-height: 0; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-1); overflow: hidden; }
.reader-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 28px; border-bottom: 1px solid var(--border); }
.reader-header > div { min-width: 0; }
.reader-eyebrow { color: var(--text-2); font: 12px/1.8 var(--font-mono); margin: 0 0 8px; }
.reader-header h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 600; line-height: 1.25; letter-spacing: -.03em; overflow-wrap: anywhere; margin: 0; }
.reader-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-2); color: var(--text-0); cursor: pointer; }
.reader-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.reader-close:hover { border-color: var(--accent-primary); }
.reader-close:focus-visible, .reader-body:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -4px; }
.reader-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 28px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.8; color: var(--text-1); scrollbar-width: thin; scrollbar-color: var(--accent-secondary) transparent; }
.reader-body > article { max-width: 65ch; margin-inline: auto; }
.reader-body p + p { margin-top: 20px; }
.reader-body img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-control); }
.reader-body figure { margin: 24px 0; }
.reader-body figcaption { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.reader-body .journal-record-content { padding: 0; font: inherit; color: inherit; }
.reader-body .journal-source { color: var(--accent-primary); }
.reader-body .journal-source:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 4px; }
.portfolio-reader[data-kind="image"] { width: min(1200px, calc(100% - 32px)); }
.portfolio-reader[data-kind="image"] .reader-body { padding: 16px; }
.portfolio-reader[data-kind="image"] figure { margin: 0; }
.portfolio-reader[data-kind="image"] img { width: 100%; max-height: calc(100dvh - 250px); object-fit: contain; background: var(--surface-0); }
@media (max-width: 600px) {
  .portfolio-reader, .portfolio-reader[data-kind="image"] { width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: 6px; border-radius: 26px; }
  .reader-panel { max-height: calc(100dvh - 30px); border-radius: 20px; }
  .reader-header { padding: 18px 16px; gap: 12px; }
  .reader-body { padding: 20px 16px; }
  .reader-eyebrow { font-size: 11px; }
}