/* One appearance layer for every memory presentation.
   Layout files own coordinates, spans and orientation; this file owns text roles
   and the statistics component. Saved inline font choices inherit their role.
   Header specificity bridges the original preset selectors until their geometry
   is migrated to the shared column engine; no preset owns text/statistic styles. */
:root {
    --memory-body-size: 20px;
    --memory-body-leading: 32px;
    --memory-heading-font: var(--font-body);
    --memory-heading-size: 48px;
    --memory-heading-leading: 56px;
    --memory-subheading-size: 32px;
    --memory-subheading-leading: 40px;
    --memory-caption-size: 16px;
    --memory-caption-leading: 24px;
    --memory-component-gutter: 24px;
}

/* Photo descriptions have a quieter caption role in every canvas. Linking a
   manually written story to a photo does not turn it into an AI description. */
.gen-generated-photo-text-block {
    --memory-body-size:16px;
    --memory-body-leading:24px;
    --memory-heading-size:24px;
    --memory-heading-leading:32px;
    --memory-subheading-size:20px;
    --memory-subheading-leading:24px;
}
/* Body, including legacy context cards and timeline notes. */
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) :is(.gen-day-text,.ai-draft-timeline-copy,.context-block-card) {
    font-family:var(--font-memory-text)!important;
    font-size:var(--memory-body-size)!important;
    line-height:var(--memory-body-leading)!important;
    font-weight:400;
    letter-spacing:0;
    /* Geometry cannot interpolate between baseline positions. */
    transition-property:background-color,color,opacity!important;
}
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) :is(.gen-day-text,.ai-draft-timeline-copy,.context-block-card) :is(p,ul,ol) {
    font:inherit!important;
    margin:0 0 16px;
}
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) :is(.gen-day-text,.ai-draft-timeline-copy,.context-block-card) :is(h1,h2,h3,h4,h5,h6,.ai-draft-timeline-label) {
    font-family:var(--memory-heading-font)!important;
    font-weight:700!important;
    letter-spacing:0!important;
    margin:0 0 16px;
}
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) :is(.gen-day-text,.ai-draft-timeline-copy,.context-block-card) :is(h1,h2) {
    font-size:var(--memory-heading-size)!important;
    line-height:var(--memory-heading-leading)!important;
}
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) :is(.gen-day-text,.ai-draft-timeline-copy,.context-block-card) h3 {
    font-size:var(--memory-subheading-size)!important;
    line-height:var(--memory-subheading-leading)!important;
}
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) :is(.gen-day-text,.ai-draft-timeline-copy,.context-block-card) :is(h4,h5,h6,.ai-draft-timeline-label) {
    font-size:24px!important;
    line-height:32px!important;
}
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .gen-caption {
    font-family:var(--font-memory-text)!important;
    font-size:var(--memory-caption-size)!important;
    line-height:var(--memory-caption-leading)!important;
}
/* Inline styling in old saved content must not bypass the semantic type scale.
   Inheritance keeps a span inside a heading in the heading's font. */
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) :is(.gen-day-text,.ai-draft-timeline-copy,.context-block-card,.gen-caption,.gen-notes-text,.memory-chapter-copy > p) :is(span,font,div,b,strong,i,em,a,li,blockquote) {
    font-family:inherit!important;
}
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) :is(.gen-day-text,.ai-draft-timeline-copy,.context-block-card,.gen-caption,.gen-notes-text) :is(span:not(.ai-draft-timeline-label),font,div,b,strong,i,em,a,li,blockquote) {
    font-size:inherit!important;
    line-height:inherit!important;
}
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) :is(.gen-day-text,.ai-draft-timeline-copy,.context-block-card,.gen-caption,.gen-notes-text) :is(b,strong) { font-weight:700!important; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) :is(.gen-day-text,.ai-draft-timeline-copy,.context-block-card,.gen-caption,.gen-notes-text) :is(i,em) { font-style:italic!important; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) :is(.gen-day-text,.ai-draft-timeline-copy) > :last-child { margin-bottom:0; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .gen-generated-photo-text-block .gen-day-text :is(p,ul,ol,h1,h2,h3,h4,h5,h6) { margin:0 0 8px; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .gen-generated-photo-text-block .gen-day-text :is(h1,h2,h3,h4,h5,h6) { break-after:avoid; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .gen-generated-photo-text-block .gen-day-text :is(h4,h5,h6) { font-size:16px!important; line-height:24px!important; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .gen-generated-photo-text-block .gen-day-text > :last-child { margin-bottom:0; }
/* A caption keeps a readable measure even in an older, wider manual frame.
   Horizontal continuation uses bounded columns instead of a width cap. */
@media(min-width:769px) {
    :is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .gen-generated-photo-text-block > .gen-day-text { max-width:704px; }
    #memory-generated#memory-generated#memory-generated .is-horizontal-photobook > .gen-generated-photo-text-block > .gen-day-text { max-width:none; }
}

/* Source capsules are interface labels, not prose or emphasis. */
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) :is(.gen-day-text,.context-block-card,.ai-draft-timeline-copy) .context-block-sources a {
    font-family:var(--font-body)!important;
    font-size:13px!important;
    line-height:16px!important;
    font-weight:400!important;
    font-style:normal!important;
    letter-spacing:0!important;
}

/* Shared introduction and statistics. The outer header width remains owned by
   its presentation; its internal component is identical in every layout. */
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) :is(.memory-story-hero,.memory-hero) { container:memory-hero / inline-size; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-hero-content { padding-bottom:80px!important; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-hero-main {
    display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:0 var(--memory-component-gutter); align-items:start;
}
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-hero-copy { grid-column:1 / -1; min-width:0; padding:0; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-hero-content h1 {
    font-family:var(--font-display)!important; font-weight:var(--font-display-weight)!important;
    font-size:128px!important; line-height:128px!important; letter-spacing:0!important;
    margin:16px 0 24px; position:relative; left:-4px; overflow-wrap:anywhere;
}
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-hero-subtitle {
    font-family:var(--font-intro)!important; font-weight:700!important;
    font-size:40px!important; line-height:56px!important; letter-spacing:0; margin:0 0 24px;
}
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-hero-intro {
    display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:var(--memory-component-gutter); align-items:start; margin:0;
}
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-hero-intro > .memory-hero-meta { grid-column:span 2; margin:0; min-width:0; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-hero-intro > .memory-hero-notes { grid-column:span 6; margin:0; width:100%; max-width:none; min-width:0; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .gen-notes-text {
    font-family:var(--font-memory-text)!important; font-weight:400;
    font-size:32px!important; line-height:40px!important; letter-spacing:0;
}
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-author-info strong { font:700 14px/24px var(--font-body); }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-author-info span { font:400 12px/16px var(--font-body); }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-hero-stats {
    grid-column:1 / -1; display:grid!important; grid-template-columns:repeat(8,minmax(0,1fr));
    align-self:start; align-content:start; align-items:start; justify-self:stretch;
    gap:var(--memory-component-gutter); width:100%; min-width:0; margin:40px 0 0!important;
    padding:0; border:0; border-top:1px solid #d7d7d7!important;
}
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-stat {
    grid-column:span 2; display:flex; flex-direction:row; align-items:center; justify-content:flex-start;
    gap:8px; width:100%; min-width:0; margin:-1px 0 0; padding:4px 0;
    font:400 16px/24px var(--font-body); border:0; border-radius:0; border-top:1px solid #000; background:none;
}
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-stat strong {
    font:700 16px/24px var(--font-body); position:relative; top:1px; white-space:nowrap;
}
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-stat small { font:400 12px/16px var(--font-body); margin:0; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-stat.is-hidden-stat { display:none!important; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-stat-icon,
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-stat-icon .material-symbols-outlined {
    width:20px; min-width:20px; height:20px; font-size:20px; line-height:20px;
    font-variation-settings:'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-stat-collaborator-details { max-width:160px; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-stat-collaborator-add { width:20px; min-width:20px; height:20px; font-size:16px; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .gen-day-tag {
    font-family:var(--font-display); font-weight:var(--font-display-weight);
    font-size:60px!important; line-height:64px!important; letter-spacing:0; margin-right:8px;
}
/* Existing heading grids supply 12px of column gap: 8 + 12 = 20px. */
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .gen-day-header-copy:has(> .gen-day-tag) { min-height:64px; align-content:center; column-gap:12px; row-gap:8px; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) :is(.gen-day-date,.gen-day-location) { font:400 16px/24px var(--font-body)!important; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .gen-day-date { font-weight:700!important; }

@container memory-hero (max-width:680px) {
    :is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-hero-content h1 { font-size:80px!important; line-height:80px!important; }
    :is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-hero-intro { grid-template-columns:repeat(4,minmax(0,1fr)); }
    :is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-hero-intro > :is(.memory-hero-meta,.memory-hero-notes) { grid-column:1 / -1; }
    :is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-hero-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@container memory-hero (max-width:440px) {
    :is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-hero-content h1 { font-size:64px!important; line-height:64px!important; }
    :is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .gen-notes-text { font-size:18px!important; line-height:32px!important; }
    :is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-stat-collaborator-details { display:none; }
}
@container editorial-page (min-width:1648px) {
    :is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .is-unified-memory .memory-hero-content h1 { left:calc(-12.5% - 7px); }
}

/* Measurement uses the actual tokens. Thumbnail previews scale every role
   together; article/generated flags change composition, never the type scale. */
.editorial-text-probe { font:400 var(--memory-body-size)/var(--memory-body-leading) var(--font-memory-text); }
.editorial-text { font:400 var(--editorial-body-scale,2cqw)/1.6 var(--font-memory-text); }
:is(.editorial-text-probe,.editorial-text) .gen-day-text { font:inherit!important; }
:is(.editorial-text-probe,.editorial-text) :is(p,ul,ol) { font:inherit!important; margin:0 0 .8em!important; }
:is(.editorial-text-probe,.editorial-text) :is(h1,h2,h3,h4,h5,h6) {
    font-family:var(--memory-heading-font)!important; font-weight:700!important; letter-spacing:0!important;
}
:is(.editorial-text-probe,.editorial-text) :is(h1,h2) { font-size:2.4em!important; line-height:1.1666666667!important; margin:0 0 .3333333333em!important; }
:is(.editorial-text-probe,.editorial-text) h3 { font-size:1.6em!important; line-height:1.25!important; margin:0 0 .5em!important; }
:is(.editorial-text-probe,.editorial-text) :is(h4,h5,h6) { font-size:1.2em!important; line-height:1.3333333333!important; margin:0 0 .6666666667em!important; }
:is(.editorial-text-probe,.editorial-text) :is(span,font,div,b,strong,i,em,a,li) { font-family:inherit!important; }
:is(.editorial-text-probe,.editorial-text) :is(span,font,div,b,strong,i,em,a) { font-size:inherit!important; line-height:inherit!important; }
:is(.editorial-text-probe,.editorial-text) :is(b,strong) { font-weight:700!important; }
:is(.editorial-text-probe,.editorial-text) .gen-day-text > :last-child { margin-bottom:0!important; }
.editorial-preview[data-view=mobile] .editorial-text { font-size:12px; }

/* Chapter display titles are a separate role from article headings. */
#memory-generated .memory-chapter-copy h2 { font-family:var(--font-body); font-weight:700; font-size:clamp(48px,5vw,90px); line-height:1.05; }
#memory-generated .memory-chapter-copy > p { font:400 var(--memory-body-size)/var(--memory-body-leading) var(--font-memory-text); }
.editorial-chapter p { font-family:var(--font-memory-text); }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-stat-icon { display:flex; align-items:center; justify-content:center; flex-shrink:0; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-stat-icon .material-symbols-outlined { display:block; }
:is(#memory-generated,#memory-static):is(#memory-generated,#memory-static):is(#memory-generated,#memory-static) .memory-stat strong { display:block; }
@media(max-width:768px) { #memory-generated .memory-chapter-copy h2 { font-size:48px; } }
/* Intro/caption paragraphs and display-heading spans in older saved HTML. */
:is(#memory-generated,#memory-static) :is(.gen-notes-text,.gen-caption) :is(p,div,span,font) { font:inherit!important; }
:is(#memory-generated,#memory-static) :is(.memory-hero-content h1,.memory-hero-subtitle) :is(span,font) { font:inherit!important; }
#memory-generated .memory-chapter-copy > p { font:400 var(--memory-body-size)/var(--memory-body-leading) var(--font-memory-text)!important; }
:is(.editorial-text-probe,.editorial-text) .ai-draft-timeline-label {
    font-family:var(--memory-heading-font)!important; font-weight:700!important;
    font-size:1.2em!important; line-height:1.3333333333!important;
}