@font-face{font-family:"Noto Serif Display";src:url("../assets/fonts/NotoSerifDisplay-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif Display";src:url("../assets/fonts/NotoSerifDisplay-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans";src:url("../assets/fonts/NotoSans-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans";src:url("../assets/fonts/NotoSans-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}

:root{
  --p-ivory:oklch(0.962 0.012 72);
  --p-paper:oklch(0.976 0.006 72);
  --p-ink:oklch(0.255 0.008 65);
  --p-ink-soft:oklch(0.39 0.009 65);
  --p-gold:oklch(0.75 0.105 79);
  --p-line:oklch(0.84 0.014 72);
  --surface:var(--p-ivory);
  --surface-raised:var(--p-paper);
  --text:var(--p-ink);
  --text-soft:var(--p-ink-soft);
  --accent:var(--p-gold);
  --border:var(--p-line);
  --header-fg:var(--p-paper);
  --serif:"Noto Serif Display",Georgia,serif;
  --sans:"Noto Sans",Arial,sans-serif;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-exit:cubic-bezier(0.25,0.46,0.45,0.94);
  --shell:min(1320px,calc(100% - 32px));
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{min-width:320px;background:var(--surface);color:var(--text);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body.lightbox-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
h1,h2,h3,p{overflow-wrap:break-word}
h1,h2{font-family:var(--serif);font-weight:300;line-height:.98;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:clamp(2.75rem,10vw,5.8rem)}
figure{margin:0}
::selection{background:var(--accent);color:var(--p-ink)}
.page-shell{width:var(--shell);margin-inline:auto}
.section-label{font-size:.7rem;font-weight:500;line-height:1.4;letter-spacing:.18em;text-transform:uppercase}
.section-label::before{content:"";display:inline-block;width:28px;height:1px;margin-right:12px;vertical-align:middle;background:currentColor}
.body-copy{max-width:65ch;color:var(--text-soft)}
.skip-link{position:fixed;top:8px;left:8px;z-index:20;padding:12px 16px;background:var(--surface-raised);color:var(--text);transform:translateY(-150%);transition:transform .18s var(--ease-out)}
.skip-link:focus{transform:translateY(0)}

.site-header{position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;min-height:72px;padding:12px 16px;color:var(--header-fg);transition:background-color .25s,color .25s,transform .25s var(--ease-out)}
.site-header.scrolled,.site-header.nav-open{--header-fg:var(--p-ink);background:color-mix(in oklab,var(--surface) 94%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid color-mix(in oklab,var(--border) 65%,transparent)}
.brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--serif);font-size:1.5rem;letter-spacing:.04em}
.brand span{color:var(--accent)}
.menu-toggle{display:flex;align-items:center;gap:10px;min-width:44px;min-height:44px;border:0;background:transparent;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.menu-toggle i,.menu-toggle i::before{content:"";display:block;width:20px;height:1px;background:currentColor;transition:transform .2s var(--ease-out)}
.menu-toggle i{position:relative}
.menu-toggle i::before{position:absolute;top:6px;left:0}
.nav-open .menu-toggle i{transform:rotate(45deg) translateY(3px)}
.nav-open .menu-toggle i::before{transform:rotate(-90deg) translate(-6px)}
.main-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:16px 24px 24px;background:var(--surface);color:var(--text);border-bottom:1px solid var(--border)}
.nav-open .main-nav{display:grid}
.main-nav a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--border);font-family:var(--serif);font-size:1.6rem;transition:color .2s}
.main-nav a:hover{color:var(--p-ink-soft)}

.hero{position:relative;isolation:isolate;min-height:100svh;min-height:100dvh;display:flex;align-items:flex-end;overflow:hidden;background:var(--p-ink)}
.hero-image,.hero-shade{position:absolute;inset:0;width:100%;height:100%}
.hero-image{z-index:-2;object-fit:cover;object-position:52% center;animation:hero-enter 1.2s var(--ease-out) both}
.hero-shade{z-index:-1;background:linear-gradient(180deg,rgba(20,18,15,.28) 0%,rgba(20,18,15,0) 38%,rgba(20,18,15,.76) 100%)}
.hero-content{padding-bottom:64px;color:var(--p-paper)}
.hero-kicker{margin-bottom:20px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.hero-kicker span{padding-inline:8px;color:var(--accent)}
.hero h1{max-width:1100px;font-size:clamp(3.5rem,15vw,9.5rem);color:var(--p-paper)}
.hero h1 em{font-weight:300;font-style:normal;color:var(--accent)}
.hero-link{display:inline-flex;align-items:center;gap:16px;min-height:48px;margin-top:28px;padding-bottom:4px;border-bottom:1px solid currentColor;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;transition:gap .25s var(--ease-out)}
.hero-link:hover{gap:24px}
.hero-side{display:none}
@keyframes hero-enter{from{opacity:.4;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}

.opening{display:grid;gap:40px;padding-block:104px}
.opening-number{font-family:var(--serif);font-size:clamp(8rem,38vw,15rem);font-weight:300;line-height:.7;color:var(--accent);letter-spacing:-.08em}
.opening-copy{display:grid;gap:24px}
.opening-copy h2{font-size:clamp(2.6rem,10vw,5.2rem)}
.opening-copy>p:last-child{max-width:62ch;color:var(--text-soft);font-size:1.05rem}

.story{display:grid;gap:32px;padding-bottom:112px}
.story-heading{display:grid;gap:20px}
.story-photo{overflow:hidden;background:var(--border)}
.story-photo img{width:100%;height:100%;object-fit:cover;transition:transform .25s var(--ease-exit)}
.story-photo:hover img{transform:scale(1.025)}
.story-photo-main{aspect-ratio:3/2}
.story-photo-detail{aspect-ratio:4/3}
.quote{max-width:28ch;font-family:var(--serif);font-size:clamp(1.75rem,6vw,3rem);font-weight:300;line-height:1.15;letter-spacing:-.02em}
.quote p{position:relative}
.quote p::before{content:"";display:block;width:40px;height:1px;margin-bottom:24px;background:var(--accent)}
.quote-pacto{padding-block:24px}

.family{background:var(--p-ink);color:var(--p-paper)}
.family-photo{height:58vw;min-height:300px;max-height:760px;overflow:hidden}
.family-photo img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.family-content{display:grid;gap:48px;padding-block:64px 80px}
.family-content>div{display:grid;gap:20px}
.quote-light{margin-left:auto}
.quote-light p::before{background:var(--accent)}

.legacy{display:grid;gap:32px;padding-block:104px}
.legacy-copy{display:grid;gap:20px}
.legacy-portrait{width:78%;margin-left:auto}
.legacy-portrait img,.legacy-wide img{width:100%;height:100%;object-fit:cover}
.legacy-portrait{aspect-ratio:2/3}
.legacy-wide{aspect-ratio:3/2}
.quote-legacy{padding-block:24px}

.film{padding-block:80px;background:var(--p-ink);color:var(--p-paper)}
.film-heading{display:grid;gap:28px;margin-bottom:40px}
.film-heading>div{display:grid;gap:20px}
.film-heading>p{max-width:48ch;color:var(--p-paper);font-size:1rem}
.video-responsive{position:relative;aspect-ratio:16/9;background:oklch(0.19 0.006 65)}
.video-responsive iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:var(--p-ink);color:var(--p-paper);overflow:hidden;text-align:left}
.video-poster>img{width:100%;height:100%;object-fit:cover;object-position:center 38%;transition:transform .25s var(--ease-exit)}
.video-poster:hover>img{transform:scale(1.025)}
.video-poster-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,22,18,.08),rgba(25,22,18,.66))}
.play-label{position:absolute;left:20px;bottom:48px;display:inline-flex;align-items:center;gap:12px;min-height:48px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.play-label svg{width:44px;height:44px;padding:12px;border:1px solid currentColor;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;transition:background-color .2s,color .2s}
.video-poster:hover .play-label svg{background:var(--p-paper);color:var(--p-ink)}
.video-duration{position:absolute;left:20px;bottom:16px;font-size:.68rem;letter-spacing:.06em}
.text-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:20px;border-bottom:1px solid currentColor;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}

.gratitude{padding-block:104px}
.gratitude>h2{margin-top:24px;font-size:clamp(2.6rem,9vw,5.6rem)}
.gratitude-grid{display:grid;gap:40px;margin-top:56px}
.gratitude-grid figure{aspect-ratio:3/2;overflow:hidden}
.gratitude-grid img{width:100%;height:100%;object-fit:cover}
.gratitude-grid .quote{align-self:center}

.gallery-section{padding-bottom:112px}
.gallery-heading{display:grid;gap:24px;margin-bottom:48px}
.gallery-heading>div{display:grid;gap:20px}
.gallery-heading>p{align-self:end;color:var(--text-soft);font-size:.78rem;letter-spacing:.04em}
.gallery-grid{columns:2;column-gap:8px}
.gallery-item{display:block;width:100%;margin:0 0 8px;padding:0;border:0;background:var(--border);break-inside:avoid;overflow:hidden;position:relative}
.gallery-item img{width:100%;transition:transform .25s var(--ease-exit),opacity .2s}
.gallery-item::after{content:"+";position:absolute;right:10px;bottom:8px;display:grid;place-items:center;width:30px;height:30px;background:var(--surface-raised);color:var(--text);font-family:var(--serif);font-size:1.5rem;opacity:0;transform:scale(.9);transition:opacity .18s,transform .18s}
.gallery-item:hover img{transform:scale(1.025)}
.gallery-item:hover::after,.gallery-item:focus-visible::after{opacity:1;transform:scale(1)}

.download{position:relative;isolation:isolate;min-height:720px;display:flex;align-items:center;overflow:hidden;background:var(--p-ink);color:var(--p-paper)}
.download-photo{position:absolute;inset:0;z-index:-2}
.download-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,22,18,.9),rgba(25,22,18,.5))}
.download-photo img{width:100%;height:100%;object-fit:cover;object-position:58% center}
.download-content{display:grid;gap:28px;padding-block:88px}
.download-content h2{font-size:clamp(3rem,11vw,6rem)}
.download-content>p:not(.section-label){max-width:46ch;font-size:1.05rem}
.download-button{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;width:fit-content;max-width:100%;min-height:56px;margin-top:8px;padding:16px 20px;background:var(--accent);color:var(--p-ink);font-size:.75rem;font-weight:500;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;transition:background-color .2s,transform .2s var(--ease-out)}
.download-button:hover{background:var(--p-paper);transform:translateY(-2px)}
.download-button svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.site-footer{display:grid;gap:16px;padding-block:40px;color:var(--text-soft);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.site-footer>p:first-child{font-family:var(--serif);font-size:1.5rem;letter-spacing:0;text-transform:none;color:var(--text)}
.site-footer>p:first-child span{color:var(--accent)}
.site-footer a{display:inline-flex;align-items:center;min-height:44px;width:fit-content}

.lightbox{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:20px 16px;border:0;background:var(--p-ink);color:var(--p-paper);overflow:hidden}
.lightbox[open]{display:grid;grid-template-rows:48px minmax(0,1fr) 40px;animation:lightbox-in .2s var(--ease-out)}
.lightbox::backdrop{background:var(--p-ink)}
.lightbox-top{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;letter-spacing:.12em}
.lightbox-close,.lightbox-arrow{display:grid;place-items:center;width:44px;height:44px;border:1px solid color-mix(in oklab,var(--p-paper) 40%,transparent);background:transparent;transition:background-color .18s,color .18s}
.lightbox-close:hover,.lightbox-arrow:hover{background:var(--p-paper);color:var(--p-ink)}
.lightbox svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lightbox-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
.lightbox-stage img{width:100%;height:100%;max-height:calc(100dvh - 150px);object-fit:contain}
.lightbox-arrow{position:absolute;z-index:1;top:50%;transform:translateY(-50%);background:color-mix(in oklab,var(--p-ink) 72%,transparent)}
.lightbox-prev{left:0}
.lightbox-next{right:0}
.lightbox-caption{text-align:center;font-size:.75rem;color:var(--p-paper)}
@keyframes lightbox-in{from{opacity:0}to{opacity:1}}

@media (min-width:700px){
  :root{--shell:min(1320px,calc(100% - 80px))}
  .site-header{padding-inline:40px}
  .opening{grid-template-columns:4fr 7fr;align-items:center;gap:7vw;padding-block:144px}
  .opening-number{font-size:clamp(12rem,24vw,20rem)}
  .story{grid-template-columns:repeat(12,1fr);gap:24px;padding-bottom:144px}
  .story-heading{grid-column:1/7;grid-row:1;align-self:start}
  .story-photo-main{grid-column:7/13;grid-row:1/4;aspect-ratio:4/5}
  .quote-pacto{grid-column:2/7;grid-row:2;padding-block:64px}
  .story-photo-detail{grid-column:1/6;grid-row:3;aspect-ratio:3/2}
  .family-content{grid-template-columns:1fr 1fr;gap:64px;padding-block:88px 104px}
  .legacy{grid-template-columns:repeat(12,1fr);gap:24px;padding-block:144px}
  .legacy-copy{grid-column:1/7;grid-row:1}
  .legacy-portrait{grid-column:8/13;grid-row:1/4;width:100%;margin:0}
  .quote-legacy{grid-column:2/7;grid-row:2;padding-block:56px}
  .legacy-wide{grid-column:1/7;grid-row:3;aspect-ratio:4/3}
  .film{padding-block:112px}
  .film-heading{grid-template-columns:1.4fr 1fr;align-items:end;gap:64px;margin-bottom:56px}
  .film-heading>p{justify-self:end;padding-bottom:8px}
  .gratitude{padding-block:144px}
  .gratitude-grid{grid-template-columns:7fr 5fr;gap:64px;margin-top:72px}
  .gallery-heading{grid-template-columns:1fr auto;align-items:end;margin-bottom:64px}
  .gallery-grid{columns:3;column-gap:16px}
  .gallery-item{margin-bottom:16px}
  .download{min-height:780px}
  .download-content{gap:32px}
  .download-button{padding:18px 24px}
  .site-footer{grid-template-columns:1fr auto auto;align-items:center;gap:40px}
  .lightbox{padding:24px 32px}
  .lightbox-stage{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:20px}
  .lightbox-arrow{position:static;transform:none;background:transparent}
}

@media (min-width:1000px){
  .site-header{min-height:88px}
  .menu-toggle{display:none}
  .main-nav{position:static;display:flex;align-items:center;gap:32px;padding:0;background:transparent;color:inherit;border:0}
  .main-nav a{position:relative;min-height:44px;border:0;font-family:var(--sans);font-size:.69rem;letter-spacing:.13em;text-transform:uppercase}
  .main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .25s var(--ease-out)}
  .main-nav a:hover::after{transform:scaleX(1);transform-origin:left}
  .hero-content{padding-bottom:80px}
  .hero-side{display:block;position:absolute;right:30px;bottom:80px;color:var(--p-paper);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}
  .gallery-grid{columns:4}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}