/* Paine history: archival paper, purple ink and antique gold. */
.ph-timeline {
    --ph-offset: 0px;
    --ph-purple: #311662;
    --ph-bright-purple: #4e008e;
    --ph-gold: #cda177;
    --ph-paper: #f1e7d5;
    --ph-font: 'Montserrat', Arial, sans-serif;
    position: relative;
    background: var(--ph-purple);
    color: var(--ph-paper);
    font-family: var(--ph-font);
}
.admin-bar .ph-timeline { --ph-offset: 32px; }
.ph-timeline, .ph-timeline * { box-sizing: border-box; }
.ph-timeline :is(h1,h2,h3,h4,h5,h6,p,a,span,figcaption,blockquote,button) { font-family: var(--ph-font); }
.ph-full { width: var(--ph-viewport,100vw); max-width: none!important; margin-inline: calc(50% - var(--ph-viewport,100vw)/2); }
.ph-intro {
    position: relative;
    isolation: isolate;
    padding: clamp(5rem,11vw,10rem) max(7vw,1.25rem);
    text-align: center;
    color: var(--ph-hero-fg,var(--ph-paper));
    background: var(--ph-hero-bg,var(--ph-purple));
    min-height: var(--ph-hero-height,70vh);
    overflow: hidden;
    border-top: 6px solid var(--ph-gold);
}
.ph-intro::before {
    content: '';
    position: absolute;
    inset: 22px;
    z-index: 3;
    border: 2px solid var(--ph-gold);
    outline: 1px solid color-mix(in srgb,var(--ph-gold) 70%,transparent);
    outline-offset: 5px;
    pointer-events: none;
}
.ph-intro::after, .ph-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: var(--ph-grain,.22);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23887868' opacity='.4' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.ph-intro > * { position: relative; z-index: 2; }
.ph-intro h2 {
    max-width: 1050px;
    margin: 1.7rem auto 2rem;
    color: inherit;
    font-size: clamp(2.7rem,6.6vw,6.8rem);
    line-height: 1.06;
    letter-spacing: -.055em;
    font-weight: 800;
    text-wrap: balance;
}
.ph-intro > p:not(.ph-eyebrow) { max-width: 42rem; margin: 0 auto 2rem; line-height: 1.9; font-weight: 400; }
.ph-timeline a { color: inherit; }
.ph-eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; font-weight: 700; line-height: 1.8; }
.ph-intro .ph-eyebrow { color: var(--ph-gold); }
.ph-intro a { display: inline-block; margin-top: 1.5rem; padding-bottom: .6rem; border-bottom: 1px solid var(--ph-gold); text-decoration: none; text-transform: uppercase; font-size: .72rem; font-weight: 600; letter-spacing: .16em; }
.ph-nav {
    position: sticky; top: var(--ph-offset); z-index: 20;
    background: var(--ph-nav-bg,#311662); color: var(--ph-nav-fg,var(--ph-paper));
    border-block: 1px solid color-mix(in srgb,var(--ph-gold) 35%,transparent);
    box-shadow: 0 7px 20px #1608281a;
    font-size: .78rem;
}
.ph-eras, .ph-years {
    display: flex; align-items: center; gap: .75rem; overflow-x: auto;
    padding: .65rem max(3vw,1rem); scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb,var(--ph-gold) 45%,transparent) transparent;
}
.ph-eras { border-bottom: 1px solid color-mix(in srgb,var(--ph-gold) 18%,transparent); }
.ph-nav span { flex-shrink: 0; min-width: 3.5rem; font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ph-gold); }
.ph-nav a { position: relative; flex-shrink: 0; text-decoration: none; font-weight: 500; }
.ph-eras a {
    min-height: 44px; display: inline-flex; align-items: center;
    padding: .75rem 1rem; border: 1px solid transparent;
    font-size: .72rem; letter-spacing: .045em; border-radius: 3px 3px 0 0;
}
.ph-eras a::after { content: ''; position: absolute; inset: auto 1rem 0; height: 2px; background: transparent; }
.ph-eras a:hover { background: color-mix(in srgb,var(--ph-gold) 8%,transparent); }
.ph-eras a[aria-current] { color: var(--ph-gold); background: color-mix(in srgb,var(--ph-gold) 10%,transparent); border-color: color-mix(in srgb,var(--ph-gold) 25%,transparent); }
.ph-eras a[aria-current]::after { background: var(--ph-gold); }
.ph-years { gap: 0; padding-top: .5rem; padding-bottom: .75rem; }
.ph-years a { min-width: 70px; min-height: 44px; padding: .2rem 1rem 1.3rem; text-align: center; font-variant-numeric: tabular-nums; }
.ph-years a::before { content: ''; position: absolute; bottom: 7px; left: 0; right: 0; height: 1px; background: color-mix(in srgb,var(--ph-gold) 30%,transparent); }
.ph-years a::after { content: ''; position: absolute; bottom: 4px; left: calc(50% - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--ph-nav-bg,#311662); border: 1px solid var(--ph-gold); }
.ph-years a:hover, .ph-years a[aria-current] { color: var(--ph-gold); }
.ph-years a[aria-current] { font-weight: 700; }
.ph-years a[aria-current]::after { background: var(--ph-gold); box-shadow: 0 0 0 4px color-mix(in srgb,var(--ph-gold) 18%,transparent); }
.ph-timeline a:focus-visible { outline: 3px solid var(--ph-gold); outline-offset: 3px; }
.ph-section { isolation: isolate; position: relative; background: var(--ph-bg); color: var(--ph-fg); scroll-margin-top: calc(var(--ph-offset) + var(--ph-nav-height,130px)); overflow: hidden; min-height: 75vh; padding: clamp(5rem,10vw,10rem) max(7vw,1.25rem); }
.ph-section:focus-visible { outline: 3px solid currentColor; outline-offset: -5px; }
.ph-inner { position: relative; z-index: 2; max-width: 1200px; margin: auto; display: grid; grid-template-columns: 1fr 2fr; gap: clamp(2rem,6vw,6rem); }
.ph-date { border-top: 2px solid var(--ph-gold); padding-top: 1.2rem; }
.ph-date p { margin: 0 0 1rem; }
.ph-date .ph-eyebrow { font-size: .66rem; }
.ph-year { font-size: clamp(3.5rem,7.5vw,7.5rem); font-weight: 800; line-height: 1; letter-spacing: -.07em; }
.ph-date p:not(.ph-year):not(.ph-eyebrow) { font-size: .78rem; line-height: 1.6; font-weight: 500; }
.ph-story { min-width: 0; }
.ph-story h2 { font-size: clamp(1.9rem,3.4vw,3.6rem); line-height: 1.18; font-weight: 700; letter-spacing: -.045em; margin: 0 0 2rem; color: inherit; text-wrap: balance; }
.ph-content { font-size: clamp(.95rem,1.13vw,1.13rem); line-height: 1.95; overflow-wrap: anywhere; }
.ph-content :is(h2,h3,h4,h5,h6) { color: inherit; font-weight: 700; }
.ph-story img, .ph-story video, .ph-story iframe { max-width: 100%; }
.ph-story img, .ph-story video { height: auto; }
.ph-story img { filter: sepia(var(--ph-vintage,.55)) saturate(calc(1 - var(--ph-vintage,.55) * .5)) contrast(calc(1 - var(--ph-vintage,.55) * .1)); border: var(--ph-photo-border,7px) solid var(--ph-paper); }
.ph-story > .wp-post-image { width: 100%; margin-bottom: 2rem; }
.ph-content figure { margin: 2rem 0; }
.ph-content figcaption { font-size: .73rem; line-height: 1.7; color: inherit; opacity: .85; padding-top: .65rem; }
.ph-content .alignfull, .ph-content .alignwide { width: 100%; margin-inline: 0; }
.ph-backdrop { position: absolute; inset: calc(-1 * var(--ph-bleed,0px)) 0; z-index: 0; pointer-events: none; }
.ph-backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(var(--ph-vintage,.55)) saturate(calc(1 - var(--ph-vintage,.55) * .5)) contrast(calc(1 - var(--ph-vintage,.55) * .1)); }
.ph-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#31166238,#31166208), rgba(20,8,36,var(--ph-overlay)); }
.ph-parallax { will-change: transform; }
/* The shared opaque color straddles the boundary, covering both photographs
   and grain. Each half fades out into its own section without an exposed seam. */
.ph-blend::after {
    content: ''; position: absolute; inset: auto 0 0;
    height: min(50%,calc(var(--ph-gradient-length,240px) / 2));
    z-index: 1; pointer-events: none;
    background:
        linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--ph-next) 10%,transparent) 25%,color-mix(in srgb,var(--ph-next) 50%,transparent) 50%,color-mix(in srgb,var(--ph-next) 90%,transparent) 75%,var(--ph-next) calc(100% - 2px),var(--ph-next) 100%),
        linear-gradient(to bottom,transparent 0%,var(--ph-gradient-start,transparent) 35%,transparent 100%);
}
.ph-incoming-blend {
    position: absolute; inset: 0 0 auto; display: block;
    height: min(50%,calc(var(--ph-incoming-length,240px) / 2));
    z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom,var(--ph-incoming-color) 0px,var(--ph-incoming-color) 2px,color-mix(in srgb,var(--ph-incoming-color) 90%,transparent) 25%,color-mix(in srgb,var(--ph-incoming-color) 50%,transparent) 50%,color-mix(in srgb,var(--ph-incoming-color) 10%,transparent) 75%,transparent 100%);
}
.ph-incoming-blend[hidden], .ph-section:last-of-type.ph-blend::after { display: none; }
.ph-center .ph-inner, .ph-wide .ph-inner { display: block; }
.ph-center .ph-inner { max-width: 860px; text-align: center; }
.ph-center .ph-date { width: fit-content; max-width: 100%; min-width: 180px; margin-inline: auto; }
.ph-wide .ph-date, .ph-center .ph-date { margin-bottom: 3rem; }
.ph-section blockquote { border-block: 1px solid var(--ph-gold); border-left: none; padding: 1.5rem 0; margin: 2rem 0; font-size: 1.2em; line-height: 1.65; font-weight: 500; font-style: italic; }
@media(max-width:782px) {
    .admin-bar .ph-timeline { --ph-offset: 46px; }
    .ph-inner { grid-template-columns: 1fr; }
    .ph-section { min-height: 0; }
    .ph-year { font-size: 4rem; }
    .ph-eras a { padding-inline: .65rem; }.ph-years a { min-width: 60px; }
    .ph-center .ph-inner { text-align: left; }
    .ph-center .ph-date { margin-inline: 0; }
    .ph-intro::before { inset: 12px; outline-offset: 3px; }
    .ph-parallax { will-change: auto; }
}
@media(max-width:600px) { .admin-bar .ph-timeline { --ph-offset: 0px; } }
@media(prefers-reduced-motion:reduce) { .ph-timeline * { scroll-behavior: auto!important; transition: none!important; }.ph-parallax { will-change: auto; } }

