/* The address story: alternating photography connected by one fine gold thread. */
#about-page {
    --story-gold:#c3a17e;
    --story-cream:#e4d2bc;
    padding:0;
    background:#090908;
}
#about-page .about-story-header {
    display:grid; grid-template-columns:28px minmax(0,1fr) 32px; gap:10px;
    min-height:52px; max-width:1160px; padding:8px 14px; border-bottom:1px solid #c3a17e25;
    padding-top:max(8px,var(--tg-content-safe-area-inset-top,0px));
}
#about-page .about-brand-logo { display:block; }
#about-page .menu-brand-logo { display:block; width:28px; height:34px; object-fit:contain; }
#about-page .menu-brand-copy { justify-self:start; text-align:left; }
#about-page .menu-brand-name { font:400 18px/1.2 Jost,sans-serif; letter-spacing:.12em; }
#about-page .menu-brand-city { margin-top:2px; font:300 7px/1.3 Jost,sans-serif; letter-spacing:.15em; }
#about-page .about-back { justify-self:end; display:grid; place-items:center; width:32px; height:32px; color:var(--story-cream); }
#about-page .about-back svg { width:26px; height:20px; fill:none; stroke:currentColor; stroke-width:1.2; }
#about-page .about-page-content { max-width:1160px; margin:0 auto; }
#about-page .about-history { overflow:hidden; }
#about-page .about-history-epigraph { position:absolute; z-index:4; top:14px; right:9%; width:44%; max-width:320px; margin:0; padding:0; text-align:right; color:#cbb299; font:400 20px/1.15 Caveat,cursive; text-shadow:0 1px 5px #000; }
#about-page .about-era-opening { padding-top:62px; }
#about-page .about-era-copy .about-story-closing { margin:18px 0 0; color:#c3a17e; font:400 22px/1.15 Caveat,cursive; }
#about-page .about-timeline { position:relative; }
#about-page .about-era {
    position:relative; isolation:isolate; display:grid; grid-template-columns:1fr 1fr; align-items:center;
    min-height:250px; margin:0; gap:0;
}
#about-page .about-era-copy { position:relative; z-index:2; padding:32px 18%; }
#about-page .is-text-right .about-era-copy { grid-column:2; padding:32px 18%; }
#about-page .about-era-year { display:block; margin:0 0 5px; color:var(--story-cream); font:300 42px/1.1 Jost,sans-serif; letter-spacing:0; }
#about-page .about-era-year::after { content:''; display:inline-block; vertical-align:middle; width:56px; height:1px; margin-left:16px; background:linear-gradient(90deg,#c3a17e80,transparent); }
#about-page .about-era h2 { margin:0; color:var(--story-cream); font:300 clamp(21px,2.65vw,30px)/1.15 Jost,sans-serif; }
#about-page .about-era-copy p { margin:14px 0 0; color:#b6b1aa; font:300 15px/1.5 Jost,sans-serif; }
#about-page .about-era figure { position:absolute; z-index:-1; inset:0 0 0 auto; width:56%; margin:0; order:initial; }
#about-page .is-text-right figure { left:0; right:auto; }
#about-page .about-era figure::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#090908,transparent 35%),linear-gradient(180deg,#09090825,transparent 25%,transparent 75%,#09090855); }
#about-page .is-text-right figure::after { background:linear-gradient(270deg,#090908,transparent 35%),linear-gradient(180deg,#09090825,transparent 25%,transparent 75%,#09090855); }
#about-page .about-era img { display:block; width:100%; height:100%; border-radius:0; object-fit:cover; filter:brightness(.8) saturate(.8); }
#about-page .about-timeline-thread { position:absolute; z-index:3; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
#about-page .about-timeline-thread path { fill:none; stroke:var(--story-gold); stroke-width:1.25; opacity:.85; }
#about-page .about-timeline-thread circle { fill:#15120ecc; stroke:#d9b998; stroke-width:1.2; }
#about-page a:focus-visible { outline:2px solid var(--story-gold); outline-offset:4px; }
@media(max-width:700px) {
    #about-page .about-history-epigraph { top:12px; right:18px; width:42%; font-size:18px; }
    #about-page .about-era-opening { padding-top:72px; }
    #about-page .about-era-copy .about-story-closing { font-size:20px; }
    #about-page .about-era { min-height:230px; }
    #about-page .about-era-copy { padding:24px 20px 24px 20px; }
    #about-page .is-text-right .about-era-copy { padding:24px 20px 24px 20px; }
    #about-page .about-era-year { font-size:32px; }
    #about-page .about-era-year::after { width:24px; margin-left:9px; }
    #about-page .about-era h2 { font-size:21px; }
    #about-page .about-era-copy p { margin-top:10px; font-size:13px; line-height:1.45; }
}
@media(max-width:430px) {
    #about-page .about-era h2 { font-size:18px; }
    #about-page .about-era-copy p { font-size:12px; }
    #about-page .about-era-copy, #about-page .is-text-right .about-era-copy { padding:24px 17px; }
}

/* Leave a clear corridor for the route beside the final copy and signature. */
#about-page .about-era:last-child .about-era-copy { padding-left:max(32px,18%); }
@media(max-width:430px) {
    #about-page .about-era:last-child .about-era-copy { padding-left:30px; padding-right:14px; }
    #about-page .about-era-copy .about-story-closing { font-size:18px; }
}

/* The final photograph continues beneath the fixed navigation, without a blank tail. */
#about-page .about-era:last-child .about-era-copy { padding-bottom:calc(70px + env(safe-area-inset-bottom,0px)); }
@media(max-width:700px) {
    #about-page .about-era:last-child .about-era-copy { padding-bottom:calc(58px + env(safe-area-inset-bottom,0px)); }
}