/* The portrait keeps its composition. Everything below shares one reading column. */
main > .portrait-now {
  max-width: 808px;
  margin: 26px auto 28px;
  padding: 0 24px;
  border: 0;
  display: block;
}
main > .portrait-now .now { max-width: none; margin: 0; gap: 12px; font-size: .8125rem; }
#reading .reading-heading,
#reading .reading-tools,
#reading #river-flow-content,
#reading .reading-return,
#reading .reading-notice {
  max-width: 808px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
#reading .reading-heading { padding-top: 0; padding-bottom: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
#reading .reading-heading h2 { font: 400 1.5rem/1.6 var(--serif); margin: 0; }
#reading #latest-record { margin: 0 0 0 auto; padding: 0; font-size: .75rem; }
#reading .reading-tools { border: 0; }
#reading .reading-tools-inner {
  max-width: none;
  margin: 0;
  padding: 4px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 22px;
  border-bottom: 1px solid var(--line);
}
#reading #theme-filters { gap: 4px 20px; }
#reading #theme-filters button { min-height: 44px; padding: 6px 0; font-size: .8125rem; }
#reading #theme-filters small { display: none; font-size: .6875rem; margin-left: 5px; }
#reading #theme-filters [aria-pressed="true"] small { display: inline; }
#reading .reading-guide { min-height: 44px; gap: 16px; flex-wrap: nowrap; margin-left: auto; }
#reading .month-picker { min-width: 0; }
#reading .month-picker select {
  max-width: 164px;
  min-height: 44px;
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: .75rem var(--sans);
}
#reading .month-picker select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#reading .reading-guide > button { min-height: 44px; font-size: .8125rem; white-space: nowrap; }
#reading #river-flow-content { margin-top: 26px; }
#reading #river-flow-content .fragment {
  --record-color: var(--accent);
  width: 100%;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}
#reading #river-flow-content .fragment.project-record { --record-color: var(--mineral); }
#reading #river-flow-content .fragment.story-record { --record-color: var(--copper); }
#reading #river-flow-content .fragment.whisper { --record-color: var(--moss); }
#reading .fragment-card { padding: 0; border: 0; }
#reading .fragment h3 { font: 400 1.5rem/1.55 var(--serif); margin: 0 0 10px; }
#reading .fragment-body {
  display: block;
  max-width: 42em;
  font-size: 1.0625rem;
  line-height: 1.95;
  -webkit-line-clamp: unset;
}
#reading #river-flow-content .fragment.work { margin-top: 38px; margin-bottom: 38px; }
#reading .fragment.work h3 { color: var(--record-color); font-size: 1.7rem; }
#reading .fragment.story-record h3 { font-size: 1.9rem; letter-spacing: .06em; }
#reading .fragment.story-record .fragment-body,
#reading .fragment.whisper .fragment-body { font: 1.125rem/1.95 var(--serif); }
#reading #river-flow-content .month-marker {
  max-width: none;
  margin: 38px 0 18px;
  gap: 14px;
  font-size: .75rem;
  letter-spacing: .08em;
}
#reading #river-flow-content .month-marker::after { width: 26px; }
#reading #river-flow-content .month-marker:first-child { margin-top: 0; }
#reading #river-flow-content .month-marker + .fragment { margin-top: 0; }
/* Metadata follows the original text, in the same reading order on every device. */
#reading .fragment-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; margin-top: 6px; }
#reading .fragment-meta { margin: 0; gap: 0 12px; min-height: 44px; font-size: .75rem; }
#reading .fragment-meta time { position: static; width: auto; font-variant-numeric: tabular-nums; }
#reading .fragment-meta button { min-height: 44px; font-size: .75rem; }
#reading .fragment-actions { gap: 0 20px; margin: 0; font-size: .8125rem; }
#reading .fragment-actions .text-action { display: inline-flex; align-items: center; min-height: 44px; color: var(--record-color); }
#reading .fragment-actions .record-share { color: var(--muted); font-size: .75rem; }
#reading .fragment.work .fragment-footer { display: block; }
#reading .fragment.work .fragment-meta { min-height: 32px; }
#reading .fragment.work .fragment-meta button { min-height: 32px; }
#reading .record-status { color: var(--record-color); }

