/* Typography follows the Madeo presentation's scale and rhythm. */
:root{--page-space:clamp(26px,4vw,84px);--section-space:clamp(72px,8vw,138px)}
body{font:18px/1.6 Graphik,Arial,sans-serif}h1,h2,h3{font-weight:400;font-style:normal;line-height:1.06}h1{letter-spacing:-.04em!important}h2{letter-spacing:-.025em!important}h2 em,.hero-sub,.photo-caption,.gallery-head p,.collection-strip{font-style:normal}
.hero h1{font-size:clamp(75px,7.6vw,122px);line-height:1.06;letter-spacing:-.04em!important;margin:24px 0 22px}.hero-copy{left:var(--page-space);width:52%;top:31%}.hero-sub{font-size:clamp(24px,2.15vw,34px);line-height:1.4}.hero .eyebrow{max-width:350px}.eyebrow,.section-number{font:600 14px/1.6 Graphik,Arial,sans-serif;letter-spacing:.15em;margin-bottom:24px}.nav a,.circle-link{font-size:14px;letter-spacing:.1em}.hero header{padding:24px var(--page-space)}.hero-foot{left:var(--page-space);right:var(--page-space)}.hero-foot p{font-size:18px;line-height:1.6}.hero-float small{font-style:normal}.intro,.voice,.gallery,.story{padding:var(--section-space) var(--page-space)}.intro{grid-template-columns:34% 1fr;gap:6vw}.intro h2,.voice h2,.gallery h2,.story h2,.chapter-heading{font:400 clamp(42px,4.1vw,70px)/1.06 Domaine,Georgia,serif!important;margin:0 0 22px;letter-spacing:-.025em!important}.voice h2{margin-top:24px}.body-copy,.story p{font:18px/1.65 Graphik,Arial,sans-serif;max-width:580px}.story .birth{font:30px/1.4 Domaine,Georgia,serif}.gallery-head{margin-bottom:56px}.gallery-head p{font:clamp(22px,2.15vw,34px)/1.4 Domaine,Georgia,serif;max-width:340px}.photo-caption,.photo-grid .photo-caption{font:30px/1.2 Domaine,Georgia,serif}.photo-grid figcaption{font:14px/1.6 Graphik,Arial,sans-serif;letter-spacing:.04em}.voice{gap:6vw}.voice-art{max-width:650px}.record-label b{font-style:normal}.record-label small{font:13px/1.4 Graphik,Arial,sans-serif;letter-spacing:.08em}.voice-art>small{font-size:14px}.video-note{font-size:17px;line-height:1.6}.story .source-note{font-family:Graphik,Arial,sans-serif}.family-names h3{font:30px/1.2 Domaine,Georgia,serif}.gallery-page h1{font:400 clamp(70px,7.6vw,122px)/1.06 Domaine,Georgia,serif;letter-spacing:-.04em}.all-photos .photo-caption{font:26px/1.25 Domaine,Georgia,serif}.all-photos figcaption{font-family:Graphik,Arial,sans-serif}
/* The title exits completely before the full-bleed photograph holds. */
.bridge{height:245svh}.bridge h2{font:400 clamp(48px,6.3vw,108px)/1.06 Domaine,Georgia,serif;letter-spacing:-.025em!important;transform:translateY(var(--title-y,-120vh));opacity:var(--title-opacity,0);will-change:transform,opacity}.bridge-photo:after{background:rgba(0,0,0,var(--shade,.18))}.bridge small{opacity:var(--title-opacity,0)}
/* Mixed-direction photograph and text entrances. */
.motion-ready .reveal{transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1),clip-path 1.1s cubic-bezier(.2,.7,.2,1)}.motion-ready .reveal:not(.shown){transform:translate3d(0,75px,0)}.motion-ready .reveal.from-left:not(.shown){transform:translate3d(-100px,0,0)}.motion-ready .reveal.from-right:not(.shown){transform:translate3d(100px,0,0)}.motion-ready .reveal.unfold:not(.shown){clip-path:inset(0 0 100% 0);transform:translateY(25px)}.motion-ready .reveal.unfold.shown{clip-path:inset(0)}
/* Family chapters and photographs used as quiet, immersive interludes. */
.feature-spread{padding:var(--section-space) var(--page-space);background:#edbf59;color:#174738;display:grid;grid-template-columns:34% 1fr;gap:6vw;align-items:center}.feature-spread .spread-copy{max-width:420px}.feature-spread .eyebrow{color:#805016}.feature-spread p{font-size:19px;line-height:1.65}.piano-pair{display:grid;grid-template-columns:1fr .68fr;align-items:start;gap:25px}.piano-pair figure:nth-child(2){margin-top:120px}.piano-pair img{width:100%;display:block;filter:contrast(1.05) saturate(.78)}.piano-pair .photo-button{aspect-ratio:3/4}.piano-pair .photo-button img{height:100%;object-fit:cover;object-position:center 28%}.piano-pair figcaption{display:block;font:14px/1.6 Graphik;margin-top:14px;color:#174738}.image-interlude{height:155svh;position:relative;background:#173d32}.interlude-frame{height:100svh;position:sticky;top:0;overflow:hidden}.interlude-frame img{display:block;width:100%;height:120%;object-fit:cover;object-position:center 38%;transform:translateY(var(--parallax,-6%));will-change:transform}.image-interlude.pool .interlude-frame img{object-position:50% 38%}.image-interlude.waterfront{height:135svh}.waterfront .interlude-frame img{object-position:center 45%}.theme-label{font:600 14px/1.5 Graphik;letter-spacing:.15em;text-transform:uppercase;border-top:1px solid #17473855;padding-top:20px;margin:0 0 38px;color:#174738}.theme-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:7vw;align-items:start;margin-bottom:100px}.theme-grid figure:nth-child(2){margin-top:100px}.theme-grid .photo-button{aspect-ratio:4/3}.theme-grid img{width:100%;height:100%;object-fit:cover}.theme-grid figcaption{display:block}.theme-grid .photo-caption{display:block;margin-bottom:10px}.theme-grid figcaption>span:last-child{font:14px/1.6 Graphik}.photo-grid figure:nth-child(n){margin:0}.photo-grid figure:nth-child(even){margin-top:90px}.photo-grid{gap:70px 6vw}
@media(max-width:700px){body{font-size:18px}.hero h1{font-size:75px}.hero-copy{width:86%;top:auto;bottom:185px}.hero-sub{font-size:27px}.hero-foot p{font-size:16px}.intro{display:block}.intro h2{margin-top:24px}.intro h2,.voice h2,.gallery h2,.story h2,.chapter-heading{font-size:43px!important;line-height:1.08!important}.feature-spread{grid-template-columns:1fr;gap:40px}.piano-pair{gap:16px;grid-template-columns:1fr .75fr}.piano-pair figure:nth-child(2){margin-top:65px}.piano-pair figcaption{font-size:14px}.bridge{height:230svh}.bridge h2{font-size:clamp(44px,11vw,68px)}.theme-grid{grid-template-columns:1fr;gap:38px;margin-bottom:70px}.theme-grid figure:nth-child(2){margin-top:0;width:86%;justify-self:end}.photo-grid figure:nth-child(even){margin-top:0}.photo-grid{gap:45px}.gallery-head p{font-size:24px}.image-interlude{height:135svh}.interlude-frame{height:85svh}.image-interlude.pool img{object-position:50% 35%}.image-interlude.waterfront{height:115svh}.waterfront .interlude-frame{height:75svh}.body-copy,.story p{font-size:18px}.gallery-page h1{font-size:70px}}
@media(prefers-reduced-motion:reduce){.bridge{height:100svh}.bridge h2,.bridge small{display:none}.bridge-photo{clip-path:none}.bridge-photo:after{background:transparent}.image-interlude{height:85svh}.interlude-frame{position:relative;height:100%}.interlude-frame img{height:100%;transform:none}.motion-ready .reveal{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}}
/* Keep an observable area while the text unfolds. */
.motion-ready .reveal.unfold:not(.shown){clip-path:inset(0);transform:translateY(28px) scaleY(.86);transform-origin:top center}
html{overflow-x:clip}
.piano-pair figcaption>span{display:block}.piano-pair .photo-caption{font:30px/1.2 Domaine,Georgia,serif;margin-bottom:10px}.piano-pair figcaption>span:last-child{font:14px/1.6 Graphik,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase}@media(max-width:700px){.piano-pair .photo-caption{font-size:24px}.piano-pair figcaption>span:last-child{font-size:13px}}
/* Each line falls into view and retreats independently with the scroll. */
.bridge h2{transform:none;opacity:1;will-change:auto}.falling-line{display:block;transform:translateY(-115vh);opacity:0;will-change:transform,opacity}.falling-line em{display:block}@media(prefers-reduced-motion:reduce){.falling-line{transform:none!important;opacity:1!important}}
/* Michael's favorite colors: red, white and black, with gold accents. */
:root{--paper:#faf8f4;--ink:#171516;--green:#171516;--red:#a92232;--gold:#dfba70}
body,.gallery,.gallery-page{background:#faf8f4;color:#171516}.concept{background:#a92232;color:#fff}.opening,.hero{background:#171516}.hero:after{background:linear-gradient(90deg,#171516 0%,#171516ed 23%,#17151677 45%,transparent 78%),linear-gradient(0deg,#171516a0,transparent 50%)}.hero h1{color:#fff9ee}.hero-sub,.hero .eyebrow{color:#dfba70}.hero-foot p{color:#eee8de}.hero-float{background:#faf8f4;color:#171516}.intro{background:#faf8f4;border-color:#17151622}.intro h2 em{color:#a92232}.section-number{color:#8c2732}.bridge{background:#a92232}.bridge h2{color:#fff}.bridge h2 em{color:#dfba70}.voice{background:#171516;color:#faf8f4}.voice .eyebrow,.voice h2 em{color:#dfba70!important}.voice .body-copy,.voice .video-note{color:#eee8de}.voice-art{background:#a92232}.voice-art>small{color:#fff}.record-label{background:#dfba70;color:#171516}.video-status{border-color:#dfba7055}.video-status span{border-color:#dfba70}.feature-spread{background:#faf8f4;color:#171516}.feature-spread .eyebrow{color:#a92232}.feature-spread p,.piano-pair figcaption{color:#353033}.gallery h2{color:#a92232}.gallery .eyebrow{color:#8c2732!important}.gallery-head p{color:#403a3c}.theme-label{color:#a92232;border-color:#a9223244}.photo-caption,.photo-grid .photo-caption{color:#171516}.gallery-more .gallery-link:first-child{background:#a92232;color:#fff}.gallery-more .gallery-link{color:#171516}.collection-strip{background:#a92232;color:#fff}.collection-strip b{color:#dfba70}.story{background:#171516;color:#faf8f4}.story p,.family-names ul{color:#eee8de}.story .eyebrow,.story .birth,.story small{color:#dfba70}.family-names{border-color:#dfba7055}.family-names li span,.story .source-note{color:#d3c9bd!important}footer{background:#a92232;color:#fff}.image-interlude{background:#171516}.photo-button>span{background:#faf8f4ed;color:#171516}.gallery-page h1{color:#171516}.gallery-page .favorite{color:#a92232}.sheet-links a,.filters button{border-color:#a9223244;color:#171516}.filters button[aria-pressed=true]{background:#a92232;color:#fff}.sheet-links a:hover{background:#fff}.all-photos .photo-caption{color:#171516}
@media(max-width:700px){.hero:after{background:linear-gradient(0deg,#171516 2%,#171516 14%,#17151688 40%,#17151610 80%)}}
/* Clip horizontal entrances without creating a second scrolling container. */
html,body{overflow-x:clip;overflow-y:visible}
@media(min-width:701px){.image-interlude.pool .interlude-frame img{object-position:50% 8%}}
/* Three intentional visual lines, each with its own scroll timing. */
.bridge h2{width:100%;max-width:none;font-size:clamp(42px,6vw,102px);line-height:1.05}.falling-line{white-space:nowrap}.bridge{height:270svh}
/* Pool remains still; the waterfront has a much deeper travelling image. */
.pool .interlude-frame img{height:100%;transform:none;will-change:auto;object-position:50% 10%}.image-interlude.waterfront{height:190svh}.waterfront .interlude-frame img{height:155%;object-position:50% 10%;transform:translateY(var(--parallax,0%))}
@media(max-width:700px){.bridge{height:250svh}.bridge h2{font-size:clamp(34px,9vw,63px)}.image-interlude.pool .interlude-frame img{object-position:50% 35%}.image-interlude.waterfront{height:155svh}.waterfront .interlude-frame img{object-position:50% 28%}}
@media(prefers-reduced-motion:reduce){.bridge{height:100svh}.image-interlude.waterfront{height:85svh}.waterfront .interlude-frame img{height:100%;transform:none}}
/* Replay image entrances and unfold captions independently on each visit. */
.gallery-motion :is(.theme-grid,.photo-grid,.piano-pair,.all-photos) figure>.photo-button{opacity:0;transform:translate3d(0,100px,0);transition:opacity .85s ease,transform 1.25s cubic-bezier(.16,.75,.2,1);will-change:transform,opacity}
.gallery-motion figure[data-entrance=left]>.photo-button{transform:translate3d(-160px,0,0) rotate(-2deg)}.gallery-motion figure[data-entrance=right]>.photo-button{transform:translate3d(160px,0,0) rotate(2deg)}
.gallery-motion :is(.theme-grid,.photo-grid,.piano-pair,.all-photos) figure>figcaption{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(28px) scaleY(.72);transform-origin:top left;transition:opacity .65s ease .2s,clip-path 1s cubic-bezier(.16,.75,.2,1) .2s,transform 1s cubic-bezier(.16,.75,.2,1) .2s}
.gallery-motion :is(.theme-grid,.photo-grid,.piano-pair,.all-photos) figure.in-view>.photo-button{opacity:1;transform:translate3d(0,0,0) rotate(0)}.gallery-motion :is(.theme-grid,.photo-grid,.piano-pair,.all-photos) figure.in-view>figcaption{opacity:1;clip-path:inset(0);transform:translateY(0) scaleY(1)}
@media(max-width:700px){.gallery-motion figure[data-entrance=left]>.photo-button{transform:translate3d(-95px,0,0) rotate(-2deg)}.gallery-motion figure[data-entrance=right]>.photo-button{transform:translate3d(95px,0,0) rotate(2deg)}.gallery-motion :is(.theme-grid,.photo-grid,.piano-pair,.all-photos) figure.in-view>.photo-button{transform:none}}
@media(prefers-reduced-motion:reduce){.gallery-motion figure>.photo-button,.gallery-motion figure>figcaption{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}}
/* Full-bleed opening photograph, with a transparent reading gradient. */
.hero .portrait{width:100%;height:100%;object-position:50% 10%}.hero:after{background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.57) 24%,rgba(0,0,0,.18) 54%,rgba(0,0,0,0) 82%),linear-gradient(0deg,rgba(0,0,0,.5),transparent 42%)}
@media(max-width:700px){.hero .portrait{object-position:48% 16%}.hero:after{background:linear-gradient(0deg,rgba(0,0,0,.83) 0%,rgba(0,0,0,.58) 28%,rgba(0,0,0,.12) 65%,transparent),linear-gradient(90deg,rgba(0,0,0,.16),transparent 65%)}}
/* A window onto a stationary image, rather than a pinned scrolling section. */
.image-interlude.pool{height:88svh;position:relative;z-index:0;background:transparent}.pool .interlude-frame{position:fixed;inset:0;height:100svh;width:100%;overflow:hidden;clip-path:inset(var(--pool-top,100vh) 0 var(--pool-bottom,0px) 0);pointer-events:none}.pool .interlude-frame img{height:100%;width:100%;transform:none;object-position:50% 10%}
/* The portrait appears first; the site then assembles over it. */
.intro-playing .hero-copy>*{opacity:0;transform:translateY(-85px)}.intro-playing .hero-copy .eyebrow{animation:hero-fall 1s cubic-bezier(.16,.8,.2,1) 1.25s forwards}.intro-playing .hero-copy h1{animation:hero-fall 1.15s cubic-bezier(.16,.8,.2,1) 1.48s forwards}.intro-playing .hero-copy .hero-sub{animation:hero-fall 1.1s cubic-bezier(.16,.8,.2,1) 1.72s forwards}.intro-playing .hero header,.intro-playing .hero-foot{animation:hero-fade 1s ease 1.9s both}.intro-playing .hero:after{animation:hero-shade 2.7s ease both}@keyframes hero-fall{to{opacity:1;transform:translateY(0)}}@keyframes hero-fade{from{opacity:0}to{opacity:1}}@keyframes hero-shade{0%,35%{opacity:0}100%{opacity:1}}
@media(max-width:700px){.image-interlude.pool{height:80svh}.pool .interlude-frame img{object-position:50% 35%}}
@media(prefers-reduced-motion:reduce){.pool .interlude-frame{position:relative;clip-path:none;height:100%}.intro-playing .hero-copy>*,.intro-playing .hero header,.intro-playing .hero-foot,.intro-playing .hero:after{animation:none;opacity:1;transform:none}}
/* Name as an editorial graphic, rather than a modest title. */
.hero-copy{left:4vw;width:92%;top:32%;z-index:2}.hero h1{font-size:clamp(120px,20.5vw,360px);line-height:.86;letter-spacing:-.055em!important;margin:22px 0 26px}.hero .eyebrow{max-width:none;font:400 clamp(18px,1.5vw,27px)/1.35 Domaine,Georgia,serif;letter-spacing:.015em;text-transform:none;color:#faf4e7;margin:0 0 18px}.hero-sub{font:400 clamp(32px,4vw,68px)/1.12 Domaine,Georgia,serif;letter-spacing:-.025em;color:#dfba70;margin:0}.intro-playing .hero-copy h1{animation-duration:1.4s}.hero-copy h1{position:relative}.hero-copy{pointer-events:none}
@media(max-width:700px){.hero-copy{left:5%;width:90%;top:auto;bottom:170px}.hero h1{font-size:clamp(92px,22vw,155px);line-height:.92;margin:20px 0}.hero .eyebrow{font-size:20px;line-height:1.3;max-width:300px}.hero-sub{font-size:36px;line-height:1.15}.hero-foot{bottom:28px}}
.hero-foot p{display:none}.hero-foot .circle-link{margin-left:auto}@media(min-width:701px){.hero h1{font-size:clamp(120px,min(20.5vw,38svh),360px)}}
/* A longer window gives the stationary pool portrait a full-screen hold. */
.image-interlude.pool{height:240svh}@media(max-width:700px){.image-interlude.pool{height:220svh}}@media(prefers-reduced-motion:reduce){.image-interlude.pool{height:100svh}}
/* Clear the portrait before the floating photographs arrive. */
.hero-copy{opacity:var(--copy-opacity,1)}.hero-foot{opacity:var(--copy-opacity,1)}@media(prefers-reduced-motion:reduce){.hero-copy,.hero-foot{opacity:1}}
.hero-float{opacity:var(--float-opacity,0)}
/* All images flow through a horizontal, click-to-enlarge ribbon. */
.photo-ribbon{margin:90px calc(-1 * var(--page-space)) 0;padding:48px 0 32px;background:#171516;color:#faf8f4;overflow:hidden}.ribbon-heading{padding:0 var(--page-space);display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:32px}.ribbon-heading h3{font:400 clamp(32px,3vw,52px)/1.1 Domaine,Georgia,serif;margin:0;letter-spacing:-.025em}.ribbon-heading button{color:#dfba70;background:none;border:1px solid #dfba7070;padding:12px 18px;min-height:46px;font:14px Graphik;cursor:pointer}.ribbon-window{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#a92232 #171516;padding:0 0 18px;overscroll-behavior-x:contain}.ribbon-track{display:flex;width:max-content;gap:20px}.ribbon-group{display:flex;gap:20px;align-items:center;flex-shrink:0}.ribbon-photo{position:relative;width:220px;height:285px;flex:0 0 220px;border:0;padding:0;background:#292325;cursor:zoom-in;overflow:hidden;transition:transform .35s ease}.ribbon-photo:nth-child(3n+2){height:235px;width:290px;flex-basis:290px}.ribbon-photo img{width:100%;height:100%;display:block;object-fit:cover}.ribbon-photo:hover{transform:translateY(-7px)}.ribbon-photo span{position:absolute;bottom:10px;left:12px;background:#171516cc;color:white;font:14px/1 Graphik;padding:9px 11px}.ribbon-note{margin:24px var(--page-space) 0;font:16px/1.6 Graphik;color:#d5cfc5}.gallery-more{margin-top:40px}@media(max-width:700px){.ribbon-heading{align-items:start}.ribbon-heading h3{font-size:32px}.ribbon-heading button{font-size:13px;padding:10px}.ribbon-photo{width:180px;flex-basis:180px;height:235px}.ribbon-photo:nth-child(3n+2){width:230px;flex-basis:230px;height:190px}.ribbon-note{font-size:15px}}
/* A personal portrait anchors the life story alongside the biography. */
.story h2{position:static}.story-portrait{margin-top:42px;max-width:440px}.story-portrait .photo-button{aspect-ratio:4/5}.story-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}.story-portrait figcaption{color:#d9cdbb;font:14px/1.6 Graphik,Arial,sans-serif;letter-spacing:.04em;text-transform:none}.story-portrait figcaption span:first-child{font:26px/1.25 Domaine,Georgia,serif;color:#dfba70}.story-portrait .photo-button>span{background:#faf8f4e8}@media(max-width:700px){.story-portrait{margin:34px 0 45px;max-width:100%}.story-portrait .photo-button{aspect-ratio:4/5}}
/* A grand piano carries the musical thread into the life story. */
.story{background-color:#100e0d;background-image:linear-gradient(90deg,rgba(8,7,7,.38),rgba(8,7,7,.62) 48%,rgba(8,7,7,.76)),url('assets/grand-piano-background.png');background-size:cover;background-position:center center}.story p,.story .family-names ul{color:#f4f0e8}.story-portrait{box-shadow:0 18px 65px #0006}.story .source-note{color:#dcd3c7!important}@media(max-width:700px){.story{background-position:30% center;background-image:linear-gradient(rgba(8,7,7,.58),rgba(8,7,7,.78)),url('assets/grand-piano-background.png')}}
/* Move the instrument into the open right side and fade behind the portrait. */
.story{position:relative;isolation:isolate;overflow:hidden;background:#080707}.story:before{content:'';position:absolute;inset:0;z-index:-2;background:url('assets/grand-piano-background.png') left center/cover no-repeat;transform:translateX(20%);pointer-events:none}.story:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#080707 0%,rgba(8,7,7,.92) 22%,rgba(8,7,7,.64) 48%,rgba(8,7,7,.40) 78%,rgba(8,7,7,.48));pointer-events:none}@media(max-width:700px){.story{background:#080707}.story:before{transform:translateX(10%);background-position:38% center}.story:after{background:linear-gradient(90deg,rgba(8,7,7,.8),rgba(8,7,7,.68))}}
/* Keep the record label circular even when mobile text would set a larger minimum height. */
.record{container-type:inline-size;grid-template-columns:1fr;grid-template-rows:1fr}.record-label{width:34%;height:34%;min-width:0;min-height:0;aspect-ratio:1;align-self:center;justify-self:center;overflow:hidden}.record-label b{font-size:clamp(15px,7cqw,32px);line-height:1.1;flex-shrink:0}.record-label small{font-size:clamp(8px,3cqw,13px);line-height:1.2;margin:5% 0;white-space:nowrap;flex-shrink:0}.record-label:after{width:5%;height:5%;margin-top:3%;flex-shrink:0}