@charset "UTF-8";

/* Local design draft: mineral light, stable contrast, content-led sizing. */
:root {
  --paper: #c7ccc0;
  --ink: #26382f;
  --muted: #405043;
  --rule: #abb3a3;
  --control-rule: #64735b;
  --soft: #c9d0bf;
  --accent: #5e4430;
  --panel-corners: 1.75rem 1.4rem 1.75rem 1.4rem / 1.4rem 1.75rem 1.4rem 1.75rem;
  --control-corners: .9rem .75rem .9rem .75rem / .75rem .9rem .75rem .9rem;
  --edge-light: rgb(238 232 217 / .38);
  --edge-shade: rgb(38 56 47 / .08);
  --gutter: clamp(20px,4vw,40px);
  --space: clamp(32px,4vw,48px);
  --gap: clamp(24px,3vw,36px);
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scrollbar-gutter:stable both-edges; scroll-behavior: smooth; scroll-padding-top: 2rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow-wrap: break-word;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a, input, textarea { touch-action: manipulation; }
button { color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}
::selection { background: #b4c2a4; color: #17281e; }
p, h1, h2, h3, figure { margin: 0; }

/* All light colors stay inside a measured, muted palette. Static before JS. */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--paper);
  transition: background-color .75s ease;
}
.atmosphere-wash {
  opacity: 1;
  position: absolute;
  inset: -22%;
  background:
    radial-gradient(ellipse at 72% 24%, rgb(191 203 208 / .8), rgb(191 203 208 / 0) 48%),
    radial-gradient(ellipse at 18% 72%, rgb(210 192 173 / .75), rgb(210 192 173 / 0) 45%),
    radial-gradient(ellipse at 56% 82%, rgb(206 194 207 / .65), rgb(206 194 207 / 0) 43%),
    radial-gradient(ellipse at 38% 30%, rgb(189 202 180 / .85), rgb(189 202 180 / 0) 52%);
}
/* V4's compact light, now truly circular; all layers share its center. */
.light-lens { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .light-lens {
    display: block; position: absolute; left: 0; top: 0;
    width: clamp(20rem, 45vmin, 34rem); aspect-ratio: 1;
    pointer-events: none; contain: layout paint;
    opacity: 0;
    transform: translate3d(var(--light-x, -1000px), var(--light-y, -1000px), 0) translate(-50%, -50%);
    background:
      radial-gradient(circle closest-side at 50% 50%, rgb(238 232 217 / .52) 0%, rgb(238 232 217 / .34) 24%, rgb(238 232 217 / .12) 54%, rgb(238 232 217 / .015) 80%, rgb(238 232 217 / 0) 100%),
      radial-gradient(circle closest-side at 50% 50%, rgb(211 228 226 / .22) 0%, rgb(211 228 226 / .11) 42%, rgb(211 228 226 / .015) 76%, rgb(211 228 226 / 0) 100%),
      radial-gradient(circle closest-side at 50% 50%, rgb(230 211 195 / .14) 0%, rgb(230 211 195 / .05) 48%, rgb(230 211 195 / 0) 100%);
    transition: opacity .3s ease;
  }
  .light-lens.is-lit { opacity: .88; }
  /* Position and letter illumination use the same eased point in JavaScript. */
  .light-lens.is-tracking { transition: opacity .3s ease; }
}