/* Existing previews retain their artwork and code; each work has one action row. */
#reading .work-preview { margin: 18px 0 10px; }
#reading .garden-preview > a { display: block; text-decoration: none; }
#reading .preview-frame { display: grid; aspect-ratio: 12 / 5; overflow: hidden; background: #e3e7dd; border-radius: 2px; }
#reading .preview-frame img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 58%; }
#reading .preview-fallback { place-self: center; padding: 24px; color: #456857; font: .875rem/1.8 var(--sans); }
#reading .preview-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; margin: 0 0 9px; color: var(--muted); font: .75rem/1.8 var(--sans); }
#reading .preview-code {
  height: 156px;
  margin: 0;
  padding: 18px 22px;
  overflow: auto;
  background: #21343c;
  color: #e2ebe8;
  font: 12px/1.85 ui-monospace, SFMono-Regular, Consolas, monospace;
  border-radius: 2px;
  scrollbar-color: #758d94 #21343c;
}
#reading .preview-code:focus-visible { outline: 2px solid var(--mineral); outline-offset: 3px; }
#reading .preview-code.sample-expanded { height: 360px; }
#reading .preview-note { font: .75rem/1.8 var(--sans); color: var(--muted); margin-top: 8px; }
#reading .load-area { max-width: 808px; margin: 0 auto 32px; padding: 12px 24px; }
#reading .load-area button { max-width: 100%; padding: 10px 4px; min-height: 44px; color: var(--ink); border-bottom-color: var(--accent); }
#reading .reading-return:not([hidden]) { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: 18px; }
#reading .reading-return p { color: var(--muted); font-size: .75rem; margin: 0; overflow-wrap: anywhere; }
#reading .reading-return button { min-height: 44px; font-size: .8125rem; text-align: left; }
#reading #forget-reading { flex-shrink: 0; color: var(--muted); }
#reading .reading-notice { margin-top: 24px; margin-bottom: 24px; color: var(--muted); }
#search-dialog .search-excerpt { display: block; margin: 8px 0; color: var(--body); font-size: .875rem; line-height: 1.9; overflow-wrap: anywhere; }
#search-dialog .search-destination { display: block; color: var(--muted); font-size: .75rem; }
#search-dialog mark { background: #ead7a7; color: #30382e; padding: 0 1px; border-radius: 2px; }
#share-url { width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--line); color: var(--ink); background: var(--sky); font: .875rem var(--sans); }
.record-dialog { width: min(820px, calc(100% - 32px)); }
.record-detail-shell { position: relative; padding: 52px clamp(24px, 7vw, 74px) 64px; }
.record-detail-shell > h2 { margin: 0 40px 26px 0; font: 400 clamp(1.75rem, 5vw, 2.5rem)/1.45 var(--serif); text-wrap: balance; }
.record-detail-shell .full-meta { margin: 0 40px 8px 0; letter-spacing: .04em; }
.record-detail-body { color: var(--body); font: 1.0625rem/2 var(--serif); overflow-wrap: anywhere; }
.record-detail-body p { margin: 0 0 1.35em; white-space: pre-wrap; }
.record-detail-body h2,
.record-detail-body h3 { margin: 1.8em 0 .7em; color: var(--ink); font: 400 1.45rem/1.6 var(--serif); }
.record-detail-body ul { margin: 0 0 1.35em; padding-left: 1.4em; }
.record-detail-body li { margin: .45em 0; }
.record-detail-body pre { margin: 1.6em 0; padding: 20px; overflow: auto; border-radius: 3px; background: #21343c; color: #e2ebe8; font: .8125rem/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; }
.record-detail-body .record-quote { margin-left: 0; padding-left: 20px; border-left: 2px solid var(--copper); color: var(--ink); font-size: 1.16rem; }
body.night .record-detail-body pre { background: #12272c; }

#sea-arrival { padding-top: 66px; }
#sea-arrival .sea-description { margin-bottom: 24px; }
#sea-arrival .sea-preview { max-width: 560px; margin: 32px auto 38px; }
#sea-arrival .sea-preview blockquote { margin: 0; font: 1.4rem/1.9 var(--serif); text-wrap: pretty; }
#sea-arrival .sea-preview figcaption { margin-top: 14px; font-size: .75rem; }
#sea-arrival .sea-preview a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
body.night #reading .preview-frame { background: #283d39; }
body.night #reading .preview-fallback { color: var(--moss); }

@media (max-width: 600px) {
  main > .portrait-now { margin-top: 20px; margin-bottom: 24px; }
  #reading .reading-heading h2 { font-size: 1.35rem; }
  #reading #latest-record { margin-left: 0; font-size: .6875rem; }
  #reading .reading-tools-inner { gap: 0; }
  #reading #theme-filters { flex-basis: 100%; gap: 0 14px; }
  #reading .reading-guide { width: 100%; justify-content: space-between; gap: 14px; }
  #reading .month-picker select { max-width: 190px; }
  #reading #river-flow-content { margin-top: 22px; }
  #reading #river-flow-content .fragment { margin-bottom: 22px; }
  #reading #river-flow-content .fragment.work { margin-top: 30px; margin-bottom: 30px; }
  #reading #river-flow-content .month-marker { margin-top: 30px; margin-bottom: 16px; }
  #reading #river-flow-content .month-marker:first-child { margin-top: 0; }
  #reading #river-flow-content .month-marker + .fragment { margin-top: 0; }
  #reading .fragment h3 { font-size: 1.35rem; }
  #reading .fragment.work h3 { font-size: 1.5rem; }
  #reading .fragment.story-record h3 { font-size: 1.7rem; }
  #reading .fragment-body { font-size: 1rem; }
  #reading .fragment.story-record .fragment-body,
  #reading .fragment.whisper .fragment-body { font-size: 1.0625rem; }
  #reading .fragment-footer { gap: 0 18px; }
  #reading .preview-frame { aspect-ratio: 16 / 9; }
  #reading .preview-code { padding: 16px; font-size: 11px; }
  #reading .preview-code.sample-expanded { height: 310px; }
  #reading .reading-return:not([hidden]) { align-items: flex-start; flex-direction: column; gap: 0; }
  .record-detail-shell { padding: 48px 24px 40px; }
  .record-detail-body { font-size: 1rem; }
  #sea-arrival { padding-top: 50px; }
  #sea-arrival .sea-preview blockquote { font-size: 1.2rem; }
}
@media (pointer: coarse) {
  #reading .fragment.work .fragment-meta button { min-height: 44px; }
}