/* ISMAGILOFF — portrait-led studio direction. */
:root{--paper:#eeede9;--dim:#aba9a2;--pad:clamp(22px,5vw,90px)}
::selection{background:#bda06a;color:#090909}
html{scrollbar-color:#6c6b65 #101010;scroll-padding-top:110px}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid #bda06a;outline-offset:6px}
a{text-underline-offset:5px}
.site-header{backdrop-filter:none;background:#101010f5}
.home .site-header{background:#030303f5}
.site-header nav a{font-size:14px}
.hero-caption,.hero-quote-source{font-size:12px}
.hero-enter{position:absolute;left:var(--pad);bottom:24px;display:flex;gap:32px;align-items:center;min-height:44px;font-size:13px;z-index:8}
.hero-enter span{font-size:22px;transition:transform .3s}
.hero-enter:hover span{transform:translateY(4px)}
.hero-caption a{display:inline-flex;align-items:center;min-height:44px}
.home .intro{grid-template-columns:1fr 5fr;gap:0;padding-top:130px;padding-bottom:130px;background:#eeede9}
.home .intro:before{display:none}
.home .intro-roots{padding-top:12px}
.home .ornament-roots{width:72px;margin:0}
.home .intro h2{font-size:clamp(64px,8.7vw,132px);font-weight:400;line-height:.98;letter-spacing:-.04em}
.home .intro h2 span{color:inherit}
.home .intro-bottom{margin-top:68px;grid-template-columns:1.35fr 1fr;gap:10%;align-items:end}
.home .intro-bottom p{font-size:18px;line-height:1.65;max-width:520px}
.home .intro .line-link{border-color:#22221e;color:#22221e}
.home .intro .line-link span{color:#22221e}
/* Portraits are the architecture: no enclosing cards or horizontal scroll trap. */
.portrait-grid{padding:110px 0 0;background:#030303}
.portrait-grid .generation-heading{padding:0 var(--pad) 70px}
.portrait-grid .generation-heading h2{font-weight:400;font-size:clamp(46px,6.7vw,100px);line-height:1;letter-spacing:-.04em;margin:0;max-width:10ch}
.portrait-grid .generation-viewport{overflow:visible;padding:0;scroll-snap-type:none}
.portrait-grid .generation-track{display:grid;grid-template-columns:1fr 1fr;gap:1px;width:100%;background:#262626}
.portrait-grid .generation-card{width:auto;min-width:0;height:clamp(640px,59vw,850px);border:0;background:#030303;isolation:isolate}
.portrait-grid .portrait-card>img{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:none;mask-image:none;filter:grayscale(1) brightness(.83);transition:transform .9s cubic-bezier(.16,1,.3,1),filter .9s;mix-blend-mode:normal}
.portrait-grid .portrait-card:after{background:linear-gradient(180deg,transparent 36%,#03030330 54%,#030303ed 86%,#030303 100%);z-index:0}
.portrait-grid .generation-card-content{top:auto;left:var(--pad);right:var(--pad);bottom:40px;width:auto;display:block}
.portrait-grid .generation-card h3{font-size:clamp(56px,6.3vw,96px);font-weight:400;letter-spacing:-.04em;line-height:.98;margin:0 0 22px}
.portrait-grid .generation-card h3 span{display:block;font-size:16px;font-weight:400;letter-spacing:0;line-height:1.4;margin-top:12px}
.portrait-grid .generation-card p{color:#c0beb7;font-size:14px;line-height:1.6;margin-bottom:28px}
.portrait-grid .generation-card .line-link{font-size:13px;max-width:none;min-height:44px;padding-bottom:14px;border-color:#55544e}

.portrait-grid .generation-card:focus-within{outline:2px solid var(--accent);outline-offset:-3px}
@media(hover:hover){.portrait-grid .generation-card:hover>img{transform:scale(1.025);filter:grayscale(1) brightness(.98)}}
.home .motion-story{padding:120px var(--pad);grid-template-columns:1fr 1.65fr;gap:6vw;background:#101010}
.home .motion-story h2{font-size:clamp(48px,5vw,76px);font-weight:400;line-height:1;letter-spacing:-.04em;margin:0 0 36px}
.home .motion-story-copy p{font-size:16px;line-height:1.65;color:#b6b4ae}
.home .motion-story .textlink{font-size:14px;color:#eeede9}
.home .family-preview{padding-top:130px;padding-bottom:130px;grid-template-columns:1fr 1.4fr}
.home .family-preview h2{font-size:clamp(56px,6.5vw,98px);font-weight:400;line-height:1;letter-spacing:-.04em;margin:0 0 34px}
.home .family-preview p,.home .archive-preview p{font-size:17px;line-height:1.65;color:#b6b4ae}
.home .archive-preview{padding-top:110px;padding-bottom:140px;grid-template-columns:1.2fr 1fr;gap:10%;background:#0b0b0b}
.home .archive-preview-image{transform:none;background:transparent;border:0;box-shadow:none;padding:0 10%}
.home .archive-preview-image img{height:auto;max-height:650px;box-shadow:none;width:auto;filter:grayscale(.6)}
.home .archive-preview h2{font-size:clamp(70px,9vw,140px);font-weight:400;line-height:1;letter-spacing:-.04em;margin:0 0 40px}
.home .site-footer{border-top:1px solid #333}
.home .site-footer .ornament-rule{display:none}
.light-section .source{color:#65635b}
@media(max-width:1000px){
 .portrait-grid .generation-card{height:650px}
 .portrait-grid .generation-card-content{left:32px;right:32px}
 .portrait-grid .generation-card h3{font-size:64px}
 .home .intro{grid-template-columns:1fr 5fr}
 .home .intro h2{font-size:9.5vw}
 .home .intro-bottom{grid-template-columns:1fr;gap:32px;max-width:560px}
 .home .intro .line-link{max-width:320px}
 .home .motion-story{grid-template-columns:1fr 1.3fr;gap:40px}
 .home .motion-story h2{font-size:48px}
}
@media(max-width:700px){
 .home .intro{display:block;padding-top:75px;padding-bottom:80px}
 .home .intro-roots{display:none}
 .home .intro h2{font-size:13.3vw;line-height:1.02}
 .home .intro-bottom{margin-top:38px;gap:32px}
 .home .intro-bottom p{font-size:16px}
 .portrait-grid{padding-top:75px}
 .portrait-grid .generation-heading{padding-bottom:44px}
 .portrait-grid .generation-heading h2{font-size:12.5vw;max-width:10ch}
 .portrait-grid .generation-track{grid-template-columns:1fr}
 .portrait-grid .generation-card{height:clamp(660px,155vw,850px)}
 .portrait-grid .generation-card-content{left:var(--pad);right:var(--pad);bottom:30px}
 .portrait-grid .generation-card h3{font-size:72px}
 .portrait-grid .generation-card h3 span{font-size:15px}
 .portrait-grid .generation-card p{font-size:14px;margin-bottom:20px}
 
 .home .motion-story{padding:75px 0;display:block}
 .home .motion-story-copy{padding:0 var(--pad) 40px}
 .home .motion-story h2{font-size:13.3vw;max-width:8ch;margin-bottom:24px}
 .home .family-preview{padding-top:75px;padding-bottom:75px;grid-template-columns:1fr;gap:35px}
 .home .family-preview h2{font-size:13.3vw}
 .home .archive-preview{padding-top:75px;padding-bottom:75px;grid-template-columns:1fr;gap:45px}
 .home .archive-preview h2{font-size:22vw;margin-bottom:25px}
 .home .archive-preview-image{order:2;padding:0 12%}
 .home .archive-preview-image img{max-height:520px}
 .home .family-preview p,.home .archive-preview p{font-size:16px}
}
@media(max-width:600px){
 .hero-index{font-size:12px;top:105px;max-width:58%;text-align:right}
 .hero-copy{top:171px}
 .hero-quote-source{font-size:12px;margin-top:9px}
 .hero-copy .hero-quote{font-size:34px}
 .hero-translation{font-size:14px}
 .hero-caption{bottom:17px;font-size:12px}
 .hero-enter{bottom:17px;font-size:12px;gap:18px}
 .hero-image{top:42%;height:51%}
 .hero-name{bottom:12%}
 .ornament-hero{top:111px;width:90px}
 .footer-top>div{gap:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{transition:none!important}.portrait-grid .generation-card:hover>img{transform:none}}

.portrait-grid .portrait-hit{position:absolute;inset:0;z-index:3}
.portrait-grid .portrait-hit:focus-visible{outline-offset:-5px}
.portrait-grid .portrait-note{font-size:12px;line-height:1.6;color:#aba9a2;align-self:flex-end;min-height:44px;display:flex;align-items:center;border-bottom:1px solid #55544e}
.home .site-footer{padding-top:45px}
@media(max-width:700px){.portrait-grid .portrait-note{margin-top:26px;width:fit-content}.home .site-footer{padding-top:35px}}

/* One drawn icon family across links and controls. */
.ui-icon{display:inline-block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:square;stroke-linejoin:miter;vertical-align:-.2em;flex:none;pointer-events:none}
.ui-icon path{fill:none}
.close .ui-icon{width:24px;height:24px}
.lineage-caption,.footer-bottom{font-size:11px}
/* Three.js writes an inline display rule when it creates its canvas. */
@media(max-width:700px){.lineage-visual canvas{display:none!important}.lineage-visual .lineage-fallback{visibility:visible}.lineage-caption{display:none}}