/* An opaque ink gradient, clipped to the real letters. Solid text is the fallback. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .type-lit {
      background-color: var(--type-base);
      background-image: radial-gradient(circle var(--type-radius) at var(--type-x) var(--type-y),
        var(--type-light) 0%, var(--type-light) 12%, var(--type-base) 84%);
      background-repeat: no-repeat;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
    [data-light-key]:not(.type-lit) { color:var(--type-base); -webkit-text-fill-color:var(--type-base); }
    .type-lit :is(em,.word-accent,[data-light-key]):not(.type-lit) { -webkit-text-fill-color:currentColor; }
    .type-lit::selection, .type-lit *::selection {
      background: #b4c2a4; color: #17281e; -webkit-text-fill-color: #17281e;
    }
  }
}
/* Screen-led composition. Text stays readable; only media uses remaining height. */
[hidden] { display:none !important; }
h1,h2,h3 { font:400 2.25rem/1.1 var(--serif); letter-spacing:-.035em; text-wrap:balance; }
h1 em,h2 em,.family-title em,.word-accent { color:var(--accent); font-weight:400; }
.word-accent { font-style:normal; }
.page-shell { width:min(44rem,calc(100% - 2 * var(--gutter))); margin-inline:auto; }
.skip-link { position:fixed; left:16px; top:12px; z-index:5; padding:12px; background:var(--ink); color:var(--paper); }
.skip-link:not(:focus) { clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap; padding:0; }
.preview-note { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 10px; padding:4px 10px; font-size:12px; line-height:1.5; color:var(--muted); border-bottom:1px solid var(--rule); }
.preview-note span+span::before { content:'·'; margin-right:10px; }
.site-header { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px; padding-block:24px 8px; }
.wordmark { font:clamp(36px,3vw,40px)/.95 var(--serif); letter-spacing:-.05em; }
.wordmark-second { display:block; margin-top:3px; font-size:.65em; font-style:italic; }
.site-header nav { display:flex; align-items:center; gap:24px; font-size:16px; }
.site-header nav a { display:inline-flex; gap:12px; align-items:center; min-height:44px; }
.nav-contact { border-bottom:1px solid var(--ink); }
.eyebrow { font-size:14px; line-height:1.5; letter-spacing:.07em; text-transform:uppercase; }
.intro { display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:8px 0 24px; }
.intro-copy { min-width:0; }
.intro h1 { font-size:clamp(36px,4.5vw,48px); line-height:1.06; margin:8px 0 0; max-width:none; }
.intro-details { font-size:16px; }
.preparation { color:var(--accent); }
.current-status { display:flex; align-items:center; gap:8px; margin-top:4px; color:var(--muted); font-size:15px; }
.status-line { display:none; }
.sweetie-portrait { --caption-height:28px; --caption-compact-height:48px; --caption-breakpoint:190px; display:flex; flex-direction:column; align-self:center; width:min(100%,var(--portrait-width,260px)); gap:8px; min-width:0; min-height:0; height:auto; }
/* One reserved frame. Selected media never participates in document sizing. */
.portrait-image { position:relative; flex:none; width:100%; aspect-ratio:3/4; min-height:0; border-radius:42% 42% 18px 18px / 13% 13% 18px 18px; overflow:hidden; background:transparent; touch-action:pan-y pinch-zoom; cursor:grab; }
.gallery-surface { position:absolute; inset:0; }
.portrait-image img,.portrait-image video { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; object-position:var(--media-position,50% 50%); background:transparent; }
.portrait-image[data-kind=video] img,.portrait-image video { object-fit:cover; }
.portrait-image img { user-select:none; -webkit-user-drag:none; }
.portrait-image:focus-visible { outline:2px solid var(--ink); outline-offset:5px; }
.portrait-image.is-dragging { cursor:grabbing; }
.gallery-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; height:var(--caption-height); flex:none; font-size:13px; line-height:1.5; color:var(--muted); }
#gallery-hint { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#gallery-count { font-variant-numeric:tabular-nums; white-space:nowrap; }
.sweetie-portrait.is-compact .gallery-bar { height:var(--caption-compact-height); flex-direction:column; justify-content:center; gap:0; }
.sweetie-portrait.is-compact #gallery-hint { overflow:visible; text-overflow:clip; }
.sweetie-story { border-top:1px solid var(--rule); padding-top:24px; }
.sweetie-story,.character-copy,.family-chapter { display:block; }
.story-heading h2 { margin-top:12px; font-size:clamp(34px,4vw,42px); }
.story-origin { margin-top:12px; font:22px/1.5 var(--serif); }
.story-copy { margin-top:20px; }
.story-copy,.character-copy { min-width:0; font-size:18px; line-height:1.65; }
.story-copy p,.character-copy p,.hello-copy p { max-width:62ch; }
.story-copy p+p,.character-copy p+p { margin-top:16px; }
.sweetie-character { padding:16px 0 24px; }
.character-copy .story-note { margin-top:24px; font:italic 22px/1.5 var(--serif); }
.family-chapter { border-top:1px solid var(--rule); padding:24px 0; }
.story-invitation { font:22px/1.5 var(--serif); }
.family-section { min-width:0; margin-top:24px; }
.family-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; list-style:none; cursor:pointer; align-items:center; }
.family-summary::-webkit-details-marker { display:none; }
.family-title { font:clamp(34px,4vw,42px)/1.1 var(--serif); letter-spacing:-.035em; }
.family-subtitle { display:block; font-size:16px; line-height:1.5; margin-top:8px; }
.family-toggle { flex:none; display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--control-rule); border-radius:50%; }
.family-section[open] .family-toggle svg { transform:rotate(180deg); }
.family-content { padding-top:24px; }
.family-parents,.family-grandparents { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.family-content figure { min-width:0; }
.family-photo { position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; border-radius:16px; }
.family-content img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; background:transparent; }
.family-grandparents .family-photo { aspect-ratio:4/3; }
.family-grandparents .family-photo img { transform:scale(1.10); }
.family-grandparents figure[data-id=F03] .family-photo img { object-position:50% 0%; }
.family-content figcaption { padding-top:10px; }
.family-name { font:22px/1.3 var(--serif); }
.family-relation { display:block; font-size:16px; line-height:1.5; margin-top:4px; color:var(--muted); }
.family-generation { margin-top:24px; border-top:1px solid var(--rule); padding-top:20px; }
.family-generation h3 { font-size:22px; margin-bottom:16px; }
.family-grandparents .family-name { font-size:20px; }
.hello { display:block; position:relative; padding:clamp(20px,4vw,28px); margin-top:8px; scroll-margin-top:16px; }
.hello::before { content:""; position:absolute; z-index:-1; inset:0; border-radius:var(--panel-corners); background:var(--soft); box-shadow:inset 1px 1px 0 var(--edge-light),inset -1px -1px 0 var(--edge-shade),0 12px 30px -22px rgb(38 56 47 / .14); }
.hello h2 { font-size:clamp(34px,4vw,42px); }
.hello h2 br { display:none; }
.hello-copy p { font-size:18px; line-height:1.5; margin-top:12px; }
.updates-form { min-width:0; margin-top:24px; }
.field label { display:block; font-size:16px; line-height:1.5; margin-bottom:4px; }
input[type=email],textarea { display:block; width:100%; border:0; border-bottom:1px solid var(--control-rule); border-radius:0; padding:8px 0; background:transparent; color:var(--ink); font-size:17px; line-height:1.5; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
input[type=email]:focus-visible,textarea:focus-visible { outline:none; border-bottom:2px solid var(--accent); }
textarea { min-height:76px; resize:vertical; max-height:240px; }
.optional { font-size:14px; color:var(--muted); }
.note-field { margin-top:12px; border-bottom:1px solid var(--rule); }
.note-field summary { display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; list-style:none; font-size:16px; }
.note-field summary::-webkit-details-marker { display:none; }
.note-mark { margin-left:auto; font-size:24px; line-height:1; }
.note-field[open] .note-mark { transform:rotate(45deg); }
.consent { display:flex; align-items:flex-start; gap:10px; margin-block:14px; font-size:15px; line-height:1.5; cursor:pointer; }
.consent input { flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--ink); }
.submit-button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:52px; padding:14px 16px; gap:12px; border:1px solid var(--ink); border-radius:var(--control-corners); background:var(--ink); color:var(--paper); font-size:17px; box-shadow:inset 0 1px 0 rgb(238 232 217 / .16); transition:background .15s ease; }
.submit-button:hover { background:#34483a; }
.form-note { margin-top:10px; font-size:14px; line-height:1.5; color:var(--muted); }
.form-result { margin-top:12px; font-size:16px; line-height:1.5; }
.form-result:empty { display:none; }
.site-footer { display:grid; grid-template-columns:1fr auto; gap:8px 16px; padding-block:24px; color:var(--muted); }
.closing-thought { grid-column:1/-1; font:italic 20px/1.5 var(--serif); }
.footer-thought { grid-column:1/-1; font:italic 18px/1.5 var(--serif); }
.footer-name { grid-column:1; grid-row:3; align-self:center; margin-top:8px; font:18px/1.5 var(--serif); color:var(--ink); }
.site-footer button { grid-column:2; grid-row:3; margin-top:8px; min-height:44px; padding:4px 0; background:none; border:0; border-bottom:1px solid var(--rule); font-size:14px; color:inherit; }
dialog { width:min(34rem,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:clamp(20px,3vw,32px); background:var(--paper); color:var(--ink); border:1px solid var(--rule); border-radius:var(--panel-corners); box-shadow:inset 1px 1px 0 var(--edge-light),inset -1px -1px 0 var(--edge-shade),0 24px 64px -24px rgb(38 56 47 / .24); }
dialog::backdrop { background:rgb(21 35 27 / .55); }
.dialog-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.dialog-close { flex:none; min-width:44px; min-height:44px; padding:6px; border:0; background:transparent; font:1.875rem/1 var(--serif); }
dialog h2 { font-size:clamp(2rem,3.5vw,2.75rem); line-height:1.15; margin:16px 0; }
dialog>p { margin-bottom:20px; color:var(--muted); font-size:1rem; line-height:1.7; }
dialog .submit-button { margin-top:24px; }
.no-script { max-width:50ch; margin:20px auto; padding:20px; font-size:1rem; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@supports (corner-shape:superellipse(1.35)) {
  .hello::before,dialog,.submit-button { corner-shape:superellipse(1.35); }
  .portrait-image { corner-shape:round round superellipse(1.35) superellipse(1.35); }
}
/* One center axis at every width, including all labels and disclosure groups. */
  .page-shell { text-align:center; }
  .intro-details,.current-status { justify-content:center; }
  .current-status { display:flex; }
  .gallery-bar { justify-content:center; gap:12px; }
  .story-copy p,.character-copy p,.hello-copy p { margin-inline:auto; }
  .family-summary { flex-direction:column; gap:12px; }
  .note-field summary { position:relative; justify-content:center; padding-inline:26px; }
  .note-mark { position:absolute; right:0; margin-left:0; }
  input[type=email],textarea { text-align:center; }
  .consent { width:fit-content; max-width:100%; min-height:44px; margin-inline:auto; flex-direction:row; align-items:flex-start; justify-content:center; gap:10px; }
  .consent > span { min-width:0; text-align:left; }
  .consent input { flex:0 0 20px; margin-top:.12em; }
  .submit-button { position:relative; justify-content:center; padding-inline:40px; }
  .submit-button>[aria-hidden=true] { position:absolute; right:16px; }
  .site-footer { display:flex; flex-direction:column; align-items:center; gap:12px; }
@media (max-width:32.49rem) {
  .current-status { font-size:15px; }
  .status-line { display:none; }
  .character-copy .story-note { font-size:20px; }
}
@media (max-width:22rem) {
  .updates-form { margin-top:16px; }
  .hello-copy p { margin-top:8px; }
  .consent { margin-block:12px; }
  .intro h1 { font-size:36px; }
  .site-header nav { font-size:15px; }
  .family-title { font-size:32px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } }
@media (forced-colors:active) { .atmosphere { display:none; } .type-lit,[data-light-key] { background:none !important; color:CanvasText !important; -webkit-text-fill-color:CanvasText !important; } }
@media print { .atmosphere { display:none; } .type-lit { background:none !important; color:var(--type-base) !important; -webkit-text-fill-color:var(--type-base) !important; } }

/* Final-copy preview: founder-requested hairlines; retained V4 material. */
.site-header { border-top:1px solid var(--rule); }
.intro-copy > .eyebrow::after { content:""; display:block; width:min(100%,18rem); height:1px; margin:8px auto 0; background:var(--rule); }
.hello-copy > p:first-child { margin-top:0; }
/* Retain the saved heading offset while keeping the next line clear. */
@media (min-width:641px) { .current-status { margin-top:20px; } }

/* Approved launch privacy link; retained centered footer. */
.privacy-link { display:inline-block; min-height:44px; padding:10px 4px; font-size:15px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.privacy-copy { max-width:62ch; margin-inline:auto; padding-block:24px 40px; font-size:18px; line-height:1.65; text-align:left; }
.privacy-copy h1 { margin-bottom:24px; text-align:center; }
.privacy-copy p+p { margin-top:20px; }
.privacy-copy a { text-decoration:underline; text-underline-offset:3px; }

/* Founder header refinement: saved optical size, one shared interval, two quiet rules. */
.site-header { --signature-gap:16px; position:relative; border-top:0; padding-block:calc(var(--signature-gap) + 1px) var(--signature-gap); }
.site-header::before,.intro-copy > .eyebrow::after { content:""; height:1px; background:var(--rule); clip-path:polygon(0 50%,18% 8%,32% 0,68% 0,82% 8%,100% 50%,82% 92%,68% 100%,32% 100%,18% 92%); -webkit-mask-image:linear-gradient(to right,transparent,#000 30%,#000 70%,transparent); mask-image:linear-gradient(to right,transparent,#000 30%,#000 70%,transparent); }
.site-header::before { position:absolute; top:0; inset-inline:0; }
.wordmark { font-size:clamp(44.1217543px,3.676812858vw,49.02417145px); translate:none!important; scale:1!important; }
.wordmark-second { margin-top:3.676812858px; }
.intro { padding-top:0; }
.intro-copy > .eyebrow { --signature-gap:16px; margin:0; display:flex; flex-direction:column; align-items:center; gap:var(--signature-gap); translate:none!important; }
.intro-copy > .eyebrow::after { flex:none; margin:0 auto; }
.signature-label { display:block; }
@media(forced-colors:active) { .site-header::before,.intro-copy > .eyebrow::after { background:CanvasText; -webkit-mask-image:none; mask-image:none; } }

/* One divider language across content, form fields and the privacy page. */
:root { --rule-taper-shape:polygon(0 50%,18% 8%,32% 0,68% 0,82% 8%,100% 50%,82% 92%,68% 100%,32% 100%,18% 92%); --rule-fade:linear-gradient(to right,transparent,#000 30%,#000 70%,transparent); }
.site-header::before,.intro-copy > .eyebrow::after,.privacy-page .site-header::after,.sweetie-story::before,.family-chapter::before,.family-generation::before,.updates-form > .field::after,.note-field[open]::after,.note-field:not([open]) > summary::after { content:""; height:1px; background:var(--rule); clip-path:var(--rule-taper-shape); -webkit-mask-image:var(--rule-fade); mask-image:var(--rule-fade); pointer-events:none; }
.sweetie-story,.family-chapter,.family-generation { position:relative; border-top-color:transparent; }
.sweetie-story::before,.family-chapter::before,.family-generation::before { position:absolute; inset-inline:0; top:-1px; }
.updates-form > .field,.note-field,.note-field > summary { position:relative; }
.updates-form > .field input[type=email],.note-field textarea { border-bottom:1px solid transparent; }
.note-field { border-bottom-color:transparent; }
.updates-form > .field::after,.note-field[open]::after,.note-field:not([open]) > summary::after { position:absolute; inset-inline:0; bottom:0; }
.updates-form > .field::after,.note-field[open]::after { background:var(--control-rule); }
.updates-form > .field:focus-within::after,.note-field[open]:focus-within::after,.note-field:not([open]):focus-within > summary::after { height:2px; background:var(--accent); }
.privacy-page .site-header { padding-bottom:calc(var(--signature-gap) + 1px); }
.privacy-page .site-header::after { position:absolute; bottom:0; left:50%; translate:-50% 0; width:min(100%,18rem); }
.privacy-copy { max-width:58ch; text-align:center; }
.privacy-copy p { text-wrap:pretty; }
@media(forced-colors:active) { .site-header::before,.intro-copy > .eyebrow::after,.privacy-page .site-header::after,.sweetie-story::before,.family-chapter::before,.family-generation::before,.updates-form > .field::after,.note-field[open]::after,.note-field:not([open]) > summary::after { background:CanvasText; -webkit-mask-image:none; mask-image:none; clip-path:none; } }

/* Bounded reading chapters and a real gallery pause, in retained V4 material. */
:root { --chapter-space:24px; --swipe-accent:#2a5450; }
html,body { overscroll-behavior-y:none; }
html.gallery-page-locked { overflow-y:hidden; }
.page-shell :is(img,video) { -webkit-touch-callout:none; -webkit-user-drag:none; user-select:none; -webkit-user-select:none; }
.signature-bar { --signature-gap:12px; position:sticky; top:calc(-1px - var(--signature-height,0px)); transform:translateY(var(--signature-reveal,0px)); z-index:4; isolation:isolate; flex-direction:column; gap:var(--signature-gap); margin-top:16px; padding-bottom:0; }
.signature-bar > .eyebrow { --signature-gap:12px; display:flex; flex-direction:column; align-items:center; gap:var(--signature-gap); translate:none!important; }
.signature-bar > .eyebrow::after { content:""; display:block; height:1px; width:min(100%,18rem); margin:0 auto; background:var(--rule); clip-path:var(--rule-taper-shape); -webkit-mask-image:var(--rule-fade); mask-image:var(--rule-fade); }
.intro.hero-chapter { display:block; position:relative; padding:0; }
.hero-scene { position:relative; display:flex; flex-direction:column; align-items:center; gap:0; padding-block:0 12px; isolation:isolate; }
.is-motion-enabled .hero-scene { position:sticky; top:0; }
.is-motion-enabled .opening-track::after { content:""; display:block; height:var(--opening-travel,800px); }
.chapter-heading { position:sticky; top:var(--reading-top,0px); z-index:3; isolation:isolate; width:100%; padding-block:16px var(--chapter-space); }
.hero-scene > .chapter-heading { padding:0; margin:0; }
.is-motion-enabled .hero-scene > .chapter-heading { position:relative; }
.is-motion-enabled[data-phase="released"] .hero-scene > .chapter-heading { position:sticky; top:var(--reading-top,0px); }
/* The retained mineral wash stays visible until a real bar covers reading copy. */
.chapter-heading::after,.signature-bar::after { content:none; }
.chapter-heading.is-stuck::after,.signature-bar.is-returning::after { content:""; position:absolute; z-index:-1; top:0; left:50%; width:var(--reading-width,100%); transform:translateX(-50%); bottom:-32px; background:linear-gradient(var(--paper) 0 calc(100% - 32px),transparent); pointer-events:none; }
.headline-bar.is-stuck::after { top:-8px; }
.headline-bar h1 { font-size:clamp(36px,4.5vw,48px); line-height:1.06; max-width:none; margin:0; }
.sweetie-portrait { --caption-height:48px; --caption-compact-height:48px; --caption-breakpoint:0px; width:min(100%,var(--portrait-width,360px)); gap:8px; margin-bottom:12px; }
.portrait-zoom { flex:none; width:100%; aspect-ratio:3/4; transform-origin:50% 0%; transform:scale(var(--opening-scale,1)); }
.portrait-zoom > .portrait-image { height:100%; }
.is-motion-enabled .portrait-zoom { height:calc(var(--portrait-width) * 4 / 3 * var(--opening-scale,1)); aspect-ratio:auto; transform:none; }
.is-motion-enabled .portrait-zoom > .portrait-image { height:calc(var(--portrait-width) * 4 / 3); transform:scale(var(--opening-scale,1)); transform-origin:50% 0%!important; }
.gallery-bar,.sweetie-portrait.is-compact .gallery-bar { height:var(--caption-height); flex-direction:column; align-items:center; justify-content:center; gap:4px; }
#gallery-hint { color:var(--swipe-accent); font-size:18px; line-height:24px; font-weight:600; letter-spacing:.012em; overflow:visible; text-overflow:clip; }
#gallery-count { font-size:13px; line-height:16px; font-weight:400; color:var(--muted); }
.is-motion-enabled .intro-details { opacity:var(--details-opacity,1); transform:translateY(calc(4px * (1 - var(--details-opacity,1)))); }
.is-motion-enabled .gallery-bar { opacity:var(--cue-opacity,0); transition:opacity 180ms ease; }
.is-motion-enabled[data-phase="zoom"] .gallery-bar { opacity:0; transition:none; }
.gallery-bar,.sweetie-portrait.is-compact .gallery-bar { align-self:center; width:max(100%,220px); max-width:calc(var(--reading-width,100vw) - 2 * var(--gutter)); }
#gallery-hint { flex:0 0 24px; width:100%; text-align:center; transform-origin:50% 50%!important; }
#gallery-count { flex:0 0 16px; width:100%; text-align:center; }
.gallery-fullscreen-hint { display:none; }
.is-motion-enabled #gallery-hint { transform:scale(calc(.025 + .975 * var(--cue-opacity,0))); transition:transform 400ms cubic-bezier(.22,1,.36,1); }
.swipe-cue-arrives #gallery-hint { animation:swipe-light-start 1000ms linear 400ms 1; }
@keyframes swipe-light-start { 0% { filter:brightness(.86); } 22% { filter:brightness(1); } 43% { filter:brightness(.84); } 68%,100% { filter:brightness(1); } }
.intro-details { margin:0 0 12px; }
.current-status { margin-top:4px; }
.gallery-scroll-toggle { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; min-width:190px; max-width:100%; flex:none; padding:10px 16px; border:1px solid var(--control-rule); border-radius:var(--control-corners); color:var(--ink); background:rgb(238 232 217 / .14); box-shadow:inset 0 1px 0 var(--edge-light); font-size:15px; line-height:1.4; transition:background 160ms ease,border-color 160ms ease; }
.gallery-scroll-toggle:hover { background:rgb(238 232 217 / .32); }
.gallery-scroll-toggle:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.gallery-scroll-toggle { width:248px; }

.gallery-lock-icon { flex:none; }
.gallery-continue-arrow { display:inline-block; width:14px; flex:none; }

.story-chapter { padding-top:0; }
.story-eyebrow { padding-top:var(--chapter-space); }
.story-eyebrow em { font-style:italic; }
.story-heading h2 { margin-top:0; font-size:clamp(34px,4vw,42px); }
.story-chapter > .story-origin { margin-top:0; }
.story-chapter > .story-copy { margin-top:var(--chapter-space); }
.story-callout { padding-block:0 var(--chapter-space); }
.family-chapter { border-top:0; padding:0 0 var(--chapter-space); }
.family-chapter::before { display:none; }
.family-section { margin:0; }
.family-summary { position:relative; padding-block:var(--chapter-space); }
.family-summary::before,.family-summary::after { content:""; position:absolute; left:0; right:0; height:1px; background:var(--rule); clip-path:var(--rule-taper-shape); -webkit-mask-image:var(--rule-fade); mask-image:var(--rule-fade); pointer-events:none; }
.family-summary::before { top:0; }
.family-summary::after { bottom:0; }
.family-content { padding-top:var(--chapter-space); }
.family-grandparents .family-photo { aspect-ratio:4/5; }
.family-grandparents .family-name { font-size:22px; }
.family-content figcaption { min-height:72px; padding-top:12px; }
.family-grandparents .family-relation { max-width:14ch; margin-inline:auto; text-wrap:balance; }
/* Presentation crops omit duplicate burned-in parent labels; originals stay intact. */
.family-parents figure[data-id=F02] .family-photo img { transform:scale(1.10); transform-origin:50% 0%; }
.family-parents figure[data-id=F01] .family-photo img { transform:scale(2.05); transform-origin:100% 0%; }
.is-motion-enabled .hero-scene { min-height:calc(var(--opening-height,100svh) - var(--opening-inset,0px)); justify-content:center; }
@media(max-width:640px) { .light-lens { width:min(100vw,26rem); } .light-lens.is-touch.is-lit { opacity:.95; } }
@media(min-width:641px) { .sweetie-portrait { --portrait-width:420px; --caption-height:72px; --caption-compact-height:72px; } .gallery-fullscreen-hint { display:block; flex:0 0 24px; min-height:24px; padding:0 8px; border:0; background:transparent; color:var(--muted); font-size:14px; line-height:24px; text-align:center; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } .gallery-fullscreen-hint:hover { color:var(--ink); } }
@media(prefers-reduced-motion:reduce) { .portrait-zoom { transform:none; } .intro-details,.gallery-bar { opacity:1!important; transform:none!important; } }
@media(prefers-reduced-motion:reduce) { #gallery-hint { transform:none!important; animation:none!important; filter:none!important; } }

/* Retain the saved source; neutralize its obsolete hero drag nudges in this layout. */
.hero-chapter :is([data-editor-id="diu-preparation"],[data-editor-id="diu-sweetie-portrait"],[data-editor-id="diu-intro-title"],[data-editor-id="diu-gallery-stage"],[data-editor-id="diu-gallery-hint"],[data-editor-id="diu-gallery-count"],[data-editor-id="diu-intro-details"]) { translate:none!important; }

/* Keep the tapered field affordance crisp at fractional device positions. */
.updates-form > .field::after,.note-field[open]::after { height:2px; }

/* Reserve the exit row while revealing only the actual held/flow control. */
.gallery-scroll-toggle { visibility:hidden; opacity:0; pointer-events:none; }
.is-controls-visible > .gallery-scroll-toggle { visibility:visible; opacity:1; pointer-events:auto; }

/* Stable touch opening: photo geometry is separate from the held viewport. */
html,body { overscroll-behavior:none; }
.touch-opening .hero-scene { justify-content:flex-start; padding-bottom:16px; }
.touch-opening [data-editor-id="diu-intro"] { translate:none!important; scale:none!important; rotate:none!important; transform:none!important; }
.touch-gallery-held .signature-bar,
.touch-gallery-held main > :not(#hero),
.touch-gallery-held .site-footer { visibility:hidden; }
.touch-gallery-held .hero-scene { visibility:visible; }
.touch-gallery-held .portrait-image { touch-action:pinch-zoom; }
/* Saved preparation translation collapsed the two status baselines. */
[data-editor-id="diu-preparation"] { translate:none!important; }
.current-status { margin-top:10px; }
.intro-details { margin-bottom:8px; }
.portrait-image:focus-visible { outline:none; }
.sweetie-portrait:has(.portrait-image:focus-visible) #gallery-hint { text-decoration:underline; text-underline-offset:4px; }

/* Keep the same V4 wash on the canvas and atmosphere, including screen edges.
   The overlay scrollbar below reserves no layout width during a hold. */
:root { --v4-wash:radial-gradient(ellipse at 72% 24%,rgb(191 203 208 / .8),rgb(191 203 208 / 0) 48%),radial-gradient(ellipse at 18% 72%,rgb(210 192 173 / .75),rgb(210 192 173 / 0) 45%),radial-gradient(ellipse at 56% 82%,rgb(206 194 207 / .65),rgb(206 194 207 / 0) 43%),radial-gradient(ellipse at 38% 30%,rgb(189 202 180 / .85),rgb(189 202 180 / 0) 52%); }
html { scrollbar-gutter:stable; background-color:var(--paper); background-image:var(--v4-wash); background-size:144vw 144vh; background-position:center; background-attachment:fixed; background-repeat:no-repeat; scrollbar-width:thin; scrollbar-color:var(--control-rule) transparent; }
html,body { overflow-x:clip; }
body { background:transparent; }
.atmosphere-wash { inset:auto; left:50%; top:50%; width:144vw; height:144vh; transform:translate(-50%,-50%); background:var(--v4-wash); }
::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:99px; background:var(--control-rule); background-clip:padding-box; }
::-webkit-scrollbar-corner { background:transparent; }
/* One semantic pair, with equal separation from the caption and exit. */
.sweetie-portrait { margin-bottom:12px; }
.current-status { margin-top:4px; }
.intro-details { margin-bottom:12px; }
.hero-scene,.touch-opening .hero-scene { padding-bottom:24px; }
/* A quieter legal link keeps its generous click target. */
.site-footer { padding-bottom:12px; }
.privacy-link { font-size:12px; }
.footer-name { margin-top:0; font:28px/.95 var(--serif); letter-spacing:-.05em; }
.footer-name-second { font-size:.65em; font-style:italic; white-space:nowrap; }
@media(forced-colors:active) { html { background:Canvas; scrollbar-color:auto; } }
/* An overlay scroll thumb reserves no colored rail or layout width. */
html { scrollbar-gutter:auto; scrollbar-width:none; }
html::-webkit-scrollbar { display:none; width:0; height:0; }
.site-scrollbar { position:fixed; z-index:8; inset:12px 0 12px auto; width:24px; touch-action:none; user-select:none; cursor:default; }
.site-scrollbar[hidden] { display:none!important; }
.site-scrollbar-thumb { position:absolute; top:0; right:0; width:24px; height:var(--thumb-height,36px); transform:translateY(var(--thumb-y,0px)); cursor:grab; }
.site-scrollbar-thumb::before { content:""; position:absolute; inset:0 3px 0 auto; width:3px; background:linear-gradient(transparent,var(--control-rule) 12%,var(--control-rule) 88%,transparent); clip-path:polygon(50% 0,100% 7%,100% 93%,50% 100%,0 93%,0 7%); opacity:.55; }
.site-scrollbar:hover .site-scrollbar-thumb::before,.site-scrollbar:focus-visible .site-scrollbar-thumb::before,.site-scrollbar.is-dragging .site-scrollbar-thumb::before { opacity:1; }
.site-scrollbar.is-dragging .site-scrollbar-thumb { cursor:grabbing; }
.site-scrollbar:focus-visible { outline:none; }
.site-scrollbar:focus-visible .site-scrollbar-thumb::before { width:4px; }
@media(forced-colors:active) { html { scrollbar-gutter:stable; scrollbar-width:auto; } html::-webkit-scrollbar { display:block; width:auto; height:auto; } .site-scrollbar { display:none!important; } }

/* Keep the retained touch composition on a fixed layout slot. Only the image
   and the rows following it move on compositor transforms during first reveal. */
html.touch-opening,html.touch-opening body { overflow-anchor:none; }
html.touch-opening:not(.gallery-expanded) #hero.is-motion-enabled .portrait-zoom { height:calc(var(--portrait-width) * 4 / 3); }
html.touch-opening:not(.gallery-expanded) #hero.is-motion-enabled .gallery-bar,
html.touch-opening:not(.gallery-expanded) #hero.is-motion-enabled .intro-details,
html.touch-opening:not(.gallery-expanded) #hero.is-motion-enabled .gallery-scroll-toggle { transform:translateY(var(--opening-lift,0px)); }
html.touch-opening:not(.gallery-expanded) #hero[data-phase="opening"] .portrait-image { will-change:transform; }
/* The page scrolls on one vertical axis; the gallery owns its own gesture. */
html,body { touch-action:pan-y; }
.portrait-image,.touch-gallery-held .portrait-image { touch-action:none; }
.page-shell,.gallery-dialog { -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }
input,textarea,[contenteditable="true"] { -webkit-user-select:text; user-select:text; touch-action:manipulation; }
.page-shell :is(a,button,summary),.gallery-dialog button { -webkit-touch-callout:none; }