.ph-intro > .ph-backdrop { position: absolute; z-index: 0; }
.ph-intro-copy { max-width: 44rem; margin: 0 auto 2rem; line-height: 1.9; }
.ph-intro-copy img, .ph-intro-copy video { max-width: 100%; height: auto; }
.ph-no-frame::before { display: none; }
.ph-progress { position: sticky; top: calc(var(--ph-offset) + var(--ph-nav-height,130px) + 22px); height: 0; width: 24px; margin-left: 18px; z-index: 25; pointer-events: none; color: var(--ph-line-color,var(--ph-gold)); }
.ph-progress-track { height: min(42vh,360px); width: var(--ph-line-width,3px); position: relative; background: color-mix(in srgb,var(--ph-line-track,var(--ph-gold)) 25%,transparent); }
.ph-progress-fill { display: block; width: 100%; height: 100%; background: var(--ph-line-color,var(--ph-gold)); transform: scaleY(var(--ph-progress,0)); transform-origin: top; }
.ph-progress-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--ph-line-color,var(--ph-gold)); top: calc(var(--ph-progress,0) * 100%); left: 50%; transform: translate(-50%,-50%); }
.ph-progress-year { display: block; font-size: 10px; font-weight: 700; writing-mode: vertical-rl; padding-top: 16px; letter-spacing: .12em; }
@media(max-width:782px) { .ph-progress { margin-left: 10px; width: 12px; }.ph-section { padding-inline: max(40px,7vw) max(20px,5vw); } }

