/* v3.29 — The Enigma / photo presentation, across all three albums.
   Same typography foundation, distinct colors; shared horizontal virtual filmstrip. */
.personal-album .personal-main{max-width:1220px;padding-top:23px}
.personal-album .personal-title-area{padding:13px 4px 24px}
.personal-album .personal-title-area h1{
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(3.5rem,7vw,6.8rem);
  letter-spacing:.01em;
  line-height:1.13;
}
.personal-album .personal-kicker{
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-size:clamp(1.18rem,2.5vw,1.85rem);
  font-weight:400;
  letter-spacing:.04em;
  text-transform:none;
  margin:0;
}
.personal-album .personal-subtitle{
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-size:clamp(1.03rem,1.65vw,1.34rem);
  line-height:1.4;
  margin:6px 0 0;
}
/* Paula's page follows the reference: big title, small divider, two centered lines. */
.theme-daylight .personal-title-area{display:flex;flex-direction:column;align-items:center}
.theme-daylight .personal-title-area h1{order:0}
.theme-daylight .personal-title-area .album-decorative-rule{order:1}
.theme-daylight .personal-title-area .personal-kicker{order:2}
.theme-daylight .personal-title-area .personal-subtitle{order:3}
.theme-night .personal-title-area .personal-kicker{
  font:700 .81rem/1.5 system-ui,-apple-system,'Segoe UI',sans-serif;
  letter-spacing:.25em;text-transform:uppercase;margin:0 0 6px;
}
.album-decorative-rule{
  display:flex;align-items:center;justify-content:center;
  gap:15px;width:min(390px,74vw);
  margin:6px auto 10px;
  color:var(--accent,#c4a16e);
  line-height:1;
}
.album-decorative-rule::before,.album-decorative-rule::after{
  content:'';height:1px;flex:1;background:currentColor;opacity:.67;
}
.album-decorative-rule span{font:italic 1.8rem Georgia,serif;opacity:.88}
/* Controls on both sides of the prominent photograph, like the mockup. */
.album-feature-row{
  display:grid;grid-template-columns:52px minmax(0,1fr) 52px;
  gap:clamp(10px,1.4vw,22px);align-items:center;max-width:1040px;margin:0 auto;
}
.album-feature-row .personal-frame,.album-feature-row .photo-frame{width:100%;min-width:0;margin:0;}
.personal-album .personal-stage{max-width:1100px}
.personal-album .personal-frame{
  aspect-ratio: 4/2.45;
  padding:clamp(6px,.75vw,10px);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 17px 42px rgba(0,0,0,.42);
}
.personal-album .personal-picture{border-radius:8px}
.album-stage-arrow{
  width:50px;height:50px;display:grid;place-items:center;
  font:normal 2.5rem/1 Georgia,serif;
  border:1.5px solid var(--line,#c3a674);
  color:var(--ink,#f5dfb6);
  border-radius:50%;
  background:var(--button,#1e2b32);
  box-shadow:0 7px 22px rgba(0,0,0,.24);
  cursor:pointer;
  padding:0 0 4px;
  transition:transform .15s,filter .15s;
}
.album-stage-arrow:hover{transform:scale(1.07);filter:brightness(1.14)}
.album-stage-arrow:disabled{opacity:.4;cursor:default}
/* The horizontal filmstrip is scrollable/touch-friendly, with a virtual photo list. */
.personal-album .album-filmstrip,.family-page .album-filmstrip{
  display:flex;align-items:center;gap:7px;
  max-width:1090px;margin:18px auto 0;padding:8px 10px;
  border:1px solid var(--line,rgba(218,186,123,.6));
  border-radius:13px;
  background:var(--film-bg,rgba(5,18,30,.79));
  box-shadow:0 10px 30px rgba(0,0,0,.19);
}
.personal-album .album-filmstrip[hidden],.family-page .album-filmstrip[hidden]{display:none!important}
.filmstrip-viewport{
  min-width:0;flex:1;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--accent,#bfa36c) transparent;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}
.filmstrip-track{
  --film-thumb-width:112px;
  --film-thumb-gap:12px;
  position:relative;
  width:100%;height:80px;
}
.filmstrip-thumb{
  position:absolute;top:0;
  width:var(--film-thumb-width);
  height:77px;overflow:hidden;padding:2px;
  border-radius:7px;
  border:2px solid var(--line,rgba(238,202,151,.65));
  box-sizing:border-box;
  background:var(--button,#1d3342);
  cursor:pointer;
  opacity:.73;
  transition:opacity .15s,border-color .15s;
}
.filmstrip-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:3px}
.filmstrip-thumb:hover{opacity:1;border-color:var(--accent,#e7d0a6)}
.filmstrip-thumb.is-current{
  border:3px solid var(--accent,#e9c17a);
  opacity:1;
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset;
}
.filmstrip-arrow{
  font:normal 1.7rem Georgia,serif;
  flex:0 0 30px;
  border:0;background:transparent;
  color:var(--ink,#f4e6d0);
  cursor:pointer;
  padding:6px 4px;
}
.filmstrip-arrow:hover{color:var(--accent,#d6b27d)}
/* Space and controls adjusted to balance the new strip. */
.personal-album .personal-controls{margin:12px auto 0}
.personal-album .personal-note{margin:9px 0 6px}
.personal-album .full-album-button{margin:10px auto 17px}
/* Night: midnight filmstrip, brighter blue edges. */
.theme-night{--film-bg:rgba(3,17,31,.83)}
.theme-night .album-decorative-rule{color:#9abfd9}
.theme-night .filmstrip-thumb.is-current{--accent:#a0e5fb}
/* Paula: grass is the backdrop, olive controls and buttery sage accents. */
.theme-daylight{--film-bg:rgba(19,44,16,.83)}
.theme-daylight .album-decorative-rule{color:#e9edc5}
.theme-daylight .personal-title-area h1{font-size:clamp(3.6rem,7vw,6.8rem)}
.theme-daylight .personal-kicker{color:#f5f2d0}
.theme-daylight .album-stage-arrow{background:#324b25;border-color:#c1d296;color:#f5f2d0}
/* Grandparents: keep the vintage title carousel and leather, only elevate the gallery structure. */
.family-page .album-decorative-rule{color:#dbb783;margin:8px auto 7px}
.family-page .family-subtitle{
  font-size:clamp(1.17rem,2vw,1.48rem);
  font-style:italic;
  font-weight:400;
  letter-spacing:.1em;
  margin-top:4px;
}
.family-page .album-area{max-width:1070px}
.family-page .album-feature-row{max-width:1030px}
.family-page .album-stage-arrow{
  --line:#e1bd89;--ink:#f3dcb9;--button:#4b2d1c;
  background:rgba(56,29,16,.86);
}
.family-page .album-filmstrip{
  --line:rgba(230,191,132,.65);
  --accent:#f4d39d;
  --ink:#eed5ae;
  --button:#563720;
  --film-bg:rgba(48,26,13,.86);
  max-width:990px;
}
.family-page .album-controls{margin:12px auto 8px}
.family-page .album-note{margin:10px auto 8px}
/* Small screens keep the arrows within reach and the filmstrip swipeable. */
@media(max-width:640px){
  .album-feature-row{grid-template-columns:34px minmax(0,1fr) 34px;gap:5px;}
  .album-stage-arrow{width:34px;height:42px;font-size:1.95rem;border-radius:50%;}
  .filmstrip-track{--film-thumb-width:82px;--film-thumb-gap:9px;height:62px}
  .filmstrip-thumb{height:60px}
  .filmstrip-arrow{flex-basis:22px;font-size:1.4rem;padding:5px 0}
  .personal-album .album-filmstrip,.family-page .album-filmstrip{padding:7px 5px;gap:4px;margin-top:12px}
  .personal-album .personal-frame,.family-page .photo-frame{aspect-ratio:4/3.05}
  .personal-album .personal-title-area h1{font-size:clamp(2.8rem,11vw,4.4rem)}
  .personal-album .personal-kicker{font-size:1.08rem}
  .personal-album .personal-subtitle{font-size:.99rem}
  .album-decorative-rule{width:min(270px,73vw)}
}
@media(prefers-reduced-motion:reduce){.album-stage-arrow,.filmstrip-thumb{transition:none}}