/* At maximum strength, a clipped fixed layer keeps the full photograph in view. */
.ph-pinned { clip-path: inset(0); }
.ph-pinned > .ph-backdrop { position: fixed; inset: 0; height: 100vh; }

.ph-joined .ph-section.ph-blend::after, .ph-joined .ph-incoming-blend { display: none; }
.ph-join-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ph-join {
    position: absolute; left: 0; right: 0; pointer-events: none;
    background:
        linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--ph-join-color) 50%,transparent) calc(var(--ph-join-center) * .5),var(--ph-join-color) calc(var(--ph-join-center) - 3px),var(--ph-join-color) calc(var(--ph-join-center) + 3px),color-mix(in srgb,var(--ph-join-color) 50%,transparent) calc(var(--ph-join-center) + (100% - var(--ph-join-center)) * .5),transparent 100%),
        linear-gradient(to bottom,transparent 0%,var(--ph-gradient-start,transparent) calc(var(--ph-join-center) * .35),transparent var(--ph-join-center));
}
.ph-media-collection { display: grid; gap: 2rem; margin-block: 2rem; }
.ph-content .ph-media-item { margin: 0; min-width: 0; }
.ph-media-item :is(img,video,audio) { display: block; width: 100%; max-width: 100%; }
.ph-media-file { display: inline-block; border: 1px solid currentColor; padding: .8rem 1rem; overflow-wrap: anywhere; }

.ph-media-collection { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
.ph-media-collection > .ph-media-item { grid-column: 1 / -1; }
.ph-media-collection > .ph-media-half { grid-column: auto; }
@media(max-width:600px) { .ph-media-collection { grid-template-columns: minmax(0,1fr); } }

.ph-story video { box-sizing: border-box; border: var(--ph-photo-border,7px) solid var(--ph-paper); }